/* =================================== */
/* Komponenten: Header & Navigation    */
/* =================================== */
:root {
    /* default header height used by subpages as margin-top fallback */
    --header-height: 56px;
    /* unify CTA/button height so both header CTA and mobile burger can match exactly */
    --header-cta-height: 44px;
}

.site_header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;

    /* State A default */
    background: rgba(0,0,0,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
    min-height: var(--header-height);
}

/* Default Farben für Hero-State */
.site_header,
.site_header a,
.site_header .hover-gray {
    color: #fff;
}

.site_header .header_logo_full,
.site_header .header_logo_short {
    color: #fff;
}

/* Nav Links / Buttons im Hero-State */
/* layout only — color is controlled by state-specific rules below */

/* Hero / Default State A */
.site_header .header_menu_pc a:not(.header_button):not(.btn_primary),
.site_header .header_menu_mobile a:not(.header_button):not(.btn_primary) {
    color: #fff;
    border-color: rgba(255,255,255,0.85);
    background: transparent;
}

.site_header .header_menu_pc a.hover-gray,
.site_header .header_menu_mobile a.hover-gray {
    border: 1px solid rgba(255,255,255,0.85);
    background: transparent;
}

.header_menu_container { /* Flexbox für Navigation und Button */
    display: flex;
    align-items: center;
    gap: 30px; /* Abstand zwischen der Navigationsleiste und dem Button */
    flex-direction: row-reverse; /* Button links, Navigation rechts */
}

.header_logo {
    font-size: clamp(24px, 2vw, 50px);
    font-weight: bold;
    color: white;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0; /* Logo nie quetschen */
}

.site_header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px; /* Abstand zwischen den Links */
    align-items: center;
}

.site_header nav ul li a:not(.header_button):not(.btn_primary) {
    text-decoration: none; /* Entfernt Unterstreichungen von Links */

    /* Farbe wird über State-Regeln gesteuert (Hero / Scrolled) */

    background-color: transparent;
    backdrop-filter: blur(10px);
    border: 1px solid #d4d8da;
    border-radius: 16px;

    display: inline-block;

    border-radius: 5px; /* Abgerundete Ecken */
    padding: 8px 20px;


}

.hover-gray:hover {
    animation: zoomen 0.5s ease-in-out;
    transform: scale(1.1);
    cursor: pointer;
}

@keyframes zoomen {
    /* 0% und 100% sind der Grundzustand */
    0%, 100% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1.1);
    }
}

.header_button {
    background-color: #ffffff; /* Weißer Hintergrund */
    color: #1a1a1a; /* Dunkle Schrift */
    border: 1px solid #e0e0e0; /* Dezenter Rahmen */
    padding: 10px 24px; /* Etwas mehr horizontaler Abstand */
    min-height: var(--header-cta-height);
    border-radius: 8px; /* Modernere, abgerundete Ecken */
    cursor: pointer; /* Mauszeiger wird zum Hand-Symbol */
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtiler Schatten */
}

.header_button:hover {
    background-color: #f5f5f5; /* Leicht grauer Hintergrund beim Hover */
    border-color: #d0d0d0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Stärkerer Schatten beim Hover */
}




/* Logo-Tausch: oben weißes Logo, gescrollt farbiges Logo */
.site_header .header_logo img.logo--color {
    display: none;
}
.site_header .header_logo img.logo--white {
    display: inline-block;
}
.site_header.site_header--scrolled .header_logo img.logo--color {
    display: inline-block;
}
.site_header.site_header--scrolled .header_logo img.logo--white {
    display: none;
}

/* === Switch at scrolled === */

