/* =============================================================================
 * anmeldung.css - die Anmeldeseite (static/login.html). Laedt NACH
 * /tokens.css; beide Pfade sind OEFFENTLICH (_OEFFENTLICHE_PFADE in
 * web_basis.py) - im Betrieb liegt jedes andere Static-Asset hinter der
 * Anmeldung, und ein Asset, das die Middleware wegleitet, macht den Betrieb ab
 * dem Deploy unbenutzbar (#243/B38). test_181_s2_auth und
 * test_651_anmeldung_einbau wachen ueber beide Pfade.
 *
 * #651 UI-Gesamtkonzept, Einbau der Design-Rueckgabe Runde 6 (+ Runde 9 A1-A3)
 * nach reviews/PRUEFPROTOKOLL_und_EINBAUPLAN.md.
 * ABWEICHUNG vom Entwurf: KEINE eigene Kopie der Farb-Token. Der Entwurf
 * hielt die Seite "selbstgenuegsam" (Token im eigenen Block, Branding an zwei
 * Stellen synchron tauschen). Seit /tokens.css oeffentlich ist, gibt es fuer
 * die Farben genau EINE Quelle (#199) - der Grund, aus dem tokens.css
 * ueberhaupt entstand. Die Seite bleibt ohne stil.css (Login hat eine eigene,
 * schmale Form).
 * ========================================================================== */

* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center;
       justify-content:center; padding:var(--sp-4);
       font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
       font-size:var(--fs-md); line-height:var(--lh-md);
       background:var(--bg); color:var(--fg); }
.karte { background:var(--card); border:var(--border-w) solid var(--line);
         border-radius:var(--radius-md); padding:28px 32px; width:min(380px, 94vw); }
/* warum: die Marke traegt spaeter das Logo - eigene Zeile mit Luft, damit der
   Tausch Wortmarke -> Logo keinen Umbau braucht (Platzhalter-Hoehe 28px). */
.marke { font-size:var(--fs-xl); font-weight:700; letter-spacing:-0.01em;
         margin:0 0 2px; min-height:28px; }
.untertitel { color:var(--muted); font-size:var(--fs-sm); margin:0 0 18px; }
.hidden { display:none; }
.hinweis { color:var(--muted); font-size:var(--fs-xs); line-height:var(--lh-sm);
           margin:6px 0 0; }
.versal { text-transform:uppercase; }
label { display:block; font-size:var(--fs-sm); font-weight:600; color:var(--muted);
        margin:12px 0 4px; }
input { width:100%; font-size:var(--fs-md); padding:9px 12px;
        border-radius:var(--radius-sm);
        border:var(--border-w) solid var(--line); background:var(--bg); color:var(--fg);
        font-family:inherit; }
button { width:100%; margin-top:18px; font-size:var(--fs-md); padding:10px;
         border-radius:var(--radius-sm); border:0; background:var(--accent); color:#fff;
         cursor:pointer; font-family:inherit; }
button:hover:not(:disabled) { background:var(--accent-d); }
/* #1370 (Rundgang 8.3/8.8): „Passwort zeigen" als Zeile (das allgemeine
   `input {width:100%}` machte die Checkbox so breit wie die Karte) und der
   Weg zur Anmeldung als Knopf-gleicher Link nach Bestaetigung/Reset. */
label.zeigen { display:flex; align-items:center; gap:8px; font-weight:400; }
label.zeigen input { width:auto; margin:0; }
a.weiter { display:block; margin-top:18px; padding:10px; text-align:center;
           border-radius:var(--radius-sm); background:var(--accent); color:#fff;
           text-decoration:none; font-weight:600; }
a.weiter:hover { background:var(--accent-d); }
/* warum: der Sperr-Countdown (bis 4 h!) ist ein ZUSTAND, kein toter Knopf -
   deutlich als gesperrt lesbar, Restzeit in Mono (ruhig mitlaufende Ziffern
   statt springender Breite). login.js schreibt nur den Text, Klasse .gesperrt. */
button:disabled { cursor:not-allowed; }
button.gesperrt { background:var(--soft); color:var(--muted);
         font-family:var(--mono); font-variant-numeric:tabular-nums; }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
         outline:2px solid var(--accent); outline-offset:2px;
         border-radius:var(--radius-sm); }
/* warum: Fehlerzeile mit Flaeche statt nur roter Schrift - bei einer bewusst
   unspezifischen Meldung muss wenigstens die Form unuebersehbar sein.
   min-height verhindert Springen beim Erscheinen. */
.fehler { color:var(--err); font-size:var(--fs-sm); line-height:var(--lh-sm);
         margin-top:12px; min-height:18px; }
.fehler:not(:empty) { background:var(--errbg); border-radius:var(--radius-sm);
         padding:8px 10px; }
/* warum: Sperr-Erklaerung unterhalb des Knopfs - sagt WARUM nichts geht und
   dass Warten die einzige Option ist (bis zu 4 h). */
.sperrhinweis { font-size:var(--fs-xs); color:var(--muted); margin:8px 0 0; }

/* #1005: Erfolg braucht dieselbe Wertigkeit wie ein Fehler.
   warum: Nach "Link zum Zuruecksetzen anfordern" stand die WICHTIGSTE Aussage
   der Seite - deine Anforderung ist durch, sieh ins Postfach - als eine Zeile
   Flie\00DFtext an derselben Stelle wie der Hilfetext davor. Markus 2026-09-09
   nach der ersten echten Nutzung: "zu unscheinbar (mehr als box, dass aktion
   geklappt hat)". Wer das ueberliest, drueckt noch einmal und laeuft in die
   Drossel (#895).
   ⛔ Der WORTLAUT bleibt unveraendert vage ("Falls ein Konto ... existiert") -
   er verraet bewusst nicht, ob es die Adresse gibt (login.js). Deutlicher darf
   nur die FORM werden, nicht die Aussage.
   Gebaut wie `.fehler` daneben: Flaeche erst, wenn wirklich etwas drinsteht. */
.erfolg { color:var(--ok); font-size:var(--fs-sm); line-height:var(--lh-sm);
         margin-top:12px; }
.erfolg:not(:empty) { background:var(--okbg); border-radius:var(--radius-sm);
         padding:8px 10px; }

/* #1001 B: Solange der Reset-Bereich offen ist, gehoert das Passwortfeld nicht
   auf den Schirm - man ist gerade dabei, KEIN Passwort zu wissen.
   warum ueber eine Klasse und nicht ueber `details[open]`: das Feld steht in
   einem GESCHWISTER-Block weiter oben (.nur-stufe1), den ein CSS-Selektor vom
   <details> aus nicht erreicht. login.js setzt die Klasse am Formular. */
.form-reset-offen .nur-stufe1 label[for="pw"],
.form-reset-offen .nur-stufe1 #pw { display:none; }

/* ---- Zweistufiger Ablauf (#284) ------------------------------------------- */
/* warum: vorher standen alle Felder gleichzeitig da - 2FA-Code und Einmalcode
   fuehrten Nutzer ohne 2FA in die Irre. Der Server weiss erst NACH der
   Passwortpruefung, ob 2FA existiert -> Stufe 1 (Name + Passwort), Stufe 2
   (2FA ODER Einrichtung), gesteuert ueber .karte.stufe2 (login.js). */
.karte .nur-stufe2 { display:none; }
.karte.stufe2 .nur-stufe1 { display:none; }
.karte.stufe2 .nur-stufe2 { display:block; }
/* warum: in Stufe 2 bleibt sichtbar, WER sich anmeldet - kompakte Zeile statt
   der Felder, mit Weg zurueck. */
.wer { display:flex; align-items:center; justify-content:space-between;
       gap:10px; background:var(--soft); border-radius:var(--radius-sm);
       padding:8px 12px; font-size:var(--fs-sm); margin-top:4px; }
