/* Megamenü – Frontend: Desktop-Panels + Mobile Drill-Down */

.mm-nav { position: relative; }
.mm-nav *, .mm-nav *::before, .mm-nav *::after { box-sizing: border-box; }

.mm-nav .screen-reader-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mm-root { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.mm-root li { list-style: none; margin: 0; }

.mm-ico { width: 20px; height: 20px; flex: 0 0 auto; }
img.mm-ico { object-fit: contain; }

/* Button-Reset */
.mm-toggle, .mm-burger, .mm-back, .mm-drill-btn {
    background: none; border: 0; margin: 0; padding: 0; color: inherit; cursor: pointer; font: inherit;
}

/* ── Top-Leiste (Desktop) ── */
.mm-item { display: inline-flex; align-items: center; }
.mm-top-link {
    display: inline-flex; align-items: center; gap: .35em;
    padding: .5em .5em; color: inherit; text-decoration: none; font-weight: 600; font-size: .9em;
}
.mm-top-link .mm-ico { width: 17px; height: 17px; }
.mm-top-link:hover { color: var(--mm-accent, inherit); }

.mm-toggle { display: inline-flex; align-items: center; padding: .4em .25em; }
.mm-toggle svg { width: 14px; height: 14px; transition: transform .18s ease; }
.mm-item.is-open > .mm-toggle svg { transform: rotate(180deg); }

.mm-root .current-menu-item > a,
.mm-root .current-menu-ancestor > a,
.mm-root .current_page_item > a { color: var(--mm-accent, inherit); }

.mm-nav a:focus-visible, .mm-toggle:focus-visible, .mm-burger:focus-visible,
.mm-back:focus-visible, .mm-drill-btn:focus-visible {
    outline: 2px solid var(--mm-accent, #005fcc); outline-offset: 2px; border-radius: 3px;
}

/* ── Panel (Desktop) ── */
.mm-panel {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 9990;
    background: var(--mm-panel-bg, #fff); color: var(--mm-panel-color, #222);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14); border-radius: 0 0 10px 10px;
    padding: 1.25rem 1.5rem;
    max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain;
}
.mm-item.is-open > .mm-panel { display: block; }

/* No-JS-Fallback: ohne Initialisierung öffnen Hover/Fokus das Panel */
.mm-nav:not(.mm-js) .mm-item:hover > .mm-panel,
.mm-nav:not(.mm-js) .mm-item:focus-within > .mm-panel { display: block; }

/* Spalten-Grid nur in der Desktop-Ansicht (mobil übernimmt das Drill-Down).
   Feines Linienraster: 1px-Gap, Linienfarbe = Grid-Hintergrund, Zellen opak. */
.mm-panel-grid { margin: 0; padding: 0; }
.mm-nav.mm--desktop .mm-panel-grid,
.mm-nav:not(.mm-js) .mm-panel-grid {
    display: grid;
    grid-template-columns: repeat(var(--mm-cols, auto-fit), minmax(190px, 1fr));
}
/* Rasterlinien als Zellen-Ränder; letzte Spalte/Zeile entfernt das JS (.mm-last-col/.mm-last-row) */
.mm-panel-grid > li {
    background: var(--mm-panel-bg, #fff);
    border-right: 1px solid var(--mm-line, #e7e7e2);
    border-bottom: 1px solid var(--mm-line, #e7e7e2);
}
.mm-panel-grid > li.mm-last-row { border-bottom: 0; }
.mm-panel-grid > li.mm-last-col { border-right: 0; }

/* Gruppen (Desktop-Panel) */
.mm-group-title {
    display: flex; align-items: center; gap: .45em;
    font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    opacity: .65; margin: 0 0 .5em;
}
.mm-group-list, .mm-sub-list { margin: 0; padding: 0; }
.mm-sub-list { margin: .25em 0 0 .6em; }

/* Panel-Links (Desktop): Link füllt die Rasterzelle, Hover tönt die ganze Zelle;
   darunter ggf. die Spoke-Liste (3. Ebene) */
.mm-cell { display: flex; flex-direction: column; }
.mm-cell > .mm-group-list { padding: 0 1.1em .9em; }
.mm-cell-link {
    flex: 0 0 auto; display: flex; align-items: flex-start; gap: .6em;
    padding: 1em 1.1em; color: inherit; text-decoration: none;
    font-size: .9em; font-weight: 500;
}
.mm-cell-link:hover { background: rgba(0, 0, 0, .035); color: var(--mm-accent, inherit); }

/* Gruppen-Zellen: Überschrift + kompakte Linkliste */
.mm-group { padding: .9em 1.1em; }
.mm-sub > a {
    display: flex; align-items: flex-start; gap: .5em;
    padding: .25em .3em; border-radius: 6px; color: inherit; text-decoration: none;
    font-size: .78em; line-height: 1.4; opacity: .75;
}
.mm-sub > a:hover { background: rgba(0, 0, 0, .05); color: var(--mm-accent, inherit); opacity: 1; }

.mm-cell-text { display: flex; flex-direction: column; gap: .15em; }
.mm-desc { font-size: .8em; opacity: .65; line-height: 1.35; }

/* ── Burger ── */
.mm-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; }
.mm-burger-box { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.mm-burger-box span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.mm-nav.mm-open .mm-burger-box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mm-nav.mm-open .mm-burger-box span:nth-child(2) { opacity: 0; }
.mm-nav.mm-open .mm-burger-box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobil: Drill-Down (Klassen setzt JS anhand des Breakpoints) ── */
.mm-drill { display: none; flex-direction: column; }
.mm-nav.mm--mobile .mm-burger { display: inline-flex; }
.mm-nav.mm--mobile .mm-root { display: none; }

.mm-drill-viewport { position: relative; flex: 1 1 auto; overflow: hidden; }

.mm-screen {
    position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--mm-panel-bg, #fff); color: var(--mm-panel-color, #222);
    padding: 0 1.1rem 1.5rem;
    transform: translateX(100%); transition: transform .25s ease;
}
.mm-screen.is-active { transform: none; }
.mm-screen.is-under { transform: translateX(-35%); }

.mm-screen ul { list-style: none; margin: 0; padding: 0; }

.mm-screen-head {
    display: flex; align-items: center; gap: .6em;
    padding: .35em 0; border-bottom: 1px solid rgba(0, 0, 0, .12); margin-bottom: .25em;
}
.mm-back { display: inline-flex; align-items: center; gap: .25em; padding: .6em .3em; font-weight: 600; }
.mm-back svg { width: 16px; height: 16px; transform: rotate(90deg); }
.mm-screen-title { font-weight: 700; }

.mm-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.mm-drill .mm-row a {
    flex: 1 1 auto; display: flex; align-items: center; gap: .5em;
    padding: .85em .25em; margin: 0; border-radius: 0; background: none;
    color: inherit; text-decoration: none; font-weight: 500;
}
.mm-drill .mm-row a:hover { background: rgba(0, 0, 0, .04); color: var(--mm-accent, inherit); }
.mm-drill .mm-cell-text { display: flex; flex-direction: column; gap: .1em; }

.mm-drill-btn { display: inline-flex; align-items: center; padding: 0 .95em; border-left: 1px solid rgba(0, 0, 0, .08); }
.mm-drill-btn svg { width: 16px; height: 16px; transform: rotate(-90deg); }

.mm-drill .mm-group-heading {
    display: flex; align-items: center; gap: .45em;
    font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    opacity: .65; margin: 1.1em 0 .2em;
}

/* Off-Canvas-Drawer */
.mm-nav.mm-mode-offcanvas.mm--mobile .mm-drill {
    display: flex; position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
    background: var(--mm-panel-bg, #fff); color: var(--mm-panel-color, #222);
    z-index: 100000; padding-top: 3.4rem;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -12px 0 30px rgba(0, 0, 0, .18);
}
.mm-nav.mm-mode-offcanvas.mm--mobile.mm-open .mm-drill { transform: none; }
.mm-nav.mm-mode-offcanvas.mm--mobile.mm-open .mm-burger { position: relative; z-index: 100001; }

/* In Neves Mobile-Sidebar eingebettet: Neve liefert Hamburger + Off-Canvas, innen Drill-Down */
.mm-nav.mm-embedded .mm-root { display: none; }
.mm-nav.mm-embedded .mm-burger { display: none; }
.mm-nav.mm-embedded .mm-drill { display: flex; position: relative; width: 100%; font-size: 1.08em; }
.mm-nav.mm-embedded .mm-drill-viewport { transition: height .2s ease; }
.mm-nav.mm-embedded .mm-screen { padding: 0 .3rem 1rem; }

/* Neves Sidebar verbreitern, solange das Megamenü darin läuft (Klasse setzt das JS) */
.header-menu-sidebar.mm-host { width: min(88vw, 420px) !important; }

/* Accordion-Modus: klappt inline unter dem Burger auf, Höhe setzt das JS */
.mm-nav.mm-mode-accordion.mm--mobile.mm-open .mm-drill { display: flex; position: relative; width: 100%; }
.mm-nav.mm-mode-accordion.mm--mobile .mm-drill-viewport { transition: height .2s ease; }

/* Overlay + Scroll-Lock */
.mm-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 99999;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.mm-overlay.is-visible { opacity: 1; pointer-events: auto; }

html.mm-scroll-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .mm-nav *, .mm-screen, .mm-overlay { transition: none !important; }
}