/* =========================================
   GV MAIN HEADER
   ========================================= */

:root {

    --gv-blue: #001E50;
    --gv-navy: #1C2C5B;
    --gv-sky: #6CABDD;

    --gv-white: #FFFFFF;
    --gv-black: #111111;
    --gv-border: #E5E5E5;

    --gv-info-height: 36px;

    --gv-desktop-header-height: 76px;
    --gv-mobile-header-height: 64px;

}


/* =========================================
   OLD JTL HEADER AUSBLENDEN
   DATEN BLEIBEN IM DOM
   ========================================= */

#jtl-nav-wrapper > .hide-navbar,
#jtl-nav-wrapper > .container.menu-center-space-between {

    display: none !important;

}


/* =========================================
   MAIN HEADER
   ========================================= */

.gv-main-header {

    position: relative;

    z-index: 125;

    width: 100%;

}


/* =========================================
   DESKTOP
   ========================================= */

.gv-main-header__desktop {

    position: relative;

    display: block;

    width: 100%;

}


/* =========================================
   DESKTOP HEADER BAR
   ========================================= */

.gv-main-header__desktop-inner {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(160px, 220px)
        minmax(0, 1fr)
        auto;

    align-items: center;

    width: 100%;

    height:
        var(--gv-desktop-header-height);

    padding:
        0
        clamp(24px, 4vw, 64px);

    background:
        rgba(
            0,
            30,
            80,
            0.86
        );

    border-top:
        1px solid
        rgba(
            0,
            30,
            80,
            1
        );

    border-bottom:
        1px solid
        rgba(
            0,
            30,
            80,
            1
        );

    backdrop-filter:
        blur(14px);

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

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        backdrop-filter 0.25s ease;

}


/* =========================================
   HERO STATE
   ========================================= */

body.gv-has-hero.gv-hero-visible:not(.gv-mega-open)
.gv-main-header__desktop-inner {

    background:
        rgba(
            0,
            30,
            80,
            0.42
        );

    border-top:
        1px solid
        rgba(
            0,
            30,
            80,
            0.95
        );

    border-bottom:
        1px solid
        rgba(
            0,
            30,
            80,
            0.95
        );

    backdrop-filter:
        blur(10px);

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

}


/* =========================================
   AFTER SCROLL
   ========================================= */

body.gv-has-hero:not(.gv-hero-visible)
.gv-main-header__desktop-inner,

body:not(.gv-has-hero)
.gv-main-header__desktop-inner {

    background:
        rgba(
            0,
            30,
            80,
            0.86
        );

    border-top:
        1px solid
        rgba(
            0,
            30,
            80,
            1
        );

    border-bottom:
        1px solid
        rgba(
            0,
            30,
            80,
            1
        );

    backdrop-filter:
        blur(14px);

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

}


/* =========================================
   LOGO
   ========================================= */

.gv-main-header__logo {

    display: flex;

    align-items: center;

    width: 180px;

    text-decoration: none;

}


.gv-main-header__logo-image {

    display: block;

    width: 100%;

    max-height: 48px;

    object-fit: contain;

    object-position:
        left center;

    filter:
        none !important;

}


/* =========================================
   NAVIGATION
   ========================================= */

.gv-main-header__nav {

    min-width: 0;

    transition:
        opacity 0.18s ease;

}


.gv-main-header__nav-items {

    display: flex;

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

    gap:
        clamp(
            18px,
            2vw,
            36px
        );

    min-width: 0;

}


/* =========================================
   NAV ITEMS
   ========================================= */

.gv-main-header__nav-item {

    position: relative;

    display: flex;

    align-items: center;

    height:
        var(--gv-desktop-header-height);

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        ) !important;

    font: inherit;

    font-size: 14px;

    font-weight: 500;

    line-height: 1.35;

    white-space: nowrap;

    cursor: pointer;

    text-decoration:
        none !important;

    transition:
        color 0.2s ease;

}


.gv-main-header__nav-item:visited {

    color:
        rgba(
            255,
            255,
            255,
            0.88
        ) !important;

}


.gv-main-header__nav-item:hover,
.gv-main-header__nav-item.is-active {

    color:
        #FFFFFF !important;

}


/* =========================================
   NAV UNDERLINE
   ========================================= */

.gv-main-header__nav-item::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: 19px;

    height: 1px;

    background:
        currentColor;

    opacity: 0.48;

    transform:
        scaleX(0);

    transform-origin:
        center;

    transition:
        transform 0.2s ease;

}


.gv-main-header__nav-item:hover::after,
.gv-main-header__nav-item.is-active::after {

    transform:
        scaleX(1);

}


/* =========================================
   UTILITIES
   ========================================= */

