/* ==========================================
   RESPONSIVES MENÜ FÜR #SITE-NAVIGATION
   ========================================== */

@media screen and (max-width: 906px) {
    
    /* 1. Den Hauptcontainer für Mobilgeräte anpassen */
    #site-navigation {
        width: 100% !important;
        float: none !important;
        display: block !important;
        background: #f9f9f9; /* Helle Hintergrundfarbe für Mobil */
        margin: 10px 0;
        padding: 0;
    }

    /* 2. Die Liste der Menüpunkte untereinander stapeln */
    #site-navigation ul,
    #site-navigation .menu {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Einzelne Menüpunkte auf volle Breite setzen */
    #site-navigation ul li,
    #site-navigation .menu li {
        display: block !important;
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid #e0e0e0; /* Dezente Trennlinie */
    }

    /* 4. Links vergrößern, damit man sie mit dem Finger leicht trifft */
    #site-navigation ul li a,
    #site-navigation .menu li a {
        display: block !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* 5. Untermenüs (Dropdowns) auf Mobilgeräten eingerückt anzeigen */
    #site-navigation ul ul {
        display: block !important;
        position: static !important;
        box-shadow: none !important;
        padding-left: 20px !important;
        background: #f0f0f0 !important;
    }
}