.nav-meta ul {
    display: flex;
    flex-wrap: wrap
}

.nav-meta li {
    display: flex;
    align-items: center
}

.nav-meta a, .nav-meta strong {
    color: #fff;
    text-decoration: underline transparent 0.0625rem;
    text-underline-offset: 0.4em;
    font-weight: 400;
    font-size: 1.1rem;
    transition: color ease-in-out 0.2s, text-decoration ease-in-out 0.2s
}

.nav-meta a:hover, .nav-meta a:focus-visible {
    color: var(--color-white);
    text-decoration-color: currentColor;
}

    .nav-meta a:hover, .nav-meta a:focus-visible {
        color: var(--color-white);
        text-decoration-color: currentColor
    }

.nav-meta strong {
    color: var(--color-white);
    text-decoration-color: var(--color-white)
}

/* ==========================================================================
   Contao Hauptnavigation (Komplett & Bereinigt)
   ========================================================================== */

/* 1. BASIS-LAYOUT DER NAVIGATION */
.mod_navigation {
    display: block;
    width: 100%;
}

.mod_navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: end;
 /*   background-color: #f8f9fa;  Hintergrundfarbe Hauptmenü */
}

/* Einzelne Menüpunkte */
.mod_navigation li {
    position: relative;
    display: block;
}

/* Links und Aktive Text-Elemente (strong/span) */
.mod_navigation a,
.mod_navigation span,
.mod_navigation strong {
    display: block;
    padding: 15px 20px; /* Normales Padding */
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1.5;
    font-weight: normal;
    transition: background 0.2s ease, color 0.2s ease;
}

/* Platzkorrektur: Hauptlinks mit Untermenü brauchen rechts Platz für den Button */
.mod_navigation .submenu > a,
.mod_navigation .submenu > span,
.mod_navigation .submenu > strong {
    padding-right: 45px; 
}



/* Hover- und Fokus-Effekte */
.mod_navigation a:hover,
.mod_navigation a:focus {
   /* background-color: #e9ecef;*/
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.4em;
    
}

/* Aktive Seite und Pfad-Hervorhebung (Trail) */
.mod_navigation .active strong,
.mod_navigation .trail a,
.mod_navigation .trail span {
/*    color: var(--color-white);*/
    font-weight: bold;
}
.mod_navigation li .active{
    text-decoration: underline;
    text-underline-offset: 0.4em;
}

/* Hover- und Fokus-Effekte */
.mod_navigation .level_2 li a:hover,
.mod_navigation .level_2 li a:focus {
   /* background-color: #e9ecef;*/
    color: var(--color-grey);
    text-decoration: underline;
    text-underline-offset: 0.4em;
    
}


/* ==========================================================================
   2. TOGGLE-BUTTON FÜR UNTERMENÜS (.btn-toggle-submenu)
   ========================================================================== */

/* Button-Styling und Positionierung */
.mod_navigation .btn-toggle-submenu {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

/* Erzeugt das EINZIGE sichtbare "+" Symbol im Button */
.mod_navigation .btn-toggle-submenu::after {
    content: "+";
    font-family: monospace, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-white);
    transition: color 0.2s ease;
}
.mod_navigation .level_2 .btn-toggle-submenu::after {
    content: "+";
    font-family: monospace, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-grey);
    transition: color 0.2s ease;
}

/* Hover-Effekt für den Button */
.mod_navigation .btn-toggle-submenu:hover::after,
.mod_navigation .btn-toggle-submenu:focus::after {
    color: #007c9c;
}

/* Wechsellogik: Wenn geöffnet (Hover oder ARIA-Klick), wird das Plus zum Minus */
.mod_navigation .submenu:hover > .btn-toggle-submenu::after,
.mod_navigation .btn-toggle-submenu[aria-expanded="true"]::after {
    content: "\2212"; /* Typografisches Minus-Zeichen */
}


/* ==========================================================================
   3. DROPDOWN-LOGIK (EBENE 2 UND TIEFER)
   ========================================================================== */

/* Untermenü standardmäßig verstecken */
.mod_navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 999;
    flex-direction: column; /* Untereinander darstellen */
}

/* Untermenü bei Hover anzeigen (Desktop-Verhalten) */
.mod_navigation li:hover > ul {
    display: flex;
}

/* Styling für die Links im Untermenü */
.mod_navigation ul ul a,
.mod_navigation ul ul span,
.mod_navigation ul ul strong {
    padding: 12px 20px;
    font-size: 15px;
    border-bottom: 1px solid #eeeeee;
    color: #48535b;
}

/* Letzten Rahmen im Untermenü entfernen */
.mod_navigation ul ul li.last a,
.mod_navigation ul ul li.last span {
    border-bottom: none;
}

/* Verschiebung für die 3. Ebene (Sub-Submenü) */
.mod_navigation ul ul ul {
    top: 0;
    left: 100%;
}
 /* Sidebar Wrapper 
   ========================================================================== */ 
 /* #left .nav-sidebar li.nav-expanded > ul {

    display: block;

}*/

