/* ================================
 * Header – Unterseiten (Desktop)
 * ================================ */


:root {
    --header-height: 0px;
    --safe-top: env(safe-area-inset-top, 0px);
}

html, body {
    margin: 0 !important;
    padding: 0;
    background-color: #E3D6C5;
}

body.has-fixed-header{
    padding-top: calc(var(--header-height) + var(--safe-top));
}

html{
    scroll-padding-top: calc(var(--header-height) + var(--safe-top) + 12px);
}
[id]{
    scroll-margin-top: calc(var(--header-height) + var(--safe-top) + 12px);
}



.site-header.page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #E3D6C5;
    border: none !important;
    transition: transform 0.25s ease-out, background-color 0.25s ease-out;
}

/* Innerer Header-Container wie Footer + Home – gleiche Breite */
.site-header .header-inner {
    max-width: 90vw;
    margin: 0 auto;

    /* oben mehr Luft, unten nur wenig */
    padding: 4vw 2.5rem 1.2rem;   /* top | left/right | bottom */

    display: flex;
    align-items: flex-end; /* Elemente unten im Header ausrichten */
    justify-content: flex-start;
    gap: 2.5rem;
}

/* Logo links */
.header-logo img,
.header-logo svg {
    display: block;
    height: clamp(34px, 5.5vw, 48px);
    width: auto;
    max-width: 60vw;
    max-height: 4vw;
    min-height: 42px;
    padding-bottom: 0.4rem
}
/* Header-Logo als Inline-Flex, ersetzt d-inline-flex align-items-center */
.header-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex: 0 1 auto;
}


/* ================================
 * Navigation – Unterseiten (Desktop)
 * ================================ */

.site-nav .nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.5rem;
}

/* Links im Menü */
.site-nav .nav-list .nav-link {
    font-weight: 300;
    text-decoration: none !important;
    color: #1F3C55 !important;
    font-size: clamp(1.4rem, 2vw, 1.6rem);
}

/* Hover */
.site-nav .nav-list .nav-link:hover {
    font-weight: 400;
}

/* ================================
 * Sprachumschalter rechts
 * ================================ */

/* Menü bekommt etwas Abstand zum Logo */
.site-header .header-inner > .page-nav,
.site-header .header-inner > .site-nav {
    margin-left: 2rem;
}

/* letzte Komponente im Header (DE/EN) nach rechts schieben */
.site-header .header-inner > :last-child {
    margin-left: auto;
}


.lang-switch {
    margin-left: auto;
    color: #1F3C55 !important;
}

.lang-switch .lang-link,
.lang-switch .lang-separator {
    font-size: clamp(1.4rem, 2vw, 1.6rem) !important;
}


.header-right,
.lang-switch {
    margin-left: auto;
}

.lang-link {
    font-weight: 300 !important;
    text-decoration: none;
    color: #1F3C55 !important;
}

.lang-link:hover {
    text-decoration: none;
    font-weight: 400 !important;
}

/* aktive Sprache */
.lang-link.active,
.lang-link.is-active,
.lang-link.lang-active,
.lang-link.btn-primary {
    font-weight: 700 !important;
}

.lang-separator {
    margin: 0 0.3rem;
    color: #1F3C55;
}

/* ================================
 * Burger & Mobil-Header
 * ================================ */

.burger-button {
    display: none; /* Desktop */
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-bottom: 1rem;
}

.burger-button span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 4px 0;
    background: #1F3C55;
}

/* Nur 2 Striche */
.burger-button span:nth-child(3) {
    display: none;
}

/* ================================
 *   Mobile Overlay-Menü
 * ================================ */

/* Overlay (gesamter Hintergrund) */
.nav-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    /*height: 100vh;*/
    display: none;
    background: transparent;
    z-index: 150; /* unter dem Header */
}

/* Wenn geöffnet */
.nav-overlay.open {
    display: flex;
}

/* Innerer Container */
.nav-overlay .overlay-inner {
    width: 100%;
    /*height: 100%;*/
    display: block;
}

/* Rosa Karte (Background full-width!) */
.nav-overlay .overlay-card {
    width: 100vw;          /* volle Breite, unabhängig von Containern */
    /*min-height: 100vh;     /* geht mindestens über gesamte Höhe */
    background: rgba(242, 211, 206, 0.95);

    padding-top: calc(var(--header-height) + 0.5rem); /* hier Abstand feinjustieren */
    padding-bottom: 2rem;
}

