/* Navbar */
.navbar {
    background-color: var(--primary-color);
    position: fixed;
    top: 53px; /* Positioniert die Navbar direkt unterhalb des Headers */
    left: 0;
    right: 0;
    max-width: var(--max-width); /* Stellt sicher, dass die Navbar die gleiche Breite wie der Header hat */
    margin: 0 auto; /* Zentriert die Navbar */
    border-radius: 0px 0px 10px 10px;
    box-shadow: 0 2px 5px 0 var(--header-shadow-color), 0 2px 10px 0 var(--header-shadow-dark-color);
    padding-bottom: 5px;
    z-index: 999; /* Sicherstellen, dass die Navbar immer oben ist */
}

.navbar ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px; /* Abstand zwischen den Links */
    margin: 0;
    padding: 0;
}

.navbar li {
    display: inline-block;
}

.navbar a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: color 0.3s;
}

.navbar a:hover {
    color: var(--accent-color);
}

/* Sicherstellen, dass die Navbar auf mobilen Geräten immer zentriert bleibt und die Links nebeneinander bleiben */
@media (max-width: 1000px) {
    .navbar {
        width: 100%; /* Die Navbar breitet sich auf 100% aus, bleibt aber innerhalb des max-width */
        left: 50%;
        transform: translateX(-50%); /* Zentriert die Navbar */
    }

    .navbar ul {
        justify-content: center; /* Die Links bleiben zentriert */
        flex-wrap: nowrap; /* Stellt sicher, dass die Links nebeneinander bleiben */
    }

    .navbar a {
        font-size: 16px; /* andere Schrift für mobile Geräte */
        padding: 0px 0px; /* Mehr Platz um die Links */
    }
}

/* Bei Bildschirmgrößen unter 768px, z. B. bei Tablets oder Handys */
@media (max-width: 768px) {
    .navbar ul {
        gap: calc(100% / 26); /* Verringert den Abstand zwischen den Links */
    }

    .navbar a {
        font-size: 16px; /* andere Schriftgröße */
        padding: 0px 0px; /* Mehr Platz um die Links */
    }
}

/* Bei Bildschirmgrößen unter 400px */
@media (max-width: 400px) {
    .navbar ul {
        gap: calc(100% / 30); /* Noch engerer Abstand bei sehr kleinen Geräten */
    }

    .navbar a {
        font-size: 14px; /* Kleinere Schrift für sehr kleine Geräte */
        padding: 0px 0px; /* Weniger Abstand um die Links */
    }
}