/* Neue allgemeine Stile für Navigation mit verbessertem Hover-Puls-Effekt */
.navigation {
    text-align: center;
    position: relative;
}

.navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.navigation .nav-button {
    position: relative;
    text-decoration: none;
    color: var(--nav-button-text-color, #fff); /* Farbe des Textes kann über CSS-Variable gesteuert werden */
    font-size: var(--nav-button-font-size, 1rem); /* Schriftgröße kann über CSS-Variable gesteuert werden */
}
    padding: 10px 20px;
    transition: color 0.3s ease;
    z-index: 1; /* Der Text hat einen höheren Z-Index, um immer sichtbar zu bleiben */
}

.navigation .nav-button:hover {
    color: var(--nav-button-hover-color, #5DADE2); /* Hover-Farbe des Textes kann über CSS-Variable gesteuert werden */
}

/* Basis-Linie unterhalb der Navigation */
.navigation::after {
    content: "";
    position: absolute;
    bottom: -20px; /* Abstand unterhalb der Navigation */
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(93, 173, 226, 0.6); /* Gleiche Farbe wie die Buttons */
    opacity: 0.6;
}

/* Effekt-Linie unterhalb des Buttons */
.navigation .nav-button::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, rgba(70, 130, 180, 0) 0%, rgba(135, 206, 250, 1) 50%, rgba(70, 130, 180, 0) 100%);
    transition: width 0.4s ease-in-out;
    opacity: 1;
    z-index: 0;
}

/* Animation beim Hover über den Button */
.navigation .nav-button:hover::after {
    width: 100%;
    animation: pulse-light 1.5s infinite alternate ease-in-out;
}

/* Keyframes für Lichtpuls-Effekt */
@keyframes pulse-light {
    0%, 100% {
        background: linear-gradient(90deg, rgba(70, 130, 180, 0) 0%, rgba(135, 206, 250, 1) 50%, rgba(70, 130, 180, 0) 100%); /* Blau-weiß-blau Farbverlauf mit mehr Transparenz an den Seiten */
    }
    50% {
        background: linear-gradient(90deg, rgba(70, 130, 180, 0.4) 0%, rgba(135, 206, 250, 1) 50%, rgba(70, 130, 180, 0.4) 100%); /* Intensiverer Blau-weiß-blau Farbverlauf */
    }
}