/* Skeleton-Loading: Flächen in Form des kommenden Inhalts, nie Spinner für Container. */
.sk {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--radius-s);
  min-height: 14px;
}
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  animation: sk-sweep 1.4s infinite;
}
@keyframes sk-sweep { from { translate: -100% 0; } to { translate: 100% 0; } }

.sk--text  { height: 14px; width: 70%; }
.sk--title { height: 22px; width: 40%; }
.sk--card  { height: 110px; border-radius: var(--radius); }
.sk--row   { height: 48px; border-radius: var(--radius-s); }
.sk--circle{ border-radius: 50%; aspect-ratio: 1; }

.sk-grid { display: grid; gap: 14px; }
.sk-grid--cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }