/* nav.css – Stil der Navigation (wird von nav.php eingebunden).
 Bearbeitung per nav-admin.php möglich. Die beiden Variablenblöcke unten
 (Black Mode und Light Mode) bitte mit einer Variable pro Zeile und der
 Erklärung als Kommentar dahinter belassen, damit der Editor sie lesen kann. */
/* ==============================================================
 2. EINSTELLUNGEN – MASSE UND FARBEN
 Alle Werte hier ändern, der Rest des CSS bleibt unberührt.
 ============================================================== */
.mnav {
    /* ---------- MASSE ---------- */
    --mnav-extra-width: 20px;
    /* Navigation ist um diesen Wert breiter als die Menüeintr --mnav-item-padding-y: 14px; /* Innenabstand der Menüpunkte oben/unten */
    --mnav-item-padding-x: 18px;
    /* Innenabstand der Menüpunkte links/rechts */
    --mnav-font-size: 16px;
    /* Schriftgröße */
    --mnav-font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    /* Schriftart  --mnav-radius: 4px; /* Rundung der Ecken */
    --mnav-sub-min-width: 240px;
    /* Mindestbreite der Untermenüs */
    --mnav-margin: 0 auto;
    /* Position: "0 auto" = mittig, "0 auto 0 0" = links, "0 0 --mnav-position: sticky; /* "sticky" = Menü bleibt oben stehen, "relative" = scroll --mnav-sticky-top: 0px; /* Abstand zum oberen Fensterrand bei sticky */
    --mnav-z: 1000;
    /* Ebene (z-index) über dem Seiteninhalt */
    --mnav-burger-height: 52px;
    /* Höhe der Hamburger-Leiste (unter 1200px) */
    /* ---------- FARBEN – BLACK MODE (Standard) ---------- */
    --mnav-bg: #000000;
    /* Hintergrund der Navigationsleiste */
    --mnav-text: #fff;
    /* Schriftfarbe der Menüpunkte */
    --mnav-border: #b30000;
    /* Rahmen um Leiste und Untermenüs */
    --mnav-item-border: transparent;
    /* Rahmen der Menüpunkte im Normalzustand (unsichtbar) */
    --mnav-hover-border: #ff1f3d;
    /* Neonroter Rahmen beim Hover */
    --mnav-hover-glow: rgba(255, 31, 61, .55);
    /* Neon-Leuchten um den Rahmen beim Hover */
    --mnav-hover-bg: #2b0505;
    /* Leicht dunkelroter Hintergrund beim Hover */
    --mnav-hover-text: #ff3b4e;
    /* Schriftfarbe beim Hover */
    --mnav-underline: #ff1f3d;
    /* Farbe der Unterstreichung (Hover und aktiv) */
    --mnav-active-text: #ff3b4e;
    /* Schriftfarbe des aktiven Menüpunkts (aktuelle Seite) */
    --mnav-sub-bg: #0a0000;
    /* Hintergrund der Untermenüs */
    --mnav-sub-text: #fff;
    /* Schriftfarbe der Untermenüpunkte */
    --mnav-divider: #3a0707;
    /* Trennlinien im Hamburger-Menü */
    --mnav-shadow: rgba(0, 0, 0, .7);
    /* Schatten unter den Untermenüs */
    --mnav-scroll-thumb: #7a0000;
    /* Scrollbalken im Untermenü (Griff) */
    --mnav-scroll-track: #000000;
    /* Scrollbalken im Untermenü (Hintergrund) */
    --mnav-burger: #e01010;
    /* Farbe des Hamburger-Symbols und der Pfeile */
    --mnav-focus: #ff1f3d;
    /* Fokusrahmen bei Tastaturbedienung */
}

/* ---------- FARBEN – LIGHT MODE (heller Modus) ---------- */
.mnav[data-theme="light"] {
    --mnav-bg: #ffffff;
    /* Hintergrund der Navigationsleiste */
    --mnav-text: #000000;
    /* Schriftfarbe der Menüpunkte */
    --mnav-border: #b30000;
    /* Rahmen um Leiste und Untermenüs */
    --mnav-item-border: transparent;
    /* Rahmen der Menüpunkte im Normalzustand */
    --mnav-hover-border: #ff1f3d;
    /* Neonroter Rahmen beim Hover */
    --mnav-hover-glow: rgba(255, 31, 61, .35);
    /* Neon-Leuchten beim Hover */
    --mnav-hover-bg: #ffffff;
    /* Hintergrund beim Hover */
    --mnav-hover-text: #d10000;
    /* Schriftfarbe beim Hover */
    --mnav-underline: #e60000;
    /* Farbe der Unterstreichung */
    --mnav-active-text: #d10000;
    /* Schriftfarbe des aktiven Menüpunkts */
    --mnav-sub-bg: #000000;
    /* Hintergrund der Untermenüs */
    --mnav-sub-text: #000000;
    /* Schriftfarbe der Untermenüpunkte */
    --mnav-divider: #ffffff;
    /* Trennlinien im Hamburger-Menü */
    --mnav-shadow: rgba(0, 0, 0, .25);
    /* Schatten unter den Untermenüs */
    --mnav-scroll-thumb: #d98080;
    /* Scrollbalken (Griff) */
    --mnav-scroll-track: #ffffff;
    /* Scrollbalken (Hintergrund) */
    --mnav-burger: #b00000;
    /* Hamburger-Symbol und Pfeile */
    --mnav-focus: #e60000;
    /* Fokusrahmen bei Tastaturbedienung */
}

/* ==============================================================
 AB HIER MUSS NORMALERWEISE NICHTS GEÄNDERT WERDEN
 Hamburger-Breakpoint: 1200px
 (zweimal im CSS: min-width:1200px / max-width:1199.98px
 und einmal im JavaScript unten: MOBILE_QUERY)
 ============================================================== */
.mnav,
.mnav * {
    box-sizing: border-box;
}

.mnav {
    position: var(--mnav-position);
    top: var(--mnav-sticky-top);
    z-index: var(--mnav-z);
    width: fit-content;
    /* Breite = Menüeinträge ... */
    max-width: 100%;
    margin: var(--mnav-margin);
    padding: 0 calc(var(--mnav-extra-width) / 2);
    /* ... + Zusatzbreite */
    background: var(--mnav-bg);
    border: 1px solid var(--mnav-border);
    border-radius: var(--mnav-radius);
    font-family: var(--mnav-font-family);
    font-size: var(--mnav-font-size);
    line-height: 1.3;
}

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

.mnav-list {
    display: flex;
}

.mnav-item {
    position: relative;
}

/* ----- Links (Haupt- und Unterpunkte) ----- */
.mnav-link,
.mnav-sublink {
    position: relative;
    display: block;
    padding: var(--mnav-item-padding-y) var(--mnav-item-padding-x);
    color: var(--mnav-text);
    background: transparent;
    border: 1px solid var(--mnav-item-border);
    border-radius: var(--mnav-radius);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s;
}

.mnav-sublink {
    color: var(--mnav-sub-text);
    white-space: normal;
}

/* Unterstreichung: läuft von rechts nach links ein */
.mnav-link::after,
.mnav-sublink::after {
    content: "";
    position: absolute;
    left: var(--mnav-item-padding-x);
    right: var(--mnav-item-padding-x);
    bottom: calc(var(--mnav-item-padding-y) - 6px);
    height: 2px;
    background: var(--mnav-underline);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .3s ease;
}

/* Hover / Fokus / aktiv */
.mnav-link:hover,
.mnav-sublink:hover,
.mnav-link:focus-visible,
.mnav-sublink:focus-visible,
.mnav-item:hover>.mnav-link,
.mnav-item.open>.mnav-link {
    color: var(--mnav-hover-text);
    background: var(--mnav-hover-bg);
    border-color: var(--mnav-hover-border);
    box-shadow: 0 0 8px var(--mnav-hover-glow), inset 0 0 6px var(--mnav-hover-glow);
}

.mnav-link:hover::after,
.mnav-sublink:hover::after,
.mnav-link:focus-visible::after,
.mnav-sublink:focus-visible::after,
.mnav-item:hover>.mnav-link::after,
.mnav-item.open>.mnav-link::after,
.mnav-link.is-active::after,
.mnav-sublink.is-active::after {
    transform: scaleX(1);
}

.mnav-link.is-active,
.mnav-sublink.is-active {
    color: var(--mnav-active-text);
}

