/* Zwei-Faktor-Anmeldung und Konto-Seite (Verwaltungsumbau Scheibe 5). Ergaenzt anmelden.css, ueberschreibt nichts davon:
   alle Klassen tragen das Praefix zf-. Dieselbe Sprache wie das Cockpit: ruhig, ein Hauptziel je Ansicht, nummerierte Stufen
   (Kreis mit Zahl, wie die Schritte der Projektkarte), grosse Tippflaechen. */

.zf-stufe { display: flex; gap: 14px; margin: 0 0 22px; }
.zf-stufe:last-of-type { margin-bottom: 8px; }
.zf-nr {
  flex: 0 0 auto; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%;
  background: var(--marke-verlauf); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center;
}
.zf-stufe-inhalt { flex: 1 1 auto; min-width: 0; }
.zf-stufe h2 { margin: 3px 0 6px; font-size: 16px; letter-spacing: -.01em; color: var(--marke-navy); }
.zf-stufe .hilfe { margin: 0 0 4px; font-size: 13px; }

/* Der QR-Code: immer schwarz auf weiss, auch im Dunkelmodus (sonst liest keine Kamera ihn). */
.zf-qr { display: grid; place-items: center; margin: 10px 0 12px; }
.zf-qr img {
  display: block; max-width: 100%; height: auto; padding: 8px;
  background: #fff; border: 1px solid var(--rand); border-radius: 14px; image-rendering: pixelated;
  /* Die Breite des Bildes ist die des Codes (zweifaktor.js, qrAnpassen); Polster und Rand kommen dazu, damit jedes Modul ganze Punkte breit bleibt. */
  box-sizing: content-box;
}
.zf-qr-weg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }

.zf-abtippen { margin: 4px 0 0; }
.zf-abtippen summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--marke-blau); padding: 10px 0; }
.zf-schluessel {
  display: block; margin: 8px 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rand); background: #f8fafe;
  font: 600 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .06em; word-break: break-all; user-select: all;
}

/* Der Code: grosse Ziffern in der Mitte, eine Zeile. */
.zf-formular { margin: 0; }
.zf-feld { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--leise); }
input.zf-code {
  display: block; width: 100%; margin-top: 6px; padding: 14px; text-align: center; font-size: 24px; font-weight: 600;
  letter-spacing: .24em; font-variant-numeric: tabular-nums;
}
input.zf-code::placeholder { letter-spacing: .24em; color: rgba(0, 16, 56, .28); }
input.zf-code.zf-wiederherstellung { font-size: 20px; letter-spacing: .14em; text-transform: uppercase; }
.zf-haken { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0 0 8px; font-size: 14px; font-weight: 400; color: var(--text); cursor: pointer; }
.zf-haken input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; accent-color: var(--marke-blau); }

/* Leise Knoepfe: ein Link, der wie ein Knopf aussieht. Der Hauptknopf bleibt der blaue aus anmelden.css. */
.zf-knopf-leise,
a.zf-knopf-leise {
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; margin: 0; padding: 10px 18px;
  border: 1px solid var(--rand); border-radius: 999px; background: transparent; color: var(--marke-blau);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; box-shadow: none;
}
.zf-knopf-leise:hover:not(:disabled),
a.zf-knopf-leise:hover { background: rgba(0, 103, 250, .08); }
.zf-knopf-leise:active:not(:disabled) { transform: scale(.985); }
button.zf-text { display: block; width: auto; min-height: 44px; margin: 4px auto 0; padding: 8px 14px; background: transparent; color: var(--marke-blau); box-shadow: none; font-size: 14px; font-weight: 600; }
button.zf-text:hover:not(:disabled) { background: transparent; text-decoration: underline; }

/* Die zehn Wiederherstellungscodes: zwei Spalten, grosse Schrift, damit nichts verwechselt wird. */
.zf-codes { list-style: none; margin: 0 0 14px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; border: 1px solid var(--rand); border-radius: 14px; background: #f8fafe; }
.zf-codes code { font: 600 16px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--marke-navy); }
.zf-druck-kopf { display: none; }
.zf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

