/* Anmeldeseite (C1+C3 Schritt 2) nach dem Entwurf c1-2026-10-11 (Bilder 1a bis 1f). InitCon in der InitCon-Farbwelt,
   Kunden neutral mit ihrer Hausfarbe (#268); die Hausfarbe setzt die Seite als <style> hinter diesen Stil. */

@font-face { font-family: "Inter"; src: url("/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* InitCon (…/anmelden, …/anmelden/initcon): Farbwelt wie public/css/02-farbwelt.css (#268, Design-Durchsicht Schritt 2,
   Punkt 1). Hell: Petrol-Knopf, Links Teal. Dunkel: Petrol-Seite, Limette als Knopf mit Petrol-Schrift, Links Mint. */
:root {
  color-scheme: light dark;
  --seite: #F4F7F7; --karte: #FFFFFF; --flaeche-2: #E3EAEA;
  --linie: #E1E7E7; --rand-feld: #7E8188;
  --text: #1B1F23; --leise: #5B6368; --fehler: #B42318; --anbieter: #6B6F76;
  --akzent: #08363A; --akzent-hover: #0E4549; --auf-akzent: #FFFFFF; --akzent-zart: #E4F0EF; --akzent-text: #0F766E; --akzent-symbol: #0F766E; --fokus: #08363A;
  --hauch: 0 1px 2px rgba(8, 54, 58, .05), 0 6px 20px -10px rgba(8, 54, 58, .16);
  --schrift: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --t-meta: 13px; --zh-meta: 20px; --t-text: 15px; --zh-lese: 24px; --t-titel: 28px; --zh-titel: 32px; --knopf: 44px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --seite: #062A2D; --karte: #08363A; --flaeche-2: #0F474B;
    --linie: #1C5358; --rand-feld: #6F9A9E;
    --text: #EEF1F0; --leise: #A9B4B6; --fehler: #FF8A80; --anbieter: #8B9196;
    --akzent: #C8F25A; --akzent-hover: #D8F77E; --auf-akzent: #08363A; --akzent-zart: rgba(200, 242, 90, .12); --akzent-text: #8ED3C9; --akzent-symbol: #C8F25A; --fokus: #FFFFFF;
    --hauch: inset 0 0 0 1px #1C5358;
  }
}
/* Kunden (data-farbwelt="kunde"): neutral, Knöpfe und Fokus in der Hausfarbe (die Seite setzt sie danach als <style>) */
:root[data-farbwelt="kunde"] {
  --seite: #F4F4F5; --karte: #FFFFFF; --flaeche-2: #E3E3E6;
  --linie: #DFDFE2; --rand-feld: #7E8188;
  --text: #1B1F23; --leise: #5C5F66; --fehler: #B42318; --anbieter: #6B6F76;
  --akzent: #08363A; --akzent-hover: #1E494D; --auf-akzent: #FFFFFF; --akzent-zart: #E6F3F4; --akzent-text: #08363A; --akzent-symbol: var(--akzent-text); --fokus: #08363A;
  --hauch: 0 1px 2px rgba(20, 22, 26, .05), 0 6px 20px -10px rgba(20, 22, 26, .16);
}
@media (prefers-color-scheme: dark) {
  :root[data-farbwelt="kunde"] {
    --seite: #121315; --karte: #1A1B1E; --flaeche-2: #2B2C31;
    --linie: #34363B; --rand-feld: #70747C;
    --text: #ECEDEF; --leise: #A3A6AD; --fehler: #FF8A80; --anbieter: #8B9196;
    --akzent: #82AEB2; --akzent-hover: #91BEC2; --auf-akzent: #121315; --akzent-zart: #222E2F; --akzent-text: #82AEB2; --fokus: #82AEB2;
    --hauch: inset 0 0 0 1px #27292D;
  }
}
/* Am Rechner eine Stufe kleiner (#216, wie die Web-App) */
@media (min-width: 1024px) {
  :root { --t-meta: 12px; --zh-meta: 16px; --t-text: 14px; --zh-lese: 20px; --t-titel: 26px; --knopf: 40px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { min-height: 100%; }
body { background: var(--karte); color: var(--text); font: 400 var(--t-text)/var(--zh-lese) var(--schrift);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "cv11", "ss03"; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 6px; }
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i--k { width: 16px; height: 16px; }

/* ---------- Rahmen ---------- */
.anm { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.anm__innen { flex: 1; width: 100%; padding: 24px 16px 24px; padding-top: max(24px, env(safe-area-inset-top)); display: flex; flex-direction: column; }
.anm__marke { display: flex; align-items: center; gap: 10px; min-height: 28px; color: var(--text); }
.anm__initcon { display: block; height: 24px; width: auto; }
.anm__logo { display: block; height: 28px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
.anm__kachel { width: 24px; height: 24px; border-radius: 6px; background: var(--akzent); color: var(--auf-akzent); display: grid; place-items: center;
  font: 600 14px/1 var(--schrift); flex: none; }
.anm__name { font: 600 17px/24px var(--schrift); letter-spacing: -0.01em; }
/* Kunde mit Logo nur für hellen Grund: dunkel der Name statt des Logos (Design-Durchsicht gesamt, 1) */
.anm__name--dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  .anm__name--dunkel { display: block; font: 700 20px/28px var(--schrift); color: var(--text); }
  .anm__name--dunkel + .anm__logo { display: none; }
}

.anm__kopf { margin-top: 72px; }
.anm__kopf--zurueck { margin-top: 56px; }
.anm h1 { font: 600 var(--t-titel)/var(--zh-titel) var(--schrift); letter-spacing: -0.015em; outline: none; }
.anm__kopf--zurueck h1 { margin-top: 16px; }
.anm__kopf--zurueck .passkey-bild + h1 { margin-top: 0; }
.anm__satz { margin-top: 8px; color: var(--leise); max-width: 38em; overflow-wrap: anywhere; }
.anm__satz b { color: var(--text); font-weight: 500; }
.anm__teil { margin-top: 32px; display: grid; gap: 12px; }
.anm__teil--nah { margin-top: 8px; }
.anm__teil--code { margin-top: 24px; }
.anm__abstand { margin-top: 16px; }
.anm__schmal { max-width: 34em; margin-top: 24px; }

.anm__fuss { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 24px 16px; padding-bottom: max(24px, env(safe-area-inset-bottom));
  font-size: var(--t-meta); line-height: var(--zh-meta); color: var(--leise); }
.anm__anbieter { flex-basis: 100%; font-size: 12px; line-height: 16px; color: var(--anbieter); }
@media (min-width: 861px) { .anm__anbieter { flex-basis: auto; margin-left: auto; } }

/* ---------- Teile ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--knopf); padding: 0 16px;
  border-radius: 10px; font: 500 15px/1.2 var(--schrift); text-align: center; transition: background-color .15s ease, box-shadow .15s ease; }
@media (min-width: 1024px) { .knopf { font-size: 14px; } }
.knopf--haupt { background: var(--akzent); color: var(--auf-akzent); }
.knopf--haupt:hover:not(:disabled) { background: var(--akzent-hover); }
.knopf--haupt:disabled { background: var(--flaeche-2); color: var(--leise); cursor: default; }
.knopf--rand { box-shadow: inset 0 0 0 1px var(--linie); background: var(--karte); color: var(--text); }
.knopf--rand:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--rand-feld); }
.knopf--leise { width: auto; min-height: 36px; padding: 0 4px; margin: 4px 0 0 -4px; align-self: flex-start; color: var(--akzent-text); }
.knopf--leise:hover { text-decoration: underline; text-underline-offset: 3px; }
.knopf[aria-busy="true"] { cursor: progress; opacity: .72; }

.oder { display: flex; align-items: center; gap: 12px; color: var(--leise); font-size: var(--t-meta); line-height: var(--zh-meta); margin: 24px 0 8px; }
.oder::before, .oder::after { content: ""; flex: 1; height: 1px; background: var(--linie); }

.feld { display: grid; gap: 6px; }
.feld label { font: 500 var(--t-meta)/var(--zh-meta) var(--schrift); }
.feld input { height: var(--knopf); width: 100%; border: 1px solid var(--rand-feld); border-radius: 10px; background: var(--karte); color: var(--text);
  padding: 0 12px; font: 400 16px/1 var(--schrift); }
.feld input::placeholder { color: var(--leise); opacity: 1; }
.feld input:focus-visible { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); border-radius: 10px; }
.feld input[aria-invalid="true"] { border-color: var(--fehler); }
.leiser { color: var(--leise); font-size: var(--t-meta); line-height: var(--zh-meta); }

.zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-left: -4px; padding: 0 4px 0 0;
  color: var(--akzent-text); font: 500 15px/20px var(--schrift); }

/* Sechs Kästen; darüber liegt ein echtes Eingabefeld (Einfügen, Vorschlag des Handys, Bildschirmleser) mit unsichtbarer Schrift */
.code { position: relative; display: grid; grid-template-columns: repeat(3, 1fr) 0 repeat(3, 1fr); gap: 8px; margin-top: 32px; max-width: 360px; }
.code span { height: 56px; border: 1px solid var(--rand-feld); border-radius: 10px; display: grid; place-items: center;
  font: 600 24px/1 var(--schrift); font-variant-numeric: tabular-nums; background: var(--karte); transition: border-color .12s ease; }
/* Lücke nach dem dritten Kasten: leere Spalte 4, alle Kästen gleich breit (Design-Durchsicht Schritt 2, Punkt 3) */
.code span:nth-of-type(4) { grid-column-start: 5; }
.code input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; background: transparent; padding: 0;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font: 16px/1 var(--schrift); letter-spacing: 40px; outline: none; }
.code input::selection { background: transparent; }
.code span.fokus { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent); }
.code span.fokus:empty::after { content: ""; width: 2px; height: 26px; background: var(--akzent); animation: blinken 1.1s steps(1) infinite; }
.code--fehler span { border-color: var(--fehler); }
.code--fehler span.fokus { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler); }
@keyframes blinken { 50% { opacity: 0; } }

