/* Vollflächiger, responsiver Video-Header */
div.hero {
position: relative;
/* Höhe dynamisch:
- 56.25vw = 9/16 der Viewportbreite (ideal für 16:9 Videos)
- klemmt zwischen 40vh (nicht zu klein) und 100dvh (nicht höher als Bildschirm)
*/
min-height: clamp(40vh, 56.25vw, 100dvh);
overflow: hidden;
background: #000; /* Fallback-Hintergrund */
}


/* Video füllt den Header aus */
div.hero video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Standard: füllt aus, kann beschneiden */
object-position: center; /* Motiv zentrieren */
background: #000; /* sichtbare Balken bei contain */
}


/* leichte Abdunkelung für bessere Lesbarkeit des Textes */
div.hero::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,.35);
}


/* Inhaltsebene über dem Video */
div.hero .content {
position: relative;
z-index: 1;
}


/*
Auf sehr hohen ("schmalen") Displays schalten wir auf contain
UND lassen die Containerhöhe durch das Seitenverhältnis bestimmen,
damit keine dicken schwarzen Flächen oben/unten entstehen.
*/
@media (max-aspect-ratio: 3/4) {
div.hero {
/* Höhe aus Breite ableiten (16:9) statt erzwungenem vh-Block */
min-height: auto;
height: auto;
aspect-ratio: 16 / 9;
}
div.hero video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain; /* keine Beschneidung, skaliert vollständig */
}
}