.gv-main-header__utilities {

    display: flex;

    align-items: center;

    gap: 3px;

    padding-left: 24px;

    transition:
        opacity 0.18s ease;

}


.gv-main-header__icon-button {

    position: relative;

    display: flex;

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

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        rgba(
            255,
            255,
            255,
            0.92
        ) !important;

    cursor: pointer;

    font-size: 16px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;

}


.gv-main-header__icon-button:hover {

    color:
        #FFFFFF !important;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


/* =========================================
   CART COUNT
   ========================================= */

.gv-main-header__cart-count:not(:empty) {

    position: absolute;

    top: 5px;
    right: 4px;

    min-width: 16px;
    height: 16px;

    display: flex;

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

    padding:
        0
        4px;

    border-radius:
        999px;

    background:
        var(--gv-sky);

    color:
        var(--gv-blue);

    font-size: 9px;

    font-weight: 700;

}


/* =========================================
   SEARCH OPEN
   ========================================= */

body.gv-search-open
.gv-main-header__nav,

body.gv-search-open
.gv-main-header__utilities {

    opacity: 0;

    pointer-events: none;

}


/* =========================================
   DESKTOP SEARCH
   ========================================= */

.gv-search-panel {

    position: absolute;

    top: 0;

    left:
        clamp(
            210px,
            18vw,
            280px
        );

    right:
        clamp(
            24px,
            4vw,
            64px
        );

    z-index: 40;

    display: flex;

    align-items: center;

    gap: 12px;

    height:
        var(--gv-desktop-header-height);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-4px);

    pointer-events: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

}


body.gv-search-open
.gv-search-panel {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    pointer-events: auto;

}


/* =========================================
   SEARCH FORM
   ========================================= */

.gv-search-panel__form {

    display: flex;

    align-items: stretch;

    flex: 1;

    height: 48px;

    overflow: hidden;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.70
        );

    border-radius:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );

    backdrop-filter:
        blur(10px);

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

}


/* =========================================
   SEARCH INPUT
   ========================================= */

.gv-search-panel__input {

    flex: 1;

    min-width: 0;

    height: 46px;

    padding:
        0
        18px;

    border: 0;

    outline: none;

    background:
        transparent;

    color:
        #FFFFFF;

    font-size: 15px;

}


.gv-search-panel__input::placeholder {

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

}


/* =========================================
   SEARCH BUTTON
   ========================================= */

.gv-search-panel__submit {

    display: flex;

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

    flex:
        0
        0
        58px;

    width: 58px;

    border: 0;

    border-left:
        1px solid
        rgba(
            255,
            255,
            255,
            0.50
        );

    background:
        transparent;

    color:
        #FFFFFF;

    cursor: pointer;

    font-size: 16px;

}


/* =========================================
   SEARCH CLOSE
   ========================================= */

.gv-search-panel__close {

    display: flex;

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

    flex:
        0
        0
        46px;

    width: 46px;
    height: 46px;

    padding: 0;

    border: 0;

    background:
        transparent;

    color:
        #FFFFFF !important;

    cursor: pointer;

    font-size: 20px;

}


/* =========================================
   MEGA MENU
   ========================================= */

.gv-mega-menu {

    position: absolute;

    top:
        var(--gv-desktop-header-height);

    left: 0;
    right: 0;

    z-index: 25;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        max-height 0.35s ease,
        opacity 0.22s ease;

}


body.gv-mega-open
.gv-mega-menu {

    max-height: 620px;

    opacity: 1;

    pointer-events: auto;

}


/* =========================================
   MEGA GRID
   ========================================= */

.gv-mega-menu__inner {

    display: grid;

    grid-template-columns:
        minmax(230px, 0.9fr)
        minmax(280px, 1.15fr)
        minmax(360px, 1.7fr);

    min-height: 430px;

    background:
        rgba(
            0,
            30,
            80,
            0.92
        );

    color:
        #FFFFFF;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

    border-bottom:
        1px solid
        rgba(
            0,
            30,
            80,
            1
        );

    backdrop-filter:
        blur(14px);

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

}


/* =========================================
   MEGA COLUMNS
   ========================================= */

.gv-mega-menu__level-one,
.gv-mega-menu__level-two {

    padding:
        38px
        clamp(
            28px,
            3vw,
            54px
        );

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.14
        );

}


/* =========================================
   MEGA HEADINGS
   ========================================= */

.gv-mega-menu__heading,
.gv-mega-menu__subheading {

    margin-bottom: 24px;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform:
        uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.58
        ) !important;

}


/* =========================================
   MEGA LINKS
   ========================================= */

.gv-mega-menu__level-one-items,
.gv-mega-menu__level-two-items {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 4px;

}


