/* =============================================================================
   Zappfix — Website, Hilfe, Kundenbereich und Admin (13.11.2026, App-Design 15.11.2026)

   BRIEF
   Zweck: Produkt zeigen, Hilfe geben, Kunden verwalten Lizenz, Quellen und Geraete und
   koppeln den Fernseher per Code; der Betreiber sieht Kunden, Kaeufe, Stoerungen.
   Zielgruppe: Endkunden (meist am Handy, waehrend der Fernseher den Code zeigt), weltweit,
   20 Sprachen; ein Betreiber am PC.
   Hauptaktion: Geraet koppeln bzw. in den Kundenbereich.
   Tonalitaet: ruhig, technisch, vertrauenswuerdig.
   Marke: Zappfix, Richtung A „Signal“ - GENAU wie die App (shared/.../ui/Farben.kt):
   Nachtblau als Buehne (#0B1627 / #0E1E36 / #13263F), Tuerkis #3FD5C4 als einzige
   Akzentfarbe, Papierweiss #F4F1EA als Text, Manrope (selbst gehostet, OFL).
   Zeichen: dunkelblaue Kachel, weisses Z, tuerkiser Punkt (Markenbild.kt).

   RICHTUNG: Tech/Praezision wie die Fernseh-Oberflaeche: dunkle Buehne mit tuerkisem
   Lichtschein oben, Linien statt Schatten, Tuerkis nur fuer Aktion, Fokus und Blickfang.
   SIGNATURE: auf der Startseite die Fernseh-Oberflaeche der App als Bild (Leiste,
   Senderliste, Fokusbalken, Fortschritt) - im Kundenbereich der Koppelcode als
   „Ticket“ mit Perforationskante.
   Skala 1.2 (UI), Radien 6/10/14, Motion 150–250 ms, Kurve (.2,.7,.2,1).
   ========================================================================== */

@layer reset, tokens, basis, bausteine, seiten, hilfen;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, svg { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; min-width: 0; }
  /* Grid- und Flex-Kinder duerfen schrumpfen: ohne das drueckt die
     Eigenbreite eines Code-Feldes (gesperrte Ziffern) die Seite ueber den
     Rand – gemessen bei 390 px am 13.11.2026 (+97 px). */
  .raster > *, .formular > *, .feld > *, .eintrag > *, .lizenz > *, .einstieg > *, .kopf-innen > * { min-width: 0; }
  button { cursor: pointer; }
  h1, h2, h3 { line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
  p { text-wrap: pretty; }
  table { border-collapse: collapse; }
}

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/manrope-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/manrope-700.woff2") format("woff2"); }
/* Ersatzschrift mit angeglichenen Massen gegen Layoutsprung beim Nachladen */
@font-face { font-family: "Manrope Ersatz"; src: local("Segoe UI"), local("Arial"); size-adjust: 103%; ascent-override: 98%; descent-override: 26%; }

