/* =========================================================
   Dropdown Navigation Leistungen
   ---------------------------------------------------------
   Ergänzung zur bestehenden style.css.
   Nicht als Ersatz für die style.css verwenden.
   Datei nach /assets/css/dropdown-navigation.css hochladen
   und nach der style.css einbinden.
   ========================================================= */

.main-nav li {
    position: relative;
}

.main-nav .nav-item--has-submenu > a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.main-nav .nav-item--has-submenu > a::after {
    content: "▾";
    font-size: 0.75rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.main-nav .nav-item--has-submenu.open > a::after,
.main-nav .nav-item--has-submenu:hover > a::after,
.main-nav .nav-item--has-submenu:focus-within > a::after {
    transform: rotate(180deg);
}

.main-nav .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1200;
    min-width: 300px;
    display: block;
    padding: 0.75rem;
    margin: 0;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Stabile Hover-/Fokus-Fläche */
.main-nav .nav-item--has-submenu:hover > .submenu,
.main-nav .nav-item--has-submenu:focus-within > .submenu,
.main-nav .nav-item--has-submenu.open > .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.main-nav .submenu li {
    width: 100%;
}

.main-nav .submenu a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 12px;
    font-size: 0.94rem;
    line-height: 1.35;
    font-weight: 700;
    color: var(--color-primary);
}

.main-nav .submenu a:hover,
.main-nav .submenu a:focus-visible {
    background: rgba(194, 157, 32, 0.14);
    color: var(--color-primary);
}

/* Aktive Unterseite optisch markieren, wenn aria-current gesetzt ist */
.main-nav .submenu a[aria-current="page"] {
    background: rgba(194, 157, 32, 0.18);
    color: var(--color-primary);
}

/* Mobile Navigation */
@media (max-width: 820px) {
    .main-nav .nav-item--has-submenu > a::after {
        content: "";
    }

    .main-nav .submenu {
        position: static;
        display: block;
        min-width: 0;
        width: 100%;
        margin-top: 0.35rem;
        padding: 0.35rem 0 0.35rem 0.85rem;
        border: 0;
        border-left: 3px solid rgba(194, 157, 32, 0.35);
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        transition: none;
    }

    .main-nav .submenu a {
        padding: 0.35rem 0;
        font-size: 0.95rem;
    }
}