/* Ein Stand in einem Satz mit Pille. */
.zf-stand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px; }
.zf-pille { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; background: rgba(0, 16, 56, .08); color: var(--marke-navy); }
.zf-pille.gruen { background: rgba(26, 143, 61, .14); color: #0d6b2a; }
.zf-pille.gelb { background: rgba(255, 149, 0, .16); color: #8a4b00; }

/* Die Konto-Seite: breiter als die Anmeldekarte, Karten untereinander. */
.zf-seite { width: 100%; max-width: 560px; display: grid; gap: 16px; }
.zf-seite .karte { max-width: none; padding: 26px 28px; }
.zf-seite h1 { font-size: 22px; }
.zf-seite h2.zf-titel { margin: 0 0 4px; font-size: 17px; letter-spacing: -.01em; color: var(--marke-navy); }
.zf-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.zf-kopfzeile .marke { margin: 0; }
.zf-zurueck { font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 0; }
.zf-liste { list-style: none; margin: 10px 0 0; padding: 0; }
.zf-liste li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rand); font-size: 14px; }
.zf-liste .zf-klein { display: block; font-size: 12px; color: var(--leise); }
.zf-panel { margin: 14px 0 0; padding: 16px; border: 1px solid var(--rand); border-radius: 14px; background: #f8fafe; }
.zf-panel[hidden] { display: none; }
/* Solange eine Rueckfrage oder die Einrichtung offen ist, steht nur sie da: ein Hauptziel je Ansicht. Gemeint sind die Aktionen DER KARTE
   (direktes Kind); die Knoepfe unter den Wiederherstellungscodes (Kopieren, Drucken, Datei) liegen im Panel und bleiben sichtbar. */
.zf-offen > .zf-aktionen { display: none; }
/* Ein leiser Knopf unter dem Hauptknopf (Abbrechen) klebt nicht an ihm. */
.zf-unter { display: flex; width: 100%; margin-top: 12px; }
.zf-panel > .zf-knopf-leise { margin-top: 12px; }
.zf-sicher { margin: 10px 0 0; font-size: 12.5px; color: var(--leise); }

/* Daumenmass: die Zeile zum Aufklappen des Schluessels und der Weg zurueck. */
@media (pointer: coarse) {
  .zf-abtippen summary { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .zf-zurueck { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
}

/* Das Logo: hell oder dunkel, je nach Modus (nur die Konto-Seite setzt data-thema; die Anmeldung davor bleibt hell). */
.zf-seite .marke-nacht { display: none; }

@media (max-width: 480px) {
  .zf-seite .karte { padding: 22px 18px; }
  .zf-codes { grid-template-columns: 1fr 1fr; padding: 12px; }
  .zf-codes code { font-size: 15px; letter-spacing: .04em; }
}

/* Nur die Codes drucken: alles andere unsichtbar. */
@media print {
  body.zf-drucken { background: #fff; }
  body.zf-drucken * { visibility: hidden; }
  body.zf-drucken .zf-codes-druck, body.zf-drucken .zf-codes-druck * { visibility: visible; }
  body.zf-drucken .zf-codes-druck { position: absolute; left: 0; top: 0; width: 100%; }
  body.zf-drucken .zf-druck-kopf { display: block; margin: 0 0 12px; font: 600 16px/1.4 sans-serif; }
  body.zf-drucken .zf-codes { border: 0; background: #fff; }
}

/* Dunkelmodus der Konto-Seite (seit 10.10.2026): derselbe Schalter wie im Cockpit und in der Verwaltung (localStorage op-thema), gesetzt im Kopf
   von konto.html vor dem ersten Zeichnen. Nur auf dem Bildschirm; die Werte sind die der Verwaltung. Der QR-Code bleibt schwarz auf weiss
   (sonst liest keine Kamera ihn), die Wiederherstellungscodes beim Drucken ebenso. */
@media screen {
  :root[data-thema="dunkel"] {
    color-scheme: dark;
    --papier: #0b1220; --karte: #161e30; --text: #e8edf7; --leise: rgba(226, 234, 250, .8); --rand: rgba(226, 234, 250, .3);
    --marke-navy: #f2f5fc; --marke-blau: #5c9efc; --tint: #5c9efc; --tint-dunkel: #a3c8fd; --warn: #ff9f0a; --fehler: #ff8178;
  }
  :root[data-thema="dunkel"] body {
    background: radial-gradient(circle at 8% -10%, rgba(0, 103, 250, .18), transparent 34rem), radial-gradient(circle at 96% 110%, rgba(0, 0, 0, .30), transparent 30rem), var(--papier);
  }
  :root[data-thema="dunkel"] .karte { border-color: rgba(226, 234, 250, .12); box-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .35); }
  :root[data-thema="dunkel"] input { background: #0b1220; }
  :root[data-thema="dunkel"] input:focus { background: #0b1220; box-shadow: 0 0 0 3px rgba(92, 158, 252, .30); }
  :root[data-thema="dunkel"] input.zf-code::placeholder { color: rgba(226, 234, 250, .38); }
  :root[data-thema="dunkel"] .meldung { background: rgba(255, 69, 58, .16); border-color: rgba(255, 129, 120, .45); }
  :root[data-thema="dunkel"] .meldung[data-art="hinweis"] { background: rgba(92, 158, 252, .18); color: var(--text); border-color: rgba(92, 158, 252, .45); }
  :root[data-thema="dunkel"] .zf-schluessel,
  :root[data-thema="dunkel"] .zf-codes,
  :root[data-thema="dunkel"] .zf-panel { background: rgba(214, 226, 255, .05); }
  :root[data-thema="dunkel"] .zf-knopf-leise:hover:not(:disabled),
  :root[data-thema="dunkel"] a.zf-knopf-leise:hover { background: rgba(92, 158, 252, .16); }
  :root[data-thema="dunkel"] .zf-pille { background: rgba(226, 234, 250, .12); color: var(--text); }
  :root[data-thema="dunkel"] .zf-pille.gruen { background: rgba(48, 209, 88, .16); color: #5cd67a; }
  :root[data-thema="dunkel"] .zf-pille.gelb { background: rgba(255, 159, 10, .16); color: #ffad47; }
  :root[data-thema="dunkel"] .zf-seite .marke-hell { display: none; }
  :root[data-thema="dunkel"] .zf-seite .marke-nacht { display: block; }
  :root[data-thema="dunkel"] .zf-qr img { border-color: #fff; }
}