/* Konto-Seiten. Anmeldeseite (Plan „Konten“ K4) – ergänzt den Anmeldebildschirm der alten App (#login in design.css) um die
   Teile der eigenen Anmeldung: Face ID, Code, Kontowahl, Links. Darunter „Anmeldung & Geräte“ (.konto-seite, /mein-konto).
   Farben nur aus den Variablen von design.css und marke/<firma>/marke.css. */
#login{background:radial-gradient(120% 80% at 50% -10%,var(--accent-soft2),transparent 60%),var(--bg);overflow-y:auto;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
#login h1.tag{font-size:15px;font-weight:700;color:var(--text);margin-top:12px;margin-bottom:22px}
#login .card form{margin:0}
#login .card .btn{width:100%;justify-content:center;display:flex;border-radius:13px;padding:14px;font-size:15px;flex:none}
#login .btn.anm-zweit{background:var(--card2);border:1px solid var(--line);color:var(--text);box-shadow:none;margin-bottom:11px}
#login form .btn.anm-zweit{margin-bottom:0}
#login .btn.anm-konto{font-weight:600}
#login .btn:disabled{opacity:.6;cursor:default}
#login .anm-oder{display:flex;align-items:center;gap:10px;margin:16px 0 14px;color:var(--muted2);font-size:12px}
#login .anm-oder::before,#login .anm-oder::after{content:"";flex:1;height:1px;background:var(--line)}
#login .anm-link{display:block;width:100%;background:none;border:0;color:var(--accent-ink,var(--accent));font:inherit;font-size:13.5px;font-weight:600;padding:12px 8px 2px;cursor:pointer;text-align:center}
#login .anm-link:focus-visible,#login .btn:focus-visible{outline:2px solid var(--a11y-ring,var(--accent));outline-offset:2px}
#login .anm-text{font-size:14px;color:var(--text);line-height:1.5;margin:0 0 14px;text-align:center}
#login .anm-fehler{color:var(--red);font-size:13px;line-height:1.4;margin:-2px 0 11px;text-align:center}
#login input.anm-code{text-align:center;font-size:22px;letter-spacing:.25em;font-variant-numeric:tabular-nums}
#login .anm-wahl{margin-bottom:6px}
#login .anm-wahl-eintrag{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:13px;background:var(--card2);margin-bottom:9px;font-size:14.5px;color:var(--text);cursor:pointer}
#login .anm-wahl-eintrag.an{border-color:var(--accent);box-shadow:var(--ring)}
#login .anm-wahl-eintrag input{width:auto;margin:0;padding:0;accent-color:var(--accent)}

/* ---- „Anmeldung & Geräte“ (/mein-konto): Kopfzeile, Abschnitte und Einstellungs-Zeilen der App (design.css), hier nur die Teile der Seite ---- */
.konto-seite main{padding-bottom:calc(40px + var(--safe-b,0px))}
.konto-seite #screen-konto{padding-bottom:8px}
.konto-seite .konto-liste{list-style:none;margin:0;padding:0}
.konto-seite .set-row{min-width:0}
.konto-seite .set-row .si{color:var(--accent-ink,var(--accent))}
.konto-seite .set-row .si svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.konto-seite .konto-ich .si{font-weight:800;font-size:17px}
.konto-seite .konto-mitte{flex:1;min-width:0}
.konto-seite .konto-mitte .st{display:flex;align-items:center;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}
.konto-seite .konto-mitte .st .status-pill{margin-left:0}
.konto-seite .konto-mitte .sd{overflow-wrap:anywhere}
.konto-seite .set-row.diese{border-color:var(--accent-soft2,var(--line))}
.konto-seite .konto-knopf{flex:none}
.konto-seite .set-row.fragt{flex-wrap:wrap}
.konto-seite .konto-frage{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 100%;justify-content:flex-end}
.konto-seite .konto-frage>span{flex:1 1 auto;font-size:13px;font-weight:700;color:var(--text);min-width:0}
.konto-seite .btn.konto-gefahr{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none}
.konto-seite .konto-unten{margin:8px 12px 0;display:flex}
.konto-seite .konto-unten>.btn,.konto-seite .konto-unten>.konto-frage{flex:1}
.konto-seite .konto-breit{width:100%;padding:13px;font-size:14.5px;border-radius:13px}
.konto-seite .konto-meldung{margin:8px 14px 0;font-size:13px;line-height:1.45;color:var(--red)}
.konto-seite .konto-meldung.gut{color:var(--green)}
.konto-seite .konto-text{margin:6px 16px 0;font-size:13px;line-height:1.5;color:var(--muted)}
.konto-seite .konto-text.klein{margin:10px 2px 0;font-size:12px;color:var(--muted2);text-align:center}
.konto-seite .konto-form{display:flex;flex-direction:column;padding:15px}
.konto-seite .konto-form input{display:block;width:100%;padding:12px 14px;border-radius:12px;background:var(--card2);border:1px solid var(--line);color:var(--text);margin:0 0 10px;font-family:inherit}
.konto-seite .konto-form input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
.konto-seite .konto-form .konto-meldung{margin:0 2px 10px}
.konto-seite .btn:disabled{opacity:.6;cursor:default}
.konto-seite .btn:focus-visible,.konto-seite .backbtn:focus-visible{outline:2px solid var(--a11y-ring,var(--accent));outline-offset:2px}
.konto-seite .konto-leer .btn{margin-top:14px}
@media (min-width:1000px){
  /* ohne Seitenleiste: Kopf und Inhalt über die ganze Breite, Inhalt mittig wie die Einstellungen der App */
  #app.konto-seite{grid-template-columns:1fr;grid-template-areas:"kopf" "inhalt"}
  #app.konto-seite>main>.screen.active{max-width:760px;padding:10px 8px 48px}
  /* Kopf über derselben Spalte wie der Inhalt statt am linken Rand: design.css gibt der Seite 1100 px (innen 8 px) – die
     760 px oben greifen dagegen nicht (dortige Regel hat mehr Gewicht) */
  #app.konto-seite>.topbar{padding-left:max(18px,calc((100% - 1084px) / 2));padding-right:max(18px,calc((100% - 1084px) / 2))}
}