/**
 * auth.css: Styles für die Login-Seite
 *
 * ARCHITEKTUR-ENTSCHEIDUNG: Eigene Datei statt Zeilen in components.css
 * ================================================================
 * Die Login-Seite ist die EINZIGE Seite ohne Navigation und ohne
 * Container-Grid. Ihre Styles (vollflächiges Zentrieren, schmale Card)
 * wären auf jeder anderen Seite nur totes Gewicht.
 *
 * Weil base.html nur design-system.css + components.css lädt und jede Seite
 * ihr eigenes CSS nachlädt, kostet diese Datei die anderen Seiten exakt
 * nichts. Genau dafür ist die Aufteilung da.
 *
 * Alle Farben und Abstände kommen aus den Tokens in design-system.css,
 * kein einziger Hex-Wert hier drin.
 * ================================================================
 */

/* ─────────────────────────────────────────────────────────────────
 *  Seiten-Layout: Card exakt mittig, vertikal wie horizontal
 *  ─────────────────────────────────────────────────────────────────
 *  WARUM min-height: 100dvh statt 100vh?
 *  Auf Mobilgeräten zählt 100vh die Adressleiste mit, die Card würde
 *  angeschnitten. "dvh" (dynamic viewport height) berücksichtigt die
 *  ein- und ausfahrende Browser-UI und ist genau dafür gemacht.
 *  ───────────────────────────────────────────────────────────────── */
.auth-body {
  background: var(--color-bg);
}

.auth-shell {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

/* Schmale Card, ein Passwortfeld braucht keine 800px Breite. */
.auth-card {
  width: 100%;
  max-width: 380px;
  padding: var(--space-xl);
}

/* ─────────────────────────────────────────────────────────────────
 *  Branding, identisch zur Navigation, damit man sofort sieht, dass
 *  man auf der richtigen Seite gelandet ist.
 *  ───────────────────────────────────────────────────────────────── */
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.auth-brand__logo {
  width: 36px;
  height: 36px;
  background: var(--color-primary);
  color: var(--color-on-accent);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 14px;
}

.auth-brand__title {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  color: var(--color-text);
}

.auth-hint {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-lg);
}

/* ─────────────────────────────────────────────────────────────────
 *  Fehlermeldung
 *  ─────────────────────────────────────────────────────────────────
 *  role="alert" im HTML sorgt dafür, dass Screenreader den Text sofort
 *  vorlesen. Die Farbe allein reicht als Signal nicht aus, deshalb steht
 *  die Information immer auch im Klartext da.
 *  ───────────────────────────────────────────────────────────────── */
.auth-error {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-md);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────
 *  Formular
 *  ───────────────────────────────────────────────────────────────── */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.auth-submit {
  margin-top: var(--space-md);
}

/* Button über die volle Breite der Card. */
.btn--block {
  width: 100%;
  justify-content: center;
}