/* ==========================================================================
   nav.css
   Hauptnavigation (mod_navigation): Desktop horizontal + Mobile Burger-Menü
   Level-2-Dropdown per eigenem Pfeil-Button (statt Doppel-Tap auf den Link)
   Version: 2.8
   Geändert: 2026-07-02

   Changelog:
   - 2.8: Eigentlicher Fix für den Screenshot mit "Website-Erstellung":
          ul.level_2-Regeln (display, Farbe, Padding) auf "strong" aus-
          geweitet, nicht nur "a". Contao rendert die aktive Seite auch
          auf Ebene 2 als <strong> statt <a> — die bekam bisher GAR
          keine Formatierung, nur nackten Browser-Standard-Bold ohne
          Padding. Aktive Markierung (Farbe/Hintergrund) ergänzt.
          Hinweis: Die 2.7-Diagnose (dritte Menüebene) war falsch, es
          gibt an der Stelle nur 2 Ebenen — der Reset schadet trotzdem
          nicht und bleibt als Absicherung für tatsächliche Level-3-Fälle.
   - 2.7: Reset für verschachtelte Listen ab Ebene 3 (ul.level_2 ul)
          ergänzt. Seiten mit 3 Menütiefen (z. B. Website >
          Website-Erstellung > Web- und App-Projekte) zeigten für die
          dritte Ebene unstyled Browser-Standard (Bullets, Einrückung).
   - 2.6: #myNavbar auf Mobile positioniert (right:0, bottom:5px) — auf
          Wunsch, site-spezifische Ergänzung für den Header-Wrapper.
   - 2.5: Balken (span) von width:100% auf feste 24px reduziert und per
          align-items:center zentriert. Button-Box war schon 44x44
          (korrekt quadratisch), aber die vollbreiten Balken ließen das
          Icon selbst breit/flach statt quadratisch wirken.
   - 2.4: .nav-burger gegen generische Theme-Button-Styles abgesichert
          (box-sizing, hart überschriebenes Padding, flex-shrink), da
          er sonst breiter als hoch gerendert wurde. CSS-Variable
          --nav-burger-offset für einstellbare Vertikalposition ergänzt.
   - 2.3: Mobiles Menü auf position:fixed umgestellt (statt absolute),
          da das <nav>-Element im Header oft schmaler ist als der ganze
          Header — das Menü wurde dadurch schmal und rechtsbündig statt
          volle Breite. Top-Offset kommt jetzt per JS-Variable.
   - 2.2: Selektoren für li.submenu > a auch auf > strong ausgeweitet.
          Contao rendert die aktive Seite als <strong> statt <a> — ohne
          diese Ergänzung fehlte der Pfeil-Button auf der aktiven Seite.
   - 2.1: overflow:visible gezielt für .mod_navigation.block ergänzt
          (sitesweite .block-Klasse aus Grid-Framework hat das Dropdown
          abgeschnitten). Hover-Öffnen-Regel entfernt — kollidierte mit
          dem Klick-Toggle und verhinderte das Schließen.
   - 2.0: Doppel-Tap-Logik für Level-2 entfernt, ersetzt durch separaten
          .submenu-toggle-Button. Breakpoint auf 768px (md) angepasst.
   - 1.0: Erste Version (Desktop-Dropdown per Hover)

   Eigene Breakpoints (Referenz):
   xs:   0    - 549px
   sm:   550  - 767px
   md:   768  - 991px
   lg:   992  - 1199px
   xl:   >1200px
   -> Umschaltpunkt Mobile-Menü / Desktop-Menü liegt bei 768px (Start von md)
   ========================================================================== */

.mod_navigation {
    position: relative;
}

/* Überschreibt gezielt nur für die Navigation die sitesweite .block-Klasse
   (Grid-Framework), die overflow:hidden setzt und dadurch das absolut
   positionierte Level-2-Dropdown abschneidet. Bewusst NICHT die globale
   .block-Klasse ändern, das könnte andere Layoutbereiche beeinflussen. */
.mod_navigation.block {
    overflow: visible;
}

/* "Navigation überspringen"-Link nur für Screenreader sichtbar */
.mod_navigation .invisible {
    position: absolute;
    left: -9999px;
}

