/* === 🌀 3D LOADER OVERLAY === */
#loaderOverlay {
    position: fixed !important; /* Absolut über allem */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(14, 15, 17, 0.9); /* Dunkel & deckend */
    backdrop-filter: blur(4px);
    display: none; /* Wird via JS auf 'flex' gesetzt */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999; /* Maximaler Wert */
    pointer-events: all;
}

/* Texte unter dem Spinner */
.loader-text-wrapper {
    margin-top: 40px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

.loader-status {
    font-size: 1.1rem;
    color: #959595;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.loader-percent {
    font-size: 2rem;
    font-weight: bold;
    color: #1473E6;
}

/* Der 3D Würfel */
.spinner {
    width: 48px;
    height: 48px;
    animation: spinner-y0fdc1 2.4s infinite ease;
    transform-style: preserve-3d;
}

.spinner > div {
    background-color: rgba(20, 115, 230, 0.15);
    height: 100%;
    position: absolute;
    width: 100%;
    border: 2px solid #1473E6;
}

.spinner div:nth-of-type(1) { transform: translateZ(-24px) rotateY(180deg); }
.spinner div:nth-of-type(2) { transform: rotateY(-270deg) translateX(50%); transform-origin: top right; }
.spinner div:nth-of-type(3) { transform: rotateY(270deg) translateX(-50%); transform-origin: center left; }
.spinner div:nth-of-type(4) { transform: rotateX(90deg) translateY(-50%); transform-origin: top center; }
.spinner div:nth-of-type(5) { transform: rotateX(-90deg) translateY(50%); transform-origin: bottom center; }
.spinner div:nth-of-type(6) { transform: translateZ(24px); }

@keyframes spinner-y0fdc1 {
    0% { transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); }
    50% { transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); }
    100% { transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); }
}