/* ========================================
   SHOWREEL SCROLL EXPAND
======================================== */

.showreel-scroll-section {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    overflow: hidden;
    isolation: isolate;
}

/*
 * Diese Ebene verwischt nur den Hero hinter dem Showreel.
 * Sie wird von JavaScript weich eingeblendet.
 */
.showreel-backdrop-blur {
    position: absolute;
    z-index: 40;
    inset: 0;
    background: rgba(8, 8, 10, 0.24);
    -webkit-backdrop-filter: blur(16px) saturate(0.72);
    backdrop-filter: blur(16px) saturate(0.72);
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

.showreel-expand {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    transform-origin: center center;
    border: 0 solid rgba(255, 255, 255, 0.96);
    will-change: top, left, width, height, border-radius;
}

/* Die folgende Divi-Section legt sich beim Weiterscrollen darüber. */
.showreel-follow-section {
    position: relative;
    z-index: 80;
    isolation: isolate;
    transform: translateZ(0);
    background-color: var(--showreel-follow-bg, #fff);
    box-shadow: 0 -28px 70px rgba(0, 0, 0, 0.12);
}

/*
 * Curtain-Reveal auf Desktop:
 * Die Folgesektion wird im Dokumentfluss um einen Teil der
 * Viewporthoehe nach oben gezogen. Weil der Hero gepinnt ist,
 * erscheint sie erst in dessen letzter Scrollphase und gleitet
 * dann ohne zusaetzliche JS-Transformation ueber das Video.
 *
 * Die Variable steht absichtlich ebenfalls an der Folgesektion,
 * da CSS Custom Properties nicht von vorherigen Geschwistern
 * vererbt werden.
 */
@media (min-width: 981px) {
    .showreel-follow-section {
        --showreel-follow-overlap: min(90vh, 1100px);
        margin-top: calc(var(--showreel-follow-overlap) * -1) !important;
    }
}

/*
 * Dezenter Exit-Effekt unter der hochfahrenden Folgesektion.
 * Es wird nur die Deckkraft animiert; der Blur selbst bleibt
 * konstant. Das ist deutlich ruhiger als ein animierter Blurwert.
 */
.showreel-exit-overlay {
    position: absolute;
    z-index: 28;
    inset: 0;

    opacity: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(7, 9, 12, 0.06) 0%,
            rgba(7, 9, 12, 0.2) 60%,
            rgba(7, 9, 12, 0.36) 100%
        );

    -webkit-backdrop-filter: blur(3px) saturate(0.9);
    backdrop-filter: blur(3px) saturate(0.9);

    will-change: opacity;
}

/* Der von JavaScript erzeugte Platzhalter bleibt unsichtbar. */
.showreel-expand-placeholder {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
}

/* Hintergrundbilder und Divi-Hintergrundvideos fuellen die Flaeche. */
.showreel-expand,
.showreel-expand .et_pb_section_video_bg,
.showreel-expand .et_pb_video_bg,
.showreel-expand video {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.showreel-expand .et_pb_section_video_bg,
.showreel-expand .et_pb_video_bg {
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Divi 5 / MediaElement: komplette Wrapper-Kette mitskalieren. */
.showreel-expand > .et-pb-background-video,
.showreel-expand > .et-pb-background-video .mejs-container,
.showreel-expand > .et-pb-background-video .mejs-inner,
.showreel-expand > .et-pb-background-video .mejs-mediaelement,
.showreel-expand > .et-pb-background-video mediaelementwrapper {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.showreel-expand > .et-pb-background-video video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
}

.showreel-expand video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: translate(-50%, -50%) !important;
}

/* ========================================
   THUMBNAIL BIS ZUM VIDEOSTART
======================================== */

.showreel-expand {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* Das Divi-Hintergrundbild bleibt zunächst sichtbar. */
.showreel-expand > .et-pb-background-video {
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
        opacity 0.45s ease,
        visibility 0s linear 0.45s;
}

/* Erst nach dem echten playing-Event weich einblenden. */
.showreel-expand.is-video-playing > .et-pb-background-video {
    opacity: 1 !important;
    visibility: visible !important;
    transition:
        opacity 0.45s ease,
        visibility 0s linear 0s;
}

/* ========================================
   SOUND TOGGLE
======================================== */

.showreel-sound-toggle {
    position: absolute;
    z-index: 30;
    top: clamp(14px, 1.5vw, 24px);
    right: clamp(14px, 1.5vw, 24px);

    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;
    padding: 0;

    color: #fff;
    background: rgba(12, 14, 18, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    cursor: pointer;
    pointer-events: auto;
    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.showreel-sound-toggle:hover {
    transform: scale(1.06);
    background: rgba(12, 14, 18, 0.62);
    border-color: rgba(255, 255, 255, 0.72);
}

.showreel-sound-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.showreel-sound-icon,
.showreel-sound-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.showreel-sound-icon svg {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.showreel-sound-toggle.is-muted
    .showreel-sound-icon--audible,
.showreel-sound-toggle.is-audible
    .showreel-sound-icon--muted {
    display: none;
}

/*
 * Divi kann eigene Button- und SVG-Regeln spaeter laden.
 * Dieser gezielte Reset haelt den dynamischen Sound-Schalter
 * unabhaengig von der Divi-CSS-Reihenfolge immer bei 46 x 46 px.
 */
.showreel-expand > button.showreel-sound-toggle {
    position: absolute !important;
    z-index: 30 !important;

    top: clamp(14px, 1.5vw, 24px) !important;
    right: clamp(14px, 1.5vw, 24px) !important;
    bottom: auto !important;
    left: auto !important;

    display: grid !important;
    place-items: center !important;

    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;

    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #fff !important;
    background: rgba(12, 14, 18, 0.48) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 50% !important;

    font-size: 0 !important;
    line-height: 1 !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
}

.showreel-expand > .showreel-sound-toggle
    .showreel-sound-icon {
    display: block !important;
    flex: 0 0 22px !important;

    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;

    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
}

.showreel-expand > .showreel-sound-toggle
    .showreel-sound-icon svg {
    display: block !important;

    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;

    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;

    fill: currentColor !important;
    stroke: currentColor !important;
}

.showreel-expand > .showreel-sound-toggle.is-muted
    .showreel-sound-icon--audible,
.showreel-expand > .showreel-sound-toggle.is-audible
    .showreel-sound-icon--muted {
    display: none !important;
}

/* Inhalt und Showreel-Button oberhalb des Videos halten. */
.showreel-expand > .et_pb_module,
.showreel-expand .showreel-overlay-content {
    position: relative;
    z-index: 5;
}

.showreel-hero-title,
.showreel-hero-content,
.showreel-hero-cubes {
    will-change: transform, opacity;
}

/* Im Divi Visual Builder keine Scrollanimation erzwingen. */
body.et-fb .showreel-scroll-section,
.et-fb-root-ancestor .showreel-scroll-section {
    min-height: auto !important;
    overflow: visible !important;
}

body.et-fb .showreel-expand,
.et-fb-root-ancestor .showreel-expand {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
}

/*
 * Im Divi Visual Builder alle Frontend-Ueberlagerungen aufheben.
 * Hero und Leistungen stehen dadurch normal untereinander und
 * Builder-Bedienelemente werden nicht abgeschnitten.
 */
body.et-fb .showreel-follow-section,
html.et-fb-root-ancestor .showreel-follow-section,
.et-fb-root-ancestor .showreel-follow-section {
    position: relative !important;
    z-index: auto !important;

    margin-top: 0 !important;

    transform: none !important;
    box-shadow: none !important;
}

body.et-fb .leistungen-motion-section,
html.et-fb-root-ancestor .leistungen-motion-section,
.et-fb-root-ancestor .leistungen-motion-section {
    overflow: visible !important;
}

body.et-fb .showreel-backdrop-blur,
body.et-fb .showreel-exit-overlay,
html.et-fb-root-ancestor .showreel-backdrop-blur,
html.et-fb-root-ancestor .showreel-exit-overlay,
.et-fb-root-ancestor .showreel-backdrop-blur,
.et-fb-root-ancestor .showreel-exit-overlay {
    display: none !important;
}

/* Mobile bleibt im normalen Divi-Layout. */
@media (max-width: 980px) {
    .showreel-scroll-section {
        min-height: auto;
        overflow: hidden;
    }

    .showreel-expand {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5;
        transform-origin: center center;
        will-change: transform, opacity;
    }

    .showreel-sound-toggle {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
    }

    .showreel-expand > button.showreel-sound-toggle {
        top: 14px !important;
        right: 14px !important;

        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;

        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    .showreel-backdrop-blur {
        display: none;
    }

    .showreel-exit-overlay {
        display: none;
    }

    .showreel-follow-section {
        margin-top: 0 !important;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .showreel-expand,
    .showreel-hero-title,
    .showreel-hero-content,
    .showreel-hero-cubes {
        will-change: auto;
    }
}