/* ==========================================================================
   Level 1 (Basis, gilt für Mobile UND Desktop)
   ========================================================================== */
.mod_navigation ul.level_1 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mod_navigation ul.level_1 > li {
    position: relative; /* Bezugspunkt für Level-2-Dropdown */
}

.mod_navigation ul.level_1 > li > a,
.mod_navigation ul.level_1 > li > strong {
    display: block;
    text-decoration: none;
    color: #1a1a1a;
    font-weight: 500;
    transition: color 0.2s ease;
}

.mod_navigation ul.level_1 > li > a:hover,
.mod_navigation ul.level_1 > li > a:focus {
    color: #B25502; /* WCAG-konformer Orange-Ton statt #EE7203 */
}

.mod_navigation ul.level_1 > li.active > strong,
.mod_navigation ul.level_1 > li.active > a {
    color: #B25502;
    font-weight: 700;
}

/* li.submenu: Link + Pfeil-Button nebeneinander, sowohl mobil als auch
   Desktop (dort steht die li ohnehin schon inline im Flex-Container) */
.mod_navigation li.submenu {
    display: flex;
    align-items: center;
}

.mod_navigation li.submenu > a,
.mod_navigation li.submenu > strong {
    flex: 1 1 auto;
}

/* ---------- Pfeil-Button (wird per JS eingefügt) ---------- */
.submenu-toggle {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;   /* Mindestgröße für Touch-Targets */
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #1a1a1a;
}

.submenu-toggle svg {
    width: 10px;
    height: 10px;
    transition: transform 0.2s ease;
}

/* Pfeil dreht sich, wenn Untermenü offen ist */
.mod_navigation li.submenu.submenu-open > .submenu-toggle svg {
    transform: rotate(180deg);
}

/* ==========================================================================
   Level 2 (Basis-Stile, Positionierung folgt in den Breakpoints unten)
   ========================================================================== */
.mod_navigation ul.level_2 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mod_navigation ul.level_2 li a,
.mod_navigation ul.level_2 li strong {
    display: block;
    text-decoration: none;
    color: #1a1a1a;
}

.mod_navigation ul.level_2 li a:hover,
.mod_navigation ul.level_2 li a:focus {
    color: #B25502;
}

/* Aktive Seite innerhalb des Dropdowns optisch hervorheben (nicht nur
   der nackte Browser-Bold von <strong>) */
.mod_navigation ul.level_2 li.active > strong {
    color: #B25502;
    font-weight: 700;
    background: #f5f5f5;
}

/* Verschachtelte Listen ab Ebene 3 (z. B. ul.level_3 innerhalb eines
   li.trail von level_2): bisher fiel das auf Browser-Standard zurück
   (Aufzählungspunkte, Einrückung), da nur level_1/level_2 selbst
   zurückgesetzt wurden. Farbe/Padding der Links greifen bereits über
   die Descendant-Selektoren oben (li a), hier nur die Liste selbst. */
.mod_navigation ul.level_2 ul {
    list-style: none;
    margin: 0;
    padding-left: 1rem;
}

/* ==========================================================================
   Burger-Button (nur Mobile/Tablet sichtbar, siehe Media Query unten)
   ========================================================================== */
.nav-burger {
    display: none;
    flex-direction: column;
    align-items: center;   /* zentriert die schmaleren Balken horizontal */
    justify-content: center;
    gap: 5px;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    flex: 0 0 44px; /* verhindert Verbreiterung, falls der Elterncontainer flex ist */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 !important; /* überschreibt gezielt generische Theme-Button-Regeln */
    margin: 0;
    /* Feinjustierung der vertikalen Position: Wert bei Bedarf anpassen,
       z. B. --nav-burger-offset: -4px; für 4px höher. Negative Werte
       schieben nach oben, positive nach unten. */
    margin-top: var(--nav-burger-offset, 0px);
    z-index: 200;
}

/* Balken bewusst schmaler als der 44px-Touch-Target-Button: bei width:100%
   wirkte das Icon breit und flach (44px breit, nur ~19px hoch als Block).
   24px Breite ergibt ein optisch quadratischeres Icon. Der Button selbst
   bleibt 44x44 für die Touch-Fläche. */
