/* ========================================
   CASE SCROLL CAROUSEL
======================================== */

.case-scroll-section {
    --case-focus-width: min(48vw, 68vh, 770px);
    --case-preview-width: clamp(140px, 13vw, 270px);
    --case-preview-gap: clamp(16px, 1.4vw, 30px);
    position: relative;
    min-height: 100vh;
    padding: 0 !important;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse at 0% 110%,
            rgba(226, 36, 27, 0.72) 0%,
            rgba(226, 36, 27, 0.42) 24%,
            rgba(226, 36, 27, 0.16) 45%,
            transparent 68%),
        linear-gradient(110deg,
            #170605 0%,
            #141011 46%,
            #0b0d10 100%);
}

/* Gesamter sichtbarer Bühnenbereich */
.case-scroll-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* ========================================
   KLEINE PREVIEW-CARDS
======================================== */

.case-preview-viewport {
    --case-preview-safe-area:
        calc(
            (var(--case-focus-visible-width, var(--case-focus-width)) / 2)
            + var(--case-preview-gap)
        );
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;

    /*
   * Fokusbereich plus Außenabstand vollständig
   * vor durchscheinenden Previews schützen.
   */
    -webkit-mask-image:
        linear-gradient(to right,
            #000 0,
            #000 calc(50% - var(--case-preview-safe-area)),
            transparent calc(50% - var(--case-preview-safe-area)),
            transparent calc(50% + var(--case-preview-safe-area)),
            #000 calc(50% + var(--case-preview-safe-area)),
            #000 100%);

    mask-image:
        linear-gradient(to right,
            #000 0,
            #000 calc(50% - var(--case-preview-safe-area)),
            transparent calc(50% - var(--case-preview-safe-area)),
            transparent calc(50% + var(--case-preview-safe-area)),
            #000 calc(50% + var(--case-preview-safe-area)),
            #000 100%);
}

.case-preview-track {
    position: absolute;
    inset: 0;
    display: block !important;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.case-preview-card {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    float: none !important;
    clear: none !important;
    width: var(--case-preview-width) !important;
    max-width: var(--case-preview-width) !important;
    aspect-ratio: 4 / 5;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    opacity: 0;
    filter: brightness(0.68);
    overflow: hidden;
    pointer-events: none;
    will-change: transform, opacity;
    transform-origin: center center;
}


/* ========================================
   FESTER FOKUSBEREICH
======================================== */

.case-focus-viewport {
    position: relative;
    z-index: 10;
    flex: 0 0 var(--case-focus-width);
    width: var(--case-focus-width);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #111;
    isolation: isolate;
    outline: 1px dashed rgba(255, 255, 255, 0.65);
    outline-offset: 8px;
}


/* Dezentes Filmkorn über Bild und Video */
.case-focus-viewport::after {
    content: "";
    position: absolute;
    z-index: 30;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.25'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
    opacity: 0.34;
    mix-blend-mode: soft-light;
    pointer-events: none;
}


/* ========================================
   DIVI ROW ALS GROSSER SLIDE-TRACK
======================================== */

.case-focus-viewport .case-scroll-row {
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: max-content !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    will-change: transform;
}


/* ========================================
   GROSSE DIVI CASE-CARDS
======================================== */

.case-focus-viewport .case-scroll-row .case-scroll-card {
    position: relative;
    flex: 0 0 var(--case-focus-width) !important;
    width: var(--case-focus-width) !important;
    max-width: var(--case-focus-width) !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    overflow: hidden;
}

/* Divi-Module oberhalb des Hintergrundvideos */
.case-scroll-card>.et_pb_module {
    position: relative;
    z-index: 5;
}

/* ========================================
   VIDEO NUR INNERHALB DES FOKUS-VIEWPORTS
======================================== */

.case-focus-viewport .case-scroll-row .case-scroll-card {
    position: relative !important;
    overflow: hidden !important;
}

/* Divi-Video-Container */
.case-focus-viewport .case-scroll-card .et_pb_section_video_bg,
.case-focus-viewport .case-scroll-card .et_pb_video_bg {
    position: absolute !important;
    z-index: 1 !important;

    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    overflow: hidden !important;
    opacity: 0 !important;

    transform: none !important;
    transition: opacity 0.25s ease;
}

/* Video einblenden, sobald die Card den Fokus berührt */
.case-scroll-card.has-focus-overlap.has-playing-video .et_pb_section_video_bg,
.case-scroll-card.has-focus-overlap.has-playing-video .et_pb_video_bg {
    opacity: 1 !important;
}

/* Divis automatische Video-Skalierung überschreiben */
.case-focus-viewport .case-scroll-card .et_pb_section_video_bg video,
.case-focus-viewport .case-scroll-card .et_pb_video_bg video {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !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;
}

/* Module über dem Hintergrundvideo */
.case-focus-viewport .case-scroll-card>.et_pb_module {
    position: relative;
    z-index: 5;
}

/* ========================================
   AKTIVE CARD
======================================== */

.case-scroll-card.is-active {
    z-index: 2;
}


/* ========================================
   REDUZIERTE BEWEGUNGEN
======================================== */

@media (prefers-reduced-motion: reduce) {

    .case-scroll-card .et_pb_section_video_bg,
    .case-scroll-card .et_pb_video_bg {
        transition: none;
    }
}

/* ========================================
   CASE CARDS – DIVI VISUAL BUILDER
======================================== */

/*
 * Nur innerhalb des Divi Visual Builders:
 * Carousel-Columns als bearbeitbares 2er-Grid.
 */
body.et-fb .case-scroll-section,
.et-fb-root-ancestor .case-scroll-section {
    min-height: auto !important;
    padding: 50px 30px !important;
    overflow: visible !important;
}

/* Row als 2er-Grid */
body.et-fb .case-scroll-section>.case-scroll-row,
.et-fb-root-ancestor .case-scroll-section>.case-scroll-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 1400px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Einzelne Card im Builder */
body.et-fb .case-scroll-section>.case-scroll-row>.case-scroll-card,
.et-fb-root-ancestor .case-scroll-section>.case-scroll-row>.case-scroll-card {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    /* Einheitliches Card-Format */
    aspect-ratio: 4 / 5;
    min-height: 500px !important;
    margin: 0 !important;
    padding: 30px !important;
    float: none !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    overflow: hidden !important;
}


/* Module im Builder immer sichtbar und bedienbar */
body.et-fb .case-scroll-card .et_pb_module,
.et-fb-root-ancestor .case-scroll-card .et_pb_module {
    position: relative;
    z-index: 10;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* Hintergrundvideo im Builder sichtbar machen */
body.et-fb .case-scroll-card .et_pb_section_video_bg,
body.et-fb .case-scroll-card .et_pb_video_bg,
.et-fb-root-ancestor .case-scroll-card .et_pb_section_video_bg,
.et-fb-root-ancestor .case-scroll-card .et_pb_video_bg {
    opacity: 1 !important;
}

/* ========================================
   ANIMIERTE HEADLINE-INTRO-PHASE
======================================== */

/*
 * Die Headline liegt ueber der 100vh-Buehne und
 * nimmt deshalb keinen zusaetzlichen Platz im
 * Dokumentfluss ein. Ihre Skalierung uebernimmt GSAP.
 */
.case-scroll-section>.case-scroll-headline {
    position: absolute !important;
    z-index: 40;

    top: clamp(30px, 5vh, 64px);
    left: max(24px, calc((100vw - 1280px) / 2));

    width: min(calc(100% - 48px), 1280px) !important;
    max-width: 1280px !important;

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

    transform-origin: left top;
    will-change: transform, opacity;
}

/*
 * Stage bleibt exakt eine Viewporthoehe hoch.
 * Es wird kein statischer Headline-Abstand mehr
 * eingerechnet, weil Karte und Headline animieren.
 */
.case-scroll-stage {
    height: 100svh;
    padding: 0 !important;
}

.case-preview-viewport {
    padding: 0 !important;
}

/* Im Divi Builder bleibt die Headline normal editierbar. */
body.et-fb .case-scroll-section>.case-scroll-headline,
.et-fb-root-ancestor .case-scroll-section>.case-scroll-headline {
    position: relative !important;
    z-index: auto;
    top: auto;
    left: auto;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto 40px !important;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
}

/* Auf schmaler Builder-Fläche untereinander */
@media (max-width: 900px) {

    body.et-fb .case-scroll-section>.case-scroll-row,
    .et-fb-root-ancestor .case-scroll-section>.case-scroll-row {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   TABLET & MOBILE – HORIZONTAL SCROLL
======================================== */

@media (max-width: 980px) {

    .case-scroll-section {
        /*
         * Fokus-Card auf kleineren Screens.
         * 86vw Breite, aber niemals höher
         * als der verfügbare Viewport.
         */
        --case-focus-width: min(90vw, 62vh);
        --case-preview-width: clamp(64px, 17vw, 88px);
        --case-preview-gap: 10px;

        min-height: 100vh !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    .case-scroll-section>.case-scroll-headline {
        top: clamp(22px, 4svh, 38px);
        left: 20px;
        width: calc(100% - 40px) !important;
    }

    .case-scroll-stage {
        width: 100%;
        height: 100svh;
        min-height: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;
    }

    .case-focus-viewport {
        flex: 0 0 var(--case-focus-width);
        width: var(--case-focus-width);
        max-width: calc(100vw - 32px);
        aspect-ratio: 4 / 5;
        overflow: hidden;
    }

    .case-focus-viewport .case-scroll-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: max-content !important;
        max-width: none !important;

        height: 100% !important;
        min-height: 100% !important;

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

        overflow: visible !important;
    }

    .case-focus-viewport .case-scroll-row .case-scroll-card {
        flex: 0 0 var(--case-focus-width) !important;

        width: var(--case-focus-width) !important;
        min-width: var(--case-focus-width) !important;
        max-width: var(--case-focus-width) !important;

        height: 100% !important;
        min-height: 100% !important;

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

        float: none !important;

        aspect-ratio: auto;

        overflow: hidden !important;
    }

    .case-preview-card {
        width: var(--case-preview-width) !important;
        min-width: var(--case-preview-width) !important;
        max-width: var(--case-preview-width) !important;

        aspect-ratio: 4 / 5;
    }

    /*
     * Auf schmalen Displays befinden sich die
     * Previews teilweise außerhalb des Viewports.
     * Das ist gewollt.
     */
    .case-preview-viewport {
        overflow: hidden;
    }
}

@media (max-width: 620px) {

    .case-preview-viewport {
        display: none !important;
    }
}