/* =========================================================
   ALPIN – DEALER REGISTRATION POPUP
   Datei: 72-alpin-dealer-popup.css

   ALPIN DNA
   ---------------------------------------------------------
   Headline:
   Archivo ALPIN Variable / ExtraCondensed 800

   UI / Eyebrow / CTA:
   Archivo 700

   Body:
   Archivo 400

   Bild:
   /wp-content/themes/alpin/img/alpin-dealer-popup.webp

   Logo:
   /wp-content/themes/alpin/img/alpin-logo-white.png
========================================================= */


/* =========================================================
   01 | OVERLAY
========================================================= */

.alpin-dealer-popup {
    position:
        fixed !important;

    inset:
        0 !important;

    z-index:
        999999 !important;

    display:
        none !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    padding:
        28px !important;

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

    backdrop-filter:
        blur(8px) !important;

    -webkit-backdrop-filter:
        blur(8px) !important;

    box-sizing:
        border-box !important;
}


.alpin-dealer-popup.is-open {
    display:
        flex !important;
}


/* =========================================================
   02 | DIALOG
========================================================= */

.alpin-dealer-popup-dialog {
    position:
        relative !important;

    width:
        min(1420px, 100%) !important;

    max-height:
        calc(100vh - 56px) !important;

    min-height:
        650px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        grid !important;

    grid-template-columns:
        48% 52% !important;

    background:
        #080808 !important;

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

    box-shadow:
        0 30px 90px rgba(0,0,0,.58) !important;

    overflow:
        hidden !important;

    box-sizing:
        border-box !important;
}


/* =========================================================
   03 | LINKER BILDBEREICH
========================================================= */

.alpin-dealer-popup-media {
    position:
        relative !important;

    z-index:
        3 !important;

    width:
        calc(100% + 86px) !important;

    min-height:
        650px !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    background:
        #050505 !important;


    /* echte schräge Kante */

    clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 88px) 100%,
            0 100%
        ) !important;

    -webkit-clip-path:
        polygon(
            0 0,
            100% 0,
            calc(100% - 88px) 100%,
            0 100%
        ) !important;
}


/* =========================================================
   04 | FAHRZEUGBILD
========================================================= */

.alpin-dealer-popup-vehicle {
    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        0 !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        block !important;

    object-fit:
        cover !important;

    object-position:
        90% center !important;

    transform:
        scale(1.02) !important;

    transform-origin:
        center center !important;
}


/* =========================================================
   05 | BILD OVERLAY
========================================================= */

.alpin-dealer-popup-media::after {
    content:
        "" !important;

    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        1 !important;

    pointer-events:
        none !important;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.15) 0%,
            rgba(0,0,0,.015) 38%,
            rgba(0,0,0,.15) 68%,
            rgba(0,0,0,.68) 100%
        ) !important;
}


/* =========================================================
   06 | ROTE DIAGONALKANTE
   exakt gleiche Geometrie wie Bildkante
========================================================= */

.alpin-dealer-popup-media::before {
    content:
        "" !important;

    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        7 !important;

    pointer-events:
        none !important;

    background:
        linear-gradient(
            180deg,
            #b80000 0%,
            #ff1515 48%,
            #d40000 100%
        ) !important;

    clip-path:
        polygon(
            calc(100% - 4px) 0,
            100% 0,
            calc(100% - 84px) 100%,
            calc(100% - 88px) 100%
        ) !important;

    -webkit-clip-path:
        polygon(
            calc(100% - 4px) 0,
            100% 0,
            calc(100% - 84px) 100%,
            calc(100% - 88px) 100%
        ) !important;
}


/* =========================================================
   07 | ALPIN LOGO
========================================================= */

.alpin-dealer-popup-logo {
    position:
        absolute !important;

    z-index:
        8 !important;

    top:
        34px !important;

    left:
        36px !important;

    width:
        235px !important;

    max-width:
        38% !important;

    height:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        block !important;

    object-fit:
        contain !important;

    pointer-events:
        none !important;

    filter:
        drop-shadow(
            0 4px 12px rgba(0,0,0,.35)
        ) !important;
}


/* =========================================================
   08 | TEXT UNTEN LINKS
========================================================= */

.alpin-dealer-popup-media-copy {
    position:
        absolute !important;

    z-index:
        8 !important;

    left:
        38px !important;

    bottom:
        34px !important;

    margin:
        0 !important;

    padding:
        0
        0
        0
        15px !important;

    border-left:
        3px solid
        var(--alpin-red, #d40000) !important;

    font-family:
        var(--alpin-font, "Archivo", Arial, sans-serif) !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1.55 !important;

    letter-spacing:
        1.7px !important;

    text-transform:
        uppercase !important;

    color:
        rgba(255,255,255,.90) !important;
}


/* =========================================================
   09 | RECHTER CONTENTBEREICH
========================================================= */

.alpin-dealer-popup-content {
    position:
        relative !important;

    z-index:
        2 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    padding:
        58px
        52px
        44px
        92px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        flex-start !important;

    justify-content:
        center !important;

    box-sizing:
        border-box !important;

    background:
        linear-gradient(
            115deg,
            #0b0b0b 0%,
            #080808 58%,
            #0d0d0d 100%
        ) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   10 | CLOSE BUTTON
========================================================= */

.alpin-dealer-popup-close {
    position:
        absolute !important;

    top:
        20px !important;

    right:
        22px !important;

    z-index:
        20 !important;

    width:
        42px !important;

    height:
        42px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    appearance:
        none !important;

    -webkit-appearance:
        none !important;

    background:
        transparent !important;

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

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    color:
        #ffffff !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        34px !important;

    font-weight:
        300 !important;

    line-height:
        1 !important;

    cursor:
        pointer !important;

    transition:
        color .18s ease,
        transform .18s ease,
        border-color .18s ease,
        background-color .18s ease !important;
}


.alpin-dealer-popup-close:hover {
    color:
        var(--alpin-red, #d40000) !important;

    border-color:
        rgba(212,0,0,.45) !important;

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

    transform:
        rotate(90deg) !important;
}


/* =========================================================
   11 | EYEBROW
========================================================= */

.alpin-dealer-popup-eyebrow {
    position:
        relative !important;

    width:
        100% !important;

    margin:
        0
        0
        25px
        0 !important;

    padding:
        0
        0
        14px
        0 !important;

    font-family:
        var(--alpin-font, "Archivo", Arial, sans-serif) !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        2.3px !important;

    text-transform:
        uppercase !important;

    color:
        rgba(255,255,255,.62) !important;
}


.alpin-dealer-popup-eyebrow::after {
    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    bottom:
        0 !important;

    width:
        42px !important;

    height:
        3px !important;

    background:
        var(--alpin-red, #d40000) !important;
}


/* =========================================================
   12 | HEADLINE
========================================================= */

.alpin-dealer-popup-title {
    width:
        100% !important;

    margin:
        0
        0
        19px
        0 !important;

    padding:
        0 !important;

    font-family:
        "Archivo ALPIN",
        "Archivo Narrow",
        "Archivo",
        Arial,
        sans-serif !important;

    font-size:
        clamp(
            46px,
            3.5vw,
            64px
        ) !important;

    font-weight:
        800 !important;

    font-style:
        normal !important;

    font-stretch:
        62.5% !important;

    font-variation-settings:
        "wdth" 62.5,
        "wght" 800 !important;

    line-height:
        .90 !important;

    letter-spacing:
        -.5px !important;

    text-transform:
        uppercase !important;

    color:
        #ffffff !important;
}


.alpin-dealer-popup-title .red {
    color:
        var(--alpin-red, #d40000) !important;
}


/* =========================================================
   13 | INTROTEXT
========================================================= */

.alpin-dealer-popup-intro {
    width:
        100% !important;

    max-width:
        620px !important;

    margin:
        0
        0
        28px
        0 !important;

    padding:
        0 !important;

    font-family:
        var(--alpin-font, "Archivo", Arial, sans-serif) !important;

    font-size:
        15px !important;

    font-weight:
        400 !important;

    line-height:
        1.52 !important;

    color:
        rgba(255,255,255,.74) !important;
}


/* =========================================================
   14 | BENEFITS GRID
========================================================= */

.alpin-dealer-popup-benefits {
    width:
        100% !important;

    margin:
        0
        0
        30px
        0 !important;

    padding:
        0 !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(2, minmax(0,1fr)) !important;

    gap:
        0 !important;

    border-top:
        1px solid rgba(255,255,255,.10) !important;

    border-left:
        1px solid rgba(255,255,255,.10) !important;

    box-sizing:
        border-box !important;
}


/* =========================================================
   15 | BENEFIT-KACHEL
========================================================= */

.alpin-dealer-popup-benefit {
    min-width:
        0 !important;

    min-height:
        132px !important;

    margin:
        0 !important;

    padding:
        22px
        20px !important;

    display:
        grid !important;

    grid-template-columns:
        50px
        minmax(0,1fr) !important;

    column-gap:
        16px !important;

    align-items:
        center !important;

    border-right:
        1px solid rgba(255,255,255,.10) !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;

    box-sizing:
        border-box !important;

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

    transition:
        background-color .18s ease,
        transform .18s ease,
        border-color .18s ease !important;
}


.alpin-dealer-popup-benefit:hover {
    background:
        rgba(255,255,255,.045) !important;

    border-color:
        rgba(255,255,255,.15) !important;

    transform:
        translateY(-1px) !important;
}


/* =========================================================
   16 | ICON
========================================================= */

.alpin-dealer-popup-benefit-icon {
    width:
        46px !important;

    height:
        46px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    color:
        var(--alpin-red, #d40000) !important;
}


.alpin-dealer-popup-benefit-icon svg {
    display:
        block !important;

    width:
        38px !important;

    height:
        38px !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    fill:
        none !important;

    stroke:
        currentColor !important;

    stroke-width:
        2.1 !important;

    stroke-linecap:
        round !important;

    stroke-linejoin:
        round !important;

    transition:
        transform .18s ease,
        color .18s ease !important;
}


.alpin-dealer-popup-benefit:hover
.alpin-dealer-popup-benefit-icon svg {
    transform:
        scale(1.06) !important;
}


/*
 * Sicherheit:
 * alte CSS-Pseudo-Icons deaktivieren.
 */

.alpin-dealer-popup-benefit-icon::before,
.alpin-dealer-popup-benefit-icon::after {
    content:
        none !important;

    display:
        none !important;
}


/* =========================================================
   17 | BENEFIT COPY
========================================================= */

.alpin-dealer-popup-benefit-copy {
    width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.alpin-dealer-popup-benefit-title {
    margin:
        0
        0
        6px
        0 !important;

    padding:
        0 !important;

    font-family:
        var(--alpin-font, "Archivo", Arial, sans-serif) !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .25px !important;

    text-transform:
        uppercase !important;

    color:
        #ffffff !important;
}


.alpin-dealer-popup-benefit-text {
    margin:
        0 !important;

    padding:
        0 !important;

    font-family:
        var(--alpin-font, "Archivo", Arial, sans-serif) !important;

    font-size:
        12px !important;

    font-weight:
        400 !important;

    line-height:
        1.4 !important;

    color:
        rgba(255,255,255,.60) !important;
}


/* =========================================================
   18 | CTA
========================================================= */

.alpin-dealer-popup-cta {
    width:
        100% !important;

    min-height:
        58px !important;

    margin:
        0 !important;

    padding:
        0
        24px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        space-between !important;

    gap:
        20px !important;

    box-sizing:
        border-box !important;

    background:
        linear-gradient(
            105deg,
            #b80000 0%,
            #d40000 52%,
            #c40000 100%
        ) !important;

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

    border-radius:
        2px !important;

    box-shadow:
        0 8px 20px rgba(212,0,0,.14) !important;

    text-decoration:
        none !important;

    font-family:
        var(--alpin-font, "Archivo", Arial, sans-serif) !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        .9px !important;

    text-transform:
        uppercase !important;

    color:
        #ffffff !important;

    transition:
        transform .18s ease,
        filter .18s ease,
        box-shadow .18s ease !important;
}


.alpin-dealer-popup-cta:hover {
    transform:
        translateY(-2px) !important;

    filter:
        brightness(1.06) !important;

    box-shadow:
        0 12px 28px rgba(212,0,0,.23) !important;
}


.alpin-dealer-popup-cta-arrow {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        27px !important;

    font-weight:
        300 !important;

    line-height:
        1 !important;

    transition:
        transform .18s ease !important;
}


.alpin-dealer-popup-cta:hover
.alpin-dealer-popup-cta-arrow {
    transform:
        translateX(5px) !important;
}


/* =========================================================
   19 | MEHR ERFAHREN
========================================================= */

.alpin-dealer-popup-more {
    display:
        inline-block !important;

    margin:
        17px
        0
        0
        0 !important;

    padding:
        0
        0
        5px
        0 !important;

    border-bottom:
        1px solid rgba(255,255,255,.30) !important;

    font-family:
        var(--alpin-font, "Archivo", Arial, sans-serif) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    letter-spacing:
        1.5px !important;

    text-transform:
        uppercase !important;

    text-decoration:
        none !important;

    color:
        rgba(255,255,255,.62) !important;

    transition:
        color .18s ease,
        border-color .18s ease !important;
}


.alpin-dealer-popup-more:hover {
    color:
        #ffffff !important;

    border-bottom-color:
        var(--alpin-red, #d40000) !important;
}


/* =========================================================
   20 | FOOTLINE
========================================================= */

.alpin-dealer-popup-footline {
    position:
        relative !important;

    width:
        100% !important;

    margin:
        27px
        0
        0
        0 !important;

    padding:
        13px
        0
        0
        54px !important;

    font-family:
        var(--alpin-font, "Archivo", Arial, sans-serif) !important;

    font-size:
        9px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        1.7px !important;

    text-transform:
        uppercase !important;

    text-align:
        right !important;

    color:
        rgba(255,255,255,.40) !important;
}


.alpin-dealer-popup-footline::before {
    content:
        "" !important;

    position:
        absolute !important;

    left:
        0 !important;

    top:
        17px !important;

    width:
        40px !important;

    height:
        2px !important;

    background:
        var(--alpin-red, #d40000) !important;
}


/* =========================================================
   21 | BODY LOCK
========================================================= */

html.alpin-dealer-popup-open,
body.alpin-dealer-popup-open {
    overflow:
        hidden !important;
}


/* =========================================================
   22 | TABLET
========================================================= */

@media (max-width: 1100px) {

    .alpin-dealer-popup {
        padding:
            20px !important;
    }


    .alpin-dealer-popup-dialog {
        grid-template-columns:
            44% 56% !important;

        min-height:
            600px !important;
    }


    .alpin-dealer-popup-media {
        width:
            calc(100% + 62px) !important;

        min-height:
            600px !important;
    }


    .alpin-dealer-popup-content {
        padding:
            48px
            38px
            40px
            76px !important;
    }


    .alpin-dealer-popup-title {
        font-size:
            50px !important;
    }


    .alpin-dealer-popup-benefit {
        min-height:
            122px !important;

        padding:
            18px
            16px !important;
    }
}


/* =========================================================
   23 | MOBILE
========================================================= */

@media (max-width: 767px) {

    .alpin-dealer-popup {
        padding:
            10px !important;
    }


    .alpin-dealer-popup-dialog {
        display:
            block !important;

        width:
            100% !important;

        min-height:
            0 !important;

        max-height:
            calc(100vh - 20px) !important;

        overflow-y:
            auto !important;
    }


    .alpin-dealer-popup-media {
        width:
            100% !important;

        min-height:
            210px !important;

        height:
            210px !important;

        clip-path:
            none !important;

        -webkit-clip-path:
            none !important;
    }


    .alpin-dealer-popup-media::before {
        display:
            none !important;
    }


    .alpin-dealer-popup-logo {
        top:
            18px !important;

        left:
            18px !important;

        width:
            145px !important;
    }


    .alpin-dealer-popup-media-copy {
        display:
            none !important;
    }


    .alpin-dealer-popup-content {
        padding:
            34px
            22px
            28px
            22px !important;
    }


    .alpin-dealer-popup-close {
        top:
            12px !important;

        right:
            12px !important;

        background:
            rgba(0,0,0,.45) !important;
    }


    .alpin-dealer-popup-title {
        font-size:
            clamp(
                38px,
                11vw,
                48px
            ) !important;
    }


    .alpin-dealer-popup-benefits {
        grid-template-columns:
            1fr !important;
    }


    .alpin-dealer-popup-benefit {
        min-height:
            104px !important;
    }
}


/* =========================================================
   ENDE
   72-alpin-dealer-popup.css
========================================================= */