/* ============================================================
   Auth-Seiten (Login, Passwort vergessen, Zuruecksetzen, Aendern)
   EINE Datei fuer alle fuenf Templates — vorher trug jedes Template
   denselben ~40-zeiligen <style>-Block als Kopie, mit bereits
   auseinandergelaufenen Werten (max-width 400/420/440 px).

   Tokens 1:1 aus dem Dashboard-Segment v3.1 (backend/static/v31/
   uebersicht.css), damit Anmeldung und Dashboard dieselbe Optik
   haben. Schrift ebenfalls Geist wie dort.

   KEINE Auth-Logik hier: Feldnamen, Formular-Ziele, CSRF und
   Cookies bleiben unveraendert, das hier ist reine Darstellung.
   ============================================================ */

/* ---------- Tokens ---------- */
/* Light ist der Default im :root, Dark kommt per prefers-color-scheme
   UND per [data-theme="dark"]. Die Media-Query steht zuerst, damit eine
   ausdrueckliche Wahl (data-theme) sie immer ueberstimmt. */
:root{
  --v-bg:#FBFCFE; --v-bg2:#F3F5FA; --v-elev:#FFFFFF; --v-elev2:#F6F8FC;
  --v-ink:#0F1320; --v-ink2:#4A5268; --v-ink3:#7B849A; --v-ink4:#AEB6C6;
  --v-line:#E7EAF2; --v-line2:#D6DBE8;
  --v-cyan:#1FB6FF; --v-violet:#7B3FE4; --v-blue:#5A78F0;
  --v-grad:linear-gradient(100deg,#1FB6FF 0%,#5A78F0 50%,#7B3FE4 100%);
  --v-green:#2E876A; --v-amber:#C2812F; --v-red:#C0544B;
  --v-shadow:0 1px 2px rgba(27,36,48,.05),0 6px 18px -8px rgba(27,36,48,.14);
  --v-r:14px; --v-r-sm:10px;
  --v-sans:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --v-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  /* Fehlerflaechen: eigene Tokens, weil --v-red als Text auf heller
     Flaeche 4,5:1 erreichen muss, als Rahmenfarbe aber zu kraeftig waere. */
  --v-err-bg:#FFF5F4; --v-err-line:#F3C9C5; --v-err-ink:#A13B33;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --v-bg:#07070b; --v-bg2:#0c0c12; --v-elev:#0E1118; --v-elev2:#12161F;
    --v-ink:#f4f4f7; --v-ink2:#c9c9d3; --v-ink3:#8a8a98; --v-ink4:#5b5b6a;
    --v-line:rgba(255,255,255,0.08); --v-line2:rgba(255,255,255,0.14);
    --v-green:#53B994; --v-amber:#D8A968; --v-red:#E0807A;
    --v-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.55);
    --v-err-bg:rgba(224,128,122,.10); --v-err-line:rgba(224,128,122,.32); --v-err-ink:#F0A9A4;
  }
}
[data-theme="dark"]{
  --v-bg:#07070b; --v-bg2:#0c0c12; --v-elev:#0E1118; --v-elev2:#12161F;
  --v-ink:#f4f4f7; --v-ink2:#c9c9d3; --v-ink3:#8a8a98; --v-ink4:#5b5b6a;
  --v-line:rgba(255,255,255,0.08); --v-line2:rgba(255,255,255,0.14);
  --v-green:#53B994; --v-amber:#D8A968; --v-red:#E0807A;
  --v-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -10px rgba(0,0,0,.55);
  --v-err-bg:rgba(224,128,122,.10); --v-err-line:rgba(224,128,122,.32); --v-err-ink:#F0A9A4;
}

*{margin:0;padding:0;box-sizing:border-box}

/* ---------- Seitenraster ----------
   Die Karte war bisher nach links geklebt, und zwar nicht aus Versehen:
   body war display:flex mit Default-Richtung ROW, und der eingebundene
   Rechts-Footer traegt margin:28px auto 18px. Auto-Margins auf einem
   Flex-Item schlucken den kompletten freien Platz, BEVOR justify-content
   ueberhaupt greift — die Karte wurde an den linken Rand gedrueckt und der
   Footer zentrierte sich im Rest. Bei 2000 px Breite war das eklatant.

   Jetzt: der Footer liegt fix am unteren Rand und damit ausserhalb des
   Flusses, die Karte ist das einzige Rasterkind und sitzt exakt in der
   Viewport-Mitte. Das Innenmass ist oben wie unten gleich (64 px), sonst
   waere der Kartenmittelpunkt gegen den Viewport-Mittelpunkt verschoben. */
body{
  min-height:100dvh;
  display:grid;
  justify-items:center;
  align-content:center;
  align-content:safe center;   /* verhindert unerreichbaren Ueberlauf bei sehr niedrigen Fenstern */
  padding:64px 16px;           /* symmetrisch: haelt die Mitte UND schafft Platz fuer den fixen Footer */
  font-family:var(--v-sans);
  font-size:16px;
  line-height:1.55;
  background:var(--v-bg);
  color:var(--v-ink);
  -webkit-font-smoothing:antialiased;
}
/* Sehr ruhiger Verlauf statt Flaeche: zwei weiche Radial-Schleier in den
   Markenfarben, fest am Viewport, damit beim Scrollen nichts wandert. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, color-mix(in srgb, var(--v-cyan) 12%, transparent), transparent 60%),
    radial-gradient(55rem 38rem at 92% 108%, color-mix(in srgb, var(--v-violet) 12%, transparent), transparent 60%);
}

/* ---------- Karte ---------- */
.auth-card{
  position:relative;
  width:100%;
  max-width:420px;
  background:var(--v-elev);
  border:1px solid var(--v-line);
  border-radius:var(--v-r);
  box-shadow:var(--v-shadow);
  padding:40px 36px 32px;
}
/* Haarfeine Markenkante oben — ein Detail, kein Dekor-Element. */
.auth-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  border-radius:var(--v-r) var(--v-r) 0 0;
  background:var(--v-grad);
  opacity:.9;
}

/* ---------- Kopf ----------
   Wortmarke ueber dem Titel, nicht daneben: das Logo ist 2,56:1 breit und
   wuerde neben einer Ueberschrift die halbe Karte einnehmen. */
.auth-head{margin-bottom:22px}
.auth-logo{height:30px;width:auto;display:block;margin-bottom:18px}
.auth-title{font-size:20px;font-weight:650;letter-spacing:-.01em;color:var(--v-ink);line-height:1.2}
/* ink2 statt ink3: ink3 erreicht auf heller Karte nur 3,74:1 und diese Zeile ist Kleintext. */
.auth-sub{font-size:12.5px;color:var(--v-ink2);margin-top:3px}

/* Light-/Dark-Fassung der Wortmarke. Zwei echte Dateien statt filter:invert —
   die Invertierung (wie in _admin_topbar_css.html) wuerde den cyan-violetten
   Verlauf im U mit zerstoeren. Die Kaskade spiegelt exakt die der Tokens oben:
   hell ist Default, dunkel per prefers-color-scheme, [data-theme] schlaegt beides. */
.auth-logo-dark{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .auth-logo-light{display:none}
  :root:not([data-theme="light"]) .auth-logo-dark{display:block}
}
[data-theme="dark"] .auth-logo-light{display:none}
[data-theme="dark"] .auth-logo-dark{display:block}
[data-theme="light"] .auth-logo-light{display:block}
[data-theme="light"] .auth-logo-dark{display:none}

.auth-theme{
  position:absolute;top:12px;right:12px;
  width:32px;height:32px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--v-line);border-radius:9px;
  color:var(--v-ink3);cursor:pointer;padding:0;
  transition:color .15s,border-color .15s,background .15s;
}
.auth-theme:hover{color:var(--v-ink);border-color:var(--v-line2);background:var(--v-elev2)}
/* Trefferflaeche auf 44x44 ziehen, ohne den Knopf optisch zu vergroessern:
   ein unsichtbarer Streifen von 6 px rundherum (32 + 2*6 = 44). */
.auth-theme::after{content:"";position:absolute;inset:-6px}
.auth-theme svg{width:15px;height:15px;display:block}
/* display:block wuerde sonst das hidden-Attribut ueberstimmen und beide
   Symbole uebereinander zeigen — das Attribut muss hier gewinnen. */
.auth-theme svg[hidden]{display:none}

/* ---------- Formular ---------- */
.auth-field{margin-bottom:15px}
.auth-label{
  display:block;font-size:12px;font-weight:600;color:var(--v-ink2);
  letter-spacing:.03em;margin-bottom:6px;
}
.auth-inputwrap{position:relative;display:block}
.auth-input{
  width:100%;padding:11px 14px;
  border:1px solid var(--v-line2);border-radius:var(--v-r-sm);
  font-family:inherit;font-size:14.5px;line-height:1.4;
  color:var(--v-ink);background:var(--v-bg2);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.auth-input::placeholder{color:var(--v-ink4)}
.auth-input:hover{border-color:var(--v-ink4)}
/* Sichtbarer Fokusring in Markenfarbe — nicht nur ein Rahmenwechsel. */
.auth-input:focus{
  outline:none;background:var(--v-elev);
  border-color:var(--v-cyan);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--v-cyan) 22%, transparent);
}
.auth-input[aria-invalid="true"]{border-color:var(--v-err-line)}
.auth-input[aria-invalid="true"]:focus{
  border-color:var(--v-red);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--v-red) 22%, transparent);
}
.auth-input.has-toggle{padding-right:44px}

/* Auge zum Einblenden des Passworts */
/* Ohne JavaScript bleibt der Knopf leer — dann darf er gar nicht erst
   erscheinen, sonst steht ein leeres Kaestchen im Feld. :empty greift genau
   so lange, bis das Skript das Symbol einsetzt. */
.auth-eye:empty{display:none}
.auth-eye{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;
  background:transparent;border:0;border-radius:8px;
  color:var(--v-ink3);cursor:pointer;padding:0;
}
.auth-eye:hover{color:var(--v-ink)}
.auth-eye::after{content:"";position:absolute;inset:-6px}
.auth-eye:focus-visible{outline:2px solid var(--v-cyan);outline-offset:1px}
.auth-eye svg{width:17px;height:17px;display:block}

/* Fehler direkt unter dem Feld, nicht als Kasten ueber dem Formular */
.auth-err{
  display:flex;align-items:flex-start;gap:7px;
  margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--v-err-ink);
}
.auth-err svg{width:14px;height:14px;flex:0 0 14px;margin-top:2px}
.auth-err:empty{display:none}

/* Hinweis-/Infoflaeche (Passwortregeln, Bestaetigungstexte) */
.auth-note{
  background:var(--v-elev2);border:1px solid var(--v-line);
  border-radius:var(--v-r-sm);padding:11px 13px;margin-bottom:16px;
  font-size:12.5px;line-height:1.5;color:var(--v-ink2);
}
.auth-note b{display:block;color:var(--v-ink);font-weight:600;margin-bottom:5px}
.auth-note ul{padding-left:17px;margin:0}
.auth-note li{margin:2px 0}
/* Regelliste mit Live-Haken auf change/reset */
.auth-rules{list-style:none;padding:0;margin:0;display:grid;gap:3px}
.auth-rules li{display:flex;align-items:center;gap:7px;color:var(--v-ink3)}
.auth-rules li::before{
  content:"";width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  border:1.5px solid var(--v-line2);transition:background .15s,border-color .15s;
}
.auth-rules li.ok{color:var(--v-ink2)}
.auth-rules li.ok::before{
  background:var(--v-green);border-color:var(--v-green);
  /* Haken als Maske, damit kein zusaetzliches Bild noetig ist */
  background-image:linear-gradient(var(--v-elev),var(--v-elev));
  background-size:5px 2px;background-position:center;background-repeat:no-repeat;
}

/* Staerke-Anzeige */
.auth-strength{margin-top:9px;display:none}
.auth-strength.an{display:block}
.auth-bar{height:4px;border-radius:99px;background:var(--v-line);overflow:hidden}
.auth-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .2s,background .2s}
.auth-strength-txt{margin-top:5px;font-size:12px;color:var(--v-ink3)}

/* ---------- Knopf ---------- */
.auth-btn{
  width:100%;padding:12px 16px;margin-top:4px;
  background:var(--v-ink);color:var(--v-bg);
  border:1px solid var(--v-ink);border-radius:var(--v-r-sm);
  font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.4;
  text-align:center;text-decoration:none;display:block;
  cursor:pointer;transition:opacity .15s,transform .05s;
}
.auth-btn:hover{opacity:.88}
.auth-btn:active{transform:translateY(1px)}
.auth-btn:focus-visible{outline:2px solid var(--v-cyan);outline-offset:2px}
.auth-btn[disabled],.auth-btn[aria-busy="true"]{opacity:.55;cursor:progress}

/* ---------- Fuss der Karte ---------- */
.auth-foot{text-align:center;margin-top:16px}
.auth-foot a,.auth-foot button{
  font-size:13px;color:var(--v-ink2);text-decoration:none;
  background:none;border:0;font-family:inherit;cursor:pointer;padding:2px 4px;border-radius:6px;
}
.auth-foot a:hover,.auth-foot button:hover{color:var(--v-ink)}
.auth-foot a:focus-visible,.auth-foot button:focus-visible{outline:2px solid var(--v-cyan);outline-offset:1px}

/* ---------- Rechts-Footer ----------
   _legal_footer.html bleibt unveraendert (er haengt in 16 Templates).
   Nur hier, gescopt auf die Auth-Seiten, wird er aus dem Fluss geloest —
   sonst verschoebe er die Karte aus der Viewport-Mitte. */
body.auth-page .mitou-legal-footer{
  position:fixed;left:0;right:0;bottom:0;
  margin:0;padding:14px 16px;
  color:var(--v-ink2);opacity:1;
}
body.auth-page .mitou-legal-footer a:hover{border-bottom-color:currentColor}

/* ---------- Nur fuer Screenreader ---------- */
.auth-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Schmale Fenster ---------- */
@media (max-width:480px){
  body{padding:56px 16px}
  .auth-card{padding:32px 20px 26px}
  .auth-title{font-size:19px}
}
/* Niedrige Fenster (aufgeklappte Tastatur): Abstaende einsammeln, damit der
   Knopf im Blick bleibt und die Karte nicht aus dem Fenster waechst. */
@media (max-height:680px){
  body{padding:28px 16px}
  .auth-card{padding:26px 22px 22px}
  .auth-head{margin-bottom:16px}
  .auth-field{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* Touch-Geraete: Eingaben mindestens 16 px, sonst zoomt iOS Safari beim
   Antippen in die Seite hinein und der Nutzer muss zurueckwischen. Betrifft
   nur Zeigegeraete ohne feinen Zeiger, am Desktop bleibt es bei 14,5 px. */
@media (pointer:coarse){
  .auth-input{font-size:16px}
}