/* ==========================================================================
   OLDSCHDOD HERO SLIDER
   Editorial / Black Gradient / Responsive
   ========================================================================== */


/* ==========================================================================
   HERO VIEWPORT
   ========================================================================== */

.oldschdod-hero-viewport {

    width:
        100vw !important;

    max-width:
        100vw !important;

    height:
        85vh !important;

    position:
        relative !important;

    left:
        50% !important;

    right:
        50% !important;

    margin-left:
        -50vw !important;

    margin-right:
        -50vw !important;

    background:
        var(--bg-dark) !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;

    z-index:
        10 !important;
}


/* ==========================================================================
   GLOBAL RESET
   ========================================================================== */

.oldschdod-hero-viewport * {

    box-sizing:
        border-box !important;

    margin:
        0;

    padding:
        0;
}


/* ==========================================================================
   TRACK
   ========================================================================== */

.oldschdod-hero-track {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    width:
        300% !important;

    height:
        100% !important;

    transition:
        transform var(--transition-slow)
        cubic-bezier(.25,1,.5,1) !important;
}


/* ==========================================================================
   SLIDE
   ========================================================================== */

.oldschdod-hero-slide {

    height:
        100% !important;

    position:
        relative !important;
}


/* ==========================================================================
   SLIDE LINK
   ========================================================================== */

.oldschdod-hero-slide-link {

    width:
        100vw !important;

    min-width:
        100vw !important;

    max-width:
        100vw !important;

    height:
        100% !important;

    display:
        block !important;

    position:
        relative !important;

    text-decoration:
        none !important;
}


/* ==========================================================================
   HERO IMAGE
   ========================================================================== */

.oldschdod-hero-slide-bg {

    width:
        100% !important;

    height:
        100% !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

    position:
        relative !important;
}


/* ==========================================================================
   IMAGE DARKENING
   ========================================================================== */

/*
 * Nur eine transparente Ebene über dem Bild.
 *
 * KEINE background-color
 * KEIN background-blend-mode
 *
 * Das eigentliche inline background-image aus dem PHP
 * bleibt vollständig erhalten.
 */

.oldschdod-hero-slide-bg::before {

    content:
        "";

    position:
        absolute !important;

    inset:
        0 !important;

    background:
        rgba(0,0,0,.30) !important;

    pointer-events:
        none !important;

    z-index:
        1 !important;
}


/* ==========================================================================
   HERO OVERLAY
   ========================================================================== */

.oldschdod-hero-overlay {

    position:
        absolute !important;

    inset:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    /*
     * Schwarzer Verlauf von unten links.
     *
     * Der Verlauf zieht deutlich weiter in das Bild hinein,
     * läuft nach rechts/oben aber vollständig transparent aus.
     */

  background:
    linear-gradient(
        to top,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,.88) 10%,
        rgba(0,0,0,.65) 22%,
        rgba(0,0,0,.40) 35%,
        rgba(0,0,0,.20) 48%,
        rgba(0,0,0,.08) 60%,
        rgba(0,0,0,0) 72%
    ) !important;

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        nowrap !important;

    justify-content:
        space-between !important;

    align-items:
        flex-end !important;

    padding:
        0
        3rem
        10vh
        3rem !important;

    text-align:
        left !important;

    z-index:
        2 !important;
}


/* ==========================================================================
   HERO TEXT SIDE
   ========================================================================== */

.oldschdod-hero-text-side {

    width:
        100% !important;

    max-width:
        70% !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    min-width:
        0 !important;

    position:
        relative !important;

    z-index:
        5 !important;
}


/* ==========================================================================
   HERO CORE HEADLINE
   ========================================================================== */

h2.oldschdod-hero-core-headline {

    width:
        50vw !important;

    max-width:
        50vw !important;

    min-width:
        0 !important;

    box-sizing:
        border-box !important;

    font-family:
        var(--font-family-heading) !important;

    font-size:
        clamp(
            1.85rem,
            3vw,
            3.2rem
        ) !important;

    font-weight:
        900 !important;

    color:
        var(--text-inverse) !important;

    opacity:
        1 !important;

    filter:
        none !important;

    text-transform:
        uppercase !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -.025em !important;

    text-shadow:
        0
        .12rem
        .5rem
        rgba(0,0,0,.50) !important;

    margin-bottom:
        .9rem !important;

    display:
        block !important;

    position:
        relative !important;

    z-index:
        6 !important;
}


/* ==========================================================================
   HERO BUTTON
   ========================================================================== */

.oldschdod-hero-overlay .spvgg-btn {

    position:
        relative !important;

    z-index:
        6 !important;

    opacity:
        1 !important;

    filter:
        none !important;
}


