/* Helle Logoleiste und kräftiges Regenbogen-Menü. */
body.hagen-modern header.hagen-header {
    --hg-menu-rainbow:linear-gradient(
        110deg,
        var(--hagen-rainbow-red) 0% 14.285%,
        var(--hagen-rainbow-orange) 14.285% 28.57%,
        var(--hagen-rainbow-yellow) 28.57% 42.855%,
        var(--hagen-rainbow-green) 42.855% 57.14%,
        var(--hagen-rainbow-blue) 57.14% 71.425%,
        var(--hagen-rainbow-purple) 71.425% 85.71%,
        var(--hagen-rainbow-navy) 85.71% 100%
    );
    background:var(--hagen-header);
    border:0;
}
body.hagen-modern header.hagen-header::before,
body.hagen-modern header.hagen-header::after {
    display:none;
}
body.hagen-modern header.hagen-header .hagen-top {
    gap:22px;
}
body.hagen-modern header.hagen-header .hagen-brand {
    margin-right:auto;
    min-width:0;
    color:var(--hagen-header-text);
}
body.hagen-modern header.hagen-header .hagen-brand small {
    color:var(--hagen-header-text);
}

/* Zweites, unabhängig auswählbares Bild rechts. */
body.hagen-modern header.hagen-header .hagen-header-badge {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin-left:auto;
}
body.hagen-modern header.hagen-header .hagen-header-badge-image {
    display:block;
    height:80px;
    width:auto;
    max-width:96px;
    object-fit:contain;
    transition:height .24s ease;
}
body.hagen-modern header.hagen-header.hg-header-compact .hagen-header-badge-image {
    height:46px;
}

/* Das Menüband läuft über die gesamte Breite. */
body.hagen-modern header.hagen-header #hagen-navigation {
    width:100%;
    max-width:none;
    margin:0;
    padding:18px max(24px,calc((100% - 1132px)/2));
    background:var(--hg-menu-rainbow);
    gap:14px;
}
body.hagen-modern header.hagen-header.hg-header-compact #hagen-navigation {
    padding-top:9px;
    padding-bottom:9px;
}
body.hagen-modern header.hagen-header #hagen-navigation .hagen-menu {
    gap:8px;
}
body.hagen-modern header.hagen-header #hagen-navigation .hagen-menu a {
    color:var(--hagen-header-text);
    background:var(--hagen-surface);
    border-radius:7px;
    padding:10px 13px;
    box-shadow:0 2px 0 color-mix(
        in srgb,var(--hagen-heading) 15%,transparent
    );
}
body.hagen-modern header.hagen-header #hagen-navigation .hagen-menu a:hover,
body.hagen-modern header.hagen-header #hagen-navigation .hagen-menu a:focus-visible,
body.hagen-modern header.hagen-header #hagen-navigation .current-menu-item > a,
body.hagen-modern header.hagen-header #hagen-navigation .current-menu-ancestor > a,
body.hagen-modern header.hagen-header #hagen-navigation .current_page_item > a {
    color:var(--hagen-header-text);
    background:var(--hagen-hover);
}
body.hagen-modern header.hagen-header #hagen-navigation .hagen-menu ul {
    background:var(--hagen-surface);
    border:1px solid color-mix(
        in srgb,var(--hagen-heading) 18%,var(--hagen-surface)
    );
}
body.hagen-modern header.hagen-header #hagen-navigation .hagen-menu ul a {
    box-shadow:none;
}
body.hagen-modern header.hagen-header #hagen-navigation .hagen-search {
    gap:6px;
}
body.hagen-modern header.hagen-header #hagen-navigation .hagen-search input,
body.hagen-modern header.hagen-header #hagen-navigation .hagen-search button {
    background:var(--hagen-surface);
    color:var(--hagen-header-text);
    border-color:var(--hagen-surface);
}
body.hagen-modern header.hagen-header #hagen-navigation .hagen-search input::placeholder {
    color:var(--hagen-header-text);
    opacity:.75;
}
body.hagen-modern header.hagen-header .hagen-toggle {
    color:var(--hagen-header-text);
    background:var(--hagen-header);
    border-color:var(--hagen-header-text);
}
body.hagen-modern header.hagen-header #hagen-navigation a:focus-visible,
body.hagen-modern header.hagen-header #hagen-navigation button:focus-visible,
body.hagen-modern header.hagen-header #hagen-navigation input:focus-visible {
    outline:3px solid var(--hagen-header-text);
    outline-offset:2px;
    box-shadow:0 0 0 6px var(--hagen-surface);
}

@media(max-width:900px) {
    body.hagen-modern header.hagen-header .hagen-top {
        flex-wrap:nowrap;
        gap:12px;
    }
    body.hagen-modern header.hagen-header .hagen-brand {
        flex:1 1 auto;
        gap:10px;
    }
    body.hagen-modern header.hagen-header .hagen-brand img {
        height:44px;
        max-width:80px;
    }
    body.hagen-modern header.hagen-header .hagen-header-badge {
        margin-left:0;
    }
    body.hagen-modern header.hagen-header .hagen-header-badge-image {
        height:42px;
        max-width:46px;
    }
    body.hagen-modern header.hagen-header.hg-header-compact .hagen-header-badge-image {
        height:34px;
    }
    body.hagen-modern header.hagen-header #hagen-navigation {
        padding:16px;
    }
    body.hagen-modern header.hagen-header #hagen-navigation .hagen-menu > li {
        margin-bottom:8px;
    }
    body.hagen-modern header.hagen-header #hagen-navigation .hagen-menu ul {
        margin-top:8px;
        margin-bottom:8px;
    }
    body.hagen-modern header.hagen-header::after {
        content:"";
        display:block;
        height:12px;
        background:var(--hg-menu-rainbow);
    }
    body.hagen-modern header.hagen-header:has(#hagen-navigation:not([hidden]))::after {
        display:none;
    }
}
@media(max-width:520px) {
    body.hagen-modern header.hagen-header .hagen-brand small {
        display:none;
    }
}
@media(max-width:360px) {
    body.hagen-modern header.hagen-header .hagen-top {
        gap:7px;
        padding-left:12px;
        padding-right:12px;
    }
    body.hagen-modern header.hagen-header .hagen-brand img {
        height:34px;
        max-width:52px;
    }
    body.hagen-modern header.hagen-header .hagen-header-badge-image {
        height:32px;
        max-width:34px;
    }
    body.hagen-modern header.hagen-header .hagen-brand strong {
        font-size:1rem;
    }
}
@media(prefers-reduced-motion:reduce) {
    body.hagen-modern header.hagen-header .hagen-header-badge-image {
        transition:none;
    }
}