.gv-mega-menu__link,
.gv-mega-menu__link:link,
.gv-mega-menu__link:visited {

    position: relative;

    display: inline-flex;

    align-items: center;

    min-height: 37px;

    padding:
        3px
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        ) !important;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.4;

    text-decoration:
        none !important;

    cursor: pointer;

    transition:
        color 0.18s ease,
        transform 0.18s ease;

}


.gv-mega-menu__link:hover,
.gv-mega-menu__link.is-active {

    color:
        #FFFFFF !important;

}


.gv-mega-menu__level-one
.gv-mega-menu__link.is-active {

    transform:
        translateX(5px);

}


.gv-mega-menu__level-one
.gv-mega-menu__link.is-active::before {

    content: "";

    width: 18px;
    height: 1px;

    margin-right: 10px;

    background:
        var(--gv-sky);

}


/* =========================================
   EDITORIAL
   ========================================= */

.gv-mega-menu__editorial {

    position: relative;

    overflow: hidden;

}


.gv-mega-menu__editorial-link {

    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 430px;

    color:
        #FFFFFF !important;

    text-decoration:
        none !important;

}


.gv-mega-menu__editorial-media {

    position: absolute;

    inset: 0;

    /*
     * Bild wird aus gv-header-config.js
     * dynamisch gesetzt.
     */

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    transition:
        transform 0.6s ease;

}


.gv-mega-menu__editorial-link:hover
.gv-mega-menu__editorial-media {

    transform:
        scale(1.02);

}


.gv-mega-menu__editorial-content {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding:
        38px
        42px;

}


.gv-mega-menu__editorial-eyebrow {

    display: block;

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.09em;

}


.gv-mega-menu__editorial-title {

    max-width: 420px;

    font-size:
        clamp(
            24px,
            2vw,
            36px
        );

    font-weight: 500;

    line-height: 1.05;

}


.gv-mega-menu__editorial-cta {

    display: block;

    margin-top: 16px;

    font-size: 13px;

    font-weight: 600;

}


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

.gv-main-header__mobile {

    display: none;

}


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

