Touch & mobile Viewports

Zwei Themen, die auf dem Desktop unsichtbar bleiben und erst auf echten Geräten auffallen.

Touch-Geräte haben kein Hover

Ein Tap auf iPhone/Android löst :hover-Regeln nicht zuverlässig aus - ein Button, dessen einzige optische Rückmeldung ein :hover-Zustand ist, wirkt auf Touch dadurch komplett tot. Jede visuell bedeutsame :hover-Regel in ncss steht deshalb in @media (hover: hover) and (pointer: fine) (nur Geräte mit echtem Zeigegerät), nie unbedingt. :focus-visible (Tastatur-Fokus) bleibt davon immer ungated.

Taktile Rückmeldung: :active statt :hover

Für taktile Rückmeldung auf Touch gilt :active (gilt für jedes Zeigegerät inkl. Touch, kein Gate nötig) - .ncss-btn hat einen eigenen, komponentenweiten :active-Zustand (scale: 0.95) und jede Farbvariante zusätzlich eine echte Farbänderung bei :active (dieselben Werte wie :hover, nur unbedingt).

Ein Tap dauert oft nur ~100-150ms - die normale Übergangsdauer (200ms) erreicht ihren Zielwert dabei oft gar nicht erst. Eigener Token --ncss-motion-duration-fast (100ms), nur als transition-duration auf der :active-Regel selbst überschrieben - der Einstieg ins Gedrückt-Aussehen ist dadurch schnell, das Zurückfedern bleibt bei der normalen, weicheren Dauer.

Für ein eigenes Element: .ncss-press (helpers/animations.css, ebenfalls :active-basiert mit demselben schnellen Einstieg, kombinierbar mit jedem Element).

<div class="ncss-card ncss-press">Beliebiges Element mit Tap-Feedback</div>

Volle Bildschirmhöhe auf Mobilgeräten

100vh/height: 100% entsprechen auf Mobil-Browsern der größten möglichen Höhe (Adressleiste ausgeblendet) - ist die Adressleiste gerade sichtbar, ragt ein 100vh-Element über den tatsächlich sichtbaren Bereich hinaus.

Einheit	Verhalten	Einsatz in ncss
`svh`	Kleinstmöglicher Wert, passt immer	Modal, Off-Canvas, `.ncss-sticky-container` - Elemente, die garantiert ohne Scrollen sichtbar bleiben müssen (mit `vh` als Fallback: `height: 100vh; height: 100svh;`)
`lvh`	Identisch zum klassischen `vh` - stabil, ändert sich nicht während des Scrollens	`components/scroll-stack.css` - scroll-gekoppelte Animationen brauchen ein Timing, das sich nicht mitten im Scrollen neu berechnet
`dvh`	Berechnet sich live neu, sobald die Adressleiste ein-/ausblendet	Bewusst NICHT für scroll-gekoppelte Animationen (bekanntes Ruckel-Verhalten in mobilem Safari)

.ncss-vollflaechig {
  height: 100vh;   /* Fallback für ältere Browser */
  height: 100svh;  /* gewinnt, wo unterstützt - passt immer */
}