/* ============================
   BURGER MENU STYLES
   ============================ */

/* Burger Menu Button (Hidden on Desktop, Visible on Mobile) */
.burger-menu {
    display: none; /* Hidden by default (Desktop) */
    flex-direction: column;
    justify-content: space-between;
    width: 36px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.burger-menu span {
    display: block;
    width: 100%;
    height: 4px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Burger Menu Active State (X Animation) */
.burger-menu.active span:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
    background: #E63946; /* Rot wenn aktiv */
}

.burger-menu.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.burger-menu.active span:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
    background: #E63946; /* Rot wenn aktiv */
}

/* ============================
   MOBILE STYLES (≤768px)
   ============================ */
@media (max-width: 768px) {
    /* Show Burger Menu on Mobile */
    .burger-menu {
        display: flex !important;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10001; /* Höher als Nav (10000) */
    }

    /* Navigation auf Mobile verstecken (wird per JavaScript getoggled) */
    nav {
        display: none !important;
        position: fixed;
        top: 70px; /* Under header */
        left: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.98);
        padding: 20px 0;
        z-index: 10000; /* Höher als Share Buttons (9999) */
        border-top: 2px solid #E63946;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    }

    /* Navigation Active State (Visible) */
    nav.active {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        animation: slideDown 0.3s ease-out;
    }

    /* Nav Links auf Mobile */
    nav .nav-link {
        font-size: 18px;
        padding: 12px 40px;
        width: calc(100% - 40px);
        max-width: 300px;
        text-align: center;
        background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
        border: 2px solid rgba(230, 57, 70, 0.3);
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    nav .nav-link:hover,
    nav .nav-link:focus {
        background: rgba(230, 57, 70, 0.2);
        border-color: #E63946;
        transform: translateX(5px);
    }

    /* Slide Down Animation */
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ============================
   EXTRA SMALL MOBILE (≤480px)
   ============================ */
@media (max-width: 480px) {
    .burger-menu {
        width: 32px;
        height: 26px;
        right: 15px;
    }

    .burger-menu span {
        height: 3px;
    }

    nav {
        top: 60px; /* Kleinerer Header auf sehr kleinen Geräten */
        padding: 15px 0;
    }

    nav .nav-link {
        font-size: 16px;
        padding: 10px 20px;
    }
}