.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 14px 0;
    transition: transform .3s ease;
}

body:has(.intro) .site-header:not(.scrolled) {
    transform: translateY(-100%);
}

body:has(.intro) .site-header:not(.scrolled).toggled {
    transform: translateY(0%);
}

.site-header>.menu-toggle {
    grid-area: 1/2/1/2;
    justify-self: center;
    display: block;
    width: var(--m-sm);
    aspect-ratio: 1/1;
    mask: url(../img/menu-toggle.svg) no-repeat center/contain;
    -webkit-mask: url(../img/menu-toggle.svg) no-repeat center/contain;
    background: var(--white);
}

.site-header .phone {
    grid-area: 1/3/1/span 2;
}

.site-header .mail {
    grid-area: 1/5/1/span 2;
}

.site-header>.site-branding {
    grid-area: 1/7/1/span 2;
    margin-bottom: -7px;
}

.site-header>.site-branding img {
    width: auto;
    height: max(32px, 2.34375vw);
}

.site-header .cta-nav {
	grid-area: 1/9/1/span 4;
}

.site-header .cta-nav .menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: flex-end;
}

.site-header .wpml-ls {
    grid-area: 1/13/1/13;
    justify-self: flex-end;
}

.site-header .wpml-ls ul {
    display: flex;
}

.site-header .wpml-ls ul li {
    display: flex;
}

.site-header .wpml-ls ul li:not(:last-child)::after {
    content: "|";
    margin: 0 .5ch;
}

/* Main Navigation */
.site-header .main-nav .menu-close {
    grid-area: 1/2/1/span 12;
    justify-self: flex-end;
    display: block;
    width: max(32px, 2.34375vw);
    aspect-ratio: 1/1;
    background: url(../img/menu-close.svg) no-repeat center/contain;
}

.site-header .main-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: var(--header-height) 0 var(--m-md);
    overflow-x: clip;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: var(--def-trans);
}

.site-header.toggled .main-nav {
    transform: translateY(0%);
}

.site-header .main-nav #mainNav {
    grid-area: 2/3/2/span 7;
    display: flex;
    flex-direction: column;
    gap: max(24px, 2.96875vw);
    margin: var(--m-sm) 0;
}

.site-header .main-nav .menu-logo-bg {
    grid-area: 2/11/2/span 3;
    width: 100%;
    max-width: max(128px, 20.546875vw);
    aspect-ratio: 526/472;
    mask: url(../img/icon-logo-hotel-lebzelter.svg) no-repeat center/contain;
    -webkit-mask: url(../img/icon-logo-hotel-lebzelter.svg) no-repeat center/contain;
    background: var(--gold);
    opacity: .25;
}

.site-header .main-nav .lines-container {
    grid-area: 3/3/3/span 9;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.site-header .main-nav .lines-container::before,
.site-header .main-nav .lines-container::after {
    content: "";
    display: block;
    width: 100%;
    height: var(--line-height);
    background: currentColor;
}

.site-header .main-nav .lines-container::after {
    width: 32%;
}

.site-header .main-nav .site-branding {
    grid-area: 3/12/3/span 2;
}

.site-header .main-nav .site-branding img {
    width: 100%;
    height: auto;
}

.site-header .main-nav #subNav {
    grid-area: 4/3/4/span 7;
    display: flex;
    flex-wrap: wrap;
    gap: max(30px, 8.4375vw);
    margin-top: var(--m-sm);
}

@media (max-width: 1499.98px) {
    .site-header .main-nav #mainNav {
        grid-area: 2/2/2/span 8;
    }

    .site-header .main-nav .lines-container {
        grid-area: 3/2/3/span 9;
    }

    .site-header .main-nav .site-branding {
        grid-area: 3/11/3/span 3;
    }

    .site-header .main-nav #subNav {
        grid-area: 4/2/4/span 12;
    }
}

@media (max-width: 1199.98px) {
    .site-header .phone,
    .site-header .mail {
        display: none;
    }

    .site-header > .menu-toggle {
        grid-area: 1/2/1/span 3;
        justify-self: flex-start;
    }

    .site-header > .site-branding {
        grid-area: 1/5/1/span 6;
    }

    .site-header .wpml-ls {
        grid-area: 1/11/1/span 3;
    }
}

@media (max-width: 991.98px) {
    .site-header .cta-nav .menu {
        justify-items: center;
    }

    .site-header .main-nav .site-branding {
        grid-area: 1/2/1/span 6;
        justify-self: flex-start;
    }

    .site-header .main-nav .lines-container {
        grid-area: 3/2/3/span 12;
    }

    .site-header .main-nav .menu-close {
        align-self: center;
    }

    .site-header .main-nav .menu-logo-bg {
        grid-area: 2/10/2/span 5;
        max-width: max(200px, 20.546875vw);
    }
}

@media (max-width: 767.98px) {
    .site-header .cta-nav {
        display: none;
    }
}