/* Login-Seite: isometrische Würfel als dekorativer Vollflächen-Hintergrund.
   Liegt fest hinter Kopfzeile und Formular; die Würfel heben sich als
   diagonale Welle (Verzögerung je Würfel im Partial templates/auth/bg/). */
.login-bg {
    position: fixed;
    inset: 0;
    z-index: -1;

    width: 100%;
    height: 100%;

    color: var(--color-primary);
    pointer-events: none;
}

/* Eigener Stacking-Kontext: Die Grafik (z-index -1) bleibt hinter dem
   Inhalt, aber über dem Seitenhintergrund. */
.page-container {
    position: relative;
    z-index: 1;
}

.auth-card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.login-isometrisch {
    opacity: 0.5;
}

.cube-top,
.cube-left,
.cube-right {
    stroke: var(--color-primary);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.cube-top   { fill: var(--color-primary); fill-opacity: 0.3; }
.cube-left  { fill: var(--color-primary); fill-opacity: 0.14; }
.cube-right { fill: var(--color-primary); fill-opacity: 0.06; }

.login-cube-use {
    animation: login-cube 6.3s ease-in-out infinite;
}

@keyframes login-cube {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-16px); }
}

@media (prefers-reduced-motion: reduce) {
    .login-cube-use {
        animation: none;
    }
}