/* Burger-Icon Animation und X-Icon */
.burger-menu.open span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
  background: #000; /* SCHWARZ für X */
}
.burger-menu.open span:nth-child(2) {
  opacity: 0;
}
.burger-menu.open span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
  background: #000; /* SCHWARZ für X */
}

.burger-menu span {
  transition: all 0.3s cubic-bezier(.4,2,.6,1);
}

/* Logo und Social Icons nach hinten, wenn Menü offen oder beim Scrollen */
.logo.hide-on-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.social-icons.hide-on-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 1 !important;
}
/* Mobile Menü Overlay und Burger-Menü */


@media (max-width: 900px) {
    .main-navigation {
        display: none !important;
    }

    /* NEUES MINIMALISTISCHES BURGER MENU */
    .burger-menu {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        position: fixed;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 10000;
        
        /* INITIAL: Kein Hintergrund! */
        background: transparent;
        border-radius: 0;
        width: 32px; /* Kleiner, nur für die Balken */
        height: 24px; /* Nur für die Balken */
        align-items: center;
        justify-content: center;
        box-shadow: none;
        border: none;
        transition: all 0.3s ease;
        padding: 4px; /* Kleines Padding für Touch-Target */
    }

    /* BEIM SCROLLEN: Schwarzer Kreis */
    .burger-menu.scrolled {
        background: #000;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* MENÜ OFFEN: Kein Hintergrund (weiße Fläche dahinter) */
    .burger-menu.open {
        background: transparent !important;
        border-radius: 0;
        box-shadow: none;
    }

    .burger-menu span {
        display: block;
        width: 24px; /* Schmaler */
        height: 2px; /* Dünner */
        background: #fff; /* IMMER WEISS */
        border-radius: 1px;
        transition: all 0.3s ease;
        
        /* SCHATTEN damit immer sichtbar auf jedem Hintergrund */
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
        /* Oder alternativ Outline: */
        /* border: 0.5px solid rgba(0, 0, 0, 0.3); */
    }

    /* BEIM SCROLLEN: Balken bleiben weiß (im schwarzen Kreis) */
    .burger-menu.scrolled:not(.open) span {
        background: #fff; /* Bleibt weiß */
        box-shadow: none; /* Kein Schatten mehr nötig im schwarzen Kreis */
    }

    /* MENÜ OFFEN: Balken werden schwarz für X */
    .burger-menu.open span {
        background: #000 !important; /* NUR hier schwarz für X */
        box-shadow: none !important; /* Kein Schatten für schwarzes X */
    }

    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s;
    }

    .mobile-menu-overlay.active {
        display: flex;
    }

    .mobile-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        align-items: center;
    }

    .mobile-menu-link {
        font-size: 2rem;
        color: #222;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 0.05em;
        transition: color 0.2s;
    }

    .mobile-menu-link:hover {
        color: #b49a86;
    }
}

@media (min-width: 901px) {
    .mobile-menu-overlay {
        display: none !important;
    }

    .burger-menu {
        display: none !important;
    }
}