/* public/css/login.css
 *
 * Ergänzungen für die abgemeldeten Seiten (Login, Passwort vergessen,
 * Login-Link, Reset, MFA-Zwischenschritt, 404) - 2026-09-28, UX-Audit.
 * Wird zusätzlich zu ms.css/ui.css geladen (views/authShell.js#authCssLink,
 * views/login.js). Nur Klassen, keine Inline-Styles (CSP style-src 'self').
 */

/* -- Lesbarkeit der Überschrift auf dem Bild --------------------------------
   Dezenter dunkler Verlauf aus der linken oberen Ecke HINTER Logo,
   Überschrift und Unterzeile. Eigene Ebene (::after, z-index 1) über dem
   Bild (Standard-Hintergrund bzw. persönliches <img>, z-index 0) und unter
   dem Inhalt (z-index 2) - funktioniert damit für jedes eigene Login-Bild. */
.ms-login__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Barrierefreiheit 2026-09-30: verstärkt (vorher ellipse 85% 70%,
     0.62/0.38/0 bei 0/38/72 %). Am Standardbild (Torbogen, heller Himmel
     rechts der Überschrift) gemessen, ungünstigster Bildpunkt hinter dem
     Text bei 640-960 px breiter Bildspalte: Überschrift vorher 2,0-2,5:1,
     jetzt >= 5,8:1; Unterzeile vorher 2,0-2,3:1, jetzt >= 6,3:1 (Ziel
     WCAG AA 3:1 große Schrift / 4,5:1 normaler Text). */
  background: radial-gradient(
    ellipse 100% 85% at 0% 0%,
    rgba(10, 12, 10, 0.75) 0%,
    rgba(10, 12, 10, 0.62) 50%,
    rgba(10, 12, 10, 0) 90%
  );
}

@media (max-width: 900px) {
  .ms-login__hero::after {
    /* Mobil-Banner (vorher 120% 100%, 0.55 -> 0 bei 80 %): Überschrift
       ungünstigster Punkt vorher 2,4:1, jetzt 3,6:1 (große Schrift),
       Unterzeile vorher 3,2:1, jetzt 5,0:1. */
    background: radial-gradient(ellipse 130% 110% at 0% 0%, rgba(10, 12, 10, 0.75) 0%, rgba(10, 12, 10, 0) 100%);
  }
}

.ms-login__headline,
.ms-login__sub {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* -- Lade-Zustand der Absenden-Knöpfe (public/js/login.js) ------------------ */
.ms-btn--loading {
  cursor: progress;
  opacity: 0.85;
}

.ms-btn__spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  vertical-align: -2px;
}

@media (prefers-reduced-motion: no-preference) {
  .ms-btn__spinner {
    animation: ms-login-spin 0.7s linear infinite;
  }
}

@keyframes ms-login-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -- Zweite Anmeldeart unter dem Formular ------------------------------------ */
.ms-login__alt {
  margin-top: var(--ms-space-3);
}

.ms-login__divider {
  display: flex;
  align-items: center;
  gap: var(--ms-space-2);
  margin: var(--ms-space-4) 0 var(--ms-space-3);
  color: var(--ms-text-subtle);
  font-size: 12.5px;
}

.ms-login__divider::before,
.ms-login__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ms-border);
}

/* -- 404 im Login-Rahmen ------------------------------------------------------ */
.ms-auth-code {
  font-family: var(--ms-font-display);
  font-size: 56px;
  line-height: 1;
  color: var(--ms-text-subtle);
  margin: 0 0 var(--ms-space-3);
}

.ms-login__form-wrap .ms-alert {
  margin-bottom: var(--ms-space-4);
}

/* -- Kennzeichnung KI-generiertes Standardbild (2026-10-01) -----------------
   Patrick: das Standard-Login-Bild (img/login-hero-standard*.webp) ist mit
   ChatGPT erzeugt -> unauffälliger Hinweis als Text ÜBER dem Bild (Datei
   bleibt unverändert). Nur im Markup, wenn kein eigenes Login-Bild gezeigt
   wird (views/login.js, views/authShell.js). Unten rechts, klein, über dem
   Verlauf (z-index 2 wie der übrige Inhalt). */
.ms-login__ai-note {
  position: absolute;
  right: var(--ms-space-4, 16px);
  bottom: var(--ms-space-3, 12px);
  z-index: 2;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

@media (max-width: 900px) {
  .ms-login__ai-note {
    right: var(--ms-space-3, 12px);
    bottom: var(--ms-space-2, 8px);
    font-size: 10px;
  }
}