Scroll & Sichtbarkeit

helpers/scroll.css und helpers/visibility.css.

Scroll-Verhalten & Sticky

Klasse / Regel	Zweck
`html { scroll-behavior: smooth }` (reset.css)	Seitenweiter Default für Anker-Klicks/`.scrollIntoView()` - gilt nur für die eigene Scroll-Box, vererbt sich nicht, deshalb setzen einzelne Komponenten es zusätzlich selbst. Respektiert `prefers-reduced-motion` automatisch
`.ncss-sticky` / `--bottom`	`position: sticky`
`.ncss-sticky-container`	Bezugsrahmen für ein Sticky-Element
`.ncss-scroll-snap-x` / `-y` + `.ncss-scroll-snap-item`	CSS Scroll Snap
`.ncss-hide-on-scroll`	Sticky Header blendet beim Runterscrollen aus/beim Hochscrollen ein - komplett JS-frei über die native `scroll-state`-Container-Query, `@supports`-gegated. Fallback-Script für Firefox/Safari: `js/hide-on-scroll-fallback.js`, siehe Web Awesome Bridge

<div class="ncss-sticky-container">
  <aside class="ncss-sticky">Bleibt beim Scrollen sichtbar</aside>
</div>

Vollbild-Sektionen

.ncss-snap-sections + .ncss-snap-section (+ --scrollable) - klassisches "Fullpage"-Muster, section-für-section, komplett über Scroll Snap. .ncss-scroll-snap-x innerhalb einer Sektion verschachtelbar für horizontalen Unterablauf.

<div class="ncss-snap-sections">
  <section class="ncss-snap-section">Sektion 1</section>
  <section class="ncss-snap-section">Sektion 2</section>
</div>

Für gepinnte, sich überlagernde Karten statt separater Sektionen: siehe Komponenten-Referenz (components/scroll-stack.css) - andere Technik, jede Sektion bekommt dort KEINEN eigenen Scroll-Abschnitt, sondern eine Bühne bleibt gepinnt.

Sichtbarkeit

helpers/visibility.css: .ncss-hidden, .ncss-invisible, .ncss-print-only, .ncss-screen-only, .ncss-reveal-on-hover, .ncss-hide-below-md/-from-md (fester Viewport-Breakpoint) sowie deren container-basierte Pendants .ncss-hide-below-container-*/-from-container-* (reagieren auf die Breite des Eltern-.ncss-container, nicht den Viewport - Details unter Layout).