/* v4 — Skeleton-Loader
 * CSS-only shimmer, keine Runtime-Lib. Jeder Placeholder hat feste
 * Ziel-Dimensionen (per Utility-Klasse), damit kein Layout-Shift entsteht,
 * wenn die echte Komponente die Stelle einnimmt.
 */

.v4-skeleton{
  background:linear-gradient(90deg,
    var(--gray-100) 0%,
    var(--gray-200) 50%,
    var(--gray-100) 100%);
  background-size:200% 100%;
  animation:v4-shimmer 1.2s ease-in-out infinite;
  border-radius:2px;
  color:transparent;
  user-select:none;
  display:block;
}

@keyframes v4-shimmer{
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* === Utility-Varianten mit festen Dimensionen (kein CLS) === */

.v4-skel-density{
  width:100%;
  max-width:460px;
  aspect-ratio:5/4;     /* matching v4-hero-right min-height & density-bar vbH */
}

.v4-skel-tabs-nav{
  height:48px;
  margin:0 -1.25rem 1.25rem;
}

.v4-skel-tile{
  height:128px;
}

.v4-skel-tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:.8rem;
}

.v4-skel-sankey{
  width:100%;
  height:360px;
}

.v4-skel-text-line{
  height:.9rem;
  margin:.3rem 0;
}
.v4-skel-text-line.is-short{ width:40%; }
.v4-skel-text-line.is-mid  { width:70%; }

/* === Screen-reader-only: visuell versteckt, für ARIA-status === */
.v4-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (prefers-reduced-motion: reduce){
  .v4-skeleton{animation:none}
}