#scrollToTopButton {
    position: fixed;
    /* Positioniert den Button fest auf der Seite, unabhängig vom Scrollen */
    bottom: 88px;
    /* Abstand vom unteren Rand der Seite */
    right: 20px;
    /* Abstand vom rechten Rand der Seite */
    width: 50px;
    /* Breite des Buttons */
    height: 50px;
    /* Höhe des Buttons */
    border-radius: 8px;
    /* Rundet die Ecken des Buttons */
    background-color: rgba(51, 51, 51, 0.75);
    /* Hintergrundfarbe des Buttons mit Transparenz */
    color: white;
    /* Textfarbe innerhalb des Buttons */
    font-size: 24px;
    /* Schriftgröße des Textes oder Icons im Button */
    border: none;
    /* Keine Umrandung */
    display: none;
    /* Standardmäßig nicht sichtbar */
    align-items: center;
    /* Zentriert Inhalte vertikal innerhalb des Flex-Containers */
    justify-content: center;
    /* Zentriert Inhalte horizontal innerhalb des Flex-Containers */
    cursor: pointer;
    /* Zeigt den Cursor als Klickzeiger */
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
    /* Glatte Übergänge für Breite und Hintergrundfarbe */
    overflow: hidden;
    /* Verhindert, dass Inhalte über den Rand hinaus anzeigen */
    z-index: 1000;
    /* Stellt sicher, dass der Button über anderen Elementen liegt */
    text-align: center;
    /* Zentriert den Text im Button */
}

.svgIcon {
    width: 12px;
    /* Breite des SVG-Icons */
    transition-duration: 0.3s;
    /* Dauer der Übergangseffekte für das Icon */
}

.svgIcon path {
    fill: white;
    /* Färbt das SVG-Icon weiß */
}

#scrollToTopButton:hover {
    width: 140px;
    /* Vergrößert die Breite des Buttons beim Hover */
    border-radius: 8px;
    /* Behält die abgerundeten Ecken bei */
    transition-duration: 0.3s;
    /* Dauer für den Hover-Übergang */
    align-items: center;
    /* Sicherstellung, dass Inhalte vertikal zentriert bleiben */
}

#scrollToTopButton:hover .svgIcon {
    /* Keine spezifische Änderung beim Hover, Kommentar wäre hier notwendig */
    transition-duration: 0.3s;
    /* Dauer für den Icon-Übergang beim Hover */
    transform: translateY(-200%);
    /* Verschiebt das Icon beim Hover nach oben */
}

#scrollToTopButton::before {
    position: absolute;
    /* Absolute Positionierung des Pseudo-Elements */
    bottom: -20px;
    /* Positioniert es unter dem Button */
    content: "Nach Oben";
    /* Textinhalt des Pseudo-Elements */
    color: white;
    /* Textfarbe */
    /* transition-duration: .3s; Auskommentierte Übergangsdauer */
    font-size: 0px;
    /* Anfangsgröße des Fonts, unsichtbar gemacht */
}

#scrollToTopButton:hover::before {
    font-size: 16px;
    /* Vergrößert die Schrift beim Hover */
    opacity: 1;
    /* Macht den Text sichtbar */
    bottom: unset;
    /* Entfernt die spezifische Positionierung von unten */
    /* transform: translateY(-30px); Auskommentierte Transformation */
    transition-duration: 0.3s;
    /* Dauer für den Übergang beim Hover */
}

@media only screen and (max-width: 768px) {
    #scrollToTopButton {
        bottom: 80px;
        /* Verändert die Position nach oben auf kleineren Bildschirmen */
    }

    #scrollToTopButton:hover {
        width: 50px;
        /* Setzt die Breite beim Hover zurück auf den Standard */
        border-radius: 8px;
        /* Behält die abgerundeten Ecken bei */
        transition-duration: 0.3s;
        /* Standarddauer für Übergänge beim Hover */
        align-items: center;
        /* Behält die zentrierte Ausrichtung der Inhalte bei */
    }

    #scrollToTopButton {
        transition: all 0.3s ease-in-out;
        /* Glatte Übergänge für alle veränderlichen Eigenschaften */
    }

    #scrollToTopButton:hover .svgIcon {
        transform: translateY(0%);
        /* Entfernt die Verschiebung des Icons beim Hover auf kleinen Bildschirmen */
    }

    #scrollToTopButton::before {
        content: "";
        /* Entfernt den Text im Pseudo-Element auf kleineren Bildschirmen */
    }
}

/* Anpassungen für Mobilgeräte */
@media only screen and (max-width: 932px) {
    #scrollToTopButton {
        bottom: 80px;
        /* Verändert die Position nach oben auf kleineren Bildschirmen */
    }

    #scrollToTopButton:hover {
        width: 50px;
        /* Setzt die Breite beim Hover zurück auf den Standard */
        border-radius: 8px;
        /* Behält die abgerundeten Ecken bei */
        transition-duration: 0.3s;
        /* Standarddauer für Übergänge beim Hover */
        align-items: center;
        /* Behält die zentrierte Ausrichtung der Inhalte bei */
    }

    #scrollToTopButton {
        transition: all 0.3s ease-in-out;
        /* Glatte Übergänge für alle veränderlichen Eigenschaften */
    }

    #scrollToTopButton:hover .svgIcon {
        transform: translateY(0%);
        /* Entfernt die Verschiebung des Icons beim Hover auf kleinen Bildschirmen */
    }

    #scrollToTopButton::before {
        content: "";
        /* Entfernt den Text im Pseudo-Element auf kleineren Bildschirmen */
    }
}