/* Konto und Authenticator: gemeinsame Farben, Schriften und Abstaende der Konsole. */
:root {
  --sf-max: 72rem;
  --sf-form-max: 34rem;
  --sf-text-max: 65ch;
  --sf-symbol: 3rem;
  --sf-linie: 1px;
  --sf-fokus: 3px;
  --sf-qr-papier: #fff;
}
.sf-zugang .zugang, .sf-lesen .zugang { width: min(var(--sf-max), 100%); border-radius: var(--k-radius-4); }
.sf-zugang .zugang-marke, .sf-lesen .zugang-marke { background: transparent; gap: var(--k-abstand-6); }
.sf-zugang .zugang-flaeche, .sf-lesen .zugang-flaeche { background: transparent; }
.sf-zugang .zugang-karte, .sf-lesen .zugang-karte { max-width: var(--sf-form-max); gap: var(--k-abstand-4); }
.sf-eyebrow { display: inline-flex; align-items: center; gap: var(--k-abstand-2); color: var(--k-text-leise); font-size: var(--k-schrift-2); font-weight: 650; }
.sf-botschaft { gap: var(--k-abstand-5); }
.sf-ablauf { display: grid; gap: var(--k-abstand-5); list-style: none; padding: 0; margin: var(--k-abstand-4) 0; }
.sf-ablauf li { display: flex; align-items: flex-start; gap: var(--k-abstand-3); }
.sf-ablauf li > div { display: grid; gap: var(--k-abstand-1); }
.sf-ablauf strong { color: var(--k-text); font-size: var(--k-schrift-3); }
.sf-ablauf li > div > span { color: var(--k-text-leise); font-size: var(--k-schrift-2); }
.sf-nummer { display: grid; place-items: center; flex-shrink: 0; width: var(--k-abstand-6); height: var(--k-abstand-6); border-radius: var(--k-radius-5); background: var(--k-flaeche-3); color: var(--k-text-leise); font-size: var(--k-schrift-3); font-weight: 700; }
.sf-ablauf [aria-current="step"] .sf-nummer { background: var(--k-akzent); color: var(--k-auf-akzent); }
.sf-ablauf-erledigt .sf-nummer { background: var(--k-erfolg-weich); color: var(--k-erfolg); }
.sf-schutzsatz { display: flex; gap: var(--k-abstand-2); align-items: flex-start; }
.sf-schutzsatz svg { flex-shrink: 0; margin-top: var(--k-abstand-1); }
.sf-kontozeile { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--k-abstand-2); }
.sf-konto-adresse { overflow-wrap: anywhere; color: var(--k-text-leise); font-size: var(--k-schrift-2); }
.sf-qr-rahmen { display: grid; gap: var(--k-abstand-3); padding: var(--k-abstand-4); border: var(--sf-linie) solid var(--k-linie); border-radius: var(--k-radius-4); background: var(--k-flaeche-2); }
.sf-qr-rahmen > span { display: flex; align-items: center; justify-content: center; gap: var(--k-abstand-2); color: var(--k-text-leise); font-size: var(--k-schrift-2); text-align: center; }
.sf-qr-rahmen .zf-qr { background: var(--sf-qr-papier); }
.sf-seite .zf-qr { width: min(100%, 15.5rem); margin-inline: auto; }
.sf-seite .zf-qr svg { display: block; width: 100%; height: auto; }
.sf-seite .zf-geheimnis { display: block; padding: var(--k-abstand-3); border-radius: var(--k-radius-2); background: var(--k-flaeche-2); color: var(--k-text); font-family: var(--k-schrift-mono); overflow-wrap: anywhere; user-select: all; }
.sf-unten { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--k-abstand-3); padding-top: var(--k-abstand-3); border-top: var(--sf-linie) solid var(--k-linie); }
.sf-unten > a { display: inline-flex; align-items: center; gap: var(--k-abstand-2); color: var(--k-text-leise); font-size: var(--k-schrift-2); }
.sf-seite { display: grid; gap: var(--k-abstand-5); max-width: var(--sf-max); }
.sf-status { display: flex; align-items: flex-start; gap: var(--k-abstand-4); padding: var(--k-abstand-5); background: var(--k-flaeche); border: var(--sf-linie) solid var(--k-linie); border-radius: var(--k-radius-4); }
.sf-status-zeichen { display: grid; place-items: center; width: var(--sf-symbol); height: var(--sf-symbol); flex-shrink: 0; border-radius: var(--k-radius-3); background: var(--k-erfolg-weich); color: var(--k-erfolg); }
.sf-status h2, .sf-karte h2, .sf-hilfe h2 { margin: 0; color: var(--k-text); font-size: var(--k-schrift-5); font-weight: 700; line-height: 1.3; }
.sf-status p, .sf-karte p, .sf-hilfe p { margin: 0; color: var(--k-text-leise); line-height: 1.65; max-width: var(--sf-text-max); }
.sf-status-inhalt { display: grid; gap: var(--k-abstand-2); min-width: 0; }
.sf-status-konto { overflow-wrap: anywhere; font-size: var(--k-schrift-2); }
.sf-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--k-abstand-5); }
.sf-karte { display: grid; gap: var(--k-abstand-4); align-content: start; min-width: 0; padding: var(--k-abstand-5); border: var(--sf-linie) solid var(--k-linie); border-radius: var(--k-radius-4); background: var(--k-flaeche); }
.sf-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--k-abstand-3); flex-wrap: wrap; }
.sf-karte-kopf > svg { color: var(--k-text-leise); }
.sf-stand { display: inline-flex; align-items: center; gap: var(--k-abstand-2); color: var(--k-erfolg); background: var(--k-erfolg-weich); padding: var(--k-abstand-1) var(--k-abstand-3); border-radius: var(--k-radius-5); font-size: var(--k-schrift-2); font-weight: 650; }
.sf-stand-warn { color: var(--k-warnung); background: var(--k-warnung-weich); }
.sf-metadaten { display: flex; flex-wrap: wrap; gap: var(--k-abstand-5); margin: 0; }
.sf-metadaten > div { display: grid; gap: var(--k-abstand-1); }
.sf-metadaten dt { color: var(--k-text-leise); font-size: var(--k-schrift-2); }
.sf-metadaten dd { margin: 0; color: var(--k-text); font-size: var(--k-schrift-3); font-weight: 650; }
.sf-details { min-width: 0; border-top: var(--sf-linie) solid var(--k-linie); padding-top: var(--k-abstand-3); }
.sf-details > summary { color: var(--k-text); cursor: pointer; padding: var(--k-abstand-3) 0; font-size: var(--k-schrift-3); font-weight: 650; }
.sf-form { display: grid; gap: var(--k-abstand-4); margin-top: var(--k-abstand-3); }
.sf-form .feld { display: grid; gap: var(--k-abstand-2); }
.sf-form :is(input:not([type="hidden"],[type="checkbox"]),textarea) { width: 100%; min-width: 0; box-sizing: border-box; border: var(--sf-linie) solid var(--k-linie); border-radius: var(--k-radius-2); padding: var(--k-abstand-3); background: var(--k-flaeche-2); color: var(--k-text); font: inherit; }
.sf-form label { color: var(--k-text); font-size: var(--k-schrift-3); }
.sf-form .sf-check { display: flex; align-items: flex-start; gap: var(--k-abstand-3); line-height: 1.5; }
.sf-form .sf-check input { margin-top: var(--k-abstand-1); }
.sf-form .knopf { justify-self: start; }
.sf-seite .knopf.gefahr { color: var(--k-fehler); background: var(--k-fehler-weich); border-color: var(--k-fehler); }
.sf-merktext { font-size: var(--k-schrift-2); color: var(--k-text-leise); line-height: 1.6; }
.sf-codefeld { font-family: var(--k-schrift-mono); letter-spacing: .12em; }
.sf-code-liste { list-style-position: inside; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--k-abstand-3); margin: 0; padding: var(--k-abstand-4); border-radius: var(--k-radius-3); background: var(--k-flaeche-2); }
.sf-code-liste code { font-family: var(--k-schrift-mono); font-size: var(--k-schrift-3); white-space: nowrap; }
.sf-aktionen { display: flex; align-items: center; flex-wrap: wrap; gap: var(--k-abstand-3); }
.sf-hilfe { display: grid; gap: var(--k-abstand-6); }
.sf-hilfe section { display: grid; gap: var(--k-abstand-3); scroll-margin-top: var(--k-abstand-7); }
.sf-hilfe ol { display: grid; gap: var(--k-abstand-3); margin: 0; padding-left: var(--k-abstand-5); color: var(--k-text); line-height: 1.65; }
.sf-hilfe nav { display: flex; flex-wrap: wrap; gap: var(--k-abstand-2) var(--k-abstand-4); }
.sf-hilfe nav a { font-size: var(--k-schrift-2); }
.sf-hilfe .sf-details { margin-top: 0; }
.sf-hilfe .sf-details p { padding-bottom: var(--k-abstand-3); }
.sf-hilfe-kasten { display: grid; gap: var(--k-abstand-3); border-radius: var(--k-radius-3); padding: var(--k-abstand-4); background: var(--k-flaeche-2); }
.sf-tabelle { width: 100%; border-collapse: collapse; }
.sf-tabelle :is(th,td) { padding: var(--k-abstand-3) var(--k-abstand-2); text-align: left; border-bottom: var(--sf-linie) solid var(--k-linie); vertical-align: top; }
.sf-tabelle th { color: var(--k-text-leise); font-size: var(--k-schrift-2); font-weight: 650; }
.sf-person { display: grid; gap: var(--k-abstand-1); }
.sf-person span { color: var(--k-text-leise); font-size: var(--k-schrift-2); overflow-wrap: anywhere; }
.sf-suche { display: flex; gap: var(--k-abstand-3); align-items: end; flex-wrap: wrap; }
.sf-suche .feld { flex: 1; }
.sf-seite :is(a,button,input,textarea,summary):focus-visible, .sf-zugang :is(a,button,summary):focus-visible, .sf-lesen :is(a,button,summary):focus-visible { outline: var(--sf-fokus) solid var(--k-akzent-text); outline-offset: var(--sf-fokus); }
/* Die generischen Eingabestile setzen outline:none auf :focus; Tastaturfokus bleibt hier deckend sichtbar. */
.k-zugang.sf-zugang .zugang-karte :is(input,textarea,select):focus-visible, body .sf-seite :is(input,textarea,select):focus-visible { outline: var(--sf-fokus) solid var(--k-akzent-text); outline-offset: var(--sf-fokus); box-shadow: none; }
@media (max-width: 54rem) {
  .sf-zugang .sf-botschaft > h2, .sf-zugang .sf-botschaft > p, .sf-zugang .sf-ablauf, .sf-lesen .sf-botschaft { display: none; }
  .sf-zugang .zugang-marke, .sf-lesen .zugang-marke { padding-bottom: var(--k-abstand-3); }
  .sf-raster { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 34rem) {
  .sf-status, .sf-karte { padding: var(--k-abstand-4); }
  .sf-tabelle thead { display: none; }
  .sf-tabelle :is(tbody,tr,td) { display: block; }
  .sf-tabelle td { border: 0; padding: var(--k-abstand-2) 0; }
  .sf-tabelle tr { border-bottom: var(--sf-linie) solid var(--k-linie); padding: var(--k-abstand-3) 0; }
  .sf-code-liste { grid-template-columns: minmax(0,1fr); }
}
@media print {
  .sf-seite .sf-form, .sf-seite .sf-details, .sf-seite .sf-aktionen, .sf-seite .sf-status { display: none; }
  .sf-code-liste { break-inside: avoid; }
}