/* Ergänzungen zum Prototyp-CSS (nur was im Prototyp fehlt: Logo). Keine Umgestaltung. */
.brand { align-items: center; }
.brand .logo { height: 34px; width: auto; display: block; }
.login .logo { height: 84px; width: auto; display: block; margin-bottom: 6px; }
/* Logo hat dunkle Schrift auf transparentem Grund: im dunklen Modus auf hellem Schild */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo { background: #fff; border-radius: 6px; padding: 3px 5px; }
}
:root[data-theme="dark"] .logo { background: #fff; border-radius: 6px; padding: 3px 5px; }

/* 2-Faktor: QR-Code (immer auf weissem Grund, sonst scannt das Handy nicht) und Notfallcodes */
.tfa-schritte { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.qr svg { width: 220px; height: 220px; display: block; background: #fff; padding: 8px; border-radius: 8px; margin: 8px 0; }
.geheim, .notfall code { font-family: var(--f-mono); letter-spacing: .06em; }
.notfall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.notfall li { border: 1px solid var(--line); border-radius: 8px; padding: 10px; text-align: center; font-size: 1.05rem; }
@media print { .actions { display: none; } }