Medien

Bild, Video, Audio und Hero-Sektionen - helpers/media.css, components/video.css, components/audio.css, components/hero.css, components/cover.css, components/overlay.css.

Bilder

Art Direction: <picture><source media="..."> lädt zuverlässig eine andere Bilddatei je Breakpoint - das native, korrekte Werkzeug dafür.

Freistehendes Bild im Fließtext: .ncss-figure--width-*/-align-* sind bewusst getrennt von den .ncss-width-1-2/-1-3/etc.-Klassen in Layout - jene sind für Geschwister-Kacheln in einem .ncss-flex-grid gedacht, nicht für ein einzelnes Bild mit Textumfluss. Markup:

<figure class="ncss-figure ncss-figure--width-50 ncss-figure--align-left">
  <img src="..." alt="...">
  <figcaption>Bildunterschrift</figcaption>
</figure>
<p>Text fließt um das Bild herum ...</p>

Cover (Embeds vollständig zuschneiden)

Für <img>/<video> reicht .ncss-img-cover oben (natives object-fit). components/cover.css deckt den einen Fall ab, den object-fit NICHT zuverlässig löst: <iframe>-Embeds (YouTube/Vimeo/Google Maps) - object-fit wirkt in den meisten Browsern nicht auf das eingebettete Dokument.

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

Technik: das klassische min-width/min-height:100% + width/height:auto-Zuschnitt-Muster (kein object-fit) - braucht dafür eine EXPLIZITE aspect-ratio auf dem eingebetteten Element selbst (Default: --ncss-aspect-video, per style="aspect-ratio: ..." überschreibbar). Sich stattdessen auf die width/height-HTML-Attribute eines <iframe> zu verlassen, liefert bei einem absolut positionierten Element KEIN seitenverhältnis-treues Ergebnis (per echtem Test bestätigt). .ncss-cover-container braucht eine eigene, von außen kommende Höhe (fix, %, oder z.B. innerhalb eines .ncss-hero) - anders als .ncss-ratio-video, das die Höhe aus der Breite ableitet.

Video & Audio

Overlay (Panel über Bild/Video)

components/overlay.css - ein Panel über einem Bild (Bildunterschrift, CTA, Verlaufs-Blende). Für einen ganzen Seitenabschnitt mit Hintergrundbild: Hero-Sektion weiter unten - Overlay ist die kleinere, media-lokale Variante desselben Grundprinzips.

<div class="ncss-overlay-container">
  <img src="foto.jpg" alt="...">
  <div class="ncss-overlay ncss-overlay--bottom ncss-overlay--scrim">
    <p class="ncss-text-light">Bildunterschrift</p>
  </div>
</div>

Kombinierbar mit bereits vorhandenen ncss-Bausteinen statt eigener Duplikate: .ncss-reveal-on-hover (Scroll & Sichtbarkeit) für "nur beim Hover sichtbar" - funktioniert unverändert, weil .ncss-overlay ein direktes Kind von .ncss-overlay-container ist. .ncss-text-light/-dark (Typografie) für Text, der unabhängig vom Bildinhalt lesbar bleiben soll.

Hero-Sektion

Bild-Hintergrund mit Inhalt obenauf, components/hero.css.

<section class="ncss-hero">
  <div class="ncss-hero-media" style="background-image: url(bild.jpg)"></div>
  <div class="ncss-hero-content ncss-hero-content--filled">
    <h2>Überschrift</h2>
    <p>Text...</p>
  </div>
</section>

Hintergrund-Video statt Bild

Dasselbe .ncss-hero-media, jetzt mit einem echten <video>-Kind statt background-image - object-fit: cover funktioniert bei <video> zuverlässig (anders als bei <iframe>, siehe Cover oben), kein Zuschnitt-Sonderfall nötig:

<div class="ncss-hero-media">
  <video src="clip.mp4" autoplay muted loop playsinline poster="frame.jpg"></video>
</div>

autoplay BRAUCHT muted (sonst blockieren praktisch alle Browser den Autostart), playsinline verhindert Vollbild-Übernahme auf iOS Safari, poster zeigt ein Standbild vor dem Laden. Für prefers-reduced-motion: reines CSS kann eine <video>-Wiedergabe nicht steuern (anders als animation-timeline bei --parallax oben) - js/hero-video-motion.js (opt-in, nur bei tatsächlichem Hintergrund-Video einbinden) entfernt autoplay und pausiert das Video, wenn die Einstellung aktiv ist, das Video bleibt sichtbar (Poster/letztes Bild), nur ohne automatische Bewegung:

<script src="js/hero-video-motion.js" defer></script>