/* =============================================================================
   pinned-scroll — gepinnte Showpiece-Sektion, scroll-getrieben
   =============================================================================
   Generischer Mechanismus (Design-Sprache Eigen-Sites): eine hohe Sektion mit
   einer inneren, gepinnten Buehne (position:sticky). Der Scroll-Fortschritt durch
   die Sektion wird vom JS als CSS-Variable --pinned-progress (0..1) und als
   Attribut data-pinned-stage (1..N) bereitgestellt. Der KONKRETE Inhalt (z.B. die
   „zwei Herzen" der Wachstum Group) wird darauf aufgesetzt und liest diese Werte.

   TOKEN-PUR: enthaelt KEINE Farben/Schriften (reiner Mechanismus). Die --pinned-*
   sind komponenten-lokale Layout-Konstanten. Inhalt + Marken-Farben kommen aus der
   aufsetzenden Anwendung (token-pur). Siehe rules/lp-components-token-disziplin.md.

   No-JS- / reduced-motion-sicher (Progressive Enhancement):
   - Ohne JS / bei reduced-motion wird .is-pinned NIE gesetzt -> die Sektion bleibt
     eine normale, nicht gepinnte Sektion im Ruhe-/Endzustand (--pinned-progress
     faellt per CSS-Default auf den Endwert). Kein leerer Langscroll, kein Bug.
   Lade-Reihenfolge: _tokens/_base.css -> <brand>.css -> diese Datei -> pinned-scroll.js
   ============================================================================ */

.pinned-scroll {
  --pinned-length: 300vh;   /* Gesamthoehe der Sektion = Laenge der Scroll-Erzaehlung (nur aktiv) */
  position: relative;
}

/* Ruhezustand (Default, ohne JS): normale Sektion, Buehne zentriert, kein Pin. */
.pinned-scroll__stage {
  position: relative;
  min-height: 72vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Aktivierter Zustand: JS setzt .is-pinned -> hohe Sektion + gepinnte Buehne. */
.pinned-scroll.is-pinned { height: var(--pinned-length); }
.pinned-scroll.is-pinned .pinned-scroll__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
}

/* Reduced-Motion: JS pinnt gar nicht; falls .is-pinned doch gesetzt ist (Defensive),
   wird die Buehne wieder statisch und die Sektion normal hoch. */
@media (prefers-reduced-motion: reduce) {
  .pinned-scroll.is-pinned { height: auto; }
  .pinned-scroll.is-pinned .pinned-scroll__stage { position: relative; height: auto; min-height: 72vh; }
}