/* 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: var(--c-primary);
        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; }
}