/* OpenZoe v2 · login.css — Anmeldung und Ersteinrichtung (public/login.html)
   Eigenständig: braucht nur 00-tokens.css und 10-basis.css. Farben ausschließlich
   aus den Tokens (Mischungen über color-mix). Zweigeteilte Karte ab 880 px,
   darunter nur das Formular mit Logo in der Karte. */

@layer seiten {

  /* ── Hilfen ─────────────────────────────────────────────── */
  .sym { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .sym.klein { width: 14px; height: 14px; }
  .sym.gross { width: 22px; height: 22px; }
  .nur-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .leise { color: var(--t-leise); }
  .mono { font-family: var(--schrift-mono); }

  .logo-dunkel { display: none; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .logo-hell { display: none; }
    :root:not([data-theme="light"]) .logo-dunkel { display: block; }
  }
  :root[data-theme="dark"] .logo-hell { display: none; }
  :root[data-theme="dark"] .logo-dunkel { display: block; }

  /* ── Bühne ──────────────────────────────────────────────── */
  body {
    background:
      radial-gradient(1200px 600px at 12% -10%, color-mix(in oklab, var(--akzent) 13%, transparent), transparent 60%),
      radial-gradient(900px 520px at 110% 110%, color-mix(in oklab, var(--aktion) 9%, transparent), transparent 60%),
      var(--f-grund);
    background-attachment: fixed;
  }
  /* Alles passt immer in den Bildschirm: Bühne = Fensterhöhe, die Karte schrumpft mit,
     nur das Formular darf bei sehr kleinen Fenstern innen scrollen. */
  html, body { height: 100%; overflow: hidden; }
  .buehne {
    height: 100dvh;
    display: grid; place-items: center;
    padding: clamp(12px, 3vh, 40px) clamp(12px, 3vw, 40px);
  }
  :root[data-quelle="vorschau"] .buehne { padding-bottom: 72px; }
  :root[data-testbetrieb="1"] .buehne { padding-top: 56px; }

  .karte {
    width: 100%; max-width: 1080px; height: min(700px, 100%); min-height: 0;
    display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    background: var(--f-flaeche);
    border: 1px solid var(--linie);
    border-radius: var(--r-2xl);
    box-shadow: var(--schatten-3);
    overflow: clip;
    animation: karte-rein 520ms var(--kurve) both;
  }
  @keyframes karte-rein { from { opacity: 0; transform: translateY(10px) scale(.992); } }

  /* ── Linke Fläche ───────────────────────────────────────── */
  .marke-flaeche {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; gap: var(--a-6);
    padding: var(--a-10);
    background:
      linear-gradient(160deg, color-mix(in oklab, var(--akzent) 7%, transparent), transparent 55%),
      var(--f-leiste);
    border-right: 1px solid var(--linie);
    color: var(--t-haupt);
    overflow: clip;
  }
  .marke-kopf { display: flex; justify-content: center; padding-top: var(--a-2); }
  .marke-kopf .logo { height: 54px; width: auto; }
  /* Kreise und Punkte füllen die ganze linke Fläche, werden von der Karte
     abgeschnitten und laufen auch unter der Schrift durch. */
  .kunst {
    position: absolute; z-index: -1; left: 50%; top: 34%;
    width: max(190%, 900px); max-width: none; aspect-ratio: 1; height: auto;
    translate: -50% -50%;
    overflow: visible; color: var(--f-flaeche);
    pointer-events: none;
  }
  .kunst-raster { opacity: .22; }
  .kunst-kern-flaeche { fill: var(--f-flaeche); }
  .kunst-knoten { color: var(--akzent); }
  /* Das Zeichen in der Mitte bleibt klein, nur Kreise und Punkte wachsen über die Fläche */
  .kunst-kern { transform-origin: 260px 260px; transform-box: view-box; transform: scale(.5); }
  .kunst-bahn { transform-origin: 260px 260px; transform-box: view-box; }
  .kunst-bahn-1 { animation: kreisen 64s linear infinite; }
  .kunst-bahn-2 { animation: kreisen 96s linear infinite reverse; }
  .kunst-bahn-3 { animation: kreisen 140s linear infinite; }
  .kunst-ringe circle { transform-origin: 260px 260px; transform-box: view-box; animation: atmen 9s var(--kurve) infinite alternate; }
  .kunst-ringe circle:nth-child(2) { animation-delay: -3s; }
  .kunst-ringe circle:nth-child(3) { animation-delay: -6s; }
  .kunst-speichen path { stroke-dasharray: 4 220; animation: puls-strahl 5.5s linear infinite; }
  .kunst-speichen path:nth-child(2) { animation-delay: -1.8s; }
  .kunst-speichen path:nth-child(3) { animation-delay: -3.6s; }
  @keyframes kreisen { to { transform: rotate(360deg); } }
  @keyframes atmen { to { transform: scale(1.025); } }
  @keyframes puls-strahl { from { stroke-dashoffset: 224; } to { stroke-dashoffset: 0; } }

  .marke-text { margin-top: auto; display: grid; gap: var(--a-3); justify-items: center; text-align: center; max-width: 420px; margin-inline: auto; }
  .marke-punkte { text-align: left; }
  .marke-fuss { justify-content: center; }
  .marke-zeile { font-size: var(--gr-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--aktion); }
  .marke-titel { font: 700 clamp(1.6rem, 2.4vw, 2.05rem)/1.12 var(--schrift-titel); letter-spacing: -0.02em; }
  .marke-punkte { list-style: none; margin: var(--a-2) 0 0; padding: 0; display: grid; gap: var(--a-3); color: var(--t-zweit); }
  .marke-punkte li { display: grid; grid-template-columns: 28px 1fr; gap: var(--a-3); align-items: start; }
  .marke-punkte .punkt-symbol {
    width: 28px; height: 28px; border-radius: var(--r-m); display: grid; place-items: center;
    background: color-mix(in oklab, var(--akzent) 14%, var(--f-flaeche)); color: var(--aktion);
    border: 1px solid color-mix(in oklab, var(--akzent) 30%, transparent);
  }
  .marke-punkte .sym { width: 15px; height: 15px; }
  .marke-punkte b { display: block; color: var(--t-haupt); font-weight: 600; }
  .marke-fuss { font-size: var(--gr-xs); color: var(--t-leise); display: flex; gap: var(--a-2); align-items: center; }

  /* ── Rechte Fläche ──────────────────────────────────────── */
  .form-flaeche {
    display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--a-6) clamp(24px, 5vw, 64px) var(--a-4);
    min-width: 0;
  }
  .form-kopf { display: flex; align-items: center; justify-content: flex-end; gap: var(--a-3); min-height: 32px; }
  .form-logo { display: none; margin-right: auto; }
  .form-logo .logo { height: 28px; width: auto; }
  .instanz {
    display: inline-flex; align-items: center; gap: var(--a-2);
    font-size: var(--gr-xs); color: var(--t-zweit);
    padding: 4px 10px 4px 8px; border-radius: var(--r-voll);
    border: 1px solid var(--linie); background: var(--f-flaeche-2);
    max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .instanz::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 18%, transparent); }
  .instanz[data-stand="aus"]::before { background: var(--t-leise); box-shadow: none; }
  .instanz[data-stand="warn"]::before { background: var(--warn); }

  .ansicht-rahmen { flex: 1; display: grid; align-items: center; padding: var(--a-2) 0; }
  .ansicht {
    width: 100%; max-width: 416px; margin-inline: auto;
    display: grid; gap: var(--a-5);
    animation: ansicht-rein var(--d-lang) var(--kurve) both;
  }
  @keyframes ansicht-rein { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }
  .ansicht-laden { justify-items: center; gap: var(--a-4); padding: var(--a-12) 0; }

  .form-fuss {
    display: flex; align-items: center; justify-content: space-between; gap: var(--a-3);
    padding-top: var(--a-4); border-top: 1px solid var(--linie);
    font-size: var(--gr-xs); color: var(--t-leise);
  }
  .fuss-sicher { display: inline-flex; align-items: center; gap: 6px; }
  .fuss-sicher .sym { width: 13px; height: 13px; }

  /* ── Kopf einer Ansicht ─────────────────────────────────── */
  .ansicht-kopf { display: grid; gap: var(--a-2); }
  .kopf-symbol {
    width: 44px; height: 44px; border-radius: var(--r-l); display: grid; place-items: center;
    background: var(--aktion-flaeche); color: var(--aktion);
    border: 1px solid color-mix(in oklab, var(--aktion) 18%, transparent);
    margin-bottom: var(--a-2);
  }
  .kopf-symbol .sym { width: 22px; height: 22px; }
  .kopf-symbol[data-art="warn"] { background: var(--warn-flaeche); color: var(--warn); border-color: color-mix(in oklab, var(--warn) 22%, transparent); }
  .kopf-symbol[data-art="fehler"] { background: var(--fehler-flaeche); color: var(--fehler); border-color: color-mix(in oklab, var(--fehler) 22%, transparent); }
  .kopf-symbol[data-art="info"] { background: var(--info-flaeche); color: var(--info); border-color: color-mix(in oklab, var(--info) 22%, transparent); }
  .kopf-symbol[data-art="ok"] { background: var(--ok-flaeche); color: var(--ok); border-color: color-mix(in oklab, var(--ok) 22%, transparent); }
  .titel { font: 700 var(--gr-2xl)/1.15 var(--schrift-titel); letter-spacing: -0.02em; outline: none; }
  .titel:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; }
  .unter { color: var(--t-zweit); font-size: var(--gr-m); line-height: 1.55; }
  .unter b, .unter strong { color: var(--t-haupt); font-weight: 600; }

  /* ── Schritte der Einrichtung ───────────────────────────── */
  .schritte { list-style: none; margin: 0 0 var(--a-1); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: s; }
  .schritte li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: var(--gr-xs); color: var(--t-leise); text-align: center; counter-increment: s; }
  .schritte li::before {
    content: ""; position: absolute; top: 11px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px;
    border-radius: 2px; background: var(--linie);
  }
  .schritte li:first-child::before { display: none; }
  .schritte li[data-stand="fertig"]::before, .schritte li[data-stand="aktiv"]::before { background: color-mix(in oklab, var(--aktion) 60%, var(--linie)); }
  .schritt-punkt {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid var(--linie-stark); background: var(--f-flaeche);
    font-size: 11px; font-weight: 600; color: var(--t-leise);
    transition: background var(--d-mittel) var(--kurve), border-color var(--d-mittel) var(--kurve);
  }
  .schritt-punkt::after { content: counter(s); }
  .schritte .sym { width: 13px; height: 13px; stroke-width: 2.5; }
  .schritte li[data-stand="fertig"] .schritt-punkt { background: var(--aktion); border-color: var(--aktion); color: var(--auf-aktion); }
  .schritte li[data-stand="fertig"] .schritt-punkt::after,
  .schritte li[data-stand="warn"] .schritt-punkt::after { content: none; }
  .schritte li[data-stand="aktiv"] { color: var(--t-haupt); font-weight: 500; }
  .schritte li[data-stand="aktiv"] .schritt-punkt { border-color: var(--aktion); color: var(--aktion); box-shadow: 0 0 0 4px color-mix(in oklab, var(--akzent) 22%, transparent); }
  .schritte li[data-stand="warn"] { color: var(--warn); font-weight: 500; }
  .schritte li[data-stand="warn"] .schritt-punkt { border-color: var(--warn); background: var(--warn-flaeche); color: var(--warn); }

  /* ── Frist (Countdown mit Ring) ─────────────────────────── */
  .frist {
    justify-self: start;
    display: inline-flex; align-items: center; gap: var(--a-2);
    padding: 5px 12px 5px 6px; border-radius: var(--r-voll);
    background: var(--f-flaeche-2); border: 1px solid var(--linie);
    font-size: var(--gr-s); color: var(--t-zweit);
    font-variant-numeric: tabular-nums;
  }
  .frist b { color: var(--t-haupt); font-weight: 600; }
  .frist-ring { width: 20px; height: 20px; rotate: -90deg; }
  .frist-ring circle { fill: none; stroke-width: 3; }
  .frist-ring .bahn { stroke: var(--linie); }
  .frist-ring .rest { stroke: var(--aktion); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
  .frist[data-knapp] { background: var(--warn-flaeche); border-color: color-mix(in oklab, var(--warn) 25%, transparent); }
  .frist[data-knapp] .rest { stroke: var(--warn); }

  .marke-chip {
    justify-self: start; display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--gr-xs); font-weight: 500; color: var(--t-zweit);
    padding: 3px 10px; border-radius: var(--r-voll); background: var(--f-flaeche-2); border: 1px solid var(--linie);
  }
  .marke-chip .sym { width: 13px; height: 13px; }

  /* ── Knöpfe ─────────────────────────────────────────────── */
  .knopf {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 44px; padding: 0 var(--a-4);
    border-radius: var(--r-l); border: 1px solid transparent;
    font-weight: 600; font-size: var(--gr-m); letter-spacing: -0.005em;
    transition: background var(--d-schnell) var(--kurve), border-color var(--d-schnell) var(--kurve), transform var(--d-schnell) var(--kurve), box-shadow var(--d-mittel) var(--kurve);
  }
  a.knopf { text-decoration: none; }
  .erfolg .schritte { justify-self: stretch; }
  .knopf:active:not(:disabled) { transform: translateY(1px) scale(.995); }
  .knopf:disabled { cursor: default; }
  .knopf-primaer {
    background: var(--aktion); color: var(--auf-aktion);
    box-shadow: inset 0 1px 0 color-mix(in oklab, white 18%, transparent), 0 1px 2px var(--schatten-farbe), 0 6px 18px color-mix(in oklab, var(--aktion) 22%, transparent);
  }
  .knopf-primaer:hover:not(:disabled) { background: var(--aktion-hover); }
  .knopf-gross { min-height: 52px; font-size: var(--gr-l); border-radius: var(--r-l); }
  .knopf-gross .sym { width: 22px; height: 22px; }
  .knopf-zweit { background: var(--f-flaeche); color: var(--t-haupt); border-color: var(--linie-stark); box-shadow: var(--schatten-1); }
  .knopf-zweit:hover:not(:disabled) { background: var(--f-flaeche-hover); border-color: var(--rahmen-bedienung); }
  .knopf-zweit .sym { color: var(--t-zweit); }
  .knopf[aria-busy="true"] { cursor: progress; }
  .knopf[aria-busy="true"] .sym { animation: atmen-sym 1.4s var(--kurve) infinite alternate; }
  @keyframes atmen-sym { from { opacity: .45; } }
  .knopf .knopf-kreisel { width: 18px; height: 18px; border-width: 2px; }

  .textknopf {
    background: none; border: 0; padding: 4px 2px; color: var(--aktion); font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-s);
    text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--aktion) 35%, transparent); text-underline-offset: 3px;
  }
  .textknopf:hover { color: var(--aktion-hover); text-decoration-color: currentColor; }
  .textknopf .sym { width: 15px; height: 15px; }
  .knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--a-3); align-items: center; }
  .knopf-reihe .knopf { width: auto; flex: 1 1 auto; }
  .zeile-zentriert { display: flex; justify-content: center; gap: var(--a-4); flex-wrap: wrap; }

  .kreisel {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2.5px solid color-mix(in oklab, var(--akzent) 22%, transparent);
    border-top-color: var(--akzent);
    animation: drehen .8s linear infinite;
    display: inline-block;
  }
  @keyframes drehen { to { transform: rotate(360deg); } }

  .trenner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--a-3); color: var(--t-leise); font-size: var(--gr-xs); }
  .trenner::before, .trenner::after { content: ""; height: 1px; background: var(--linie); }

  .hinweis-zeile { font-size: var(--gr-s); color: var(--t-leise); text-align: center; line-height: 1.5; }
  .hinweis-zeile b { color: var(--t-zweit); font-weight: 500; }

  /* ── Felder ─────────────────────────────────────────────── */
  .formular { display: grid; gap: var(--a-4); }
  .feld { display: grid; gap: 6px; }
  .feld label { font-size: var(--gr-s); font-weight: 500; color: var(--t-haupt); }
  .feld .optional { color: var(--t-leise); font-weight: 400; }
  .feld input {
    height: 44px; padding: 0 var(--a-3); border-radius: var(--r-m);
    border: 1px solid var(--rahmen-bedienung); background: var(--f-flaeche);
    color: var(--t-haupt); font-size: var(--gr-l);
    transition: border-color var(--d-schnell) var(--kurve), box-shadow var(--d-schnell) var(--kurve);
  }
  .feld input::placeholder { color: var(--t-leise); }
  .feld input:hover { border-color: var(--t-zweit); }
  .feld input:focus-visible { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--akzent) 30%, transparent); }
  .feld input[aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 3px color-mix(in oklab, var(--fehler) 16%, transparent); }
  .feld-hilfe { font-size: var(--gr-xs); color: var(--t-leise); }
  .feld-fehler { font-size: var(--gr-s); color: var(--fehler); display: flex; gap: 6px; align-items: flex-start; }
  .feld-fehler .sym { width: 15px; height: 15px; margin-top: 2px; }

  /* ── Meldungen: was · warum · was tun ───────────────────── */
  .meldung {
    display: grid; grid-template-columns: 20px 1fr; gap: 4px var(--a-3);
    padding: var(--a-3) var(--a-4); border-radius: var(--r-l);
    border: 1px solid var(--linie); background: var(--f-flaeche-2);
    font-size: var(--gr-s); line-height: 1.5;
  }
  .meldung > .sym { width: 18px; height: 18px; margin-top: 1px; color: var(--t-zweit); }
  .meldung > div { display: grid; gap: 4px; min-width: 0; }
  .meldung-titel { font-weight: 600; color: var(--t-haupt); font-size: var(--gr-m); }
  .meldung-warum { color: var(--t-zweit); }
  .meldung-tun { color: var(--t-haupt); }
  .meldung[data-art="info"] { background: var(--info-flaeche); border-color: color-mix(in oklab, var(--info) 22%, transparent); }
  .meldung[data-art="info"] > .sym { color: var(--info); }
  .meldung[data-art="warn"] { background: var(--warn-flaeche); border-color: color-mix(in oklab, var(--warn) 25%, transparent); }
  .meldung[data-art="warn"] > .sym { color: var(--warn); }
  .meldung[data-art="fehler"] { background: var(--fehler-flaeche); border-color: color-mix(in oklab, var(--fehler) 28%, transparent); }
  .meldung[data-art="fehler"] > .sym { color: var(--fehler); }
  .meldung[data-art="ok"] { background: var(--ok-flaeche); border-color: color-mix(in oklab, var(--ok) 25%, transparent); }
  .meldung[data-art="ok"] > .sym { color: var(--ok); }
  .meldung .knopf-reihe { margin-top: var(--a-2); }
  .meldung .knopf { min-height: 36px; font-size: var(--gr-s); }

  /* ── Anleitung: Ordner + Befehl + Kopieren (ruhig, nie rot) ── */
  .anleitung { display: grid; gap: var(--a-3); }
  .anleitung-titel { font-size: var(--gr-s); font-weight: 600; color: var(--t-haupt); display: flex; align-items: center; gap: var(--a-2); }
  .anleitung-titel .sym { width: 16px; height: 16px; color: var(--t-leise); }
  .anleitung-text { font-size: var(--gr-s); color: var(--t-zweit); }
  .reiter { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-m); background: var(--f-flaeche-2); border: 1px solid var(--linie); justify-self: start; }
  .reiter button {
    border: 0; background: none; padding: 5px 12px; border-radius: 6px; font-size: var(--gr-xs); font-weight: 500; color: var(--t-zweit);
  }
  .reiter button[aria-selected="true"] { background: var(--f-flaeche); color: var(--t-haupt); box-shadow: var(--schatten-1); }
  .ordner {
    display: flex; align-items: center; gap: var(--a-2); font-size: var(--gr-xs); color: var(--t-zweit); min-width: 0;
  }
  .ordner .sym { width: 14px; height: 14px; color: var(--t-leise); }
  .ordner code { color: var(--t-haupt); overflow-wrap: anywhere; font-size: 0.95em; }
  .code {
    border-radius: var(--r-l); border: 1px solid var(--linie); overflow: hidden;
    background: color-mix(in oklab, var(--f-leiste) 70%, var(--f-flaeche));
  }
  .code-kopf {
    display: flex; align-items: center; justify-content: space-between; gap: var(--a-2);
    padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--linie);
    font-size: var(--gr-xs); color: var(--t-leise);
  }
  .code-kopf .sym { width: 13px; height: 13px; }
  .code-kopf > span { display: inline-flex; align-items: center; gap: 6px; }
  .code pre {
    margin: 0; padding: 12px 14px; font-size: 12px; line-height: 1.7; color: var(--t-haupt);
    white-space: pre; overflow-x: auto; tab-size: 2;
  }
  .code-prompt { color: var(--t-leise); user-select: none; }
  .code-fort { color: var(--t-leise); user-select: none; }
  .kopieren {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
    border-radius: var(--r-m); border: 1px solid var(--linie-stark); background: var(--f-flaeche);
    font-size: var(--gr-xs); font-weight: 500; color: var(--t-haupt);
    transition: background var(--d-schnell) var(--kurve), color var(--d-schnell) var(--kurve);
  }
  .kopieren:hover { background: var(--f-flaeche-hover); }
  .kopieren .sym { width: 13px; height: 13px; }
  .kopieren[data-kopiert] { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); background: var(--ok-flaeche); }

  /* Aufklappbares */
  .klapp { border-top: 1px solid var(--linie); padding-top: var(--a-3); }
  .klapp > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--a-2);
    font-size: var(--gr-s); color: var(--t-zweit); font-weight: 500; padding: 4px 0; border-radius: var(--r-s);
  }
  .klapp > summary::-webkit-details-marker { display: none; }
  .klapp > summary .sym { width: 16px; height: 16px; transition: rotate var(--d-mittel) var(--kurve); color: var(--t-leise); }
  .klapp[open] > summary .sym { rotate: 180deg; }
  .klapp > summary:hover { color: var(--t-haupt); }
  .klapp-inhalt { display: grid; gap: var(--a-3); padding-top: var(--a-3); font-size: var(--gr-s); color: var(--t-zweit); }
  .klapp-inhalt ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
  .klapp::details-content { block-size: 0; overflow: clip; transition: block-size var(--d-lang) var(--kurve), content-visibility var(--d-lang) allow-discrete; }
  .klapp[open]::details-content { block-size: auto; }

  /* ── Passkey-Bild (Schritt 3, Warten) ───────────────────── */
  .geraet {
    justify-self: center; position: relative; width: 104px; height: 104px; display: grid; place-items: center;
    border-radius: 30px; background: var(--aktion-flaeche); color: var(--aktion);
    border: 1px solid color-mix(in oklab, var(--aktion) 20%, transparent);
  }
  .geraet .sym { width: 48px; height: 48px; stroke-width: 1.4; }
  .geraet::before, .geraet::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit;
    border: 1.5px solid var(--akzent); opacity: 0;
    animation: welle 2.4s var(--kurve) infinite;
  }
  .geraet::after { animation-delay: 1.2s; }
  @keyframes welle { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }

  /* ── App-Bestätigung: Zahl ──────────────────────────────── */
  .zahl-buehne { display: grid; justify-items: center; gap: var(--a-3); padding: var(--a-2) 0; }
  .zahl-kachel {
    position: relative; min-width: 132px; padding: 10px 26px;
    border-radius: var(--r-2xl); text-align: center;
    font: 700 64px/1.1 var(--schrift-titel); letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
    color: var(--t-haupt); background: var(--f-flaeche);
    border: 1.5px solid color-mix(in oklab, var(--akzent) 65%, transparent);
    box-shadow: 0 0 0 6px color-mix(in oklab, var(--akzent) 12%, transparent), var(--schatten-2);
  }
  .zahl-kachel::after {
    content: ""; position: absolute; inset: -8px; border-radius: calc(var(--r-2xl) + 8px);
    border: 1px solid var(--akzent); opacity: 0; animation: welle 2.6s var(--kurve) infinite;
  }
  .balken { width: 100%; height: 4px; border-radius: 4px; background: var(--linie); overflow: hidden; }
  .balken > span { display: block; height: 100%; width: 100%; background: var(--aktion); transform-origin: left; transition: transform 1s linear; border-radius: inherit; }
  .balken[data-knapp] > span { background: var(--warn); }
  .warte-zeile { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); font-size: var(--gr-s); color: var(--t-zweit); font-variant-numeric: tabular-nums; }
  .warte-zeile .punkte::after { content: "…"; display: inline-block; width: 1.2em; text-align: left; animation: tippen 1.4s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
  @keyframes tippen { from { width: 0; } to { width: 1.2em; } }
  .schrittliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--a-2); counter-reset: n; font-size: var(--gr-s); color: var(--t-zweit); }
  .schrittliste li { display: grid; grid-template-columns: 22px 1fr; gap: var(--a-2); align-items: center; counter-increment: n; }
  .schrittliste li::before {
    content: counter(n); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--f-flaeche-2); border: 1px solid var(--linie); font-size: 11px; font-weight: 600; color: var(--t-zweit);
  }
  .schrittliste b { color: var(--t-haupt); font-weight: 600; }

  /* ── Erfolg ─────────────────────────────────────────────── */
  .erfolg { justify-items: center; text-align: center; }
  .erfolg .ansicht-kopf { justify-items: center; }
  .haken-kreis { width: 76px; height: 76px; }
  .haken-kreis circle { fill: var(--ok-flaeche); stroke: var(--ok); stroke-width: 2; stroke-dasharray: 227; stroke-dashoffset: 227; animation: zeichnen 640ms var(--kurve) forwards; }
  .haken-kreis path { fill: none; stroke: var(--ok); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: zeichnen 420ms 420ms var(--kurve) forwards; }
  @keyframes zeichnen { to { stroke-dashoffset: 0; } }
  .erfolg .balken { max-width: 220px; }
  .erfolg .balken > span { transform: scaleX(0); }
  .erfolg .balken { --weiter-ms: 1600ms; }   /* login.js setzt die echte Dauer */
  .erfolg .balken[data-laeuft] > span { transition: transform var(--weiter-ms, 1600ms) linear; transform: scaleX(1); }

  /* Person (Notzugang, bekanntes Gerät) */
  .person {
    display: flex; align-items: center; gap: var(--a-3); padding: var(--a-3); border-radius: var(--r-l);
    border: 1px solid var(--linie); background: var(--f-flaeche-2);
  }
  .person-bild {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: color-mix(in oklab, var(--akzent) 22%, var(--f-flaeche)); color: var(--t-haupt); font-weight: 600;
  }
  .person-name { font-weight: 600; }
  .person-zusatz { font-size: var(--gr-xs); color: var(--t-leise); }
  .person .textknopf { margin-left: auto; font-size: var(--gr-xs); }

  .weiter-zeile { display: flex; align-items: center; gap: 6px; font-size: var(--gr-xs); color: var(--t-leise); justify-content: center; }
  .weiter-zeile code { color: var(--t-zweit); }
  .weiter-zeile .sym { width: 13px; height: 13px; }

  /* ── Band der Testinstanz ───────────────────────────────── */
  /* .testbetrieb-band setzt /testbetrieb.js aus /health; .band nur in der Vorschau. */
  .band, .testbetrieb-band {
    position: fixed; inset: 0 0 auto 0; z-index: var(--e-kopf);
    display: flex; justify-content: center; align-items: center; gap: var(--a-2);
    padding: 8px var(--a-4); font-size: var(--gr-s); font-weight: 500;
    background: var(--warn-flaeche); color: var(--warn);
    border-bottom: 1px solid color-mix(in oklab, var(--warn) 30%, transparent);
    text-align: center;
  }
  .band .sym { width: 15px; height: 15px; }
  .ansicht[hidden] { display: none; }

  /* ── Hilfe (Popover) ────────────────────────────────────── */
  .hilfe {
    width: min(440px, calc(100vw - 32px)); max-height: min(80dvh, 640px); overflow: auto;
    margin: auto; padding: var(--a-6);
    border: 1px solid var(--linie); border-radius: var(--r-2xl);
    background: var(--f-flaeche); color: var(--t-haupt); box-shadow: var(--schatten-3);
  }
  .hilfe::backdrop { background: var(--schleier); backdrop-filter: blur(2px); }
  .hilfe:popover-open { display: grid; gap: var(--a-4); animation: ansicht-rein var(--d-mittel) var(--kurve); }
  .hilfe-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); }
  .hilfe h2 { font-size: var(--gr-xl); }
  .hilfe h3 { font-size: var(--gr-m); margin-bottom: 4px; }
  .hilfe p, .hilfe li { font-size: var(--gr-s); color: var(--t-zweit); }
  .hilfe ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; }
  .hilfe section { display: grid; gap: var(--a-2); }
  .symbolknopf {
    width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--r-m);
    border: 1px solid transparent; background: none; color: var(--t-zweit);
  }
  .symbolknopf:hover { background: var(--f-flaeche-hover); color: var(--t-haupt); }

  /* ── Vorschau-Leiste (nur data-quelle="vorschau") ───────── */
  .vorschau {
    position: fixed; z-index: var(--e-meldung); left: 50%; bottom: 14px; translate: -50% 0;
    display: flex; align-items: center; gap: 6px; padding: 6px;
    border-radius: var(--r-voll); border: 1px solid var(--linie-stark);
    background: var(--glas); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--schatten-3); font-size: var(--gr-xs);
    max-width: calc(100vw - 16px);
  }
  .vorschau-marke { padding: 0 8px 0 10px; font-weight: 600; color: var(--t-zweit); letter-spacing: .04em; text-transform: uppercase; font-size: 11px; white-space: nowrap; }
  .vorschau select {
    height: 30px; border-radius: var(--r-voll); border: 1px solid var(--linie); background: var(--f-flaeche);
    padding: 0 10px; font-size: var(--gr-xs); color: var(--t-haupt); min-width: 0; max-width: 260px;
  }
  .vorschau .symbolknopf { width: 30px; height: 30px; border-radius: 50%; }
  .vorschau .sym { width: 16px; height: 16px; }
  .vorschau[data-zu] > :not(.vorschau-auf) { display: none; }
  .vorschau:not([data-zu]) > .vorschau-auf { display: none; }
  .vorschau-auf { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; background: none; font-weight: 600; color: var(--t-zweit); border-radius: var(--r-voll); }
  .vorschau[data-zu] { left: auto; right: 14px; translate: 0 0; }

  /* ── Herzlich willkommen (H0): eine Fläche, alles mittig ── */
  .karte[data-seite="willkommen"] { grid-template-columns: 1fr; max-width: 760px; }
  .karte[data-seite="willkommen"] .marke-flaeche { display: none; }
  .karte[data-seite="willkommen"] .form-kopf { justify-content: space-between; }
  .karte[data-seite="willkommen"] .form-logo { display: block; }
  .karte[data-seite="willkommen"] .form-logo .logo { height: 32px; }
  .karte[data-seite="willkommen"] .form-flaeche {
    background:
      radial-gradient(60% 50% at 50% 18%, color-mix(in oklab, var(--akzent) 16%, transparent), transparent 70%),
      var(--f-flaeche);
  }
  .ansicht-willkommen { display: grid; place-items: center; flex: 1; }
  .willkommen { display: grid; justify-items: center; text-align: center; gap: var(--a-4); max-width: 560px; padding: var(--a-4) 0 var(--a-2); }
  .willkommen-bild { position: relative; width: 132px; height: 132px; display: grid; place-items: center; margin-bottom: var(--a-2); }
  .willkommen-bild img { width: 76px; height: 76px; position: relative; z-index: 1; filter: drop-shadow(0 10px 24px color-mix(in oklab, var(--akzent) 45%, transparent)); animation: willkommen-plopp 700ms var(--kurve-feder) both; }
  .willkommen-bild span { position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--akzent) 55%, transparent); animation: willkommen-welle 3.6s var(--kurve) infinite; }
  .willkommen-bild span:nth-child(2) { animation-delay: 1.2s; }
  .willkommen-bild span:nth-child(3) { animation-delay: 2.4s; }
  @keyframes willkommen-welle { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
  @keyframes willkommen-plopp { from { transform: scale(.6); opacity: 0; } }
  .willkommen .titel { font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.025em; }
  .willkommen .unter { font-size: var(--gr-l); max-width: 46ch; }
  .willkommen-schritte { list-style: none; margin: var(--a-3) 0 var(--a-2); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-3); width: 100%; counter-reset: schritt; }
  .willkommen-schritte li { display: grid; justify-items: center; gap: 4px; padding: var(--a-4) var(--a-3); border-radius: var(--r-xl); background: var(--f-flaeche-2); border: 1px solid var(--linie); counter-increment: schritt; animation: willkommen-plopp 520ms var(--kurve) both; }
  .willkommen-schritte li:nth-child(2) { animation-delay: 80ms; } .willkommen-schritte li:nth-child(3) { animation-delay: 160ms; }
  .willkommen-schritte .punkt-symbol { width: 36px; height: 36px; border-radius: var(--r-l); display: grid; place-items: center; background: var(--aktion-flaeche); color: var(--aktion); margin-bottom: 4px; }
  .willkommen-schritte b { font-weight: 600; }
  .willkommen-schritte b::before { content: counter(schritt) ". "; color: var(--t-leise); font-weight: 500; }
  .willkommen-schritte small { color: var(--t-leise); font-size: var(--gr-xs); line-height: 1.35; }
  .willkommen .knopf-gross { min-width: 240px; }
  @media (max-width: 560px) {
    .willkommen-schritte { grid-template-columns: 1fr; }
    .willkommen-schritte li { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: var(--a-3); }
    .willkommen-schritte .punkt-symbol { grid-row: span 2; margin: 0; }
    .willkommen .knopf-gross { width: 100%; }
    .willkommen .unter { font-size: var(--gr-m); }
    .willkommen { gap: var(--a-3); }
    .willkommen-bild { width: 88px; height: 88px; }
    .willkommen-bild img { width: 52px; height: 52px; }
    .willkommen-schritte { gap: var(--a-2); }
    .willkommen-schritte li { padding: var(--a-2) var(--a-3); }
    .willkommen-schritte .punkt-symbol { width: 30px; height: 30px; }
  }

  /* ── Schmal: nur die Karte, Logo in der Karte ───────────── */
  @media (max-width: 879px) {
    .karte { grid-template-columns: 1fr; max-width: 460px; min-height: 0; }
    .marke-flaeche { display: none; }
    .form-kopf { justify-content: space-between; }
    .form-logo { display: block; }
    .ansicht-rahmen { padding: var(--a-4) 0; }
    .karte { height: 100%; max-height: 820px; }
  }
  @media (max-width: 520px) {
    .buehne { padding: 10px; place-items: stretch center; }
    :root[data-quelle="vorschau"] .buehne { padding-bottom: 66px; }
    .karte { max-height: none; }
    .form-flaeche { padding: var(--a-5) var(--a-5) var(--a-4); }
    .karte { border-radius: var(--r-xl); }
    .titel { font-size: 1.5rem; }
    .instanz { max-width: 52%; }
    .vorschau select { max-width: 150px; }
    .vorschau-marke { display: none; }
    .zahl-kachel { font-size: 56px; }
    .band { font-size: var(--gr-xs); padding: 6px var(--a-3); }
  }

  /* Niedrige Fenster: Willkommen kompakter, damit alles ohne Scrollen passt */
  @media (max-height: 820px) {
    .willkommen { gap: var(--a-3); padding-top: 0; }
    .willkommen-bild { width: 96px; height: 96px; margin: 0; }
    .willkommen-bild img { width: 56px; height: 56px; }
    .willkommen .titel { font-size: clamp(1.6rem, 4vw, 2.2rem); }
    .willkommen-schritte { margin: var(--a-1) 0; }
    .willkommen-schritte li { padding: var(--a-3); }
  }
  @media (max-height: 700px) {
    .willkommen-schritte small, .willkommen .hinweis-zeile { display: none; }
    .willkommen .unter { font-size: var(--gr-m); }
  }

  /* ── Weniger Bewegung ───────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .karte, .ansicht, .hilfe:popover-open { animation: none; }
    .willkommen-bild span, .willkommen-bild img, .willkommen-schritte li { animation: none !important; }
    .kunst *, .geraet::before, .geraet::after, .zahl-kachel::after, .warte-zeile .punkte::after { animation: none !important; }
    .haken-kreis circle, .haken-kreis path { animation: none; stroke-dashoffset: 0; }
    .kreisel { animation-duration: 2.4s; }
    .balken > span, .frist-ring .rest { transition: none; }
  }
}