/* ==========================================================================
   MOBILE HERO HEADLINE
   ========================================================================== */

@media (max-width: 767px) {

    h2.oldschdod-hero-core-headline {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        font-size:
            clamp(
                1.4rem,
                5.5vw,
                1.8rem
            ) !important;

        line-height:
            1.06 !important;

        letter-spacing:
            -.015em !important;

        margin-bottom:
            .6rem !important;

        color:
            var(--text-inverse) !important;

        opacity:
            1 !important;

        filter:
            none !important;

        text-shadow:
            0
            .12rem
            .5rem
            rgba(0,0,0,.50) !important;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    h2.oldschdod-hero-core-headline {

        width:
            100% !important;

        max-width:
            100% !important;

        font-size:
            1.3rem !important;

        color:
            var(--text-inverse) !important;

        opacity:
            1 !important;

        filter:
            none !important;
    }

}


/* ==========================================================================
   HERO META
   ========================================================================== */

.oldschdod-hero-meta {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        .75rem;

    margin-bottom:
        1rem;

    white-space:
        nowrap;

    line-height:
        1;
}


.oldschdod-hero-meta::before,
.oldschdod-hero-meta::after {

    display:
        none !important;

    content:
        none !important;
}


/* ==========================================================================
   HERO CATEGORY
   ========================================================================== */

.oldschdod-hero-category {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        1.5rem;

    padding:
        .3rem .65rem;

    background:
        var(--club-yellow);

    color:
        var(--club-black);

    border-radius:
        var(--radius-full);

    font-size:
        .625rem;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    line-height:
        1;

    white-space:
        nowrap;

    opacity:
        1 !important;

    filter:
        none !important;
}


/* ==========================================================================
   HERO TITLE
   ========================================================================== */

.oldschdod-hero-title {

    width:
        50vw !important;

    max-width:
        50vw !important;

    min-width:
        0 !important;

    flex:
        0 0 50vw !important;

    box-sizing:
        border-box !important;

    font-family:
        var(--font-family-heading) !important;

    font-size:
        clamp(
            2.4rem,
            4.6vw,
            4.6rem
        ) !important;

    font-weight:
        900 !important;

    color:
        var(--text-inverse) !important;

    opacity:
        1 !important;

    filter:
        none !important;

    text-transform:
        uppercase !important;

    line-height:
        .96 !important;

    letter-spacing:
        -.04em !important;

    text-shadow:
        0
        .12rem
        .5rem
        rgba(0,0,0,.50) !important;

    margin-bottom:
        1.1rem !important;

    position:
        relative !important;

    z-index:
        6 !important;
}


/* ==========================================================================
   TITLE ACCENT
   ========================================================================== */

.oldschdod-hero-title::after {

    content:
        "";

    display:
        block;

    width:
        3.5rem;

    height:
        .18rem;

    margin-top:
        1rem;

    background:
        var(--club-yellow);

    border-radius:
        var(--radius-full);
}


/* ==========================================================================
   HERO LINK / HOVER
   ========================================================================== */

.oldschdod-hero-slide-link:hover {

    color:
        inherit !important;
}


/* ==========================================================================
   HERO NAVIGATION / DOTS
   ========================================================================== */

.oldschdod-hero-dots {

    position:
        absolute !important;

    bottom:
        calc(10vh + .85rem) !important;

    right:
        8% !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        12px !important;

    z-index:
        30 !important;
}


.oldschdod-hero-dot {

    width:
        34px !important;

    height:
        10px !important;

    background:
        rgba(255,255,255,.12) !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    border-radius:
        var(--radius-full) !important;

    box-shadow:
        var(--shadow-sm) !important;

    cursor:
        pointer !important;

    position:
        relative !important;

    overflow:
        hidden;

    backdrop-filter:
        blur(6px);

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

    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}


.oldschdod-hero-dot:hover {

    transform:
        translateY(-1px);

    box-shadow:
        var(--shadow-md) !important;
}


.oldschdod-hero-dot-fill {

    position:
        absolute !important;

    top:
        0 !important;

    left:
        0 !important;

    height:
        100% !important;

    width:
        0%;

    background:
        var(--club-yellow) !important;

    border-radius:
        inherit;

    box-shadow:
        none !important;

    transition:
        width var(--transition-fast)
        linear;
}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 1000px) {

    .oldschdod-hero-overlay {

        padding:
            0
            2rem
            8vh
            2rem !important;
    }


    .oldschdod-hero-text-side {

        max-width:
            75% !important;
    }


    .oldschdod-hero-title {

        width:
            50vw !important;

        max-width:
            50vw !important;

        flex:
            0 0 50vw !important;

        font-size:
            clamp(
                2.2rem,
                5vw,
                3.6rem
            ) !important;

        color:
            var(--text-inverse) !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {


    /* ------------------------------------------------------
       VIEWPORT
       ------------------------------------------------------ */

    .oldschdod-hero-viewport {

        height:
            60vh !important;

        min-height:
            420px !important;
    }


    /* ------------------------------------------------------
       OVERLAY
       ------------------------------------------------------ */

    .oldschdod-hero-overlay {

        padding:
            0
            20px
            58px
            20px !important;

        flex-direction:
            column !important;

        justify-content:
            flex-end !important;

        align-items:
            center !important;

        text-align:
            center !important;

        background:

            radial-gradient(
                ellipse 105% 72% at 0% 100%,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,.97) 18%,
                rgba(0,0,0,.88) 34%,
                rgba(0,0,0,.68) 50%,
                rgba(0,0,0,.44) 64%,
                rgba(0,0,0,.22) 78%,
                rgba(0,0,0,.08) 90%,
                rgba(0,0,0,0) 100%
            ) !important;

        z-index:
            2 !important;
    }


    /* ------------------------------------------------------
       TEXT SIDE
       ------------------------------------------------------ */

    .oldschdod-hero-text-side {

        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;

        align-items:
            center !important;

        position:
            relative !important;

        z-index:
            5 !important;
    }


    /* ------------------------------------------------------
       META
       ------------------------------------------------------ */

    .oldschdod-hero-meta {

        width:
            100%;

        display:
            inline-flex;

        align-items:
            center;

        justify-content:
            center;

        gap:
            .6rem;

        margin-bottom:
            .8rem;

        white-space:
            nowrap;
    }


    .oldschdod-hero-category {

        min-height:
            1.4rem;

        padding:
            .28rem .6rem;

        font-size:
            .575rem;

        line-height:
            1;

        opacity:
            1 !important;

        filter:
            none !important;

        border-radius:
            var(--radius-full);
    }


    /* ------------------------------------------------------
       TITLE
       ------------------------------------------------------ */

    .oldschdod-hero-title {

        width:
            100% !important;

        max-width:
            100% !important;

        flex:
            0 1 auto !important;

        font-size:
            clamp(
                1.65rem,
                7vw,
                2.3rem
            ) !important;

        line-height:
            1.02 !important;

        letter-spacing:
            -.03em !important;

        color:
            var(--text-inverse) !important;

        opacity:
            1 !important;

        filter:
            none !important;

        text-shadow:
            0
            .12rem
            .5rem
            rgba(0,0,0,.50) !important;

        margin-bottom:
            .7rem !important;

        position:
            relative !important;

        z-index:
            6 !important;
    }


    .oldschdod-hero-title::after {

        width:
            2.5rem;

        height:
            .14rem;

        margin:
            .7rem auto 0;

        border-radius:
            var(--radius-full);
    }


    /* ------------------------------------------------------
       BUTTON
       ------------------------------------------------------ */

    .oldschdod-hero-overlay .spvgg-btn {

        opacity:
            1 !important;

        filter:
            none !important;

        position:
            relative !important;

        z-index:
            6 !important;
    }


    /* ------------------------------------------------------
       MOBILE DOTS
       ------------------------------------------------------ */

    .oldschdod-hero-dots {

        left:
            50% !important;

        right:
            auto !important;

        bottom:
            20px !important;

        transform:
            translateX(-50%) !important;

        justify-content:
            center !important;

        gap:
            9px !important;

        width:
            max-content;
    }


    .oldschdod-hero-dot {

        width:
            30px !important;

        height:
            5px !important;
    }

}


/* ==========================================================================
   VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .oldschdod-hero-viewport {

        height:
            58vh !important;

        min-height:
            390px !important;
    }


    .oldschdod-hero-overlay {

        padding:
            0
            16px
            54px
            16px !important;
    }


    .oldschdod-hero-meta {

        width:
            100%;

        gap:
            .5rem;

        margin-bottom:
            .7rem;
    }


    .oldschdod-hero-category {

        min-height:
            1.3rem;

        padding:
            .25rem .55rem;

        font-size:
            .55rem;
    }


    .oldschdod-hero-title {

        width:
            100% !important;

        max-width:
            100% !important;

        flex:
            0 1 auto !important;

        font-size:
            1.5rem !important;

        color:
            var(--text-inverse) !important;

        opacity:
            1 !important;

        filter:
            none !important;
    }


    .oldschdod-hero-dots {

        bottom:
            18px !important;

        gap:
            8px !important;
    }

}