/* css/responsive.css */

/* Responsive Design für Tablet-Größen (bis 768px) */
@media (max-width: 768px) {
    /* Allgemeine Anpassungen für Tablets */
    .header {
        height: 300px;
    }
    .header h1 {
        font-size: 2.5em;
    }
    .section-box {
        max-width: 90%;
    }
    .header-content {
        margin-top: 80px; /* Platz für die Navbar auf Tablets */
    }
}

/* --- */

/* Media Query für sehr kleine Bildschirme (Smartphones bis 400px) */
@media (max-width: 400px) {
    /* **Navbar-Anpassungen für Mobile-Modus (Burger-Menü aktiv)** */
    .navbar {
        flex-direction: row; /* Logo und Burger nebeneinander */
        justify-content: space-between; /* Logo links, Burger rechts */
        padding: 15px 20px;
        position: fixed; /* **Navbar am oberen Bildschirmrand fixieren** */
        width: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 100;
    }

    .navbar .logo {
        display: block; /* Sicherstellen, dass das Logo sichtbar bleibt */
    }

    .navbar .nav-links {
        /* **Wichtig: Das normale Navigationsmenü ausblenden** */
        display: none;
        flex-direction: column; /* Menüpunkte untereinander */
        width: 100%;
        position: absolute; /* Menü unter der Navbar */
        top: 60px; /* **Anpassen an die tatsächliche Höhe deiner Navbar!** */
        left: 0;
        background-color: rgba(0, 0, 0, 0.9);
        padding: 10px 0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 99;
    }

    /* **Zeigt das Menü an, wenn die JavaScript-Klasse 'active' gesetzt ist** */
    .navbar .nav-links.active {
        display: flex; /* **Wichtig: Menü anzeigen!** */
    }

    .navbar .nav-links li {
        margin: 10px 0;
        text-align: center;
    }

    /* **Burger-Menü-Icon auf kleinen Bildschirmen anzeigen** */
    .burger-menu {
        display: block; /* **Wichtig: Burger-Icon anzeigen!** */
    }

    /* **Animation für das Burger-Icon, wenn es 'aktiv' ist** */
    .burger-menu.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .burger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }

    .burger-menu.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Anpassungen für den Header-Inhalt, damit er nicht hinter der fixierten Navbar liegt */
    .header-content {
        margin-top: 90px; /* **Wichtig: Schafft Platz für die fixe Navbar** */
        padding: 20px;
        width: 90%;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    /* Schriftgrößen-Anpassungen für 400px */
    .header h1 {
        font-size: 2em;
    }
    .header p {
        font-size: 1em;
    }
}