.wer b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wer button { width:auto; margin:0; padding:2px 10px; font-size:var(--fs-xs);
       background:transparent; color:var(--accent-d);
       border:var(--border-w) solid var(--line); }
.wer button:hover:not(:disabled) { background:var(--card); }
/* warum: "Passwort vergessen?" ist eine ERKLAERUNG, kein Reset-Weg - als
   aufklappbare Zeile, damit sie nicht wie ein Link zu einem Formular wirkt. */
.vergessen { margin-top:14px; font-size:var(--fs-xs); color:var(--muted); }
.vergessen summary { cursor:pointer; color:var(--accent-d); list-style:none; }
.vergessen summary::-webkit-details-marker { display:none; }
.vergessen p { margin:6px 0 0; line-height:var(--lh-sm); }

/* ---- Modal-Bauform (2FA-Einrichtung) ---------------------------------------- */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
         align-items:center; justify-content:center; z-index:100; padding:var(--sp-4); }
.modal.offen { display:flex; }
.modalkarte { background:var(--card); border:var(--border-w) solid var(--line);
         border-radius:var(--radius-md); padding:var(--sp-5) 26px;
         max-width:min(94vw,520px); box-shadow:var(--shadow-modal); }
.modalkarte h2 { font-size:var(--fs-lg); margin:0 0 6px; }
.modalkarte .untertitel { margin-bottom:14px; }
.modalfuss { display:flex; gap:10px; justify-content:flex-end; margin-top:var(--sp-4); }
.modalfuss button { width:auto; margin:0; padding:8px 16px; font-size:var(--fs-sm); }

/* ---- 2FA-Einrichtung: QR + Secret nebeneinander (#283) ---------------------- */
/* warum: scannen ODER tippen - zwei nummerierte Wege nebeneinander, der QR
   zuerst (Normalfall). Der QR kommt als eingebettetes data:-Bild vom Server
   (auth._qr_svg; das Secret verlaesst das Haus nicht); 168px reicht fuer
   TOTP-URIs bei Handy-Abstand. Fehlt der QR (Paket segno nicht da), faellt
   das Raster auf eine Spalte (login.js setzt .ohneqr). */
.zweiwege { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-4);
         align-items:start; margin:10px 0; }
.zweiwege.ohneqr { grid-template-columns:1fr; }
.zweiwege > div { min-width:0; }
.qrbox { border:var(--border-w) solid var(--line); border-radius:var(--radius-sm);
         padding:8px; background:#fff; }  /* QR braucht hellen Grund - auch im Dunkelmodus. */
.qrbox img { display:block; width:168px; height:168px; image-rendering:pixelated; }
.wegtitel { font-size:var(--fs-xs); font-weight:700; color:var(--muted);
         margin:0 0 4px; }
/* warum (Runde 9 A1): FESTES Raster - immer vier Gruppen je Zeile, unabhaengig
   von Schluessellaenge und Nachbar-Breite. Wer abtippt, haelt die Zeile:
   Zeile 1 = Gruppen 1-4, Zeile 2 = 5-8. Jede Vierergruppe ist ein <span>
   (login.js). width:max-content verhindert, dass die Box vom Grid gedehnt
   wird; die Spaltenzahl bricht NIE responsive um. */
.secret { background:var(--bg); border:var(--border-w) solid var(--line);
         border-radius:var(--radius-sm); padding:8px 12px; font-family:var(--mono);
         font-size:14px; line-height:1.7; letter-spacing:1px;
         display:grid; grid-template-columns:repeat(4, max-content);
         gap:2px 1em; width:max-content; max-width:100%; }
.secret span { white-space:nowrap; }
.kopierknopf { width:auto; margin-top:8px; padding:6px 12px; font-size:var(--fs-sm);
         background:transparent; color:var(--accent-d);
         border:var(--border-w) solid var(--line); }
.kopierknopf:hover:not(:disabled) { background:var(--soft); }
@media (max-width:520px) { .zweiwege { grid-template-columns:1fr; } }