/* menue.css - Zentrale Navigation mit LDGroup Namespace & Montserrat Font */
.ldgroup-nav {
    width: 100%;
    background: var(--ldgroup-nav-bg, rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-sizing: border-box;
    padding: 5px;
}

.ldgroup-nav .nav-container {
    margin: 0 auto;
    display: flex;
    justify-content: flex-end;
    /* Desktop rechtsbündig */
    align-items: center;
    padding: 5px 20px;
}

/* Der Hamburger-Button */
.ldgroup-nav .menu-toggle {
    display: none;
    background: none;
    border: 2px solid var(--ldgroup-color-light);
    color: var(--ldgroup-color-light);
    cursor: pointer;
    margin-left: auto;
    border-radius: 3px;
    padding: 2px 10px;
    transition: all 0.3s ease;
}

/* Die Liste der Links */
.ldgroup-nav .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
}

.ldgroup-nav .nav-links a {
    /* Moderne Schriftart für Überschriften-Look */
    font-family: var(--ldgroup-font-family);
    color: var(--ldgroup-text-light);
    text-decoration: none;
    letter-spacing: 1px;
    padding: 5px 10px;
    transition: all 0.3s ease;
}

.ldgroup-nav .nav-links a:hover {
    color: var(--ldgroup-color-light);
}

/* MOBILE ANSICHT (Kachel-Design) */
@media (max-width: 768px) {
    .ldgroup-nav {
        background: rgba(0, 0, 0, 0.2);
        padding: 3px;
    }

    .ldgroup-nav .menu-toggle {
        display: block;
        /* Hamburger anzeigen */
    }

    .ldgroup-nav .nav-links {
        display: none;
        /* Standardmäßig aus */
        flex-direction: column;

        /* Glassmorphism / Kachel-Look */
        background: var(--ldgroup-card-bg, rgba(45, 45, 45, 0.95));
        backdrop-filter: blur(15px);

        /* Rahmen und Schatten wie bei Login/VHS-Kacheln */
        border: 2px solid var(--ldgroup-color-light);
        border-radius: var(--ldgroup-border-radius, 15px);
        box-shadow: var(--ldgroup-shadow, 0 10px 30px rgba(0, 0, 0, 0.5));

        /* Positionierung: Knapp unter der Leiste */
        position: fixed;
        top: 50px;
        right: 15px;
        width: 250px;
        padding: 10px 0;
        z-index: 9999;
    }

    /* Wird durch JS geschaltet */
    .ldgroup-nav .nav-links.active {
        display: flex !important;
    }

    .ldgroup-nav .nav-links li {
        width: 100%;
    }

    .ldgroup-nav .nav-links a {
        padding: 15px 20px;
        border-bottom: 1px solid rgba(230, 126, 34, 0.1);
        color: var(--ldgroup-text-light, #ffffff);
        text-align: left;
        font-size: 1rem;
    }

    /* Hover-Effekt in der Kachel (Orange Akzent) */
    .ldgroup-nav .nav-links a:hover {
        background: rgba(230, 126, 34, 0.15);
        color: var(--ldgroup-color-light-hover);
        padding-left: 25px;
        /* Kleiner Einrück-Effekt */
    }

    .ldgroup-nav .nav-links li:last-child a {
        border-bottom: none;
    }
}