.nav-burger span {
    display: block;
    width: 24px;
    height: 3px;
    background: #1a1a1a;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.mod_navigation.nav-open .nav-burger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.mod_navigation.nav-open .nav-burger span:nth-child(2) {
    opacity: 0;
}
.mod_navigation.nav-open .nav-burger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   DESKTOP: ab 768px (md) — horizontale Navigation
   ========================================================================== */
@media (min-width: 768px) {

    .nav-burger {
        display: none !important;
    }

    .mod_navigation ul.level_1 {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }

    .mod_navigation ul.level_1 > li > a,
    .mod_navigation ul.level_1 > li > strong {
        padding: 0.75rem 0.25rem;
        white-space: nowrap;
    }

    .mod_navigation li.submenu > a,
    .mod_navigation li.submenu > strong {
        padding-right: 0; /* Button übernimmt den Abstand */
    }

    .submenu-toggle {
        width: 32px;
        height: 32px;
    }

    /* Level 2 als Overlay unterhalb des Level-1-Punkts */
    .mod_navigation ul.level_2 {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        z-index: 100;
        padding: 0.5rem 0;

        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    }

    .mod_navigation ul.level_2 li a,
    .mod_navigation ul.level_2 li strong {
        padding: 0.6rem 1rem;
        white-space: nowrap;
    }

    .mod_navigation ul.level_2 li a:hover,
    .mod_navigation ul.level_2 li a:focus {
        background: #f5f5f5;
    }

    /* Öffnen/Schließen ausschließlich per Pfeil-Klick (Klasse .submenu-open,
       per JS gesetzt). Bewusst KEINE zusätzliche :hover-Regel mehr — die
       kollidierte mit dem Klick-Toggle: solange die Maus beim Klick auf
       den Pfeil über dem li blieb, hielt :hover das Menü trotz entfernter
       Klasse offen. Jetzt steuert einzig der Button den Zustand. */
    .mod_navigation li.submenu.submenu-open > ul.level_2 {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ==========================================================================
   MOBILE/TABLET: bis 767px (xs + sm) — Burger-Menü
   ========================================================================== */
@media (max-width: 767px) {

    /* Site-spezifisch: #myNavbar (Wrapper um <nav class="mod_navigation">
       im Header) auf Mobile positionieren, damit der Burger etwas höher
       und weiter rechts sitzt. position:absolute nötig, sonst greifen
       right/bottom nicht. Bezugspunkt ist der nächste positionierte
       Vorfahre (bei euch vermutlich div.w3-top mit position:fixed). */
    #myNavbar {
        position: absolute;
        right: 0;
        bottom: 5px;
    }

    .nav-burger {
        display: flex;
    }

    /* position:fixed statt absolute: das Menü soll die volle Viewport-
       Breite einnehmen, unabhängig davon, wie breit das <nav>-Element
       selbst im Header ist (das ist oft nur so breit wie Logo+Burger).
       Die Top-Position (--nav-mobile-offset) wird per JS anhand der
       tatsächlichen Header-Unterkante gesetzt. */
    .mod_navigation ul.level_1 {
        position: fixed;
        top: var(--nav-mobile-offset, 0px);
        left: 0;
        right: 0;
        z-index: 150;
        background: #ffffff;
        border-top: 1px solid #e0e0e0;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);

        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .mod_navigation.nav-open ul.level_1 {
        max-height: 80vh;
        overflow-y: auto;
    }

    .mod_navigation ul.level_1 > li {
        border-bottom: 1px solid #f0f0f0;
        flex-wrap: wrap; /* damit Level_2 in die nächste Zeile umbricht */
    }

    .mod_navigation ul.level_1 > li > a,
    .mod_navigation ul.level_1 > li > strong {
        padding: 1rem 1.25rem;
    }

    .mod_navigation li.submenu {
        flex-wrap: wrap;
    }

    /* Level 2 eingebettet statt Overlay */
    .mod_navigation ul.level_2 {
        flex-basis: 100%;
        background: #fafafa;

        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.25s ease;
    }

    .mod_navigation li.submenu.submenu-open > ul.level_2 {
        max-height: 500px;
        padding: 0.25rem 0;
    }

    .mod_navigation ul.level_2 li a,
    .mod_navigation ul.level_2 li strong {
        padding: 0.75rem 2rem;
    }
}