/* =========================================================
   My Cortex – Anmeldung, Passwort vergessen / neu, Fehlerseite
   Eine Karte mittig auf grauem Grund, beide Themes ueber data-theme.

   SEIT DEM 16.09.2026 IM VERWALTUNGS-SYSTEM (nach DESIGN.md und
   static/bausteine.css): Karte mit feiner Kante, Felder 32px, dunkler
   Hauptknopf ueber die volle Breite, Blau nur fuer Links und Fokus, Inter.
   Jede Farbe kommt aus static/tokens.css (--ds-*); hier steht kein Hexwert.
   Seit demselben Tag laedt auch templates/login.html diese Datei, statt
   einen eigenen Satz Farben im Kopf zu tragen.
   ========================================================= */

/* DIE ALTEN NAMEN BLEIBEN UND ZEIGEN AUF --ds-* (.claude/rules/eine-fassung.md).
   Sie schlagen mit dem Thema um; ein zweiter Farbblock fuer dunkel entfaellt.

   KONTRAST: --text-mut #616161 auf Weiss 6,2:1 (dunkel #b5b5b5 auf #303030
   6,9:1). Links #005bd3 auf Weiss 5,9:1 (dunkel #91b8ff 6,6:1). Hauptknopf
   13,6:1 in beiden Themen. Der Knopf ist FLACH: gegen einen Verlauf laesst
   sich kein Kontrast rechnen (werkzeuge/kontrast_messen.py fuehrte den alten
   Anmeldeknopf deshalb unter NICHT MESSBAR). */
:root {
  --blau: var(--ds-rand-fokus);
  --blau-text: var(--ds-link);
  --blau-flaeche: var(--ds-fuell-primaer);
  --auf-blau: var(--ds-text-auf-primaer);

  --bg: var(--ds-grund);
  --karte: var(--ds-flaeche);
  --karte-2: var(--ds-flaeche-2);
  --text: var(--ds-text);
  --text-mut: var(--ds-text-2);
  --rand: var(--ds-rand);
  --rand-stark: var(--ds-rand-hover);
  --rand-feld: var(--ds-rand-feld);
  --gruen: var(--ds-erfolg-text);
  --gruen-bg: var(--ds-erfolg-flaeche);
  --rot: var(--ds-krit-text);
  --rot-bg: var(--ds-krit-flaeche);
  --fehler: var(--ds-krit-text);

  --schatten: var(--ds-schatten-karte);
  --schatten-ueber: var(--ds-schatten-ueber);
  --radius: var(--ds-r-3);
  --radius-s: var(--ds-r-2);
}

[data-theme="dark"] {
  color-scheme: dark;
  scrollbar-color: var(--ds-rand-hover) transparent;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ds-grund);
  color: var(--ds-text);
  font-family: var(--ds-schrift);
  font-size: var(--ds-t-md);
  line-height: var(--ds-zh-md);
  font-weight: var(--ds-gew-normal);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ds-link); text-decoration: none; }
a:hover { color: var(--ds-link-hover); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--ds-rand-fokus); outline-offset: 2px; border-radius: var(--ds-r-1); }

/* ---------- Die Karte ---------- */
.box {
  width: 100%;
  max-width: 420px;
  margin: 56px 16px;
  padding: 32px;
  background: var(--ds-flaeche);
  border-radius: var(--ds-r-3);
  box-shadow: var(--ds-schatten-karte);
  text-align: left;
}
@media (max-width: 489px) {
  .box { padding: 24px 20px; margin: 24px 12px; }
}

.marke { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--ds-text); }
.marke img { width: 32px; height: 32px; border-radius: var(--ds-r-2); display: block; }
.marke span { font-weight: var(--ds-gew-halbfett); font-size: var(--ds-t-lg); line-height: var(--ds-zh-lg); }

/* Das Zeichen der Seite (Schloss, Brief, Schluessel, Lupe): klein, in der
   Linkfarbe auf der hellen Betonungsflaeche -- dieselbe Rolle wie vorher,
   Markenblau auf blassem Blau. */
.symbol {
  width: 40px; height: 40px; margin: 0 0 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--ds-r-3);
  background: var(--ds-betont-flaeche);
  color: var(--ds-betont-text);
}
.symbol svg { width: 20px; height: 20px; }

h1 {
  margin: 0 0 4px;
  font-size: var(--ds-t-h-lg); line-height: var(--ds-zh-h-lg);
  font-weight: var(--ds-gew-fett); letter-spacing: var(--ds-sperr-dicht);
  color: var(--ds-text);
}
.lead { margin: 0 0 20px; color: var(--ds-text-2); }
.lead strong { color: var(--ds-text); font-weight: var(--ds-gew-halbfett); }

/* ---------- Felder ---------- */
form { text-align: left; margin: 0; }
label {
  display: block; margin: 16px 0 4px;
  font-size: var(--ds-t-md); line-height: var(--ds-zh-md);
  font-weight: var(--ds-gew-normal); color: var(--ds-text);
}
form > label:first-of-type { margin-top: 0; }
/* DAS FELD, wie `.ds-feld` (bausteine.css): 32px, feine Kante mit dunklerer
   Oberkante, Fokus als blauer Ring. */
