/* frontend/public/css/responsive.css */

/* ── Desktop: menu-toggle immer verstecken ───────────────── */
.menu-toggle {
    display: none !important;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {

    header {
        flex-wrap: wrap;
        align-items: center;
    }

    /* Burger anzeigen */
    .burger {
        display: flex;
    }

    /* Nav als Dropdown unter dem Header */
    header nav {
        position: fixed;
        top: 72px;
        left: 0;
        width: 100%;
        background: #004080;
        transform: none;
        z-index: 999;
        display: none;
        padding: .5rem 0 1rem;
        overflow-y: auto;
        max-height: calc(100vh - 72px);
    }

    header nav.active {
        display: block;
    }

    .nav-links {
        flex-direction: column;
        gap: 0;
        padding: 0;
    }

    /* Haupt-Links */
    .nav-links>li>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .7rem 1.5rem;
        color: #fff;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .nav-links li.active>a {
        color: #fde047;
    }

    /* Pfeil zeigt auf mobil nach rechts → dreht bei geöffnetem Untermenü */
    .nav-arrow {
        font-size: .8rem;
        opacity: .8;
    }

    /* ── Mobile Untermenü ────────────────────────────────── */
    .nav-links li.has-dropdown {
        position: static;
    }

    /* Dropdown immer versteckt, per JS einblenden */
    .nav-dropdown {
        display: none !important;
        /* überschreibt Desktop-Hover */
        position: static;
        background: rgba(0, 0, 0, .2);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        min-width: unset;
        width: 100%;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    /* Geöffnetes Untermenü auf Mobil */
    .nav-dropdown.mob-open {
        display: block !important;
    }

    .nav-dropdown::before,
    .nav-dropdown::after {
        display: none;
    }

    .nav-dropdown li a {
        display: block;
        padding: .55rem 1.5rem .55rem 2.5rem;
        color: rgba(255, 255, 255, .85);
        font-size: .92rem;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .nav-dropdown li a:hover {
        background: rgba(255, 255, 255, .1);
        color: #fff;
    }

    .nav-dropdown-all {
        border-top: 1px solid rgba(255, 255, 255, .15);
        margin-top: 0;
        padding-top: 0;
    }

    .nav-dropdown-all a {
        color: #fde047 !important;
        font-weight: 600 !important;
    }

    /* Sonstiges */
    .feature {
        flex: 1 1 100%;
    }

    .home-hero h1 {
        font-size: 2rem;
    }

    .home-hero p {
        font-size: 1rem;
    }

    .footer-nav {
        flex-direction: column;
        align-items: center;
        gap: .5rem;
    }

    .footer-nav a {
        font-size: 1rem;
        padding: .5rem;
    }

    .footer-copy {
        font-size: .8rem;
    }

    .logo a {
        font-size: 1.2rem;
    }
}