/* --- Navigation.css FINAL REVISED --- */

/* 1. BASIS & DESKTOP */
.logo { width: auto; max-width: 314px; position: absolute; padding-top: 1.4em; padding-left: 1em; }
.mobilnavi, .submenu-toggle { display: none !important; }

#header .mod_navigation { float: right; margin-top: 4.7em; text-transform: uppercase; position: relative; z-index: 1000; }
#header .mod_navigation ul { margin: 0; padding: 0; list-style: none; display: flex; }
#header .mod_navigation li { position: relative; }

/* FIX: "Brücke" für die Maus, damit das Menü beim Runterfahren nicht schließt */
@media (min-width: 880px) {
    #header .mod_navigation ul.level_1 > li {
        padding-bottom: 25px !important; 
        margin-bottom: -25px !important;
    }
}

#header .mod_navigation a, #header .mod_navigation strong { 
    display: block; margin: 0 .44em; padding: .3em 0 .2em; font-size: 1rem; 
    text-decoration: none; color: #273579; border-bottom: 3px solid transparent; 
}
#header .mod_navigation strong, #header .mod_navigation a:hover { border-bottom-color: #273579; }

/* EBENE 2 DESKTOP (Wichtig: nur ab 880px absolut) */
@media (min-width: 880px) {
    #header .mod_navigation ul.level_2 {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        display: none !important;
        visibility: hidden !important;
        background: #ffffff !important;
        min-width: 250px !important;
        z-index: 10000 !important; /* Über den Content/Bild heben */
        box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        border: 1px solid #bab9b9 !important;
    }

    #header .mod_navigation li:hover > ul.level_2 {
        display: block !important;
        visibility: visible !important;
    }

    #header .mod_navigation ul.level_2 li {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }

    #header .mod_navigation ul.level_2 a,
    #header .mod_navigation ul.level_2 strong {
        padding: 12px 20px !important;
        text-transform: none !important;
        font-size: 0.95rem !important;
        color: #273579 !important;
        border: none !important;
        margin: 0 !important;
    }

    #header .mod_navigation ul.level_2 a:hover {
        background-color: #f1f2f3 !important;
    }
}
/* --- Desktop-Brücke & Z-Index Fix --- */
@media (min-width: 880px) {
    /* Schließt die unsichtbare Lücke zwischen Text und Menü */
    #header .mod_navigation ul.level_1 > li {
        padding-bottom: 25px !important; 
        margin-bottom: -25px !important;
    }

    /* Hebt das Menü über den Content/Bilder */
    #header .mod_navigation ul.level_2 {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        z-index: 9999 !important; /* Wichtig für Contao 5 Stacking */
        background: #ffffff !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 250px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    }

    /* Der Trigger: Zeigt Ebene 2 beim Hover über das Listen-Element */
    #header .mod_navigation ul.level_1 > li:hover > ul.level_2 {
        display: block !important;
    }
}


/* 2. MOBIL-STEUERUNG (Bis 879px) - KOMPLETT UNVERÄNDERT */
@media only screen and (max-width: 879px) {
    #header { height: 100px; }
    .mobilnavi { display: block !important; right: 15px; position: absolute; top: 28px; z-index: 1100; }
    .mobilnavi a { font-size: 0 !important; text-decoration: none !important; }
    .icon-align-justify:before {
        content: ""; display: block; width: 30px; height: 22px;
        background: linear-gradient(to bottom, #273579, #273579 20%, transparent 20%, transparent 40%, #273579 40%, #273579 60%, transparent 60%, transparent 80%, #273579 80%, #273579 100%);
    }

    #header .mod_navigation { display: none; position: absolute; top: 100px; left: 0; width: 100%; background: #f1f2f3; margin: 0; padding: 0; z-index: 9000; }
    #header .mod_navigation.is-open { display: block !important; }
    #header .mod_navigation ul { flex-direction: column; }
    
    #header .mod_navigation li { width: 100%; border-bottom: 1px solid #ddd; min-height: 50px; display: flex; flex-direction: column; justify-content: center; }
    #header .mod_navigation a, #header .mod_navigation strong { padding: 15px 20px; margin: 0; border: none; }

    .submenu-toggle { 
        display: flex !important; align-items: center; justify-content: center;
        position: absolute; right: 0; top: 0; width: 55px; height: 55px; 
        font-size: 28px; color: #273579; cursor: pointer; z-index: 10; border-left: 1px solid #ccc; 
    }

    .mod_navigation .level_2 { display: none !important; position: static; background: #e8e8e8; }
    .mod_navigation li.submenu-open > .level_2 { display: block !important; }
}