/* Overlay-Inhalt links perfekt ausgerichtet */
.overlay-lang-switch,
.nav-overlay .overlay-list {
    padding-left: 2rem;   /* gleiche Einrückung */
    padding-right: 2rem;
    margin-left: auto;    /* zentrieren */
    margin-right: auto;
    max-width: clamp(320px, 90vw, 1140px);
}


/* Inhalt in Karte → AUSGERICHTET wie Header/Footer */
.nav-overlay .overlay-card > * {
    max-width: clamp(320px, 90vw, 1140px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.overlay-lang-switch {
    margin-bottom: 2rem;
}

.nav-overlay .overlay-list {
    margin-top: 0;   /* früher war 1.5rem drin → das verschiebt es */
}


/* ================================
 *   Mobile Navigation Links
 * ================================ */

/* Overlay-Menü-Liste */
.nav-overlay .overlay-list {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0 2rem;  /* gleiches Padding wie DE / EN */

    max-width: clamp(320px, 90vw, 1140px);
    margin-left: auto;
    margin-right: auto;
}

.nav-overlay .overlay-list li + li {
    margin-top: 1rem;
}

.nav-overlay .overlay-list .nav-link {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 300;
    color: #1F3C55;
    text-decoration: none;
}

.nav-overlay .overlay-list .nav-link:hover,
.nav-overlay .overlay-list .nav-link.active {
    font-weight: 400;
}

/* ================================
 *   Sprache im Overlay
 * ================================ */

.overlay-lang-switch {
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.overlay-lang-switch .lang-link,
.overlay-lang-switch .lang-separator {
    color: #1F3C55;
    font-size: 1.4rem;
    font-weight: 300;
    text-decoration: none;
}

.overlay-lang-switch .lang-link:hover {
    font-weight: 400;
}

.overlay-lang-switch .lang-link.active {
    font-weight: 400;
}




/* ================================
 *   Header-Fix für Mobile
 * ================================ */

@media (max-width: 1550px) {

    .site-header.page-header {
        top: 0;
        background: #E3D6C5 !important;
        z-index: 300; /* Header ÜBER dem Overlay */
    }

    body.nav-open .site-header.page-header {
        background: rgba(242, 211, 206, 0.95) !important;
    }

    /* Header-Inhalt über Overlay */
    .site-header .header-inner {
        align-items: center;
        position: relative;
        z-index: 350;
    }

    /* Burger aktiv sichtbar */
    .burger-button {
        display: block;
        z-index: 400;
    }

    .page-nav,
    .header-right {
        display: none;
    }
    .site-header.page-header.header-hidden {
        transform: translateY(-110%);
    }
}

/* ================================
 * Body (Unterseiten)
 * ================================ */
html,
body {
    height: 100%;
}

body.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-height) + 2vw);
}

/* Inhalt unter Header nach unten schieben (Desktop) */
.page-content {
    flex: 1 0 auto;    /* wichtig für sticky Footer */
   /* margin-top: 1.5rem;
    margin-bottom: 1.5rem;*/
}

/* Innerer Inhaltsbereich – gleiche Breite wie Header/Footer */
.page-content > * {
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Mobil: Abstand unter dem Header reduzieren */
@media (max-width: 1550px) {
    body.page {
        padding-top: calc(var(--header-height) - 1.5rem);
    }
}


/* ================================
 * Footer (Unterseiten)
 * ================================ */

/* Hintergrund & Grundfarbe */
body.page footer.footer {
    background-color: #1F3C55;
    color: #E3D6C5;
    flex-shrink: 0;
}

/* Links exakt wie in der Home ausrichten – gleiche Breite wie Header */
body.page footer.footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    list-style: none;

    max-width: 90vw;
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

/* Footer-Links selbst */
body.page footer.footer .footer-links .nav-link {
    padding: 0;
    color: #E3D6C5 !important;
    font-weight: 300;
    text-decoration: none;
    font-size: clamp(0.9rem, 1.3vw, 1.1rem);
}

body.page footer.footer .footer-links .nav-link:hover {
    font-weight: 400;
    color: #E3D6C5 !important;
    text-decoration: none;
}

/* Mobil: untereinander */
@media (max-width: 768px) {

    body.page footer.footer .footer-links {
        flex-direction: column;
        gap: 0.4rem;
        padding: 1.5rem 1.5rem;
    }
}