@media (max-width: 991px) {

    #jtl-nav-wrapper
    #header-top-bar.d-none {

        display:
            flex !important;

    }


    body.gv-mobile-menu-open
    #jtl-nav-wrapper
    #header-top-bar,

    body.gv-mobile-search-open
    #jtl-nav-wrapper
    #header-top-bar {

        position:
            fixed !important;

        top:
            0 !important;

        left:
            0 !important;

        right:
            0 !important;

        z-index:
            10050 !important;

        display:
            flex !important;

        height:
            var(--gv-info-height) !important;

        min-height:
            var(--gv-info-height) !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        transform:
            none !important;

    }


    .gv-main-header__desktop {

        display: none;

    }


    .gv-main-header__mobile {

        display: block;

    }


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

    .gv-mobile-header__bar {

        display: grid;

        grid-template-columns:
            80px
            1fr
            80px;

        align-items: center;

        height:
            var(--gv-mobile-header-height);

        padding:
            0
            14px;

        background:
            rgba(
                0,
                30,
                80,
                0.86
            );

        border-top:
            1px solid
            rgba(
                0,
                30,
                80,
                1
            );

        border-bottom:
            1px solid
            rgba(
                0,
                30,
                80,
                1
            );

        backdrop-filter:
            blur(12px);

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

    }


    body.gv-has-hero.gv-hero-visible:not(.gv-mobile-menu-open):not(.gv-mobile-search-open)
    .gv-mobile-header__bar {

        background:
            rgba(
                0,
                30,
                80,
                0.42
            );

        backdrop-filter:
            blur(8px);

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

    }


    /* =====================================
       BURGER
       ===================================== */

    .gv-mobile-header__burger {

        display: flex;

        flex-direction: column;

        justify-content: center;

        gap: 5px;

        width: 42px;
        height: 42px;

        padding: 8px;

        border: 0;

        background:
            transparent;

        cursor: pointer;

    }


    .gv-mobile-header__burger span {

        display: block;

        width: 21px;
        height: 1.5px;

        background:
            #FFFFFF;

    }


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

    .gv-mobile-header__logo {

        justify-self:
            center;

        width: 150px;

    }


    .gv-mobile-header__logo img {

        display: block;

        width: 100%;

        max-height: 42px;

        object-fit:
            contain;

        filter:
            none !important;

    }


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

    .gv-mobile-header__actions {

        display: flex;

        justify-content:
            flex-end;

    }


    .gv-mobile-header__search,
    .gv-mobile-header__cart {

        display: flex;

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

        width: 40px;
        height: 40px;

        padding: 0;

        border: 0;

        background:
            transparent;

        color:
            #FFFFFF !important;

        cursor: pointer;

    }


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

    .gv-mobile-menu {

        position:
            fixed;

        top:
            var(--gv-info-height);

        left:
            0;

        right:
            0;

        bottom:
            0;

        z-index:
            10040;

        display:
            flex;

        flex-direction:
            column;

        background:
            #FFFFFF;

        transform:
            translateX(-100%);

        transition:
            transform
            0.32s
            cubic-bezier(
                0.4,
                0,
                0.2,
                1
            );

    }


    body.gv-mobile-menu-open
    .gv-mobile-menu {

        transform:
            translateX(0);

    }


    body.gv-mobile-menu-open {

        overflow:
            hidden;

    }


    /* =====================================
       MOBILE MENU TOP
       ===================================== */

    .gv-mobile-menu__top {

        display: grid;

        grid-template-columns:
            90px
            1fr
            90px;

        align-items: center;

        min-height: 66px;

        padding:
            0
            16px;

        border-bottom:
            1px solid
            #EDEDED;

    }


    .gv-mobile-menu__title {

        text-align:
            center;

        font-size: 14px;

        font-weight: 600;

        color:
            var(--gv-blue);

    }


    .gv-mobile-menu__back {

        display: flex;

        align-items: center;

        gap: 8px;

        height: 42px;

        padding: 0;

        border: 0;

        background:
            transparent;

        color:
            var(--gv-blue);

        cursor: pointer;

        opacity: 0;

        pointer-events:
            none;

    }


    .gv-mobile-menu__back.is-visible {

        opacity: 1;

        pointer-events:
            auto;

    }


    .gv-mobile-menu__close {

        justify-self:
            end;

        display: flex;

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

        width: 44px;
        height: 44px;

        padding: 0;

        border: 0;

        background:
            transparent;

        color:
            var(--gv-blue);

        cursor: pointer;

        font-size: 21px;

    }


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

    .gv-mobile-menu__content {

        flex: 1;

        overflow-y:
            auto;

        padding:
            18px
            22px
            40px;

    }


    .gv-mobile-menu__item {

        display: flex;

        align-items: center;
        justify-content:
            space-between;

        width: 100%;

        min-height: 58px;

        padding:
            8px
            0;

        border: 0;

        border-bottom:
            1px solid
            #EEEEEE;

        background:
            transparent;

        color:
            #111111;

        font-size: 17px;

        font-weight: 500;

        line-height: 1.35;

        text-align:
            left;

        text-decoration:
            none;

        cursor:
            pointer;

    }


    .gv-mobile-menu__item:hover {

        color:
            var(--gv-blue);

    }


    .gv-mobile-menu__item-chevron {

        font-size: 11px;

        color:
            #888888;

    }


    .gv-mobile-menu__all {

        display: block;

        margin-bottom: 16px;

        padding:
            14px
            0;

        color:
            var(--gv-blue);

        font-size: 13px;

        font-weight: 600;

        text-decoration:
            none;

    }


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

    .gv-mobile-search-panel {

        position:
            fixed;

        top:
            var(--gv-info-height);

        left:
            0;

        right:
            0;

        bottom:
            0;

        z-index:
            10040;

        display:
            none;

        padding:
            20px;

        background:
            rgba(
                0,
                30,
                80,
                0.94
            );

        backdrop-filter:
            blur(16px);

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

    }


    body.gv-mobile-search-open
    .gv-mobile-search-panel {

        display:
            block;

    }


    body.gv-mobile-search-open {

        overflow:
            hidden;

    }


    .gv-mobile-search-panel__top {

        display: flex;

        align-items: center;

        gap: 10px;

        width: 100%;

    }


    .gv-mobile-search-panel__form {

        display: flex;

        flex: 1;

        height: 50px;

        overflow:
            hidden;

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                0.70
            );

        border-radius:
            12px;

        background:
            rgba(
                255,
                255,
                255,
                0.08
            );

    }


    .gv-mobile-search-panel__input {

        flex: 1;

        min-width: 0;

        padding:
            0
            14px;

        border: 0;

        outline: none;

        background:
            transparent;

        color:
            #FFFFFF;

        font-size: 15px;

    }


    .gv-mobile-search-panel__input::placeholder {

        color:
            rgba(
                255,
                255,
                255,
                0.72
            );

    }


    .gv-mobile-search-panel__submit {

        width: 52px;

        border: 0;

        border-left:
            1px solid
            rgba(
                255,
                255,
                255,
                0.50
            );

        background:
            transparent;

        color:
            #FFFFFF;

        cursor:
            pointer;

    }


    .gv-mobile-search-panel__close {

        display: flex;

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

        width: 48px;
        height: 48px;

        padding: 0;

        border: 0;

        background:
            transparent;

        color:
            #FFFFFF;

        cursor:
            pointer;

        font-size: 21px;

    }

}