Stacked Cards

EINE Vollbild-Sektion (.ncss-stack-section, components/scroll-stack.css), in der Karten beim Scrollen INNERHALB dieser einen Sektion übereinander gleiten - anders als bei Vollbild-Sektionen (Sektion für Sektion vollflächig einrasten, jede mit eigenem Scroll-Abschnitt) bleibt hier die Bühne (.ncss-stack-stage) die ganze Zeit ein einziges Vollbild, nur der Inhalt darin stapelt sich während man hindurchscrollt. Baseline ganz ohne Scroll-Animation: die Karten liegen von Anfang an fertig gefächert da. Mit view-timeline-Unterstützung (aktuell nicht Baseline) fährt jede Karte erst während des Scrollens durch ihren eigenen Abschnitt der Sektion herein.

<div class="ncss-stack-section" style="--ncss-stack-count: 4;">
  <div class="ncss-stack-stage">
    <article class="ncss-stack-card" style="--ncss-stack-index: 0;">Karte 1</article>
    <article class="ncss-stack-card" style="--ncss-stack-index: 1;">Karte 2</article>
  </div>
</div>

Stacked Cards, Vollbild

Dieselbe Komponente, nur per Token-Override umkonfiguriert - keine eigene Modifier-Klasse nötig: --ncss-stack-card-height: 100lvh/--ncss-stack-card-width: 100% (volle statt kompakte Größe), --ncss-stack-fan: 0px (kein Fächer-Versatz, jede Karte deckt die vorherige exakt deckungsgleich). Jede Karte bleibt scharf/unverzerrt, solange sie die aktuell sichtbare ist - erst während die nächste Karte sie bedeckt, kippt sie per 3D-Transform in die Tiefe zurück.

Stacked Cards, adaptiver Radius

--ncss-stack-card-width: min(100vw, 34rem) - auf breiten Fenstern bleibt die Karte bei 34rem mit Außenabstand (schön rund), auf schmalen Fenstern (Handy) wird sie exakt 100vw (Kante an Kante). --ncss-stack-radius: var(--ncss-radius-adaptive-lg) (statt eines festen Werts oder 0) rundet die Ecken automatisch NUR dann ab, wenn tatsächlich Platz dafür da ist - Fenster schmaler ziehen, um es live zu sehen, kein Breakpoint im Spiel.

Stacked Cards, horizontal

Modifier .ncss-stack-section--horizontal - dieselbe Bühne/Timeline-Mechanik wie oben, nur auf der X- statt der Y-Achse: Karten fächern sich seitlich auf, fahren von rechts herein und kippen beim Zurückweichen um die Y-Achse (statt X) zurück.

Stacked Cards, in einem normalen Container

Dieselbe Komponente in einem gewöhnlichen, breitenbegrenzten .ncss-container statt vollflächig - --ncss-stack-stage-height (statt der Vollbild-100vh) und --ncss-stack-stage-top (klebt unter der Topbar statt an der Bildschirm-Oberkante) machen die Bühne beliebig klein. Dazu eine Sprungnavigation mit echten Anker-Links (#stack-contained-N) zu unsichtbaren Marker-Elementen an der jeweiligen Kartenposition innerhalb der Sektion - ungefähre statt pixelgenaue Navigation, reicht aber, um gezielt zu einer Karte zu springen statt nur durchzuscrollen. Die Navigation selbst ist position:sticky (klebt unter der Topbar) - sonst wäre sie nach einem Sprung in die Sektion nicht mehr erreichbar, ohne komplett zurückzuscrollen.