@layer tokens {
  :root {
    /* Werte 1:1 aus der App (Farben.kt, Farbwelten.zappfix) */
    --bg:          #0B1627;   /* ink */
    --surface:     #0E1E36;   /* panel */
    --surface-2:   #13263F;   /* inkSoft */
    --line:        #1E3A5F;
    --line-stark:  #2B5079;
    --text:        #F4F1EA;   /* Papier */
    --text-muted:  #8FA3BF;   /* textNeben, 7:1 auf --bg */
    --accent:      #3FD5C4;   /* Tuerkis - Flaeche fuer Hauptaktion und Fokus */
    --accent-text: #8BE8DC;   /* akzentHell - Links und Akzentschrift */
    --accent-tief: #1FA396;   /* akzentTief - Verlaeufe */
    --on-accent:   #0B1627;
    --focus:       #3FD5C4;
    --success:     #6EE7B7;
    --success-bg:  #0F3B36;
    --danger:      #FF8A80;
    --danger-bg:   #3A1C24;
    --warn:        #FFD27A;
    --warn-bg:     #3A2F17;

    --schrift: "Manrope", "Manrope Ersatz", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", monospace;

    --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
    --r-1: 6px; --r-2: 10px; --r-3: 14px;
    --t-100: .8rem; --t-200: .9rem; --t-300: 1rem; --t-400: 1.2rem; --t-500: 1.44rem; --t-600: clamp(1.7rem, 1.3rem + 1.6vw, 2.2rem);
    --t-700: clamp(2.3rem, 1.5rem + 3.4vw, 3.6rem);
    --dauer: 180ms; --kurve: cubic-bezier(.2, .7, .2, 1);
    --breite: 1120px; --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
    color-scheme: dark;
  }
  /* Arabisch/Persisch: Manrope hat keine Schriftzeichen dafuer - Systemschrift mit etwas mehr Zeilenhoehe */
  :root:lang(ar), :root:lang(fa) { --schrift: "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif; }
}

@layer basis {
  html { font-family: var(--schrift); color: var(--text); background: var(--bg); hyphens: auto; }
  /* Lichtschein wie im Anmeldebildschirm der App: tuerkis oben, dann Nachtblau */
  body { background: radial-gradient(ellipse 80% 55% at 50% -12%, color-mix(in oklab, var(--accent-tief) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 42%) no-repeat, var(--bg); }
  :root:lang(ar) body, :root:lang(fa) body { line-height: 1.7; }
  /* minmax(0, 1fr) statt der impliziten auto-Spalte: sonst waechst die
     Spalte auf die Eigenbreite des breitesten Inhalts (Reiterleiste,
     Tabellen) und die ganze Seite scrollt waagerecht. Gemessen 13.11.2026. */
  body { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
  a { color: var(--accent-text); text-underline-offset: .15em; }
  a:hover { text-decoration-thickness: 2px; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
  .skip { position: absolute; inset-inline-start: var(--s-2); transform: translateY(-300%); top: var(--s-2); background: var(--surface); padding: var(--s-2) var(--s-4); border-radius: var(--r-1); z-index: 100; }
  .skip:focus { transform: none; }
  code, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; } }
}

@layer bausteine {
  /* ---- Kopf ---- */
  .kopf { border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
  .kopf-innen { max-width: var(--breite); margin-inline: auto; padding: var(--s-3) var(--gutter); display: flex; align-items: center; gap: var(--s-4); min-height: 60px; }
  .marke { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: inherit; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: var(--t-200); min-height: 44px; }
  .marke svg { inline-size: 36px; block-size: 36px; border-radius: 9px; box-shadow: 0 0 0 1px var(--line-stark); }
  .marke small { font-weight: 500; color: var(--text-muted); font-size: var(--t-100); letter-spacing: .08em; text-transform: uppercase; margin-inline-start: var(--s-2); }
  .kopf-rechts { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-3); color: var(--text-muted); font-size: var(--t-200); min-width: 0; }
  .kopf-rechts .mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }

  /* ---- Rumpf ---- */
  main { max-width: var(--breite); width: 100%; margin-inline: auto; padding: var(--s-6) var(--gutter) var(--s-8); }
  .fuss { border-top: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-100); }
  .fuss-innen { max-width: var(--breite); margin-inline: auto; padding: var(--s-5) var(--gutter); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
  .fuss a { color: inherit; display: inline-block; padding: .85rem .5rem; margin: -.85rem -.5rem; min-width: 44px; text-align: center; }
  /* 15.11.2026: Sprachauswahl in der Fusszeile - ohne Skript (details/summary), Links mit ?sprache=xx */
  .sprachwahl { max-width: var(--breite); margin-inline: auto; padding: 0 var(--gutter) var(--s-5); }
  .sprachwahl summary { cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; color: var(--text); }
  .sprachwahl summary::before { content: ""; inline-size: 1.1em; block-size: 1.1em; border: 1.5px solid currentColor; border-radius: 50%;
    background: linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat, linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; opacity: .7; }
  .sprachwahl ul { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--s-1) var(--s-4); }
  .sprachwahl li a { padding-block: .6rem; margin-block: 0; display: block; }
  .sprachwahl a[aria-current="true"] { color: var(--accent-text); font-weight: 600; }

  /* ---- Abschnitte ---- */
  .abschnitt { padding-block: var(--s-6); border-top: 1px solid var(--line); }
  .abschnitt:first-child { border-top: 0; padding-top: 0; }
  .abschnitt-kopf { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
  .abschnitt-kopf h2 { font-size: var(--t-500); letter-spacing: -.015em; }
  .abschnitt-kopf p { color: var(--text-muted); max-width: 60ch; }
  .label { font-size: var(--t-100); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--text-muted); }
  h1 { font-size: var(--t-600); letter-spacing: -.02em; }
  .einleitung { color: var(--text-muted); max-width: 60ch; margin-top: var(--s-2); font-size: var(--t-300); }

  /* ---- Flaechen ---- */
  .flaeche { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--s-5); }
  .flaeche-2 { background: var(--surface-2); border-radius: var(--r-2); padding: var(--s-4); }
  .raster { display: grid; gap: var(--s-4); }
  .raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

  /* ---- Kennzahl ---- */
  .kennzahl { border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4) var(--s-5); background: var(--surface); }
  .kennzahl .wert { font-size: var(--t-600); font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; margin-top: var(--s-2); }
  .kennzahl.hervor { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

  /* ---- Formulare ---- */
  .feld { display: grid; gap: var(--s-2); }
  .feld label { font-weight: 600; font-size: var(--t-200); }
  .feld .hinweis { color: var(--text-muted); font-size: var(--t-100); }
  .eingabe { width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line-stark); border-radius: var(--r-2); background: var(--surface); transition: border-color var(--dauer) var(--kurve); }
  select.eingabe { appearance: none; -webkit-appearance: none; padding-inline-end: calc(var(--s-4) + 20px); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; }
  .eintrag .wahl { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  [dir="rtl"] select.eingabe { background-position: 18px 50%, 12px 50%; }
  .eintrag .wahl select { min-height: 36px; padding: var(--s-1) var(--s-3); padding-inline-end: calc(var(--s-3) + 20px); font-size: var(--t-200); width: auto; max-width: 100%; }
  .eingabe:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 30%, transparent); }
  .eingabe[aria-invalid="true"] { border-color: var(--danger); }
  .eingabe-code { font-family: var(--mono); font-size: var(--t-500); letter-spacing: .25em; text-align: center; text-transform: uppercase; }
  .formular { display: grid; gap: var(--s-4); max-width: 440px; }
  .zeile { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }

  /* ---- Knoepfe ---- */
  .knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px; padding: var(--s-3) var(--s-5); border-radius: var(--r-2); border: 1px solid transparent; font-weight: 600; text-decoration: none; transition: transform var(--dauer) var(--kurve), background var(--dauer) var(--kurve), border-color var(--dauer) var(--kurve); }
  .knopf:active { transform: scale(.98); }
  .knopf:disabled { opacity: .55; cursor: wait; }
  .knopf-primaer { background: var(--accent); color: var(--on-accent); }
  .knopf-primaer:hover { background: color-mix(in oklch, var(--accent) 88%, white); }
  .knopf-sekundaer { background: var(--surface); border-color: var(--line-stark); }
  .knopf-sekundaer:hover { border-color: var(--text-muted); }
  .knopf-leise { background: transparent; color: var(--accent-text); padding-inline: var(--s-3); min-height: 40px; }
  .knopf-gefahr { background: var(--surface); color: var(--danger); border-color: color-mix(in oklch, var(--danger) 40%, var(--line)); }
  .knopf-gefahr:hover { background: var(--danger-bg); }
  .knopf-klein { min-height: 44px; padding: var(--s-2) var(--s-3); font-size: var(--t-200); }
  @media (pointer: fine) { .knopf-klein { min-height: 36px; } }

  /* ---- Meldungen ---- */
  .meldung { border-radius: var(--r-2); padding: var(--s-3) var(--s-4); border: 1px solid; font-size: var(--t-200); }
  .meldung-ok { background: var(--success-bg); border-color: color-mix(in oklch, var(--success) 40%, transparent); color: var(--text); }
  .meldung-fehler { background: var(--danger-bg); border-color: color-mix(in oklch, var(--danger) 40%, transparent); }
  .meldung-hinweis { background: var(--warn-bg); border-color: color-mix(in oklch, var(--warn) 40%, transparent); }
  .meldung:empty { display: none; }

  /* ---- Status ---- */
  .pille { display: inline-flex; align-items: center; gap: .4em; padding: .2em .7em; border-radius: 999px; font-size: var(--t-100); font-weight: 600; letter-spacing: .04em; border: 1px solid var(--line); }
  .pille::before { content: ""; inline-size: .55em; block-size: .55em; border-radius: 50%; background: currentColor; }
  .pille-ok { color: var(--success); background: var(--success-bg); border-color: transparent; }
  .pille-aus { color: var(--text-muted); background: var(--surface-2); }
  .pille-fehler { color: var(--danger); background: var(--danger-bg); border-color: transparent; }
  .pille-warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; }

  /* ---- Listen & Tabellen ---- */
  .liste { display: grid; gap: var(--s-2); }
  .eintrag { display: grid; grid-template-columns: 1fr; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
  @media (min-width: 560px) { .eintrag { grid-template-columns: 1fr auto; } }
  .eintrag .aktionen { justify-content: flex-start; }
  @media (min-width: 560px) { .eintrag .aktionen { justify-content: flex-end; } }
  .eintrag .titel { font-weight: 600; }
  .eintrag .unter { color: var(--text-muted); font-size: var(--t-100); }
  .eintrag .aktionen { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
  .leer { color: var(--text-muted); padding: var(--s-5); text-align: center; border: 1px dashed var(--line-stark); border-radius: var(--r-2); }
  .tabelle-huelle { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
  table.tabelle { width: 100%; font-size: var(--t-200); }
  .tabelle th, .tabelle td { text-align: start; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); vertical-align: top; }
  .tabelle th { font-size: var(--t-100); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
  .tabelle tbody tr:last-child td { border-bottom: 0; }
  .tabelle tbody tr:hover { background: var(--surface-2); }
  .tabelle .num { font-variant-numeric: tabular-nums; }
  .tabelle a.zeile-link { color: inherit; text-decoration: none; font-weight: 600; }
  .tabelle a.zeile-link:hover { color: var(--accent-text); }

  /* ---- Signature: der Koppelcode als Ticket ---- */
  .ticket { position: relative; background: var(--surface); border: 1px solid var(--line-stark); border-radius: var(--r-3); padding: var(--s-5) var(--s-6); overflow: hidden; }
  .ticket::before { content: ""; position: absolute; inset-inline: 0; top: 0; block-size: 6px; background: var(--accent); }
  .ticket .code { font-family: var(--mono); font-size: clamp(2.4rem, 1.6rem + 4vw, 4rem); letter-spacing: .22em; font-weight: 700; line-height: 1; margin-top: var(--s-3); word-break: break-all; }
  .ticket .perforation { border-top: 2px dashed var(--line-stark); margin: var(--s-4) calc(var(--s-6) * -1); }
  .ticket .geraet { display: grid; gap: var(--s-1); }

  /* ---- Lizenzstand ---- */
  .lizenz { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center; }
  .lizenz .symbol { inline-size: 56px; block-size: 56px; border-radius: var(--r-2); display: grid; place-items: center; background: var(--surface-2); }
  .lizenz.aktiv .symbol { background: var(--accent); color: var(--on-accent); }
  .lizenz .stand { font-size: var(--t-500); font-weight: 650; letter-spacing: -.015em; }

  /* ---- Navigation im Admin ---- */
  .reiter { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); overflow-x: auto; }
  .reiter button { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--s-3) var(--s-4); color: var(--text-muted); font-weight: 600; white-space: nowrap; min-height: 44px; }
  .reiter button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
  .reiter button:hover { color: var(--text); }

  /* ---- Schublade (Kundendetail) ---- */
  .schublade { display: grid; gap: var(--s-5); }
  .paar { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--s-1) var(--s-4); font-size: var(--t-200); }
  .paar dt { color: var(--text-muted); }
  .paar dd { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

  /* ---- Lade- und Leerzustand ---- */
  .lade { opacity: .6; pointer-events: none; }
  [hidden] { display: none !important; }
  .versteckt-visuell { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@layer seiten {
  .login { max-width: 440px; margin-inline: auto; padding-block: var(--s-6); }
  .login .flaeche { margin-top: var(--s-5); }
  .einstieg { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-bottom: var(--s-6); }
  @media (min-width: 760px) { .einstieg { grid-template-columns: 1.2fr .8fr; align-items: start; } }
  .rechtstext { max-width: 70ch; }
  .rechtstext h2 { margin-top: var(--s-6); font-size: var(--t-400); }
  .rechtstext p, .rechtstext li { margin-top: var(--s-3); }
  .startseite { text-align: start; max-width: 640px; padding-block: var(--s-8); }
  .startseite .marke-gross { inline-size: 72px; block-size: 72px; margin-bottom: var(--s-5); }

  /* ---- Startseite wie der Anmeldebildschirm der App (15.11.2026) ---- */
  .held { display: grid; gap: var(--s-7); align-items: center; padding-block: var(--s-7) var(--s-6); }
  @media (min-width: 900px) { .held { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); padding-block: var(--s-8); } }
  .dachzeile { color: var(--accent); font-size: var(--t-100); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .held h1 { font-size: var(--t-700); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin-top: var(--s-3); }
  .held h1 span { display: block; }
  .held h1 span + span { color: var(--accent-text); }
  .held .einleitung { font-size: var(--t-400); margin-top: var(--s-4); max-width: 34ch; }
  .held-bild { position: relative; border-radius: var(--r-3); overflow: hidden; aspect-ratio: 16 / 9;
    box-shadow: 0 0 0 1px var(--line-stark), 0 30px 80px -20px color-mix(in oklab, var(--accent-tief) 45%, transparent); }
  .held-bild svg { inline-size: 100%; block-size: 100%; }
  /* Fernseh-Bild bleibt in jeder Schreibrichtung wie am Fernseher */
  [dir="rtl"] .held-bild svg { transform: none; }
  .schritte { border-top: 1px solid var(--line); padding-block: var(--s-6) var(--s-7); }
  .schritte h2 { color: var(--accent); font-size: var(--t-100); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
  .schritte ol { list-style: none; padding: 0; margin-top: var(--s-4); display: grid; gap: var(--s-4); counter-reset: schritt; }
  @media (min-width: 900px) { .schritte ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
  .schritte li { counter-increment: schritt; position: relative; padding: var(--s-5); padding-inline-start: calc(var(--s-5) + 2.4rem);
    background: color-mix(in oklab, var(--surface) 80%, transparent); border: 1px solid var(--line); border-radius: var(--r-3); color: var(--text-muted); }
  .schritte li strong { color: var(--text); display: block; margin-bottom: var(--s-1); }
  .schritte li::before { content: counter(schritt); position: absolute; inset-inline-start: var(--s-5); top: var(--s-5);
    inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; display: grid; place-items: center;
    background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--accent-text); font-weight: 700; font-size: var(--t-200); }
  .schritte > p { margin-top: var(--s-5); }
}

@layer hilfen {
  .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); }
  .muted { color: var(--text-muted); }
  .klein { font-size: var(--t-100); }
  .rechts { text-align: end; }
  .umbruch { overflow-wrap: anywhere; }
}