#left .nav-sidebar a,
#left .nav-sidebar span,
#left .nav-sidebar strong {

    color: var(--color-gray);
    font-weight: bold;

}
    .mod_navigation span, .mod_navigation strong{}
    
    
     #left .nav-sidebar li {
        color: var(--color-gray);
        font-size:1rem;
    }
     #left .nav-sidebar li .active{
        color: var(--color-gray);
        font-size:1rem;
    }
    
     #left .nav-sidebar a  {
        color: var(--color-gray);
        font-size:1rem;
    }
     #left .nav-sidebar .btn-toggle-submenu::after {
        color: var(--color-gray);

}
    
     #left .nav-sidebar ul {
        flex-direction: column;
    }

    /* Untermenüs standardmäßig verstecken (überschreibt Desktop-Hover) */
     #left .nav-sidebar ul ul {
        display: none !important; 
        position: relative; /* Nicht mehr absolut über dem Inhalt schweben */
        top: auto;
        left: auto;
        width: 100%;
        box-shadow: none;
        background-color: #f1f3f5; /* Leicht dunklerer Hintergrund für Ebene 2 */
        padding-left: 15px; /* Einrückung für Unterpunkte */
    }

    /* Desktop-Hover im mobilen Zustand komplett deaktivieren */
     #left .nav-sidebar li:hover > ul {
        display: none;
    }

    /* NUR WENN DER BUTTON GEKLICKT WURDE (Contao setzt aria-expanded="true"):
       Zeige das zugehörige Untermenü an */
     #left .nav-sidebar .btn-toggle-submenu[aria-expanded="true"] + ul,
     #left .nav-sidebar .btn-toggle-submenu[aria-expanded="true"] ~ ul {
        display: flex !important;
    }

    /* Volle Breite für mobile Links */
     #left .nav-sidebar ul ul a,
     #left .nav-sidebar ul ul span,
     #left .nav-sidebar ul ul strong {
        width: 100%;
        box-sizing: border-box;
    }

    /* Verschiebung für die 3. Ebene (Sub-Submenü) im mobilen Zustand zurücksetzen */
     #left .nav-sidebar ul ul ul {
        left: auto;
        top: auto;
        padding-left: 15px; /* Noch ein Stück weiter einrücken */
    }
    /* Wechsellogik: Wenn geöffnet (Hover oder ARIA-Klick), wird das Plus zum Minus */
#left .nav-sidebar .btn-toggle-submenu::after,
#left .nav-sidebar .btn-toggle-submenu[aria-expanded="true"]::after {

    color: var(--color-gray);

}
   
 /* Sidebar Wrapper Ende
   ========================================================================== */ 


/* 4. MOBILES MENÜ (Für Smartphones & Tablets unter 768px)
   ========================================================================== */

@media (max-width: 1023px) {
    /* Hauptmenü untereinander statt nebeneinander darstellen */
    
    .mod_navigation .active strong, .mod_navigation .trail a, .mod_navigation .trail span {
    color: var(--color-gray);
    font-weight: bold;
}
    
    .mod_navigation a, .mod_navigation span, .mod_navigation strong {
        color: var(--color-gray);
    }
    .mod_navigation .btn-toggle-submenu::after {

    color: var(--color-gray);

}
    
    .mod_navigation ul {
        flex-direction: column;
    }

    /* Untermenüs standardmäßig verstecken (überschreibt Desktop-Hover) */
    .mod_navigation ul ul {
        display: none !important; 
        position: relative; /* Nicht mehr absolut über dem Inhalt schweben */
        top: auto;
        left: auto;
        width: 100%;
        box-shadow: none;
        background-color: #f1f3f5; /* Leicht dunklerer Hintergrund für Ebene 2 */
        padding-left: 15px; /* Einrückung für Unterpunkte */
    }

    /* Desktop-Hover im mobilen Zustand komplett deaktivieren */
    .mod_navigation li:hover > ul {
        display: none;
    }

    /* NUR WENN DER BUTTON GEKLICKT WURDE (Contao setzt aria-expanded="true"):
       Zeige das zugehörige Untermenü an */
    .mod_navigation .btn-toggle-submenu[aria-expanded="true"] + ul,
    .mod_navigation .btn-toggle-submenu[aria-expanded="true"] ~ ul {
        display: flex !important;
    }

    /* Volle Breite für mobile Links */
    .mod_navigation ul ul a,
    .mod_navigation ul ul span,
    .mod_navigation ul ul strong {
        width: 100%;
        box-sizing: border-box;
    }

    /* Verschiebung für die 3. Ebene (Sub-Submenü) im mobilen Zustand zurücksetzen */
    .mod_navigation ul ul ul {
        left: auto;
        top: auto;
        padding-left: 15px; /* Noch ein Stück weiter einrücken */
    }
}