/* ===============================
   Navigation Dropdown Hover Fix
   Bootstrap 5 kompatibel
   =============================== */

/* Desktop: Dropdown on Hover */
@media (min-width: 768px) {
    /* Dropdown bei Hover anzeigen */
    .nav-item.dropdown-hover:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
    
    /* Dropdown-Toggle Link bleibt klickbar */
    .nav-item.dropdown-hover > .nav-link.dropdown-toggle {
        cursor: pointer;
        pointer-events: auto;
    }
    
    /* Dropdown-Pfeil rechts vom Text */
    .nav-link.dropdown-toggle::after {
        margin-left: 0.5em;
    }
    
    /* Sanfte Animation */
    .dropdown-menu {
        transition: opacity 0.2s ease, visibility 0.2s ease;
        opacity: 0;
        visibility: hidden;
    }
    
    .nav-item.dropdown-hover:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
    }
    
    /* Dropdown bleibt offen wenn man mit Maus drüber fährt */
    .dropdown-menu:hover {
        display: block !important;
    }
}

/* Mobile: Click-basiert (kein Hover) */
@media (max-width: 767px) {
    /* Mobile benutzt die Standard-Klick-Funktionalität */
    .dropdown-toggle[data-bs-toggle="dropdown"] {
        pointer-events: auto;
    }
}

/* Dropdown-Menu Styling verbessern */
.dropdown-menu {
    border: 1px solid #d3a84a;
    box-shadow: 0 2px 8px rgba(63, 23, 14, 0.1);
    background-color: #fbe299;
    padding: 0.5rem 0;
}

.dropdown-item {
    color: #3f170e;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.2s ease;
}

.dropdown-item:hover {
    background-color: #f1ce73;
    color: #3f170e;
}

.dropdown-item.active {
    background-color: #f1ce73;
    color: #3f170e;
    font-weight: 600;
}