.mnav a:focus-visible,
.mnav button:focus-visible {
    outline: 2px solid var(--mnav-focus);
    out

    /* Pfeil an Hauptpunkten mit Untermenü (Desktop) */
    .mnav-caret {
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 9px;
        position: relative;
        top: border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
    }

    /* ----- Untermenü ----- */
    .mnav-sub {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: var(--mnav-sub-min-width);
        max-width: calc(100vw - 16px);
        /* nie breiter als das Fenster */
        max-height: calc(100vh - 120px);
        /* Grundwert; JS passt exakt an den freien Platz an */
        overflow-x: hidden;
        overflow-y: auto;
        /* zu viele Punkte: Scrollen statt Herausfallen */
        overscroll-behavior: contain;
        background: var(--mnav-sub-bg);
        border: 1px solid var(--mnav-border);
        border-radius: var(--mnav-radius);
        box-shadow: 0 10px 24px var(--mnav-shadow);
        padding: 4px;
        scrollbar-width: thin;
        scrollbar-color: var(--mnav-scroll-thumb) var(--mnav-scroll-track);
    }

    .mnav-sub::-webkit-scrollbar {
        width: 8px;
    }

    .mnav-sub::-webkit-scrollbar-track {
        background: var(--mnav-scroll-track);
    }

    .mnav-sub::-webkit-scrollbar-thumb {
        background: var(--mnav-scroll-thumb);

        border-radius: 4px.mnav-sub li+li {
            margin-top: 2px;
        }

        /* Modus-Schalter */
        .mnav-mode-btn {
            width: 100%;
        }

        .mnav-mode-btn .mnav-mode-text {
            display: none;
        }

        .mnav-burger,
        .mnav-toggle {
            display: none;
        }

        /* ==============================================================
 DESKTOP (ab 1200px)
 ============================================================== */
        @media (min-width: 1200px) {
            .mnav-sub {
                visibility: hidden;
                opacity: 0;
                pointer-events: none;
                transform: translateY(-4px);
                transition: opacity .2s, transform .2s, visibility 0s linear .2s;
            }

            .mnav-item:hover>.mnav-sub,
            .mnav-item:focus-within>.mnav-sub,
            .mnav-item.open>.mnav-sub {
                visibility: visible;
                opacity: 1;
                pointer-events: auto;
                transform: none;
                transition-delay: 0s;
            }
        }

        /* ==============================================================
 HAMBURGER (unter 1200px)
 ============================================================== */
        @media (max-width: 1199.98px) {
            .mnav {
                width: 100%;
                margin: 0;
                padding: 0;
                border-left: 0;
                border-right: 0;

                border-radius: .mnav-burger {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: var(--mnav-burger-height);
                    padding: 0 var(--mnav-item-padding-x);
                    background: transparent;
                    border: 0;
                    color: var(--mnav-burger);
                    font: inherit;
                    cursor: pointer;
                }

                .mnav-burger-icon i {
                    display: block;
                    width: 24px;
                    height: 2px;
                    margin: 5px 0;
                    background: var(--mnav-burger);
                    transition: transform .25s, opacity .2s;
                }

                .mnav.is-open .mnav-burger-icon i:nth-child(1) {
                    transform: translateY(7px) rotate(45deg);

                    .mnav.is-open .mnav-burger-icon i:nth-child(2) {
                        opacity: 0;
                    }

                    .mnav.is-open .mnav-burger-icon i:nth-child(3) {
                        transform: translateY(-7px) rotate(-45deg)

                        /* Menü füllt max. die Fensterhöhe und scrollt bei Bedarf */
                        .mnav-list {
                            display: none;
                            flex-direction: column;
                            max-height: calc(100vh - var(--mnav-burger-height) - var(--mnav-sticky-top));
                            overflow-y: auto;
                            overscroll-behavior: contain;
                            border-top: 1px solid var(--mnav-border);
                        }

                        @supports (height: 100dvh) {
                            .mnav-list {
                                max-height: calc(100dvh - var(--mnav-burger-height) - var(--mnav-sticky-top)
                                }

                                .mnav.is-open .mnav-list {
                                    display: flex;
                                }

                                .mnav-item {
                                    display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--mnav-divider); .mnav-item:last-child {
                                        border-bottom: 0;
                                    }

                                    .mnav-item > .mnav-link {
                                        flex: 1 1 0; min-width: 0; white-space: normal;
                                    }

                                    .mnav-caret {
                                        display: none;
                                    }

                                    .mnav-toggle {
                                        display: block; flex: 0 0 var(--mnav-burger-height);
                                        background: transparent; border: 1px solid transparent; color: var(--mnav-burger); cursor
                                    }

                                    .mnav-toggle::before {
                                        content: ""; display: inline-block; width: 8px; height: 8px; position: relative; top: -3p border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
                                        transform: rotate(45deg); transition: transform .25s;
                                    }

                                    .mnav-item.open > .mnav-toggle::before {
                                        transform: rotate(-135deg); top: 2px;
                                    }

                                    .mnav-sub {
                                        position: static; flex: 1 0 100%; display: none;
                                        max-width: none; max-height: none; overflow: visible;
                                        border: 0; border-radius: 0; box-shadow: none;
                                        padding: 0 0 6px var(--mnav-item-padding-x);
                                    }

                                    .mnav-item.open > .mnav-sub {
                                        display: block;
                                    }

                                    .mnav-mode-btn {
                                        text-align: left;
                                    }

                                    .mnav-mode-btn .mnav-mode-text {
                                        display: inline; margin-left: 8px;
                                    }
                                }

                                @media (prefers-reduced-motion: reduce) {
                                    .mnav *, .mnav *::after, .mnav *::before {
                                        transition: none !important;
                                    }
                                }