/* Styling für den "Nach oben" Button */
.to-top-button {
    position: fixed; /* Fixiert den Button relativ zum Viewport */
    bottom: 30px; /* Abstand vom unteren Rand */
    right: 30px; /* Abstand vom rechten Rand */
    z-index: 1000; /* Stellt sicher, dass der Button über anderen Inhalten liegt */
    display: none; /* Standardmäßig versteckt */
    padding: 10px 15px; /* Kleinere Größe für den Pfeil */
    font-size: 24px; /* Größe des Pfeils */
    line-height: 1; /* Zeilenhöhe anpassen */
    text-align: center;
    border-radius: 5px; /* Leichte Abrundung der Ecken */
    cursor: pointer;
    text-decoration: none; /* Entfernt Unterstreichung, falls <a>-Tag */

    /* Neon-Effekt-Farbe (Magenta oder Orange) */
    color: #ff00ff; /* Magenta als Standardfarbe */
    /* background: #ff00ff; */ /* Nicht für den Hintergrund, nur für den Glüh-Effekt und Text */
    box-shadow: 0 0 5px #ff00ff,
                0 0 15px #ff00ff,
                0 0 30px #ff00ff,
                0 0 60px #ff00ff; /* Starker Glüh-Effekt */
}

/* Hover-Effekt für den "Nach oben" Button */
.to-top-button:hover {
    background: #ff00ff; /* Hintergrundfarbe beim Hover (Magenta) */
    color: #050801; /* Textfarbe beim Hover (sehr dunkles Grün/Schwarz) */
    box-shadow: 0 0 5px #ff00ff,
                0 0 25px #ff00ff,
                0 0 50px #ff00ff,
                0 0 200px #ff00ff;
    -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}

/* Animationen der Leuchtstreifen anpassen (falls die Original-Animationen übernommen werden) */
/* Anpassen der Farben der Spans für den Nach-Oben-Button */
/* Hier verwenden wir die Variablen --i, um die Animationen auf die Spans des neuen Buttons anzuwenden */
.to-top-button span:nth-child(1) {
    background: linear-gradient(90deg, transparent, var(--neon-color, #ff00ff)); /* Hier wird --neon-color verwendet */
    animation: animate1 0s linear infinite;
}
.to-top-button span:nth-child(2) {
    background: linear-gradient(180deg, transparent, var(--neon-color, #ff00ff));
    animation: animate2 0s linear infinite;
    animation-delay: 0.0s;
}
.to-top-button span:nth-child(3) {
    background: linear-gradient(270deg, transparent, var(--neon-color, #ff00ff));
    animation: animate3 0s linear infinite;
    animation-delay: 0.0s;
}
.to-top-button span:nth-child(4) {
    background: linear-gradient(360deg, transparent, var(--neon-color, #ff00ff));
    animation: animate4 0s linear infinite;
    animation-delay: 0.0s;
}

/* CSS-Variablen für einfache Farbanpassung */
:root {
    --neon-color: #ff00ff; /* Standard auf Magenta */
    /* Für Orange ändern Sie dies zu --neon-color: #ffa500; */
}


/* Wenn Sie die ursprünglichen Neon-Button-Animationen für den Pfeil nutzen möchten,
   sind die @keyframes bereits in Ihrem vorherigen CSS definiert und können wiederverwendet werden. */

/* Stil, wenn der Button sichtbar ist (wird von JS hinzugefügt) */
.to-top-button.show {
    display: block; /* Macht den Button sichtbar */
	
}