/* anmeldung.css - Teile der Anmeldung fuer Kundinnen (Plan 06/001/037, Design C Porzellan): Name des Programms, "Passwort vergessen?",
   zweiter Schritt, Rechtstexte unten, Seite passwort.html und die Karte "Zwei-Schritt-Anmeldung" in den Einstellungen. Nur Tokens. */
.anmelden-seite { flex-direction: column; gap: var(--r-4); }
.anmelden-programm { margin: calc(-1 * var(--r-2)) 0 var(--r-3); text-align: center; font-size: var(--groesse-2); font-weight: var(--halbfett); color: var(--tinte-leise); letter-spacing: .02em; }
.anmelden-satz { margin: 0 0 var(--r-4); font-size: var(--groesse-3); line-height: var(--zeile); color: var(--tinte); }
.anmelden-hinweis { margin: 0 0 var(--r-4); padding: var(--r-3) var(--r-4); border-radius: var(--rundung); background: var(--flaeche-leise); font-size: var(--groesse-2); line-height: var(--zeile); }
.anmelden-hinweis.gut { background: var(--ok-flaeche); color: var(--ok); font-weight: var(--halbfett); }
.anmelden-dazu { margin: var(--r-4) 0 0; text-align: center; font-size: var(--groesse-2); color: var(--tinte-leise); }
.anmelden-dazu a, .anmelden-zustimmung a, .anmelden-fuss a { color: var(--petrol); text-underline-offset: .2em; }
.anmelden-dazu a { display: inline-flex; align-items: center; min-height: var(--treffer-min); }
.anmelden-kasten form { margin: 0; }
.anmelden-kasten > .knopf, .anmelden-kasten #inhalt > .knopf { width: 100%; }
.anmelden-zustimmung { align-items: flex-start; line-height: var(--zeile); }
.anmelden-zustimmung input { margin-top: var(--r-1); flex: 0 0 auto; }
.anmelden-fuss { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--r-1) var(--r-4); font-size: var(--groesse-1); }
.anmelden-fuss a { display: inline-flex; align-items: center; min-height: var(--treffer-min); color: var(--tinte-leise); }

/* Karte "Zwei-Schritt-Anmeldung" (app/zweischritt.js) */
.zweischritt-qr { display: flex; justify-content: center; margin: var(--r-4) 0; }
.zweischritt-qr svg { width: min(240px, 100%); height: auto; padding: var(--r-3); background: var(--weiss); border: 1px solid var(--linie-zart); border-radius: var(--rundung-gross); }
.zweischritt-geheim { display: block; margin: var(--r-2) 0 var(--r-4); padding: var(--r-3); border-radius: var(--rundung); background: var(--flaeche-leise); font: var(--halbfett) var(--groesse-3)/var(--zeile-eng) ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; word-break: break-all; user-select: all; }
.ersatz-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--r-2); margin: var(--r-3) 0 var(--r-4); padding: 0; list-style: none; }
.ersatz-liste li { padding: var(--r-2) var(--r-3); border-radius: var(--rundung); background: var(--flaeche-leise); font: var(--halbfett) var(--groesse-3)/var(--zeile-eng) ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; text-align: center; user-select: all; }
.zweischritt-schritte { margin: 0 0 var(--r-4); padding-left: var(--r-5); line-height: var(--zeile); }
.zweischritt-schritte li + li { margin-top: var(--r-2); }