/* ==========================================================================
   CSS für eine responsive Navigation mit separaten Menüs
   ========================================================================== */

@media screen and (min-width: 768px) { /* <-- Korrigiert mit "and" und der Klammer { */
    body {
        background: linear-gradient(135deg, #414445 10%, #414345 100%);
    }
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
nav {
    margin-top: 10px;
}
ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s ease;
}

a:hover {
    color: #007bff;
}

/* --- 2. Allgemeines Layout für den Header --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #b1b0b063;
    padding: 1rem 2rem;
    box-shadow: 0 2px 8px rgba(202, 41, 41, 0.595)
    position relative; /* Wichtig für die Positionierung des mobilen Menüs */
    z-index: 1000; /* Stellt sicher, dass die Leiste über dem Inhalt liegt */
}

.logo {
    font-size: 1.6rem;
    font-weight: bold;
}

/* --- Styling für dein Logo --- */
.logo-link img {
    height: 50px; /* Höhe anpassen, damit es in die Leiste passt */
    width: auto;  /* Breite automatisch anpassen */
    display: block; /* Verhindert unerwünschte Abstände unter dem Bild */
}


/* --- Styling für das Desktop-Dropdown-Menü --- */

/* Der Menüpunkt "Mehr" braucht eine relative Positionierung */
.desktop-nav .dropdown {
    position: relative;
}

/* Das eigentliche Dropdown-Menü (standardmäßig versteckt) */
.desktop-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Beginnt direkt unter dem "Mehr"-Link */
    left: 0;
    background-color: #aeaeaebf;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    border-radius: 4px;
    min-width: 180px; /* Mindestbreite für das Dropdown */
    z-index: 1100; /* Stellt sicher, dass es über allem anderen liegt */
    overflow: hidden; /* Verhindert, dass Inhalte herausragen */
    animation: fadeIn 0.3s ease-in-out; /* Sanfte Einblendung */
}


/* Die Links innerhalb des Dropdowns */
.desktop-nav .dropdown-menu li {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #fff;
}
.desktop-nav .dropdown-menu li:last-child {
    border-bottom: none;
}

/* Zeigt das Dropdown-Menü an, wenn man mit der Maus über "Mehr" fährt */
.desktop-nav .dropdown:hover .dropdown-menu {
    display: block;
}

/* Anpassung der Logo-Größe für die mobile Ansicht */
@media (max-width: 768px) {
    .logo-link img {
        height: 120px; /* Etwas kleiner auf dem Handy */
    }
}
/* WICHTIG: Die mobilen Elemente sind auf dem Desktop standardmäßig unsichtbar */
.mobile-nav {
    display: none;
}

.hamburger-icon {
    display: none; /* Auf dem Desktop versteckt */
    cursor: pointer;
}

.hamburger-icon .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #333;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}


/* ==========================================================================
   MOBILE ANSICHT - Hier passiert die Magie
   Gilt für alle Bildschirme, die 768px breit oder schmaler sind.
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Desktop-Navigation komplett ausblenden */
    .desktop-nav {
        display: none;
    }

    /* 2. Hamburger-Icon sichtbar machen */
    .hamburger-icon {
        display: block; /* Auf Mobilgeräten anzeigen */
    }
    
    /* 3. Das mobile Menü positionieren und stylen (es ist aber noch unsichtbar) */
    .mobile-nav {
        display: block; /* Wichtig: Muss 'block' sein, damit es positioniert werden kann */
        position: absolute;
        top: 100%; /* Beginnt direkt unterhalb des Headers */
        left: 0;
        width: 100%;
        background-color: rgba(0,0,0,0.1);
        box-shadow: 0 4px 6px rgba(202, 41, 41, 0.595);
        
        /* Animation: Standardmäßig aus dem Sichtfeld nach oben schieben */
        transform: translateY(-150%);
        opacity: 0;
        pointer-events: none; /* Nicht klickbar, wenn versteckt */
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    }

    /* 4. Der "geöffnete" Zustand: Diese Klasse wird per JavaScript hinzugefügt */
    .mobile-nav.active {
        transform: translateY(0); /* In die sichtbare Position schieben */
        opacity: 1;
        pointer-events: auto; /* Wieder klickbar machen */
    }

    .mobile-nav ul li {
        text-align: center;
        border-bottom: 1px solid #f0f0f0;
    }

    .mobile-nav ul li a {
        display: block;
        padding: 1.2rem 1rem;
        font-size: 1.1rem;
    }
    
    /* BONUS: Animation des Hamburger-Icons zu einem "X", wenn das Menü offen ist */
    /* Benötigt JS, das auch dem Icon die Klasse 'active' gibt */
    .hamburger-icon.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger-icon.active .bar:nth-child(2) {
        opacity: 0;
    }
    .hamburger-icon.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}