.site_header.site_header--scrolled {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* Im scrolled-State ALLE Texte dunkel */
.site_header.site_header--scrolled,
.site_header.site_header--scrolled a,
.site_header.site_header--scrolled .hover-gray,
.site_header.site_header--scrolled .header_logo_full,
.site_header.site_header--scrolled .header_logo_short {
    color: #18262f;
}

.site_header.site_header--scrolled .header_menu_pc a,
.site_header.site_header--scrolled .header_menu_mobile a {
    color: #18262f;
}

/* Nav Buttons im scrolled-State sichtbarer */
.site_header.site_header--scrolled .header_menu_pc a.hover-gray,
.site_header.site_header--scrolled .header_menu_mobile a.hover-gray {
    border: 1px solid rgba(24,38,47,0.35);
    background: rgba(24,38,47,0.04);
}

/* Scrolled State B */
.site_header.site_header--scrolled
    .header_menu_pc a:not(.header_button):not(.btn_primary),
.site_header.site_header--scrolled
    .header_menu_mobile a:not(.header_button):not(.btn_primary) {
    color: #18262f;
    border-color: rgba(24,38,47,0.40);
    background: rgba(24,38,47,0.04);
    backdrop-filter: none; /* scrolled clean, weniger glasig */
}

.site_header.site_header--scrolled
    .header_menu_pc a:not(.header_button):not(.btn_primary):hover,
.site_header.site_header--scrolled
    .header_menu_mobile a:not(.header_button):not(.btn_primary):hover {
    background: rgba(0,150,215,0.10);
    border-color: rgba(0,150,215,0.70);
    color: #0f1c22;
}




/* =================================== */
/* Mobile Ansicht                      */
/* =================================== */

.header_menu_pc {
    display: flex;
}

/* HEADER DROP DOWN */
.header_menu_mobile {
    display: none; /* Icon und Select standardmäßig verstecken */
}

/* HEADER DROP DOWN MENU */
.header_hamburger_container{
    display: none;
}

/* Media Query für mobile Ansichten (z.B. unter 900px) */
@media (max-width: 900px) {
    .header_menu_pc {
        display: none;
    }

    /* HEADER DROP DOWN */
    .header_menu_mobile {
        display: flex;
        justify-content: flex-end; /* Hamburger-Icon rechts ausrichten */
        width: 100%;
    }

    /* Small vertical alignment tweak for the burger icon so its height
       aligns nicely with the CTA button. This preserves visual design
       while improving click area and vertical centering. */
    .header_menu_mobile .dropdown-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* vertical alignment and click area matching the CTA */
        padding: 6px 10px;
        font-size: 28px; /* keep existing visual size */
        min-height: var(--header-cta-height); /* match CTA button height */
        box-sizing: border-box;
        /* Match CTA border thickness and corner radius; color remains governed by state rules */
        border-width: 1px;
        border-style: solid;
        border-radius: 8px;
    }

    /* HEADER DROP DOWN MENU */
    .header_hamburger_container{
        position: absolute;
        top: 100%;
        right: 20px;
        z-index: 5000;

        /* design: floating panel for mobile menu - improves legibility */
        display: inline-block;
        color: white;
        text-align: right; /* right-align links as requested */
        /* make the panel narrower to improve composition */
        min-width: 150px;
        max-width: 220px;
        padding: 6px; /* breathing room inside the panel */
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(4,18,26,0.14);
        /* match header's hero background to visually connect the panel */
        background: rgba(0,0,0,0.18);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);

        /* Initialer Zustand (ausgeblendet) */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px); /* Von oben nach unten Animation */
        transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
    }

    /* Zustand Menü aktiv (JS steuerung) */
    .header_hamburger_container.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0); /* Endposition der Animation */
    }

    .header_hamburger_container li a{
        text-decoration: none !important; /* Entfernt Unterstreichungen von Links */
        border: 1px solid #d4d8da; /* keep unified thin border */
        border-radius: 6px; /* slightly rounded items for touch targets */
        background-color: transparent; /* let the panel carry the background */
        color: inherit !important; /* use panel color for contrast */
        margin: 6px 0; /* space between items */
        /* slightly smaller item padding so the panel is visually narrower */
        padding: 8px 12px;
        display: block;
        font-size: 14px;
        line-height: 1.3;
        text-align: right;
        font-weight: 600; /* slightly stronger for readability */
    }
    
    .header_hamburger_container li {
        list-style: none;
    }
}

/* Mobile/Hamburger: ensure colors follow header scrolled state */
.site_header.site_header--scrolled .header_hamburger_container {
    color: #18262f;
}

.site_header.site_header--scrolled .header_hamburger_container li a{
    background-color: rgba(24,38,47,0.04);
    color: #18262f !important;
    border: 1px solid rgba(24,38,47,0.35);
}

/* When header is scrolled, make the mobile panel light for contrast */
.site_header.site_header--scrolled .header_hamburger_container{
    background: rgba(255,255,255,0.98);
    color: #18262f;
    box-shadow: 0 8px 20px rgba(8,20,28,0.06);
}

/* Hover/active states for mobile menu items to improve discoverability */
.header_hamburger_container li a:hover,
.header_hamburger_container li a:focus {
    background: rgba(255,255,255,0.06);
}
.site_header.site_header--scrolled .header_hamburger_container li a:hover,
.site_header.site_header--scrolled .header_hamburger_container li a:focus {
    background: rgba(24,38,47,0.06);
}

/* === Logo text responsive behavior === */
.header_logo_full,
.header_logo_short {
    display: none; /* Logo-SVG ersetzt den Text vollständig */
}

/* === Explicit sizing to keep header height consistent across pages === */
/* on smaller screens the header may be taller; update variable accordingly */
@media (max-width: 480px) {
    :root {
        --header-height: 64px;
    }
}

.site_header .header_logo img,
.site_header .site-logo__img {
    height: clamp(28px, 8vw, 90px); /* skaliert mit Viewport, nie gequetscht */
    width: auto; /* Seitenverhältnis erhalten */
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.header_button {
    padding: 10px 20px; /* ensure same button sizing on all pages */
}

.site_header nav ul { /* ensure no default list spacing causes header growth */
    margin: 0;
    padding: 0;
}

/* Small screen adjustments (iPhone SE etc.) */
@media (max-width: 420px) {
    .site_header {
        padding: 8px 12px;
    }

    .header_menu_container {
        gap: 8px;
    }

    .site_header .header_logo img,
    .site_header .site-logo__img {
        height: clamp(24px, 7vw, 40px);
    }

    .site_header .header_button.btn_primary {
        padding: 7px 12px;
        font-size: 13px;
    }
}

/* Header CTA – Kontrast-Override */
.site_header .header_button.btn_primary {
    background: var(--brand-accent);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 8px 20px rgba(0,150,215,0.45);
    backdrop-filter: none; /* falls glass irgendwo reinvererbt */
}

.site_header .header_button.btn_primary:hover {
    background: var(--brand-accent-600); /* leicht dunkler */
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,150,215,0.6);
}