.hinweis-fehler { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; color: var(--text); }
.hinweis-fehler svg { color: var(--fehler); margin-top: 4px; }
.anm__teil .hinweis-fehler { margin-top: 0; }
.erfolg { display: inline-flex; gap: 8px; align-items: center; color: var(--leise); font-size: var(--t-meta); line-height: var(--zh-meta); }
.erfolg svg { color: var(--akzent-text); }
.passkey-bild { width: 56px; height: 56px; border-radius: 14px; background: var(--akzent-zart); color: var(--akzent-symbol);
  display: grid; place-items: center; margin: 24px 0; }
.passkey-bild svg { width: 28px; height: 28px; stroke-width: 1.8; }

.auswahl { list-style: none; margin-top: 32px; display: grid; gap: 12px; }
.auswahl .knopf { justify-content: space-between; text-align: left; }
.auswahl .knopf svg { transform: rotate(180deg); color: var(--leise); }

.schritt { animation: herein .22s ease-out; }
@keyframes herein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .schritt, .code span.fokus:empty::after { animation: none; } .knopf, .code span { transition: none; } }

/* ---------- Am Rechner: Karte auf grauem Grund ---------- */
@media (min-width: 861px) {
  body { background: var(--seite); }
  .anm { align-items: center; justify-content: flex-start; padding: max(48px, 16vh) 16px 48px; }
  .anm__innen { flex: none; width: 440px; padding: 40px; background: var(--karte); border-radius: 16px; box-shadow: var(--hauch); }
  .anm__kopf, .anm__kopf--zurueck { margin-top: 48px; }
  .anm__fuss { width: 440px; padding: 16px 4px 0; }
}