body.hagen-modern #hagen-navigation .hagen-menu {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    flex:1 1 680px;
    min-width:0;
    gap:12px;
}
body.hagen-modern #hagen-navigation .hagen-menu > li {
    position:relative;
    display:block;
    min-width:0;
}

/* Ein einziges Bedienelement je Hauptpunkt. */
body.hagen-modern #hagen-navigation .hg-menu-group {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    width:100%;
    min-height:48px;
    padding:11px 14px;
    border:0;
    border-radius:6px;
    font:650 1rem/1.3 system-ui,sans-serif;
    color:var(--hagen-header-text);
    background:var(--hagen-surface);
    cursor:pointer;
    box-shadow:none;
}
body.hagen-modern #hagen-navigation .hg-menu-group:hover,
body.hagen-modern #hagen-navigation .hg-menu-group[aria-expanded="true"],
body.hagen-modern #hagen-navigation .current-menu-ancestor > .hg-menu-group {
    background:var(--hagen-hover);
}
body.hagen-modern #hagen-navigation .hg-menu-group:focus-visible {
    outline:3px solid var(--hagen-header-text);
    outline-offset:2px;
    box-shadow:0 0 0 5px var(--hagen-surface);
}

/* Der Pfeil ist nur ein Bestandteil des Hauptpunkts. */
.hg-group-chevron {
    display:block;
    flex:0 0 7px;
    width:7px;
    height:7px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .18s ease;
}
.hg-menu-group[aria-expanded="true"] .hg-group-chevron {
    transform:translateY(2px) rotate(225deg);
}

/* Keine alten separaten Pfeil-Buttons mehr anzeigen. */
body.hagen-modern #hagen-navigation .hg-submenu-toggle {
    display:none!important;
}

body.hagen-modern #hagen-navigation .hagen-menu > li > ul {
    position:absolute;
    top:100%;
    left:0;
    right:auto;
    width:290px;
    max-width:calc(100vw - 32px);
    margin:0;
    padding:10px;
    z-index:1100;
    border-radius:0 0 10px 10px;
    background:var(--hagen-surface);
    border:1px solid color-mix(
        in srgb,var(--hagen-heading) 18%,var(--hagen-surface)
    );
    box-shadow:0 12px 24px color-mix(
        in srgb,var(--hagen-heading) 16%,transparent
    );
}
body.hagen-modern #hagen-navigation .hagen-menu > li:last-child > ul {
    left:auto;
    right:0;
}
body.hagen-modern #hagen-navigation .hagen-menu > li > ul a {
    display:block;
    padding:11px 12px;
    text-align:left;
    white-space:normal;
}
body.hagen-modern #hagen-navigation.hg-dropdown-ready .hagen-menu ul[hidden] {
    display:none!important;
}
body.hagen-modern #hagen-navigation.hg-dropdown-ready .hagen-menu ul:not([hidden]) {
    display:block;
}

@media(max-width:900px) {
    body.hagen-modern #hagen-navigation .hagen-menu {
        display:block;
    }
    body.hagen-modern #hagen-navigation .hagen-menu > li {
        display:block;
        margin-bottom:10px;
    }
    body.hagen-modern #hagen-navigation .hg-menu-group {
        justify-content:space-between;
        text-align:left;
    }
    body.hagen-modern #hagen-navigation .hagen-menu > li > ul,
    body.hagen-modern #hagen-navigation .hagen-menu > li:last-child > ul {
        position:static;
        width:100%;
        max-width:none;
        margin:0;
        padding:8px;
        box-shadow:none;
        border-radius:0 0 7px 7px;
    }
}
@media(prefers-reduced-motion:reduce) {
    .hg-group-chevron {
        transition:none;
    }
}