:root {
    --panel-gap: 10px; /* Abstand Button <-> Panel */
    --panel-maxh: 80vh; /* maximale Sicht-Höhe des Panels */
}

.main-nav {
}

    /* Links + klickbare Spans im nav-panel */
    .main-nav .nav-panel a,
    .main-nav .nav-panel span.submenu-link {
        display: inline-block; /* nur so breit wie Text */
        color: var(--primary);
        text-decoration: none;
        cursor: pointer;
        padding: .25rem .5rem;
        border-radius: 4px;
        transition: color 0.2s ease;
    }

        /* Hover-Effekt: Textfarbe wechseln */
        .main-nav .nav-panel a:hover,
        .main-nav .nav-panel span.submenu-link:hover {
            color: var(--accent);
            background-color: rgba(0,0,0,0.05);
        }

    .main-nav .sandwich {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid #0006;
        background: transparent;
        color: var(--text);
        cursor: pointer;
    }

        .main-nav .sandwich:focus-visible {
            outline: 2px solid #000000;
            outline-offset: 2px;
        }

    .main-nav .sandwich-ico .color {
        stroke: var(--header-text);
    }

/* Panel-Container: rechts ausgerichtet, Slide-Down via max-height/opacity */
/* ===== Smooth Overlay Panel (.panel-container) ===== */

.main-nav .panel-container {
    position: absolute;
    right: 0;
    top: calc(100% + var(--panel-gap));
    overflow: hidden;
    /* Start: geschlossen */
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: max-height .30s ease, opacity .25s ease, transform .25s ease, visibility 0s linear .25s; /* erst nach Fade-Out unsichtbar */
}

    .main-nav .panel-container.open {
        /* Offen: sichtbar & klickbar */
        max-height: var(--panel-maxh);
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
        transition: max-height .30s ease, opacity .25s ease, transform .25s ease, visibility 0s; /* sofort sichtbar */
    }

    /* Inhalt bleibt kompakt so breit wie nötig */
    .main-nav .panel-container .nav-panel {
        display: inline-block;
        background: var(--panel-2);
        border: 1px solid #0006;
        border-radius: 8px;
        box-shadow: 0 6px 16px rgba(0,0,0,.25);
        padding: .5rem 1rem;
    }

/* Motion-Reduce respektieren */
@media (prefers-reduced-motion: reduce) {
    .main-nav .panel-container {
        transition: none;
        transform: none;
    }
}

/* Menü zentriert untereinander */
.main-nav .droplist {
    display: flex;
    flex-direction: column;
    align-items: center; /* zentriert auf oberster Ebene */
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .5rem;
}
        .main-nav .droplist li {
            width: auto;
        }

        .main-nav .droplist a {
            text-align: center;
            display: block;
            padding: .25rem .5rem;
        }

    /* ===== Accordion + Submenu Animation ===== */

    /* Kopfzeile: Pfeil (Button) links, daneben der Link */
    .main-nav .submenu-header {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    /* Nur der Pfeil ist der Toggle */
    .main-nav .arrow-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: inline-flex;
        align-items: center;
    }

    /* Pfeil-Icon */
    .main-nav .arrow {
        stroke: var(--text); /* Standard-Farbe */
        filter: drop-shadow(0 1px 2px var(--shadow-color));
        transition: transform 0.3s ease, filter 0.3s ease, stroke 0.3s ease;
    }
    /* Wenn geöffnet: Pfeil dreht */
    .main-nav .has-submenu.open > .submenu-header .arrow {
        transform: rotate(180deg);
    }
    /* Hover-Effekt: Pfeil auch in --accent */
    .main-nav .submenu-link:hover ~ .arrow,
    .main-nav .arrow-toggle:hover .arrow {
        stroke: var(--accent);
        filter: drop-shadow(0 2px 4px var(--shadow-color));
    }

/* ===== Submenüs: Top-Level zentriert, Sub-Level links ===== */
:root { --submenu-maxh: 480px; } /* ggf. anpassen */

/* Basis: Submenü komplett aus dem Layout, solange zu */
.main-nav .submenu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0; /* kein Offset im geschlossenen Zustand */
    gap: .25rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease, margin .3s ease;
}

/* Geöffnet: sichtbar + klassisch eingerückt & linksbündig */
.main-nav .has-submenu.open > .submenu{
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* links ausrichten */
  text-align: left;
  max-height: var(--submenu-maxh);
  opacity: 1;

  /* Einrückung der Sub-Level: nur wenn das Submenü direkt unter einem LI hängt */
  margin: .5rem 0 0 1.5rem;  /* top-Abstand + Einzug nach rechts */
}

    /* Optional: Sub-Sublevel noch etwas weiter einrücken */
    .main-nav .has-submenu.open > .submenu > .has-submenu.open > .submenu {
        margin-left: 1.25rem; /* zusätzlicher Einzug für 2. Ebene */
    }

/* (optional) Fokus für A11y */
.main-nav .arrow-toggle:focus-visible,
.main-nav .submenu-link:focus-visible {
    outline: 2px solid var(--brand, #4ea1ff);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .main-nav .submenu {
        transition: none;
    }
}