:root {
    --menu-bg: #ffffff;
    --menu-text: #1a1a1a;
    --menu-accent: #000000;
    --overlay-color: rgba(0, 0, 0, 0.4);
}

#main-navigation-top {
    display: flex;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
    max-width: 1800px;
    margin:0 auto;
    
}


.mega-menu-wrapper {
    background: var(--menu-bg);
    position: sticky;
    top: 0;
    z-index: 2000;
}

.main-link-wrapper {display: flex; justify-content: center; align-items: center;}

.mega-menu {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 auto;
   
}



.main-link {
    display: block;
    padding: 20px 32px;
    text-decoration: none;
    color: var(--menu-text);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 14px;
}

/* Full Width Dropdown */
.mega-dropdown-full {
    position: absolute;
    left: 0;
    right:0;
    width: 100vw;
    background: #fff;
    z-index: 2001;
    box-shadow: 0 90px 40px rgba(0,0,0,.3);
    opacity: 0;
    visibility: hidden;
    transition: 0.25s ease-in-out;
}

.menu-item:hover .mega-dropdown-full {
    opacity: 1;
    visibility: visible;

    background:#f2f2f2;
}

.mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    max-width: 1775px;
    margin: 0 auto;
    padding: 40px 20px;
}

.column-title {
    font-weight: 700;
    margin-bottom: 15px;
    display: block;
    color: var(--menu-accent);
    text-decoration: none;
}

.third-level {
    list-style: none;
    padding: 0;
}

.third-level li a {
    display: block;
    padding: 5px 0;
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.third-level li a:hover { color: var(--menu-accent); }

/* Overlay 
#menu-overlay {
    position: fixed;
    top: 178px; left: 0; width: 100vw; height: 100vh;
    background: var(--overlay-color);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    pointer-events: none;
}

.mega-menu:hover ~ #menu-overlay {
    opacity: 1;
    visibility: visible;
}
*/
/* Mobile Basics */
.menu-toggle { display: none; }

.mega-menu:hover ~ #menu-overlay,
.mega-menu-wrapper:hover #menu-overlay {
    opacity: 1;
    visibility: visible;
}

.mobile-close-item {
    display: none;
}





@media (width < 992px) {

    #main-navigation-top {
        position: fixed; /* Ganz wichtig: Aus dem Dokumentenfluss nehmen! */
        top: 0;
        left: -300px; /* Startet außerhalb */
        width: 300px;
        height: 100vh;
        background: #ffffff;
        display: flex !important;
        flex-direction: column;
        transition: left 0.3s ease-in-out;
        z-index: 10000; /* Über allem anderen */
        overflow-y: auto;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        justify-content: flex-start; /* Oben ausrichten, nicht zentrieren */
    }

    #main-navigation-top.active {
        left: 0; /* Reinfahren bei Klick */
    }
    

    .mobile-close-item {
        display: block;
        padding: 10px;
        border-bottom: 1px solid #eee;
        background: #fdfdfd;
    }

    .close-menu-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: none;
        border: none;
        font-size: 16px;
        font-weight: bold;
        color: #333;
        cursor: pointer;
        width: 100%;
    }


    .menu-toggle {
        display: flex !important; /* Erzwingt die Sichtbarkeit des Burger-Buttons */
        align-items: center;
        padding: 15px;
        background: #fff;
        border: none;
        cursor: pointer;
    }

    /* Das Menü muss auf Mobile erst einmal versteckt sein, aber bereit zum Reinfahren */
    .mega-menu {
        display: flex !important; /* Muss flex sein, damit die Spalten untereinander stehen */
        flex-direction: column;
        position: fixed;
        top: 0;
        left: -300px; /* Startet links außerhalb */
        width: 300px;
        height: 100vh;
        background: #fff;
        z-index: 10000;
        transition: left 0.3s ease-in-out;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }

    .mega-menu.active {
        left: 0 !important; /* Das JavaScript schaltet diese Klasse */
    }
}

/* --- MOBILE OFF-CANVAS LOGIK --- */
@media (max-width: 992px) {
    
    /* Der Wrapper, der von links reingleitet */
    .mega-menu {
        position: fixed;
        top: 0;
        left: -300px; /* Startet außerhalb des Sichtfelds */
        width: 300px;
        height: 100vh;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        transition: left 0.3s ease-in-out;
        z-index: 10000;
        overflow-y: auto;
        padding-top: 60px;
    }

    .mega-menu.active {
        left: 0; /* Reinfahren */
    }

    /* Overlay für Mobile (ganzflächig) */
    #menu-overlay.mobile-active {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        z-index: 9999;
    }

    /* Menü-Punkte & Ebenen-Farben */
    .mega-menu .menu-item {
        width: 100%;
        position: relative; /* WICHTIG: Damit das Dropdown weiß, wo es "klebt" */
        border-bottom: 1px solid #eee;
    }

    /* 1. Ebene (Hauptkategorien) - Weiß */
    .mega-menu .main-link {
        background: #ffffff;
        padding: 15px 20px;
        width: 100%;
        text-align: left;
    }

    /* 2. Ebene (Unterkategorien) - Minimal dunkler */
    .mega-dropdown-full {
        display: none; /* Wird via JS getoggled */
        background: #f9f9f9;
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }

    /* 3. Ebene - Noch etwas dunkler */
    .third-level {
        background: #f0f0f0;
        padding-left: 20px;
    }

    .mega-grid {
        display: block; /* Kein Grid auf Mobile */
        padding: 0;
    }

    .mega-column {
        border-right: none;
        padding: 0;
    }

    .column-title {
        padding: 12px 20px;
        border-bottom: none;
        margin-bottom: 0;
        font-size: 14px;
    }
}

/* TEMPORÄR ZUM STYLEN: 
.mega-dropdown-full { opacity: 1 !important; visibility: visible !important; display: block !important; }
#menu-overlay { opacity: 1 !important; visibility: visible !important; }*/

.main-link::after, .main-link::before {
    display: none !important;
}

/* Sicherstellen, dass der Wrapper nichts abschneidet */
.mega-menu-wrapper, .mega-menu {
    overflow: visible !important;
}

/* Der Hover-Trigger muss absolut sicher greifen */
.menu-item:hover > .mega-dropdown-full {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}