/* ============================================================
   VARIANTE 3: THE "STACK" MENU (Karten-Stil + Mobile Button)
   Zusatzklasse: .submenu-stack
   ============================================================ */

/* 1. Container-Einstellung */
.hover-group {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

/* 2. Das Menü selbst (Der Kasten) */
.submenu.submenu-stack {
    /* POSITIONIERUNG */
    position: absolute;
    top: 100%; /* Hängt direkt unter der Leiste */
    right: var(--xpos, 50%); /* Zentriert */
    transform: translateX(var(--xpos, 50%));
    
    box-shadow: 0 10px 50px rgba(0,0,0,0.9); /* Starker Schatten */
    
    /* GRÖSSE & VERHALTEN */
    min-width: 300px;
    padding: 0;
    list-style: none;
    z-index: 10000; /* Muss über ALLEM liegen */
    overflow: hidden;
    
    /* ANIMATION (Start-Zustand: Unsichtbar) */
    opacity: 0;
    visibility: hidden;
    margin-top: 20px; /* Rutscht von unten rein */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Hover-Brücke (Damit der Hover nicht abreißt) */
/* Wir nutzen Padding statt Margin, das ist sicherer als ::after */
.hover-group:hover .submenu.submenu-stack {
    opacity: 1;
    visibility: visible;
    margin-top: 0px; /* Rutscht auf Position */
}
/* Unsichtbare Verlängerung nach oben, schließt die Lücke zum Button */
.submenu.submenu-stack::before {
    content: '';
    position: absolute;
    top: -20px; left: 0; width: 100%; height: 20px;
}

/* 4. Die Links (Klickflächen) */
.submenu.submenu-stack li {
    border-bottom: 1px solid var(--vc1);
    display: block;
    margin: 0;
}
.submenu.submenu-stack li:last-child { border-bottom: none; }

.submenu.submenu-stack li a {
    display: block;
    text-decoration: none;
}

/* 5. Checkbox (Weg damit!) */
.submenu-check {
    display: none !important;
}


/* --- MOBILE / TOUCH LOGIK --- */
.submenu-btn { display: none; } /* Desktop: Button weg */

@media (pointer: coarse) {
    /* Button anzeigen */
    .submenu-btn {
        display: inline-flex !important;
        padding: 0 16px;
        font-size: 1.2em;
        cursor: pointer;
    }

    /* Auf Mobile Hover ignorieren (damit nichts flackert) */
    .hover-group:hover .submenu.submenu-stack {
        display: none;
    }

    /* Wenn Checkbox AN ist -> ZEIGEN */
    .submenu-check:checked ~ .submenu.submenu-stack {
        display: block !important;
    }
    
    /* Checkbox selbst muss weg */
    .submenu-check { display: none !important; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }