/* Bewusst ein ausgeschriebener Stack statt var(--schrift) (19.08.2026): auth.css wird von
   passwort-vergessen.html und passwort-neu.html geladen, und die beiden laden tokens.css
   NICHT. Dort wäre der Token undefiniert und die Seite fiele auf die Browser-Standardschrift
   zurück — schlimmer als der Zustand vorher. Nachgeprüft, nicht angenommen.
   "Figtree" ist trotzdem raus: es wird seit PR #241 nirgends geladen und griff nur auf
   Rechnern mit lokaler Installation. */
/* Intenture News — Auth-Seiten (Login + Passwort vergessen/neu), 22.07.
   Standalone (nicht die SPA). Design: INTENTURE/HeyFin — warmes Off-White, EIN Navy,
   Satoshi/Figtree, rounded-rect 10px, Lucide-Icons, keine Emoji. Theme-aware. */
:root{
  /* line/ink/muted/link/amber-ink/danger auf die live gültigen Werte aus DESIGN.md §0 gezogen
     (07.09.2026) — vorher fünf tote Alt-Werte (u.a. das alte HeyFin-Blau statt Navy als
     Link-Farbe, und ein kontrastschwacher Alarmrot-Ton, s. TOTE_FARBWERTE in
     tests/test_design_sperre.py). */
  --bg:#FAFAF8; --surface:#FFFFFF; --fill:#F7F5F2; --line:#E4E4DF; --line-2:#DED9D2;
  --ink:#16161A; --muted:#72726D; --faint:#8A857D;
  --navy:#2A2A84; --link:#2A2A84;
  --green:#1E874B; --amber-bg:#FBF1E2; --amber-ink:#96590A; --danger:#C81E1E;
  --radius:8px; --shadow:0 10px 40px rgba(26,26,24,.10);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17161A; --surface:#1F1E22; --fill:#26242A; --line:#33313A; --line-2:#413E48;
    --ink:#F2EFEA; --muted:#B4AFA8; --faint:#7E7A74;
    --navy:#4B4BD6; --link:#8FB3FF; --green:#6FD79A; --shadow:0 10px 40px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:var(--bg); color:var(--ink);
  font-family:"Satoshi",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.auth-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow); width:100%; max-width:420px; padding:36px 34px 30px;
}
.auth-brand{font-weight:800; font-size:20px; letter-spacing:-.01em; color:var(--ink); margin:0 0 22px; text-align:center;}
.auth-brand b{color:var(--navy);}
.auth-h{font-size:21px; font-weight:700; margin:0 0 8px; line-height:1.3; text-wrap:balance;}
.auth-sub{font-size:14px; color:var(--muted); line-height:1.55; margin:0 0 22px;}
.auth-label{display:block; font-size:12.5px; font-weight:600; color:var(--muted); margin:0 0 6px;}
.auth-input{
  width:100%; border:1px solid var(--line-2); border-radius:var(--radius); background:var(--bg);
  padding:11px 13px; font-family:inherit; font-size:14.5px; color:var(--ink); transition:border-color .15s,box-shadow .15s;
}
.auth-input:focus{outline:none; border-color:var(--navy); box-shadow:0 0 0 3px color-mix(in srgb, var(--navy) 18%, transparent);}
.auth-field{margin:0 0 16px;}
.auth-pwwrap{position:relative;}
.auth-eye{position:absolute; right:8px; top:50%; transform:translateY(-50%); border:0; background:transparent;
  color:var(--faint); cursor:pointer; padding:6px; border-radius:8px; display:inline-flex;}
.auth-eye:hover{color:var(--muted);}
.auth-eye svg{width:18px; height:18px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%;
  border:1px solid transparent; border-radius:var(--radius); padding:12px 16px;
  font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; transition:filter .15s,opacity .15s,background .15s;
}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent; border-color:var(--line-2); color:var(--muted);}
.btn-ghost:hover{background:var(--fill); color:var(--ink);}
.btn[disabled]{opacity:.5; cursor:not-allowed; filter:none;}
.auth-link{display:inline-block; margin-top:16px; color:var(--link); font-size:13.5px; font-weight:600; text-decoration:none; text-align:center; width:100%;}
.auth-link:hover{text-decoration:underline;}
.auth-err{color:var(--danger); font-size:12.5px; font-weight:600; margin:-8px 0 14px; min-height:0;}
.auth-note{font-size:11.5px; color:var(--faint); line-height:1.5; margin-top:18px; text-align:center;}
/* Stärkebalken */
.pw-strength{margin:-6px 0 16px;}
.pw-bar{height:5px; border-radius:99px; background:var(--fill); overflow:hidden;}
.pw-bar > i{display:block; height:100%; width:0; border-radius:99px; transition:width .2s,background .2s;}
.pw-bar.schwach > i{width:33%; background:var(--danger);}
.pw-bar.ok > i{width:66%; background:var(--amber-ink);}
.pw-bar.stark > i{width:100%; background:var(--green);}
.pw-strength-lab{font-size:11.5px; font-weight:600; margin-top:5px; color:var(--faint);}
/* Icon-Kopf für Erfolg/Ablauf-Zustände */
.auth-icon{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.auth-icon svg{width:26px; height:26px;}
.auth-icon.ok{background:color-mix(in srgb, var(--green) 15%, transparent); color:var(--green);}
.auth-icon.warn{background:var(--amber-bg); color:var(--amber-ink);}
.auth-center{text-align:center;}
[hidden]{display:none !important;}