/* =========================================================
   ALPIN – LANGUAGE SELECTOR POPUP
   Datei: 71-alpin-language-popup.css
========================================================= */


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

.alpin-language-popup {
    position: fixed !important;
    inset: 0 !important;

    z-index: 1000000 !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 32px !important;

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

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

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

    box-sizing: border-box !important;
}


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


/* =========================================================
   02 | POPUP
========================================================= */

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

    width: min(1180px, 100%) !important;
    max-height: calc(100vh - 64px) !important;

    display: grid !important;

    grid-template-columns:
        50% 50% !important;

    background:
        #ffffff !important;

    box-shadow:
        0 28px 80px rgba(0,0,0,.48) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


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

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

    min-height: 620px !important;

    background:
        #080808 !important;

    overflow: hidden !important;
}


.alpin-language-popup-media > img:not(.alpin-language-popup-logo) {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

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

    object-fit: cover !important;

    object-position:
        center center !important;
}


/* dunkler Bildverlauf */

.alpin-language-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,.18) 0%,
            rgba(0,0,0,.02) 45%,
            rgba(0,0,0,.22) 100%
        ) !important;
}


/* =========================================================
   04 | ALPIN LOGO AUF DEM BILD
========================================================= */

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

    z-index: 3 !important;

    top: 38px !important;
    left: 38px !important;

    width: 240px !important;
    max-width: 42% !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 10px rgba(0,0,0,.25)
        ) !important;
}


/* =========================================================
   05 | RECHTER CONTENTBEREICH
========================================================= */

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

    padding:
        64px
        58px
        52px
        58px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;
    align-items: flex-start !important;

    box-sizing: border-box !important;

    background:
        #ffffff !important;
}


/* =========================================================
   06 | EYEBROW
========================================================= */

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

    margin:
        0
        0
        32px
        0 !important;

    padding:
        0
        0
        14px
        0 !important;

    font-family:
        var(--alpin-font-ui) !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    letter-spacing: 1.2px !important;

    text-transform: uppercase !important;

    color:
        #606060 !important;
}


.alpin-language-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;
}


/* =========================================================
   07 | HEADLINE
========================================================= */

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

    margin:
        0
        0
        24px
        0 !important;

    padding: 0 !important;

    font-family:
        var(--alpin-font-headline) !important;

    font-size:
        clamp(
            44px,
            3.4vw,
            60px
        ) !important;

    font-weight:
        var(--alpin-headline-weight) !important;

    font-style:
        normal !important;

    font-stretch:
        62.5% !important;

    font-variation-settings:
        "wdth" var(--alpin-headline-width),
        "wght" var(--alpin-headline-weight) !important;

    line-height:
        .92 !important;

    letter-spacing:
        -.55px !important;

    text-transform:
        uppercase !important;

    color:
        #111111 !important;
}


/* =========================================================
   08 | TEXT
========================================================= */

.alpin-language-popup-text {
    width: 100% !important;

    max-width:
        500px !important;

    margin:
        0
        0
        34px
        0 !important;

    padding: 0 !important;

    font-family:
        var(--alpin-font-body) !important;

    font-size:
        17px !important;

    font-weight:
        400 !important;

    line-height:
        1.5 !important;

    color:
        #444444 !important;
}


/* =========================================================
   09 | LANGUAGE OPTIONS
========================================================= */

.alpin-language-popup-options {
    width: 100% !important;

    margin:
        0
        0
        38px
        0 !important;

    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap:
        14px !important;
}


/* =========================================================
   10 | LANGUAGE BUTTON
========================================================= */

.alpin-language-option {
    width: 100% !important;

    min-height:
        76px !important;

    margin:
        0 !important;

    padding:
        0
        26px !important;

    display: grid !important;

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

    column-gap:
        20px !important;

    align-items:
        center !important;

    box-sizing:
        border-box !important;

    background:
        #ffffff !important;

    border:
        1px solid
        rgba(0,0,0,.28) !important;

    text-decoration:
        none !important;

    color:
        #111111 !important;

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


.alpin-language-option:hover {
    border-color:
        var(--alpin-red, #d40000) !important;

    background:
        #fafafa !important;

    transform:
        translateX(4px) !important;
}


/* =========================================================
   11 | FLAGGEN
========================================================= */

.alpin-language-option-flag {
    display: block !important;

    width:
        54px !important;

    height:
        34px !important;

    object-fit:
        cover !important;

    box-shadow:
        0 0 0 1px rgba(0,0,0,.08) !important;
}


/* =========================================================
   12 | SPRACHNAME
========================================================= */

.alpin-language-option-label {
    font-family:
        var(--alpin-font-ui) !important;

    font-size:
        19px !important;

    font-weight:
        700 !important;

    line-height:
        1 !important;

    text-transform:
        uppercase !important;

    color:
        #111111 !important;
}


/* =========================================================
   13 | PFEIL
========================================================= */

.alpin-language-option-arrow {
    display: block !important;

    width:
        38px !important;

    margin: 0 !important;

    padding: 0 !important;

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

    font-size:
        30px !important;

    font-weight:
        300 !important;

    line-height:
        1 !important;

    text-align:
        right !important;

    color:
        #111111 !important;

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


.alpin-language-option:hover
.alpin-language-option-arrow {
    transform:
        translateX(5px) !important;

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


/* =========================================================
   14 | FOOTLINE
========================================================= */

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

    margin: 0 !important;

    padding:
        0
        0
        14px
        0 !important;

    font-family:
        var(--alpin-font-ui) !important;

    font-size:
        11px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        1.5px !important;

    text-transform:
        uppercase !important;

    color:
        #777777 !important;
}


.alpin-language-popup-footline::after {
    content: "" !important;

    position: absolute !important;

    left: 0 !important;
    bottom: 0 !important;

    width:
        42px !important;

    height:
        3px !important;

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


/* =========================================================
   15 | BODY LOCK
========================================================= */

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


/* =========================================================
   16 | TABLET
========================================================= */

@media (max-width: 1024px) {

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


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


    .alpin-language-popup-media {
        min-height:
            560px !important;
    }


    .alpin-language-popup-logo {
        top:
            28px !important;

        left:
            28px !important;

        width:
            190px !important;
    }


    .alpin-language-popup-content {
        padding:
            48px
            38px
            42px
            38px !important;
    }


    .alpin-language-popup-title {
        font-size:
            44px !important;
    }


    .alpin-language-popup-text {
        font-size:
            15px !important;
    }
}


/* =========================================================
   17 | MOBILE
========================================================= */

@media (max-width: 767px) {

    .alpin-language-popup {
        padding:
            12px !important;
    }


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

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

        overflow-y:
            auto !important;
    }


    .alpin-language-popup-media {
        min-height:
            190px !important;
    }


    .alpin-language-popup-logo {
        top:
            20px !important;

        left:
            20px !important;

        width:
            145px !important;

        max-width:
            45% !important;
    }


    .alpin-language-popup-content {
        padding:
            32px
            22px
            28px
            22px !important;
    }


    .alpin-language-popup-eyebrow {
        margin-bottom:
            22px !important;
    }


    .alpin-language-popup-title {
        font-size:
            clamp(
                34px,
                10vw,
                42px
            ) !important;

        margin-bottom:
            18px !important;
    }


    .alpin-language-popup-text {
        font-size:
            14px !important;

        margin-bottom:
            24px !important;
    }


    .alpin-language-option {
        min-height:
            66px !important;

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

        column-gap:
            14px !important;

        padding:
            0
            18px !important;
    }


    .alpin-language-option-flag {
        width:
            44px !important;

        height:
            28px !important;
    }


    .alpin-language-option-label {
        font-size:
            16px !important;
    }


    .alpin-language-option-arrow {
        width:
            28px !important;

        font-size:
            26px !important;
    }
}


/* =========================================================
   ENDE
   71-alpin-language-popup.css
========================================================= */