Medien

Bilder und lokale Videos sollen gleich einfach zu handhaben sein - reset.css behandelt beide identisch (display:block; max-width:100%; height:auto).

<img class="ncss-ratio-video ncss-img-cover ncss-radius-md" src="bild.jpg" alt="Beschreibung">

Video

Einfachster Fall - keine Klasse nötig, poster + controls geben "Klick zum Abspielen" komplett nativ:

Mit festem Seitenverhältnis (.ncss-video + .ncss-ratio-video, z.B. für ein Raster):

Mit Bildunterschrift (figcaption, wie bei <img>)

Video: Bildausschnitt je Bildschirmgröße

Für <video> gibt es (anders als bei <picture> für Bilder) KEIN verlässliches natives "andere Datei je Breakpoint" - <source media="..."> wurde aus der Spec/den meisten Browsern wieder entfernt (nur Safari unterstützt es noch als Altlast). .ncss-video--responsive-crop schneidet stattdessen DASSELBE Video per object-fit unterschiedlich zu - Fenster schmaler ziehen, der Ausschnitt wird hochkant.

Cover: Embeds vollständig zuschneiden

.ncss-img-cover (oben) reicht für <img>/<video> - components/cover.css deckt den einen Fall ab, den natives object-fit NICHT löst: <iframe>-Embeds. Zwei Container mit demselben 16:9-Embed, unterschiedlichem Seitenverhältnis - beide vollständig ausgefüllt, kein Rand, keine Verzerrung:

<div class="ncss-cover-container" style="height: 20rem;">
  <iframe class="ncss-cover" src="https://www.youtube.com/embed/..." title="..." allowfullscreen></iframe>
</div>

Overlay: Panel über Bild

components/overlay.css - Bildunterschrift (--bottom --scrim, immer sichtbar) und ein CTA, das erst beim Hover erscheint (--center, kombiniert mit .ncss-reveal-on-hover):

Immer sichtbar

Bilder: Art Direction (<picture>)

Bei Bildern IST das nativ und zuverlässig möglich - <picture> mit mehreren <source media="..."> lädt eine andere Bilddatei (nicht nur einen anderen Ausschnitt derselben Datei) abhängig vom Viewport. Fenster schmaler als 48rem ziehen, um die andere Datei zu sehen (orange statt Farbbalken):

Bilder (aspect-ratio, Fokuspunkt)

--ncss-focus-point (tokens.css) steuert object-position - Default center, pro Bild überschreibbar (style="--ncss-focus-point: 20% 80%"), wenn das Motiv beim Zuschneiden nicht mittig sitzen soll. Beide Kacheln unten zeigen dasselbe Bild, nur mit anderem Fokuspunkt:

Platzhalter-Kacheln (ohne echtes Bild):

Hero-Sektion (Bild-Hintergrund + Inhalt obenauf)

.ncss-hero legt Inhalt über ein Hintergrundbild - zwei unabhängige Optionen: das Inhalts-Panel --transparent (Text direkt auf dem Bild, mit Verlaufs-Scrim) oder --filled (blickdichte Karte), und optional .ncss-hero--parallax (Bild scrollt langsamer als der Inhalt - zum Testen die Seite scrollen).

1. Transparent - Text direkt auf dem Bild

Text direkt aufs Bild

Ein Verlaufs-Scrim (.ncss-hero-media::after) sorgt für Lesbarkeit, egal welches Motiv darunterliegt.

2. Filled - blickdichte Karte obenauf

Karte obenauf

Das Bild bleibt sichtbar, der Text sitzt aber auf einer eigenen, blickdichten Fläche (--ncss-color-surface) statt direkt auf dem Motiv.

3. Parallax (.ncss-hero--parallax) - beim Scrollen beobachten

Parallax-Hero

Läuft rein über animation-timeline: view() - kein JS, kein background-attachment: fixed (auf iOS Safari absichtlich nie unterstützt). Ohne Unterstützung oder bei reduzierter Bewegung bleibt es einfach ein statisches Hero-Bild wie oben.

4. Hintergrund-Video statt Bild (<video> in .ncss-hero-media)

Video-Hero

object-fit: cover statt background-size - funktioniert bei <video> zuverlässig. js/hero-video-motion.js (unten eingebunden) unterdrückt autoplay bei prefers-reduced-motion: reduce.

Audio

Natives <audio controls> lässt sich kaum umgestalten (Browser-eigene Bedienelemente) - .ncss-audio sorgt nur für konsistente Breite, .ncss-audio-card ergänzt optional einen Titel.

Beispiel-Ton (Sinuswelle, 6s)