/* _header.css - Mit Primärfarbe (--color-primary / Lagenwein #3e5a63) als Hintergrund */

/*--------------------------------------------------------------
# Site Header Layout
--------------------------------------------------------------*/
.site-header {
    background-color: var(--color-color-background-header);
    color: var(--color-text-header);
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    position: relative;
    z-index: 999;
    box-shadow: var(--box-shadow);
}

.site-header>.container {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

/*--------------------------------------------------------------
# Site Branding (Logo, Site Title)
--------------------------------------------------------------*/
.site-branding {
    flex: 0 0 auto;
    z-index: 999;
}

#site-navigation {
    flex: 1;
}

/* Logo: Du brauchst ein Logo, das auf dem dunklen #3e5a63 gut aussieht.
   Dein ACF Feld 'logo' (Standard) oder 'logo_negative' sollte das helle/weiße SVG sein.
   Die PHP-Logik in header.php muss jetzt das passende Logo für dunkle Hintergründe wählen.
*/
.site-branding img.custom-logo,
.site-branding img.site-header-logo {
    display: block;
    height: 60px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.site-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.site-title a,
.site-title a:visited {
    color: var(--color-text-header);
    /* Heller Text für Titel */
    /* Optional: Akzentfarbe für den Titel, wenn gewünscht und Kontrast stimmt */
    /* color: var(--color-primary-accent); */
    text-decoration: none;
}

.site-title a:hover,
.site-title a:focus {
    color: var(--color-primary-accent);
    /* Gold für Hover */
}

.site-description {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    /* Standard muted Text, da Header dunkel ist, könnte dies #A0A0A0 sein - passt gut */
    font-weight: var(--font-weight-light);
}

.has-custom-logo .site-title,
.has-custom-logo .site-description {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}


/*--------------------------------------------------------------
# Main Navigation - Desktop First
--------------------------------------------------------------*/

.main-navigation {
    position: relative;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.main-navigation ul#primary-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -126px;
}

.main-navigation ul#primary-menu li.kontakt_btn {
    position: absolute;
    right: 0;
}

.main-navigation ul#primary-menu li.kontakt_btn a {
    padding: 1rem 3.2rem;
    font-size: 1.2rem;
    font-weight: 600;
    background: #008688;
    color: #fff;
    border: none;
    border-radius: 2.3em;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: none;
    color: var(--white, #fff);
}

.main-navigation ul#primary-menu li.kontakt_btn a:hover {
    transition: all 0.2s;
    filter: brightness(.9);
}

.main-navigation ul li {
    position: relative;
    margin-left: var(--spacing-xs);
}

.main-navigation ul li:first-child {
    margin-left: 0;
}

.main-navigation ul a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-header);
    /* Heller Text für Menüpunkte */
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    text-transform: none;
    letter-spacing: 0.03em;
    white-space: nowrap;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
    border-radius: var(--border-radius);
}

/* Hover und aktiver Zustand für Menüpunkte */
.main-navigation ul a:hover,
.main-navigation ul a:focus,
.main-navigation ul .current-menu-item>a,
.main-navigation ul .current_page_item>a,
.main-navigation ul .current-menu-ancestor>a {
    color: var(--color-text-body);
    background-color: var(--color-secondary);
}

.main-navigation ul a:focus-visible {
    outline: 2px solid var(--color-primary-accent);
    outline-offset: 2px;
}


/* Sub-Menus - Desktop */
.main-navigation ul ul.sub-menu {
    background-color: var(--color-primary);
    /* Gleicher Hintergrund wie Header #3e5a63 */
    /* Optional: Leichte Aufhellung oder Abdunklung für visuelle Trennung */
    /* background-color: color-mix(in srgb, var(--color-primary) 95%, white); */
    border: 1px solid color-mix(in srgb, var(--color-text-header) 20%, transparent);
    /* Sehr helle, dezente Border */
    border-top: 2px solid var(--color-primary-accent);
    /* Goldener Akzent oben */
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15);
    padding: var(--spacing-sm) 0;
    min-width: 220px;
    z-index: 9999;

    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s 0.2s;
}