input {
  width: 100%;
  min-height: var(--ds-feld-hoehe);
  padding: 5px 12px;
  border: 1px solid var(--ds-rand-feld);
  border-top-color: var(--ds-rand-feld-hover);
  border-radius: var(--ds-r-2);
  background: var(--ds-feld-grund);
  color: var(--ds-text);
  font: var(--ds-gew-normal) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift);
}
input:hover { border-color: var(--ds-rand-feld-hover); background: var(--ds-feld-grund-hover); }
input:focus {
  outline: 2px solid var(--ds-rand-fokus); outline-offset: 1px;
  border-color: var(--ds-rand-feld-aktiv); background: var(--ds-flaeche);
}
input[aria-invalid="true"] { border-color: var(--ds-krit-text); background: var(--ds-krit-flaeche); }
input[readonly] { color: var(--ds-text-2); }
/* Platzhalter in --ds-text-2: 6,1:1 auf der Feldflaeche, dunkel 7,6:1. */
input::placeholder, textarea::placeholder { color: var(--ds-text-2); opacity: 1; }

/* ---------- Knoepfe ---------- */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: var(--ds-knopf-hoehe-gross);
  margin-top: 20px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--ds-r-2);
  background: var(--ds-fuell-primaer);
  box-shadow: var(--ds-schatten-primaer);
  color: var(--ds-text-auf-primaer);
  font: var(--ds-gew-mittel) var(--ds-t-md)/var(--ds-zh-md) var(--ds-schrift);
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ds-zeit-kurz) var(--ds-kurve);
}
.btn:hover, .btn:focus-visible {
  background: var(--ds-fuell-primaer-hover); box-shadow: var(--ds-schatten-primaer-hover);
  color: var(--ds-text-auf-primaer); text-decoration: none;
}
.btn:active { background: var(--ds-fuell-primaer-aktiv); box-shadow: var(--ds-schatten-primaer-aktiv); }
.btn:focus-visible { outline: 2px solid var(--ds-rand-fokus); outline-offset: 1px; }
/* Der Nebenknopf ("Link erneut senden"): weiss mit Innenschatten. */
.btn-sekundär {
  margin-top: 12px;
  background: var(--ds-fuell); box-shadow: var(--ds-schatten-knopf); color: var(--ds-text);
}
.btn-sekundär:hover, .btn-sekundär:focus-visible {
  background: var(--ds-fuell-hover); box-shadow: var(--ds-schatten-knopf-hover); color: var(--ds-text);
}
.btn-sekundär:active { background: var(--ds-fuell-aktiv); box-shadow: var(--ds-schatten-knopf-aktiv); }

/* ---------- Texte und Meldungen ---------- */
.hinweis { margin: 12px 0 0; color: var(--ds-text-2); }
.hinweis strong { color: var(--ds-text); font-weight: var(--ds-gew-halbfett); }
.fehler { margin: 12px 0 0; color: var(--ds-krit-text); }
/* Rueckmeldungen als Banner: getoente Flaeche mit feiner Kante. */
.alert, .flash {
  margin: 0 0 16px; padding: 10px 12px;
  border-radius: var(--ds-r-2);
  text-align: left;
}
.alert-fehler, .flash-fehler { background: var(--ds-krit-flaeche); color: var(--ds-krit-text); box-shadow: inset 0 0 0 1px var(--ds-krit-rand); }
.alert-erfolg, .flash-erfolg { background: var(--ds-erfolg-flaeche); color: var(--ds-erfolg-text); box-shadow: inset 0 0 0 1px var(--ds-erfolg-rand); }

.links { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--ds-rand-2); }
.links a { color: var(--ds-link); }

.postfach { font-weight: var(--ds-gew-halbfett); color: var(--ds-text); overflow-wrap: anywhere; }

/* ---------- Leerzustand (Fehlerseite) ----------
   Ruhig und mittig: Zeichen, Titel, ein Satz, ein Knopf zurueck. */
.box.box-leer { text-align: center; }
.box-leer .marke { justify-content: center; }
.box-leer .symbol { margin: 0 auto 16px; }
.box-leer .btn { display: inline-flex; width: auto; min-height: var(--ds-knopf-hoehe-gross); }
.box-leer .links { border-top: 0; padding-top: 0; margin-top: 16px; }

/* ---------- Hell/Dunkel-Umschalter ----------
   Oben rechts ausserhalb der Karte, als stiller Symbolknopf ohne Flaeche.
   Das Symbol in --ds-icon haelt 3:1 auf dem Grund (hell 8,2:1, dunkel
   10,4:1). */
.theme-toggle {
  position: fixed; top: 12px; right: 12px;
  width: 32px; height: 32px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ds-r-2);
  background: transparent; box-shadow: none;
  color: var(--ds-icon); cursor: pointer;
}
.theme-toggle:hover { background: var(--ds-fuell-transparent-hover); color: var(--ds-text); }
.theme-toggle:focus-visible { outline: 2px solid var(--ds-rand-fokus); outline-offset: 1px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }