#spinner-overlay, .spinner-overlay {
    position: fixed; /* Bleibt immer im Viewport, auch beim Scrollen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparenter schwarzer Hintergrund */
    display: flex; /* Nutzt Flexbox für die Zentrierung des Spinners */
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
    z-index: 9999; /* Stellt sicher, dass der Spinner über allen anderen Elementen liegt */
    /* Standardmäßig ausgeblendet: Wird via JavaScript entfernt, wenn der Spinner angezeigt werden soll */
    /* display: none; */
}

/* Eine Klasse, die mit JavaScript hinzugefügt/entfernt wird, um den Spinner anzuzeigen/auszublenden */
#spinner-overlay.hidden {
    display: none;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3); /* Die "durchsichtige" Spur des Spinners */
    border-top: 4px solid #fff; /* Der sichtbare, sich drehende Teil */
    border-radius: 50%; /* Macht das Element kreisförmig */
    width: 50px; /* Breite des Spinners */
    height: 50px; /* Höhe des Spinners */
    animation: spin 1s linear infinite; /* Definiert die Dreh-Animation */
}

/* Die Keyframe-Animation für das Drehen */
@keyframes spin {
    0% { transform: rotate(0deg); }    /* Start bei 0 Grad */
    100% { transform: rotate(360deg); } /* Dreht sich einmal komplett herum (360 Grad) */
}