.main-navigation ul ul.sub-menu ul.sub-menu {
    left: 100%;
    top: calc(0px - var(--spacing-sm) - 1px);
}

.main-navigation ul li:hover>ul.sub-menu,
.main-navigation ul li:focus-within>ul.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

.main-navigation ul ul.sub-menu li {
    margin-left: 0;
}

.main-navigation ul ul.sub-menu a {
    padding: var(--spacing-xs) var(--spacing-md);
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--font-weight-normal);
    white-space: normal;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-header) 10%, transparent);
    /* Sehr helle, sehr dezente Border */
    color: var(--color-text-header);
    /* Heller Text für Submenü-Punkte */
}

.main-navigation ul ul.sub-menu li:last-child a {
    border-bottom: none;
}

/* Hover/Aktiv für Submenü-Links */
.main-navigation ul ul.sub-menu a:hover,
.main-navigation ul ul.sub-menu a:focus,
.main-navigation ul ul.sub-menu .current-menu-item>a,
.main-navigation ul ul.sub-menu .current_page_item>a,
.main-navigation ul ul.sub-menu .current-menu-ancestor>a {
    color: var(--color-primary-accent);
    /* Goldener Text als Akzent */
    background-color: color-mix(in srgb, var(--color-primary) 70%, black);
    /* Hintergrund noch etwas dunkler */
}


/* Pfeile für Parent-Items */
.main-navigation .menu-item-has-children>a {
    position: relative;
    padding-right: calc(var(--spacing-md) + 15px);
}

.main-navigation .menu-item-has-children>a::after {
    content: "▼";
    font-size: 0.7em;
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-header);
    /* Heller Pfeil */
    opacity: 0.7;
    transition: transform 0.2s ease-out;
}

.main-navigation ul ul.sub-menu .menu-item-has-children>a::after {
    content: "►";
    right: var(--spacing-sm);
}


/*--------------------------------------------------------------
# Mobile Menu Toggle Button
--------------------------------------------------------------*/
.menu-toggle {
    all: unset;
    display: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-header);
    /* Heller Icon-Farbe */
    padding: var(--spacing-sm);
    margin: 0;
    cursor: pointer;
    line-height: 1;
    z-index: 1001;
}

.menu-toggle:hover,
.menu-toggle:focus {
    color: var(--color-primary-accent);
    /* Gold für Hover */
    border-color: var(--color-primary-accent);
}

.menu-toggle .hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
}

.menu-toggle .hamburger-icon .line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    border-radius: 1px;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-icon .line:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
:root {
    --mobile-drawer-width: 380px;
    --mobile-backdrop: rgba(0, 0, 0, .35);
    --mobile-link: #1f2937;
    --mobile-divider: rgba(0, 0, 0, .08);
}

