/**
 * Video-Loop: Wrapper reserviert Platz (verhindert CLS, da die Fläche schon
 * vor dem Laden des Videos/Posters feststeht). Video und Poster füllen die
 * Fläche per object-fit: cover.
 *
 * Die Höhe kommt aus EINEM einzigen, verlässlichen Mechanismus: CSS
 * aspect-ratio auf dem Wrapper (unten). Bewusst KEIN JS mehr, das zusätzlich
 * eine Pixel-Höhe misst/setzt, und KEIN padding-bottom-Hack daneben – zwei
 * bzw. drei konkurrierende Mechanismen gleichzeitig waren die Ursache für
 * einen sichtbaren Layout-Sprung auf iOS Safari (kurz 16:9, dann Korrektur).
 * aspect-ratio wird von allen aktuell relevanten Browsern inkl. iOS Safari
 * 15+ unterstützt. Zusätzliche Absicherung: das <video>-Element bekommt
 * eigene width/height-Attribute passend zum Seitenverhältnis (siehe
 * inc/video-loop.php) – dadurch hat es schon vor jedem CSS ein korrektes
 * intrinsisches Verhältnis.
 *
 * Fade-in beim Scrollen, analog zu den Bildern (siehe style.css:
 * img/.img-visible) – ursprünglich mit identischem "Slide-up"-Effekt
 * (translateY 30px -> 0) wie bei den Bildern. Live nachgewiesen (Kunden-
 * Report "Layoutversatz solange Poster sichtbar"): dieser Slide-Effekt hat
 * den Wrapper für die volle Dauer des 0.8s-Übergangs sichtbar 30px zu weit
 * nach unten in den nachfolgenden Abschnitt hineinragen lassen (per
 * getBoundingClientRect() exakt bestätigt: Wrapper-Unterkante 30px unter
 * der Unterkante seines eigenen Eltern-Containers, solange die Klasse
 * "...--visible" noch nicht bzw. der Übergang noch nicht fertig war) –
 * "overflow:hidden" auf dem Wrapper verhindert das NICHT, da es nur den
 * eigenen Inhalt klippt, nicht die eigene, transform-bedingte Position
 * gegenüber Geschwister-Elementen. Das Poster war rein zeitlich zufällig
 * meist noch sichtbar, während dieser Übergang lief – daher der Eindruck
 * einer Poster-Ursache, obwohl es am translateY lag.
 *
 * Fix: hier bewusst NUR Opacity faden, kein vertikaler Versatz mehr (bei
 * den normalen Bildern in style.css unverändert gelassen, dort kürzere
 * Ladezeit macht das Zeitfenster in der Praxis kaum sichtbar).
 *
 * Die Klasse "mxm-video-loop--visible" wird von video-loop.js gesetzt,
 * sobald der Clip in den Viewport scrollt.
 *
 * WICHTIG zu den !important-Regeln unten (width/height bei __video und
 * __poster): Elementors eigenes frontend.min.css setzt ".elementor img"
 * (height: auto) sowie ".elementor video" (width: 100%) – beides mit
 * derselben Spezifität wie unsere Klassen, aber nach unserem Stylesheet
 * geladen. Live geprüft: dadurch fiel z.B. das Poster-<img> auf sein
 * eigenes natives Seitenverhältnis zurück (16:9 statt der vollen 9:16-
 * Fläche) – sichtbar als 16:9-Bildausschnitt oben im Wrapper, während
 * Video/Wrapper korrekt 9:16 blieben. Ohne !important gewinnt Elementor.
 */
.mxm-video-loop {
    position: relative;
    width: 100%;
    aspect-ratio: var( --mxm-video-ratio, 16 / 9 );
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    will-change: opacity;
}

.mxm-video-loop.mxm-video-loop--visible {
    opacity: 1;
}

.mxm-video-loop__video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* Poster-Bild liegt als eigenes <img> über dem Video (position: absolute
   stapelt automatisch über dem nicht-positionierten Video, ohne z-index) und
   blendet erst sanft aus, sobald das Video per JS wirklich abspielt – siehe
   video-loop.js ("playing"-Event). Dadurch kein Blitzer beim Umschalten. */
.mxm-video-loop__poster {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.4s ease-out;
    pointer-events: none;
}

.mxm-video-loop__poster.mxm-video-loop__poster--hidden {
    opacity: 0;
}

/* Barrierefreiheit: Reduzierte Motion respektieren (Video bleibt bei
   "prefers-reduced-motion" ohnehin unbeobachtet/unbewegt, siehe JS –
   dieser Fallback sorgt zusätzlich dafür, dass der Wrapper sichtbar ist). */
@media ( prefers-reduced-motion: reduce ) {
    .mxm-video-loop {
        transition: none;
        opacity: 1;
        transform: none;
    }
}