/**
 * EINFACHES DROPDOWN-MENÜ (OHNE SCROLLBARS)
 *
 * - Normal aufklappbar bei Hover/Click
 * - Keine komplexen Overlays
 * - Keine Scrollbars
 * - Funktioniert auf Desktop UND Mobile gleich
 */

/* ========================================
   DROPDOWN FÜR DESKTOP & MOBILE
   ======================================== */

/* Dropdown Container */
.nav-dropdown,
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Link */
.nav-dropdown > a,
.dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: color 0.3s ease;
    cursor: pointer;
}

/* Dropdown Arrow */
.nav-dropdown > a::after,
.dropdown > a::after {
    content: '▼';
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

/* Hover auf Link */
.nav-dropdown:hover > a,
.nav-dropdown.active > a,
.dropdown:hover > a,
.dropdown.active > a {
    color: #D69E2E; /* Gold */
}

/* Arrow Rotation bei Hover */
.nav-dropdown:hover > a::after,
.nav-dropdown.active > a::after,
.dropdown:hover > a::after,
.dropdown.active > a::after {
    transform: rotate(180deg);
}

/* Dropdown Menu - DEFAULT (versteckt) */
.nav-dropdown .dropdown-menu,
.dropdown .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;

    min-width: 220px;

    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    margin-top: 8px;

    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Dropdown Menu - SICHTBAR (bei Hover/Active) */
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.active .dropdown-menu,
.dropdown:hover .dropdown-menu,
.dropdown.active .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Dropdown Menu Items */
.nav-dropdown .dropdown-menu a,
.dropdown .dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: #1A365D; /* Navy */
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.25s ease;

    border-left: 3px solid transparent;
}

/* Hover auf Menu Items */
.nav-dropdown .dropdown-menu a:hover,
.dropdown .dropdown-menu a:hover {
    background: rgba(214, 158, 46, 0.1); /* Gold Tint */
    color: #D69E2E; /* Gold */
    border-left-color: #D69E2E;
    padding-left: 24px;
}

/* Divider zwischen Items */
.nav-dropdown .dropdown-menu a:not(:last-child),
.dropdown .dropdown-menu a:not(:last-child) {
    border-bottom: 1px solid rgba(26, 54, 93, 0.08);
}

/* ========================================
   MOBILE ANPASSUNGEN
   ======================================== */

@media (max-width: 968px) {
    /* Dropdown auf Mobile gleich wie Desktop */
    .nav-dropdown .dropdown-menu,
    .dropdown .dropdown-menu {
        /* Position relativ zum Container */
        position: absolute;
        /* KEINE Scrollbars */
        overflow: visible;
        max-height: none;
    }

    /* Menu Items auf Mobile etwas größer */
    .nav-dropdown .dropdown-menu a,
    .dropdown .dropdown-menu a {
        padding: 14px 20px;
        font-size: 16px;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus States */
.nav-dropdown > a:focus,
.dropdown > a:focus {
    outline: 2px solid #D69E2E;
    outline-offset: 2px;
}

.dropdown-menu a:focus {
    outline: 2px solid #D69E2E;
    outline-offset: -2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}