@media (max-width:1023px) {
    .menu-toggle {
        display: block;
        margin-left: auto;
        z-index: 1101
    }

    .menu-toggle:focus {
        outline: none;
        box-shadow: none
    }

    .menu-toggle:focus-visible {
        outline: 2px solid rgba(31, 41, 55, .45);
        outline-offset: 3px
    }

    .menu-toggle:hover,
    .menu-toggle:focus {
        border-color: transparent;
        color: inherit
    }

    #site-navigation {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        z-index: 1100
    }

    .main-navigation {
        position: static
    }

    .main-navigation::before {
        content: "";
        position: fixed;
        inset: 0;
        background: var(--mobile-backdrop);
        opacity: 0;
        pointer-events: none;
        transition: opacity .22s ease;
        z-index: 1100
    }

    .main-navigation.toggled-on::before {
        opacity: 1;
        pointer-events: auto
    }

    .main-navigation>ul#primary-menu {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        height: 100vh;
        width: min(92vw, var(--mobile-drawer-width));
        background: #fff;
        border-left: 1px solid rgba(0, 0, 0, .06);
        box-shadow: -24px 0 40px rgba(0, 0, 0, .12);
        transform: translateX(100%);
        transition: transform .26s ease;
        padding: 12px 0 18px;
        overflow-y: auto;
        z-index: 1102;
        border-radius: 0
    }

    .main-navigation.toggled-on>ul#primary-menu,
    .main-navigation ul#primary-menu.is-open {
        transform: translateX(0)
    }

    .main-navigation ul#primary-menu li.kontakt_btn {
        position: static
    }

    .main-navigation ul li {
        margin: 0;
        width: 100%
    }

    .main-navigation ul>li>a {
        display: flex;
        align-items: center;
        gap: .6rem;
        padding: 16px 20px;
        color: var(--mobile-link);
        border-bottom: 1px solid var(--mobile-divider);
        background: transparent;
        font-weight: var(--font-weight-semibold)
    }

    .main-navigation ul>li:last-child>a {
        border-bottom: 0
    }

    .main-navigation ul a:hover,
    .main-navigation ul a:focus,
    .main-navigation ul .current-menu-item>a,
    .main-navigation ul .current_page_item>a,
    .main-navigation ul .current-menu-ancestor>a {
        background: rgba(0, 0, 0, .03);
        color: var(--color-primary)
    }

    .main-navigation ul ul.sub-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        transform: none;
        background: #fff;
        border: 0;
        box-shadow: none;
        padding: 0;
        min-width: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height .26s ease
    }

    .main-navigation ul li.submenu-toggled-on>ul.sub-menu {
        max-height: 800px
    }

    .main-navigation ul ul.sub-menu li a {
        padding: 12px 20px 12px 34px;
        font-size: .98rem;
        font-weight: var(--font-weight-normal);
        color: var(--mobile-link);
        border-bottom: 1px solid var(--mobile-divider);
        background: transparent
    }

    .main-navigation ul ul.sub-menu li:last-child a {
        border-bottom: 0
    }

    .main-navigation .menu-item-has-children>a {
        padding-right: 20px
    }

    .main-navigation .menu-item-has-children>a::after {
        content: "▾";
        font-size: .9rem;
        margin-left: auto;
        opacity: .6;
        position: static
    }

    .main-navigation .menu-item-has-children.submenu-toggled-on>a::after {
        transform: rotate(180deg)
    }

    .submenu-toggle-button {
        background: transparent;
        border: 0;
        color: var(--mobile-link);
        padding: 12px 14px;
        margin-left: auto;
        line-height: 1;
        display: inline-flex;
        align-items: center
    }

    .submenu-toggle-button .submenu-arrow {
        transition: transform .2s ease
    }

    .menu-item-has-children.submenu-toggled-on>.submenu-toggle-button .submenu-arrow {
        transform: rotate(-180deg)
    }

    .main-navigation ul#primary-menu li.kontakt_btn a {
        display: block;
        margin: 16px 16px 8px;
        text-align: center;
    }

    .main-navigation ul#primary-menu li.kontakt_btn a:hover {
        filter: brightness(.95)
    }
}

.submenu-toggle-button {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--spacing-sm);
    margin-left: auto;
    line-height: 1;
    display: inline-flex;
    align-items: center
}

.submenu-toggle-button:hover,
.submenu-toggle-button:focus {
    color: var(--color-primary-accent)
}

.submenu-arrow {
    display: inline-block;
    transition: transform .2s ease-out;
    margin-left: .3em
}

.menu-item-has-children.submenu-toggled-on>.submenu-toggle-button .submenu-arrow {
    transform: rotate(-180deg)
}

@media (max-width:991px) {
    .main-navigation .menu-item-has-children>a {
        flex-grow: 1;
        justify-content: flex-start
    }

    .main-navigation .menu-item-has-children>a::after {
        display: none
    }

    .main-navigation .menu-item-has-children {
        display: flex;
        flex-wrap: nowrap;
        align-items: center
    }
}

@media (max-width:1023px) {
    .menu-toggle {
        position: relative;
        z-index: 1202
    }

    .main-navigation::before {
        z-index: 1200
    }

    .main-navigation>ul#primary-menu {
        z-index: 1201
    }

    .main-navigation>ul#primary-menu {
        padding-top: 6rem
    }

    .main-navigation>ul#primary-menu>li:first-child {
        margin-top: 6px
    }

    .main-navigation>ul#primary-menu>li:first-child>a {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
}