/* Allgemeine Styles */
.nav-links a {
    position: relative;
    padding: 8px 0;
    transition: color 0.3s ease-in-out;
}

.container {
            width: 90%; /* Hier kannst du den gewünschten Prozentwert anpassen */
            max-width: 1200px; /* Maximalbreite für größere Bildschirme */
            margin: auto; /* Zentriert den Container */
            padding: 20px; /* Fügt etwas Innenabstand hinzu */
        }

        @media (max-width: 900px) {
            .container {
                width: 100%; /* 100% Breite bei Bildschirmgrößen <= 900px */
            }
        }

/* Hover-Effekt mit Unterstreichen */
.nav-links a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: 0;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a:hover {
    color: #ddd;
}

/* Menü für mobile Geräte */
.nav-links-mobile {
    width: 100%;
    display: none;  /* Standardmäßig versteckt */
}

.burger {
    cursor: pointer;
    display: none;  /* Standardmäßig versteckt */
}

/* Burger-Animation für geöffnetes Menü */
.burger.toggle div {
    transform: rotate(90deg);
    transition: all 0.3s ease-out;
}

/* Anpassung für Breakpoints */
@media screen and (max-width: 900px) {
    /* Verstecke die normalen Menü-Links auf kleineren Bildschirmen */
    .nav-links {
        display: none;
    }

    /* Zeige das Burger-Icon auf kleineren Bildschirmen */
    .burger {
        display: block;
    }
}

@media screen and (min-width: 901px) {
    /* Zeige die Links auf größeren Bildschirmen */
    .nav-links {
        display: flex;
    }

    /* Verstecke das Burger-Icon auf größeren Bildschirmen */
    .burger {
        display: none;
    }

    /* Verstecke das mobile Menü auf größeren Bildschirmen */
    .nav-links-mobile {
        display: none;
    }
}

/* Bei max. 600px: Burger-Menü bleibt weiterhin sichtbar */
@media screen and (max-width: 600px) {
    .burger {
        display: block;
    }

    /* Die Mobile Navigation bleibt versteckt bis das Burger-Menü angeklickt wird */
    .nav-links-mobile {
        display: none;
    }
}