@import url('/fonts/inter.css');

/* ============================================================
   MeterGate – Design-System
   Hell: Weiß mit leichtem Blauschimmer (Standard)
   Dunkel: eigenständiges Navy-Theme (per System ODER Umschalter)
   ============================================================ */

/* ---- Hell (Standard) + Dark-Palette (UX-DS-1: Werte stehen NUR EINMAL) ---- */
:root{
  --bg:#f4f7fc;            /* zart blau getönter Hintergrund */
  --surface:#ffffff;        /* reine weiße Karten -> "Weiß mit leichtem Blau" */
  --surface-2:#eef3fb;      /* sanfte Fläche für Tabellenkopf / Insets */
  --text:#0f1b33;           /* tiefes Blauschwarz, weich */
  /* ⛔ H112 § 3.1 — #64748b → #617087, und der Grund ist staerker als ein Gesetz.
     Gemessen in H111 § 2b: `muted` auf Seitengrund 4,43:1 und auf Flaeche-2 4,27:1 — beide unter
     WCAG AA (4,5:1). `.muted` traegt die ERKLAERTEXTE, und darunter sind die, die die KOSTEN
     erklaeren („Alle Preise sind Nettopreise…", der Ruecksetzhinweis am Deckel, der Bezugssatz
     unter jeder Einnahmenzahl). Ausgerechnet die Saetze, die das Versprechen der nachrechenbaren
     Sicherheit tragen, waren die am schlechtesten lesbaren.
     Ein Rechtsgrund besteht NICHT (BFSG gilt fuer Verbraucher, MeterGate hat keine).
     Der neue Wert ist gerechnet, nicht geraten (`scripts/h112-muted.mjs`): der HELLSTE Wert
     derselben Farbe, der beide Paare besteht — 4,68:1 / 5,03:1 / 4,51:1. Ein Schritt heller
     faellt wieder durch (4,63:1 / 4,47:1). Farbton und Saettigung sind unveraendert; nur die
     Helligkeit sinkt um 3 %.
     ⚠️ NUR das helle Schema — im dunklen liegt jedes Paar zwischen 5,55:1 und 15,63:1. */
  --muted:#617087;
  --border:#e3eaf5;         /* weicher blaustichiger Rand */
  --primary:#2f6bed;        /* freundliches, ruhiges Blau */
  --primary-hover:#1f56d6;
  --primary-text:#ffffff;
  --accent-soft:#eaf1ff;    /* sehr helles Blau für Markierungen */
  --success-bg:#ecfdf5; --success-text:#066e4e; --success-border:#a7f3d0;
  --error-bg:#fef2f2; --error-text:#b42318; --error-border:#fecaca;
  /* Semantische Aliase — EIN kanonischer Name je Semantik (UX-DS-1 B5).
     --color-danger bleibt als Alias auf --danger (Rückwärtskompatibilität alter Views). */
  --accent:var(--primary);
  --danger:#dc2626; --danger-hover:#b91c1c; --color-danger:var(--danger); --error:var(--danger); --danger-bg:var(--error-bg);
  /* Solide Danger-Fläche (Buttons): bewusst in BEIDEN Themes gleich — weißer Text braucht
     eine kräftige Fläche; --danger ist im Dunkeln aufgehellt und trüge Weiß nicht. */
  --danger-solid:#dc2626; --danger-solid-hover:#b91c1c; --danger-solid-text:#ffffff;
  --warning:#d97706; --warning-bg:#fffbeb; --warning-text:#92400e; --warning-border:#fde68a;
  --success:#059669;
  --ring:rgba(47,107,237,.30);
  --shadow:0 1px 2px rgba(15,27,51,.04), 0 6px 20px rgba(15,27,51,.06);
  --radius:14px; --radius-sm:9px;

  /* ---- Spacing-Skala (UX-DS-1 §1) — ersetzt px-Literale ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px;

  /* ---- Typo-Skala (aus den vorhandenen rem-Literalen konsolidiert) ---- */
  --font-sans:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --fs-xs:.78rem; --fs-sm:.86rem; --fs-md:.92rem; --fs-base:1rem;
  --fs-lg:1.12rem; --fs-xl:1.4rem; --fs-2xl:2rem;
  --lh-tight:1.25; --lh-normal:1.6;

  /* ---- z-index ---- */
  --z-nav:1000; --z-modal:1100; --z-toast:1200;

  /* ---- Semantische Sub-Paletten (vorher hartkodiert in Views) ---- */
  --warn-bg:#fef3c7; --warn-fg:#92400e; --warn-border:#f59e0b; --warn-strong:#d97706;
  --bad-bg:#fecaca; --bad-fg:#991b1b;
  --ok-bg:#ecfdf5;  --ok-fg:#066e4e;  --ok-border:#a7f3d0;
  --readonly-bg:#f5f5f5; --readonly-fg:#666666;   /* readonly-Felder (account/profil) */
  --overlay:rgba(15,27,51,.55);                    /* Modal-Overlay */

  /* ================= Dark-Palette — die WERTE stehen nur hier =================
     (UX-DS-1 B3: die beiden Dark-Selektoren unten weisen nur noch zu, statt die
     Werte doppelt zu pflegen — kein Drift mehr zwischen prefers-color-scheme und
     dem expliziten Umschalter.) */
  --d-bg:#0d1424; --d-surface:#151f35; --d-surface-2:#1d2942; --d-text:#e7edf7;
  --d-muted:#93a1b8; --d-border:#283650; --d-primary:#5b8def; --d-primary-hover:#79a4f5;
  --d-primary-text:#0d1424; --d-accent-soft:rgba(91,141,239,.14);
  --d-success-bg:rgba(16,185,129,.13); --d-success-text:#6ee7b7; --d-success-border:rgba(16,185,129,.3);
  --d-error-bg:rgba(239,68,68,.13); --d-error-text:#fca5a5; --d-error-border:rgba(239,68,68,.3);
  --d-danger:#f87171; --d-danger-hover:#fca5a5;
  --d-warning:#fbbf24; --d-warning-bg:rgba(245,158,11,.13); --d-warning-text:#fbbf24; --d-warning-border:rgba(245,158,11,.3);
  --d-success:#34d399;
  --d-ring:rgba(91,141,239,.45);
  --d-shadow:0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35);
  --d-warn-bg:rgba(245,158,11,.16); --d-warn-fg:#fcd34d; --d-warn-border:rgba(245,158,11,.45); --d-warn-strong:#fbbf24;
  --d-bad-bg:rgba(220,38,38,.20); --d-bad-fg:#fca5a5;
  --d-ok-bg:rgba(16,185,129,.16); --d-ok-fg:#6ee7b7; --d-ok-border:rgba(16,185,129,.35);
  --d-readonly-bg:#1a2438; --d-readonly-fg:#93a1b8;
  --d-overlay:rgba(0,0,0,.62);
}

/* Die Dark-ZUWEISUNGEN (Werte kommen aus den --d-* oben, siehe B3). */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --text:var(--d-text);
    --muted:var(--d-muted); --border:var(--d-border); --primary:var(--d-primary); --primary-hover:var(--d-primary-hover);
    --primary-text:var(--d-primary-text); --accent-soft:var(--d-accent-soft);
    --success-bg:var(--d-success-bg); --success-text:var(--d-success-text); --success-border:var(--d-success-border);
    --error-bg:var(--d-error-bg); --error-text:var(--d-error-text); --error-border:var(--d-error-border);
    --danger:var(--d-danger); --danger-hover:var(--d-danger-hover);
    --warning:var(--d-warning); --warning-bg:var(--d-warning-bg); --warning-text:var(--d-warning-text); --warning-border:var(--d-warning-border);
    --success:var(--d-success);
    --ring:var(--d-ring);
    --shadow:var(--d-shadow);
    --warn-bg:var(--d-warn-bg); --warn-fg:var(--d-warn-fg); --warn-border:var(--d-warn-border); --warn-strong:var(--d-warn-strong);
    --bad-bg:var(--d-bad-bg); --bad-fg:var(--d-bad-fg);
    --ok-bg:var(--d-ok-bg); --ok-fg:var(--d-ok-fg); --ok-border:var(--d-ok-border);
    --readonly-bg:var(--d-readonly-bg); --readonly-fg:var(--d-readonly-fg);
    --overlay:var(--d-overlay);
  }
  :root:not([data-theme="light"]) .icon-sun{display:block}
  :root:not([data-theme="light"]) .icon-moon{display:none}
}

[data-theme="dark"]{
  --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --text:var(--d-text);
  --muted:var(--d-muted); --border:var(--d-border); --primary:var(--d-primary); --primary-hover:var(--d-primary-hover);
  --primary-text:var(--d-primary-text); --accent-soft:var(--d-accent-soft);
  --success-bg:var(--d-success-bg); --success-text:var(--d-success-text); --success-border:var(--d-success-border);
  --error-bg:var(--d-error-bg); --error-text:var(--d-error-text); --error-border:var(--d-error-border);
  --danger:var(--d-danger); --danger-hover:var(--d-danger-hover);
  --warning:var(--d-warning); --warning-bg:var(--d-warning-bg); --warning-text:var(--d-warning-text); --warning-border:var(--d-warning-border);
  --success:var(--d-success);
  --ring:var(--d-ring);
  --shadow:var(--d-shadow);
  --warn-bg:var(--d-warn-bg); --warn-fg:var(--d-warn-fg); --warn-border:var(--d-warn-border); --warn-strong:var(--d-warn-strong);
  --bad-bg:var(--d-bad-bg); --bad-fg:var(--d-bad-fg);
  --ok-bg:var(--d-ok-bg); --ok-fg:var(--d-ok-fg); --ok-border:var(--d-ok-border);
  --readonly-bg:var(--d-readonly-bg); --readonly-fg:var(--d-readonly-fg);
  --overlay:var(--d-overlay);
}

/* ---- Grund ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.6;background:var(--bg);color:var(--text);margin:0;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .2s ease,color .2s ease;
}
.container{max-width:900px;margin:0 auto;padding:36px 20px}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Navigation ---- */

nav.topbar{
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
  padding:13px 20px;display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;z-index:1000;
}
nav.topbar .brand{font-weight:700;font-size:1.18rem;color:var(--text);text-decoration:none;letter-spacing:-.02em}
nav.topbar .brand:hover{text-decoration:none}
nav.topbar .nav-links{display:flex;align-items:center;gap:20px}
nav.topbar .nav-links a{color:var(--muted);font-weight:500;font-size:.95rem;transition:color .15s ease}
nav.topbar .nav-links a:hover{color:var(--text);text-decoration:none}
nav.topbar .nav-links form{margin:0;display:inline-flex}

/* ---- Theme-Umschalter ---- */
.theme-toggle{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  width:38px;height:38px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.theme-toggle:hover{color:var(--text);border-color:var(--muted);background:var(--surface-2)}
.theme-toggle svg{width:18px;height:18px}
.icon-sun{display:none}
[data-theme="dark"] .icon-sun{display:block}
[data-theme="dark"] .icon-moon{display:none}

/* ---- Karten ---- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:30px;margin-bottom:22px;box-shadow:var(--shadow);
}

/* Zwei Hinweisarten auf Rechtsseiten, GLEICHES Aussehen, verschiedene Bedeutung:
   .mg-draft-notice     = Entwurfsvorbehalt ("noch nicht rechtsverbindlich")
   .mg-language-notice  = Sprachhinweis ("maßgeblich ist die deutsche Fassung")

   H11 §3.3: Bis dahin trug .mg-draft-notice beides. Ein Zahn, der auf den Klassennamen prueft,
   konnte sie nicht unterscheiden — und genau das ist in H10 aufgeschlagen, als die AVV einen
   Sprachhinweis bekam und ein Test "KEIN Entwurfs-Banner" dagegen ansprang.

   Die Regeln stehen bewusst GEMEINSAM: die Trennung ist semantisch, nicht optisch. Waere das
   Aussehen dupliziert, liefe es auseinander. Nutzt die Design-System-Variablen -> hell wie dunkel
   korrekt, bewusst kein Rot. */
.mg-draft-notice,
.mg-language-notice{
  background:var(--accent-soft);border:1px solid var(--border);
  border-left:4px solid var(--primary);border-radius:var(--radius-sm);
  padding:14px 18px;margin:0 0 26px;color:var(--text);font-size:.95rem;line-height:1.55;
}
.mg-draft-notice p,
.mg-language-notice p{margin:0}
.mg-draft-notice p + p,
.mg-language-notice p + p{margin-top:8px}
.mg-draft-notice strong,
.mg-language-notice strong{color:var(--primary)}
.mg-placeholder{color:var(--muted);font-style:italic}

/* ---- Typografie ---- */
h1{font-size:2rem;line-height:1.22;margin:0 0 16px;letter-spacing:-.025em;font-weight:700}
h2{font-size:1.4rem;margin:0 0 14px;letter-spacing:-.015em;font-weight:600}
h3{font-size:1.12rem;margin:0 0 10px;font-weight:600}
p{margin:0 0 14px}
/* UX-1 § 1: der Leitsatz einer Karte ist Text, nicht Fussnote — gemessen stand er in derselben
   Farbe wie der kleine Erklaertext darunter, und die Karte hatte nur Grau in zwei Groessen. */
.lead{font-size:1.12rem;color:var(--text);line-height:1.65}
.muted,.text-muted{color:var(--muted);font-size:.92rem}

/* ---- Formulare ---- */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-weight:600;margin-bottom:7px;font-size:.9rem}
/* Checkbox/Radio ausgenommen: width:100% + padding + border streckte sie zu einer
   vollbreiten ~1px-Box und quetschte in Flex-Labels den Text auf ein Zeichen pro
   Zeile (UI-1). Diese Regel gilt nur fuer text-artige Felder. */
.form-group input:not([type="checkbox"]):not([type="radio"]),.form-group select,.form-group textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:1rem;font-family:inherit;background:var(--surface);color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);
}
.form-group input::placeholder{color:var(--muted);opacity:.7}
.help{color:var(--muted);font-size:.85rem;margin-top:5px}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:var(--radius-sm);font-size:.97rem;font-weight:600;
  font-family:inherit;cursor:pointer;border:1px solid transparent;text-decoration:none;
  transition:background .15s ease,border-color .15s ease,transform .05s ease;
}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary);color:var(--primary-text)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--muted);background:var(--surface-2)}
.btn-danger{background:var(--danger-solid);color:var(--danger-solid-text)}
.btn-danger:hover{background:var(--danger-solid-hover)}
/* Destruktive Aktion mit zurückhaltender Optik (war inline color/border auf .btn-secondary). */
.btn-outline-danger{color:var(--danger);border-color:var(--danger)}
.btn-outline-danger:hover{color:var(--danger-hover);border-color:var(--danger-hover);background:var(--error-bg)}
/* Destruktive Aktion, die als Link auftritt (ersetzt „Löschen als borderloser Link"). */
.btn-link-danger{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--danger);cursor:pointer;text-decoration:underline}
.btn-link-danger:hover{color:var(--danger-hover)}
.btn-lg{padding:13px 24px;font-size:1.02rem}
.btn-sm{padding:8px 14px;font-size:.9rem}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---- H123 § 2: Die Einrichtungsliste ist ein Raster, kein Stapel Streifen ----
   Zwei Spalten: Text | Knopf. Die zweite ist `auto` — also so breit wie ihr BREITESTER Knopf —,
   und jeder Knopf fuellt sie (`justify-self:stretch`). Damit stehen alle Knoepfe auf EINER Achse,
   und keine Beschriftung bricht um, weil die Spalte breit genug ist. Kein `nowrap`: das erzwaenge
   den naechsten Ueberlauf (H112).
   Bei EINEM offenen Punkt sieht die Zeile aus wie die erste von dreien — eine `auto`-Spalte hat
   auch mit einem Mitglied eine Breite. */
.einrichtung-raster{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:center}
.einrichtung-raster>.btn,.einrichtung-raster>form{justify-self:stretch}
.einrichtung-raster>.btn{text-align:center}
.einrichtung-raster>form>.btn{width:100%}

/* ---- H125 § 1(b): Formularfelder auf einer Achse ----
   `label` ist von Haus aus `inline` — das Feld dahinter begann dort, wo die Beschriftung endete,
   also bei jedem Feld woanders (gemessen: 221 px Unterschied auf beiden Kanten). Beschriftung als
   eigener Block, Feld fuellt die Spalte. `box-sizing` steht dabei, weil `width:100%` ohne es die
   Polsterung DAZU rechnet und das Feld ueber seinen Kasten hinausliefe. */
/* ⛔ ANGEHAENGT AN EIN VORHANDENES MERKMAL (`#legalName`), NICHT AN EINE NEUE KLASSE — gemessen:
   eine Klasse in jener Zeile haette einen H72-Anker zerstoert (`Attribut-Stellen 545 -> 544`,
   „1 STIL-EINTRAG VERLAESST DIE KARTE"). Die Ansicht steht in der Stilkarte; ihre `class`-Zeile
   ist der Anker, und ein Anker, den man fuer eine Formatierung opfert, ist billig verkauft.
   `:has()` ist seit 2023 in allen aktuellen Browsern Grundausstattung; wer es nicht kann,
   bekommt die alte, ungeordnete Darstellung und keinen Fehler. */
div:has(> #legalName)>label{display:block;margin-bottom:4px}
div:has(> #legalName)>input,div:has(> #legalName)>select{display:block;width:100%;box-sizing:border-box}

/* ---- H125 § 1(c): die Aktionen eines Schluessels stehen auf einer Kante ----
   `auto-fit` statt fester Spaltenzahl: bei schmaler Zelle eine Spalte, bei breiter mehrere — und
   in jedem Fall haben die Mitglieder EINER Spalte dieselbe linke und rechte Kante. Kein `nowrap`:
   der Umbruch verschwindet, weil die Spalte breit genug ist (H112). */
.aktions-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px;align-items:start}
.aktions-raster>form{width:100%}
/* Und die Knoepfe INNERHALB der Formulare: `margin-left:auto` schiebt sie an die rechte Kante
   ihres Formulars — die seit dem Raster bei allen dieselbe ist —, `min-width` gibt ihnen eine
   gemeinsame Breite, damit auch die linke Kante stimmt. Die Zahl ist die gemessene Breite der
   laengsten Beschriftung dieser Spalte, nicht geraten; `justify-content:center` haelt den Text
   darin mittig, statt ihn links kleben zu lassen. */
/* ⛔ ZWEI ANLAEUFE HABEN HIER VERLOREN, bevor der dritte trug — das steht hier, damit es niemand
   ein viertes Mal versucht:
     `margin-left:auto` + `min-width:9.5rem`    76.77 px -> 26.52 px
     dasselbe mit `min-width:11.5rem`           26.52 px -> 44.55 px   (SCHLECHTER)
   Grund: eine Mindestbreite am Knopf konkurriert mit der Breite seines Bedienelements. Wo das
   Bedienelement lang ist (die Delegations-Beschriftung), bleibt der Knopf darunter; wo es kurz
   ist, erreicht er sie. Die Knopfbreite haengt damit weiter am NACHBARN.
   Das Formular wird deshalb selbst ein Raster mit EINER festen Knopfspalte — bei allen drei
   Formularen gleich breit, also stimmen beide Kanten. `minmax(0,1fr)` statt `1fr`, sonst drueckt
   ein breites Feld die Spalte auf. */
/* ⛔ NUR DIE FORMULARE MIT BEDIENELEMENT — und das ist ein Befund von `h72-stil.spec.ts`, nicht
   Vorsicht: die Regel stand zuerst auf `.aktions-raster>form` und traf damit auch die zwei
   Formulare mit `u-display-inline` („Sperren", „Limit entfernen"). Der Bestandszahn maass
   `.u-display-inline display: ist grid, soll inline` und wurde rot — zu Recht: eine H72-Klasse
   sagt zu, was sie aufloest, und eine Layoutregel darf ihr das nicht wegnehmen. Als Rasterkinder
   werden jene zwei ohnehin zu `block` blockifiziert; genau diesen Fall laesst der Zahn zu. */
.aktions-raster>form.u-display-inline-flex-gap-4px-align-items-center{display:grid;grid-template-columns:minmax(0,1fr) 11.5rem;gap:4px;align-items:center}
.aktions-raster>form>.btn{width:100%;min-width:0;justify-content:center}

/* ---- H125 § 3: der Export-Knopf im Betreiberbereich ----
   `width:100%` gibt allen Knoepfen der Spalte dieselbe Breite; `min-width:max-content` haelt die
   Zelle so breit, dass die laengste Beschriftung („DPI-XML", das der Browser am Bindestrich
   umbrach) in eine Zeile passt — ohne `nowrap`, also ohne den naechsten Ueberlauf zu erzeugen. */
.export-zelle>.btn{display:flex;justify-content:center;width:100%;min-width:max-content}
.nav-links .btn{padding:8px 15px;font-size:.9rem}

/* ---- Budget-Balken (UX-Audit W4 — Markup nutzt .budget-bar-*, Regeln fehlten) ---- */
.budget-bar-wrap{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;margin-top:6px}
.budget-bar-fill{height:100%;background:var(--primary);border-radius:999px;transition:width .2s ease}

/* ---- Tabellen ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border);font-size:.93rem}
/* ⛔ H112 § 3 — DIE KLEINSTE SCHRIFT DES PRODUKTS WAR GROSSGESCHRIEBEN UND GESPERRT.
   Gemessen in H111 § 2a: `th` steht bei 12,16 px auf SECHS Flaechen (/keys, /balance, /invoices,
   /products, /payouts und der Katalogtabelle) — der kleinste Text ueberhaupt, und er trug die
   zwei Eigenschaften, die klein zusaetzlich erschweren. Grossbuchstaben nehmen der Zeile die
   Wortform, die das Auge bei kleiner Schrift zuerst greift; die Sperrung zerlegt sie zusaetzlich.
   Grossschreibung und Sperrung fallen, die Groesse steigt auf --fs-xs (.78rem ≈ 12,5 px).
   Erkennbar bleiben die Koepfe durch Gewicht (600) und Farbe — dafuer braucht es keine
   Schreibweise. EINE Regel, sechs Flaechen. */
th{background:var(--surface-2);font-weight:600;color:var(--muted);font-size:var(--fs-xs)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
/* ⛔ H113 § 1.2 — EIN SCHLUESSEL IST ZWEI ZEILEN, ABER EIN EINTRAG.
   Die Schluesselzeile traegt die vier Spalten, die etwas sagen; die Zusatzzeile darunter traegt
   Ablauf, Umfang und Erstellt — gemessen als heute einwertig (§ 1.1), aber jederzeit fuellbar.
   Der Trennstrich zwischen beiden faellt und der Zwischenraum schrumpft, sonst liest die Zeile
   sich als eigener Schluessel. `background:inherit` statt einer festen Farbe: so folgt die
   Zusatzzeile dem Ueberfahren ihrer Hauptzeile, statt halb hervorgehoben stehenzubleiben. */
tbody tr.key-haupt td{border-bottom:none;padding-bottom:4px}
tbody tr.key-zusatz td{padding-top:0;color:var(--muted);font-size:var(--fs-xs)}
tbody tr.key-haupt:hover,tbody tr.key-haupt:hover+tr.key-zusatz{background:var(--surface-2)}
tbody tr.key-zusatz:hover{background:transparent}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;font-size:.78rem;font-weight:600}
.badge-active{background:var(--success-bg);color:var(--success-text)}
.badge-inactive{background:var(--surface-2);color:var(--muted)}
/* tokenisiert (UX-DS-1 B4): greift jetzt AUCH bei prefers-color-scheme:dark —
   die früheren [data-theme=dark]-Overrides liefen bei System-Dark ins Leere. */
.badge-blocked{background:var(--bad-bg);color:var(--bad-fg)}
.badge-reported{background:var(--warn-bg);color:var(--warn-fg)}
.badge-neutral{background:var(--surface-2);color:var(--muted)}
/* waren benutzt (control/detail.ejs:42/44), aber NIE definiert -> rendern farblos (UX-DS-1 §2) */
.badge-success{background:var(--ok-bg);color:var(--ok-fg)}
.badge-danger{background:var(--bad-bg);color:var(--bad-fg)}
.badge-warning{background:var(--warn-bg);color:var(--warn-fg)}
/* Status-Badge für rohe Enum-Ausgaben (ersetzt <code>status</code>-Pseudo-Badges) */
.badge-status{background:var(--surface-2);color:var(--muted);font-family:var(--font-mono);font-size:var(--fs-xs)}

/* ---- Nur für Screenreader (B2a) ----
   Die Einrückung abgeleiteter Schlüssel auf /keys ist rein visuell; ein Screenreader liest eine
   Tabellenzeile ohne Kontext. Diese Klasse fehlte im Design-System — dieselbe Klasse von Fehler
   wie badge-success/danger in UX-DS-1: benutzt, aber nie definiert, also wirkungslos. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Flash-Meldungen ---- */
.flash{padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:20px;font-size:.95rem;border:1px solid transparent}
.flash-success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}
.flash-error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border)}
.flash-warning{background:var(--warning-bg, #fffbeb);color:var(--warning-text, #92400e);border-color:var(--warning-border, #fde68a)}

/* ---- Code ---- */
code{background:var(--surface-2);border-radius:6px;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.88em;padding:2px 6px;color:var(--text)}
pre{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;overflow-x:auto;margin:0 0 14px}
pre code{background:none;padding:0}
/* H103 §3 — die erste Zeile, die ein Entwickler von uns kopiert, ist GANZ zu sehen.
   `pre` traegt zwar `overflow-x:auto` (Zeile oben), aber eine Rollleiste, die erst beim
   Rollen erscheint, ist kein Hinweis: in `h101_bilder/ohne-liste__light.png` endete der
   curl-Aufruf am Kartenrand, ohne dass etwas auf mehr Text hingedeutet haette. Ein Befehl,
   den man kopieren soll, wird deshalb UMBROCHEN statt abgeschnitten — vollstaendig sichtbar
   schlaegt scrollbar. `break-all` und nicht `break-word`: in einer URL mit Platzhaltern gibt
   es keine Wortgrenzen, an denen ein Umbruch von selbst faende.
   ⛔ H177: Das zitierte Bild heisst seit dem Tafel-Umbau `h101_bilder/kaeufer-fertig__light.png`
   — derselbe Zustand (/home ohne Schrittfolge-Tafel), neuer Name. Den alten erzeugt kein Lauf
   mehr; der Beleg ist nicht verloren, er ist umbenannt. */
/* ⛔ H109 § 3 — DIE REGEL STEHT AM ELEMENT, NICHT AN DER FUNDSTELLE.
   H103 haengte sie als `pre.code-wrap` an EINE Stelle (`/home`). Gemessen in H109: 15 `<pre>`
   in 6 Ansichten, davon trug genau eine die Klasse — und auf `/catalog/:slug` endete der
   curl-Aufruf wieder am Kartenrand (`06-catalog-detail.png`). Das ist die Klasse
   „einmal behoben, an einer Stelle"; bei mehr als zwei Fundstellen gehoert die Regel ans
   Element. `.code-wrap` bleibt als Name gueltig, damit vorhandenes Markup nicht bricht. */
/* ⛔ H110 § 1.3 — DREI REGELN SIND MIT IHRER ANSICHT GEFALLEN.
   `u-display-flex-gap-48px-flex-wrap-wrap`, `u-display-flex-justify-content-space-betwe-cb3d6627`
   und `u-font-size-1-5rem-font-weight-700-margin-4px-0` wurden AUSSCHLIESSLICH von
   `views/dashboard/index.ejs` benutzt. Mit der Ansicht faellt ihre einzige Stelle — und H72
   Zahn 3 verlangt zu Recht: keine Regel ohne Stelle, eine tote Regel ist der naechste Irrtum. */
pre, pre.code-wrap{white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere}

/* ---- Hilfsklassen ---- */
.text-center{text-align:center}
.stack-sm>*+*{margin-top:8px}

/* nummerierte Schritte (z. B. "So funktioniert es") */
.steps{list-style:none;counter-reset:step;padding:0;margin:0}
.steps li{counter-increment:step;position:relative;padding-left:46px;margin-bottom:18px}
.steps li:last-child{margin-bottom:0}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:-2px;width:32px;height:32px;
  background:var(--accent-soft);color:var(--primary);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.92rem;
}

/* ---- Footer ---- */
footer.site-footer{border-top:1px solid var(--border);padding:30px 20px;margin-top:44px;color:var(--muted);font-size:.9rem;text-align:center}
footer.site-footer a{color:var(--muted)}
footer.site-footer a:hover{color:var(--text)}
/* H126 § 1: Der Verbraucherausschluss (BGH I ZR 60/16) muss DEUTLICH sein — er steht deshalb
   ueber den Rechtslinks und traegt die volle Textfarbe statt der gedaempften des Fussbereichs.
   Kein groesserer Schriftgrad: „deutlich" heisst lesbar und an fester Stelle, nicht laut. */
footer.site-footer .footer-b2b{color:var(--text);margin-bottom:10px}

/* ---- Tab-Navigation ---- */
.tab-nav{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:24px}
.tab-item{display:inline-flex;align-items:center;padding:10px 22px;font-size:.95rem;font-weight:600;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color .15s ease,border-color .15s ease}
.tab-item:hover{color:var(--text);text-decoration:none}
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary)}

/* ---- Tab-Hilfe (aufklappbar) ---- */
.tab-help{margin-bottom:24px;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.tab-help summary{cursor:pointer;font-weight:600;font-size:.9rem;color:var(--muted);user-select:none}
.tab-help summary:hover{color:var(--text)}
.tab-help-content{margin-top:8px;font-size:.88rem;color:var(--muted);line-height:1.6}

/* ---- Control-Bar (Suche + Status-Filter) ---- */
.control-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.control-search-form{display:flex;gap:8px;flex:1;min-width:240px}
.control-search-form input[type="search"]{flex:1;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.95rem;font-family:inherit;background:var(--surface);color:var(--text)}
.control-search-form input[type="search"]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.status-filter-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.status-filter-label{color:var(--muted);font-weight:600;font-size:.85rem}
.status-link{display:inline-block;padding:5px 12px;border-radius:999px;font-size:.82rem;font-weight:600;text-decoration:none;color:var(--muted);border:1px solid var(--border);transition:background .15s ease,color .15s ease,border-color .15s ease}
.status-link:hover{color:var(--text);border-color:var(--muted);text-decoration:none}
.status-link.active{background:var(--primary);color:var(--primary-text);border-color:var(--primary)}
.reason-chips{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px}

/* ---- Control-Sub-Bar (Sortierung + Schwellen-Filter) ---- */
.control-sub-bar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
.control-sub-bar .sort-toggle{flex-shrink:0}
.control-sub-bar .threshold-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* ---- Report-Badge ---- */
.report-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--error);color:#fff;font-size:.78rem;font-weight:700;line-height:1}

/* ---- User-Detail (Benutzer-Tab) ---- */
.user-detail-content{padding:16px 20px;background:var(--surface-2);border-radius:var(--radius-sm)}
.user-detail-content h4{margin-bottom:12px}
.inner-table{width:100%;border-collapse:collapse;margin-top:8px}
.inner-table th,.inner-table td{padding:8px 12px;font-size:.87rem}
/* ⛔ H113 — DAS GESCHWISTER, DAS H112 § 3 STEHENGELASSEN HAT.
   H112 § 3 hat `th` entschaerft und dabei „die kleinste Schrift des Produkts" gemeint. Diese Regel
   hier ist dieselbe Sache an einer zweiten Stelle: `.inner-table th` stand bei .74rem ≈ 11,84 px,
   grossgeschrieben und gesperrt — KLEINER als die 12,48 px, die H112 als neuen Boden ausgewiesen
   hat. Aufgefallen ist sie nicht, weil `h111-lesbarkeit.spec.ts` nur Kaeufer- und Anbieterflaechen
   misst und `.inner-table` allein in `control/benutzer.ejs:85` vorkommt — der Betreiberbereich
   wird von keiner Lesbarkeitsmessung erfasst.
   Dieselbe Entscheidung, dieselben drei Aenderungen. */
.inner-table th{background:transparent;color:var(--muted);font-size:var(--fs-xs)}
.inner-table tbody tr{border-bottom:1px solid var(--border)}
.inner-table tbody tr:last-child{border-bottom:none}

/* ---- Responsiv ---- */
@media (max-width:640px){
  nav.topbar .nav-links{gap:13px}
  .container{padding:26px 16px}
  h1{font-size:1.65rem}
  .card{padding:22px}
}

/* Logo */
.brand{display:inline-flex;align-items:center;gap:9px}
.logo-mark{color:var(--primary);flex-shrink:0}
/* Landing */
.hero h1{font-size:2.4rem;max-width:20ch}
.hero .lead{max-width:62ch}
.hero-code{margin-top:24px}
/* UX-1 § 1 — Rahmen von Inhalt trennen: Hero und Schluss-CTA sind Einstieg und Ausstieg, nicht
   Zusagen. Sie teilen EINE andere Flaeche (accent-soft, in beiden Schemata definiert); die drei
   Zusagen behalten die Karte. Die Katalogkarte ist die Nebenrolle und kleiner. */
.card-rahmen{background:var(--accent-soft);border-color:transparent;box-shadow:none}
.card-nebenrolle{padding:18px 24px}
.card-nebenrolle h3{margin-bottom:6px}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:640px){.two-col{grid-template-columns:minmax(0,1fr)}.hero h1{font-size:1.8rem}}

/* Auth */
/* ⛔ H176 § 4: 420px → 600px. Die Registrierungskarte traegt seit A2e Firmenname, Land,
   USt-IdNr. und die vollstaendige Anschrift — bei 420px stand jedes dieser Felder allein
   untereinander, und das Formular war laenger als der Bildschirm. Mit 600px stehen die
   zusammengehoerenden Paare (E-Mail/Passwort, Firmenname/Land, PLZ/Ort) nebeneinander.
   ⚠️ EINE Zahl, kein Bereich: eine Spanne wird bei jeder Ansicht neu ausgelegt.
   ⚠️ Das zweispaltige Raster ist `.two-col` (oben) — es bricht bei 640px selbst um, also
   BEVOR die Karte an ihre Breite stoesst. Unter Mobilbreite steht deshalb alles einspaltig. */
.auth-card{max-width:600px;margin:48px auto}
/* ⚠️ Gilt fuer JEDEN Knopf in der Karte, also auch fuer den Absende-Knopf: er steht ueber die
   volle Breite und klebt nicht in einer Spalte. Die Regel ist aelter als H176 und bleibt. */
.auth-card .btn{width:100%}
.auth-sub{text-align:center;margin-top:18px;color:var(--muted);font-size:.92rem}


/* Home */
.home-head{margin-bottom:24px}
.home-head h1{margin-bottom:2px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px}
/* ⛔ H114 § 1 — DIE DREI VERBLIEBENEN REGELN MIT GROSSSCHREIBUNG UND SPERRUNG.
   H112 § 3 hat `th` entschaerft, H113 das Geschwister `.inner-table th`. Diese drei standen noch:
   `.stat-label`, `.price-label`, `.stat-tile-label` — die Beschriftungen der Kennzahlkacheln.
   ⚠️ Sie liegen UEBER dem Boden (13,12 px bzw. 12,48 px), und trotzdem fallen Grossschreibung und
   Sperrung: der Grund war nie die Groesse allein. Grossbuchstaben nehmen dem Auge die Wortform,
   die es zuerst greift, die Sperrung zerlegt sie weiter — eine Kachel, deren Beschriftung man
   schlechter liest als ihren Wert, hat die Beschriftung umsonst.
   ⛔ GROESSE UND GEWICHT BLEIBEN. Erkennbar sind die Beschriftungen durch Gewicht (600) und
   Farbe; nur die zwei Erschwernisse fallen. Danach traegt `style.css` KEIN
   `text-transform:uppercase` mehr — `capitalize` (Monatsnamen) ist eine andere Sache. */
.stat-label{color:var(--muted);font-size:.82rem;font-weight:600}
.stat-value{font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
.path-card h2{margin-bottom:8px}
.path-card .btn,.path-card .btn-row{margin-top:16px}
.quickstart{border-left:3px solid var(--primary)}
/* UI-2: dezenter Einzeiler "auch anbieten/nutzen?" unter der prominenten Karte */
.home-also{margin-top:14px;font-size:.95rem}

/* Footer-Feinschliff */
footer.site-footer p{margin:0}
.footer-legal{margin-top:8px;font-size:.82rem;opacity:.75}

/* Zugriffs-Hinweis */
.access-hint{border-left:3px solid var(--primary)}
.access-hint h3{margin-bottom:8px}

/* Nav responsiv */
nav.topbar{flex-wrap:nowrap;gap:18px}
nav.topbar .brand{flex-shrink:0;margin-right:auto}
nav.topbar .nav-links{display:flex;flex-wrap:nowrap;align-items:center;gap:18px}
nav.topbar .nav-links a{white-space:nowrap}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);color:var(--muted);width:38px;height:38px;border-radius:var(--radius-sm);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.nav-toggle svg{width:20px;height:20px}
@media (max-width:820px){
  nav.topbar{flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  nav.topbar .nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:15px;padding-top:15px;margin-top:12px;border-top:1px solid var(--border)}
  nav.topbar.nav-open .nav-links{display:flex}
}

/* Produkte */
.products-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.products-head h1{margin:0}
.empty-state{text-align:center;padding:40px 28px}
.empty-state h3{margin-bottom:8px}
.empty-state .btn{margin-top:18px}
.form-narrow{max-width:620px;margin:0 auto}
.advanced{border:1px solid var(--border);border-radius:var(--radius-sm);margin:4px 0 22px;background:var(--surface-2)}
.advanced summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:.92rem;user-select:none}
.advanced summary:hover{color:var(--primary)}
.advanced-body{padding:4px 16px 8px}
/* UX-1 § 2 — das Schluesselformular als Raster: Name · Grenze (+ „ohne Grenze") · Knopf; mobil
   untereinander. Vorher eine Flex-Zeile ohne Umbruch (mobil −492 px). */
.schluessel-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) auto;gap:12px;align-items:end}
.schluessel-form-feld label:not(.check){display:block;font-weight:600;margin-bottom:6px;font-size:.9rem}
.schluessel-form input[type="text"]{padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:1rem;font-family:inherit;background:var(--surface);color:var(--text);width:100%;min-width:0}
.schluessel-form input[type="text"]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.schluessel-form-grenze{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.schluessel-form-grenze input[type="text"]{width:110px}
.schluessel-form-knopf .btn{white-space:nowrap}
@media (max-width:640px){.schluessel-form{grid-template-columns:minmax(0,1fr)}.schluessel-form-knopf .btn{width:100%}}
.zustimmung-liste{list-style:none;padding:0;margin:0 0 16px}
.zustimmung-liste li{padding:10px 0;border-top:1px solid var(--border);font-size:.95rem}
.rueckmeldung>summary{cursor:pointer;list-style:none}
.rueckmeldung>summary::-webkit-details-marker{display:none}
.rueckmeldung>summary h3{display:inline-flex;align-items:center;gap:8px}
.rueckmeldung>summary h3::before{content:'▸';font-size:.8em;color:var(--muted)}
.rueckmeldung[open]>summary h3::before{content:'▾'}
.check-row{display:flex;flex-wrap:wrap;gap:16px}
.check{display:inline-flex;align-items:center;gap:7px;font-weight:400}
.check input{width:auto}
.badge-info{background:var(--accent-soft);color:var(--primary)}

/* Katalog */
.catalog-head{margin-bottom:20px}
.catalog-head .lead{max-width:60ch}
.catalog-filter{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.catalog-filter input[type="search"]{flex:1;min-width:200px}
.catalog-filter select{min-width:170px;flex-shrink:0}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.catalog-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-decoration:none;color:var(--text);transition:border-color .15s ease,transform .05s ease}
.catalog-card:hover{border-color:var(--primary);text-decoration:none}
/* ⛔ H112 § 4 — DER TITEL BEKOMMT DIE VOLLE BREITE ZURUECK.
   Der Streifen ist ein Flex-Container; die Plakette ist sein zweites Kind und nahm dem Titel die
   Breite (Fable: „quetscht den Titel auf ein Wort je Zeile"). H111 mass 3 px Ueberlauf am
   Streifen selbst. `min-width:0` erlaubt dem Titelblock, unter seine Inhaltsbreite zu schrumpfen
   (Flex-Kinder haben `min-width:auto` und tun das sonst NICHT — genau das erzeugte den Ueberlauf),
   und `flex:1` gibt ihm den freien Platz. Die Plakette schrumpft nicht mehr mit. */
/* ⚠️ `flex-wrap:wrap` ist der Rest der Loesung, ebenfalls gemessen: mit `min-width:0` und
   `overflow-wrap:anywhere` blieben 11–13 px Ueberlauf an drei Titeln — der Titel schrumpfte bis
   an die Grenze und darueber hinaus, weil die Plakette ihm bis zuletzt Platz nahm. Darf der
   Streifen umbrechen, rutscht die Plakette bei Enge in die naechste Zeile, und der Titel
   bekommt die volle Breite zurueck. Genau das verlangt § 4. */
.catalog-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px;flex-wrap:wrap}
/* ⚠️ DREI ANLAEUFE, UND DER DRITTE IST DER RICHTIGE — jeder Schritt gemessen:
     `flex:1;min-width:0`                  → der Titel schrumpfte, sein Text lief ueber (98/56/51 px)
     `+ overflow-wrap:anywhere`            → 11–13 px blieben
     gemessen warum: clientWidth 4 px      → der Titel war fast VOLLSTAENDIG kollabiert
   `flex:1` setzt `flex-basis:0%`; zusammen mit `min-width:0` UND `overflow-wrap:anywhere` (das
   die Mindest-Inhaltsbreite auf EIN Zeichen senkt) darf der Titel beliebig schrumpfen, waehrend
   die Plakette daneben `nowrap` traegt und ihren Platz behaelt.
   Richtig ist `flex:1 1 auto` OHNE `min-width:0`: der Titel waechst in den freien Platz, faellt
   aber nicht unter seine Mindest-Inhaltsbreite. `overflow-wrap:break-word` bricht lange Woerter
   („JSONPlaceholder"), senkt diese Mindestbreite aber NICHT — das ist der Unterschied zu
   `anywhere` und der ganze Grund, warum hier nicht dasselbe Schluesselwort steht. */
.catalog-card-top h3{margin:0;font-size:1.05rem;flex:1 1 auto;overflow-wrap:break-word}
.catalog-card-top .badge-verified{flex:0 0 auto}
.catalog-desc{color:var(--muted);font-size:.92rem;flex:1;margin-bottom:16px;line-height:1.5}
.catalog-card-foot{display:flex;align-items:baseline;gap:6px}
.catalog-price{font-size:1.15rem;font-weight:700;color:var(--text)}
.catalog-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
/* ⛔ H115 § 2 — DER BODEN GILT AUCH FUER KLEINELEMENTE, UND ZUM DRITTEN MAL DIESELBE SACHE.
   H112 hat `th` auf `--fs-xs` gehoben, H114 die drei Kennzahlbeschriftungen entschaerft. Hier
   fallen die letzten VIER Regeln unter dem Boden, die auf KUNDENflaechen liegen (die drei aus dem
   Browser-Lauf stehen im Betreiberbereich und bleiben, wo sie sind — `/control` ist Jans Werkzeug).
   Gemessen in `phaseH114_boden.txt`; der Boden ist eine Zahl (--fs-xs = 12,48 px), keine Abwaegung
   je Flaeche.
   ⚠️ `.help-icon` und `.tag-chip` sind Kleinelemente mit fester Hoehe bzw. `white-space:nowrap`.
   Ob das Anheben ihr Layout sprengt, entscheidet die Ueberlaufprobe, nicht das Auge. */
.tag-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;background:var(--surface-2);color:var(--muted);border:1px solid var(--border);white-space:nowrap;line-height:1.4}
.detail-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.detail-back{margin-bottom:16px}
.detail-layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:start}
.detail-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.detail-head h1{margin:0}
.detail-desc{margin-bottom:24px}
.methods{display:flex;gap:8px;flex-wrap:wrap}
.method-badge{display:inline-block;padding:4px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.82rem;font-weight:600;font-family:ui-monospace,monospace;background:var(--surface-2)}
/* ⛔ H112 § 4 — EINE ANGABE, KEINE AUSZEICHNUNG.
   Fable: „‚Verifiziertes Unternehmen' ist das staerkste Element jeder Karte (gefuelltes
   Primaerblau), staerker als Name und Preis — und quetscht den Titel auf ein Wort je Zeile."
   H111 mass dazu: 12,00 px (der zweitkleinste Text im Produkt) und 2 px ueber das Elternteil
   hinaus.
   ⛔ Ein Vertrauenssiegel, das lauter ist als der Produktname, ist genau das Beruhigungssymbol,
   das bei unserem Kaeufer das Vertrauen SENKT (Zielbild § 6). Die Verifizierung ist eine
   Tatsache und darf dastehen — als Angabe.
   Also: Umriss statt Fuellung, Textfarbe statt Primaerblau, und NICHT kleiner als der Fliesstext
   (--fs-sm .86rem statt .75rem). `white-space:nowrap` haelt sie auf einer Zeile, damit sie dem
   Titel keine Breite mehr nimmt. */
.badge-verified{display:inline-block;padding:2px 8px;border-radius:999px;font-size:var(--fs-sm);font-weight:500;background:transparent;color:var(--muted);border:1px solid var(--border);margin-left:8px;vertical-align:middle;white-space:nowrap}
.price-card{position:sticky;top:90px}
.price-label{display:block;color:var(--muted);font-size:.82rem;font-weight:600;margin-bottom:6px}  /* H114 § 1 */
.price-big{display:block;font-size:2.2rem;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.price-sep{border:none;border-top:1px solid var(--border);margin:18px 0}
.steps-sm li{margin-bottom:10px;padding-left:38px}
.steps-sm li::before{width:26px;height:26px;font-size:.82rem}
@media (max-width:760px){.detail-layout{grid-template-columns:minmax(0,1fr)}.price-card{position:static}}

/* ---- Report Modal Overlay ---- */
#report-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#report-modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 440px;
  width: 100%;
  padding: 24px;
  position: relative;
}
.report-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.report-modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
.report-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
  transition: color .15s ease;
}
.report-modal-close:hover {
  color: var(--text);
}
#report-modal select,
#report-modal textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
}

/* ── Language switcher ── */
.lang-switcher { margin-top: 8px; font-size: 0.82rem; }
.lang-switcher a { color: var(--muted); text-decoration: none; }
.lang-switcher a:hover { color: var(--text); }
.lang-switcher a.lang-active { color: var(--primary); font-weight: 600; }

/* ============================================================
   UX-DS-1 — Design-System-Fundament (Stufe 1)
   Komponenten-Primitive + ins CSS gehobene Inline-Bibliotheken.
   Reine Präsentation: kein Verhalten, keine Texte, keine Routen.
   ============================================================ */

/* ---- A11y: sichtbarer Fokus auf allem Interaktiven (WCAG 2.1 AA, §5) ---- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--radius-sm);
}

/* ---- Chips: Inhalts-Tag vs. SLA-Tier vs. Auswahl-Chip (Drift aufgelöst) ----
   .tag-chip = Inhalts-Tag (grau, global). Der SLA-Tier bekommt eine EIGENE Klasse,
   sonst sieht eine Verfügbarkeits-Zusage aus wie ein Themen-Tag. */
.sla-chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;
  border:1px solid var(--border);white-space:nowrap;line-height:1.4;background:var(--surface-2);color:var(--muted)}
.sla-chip-reliable{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-border)}
.sla-chip-solid{background:var(--accent-soft);color:var(--primary);border-color:var(--accent-soft)}
.sla-chip-limited{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-border)}
.sla-chip-new{background:var(--surface-2);color:var(--muted)}
/* Akzent-Chip des Produkt-Editors — war die ZWEITE, kollidierende .tag-chip-Definition
   (products/edit.ejs:317). Jetzt eigener Name: der graue Katalog-Chip bleibt unberührt. */
.tag-chip-accent{display:inline-flex;align-items:center;gap:var(--space-1);
  padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:500;
  background:var(--accent-soft);color:var(--primary);
  border:1px solid color-mix(in srgb, var(--primary) 25%, transparent)}
.tag-chip-accent .tag-remove{cursor:pointer;font-weight:bold;margin-left:2px;opacity:.55}
.tag-chip-accent .tag-remove:hover{opacity:1}

/* ---- EIN Feld-/Checkbox-Primitive (ersetzt die 4–5 divergenten Muster) ---- */
.form-field{display:grid;gap:var(--space-1);margin-bottom:var(--space-4)}
.form-field>span,.form-field>label{font-weight:600;font-size:var(--fs-md)}
.form-field input:not([type="checkbox"]):not([type="radio"]),.form-field select,.form-field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:var(--fs-base);font-family:inherit;background:var(--surface);color:var(--text);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring);
}
/* Checkbox-Zeile: Kästchen oben-bündig, Text normal gewichtet, klickbares Label. */
.checkbox-row{display:flex;align-items:flex-start;gap:var(--space-2);font-weight:400;line-height:var(--lh-normal)}
.checkbox-row input[type="checkbox"],.checkbox-row input[type="radio"]{width:auto;margin-top:.28em;flex-shrink:0}
.checkbox-row>span{flex:1}

/* ---- Feldfehler: EIN System statt wiederholter inline-<span> ---- */
.field-error{display:block;color:var(--error-text);font-size:var(--fs-sm);margin-top:var(--space-1)}
/* .alert war in register/onboarding benutzt, aber nie definiert -> auf das Flash-System ziehen */
.alert{padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:var(--space-5);font-size:var(--fs-md);border:1px solid transparent}
.alert-error{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border)}
.alert-success{background:var(--success-bg);color:var(--success-text);border-color:var(--success-border)}
.alert-warning{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-border)}

/* ---- Standard-Seitenkopf ---- */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);
  flex-wrap:wrap;margin-bottom:var(--space-6)}
.page-header h1{margin:0 0 var(--space-1)}
.page-header .page-desc{color:var(--muted);font-size:var(--fs-md);margin:0;max-width:70ch}

/* ---- Cockpit-Kennzahl (hell/dunkel-Parität, AA-Kontrast) ---- */
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-1);box-shadow:var(--shadow)}
.stat-tile-label{color:var(--muted);font-size:var(--fs-xs);font-weight:600}  /* H114 § 1 */
.stat-tile-value{font-size:var(--fs-xl);font-weight:700;letter-spacing:-.02em;color:var(--text)}
.stat-tile-ok .stat-tile-value{color:var(--success-text)}
.stat-tile-warn .stat-tile-value{color:var(--warn-fg)}
.stat-tile-bad .stat-tile-value{color:var(--error-text)}

/* ---- Status-Fläche (Ampel) — ersetzt hartkodierte Hellfarben (Dark-Bruch B4) ---- */
.status-panel{border-radius:var(--radius-sm);padding:var(--space-4) var(--space-5);border:1px solid transparent}
.status-panel-ok{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-border)}
.status-panel-bad{background:var(--error-bg);color:var(--error-text);border-color:var(--error-border)}

/* ---- Zugängliches Bestätigungs-Modal (ersetzt natives confirm()) ---- */
.confirm-overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--overlay);
  display:flex;align-items:center;justify-content:center;padding:var(--space-5)}
.confirm-overlay[hidden]{display:none}
.confirm-dialog{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);max-width:460px;width:100%;padding:var(--space-6)}
.confirm-dialog h2{margin:0 0 var(--space-3);font-size:var(--fs-lg)}
.confirm-dialog p{margin:0 0 var(--space-5);color:var(--text);line-height:var(--lh-normal)}
.confirm-actions{display:flex;gap:var(--space-3);justify-content:flex-end;flex-wrap:wrap}

/* ---- Hinweis-Tafel (H176 § 1) ------------------------------------------------------------
   ⛔ EINE BAUFORM STATT ZWEIER. Bis H176 standen hier zwei Dinge, die dasselbe sagen und
   sechzehn Zeilen auseinander wohnten: der `verify-banner` als Sonderbau AUSSERHALB des
   `.container` (sticky, volle Breite, eigene Knopfklasse) und der Betriebshinweis als
   `.alert alert-error` DARIN. Zwei Formen fuer „diese Seite hat eine offene Bedingung" sind
   eine Form zu viel — der Nutzer lernt die zweite nicht mehr.

   Die Tafel wohnt IM `.container`, direkt ueber dem Betriebshinweis. Der Sonderfall
   „ausserhalb des Rahmens" faellt damit; der Skip-Link bleibt erstes fokussierbares Element,
   weil er vor der Navigation steht und die Tafel dahinter.

   Innenabstand und Radius wie `.alert` (14px 16px, --radius-sm) — dieselbe Sache, dieselbe
   Geometrie. Farben ueber Tokens, also auch bei prefers-color-scheme:dark. */
.hinweis-tafel{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--space-2);padding:14px 16px;margin-bottom:var(--space-5);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  font-size:var(--fs-md)}
/* Der heutige verify-Fall und der Betriebshinweis: dieselbe Sache, dieselbe Form. */
.hinweis-tafel--warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-fg)}
/* Die Schrittfolge auf /home: eine Auskunft, keine Warnung. */
.hinweis-tafel--info{background:var(--accent-soft);border-color:var(--border)}
.hinweis-tafel-text{color:inherit;font-size:.9rem;font-weight:500}
.hinweis-tafel-knopf{background:var(--warn-border);color:#fff;border:1px solid var(--warn-strong);
  padding:5px 12px;font-size:var(--fs-xs);border-radius:6px;cursor:pointer;white-space:nowrap;font-family:inherit}
.hinweis-tafel-knopf:disabled{opacity:.6;cursor:not-allowed}
/* Die Abkuehlzeit faerbt die Tafel um — Geometrie unveraendert (H176 § 1: Mechanik bleibt). */
.hinweis-tafel.cooldown{background:var(--error-bg);border-color:var(--error-border)}
.hinweis-tafel.cooldown .hinweis-tafel-text{color:var(--error-text);font-variant-numeric:tabular-nums}
.hinweis-tafel.cooldown .hinweis-tafel-knopf{background:var(--danger-solid);border-color:var(--danger-solid-hover)}

/* ---- Schrittfolge (H176 § 2) --------------------------------------------------------------
   Die Tafel auf /home fuehrt durch die Einrichtung. Ein waagerechter Streifen, der einrastet:
   `scroll-snap` haelt immer eine ganze Karte im Blick, statt sie halb abzuschneiden.

   ⚠️ Die Tafel selbst schaltet auf Spaltenfluss um — `.hinweis-tafel` ist eine Zeile mit Text
   und Knopf, die Schrittfolge ist ein Block mit Streifen und Punktleiste darunter. */
/*
   ⛔⛔ H176-N3 — `flex-wrap:nowrap` IST DER FIX, UND ER STEHT HIER UND NICHT AM STREIFEN.

   `.hinweis-tafel` oben setzt `flex-wrap:wrap` — richtig fuer eine Zeile aus Text und Knopf,
   die auf schmalen Flaechen umbrechen soll. Diese Regel hat bis H176-N3 nur die Richtung
   ueberschrieben (`column`), nicht das Umbrechen. Und in einem MEHRZEILIGEN Flex-Container
   stretcht `align-items:stretch` die Kinder auf die Groesse IHRER ZEILE, nicht auf die des
   Containers — bei `column wrap` ist eine Zeile eine Spalte, und ihre Breite bestimmt das
   breiteste Kind. Der Streifen hat sich damit selbst bemessen: 2436px bei neun Karten,
   waehrend der `.container` 900px breit ist. `overflow-x:auto` am Streifen fand nie einen
   Ueberhang, weil der Streifen so breit war wie sein Inhalt.

   GEMESSEN, NICHT VERMUTET (H176-N3 § 1, bei 1280px Fensterbreite, neun Karten):

     .container         clientWidth  900
     .schrittfolge-tafel clientWidth 858   ← NICHT breiter als der Container
     .schrittfolge      clientWidth 2436 · scrollWidth 2436 · overflow-x auto

   ⚠️ UND WAS ES NICHT WAR: `min-width:0` am Streifen — der klassische Flex-Griff — aendert
   NICHTS (2436 vorher wie nachher, in situ probiert). Die automatische Mindestgroesse greift
   auf der Hauptachse, und die ist hier senkrecht. Wer sie gesetzt haette, haette eine Zeile
   hinterlassen, die aussieht wie eine Loesung und keine ist.

   Mit `nowrap`: Streifen 826px, scrollWidth 2436 — er scrollt. Bei einer, zwei oder drei
   Karten bleibt er 826px und die Karten behalten ihre 260px; nichts wird zusammengedrueckt.
*/
.schrittfolge-tafel{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:var(--space-3)}
.schrittfolge{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:4px;-webkit-overflow-scrolling:touch}
.schrittfolge-karte{flex:0 0 260px;scroll-snap-align:start;display:flex;flex-direction:column;
  gap:6px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm)}
.schrittfolge-nummer{margin:0;font-size:var(--fs-xs);font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
.schrittfolge-titel{margin:0;font-size:.9rem;line-height:1.35}
/* Abgehakt: gedimmt, NICHT durchgestrichen — erledigt ist nicht ungueltig. Kein Knopf. */
.schrittfolge-karte--ok{border-color:var(--success-border)}
.schrittfolge-karte--ok .schrittfolge-titel,
.schrittfolge-karte--ok .schrittfolge-nummer{color:var(--muted)}
.schrittfolge-haken{color:var(--success-text);margin-right:4px}
/* Der erste offene Schritt ist der EINZIGE Akzent der Tafel. */
.schrittfolge-karte--auf{border-color:var(--primary)}
/* Die Testphasen-Karte ist kein Schritt: keine Nummer, kein Haken, kein Knopf. */
.schrittfolge-karte--hinweis{border-style:dashed;justify-content:center}
.schrittfolge-punkte{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.schrittfolge-punkt{display:flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:999px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);font-size:var(--fs-xs);font-weight:600;text-decoration:none;
  font-variant-numeric:tabular-nums}
.schrittfolge-punkt--ok{color:var(--success-text);border-color:var(--success-border)}
.schrittfolge-punkt--auf{background:var(--primary);border-color:var(--primary);color:var(--primary-text)}

/* ---- Hilfe-Seiten (derselbe Block war 4× inline dupliziert) ---- */
.help-page{max-width:680px;line-height:1.7}
.help-page h1{margin-bottom:var(--space-5)}
.help-page h2{margin:28px 0 10px}
.help-page p{margin-bottom:var(--space-4)}
.help-page ul,.help-page ol{margin-bottom:var(--space-4);padding-left:var(--space-5)}
.help-page li{margin-bottom:var(--space-1)}
.help-page table{width:100%;border-collapse:collapse;margin-bottom:var(--space-4)}
.help-page th,.help-page td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);font-size:.93rem}
.help-page th{background:var(--surface-2);font-weight:600;color:var(--muted);font-size:var(--fs-sm)}

/* ---- Produkt-Editor: die 92-Zeilen-Inline-Bibliothek (products/edit.ejs:294-385), jetzt global.
        Geometrie 1:1 übernommen; nur die eine Hardcoded-Farbe (#ef4444) läuft über den Token. ---- */
.toggle-label{margin-bottom:10px}
.toggle-switch-row{display:flex;align-items:center;gap:var(--space-3);user-select:none}
.toggle-side{font-size:.9rem;font-weight:500;color:var(--muted)}
.toggle-track{position:relative;width:56px;height:30px;border-radius:15px;border:none;cursor:pointer;padding:0;
  background:var(--border);transition:background .2s ease;flex-shrink:0}
.toggle-track[aria-checked="true"]{background:var(--primary)}
.toggle-thumb{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .2s ease}
.toggle-track[aria-checked="true"] .toggle-thumb{transform:translateX(26px)}
.disabled-toggle{opacity:.45;cursor:not-allowed}

.tag-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--space-2);min-height:28px}
.tag-suggestions{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag-suggestion{cursor:pointer;border:1px dashed var(--border);background:transparent;color:var(--muted)}
.tag-suggestion:hover,.tag-suggestion.used{background:var(--accent-soft);color:var(--primary);border-color:var(--primary)}
.tag-input-row{display:flex;gap:6px}
.tag-input-row input{flex:1}

.schema-block{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-5);margin-bottom:0}
.schema-block legend{font-weight:600;padding:0 var(--space-2);font-size:var(--fs-md)}
.schema-mode-row{margin-bottom:14px;margin-top:2px}
.schema-fields{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:10px}
.schema-field-row{display:grid;grid-template-columns:140px auto auto auto;gap:var(--space-2);align-items:center}
@media (max-width:700px){.schema-field-row{grid-template-columns:1fr 1fr}}
.schema-field-row select{width:100px}
.schema-field-row input,.schema-field-row select{padding:9px 11px;border:1px solid var(--border);
  border-radius:var(--radius-sm);font-size:var(--fs-md);font-family:inherit;background:var(--surface);color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease}
.schema-field-row input:focus,.schema-field-row select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--ring)}
.schema-field-row .field-desc{width:100%;min-width:0}
.btn-remove-field{background:transparent;border:none;color:var(--danger);font-size:1.2rem;
  cursor:pointer;padding:0 var(--space-1);line-height:1}

.help-icon{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  border:1px solid var(--border);color:var(--muted);font-size:var(--fs-xs);font-weight:700;font-style:normal;  /* H115 § 2 */
  text-decoration:none;line-height:1;flex-shrink:0;transition:color .15s ease,border-color .15s ease}
.help-icon:hover{color:var(--primary);border-color:var(--primary);text-decoration:none}
legend .help-icon{width:19px;height:19px;font-size:.8rem;vertical-align:middle}

/* ---- readonly-Felder (waren #f5f5f5/#666 -> im Dunkeln gebrochen, B4) ---- */
.field-readonly{background:var(--readonly-bg);color:var(--readonly-fg)}

/* ============================================================
   H53 § 2 — BARRIEREFREIHEITS-GRUNDLAGEN
   Kein Aussehen geaendert: Der Skip-Link ist ausserhalb des Sichtfelds, bis er Fokus bekommt,
   und der Bewegungs-Block wirkt nur, wenn das Betriebssystem danach fragt.
   ============================================================ */

/* ---- (a) Skip-Link: nur bei Tastaturfokus sichtbar ----
   Bewusst NICHT display:none und nicht visibility:hidden — beides nimmt das Element aus der
   Tabulator-Reihenfolge, und dann ist der Link keiner. Er steht ausserhalb des Sichtfelds und
   springt bei :focus an seinen Platz. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;
  padding:10px 16px;border-radius:var(--radius-sm);
  background:var(--primary);color:#fff;text-decoration:none;font-size:.95rem}
.skip-link:focus{left:8px;top:8px;outline:2px solid var(--primary);outline-offset:2px}
/* Das Sprungziel bekommt tabindex="-1" und darf dafuer keinen Fokusrahmen zeigen — der Rahmen
   gehoert an das Bedienelement, nicht an den Textbereich. */
#hauptinhalt:focus{outline:none}

/* ---- (c) prefers-reduced-motion ----
   Gemessen vor dem Bau (H53 § 2c): 14 `transition`-Deklarationen, 0 `animation`, 0 `@keyframes`,
   1 `scroll-behavior:smooth`. Der Block ist also KEINE Vorsorge, sondern greift heute.
   `0.01ms` statt `none`: `none` bricht Skripte, die auf `transitionend` warten — das Ereignis
   feuert dann nie. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important}
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   H71 — DIE FARBWAHLEN AUS DEN `style="…"`-ATTRIBUTEN, ALS KLASSEN.

   WOZU. Fuenfzehn `style`-Attribute trugen EJS-Ausdruecke im Wert und waren damit die Untergrenze
   dessen, was `style-src 'unsafe-inline'` weiter braucht (H70 § 4.1). Zehn davon waehlen eine FARBE
   aus einer geschlossenen Menge — die wandern hierher, denn `class` unterliegt keiner
   CSP-Direktive. Die uebrigen fuenf tragen eine Zahl aus Daten und gehen in den
   `<style nonce>`-Block je Anfrage (`src/lib/stilRegel.ts`).

   ⛔ JEDER WERT IST ZEICHENGLEICH UEBERNOMMEN. Kein neuer Farbton, keine Vereinheitlichung. Das
   heisst auch: `var(--danger,#dc2626)` und `var(--danger,red)` bleiben ZWEI Ketten, obwohl beide
   dasselbe malen, solange `--danger` im `:root` steht (Zeile 26) — und das tut es, der Rueckfall
   ist tot. Sie zusammenzulegen waere Gestaltung, und die ist nicht Teil einer Umformung.
   (H71 § 2, gemeldet.)

   ⚠️ DIE STELLE IM STYLESHEET IST NICHT BELIEBIG. `.u-balken-*` setzt `background` und trifft
   dieselben Elemente wie `.budget-bar-fill` (Zeile 245), das ebenfalls `background` setzt. Beide
   Selektoren haben dieselbe Spezifitaet (0,1,0) — es entscheidet die REIHENFOLGE. Deshalb steht
   dieser Block am ENDE der Datei. Wer ihn nach oben schiebt, dreht drei Balkenfarben auf
   `var(--primary)` zurueck, und kein Test am Quelltext wuerde es sehen.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* control/audit.ejs:40 · control/system.ejs:355 · :387 — der ●-Punkt und die Stale-Marke */
.u-punkt-rot{font-weight:700;color:var(--danger,#dc2626)}
.u-punkt-gelb{font-weight:700;color:var(--warning,#d97706)}
.u-punkt-gruen{font-weight:700;color:var(--success-text,#16a34a)}

/* control/audit.ejs:62 — der farbige Rand der Verifikationskarte */
.u-kartenrand-rot{margin-bottom:16px;border-left:4px solid var(--danger,#dc2626)}
.u-kartenrand-gelb{margin-bottom:16px;border-left:4px solid var(--warning,#d97706)}
.u-kartenrand-gruen{margin-bottom:16px;border-left:4px solid var(--success-text,#16a34a)}

/* control/audit.ejs:63 — die Ueberschrift derselben Karte */
.u-kartentitel-rot{margin:0 0 6px;color:var(--danger,#dc2626)}
.u-kartentitel-gelb{margin:0 0 6px;color:var(--warning,#d97706)}
.u-kartentitel-gruen{margin:0 0 6px;color:var(--success-text,#16a34a)}

/* control/finanzen.ejs:36 · control/system.ejs:107 · :136 — die Fuellfarbe des Budgetbalkens.
   ⚠️ Muss NACH .budget-bar-fill stehen, siehe Kopf dieses Blocks. */
.u-balken-rot{background:var(--danger,red)}
.u-balken-gelb{background:var(--warning,orange)}
.u-balken-gruen{background:var(--success,green)}

/* control/system.ejs:177 — die Budgetstufe. Andere Rueckfallwerte als .u-punkt-*, deshalb eigene
   Ketten: 'red'/'orange'/'green' statt der Hexwerte. Zeichengleich uebernommen. */

/* control/system.ejs:297 — die Plakette des Steuerregimes. Hier haengt am Ausdruck ein ganzes
   Deklarationspaar (background UND color), nicht nur ein Wert. */
.u-schema-regel{font-size:0.7rem;font-weight:600;padding:2px 8px;border-radius:10px;vertical-align:middle;background:rgba(37,99,235,0.12);color:var(--primary,#2563eb)}
.u-schema-ku{font-size:0.7rem;font-weight:600;padding:2px 8px;border-radius:10px;vertical-align:middle;background:rgba(22,163,74,0.12);color:var(--success-text,#16a34a)}

/* control/system.ejs:309 · :464 — die grosse Kennzahl. Dieselbe Kette an zwei Stellen, deshalb
   dieselbe Klasse; :309 nutzt rot/gruen, :464 gelb/gruen. */
.u-kennzahl-rot{font-size:1.2rem;color:var(--danger,#dc2626)}
.u-kennzahl-gelb{font-size:1.2rem;color:var(--warning,#d97706)}
.u-kennzahl-gruen{font-size:1.2rem;color:var(--success-text,#16a34a)}

/* control/system.ejs:539 — das Urteil der Buchprobe. Ohne Rueckfallwert, zeichengleich. */
.u-buch-ok{color:var(--success-text)}


/* ═══ H72 — DIE 691 ═══════════════════════════════════════════════════════════════════════════

   ERZEUGT von scripts/h72-umformung.mjs, nicht von Hand geschrieben. Jede Regel entspricht genau
   einer normalisierten Deklarationskette aus den Ansichten; der Klassenname ist aus ihr abgeleitet
   (klein, nicht-alphanumerisch zu '-', ab 48 Zeichen mit acht Hexstellen aus sha256 gekuerzt).

   ⛔ DAS ERGEBNIS IST EINE VERLAGERUNG, KEINE VEREINHEITLICHUNG. 264 Regeln fuer
   687 Stellen, davon
   164 mit genau einem Nutzer. Der Gewinn ist die CSP, nicht die
   Wiederverwendung. Wer hier spaeter ein Design-System baut, hat dieselbe Arbeit vor sich — nur an
   einer Stelle, an der sie sichtbar ist.

   ⚠️ Die Regel traegt die NORMALISIERTE Kette, die Karte die ROHE. Vier Ketten unterschieden sich
   nur im Leerraum nach einem Semikolon (in CSS bedeutungslos, nachgemessen); die Umkehrprobe
   stellt trotzdem Byte fuer Byte das Original her.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.u-background-fef3c7-color-92400e{background:#fef3c7;color:#92400e}
.u-background-var-danger-dc2626-border-colo-11686132{background:var(--danger,#dc2626);border-color:var(--danger,#dc2626)}
.u-background-var-danger-dc2626-border-colo-50682df7{background:var(--danger,#dc2626);border-color:var(--danger,#dc2626);color:#fff}
.u-background-var-success-bg-border-1px-sol-85bee66b{background:var(--success-bg);border:1px solid var(--success-border);margin-bottom:20px}
.u-border-1px-solid-var-border-border-radiu-4be6350f{border:1px solid var(--border);border-radius:6px;padding:12px;margin-bottom:16px;background:var(--surface-2)}
.u-border-1px-solid-var-border-border-radiu-5fe2c877{border:1px solid var(--border);border-radius:8px;padding:12px}
.u-border-1px-solid-var-border-ddd-border-r-c72e7f44{border:1px solid var(--border, #ddd);border-radius:8px;padding:16px}
.u-border-1px-solid-var-border-e5e7eb-borde-199df923{border:1px solid var(--border,#e5e7eb);border-radius:6px;padding:14px;margin-bottom:14px}
.u-border-2px-solid-var-warning-d97706-back-12779699{border:2px solid var(--warning,#d97706);background:rgba(217,119,6,0.08)}
.u-border-left-4px-solid-var-accent-2b6cb0-088a5f5b{border-left:4px solid var(--accent, #2b6cb0);background:rgba(43,108,176,0.06);padding:12px;border-radius:6px;margin-bottom:16px}
.u-border-left-4px-solid-var-accent-2b6cb0-9bbcb4f0{border-left:4px solid var(--accent,#2b6cb0);background:rgba(43,108,176,0.06)}
.u-border-left-4px-solid-var-danger-dc2626-135b74cf{border-left:4px solid var(--danger,#dc2626);background:rgba(220,38,38,0.06);padding:10px 12px;border-radius:6px;margin-bottom:12px}
.u-border-left-4px-solid-var-danger-dc2626-5e457675{border-left:4px solid var(--danger,#dc2626);background:rgba(220,38,38,0.08);padding:10px 12px;border-radius:6px;margin-bottom:16px}
.u-border-left-4px-solid-var-danger-dc2626-8f418482{border-left:4px solid var(--danger,#dc2626);background:rgba(220,38,38,0.06);margin-bottom:16px}
.u-border-left-4px-solid-var-danger-dc2626-ddb324d4{border-left:4px solid var(--danger,#dc2626);background:rgba(220,38,38,0.06);padding:8px 12px;border-radius:6px;margin-bottom:10px}
.u-border-left-4px-solid-var-error-text{border-left:4px solid var(--error-text)}
.u-border-left-4px-solid-var-primary{border-left:4px solid var(--primary)}
.u-border-left-4px-solid-var-success-green{border-left:4px solid var(--success, green)}
.u-border-top-1px-solid-var-border-e5e7eb-p-161cbd6a{border-top:1px solid var(--border,#e5e7eb);padding:14px 0}
.u-border-top-1px-solid-var-border-e5e7eb-p-e3e6ad50{border-top:1px solid var(--border,#e5e7eb);padding:14px 0;margin:0}
.u-border-top-1px-solid-var-border-e5e7eb-p-f8a15212{border-top:1px solid var(--border,#e5e7eb);padding-top:14px}
.u-border-top-1px-solid-var-border-eee-padd-a8e666c4{border-top:1px solid var(--border,#eee);padding-top:8px;margin-top:8px}
.u-color-var-danger-dc2626-font-size-0-82rem{color:var(--danger,#dc2626);font-size:0.82rem}
.u-color-var-danger-dc2626-font-weight-600{color:var(--danger,#dc2626);font-weight:600}
.u-color-var-danger-dc2626-font-weight-600-4c18ae8a{color:var(--danger,#dc2626);font-weight:600;margin-top:10px}
.u-color-var-danger-red{color:var(--danger,red)}
.u-color-var-error-text{color:var(--error-text)}
.u-color-var-error-text-dc2626-font-weight-600{color:var(--error-text,#dc2626);font-weight:600}
.u-color-var-muted-background-var-surface-2{color:var(--muted);background:var(--surface-2)}
.u-color-var-success-text-16a34a-font-weigh-f2977cce{color:var(--success-text,#16a34a);font-weight:600;margin:0}
.u-color-var-success-text-16a34a-font-weight-600{color:var(--success-text,#16a34a);font-weight:600}
.u-cursor-pointer-color-var-danger-dc2626-f-162f41f9{cursor:pointer;color:var(--danger,#dc2626);font-weight:600}
.u-cursor-pointer-display-flex-justify-cont-87c77173{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.u-cursor-pointer-font-weight-700{cursor:pointer;font-weight:700}
.u-display-block{display:block}
.u-display-block-font-weight-normal{display:block;font-weight:normal}
.u-display-block-font-weight-normal-margin-ded169dd{display:block;font-weight:normal;margin-bottom:10px}
.u-display-block-margin-bottom-4px{display:block;margin-bottom:4px}
.u-display-block-text-align-left{display:block;text-align:left}
.u-display-block-text-align-left-margin-bottom-6px{display:block;text-align:left;margin-bottom:6px}
.u-display-flex-align-items-center-gap-6px{display:flex;align-items:center;gap:6px}
.u-display-flex-align-items-center-gap-6px-828dc012{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:0.9rem}
.u-display-flex-align-items-center-gap-6px-da16ba12{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:0.9rem}
.u-display-flex-flex-direction-column-gap-8px{display:flex;flex-direction:column;gap:8px}
.u-display-flex-gap-12px-align-items-center-9b59622e{display:flex;gap:12px;align-items:center;margin-top:12px}
.u-display-flex-gap-16px-flex-wrap-wrap-mar-8a7baa86{display:flex;gap:16px;flex-wrap:wrap;margin-top:24px}
.u-display-flex-gap-24px-flex-wrap-wrap-mar-a1cc492a{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px}
.u-display-flex-gap-6px-align-items-center-a66c3360{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.u-display-flex-gap-8px{display:flex;gap:8px}
.u-display-flex-gap-8px-align-items-center{display:flex;gap:8px;align-items:center}
.u-display-flex-gap-8px-align-items-center-241fcd1e{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:2px 0 6px}
.u-display-flex-gap-8px-align-items-center-8bd366fe{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}
.u-display-flex-gap-8px-align-items-center-margin-0{display:flex;gap:8px;align-items:center;margin:0}
.u-display-flex-gap-8px-align-items-end-mar-16d20f80{display:flex;gap:8px;align-items:end;margin-top:12px}
.u-display-flex-gap-8px-align-items-flex-st-73fdbe21{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin:0}
.u-display-flex-gap-8px-flex-wrap-wrap{display:flex;gap:8px;flex-wrap:wrap}
.u-display-flex-gap-8px-flex-wrap-wrap-alig-d0cb022b{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.u-display-flex-gap-8px-flex-wrap-wrap-marg-f14c653e{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;align-items:center}
.u-display-flex-justify-content-space-betwe-09adb47b{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.u-display-flex-justify-content-space-betwe-2360c737{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.u-display-flex-justify-content-space-betwe-4213c493{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:10px 0;border-top:1px solid var(--border,#e5e7eb)}
.u-display-flex-justify-content-space-betwe-a54256a8{display:flex;justify-content:space-between;font-size:0.8rem}
.u-display-flex-justify-content-space-betwe-a998b891{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:12px;padding:10px 0;border-top:1px solid var(--border,#e5e7eb)}
.u-display-flex-justify-content-space-betwe-d1d9fd1b{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.u-display-grid-gap-10px-max-width-640px{display:grid;gap:10px;max-width:640px}
.u-display-grid-gap-12px-max-width-640px{display:grid;gap:12px;max-width:640px}
.u-display-grid-gap-14px-margin-top-16px{display:grid;gap:14px;margin-top:16px}
.u-display-grid-gap-4px{display:grid;gap:4px}
.u-display-grid-grid-template-columns-1fr-1-0e6b8677{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px}
.u-display-grid-grid-template-columns-1fr-2-5bb1e8d4{display:grid;grid-template-columns:1fr 2fr 1fr 1fr auto;gap:8px;align-items:end;margin-bottom:16px}
.u-display-grid-grid-template-columns-repea-0bcaf3b2{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:12px}
.u-display-grid-grid-template-columns-repea-2e61ffa2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:12px}
.u-display-grid-grid-template-columns-repea-782e957f{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.u-display-grid-grid-template-columns-repea-a65f5772{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:10px}
.u-display-grid-grid-template-columns-repea-b83424a3{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:12px;margin-bottom:10px}
.u-display-grid-grid-template-columns-repea-e8c7a8ed{display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:12px;margin-bottom:12px}
.u-display-grid-grid-template-columns-repea-eed45474{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:16px;margin-bottom:20px}
.u-display-inline{display:inline}
.u-display-inline-flex-align-items-center-g-eb762a91{display:inline-flex;align-items:center;gap:4px;font-size:0.82rem}
.u-display-inline-flex-gap-4px-align-items-center{display:inline-flex;gap:4px;align-items:center}
.u-display-inline-margin-left-12px{display:inline;margin-left:12px}
.u-display-none{display:none}
.u-color-b00020-margin-0-0-12px{color:#b00020;margin:0 0 12px}
.u-flex-1{flex:1}
.u-flex-1-min-width-200px{flex:1;min-width:200px}
.u-flex-1-min-width-260px{flex:1;min-width:260px}
.u-font-family-monospace{font-family:monospace}
/* ⛔ H116 § 2 — NACH ZWECK BENANNT, NICHT NACH DEM WERT.
   Diese Regel hiess `u-font-size-0-72rem` und stand seit H115 § 2 auf `var(--fs-xs)` — ein Name,
   der einen Wert nennt, den er nicht hat, ist schlimmer als einer ohne Wert: der naechste Leser
   rechnet mit ihm. `boden` ist der Lesbarkeitsboden aus H112/H114/H115; er bleibt wahr, auch wenn
   sich `--fs-xs` bewegt. Ein Name `0-78rem` haette beim naechsten Mal wieder gelogen.
   ⚠️ `u-font-size-0-75rem` trug DIESELBE Deklaration und denselben Zweck und ist hier aufgegangen. */
.u-schriftgroesse-boden{font-size:var(--fs-xs)}
.u-stornomarke{font-size:var(--fs-xs);font-weight:700;color:var(--error-text,#dc2626);border:1px solid currentColor;border-radius:4px;padding:0 4px}
.u-bezugszeile-boden{font-size:var(--fs-xs);margin:0 0 8px}
.u-font-size-0-78rem-margin-0-0-8px{font-size:0.78rem;margin:0 0 8px}
.u-font-size-0-78rem-margin-6px-0-0{font-size:0.78rem;margin:6px 0 0}
.u-font-size-0-78rem-margin-left-4px{font-size:0.78rem;margin-left:4px}
.u-font-size-0-82rem-padding-2px-6px-max-wi-26d17b28{font-size:0.82rem;padding:2px 6px;max-width:130px}
.u-font-size-0-82rem-padding-2px-6px-max-wi-883c27e1{font-size:0.82rem;padding:2px 6px;max-width:160px}
.u-font-size-0-82rem-padding-2px-6px-max-width-90px{font-size:0.82rem;padding:2px 6px;max-width:90px}
.u-font-size-0-84rem{font-size:0.84rem}
.u-font-size-0-84rem-margin-0{font-size:0.84rem;margin:0}
.u-font-size-0-85rem{font-size:0.85rem}
.u-font-size-0-85rem-margin-0-0-4px{font-size:0.85rem;margin:0 0 4px}
.u-font-size-0-85rem-margin-0-font-weight-700{font-size:0.85rem;margin:0;font-weight:700}
.u-font-size-0-86rem{font-size:0.86rem}
.u-font-size-0-86rem-padding-top-0{font-size:0.86rem;padding-top:0}
.u-font-size-0-8rem{font-size:0.8rem}
.u-font-size-0-8rem-margin-0-0-4px{font-size:0.8rem;margin:0 0 4px}
.u-font-size-0-8rem-margin-0-0-8px{font-size:0.8rem;margin:0 0 8px}
.u-font-size-0-8rem-margin-top-14px{font-size:0.8rem;margin-top:14px}
.u-font-size-0-9rem-font-weight-600-padding-0-6px{font-size:0.9rem;font-weight:600;padding:0 6px}
.u-font-size-1-05rem{font-size:1.05rem}
.u-font-size-1-05rem-margin-0-0-4px{font-size:1.05rem;margin:0 0 4px}
.u-font-size-1-1rem-margin-0-0-4px{font-size:1.1rem;margin:0 0 4px}
.u-font-size-1-1rem-margin-bottom-10px{font-size:1.1rem;margin-bottom:10px}
.u-font-size-1-1rem-margin-bottom-10px-marg-3a586549{font-size:1.1rem;margin-bottom:10px;margin-top:24px}
.u-font-size-1-1rem-margin-bottom-10px-marg-d644868c{font-size:1.1rem;margin-bottom:10px;margin-top:24px;color:var(--danger)}
.u-font-size-1-25rem-font-weight-600-margin-0-0-4px{font-size:1.25rem;font-weight:600;margin:0 0 4px}
.u-font-size-1-2rem{font-size:1.2rem}
.u-font-size-1-2rem-font-weight-700-margin-46b1faa5{font-size:1.2rem;font-weight:700;margin:2px 0 12px}
.u-font-size-1-5rem-font-weight-700-margin-0{font-size:1.5rem;font-weight:700;margin:0}
.u-font-size-1-5rem-margin-4px-0{font-size:1.5rem;margin:4px 0}
.u-font-size-1-5rem-margin-bottom-4px{font-size:1.5rem;margin-bottom:4px}
.u-font-size-1-5rem-margin-bottom-6px{font-size:1.5rem;margin-bottom:6px}
.u-font-size-1-5rem-margin-bottom-8px{font-size:1.5rem;margin-bottom:8px}
.u-font-size-1-8rem-font-weight-700-margin-0{font-size:1.8rem;font-weight:700;margin:0}
.u-font-size-1-8rem-font-weight-700-margin-2px-0{font-size:1.8rem;font-weight:700;margin:2px 0}
.u-font-size-1-8rem-font-weight-700-margin-b0e947e2{font-size:1.8rem;font-weight:700;margin:2px 0;color:var(--success-text, #1a7f37)}
.u-font-size-1rem-word-break-break-all{font-size:1rem;word-break:break-all}
.u-font-weight-600{font-weight:600}
.u-font-weight-700-background-var-surface-2{font-weight:700;background:var(--surface-2)}
.u-font-weight-700-margin-0-0-12px{font-weight:700;margin:0 0 12px}
.u-font-weight-700-margin-0-0-8px-color-var-191765a5{font-weight:700;margin:0 0 8px;color:var(--success-text)}
.u-font-weight-normal{font-weight:normal}
.u-font-weight-normal-display-flex-align-it-94a63ecf{font-weight:normal;display:flex;align-items:flex-start;gap:8px;word-break:break-word}
.u-font-weight-normal-display-flex-gap-8px-c6af6644{font-weight:normal;display:flex;gap:8px;align-items:flex-start}
.u-height-10px{height:10px}
.u-height-18px{height:18px}
.u-margin-0{margin:0}
.u-margin-0-0-10px{margin:0 0 10px}
.u-margin-0-0-10px-font-size-0-82rem{margin:0 0 10px;font-size:0.82rem}
.u-margin-0-0-10px-font-size-0-84rem-color-a810930d{margin:0 0 10px;font-size:0.84rem;color:var(--danger,#dc2626)}
.u-margin-0-0-10px-font-size-0-86rem{margin:0 0 10px;font-size:0.86rem}
.u-margin-0-0-10px-font-size-1-05rem{margin:0 0 10px;font-size:1.05rem}
.u-margin-0-0-10px-font-weight-600{margin:0 0 10px;font-weight:600}
.u-margin-0-0-12px{margin:0 0 12px}
.u-margin-0-0-12px-color-var-error-text{margin:0 0 12px;color:var(--error-text)}
.u-margin-0-0-12px-font-size-0-82rem{margin:0 0 12px;font-size:0.82rem}
.u-margin-0-0-12px-font-size-0-86rem{margin:0 0 12px;font-size:0.86rem}
.u-margin-0-0-12px-font-size-0-88rem{margin:0 0 12px;font-size:0.88rem}
.u-margin-0-0-12px-font-size-0-9rem{margin:0 0 12px;font-size:0.9rem}
.u-margin-0-0-14px-font-size-0-86rem{margin:0 0 14px;font-size:0.86rem}
.u-margin-0-0-16px{margin:0 0 16px}
.u-margin-0-0-4px-font-size-0-82rem{margin:0 0 4px;font-size:0.82rem}
.u-margin-0-0-6px-font-size-0-82rem{margin:0 0 6px;font-size:0.82rem}
.u-margin-0-0-6px-font-size-0-9rem{margin:0 0 6px;font-size:0.9rem}
.u-margin-0-0-8px{margin:0 0 8px}
.u-margin-0-0-8px-font-size-0-82rem{margin:0 0 8px;font-size:0.82rem}
.u-margin-0-0-8px-font-size-0-85rem{margin:0 0 8px;font-size:0.85rem}
.u-margin-0-0-8px-font-size-0-95rem-word-br-2a84c2fd{margin:0 0 8px;font-size:0.95rem;word-break:break-all}
.u-margin-0-0-8px-font-size-0-9rem{margin:0 0 8px;font-size:0.9rem}
.u-margin-0-color-var-muted-font-size-0-9rem{margin:0;color:var(--muted);font-size:0.9rem}
.u-margin-0-font-size-0-85rem{margin:0;font-size:0.85rem}
.u-margin-0-font-size-0-86rem{margin:0;font-size:0.86rem}
.u-margin-0-font-size-0-8rem{margin:0;font-size:0.8rem}
.u-margin-0-font-size-0-9rem{margin:0;font-size:0.9rem}
.u-margin-0-font-weight-600{margin:0;font-weight:600}
.u-margin-10px-0-0-font-size-0-82rem{margin:10px 0 0;font-size:0.82rem}
.u-margin-10px-0-0-font-size-0-84rem{margin:10px 0 0;font-size:0.84rem}
.u-margin-10px-0-0-font-size-0-8rem{margin:10px 0 0;font-size:0.8rem}
.u-margin-12px-0-4px{margin:12px 0 4px}
.u-margin-2px-0-0-font-size-0-82rem{margin:2px 0 0;font-size:0.82rem}
.u-margin-2px-0-0-font-size-0-84rem{margin:2px 0 0;font-size:0.84rem}
.u-margin-2px-0-0-font-size-0-86rem{margin:2px 0 0;font-size:0.86rem}
.u-margin-2px-0-0-font-size-0-86rem-color-v-0d332297{margin:2px 0 0;font-size:0.86rem;color:var(--danger,#dc2626)}
.u-margin-4px-0-0{margin:4px 0 0}
.u-margin-4px-0-0-font-size-0-78rem{margin:4px 0 0;font-size:0.78rem}
.u-margin-4px-0-0-font-size-0-84rem{margin:4px 0 0;font-size:0.84rem}
.u-margin-4px-0-0-font-size-0-85rem{margin:4px 0 0;font-size:0.85rem}
.u-margin-4px-0-0-font-size-0-86rem{margin:4px 0 0;font-size:0.86rem}
.u-margin-4px-0-0-white-space-pre-wrap{margin:4px 0 0;white-space:pre-wrap}
.u-margin-6px-0{margin:6px 0}
.u-margin-6px-0-0-font-size-0-8rem{margin:6px 0 0;font-size:0.8rem}
.u-margin-6px-0-10px-18px{margin:6px 0 10px 18px}
.u-margin-8px-0-0{margin:8px 0 0}
.u-margin-8px-0-0-font-size-0-78rem{margin:8px 0 0;font-size:0.78rem}
.u-margin-8px-0-0-font-size-0-84rem-color-v-17c84cdf{margin:8px 0 0;font-size:0.84rem;color:var(--warning,#d97706)}
.u-margin-8px-0-0-font-size-0-84rem-color-v-72d3dbf6{margin:8px 0 0;font-size:0.84rem;color:var(--danger,#dc2626)}
.u-margin-8px-0-0-font-size-0-84rem-color-v-99f984b0{margin:8px 0 0;font-size:0.84rem;color:var(--success-text,#16a34a)}
.u-margin-8px-0-0-font-size-0-85rem{margin:8px 0 0;font-size:0.85rem}
.u-margin-8px-0-0-font-size-0-8rem{margin:8px 0 0;font-size:0.8rem}
.u-margin-8px-0-16px{margin:8px 0 16px}
.u-margin-bottom-0{margin-bottom:0}
.u-margin-bottom-12px{margin-bottom:12px}
.u-margin-bottom-16px{margin-bottom:16px}
.u-margin-bottom-18px{margin-bottom:18px}
.u-margin-bottom-20px{margin-bottom:20px}
.u-margin-bottom-20px-border-2px-solid-var-3cf9d653{margin-bottom:20px;border:2px solid var(--danger,#dc2626);background:rgba(220,38,38,0.08)}
.u-margin-bottom-24px{margin-bottom:24px}
.u-margin-bottom-8px{margin-bottom:8px}
.u-margin-bottom-8px-border-1px-solid-var-b-834f21d0{margin-bottom:8px;border:1px solid var(--border,#ddd);border-radius:6px;padding:8px 12px}
.u-margin-left-6px{margin-left:6px}
.u-margin-right-6px{margin-right:6px}
.u-margin-top-0{margin-top:0}
.u-margin-top-10px-border-top-1px-solid-var-14d5d892{margin-top:10px;border-top:1px solid var(--border,#eee);padding-top:10px}
.u-margin-top-12px{margin-top:12px}
.u-margin-top-12px-border-top-1px-solid-var-ac062095{margin-top:12px;border-top:1px solid var(--border,#eee);padding-top:12px}
.u-margin-top-12px-display-flex-gap-8px-fle-8577c06e{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.u-margin-top-16px{margin-top:16px}
.u-margin-top-16px-display-flex-gap-12px-fl-cdc36331{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.u-margin-top-20px{margin-top:20px}
.u-margin-top-24px{margin-top:24px}
.u-margin-top-2px-flex-shrink-0{margin-top:2px;flex-shrink:0}
.u-margin-top-6px{margin-top:6px}
.u-margin-top-8px{margin-top:8px}
.u-max-width-220px{max-width:220px}
.u-max-width-280px{max-width:280px}
.u-max-width-360px{max-width:360px}
.u-max-width-720px{max-width:720px}
.u-opacity-0-6{opacity:0.6}
.u-overflow-x-auto{overflow-x:auto}
.u-overflow-x-auto-margin-0-16px-16px{overflow-x:auto;margin:0 -16px -16px}
.u-overflow-x-auto-margin-top-8px{overflow-x:auto;margin-top:8px}
.u-padding-0-overflow-hidden{padding:0;overflow:hidden}
.u-padding-6px{padding:6px}
.u-padding-6px-12px-font-size-0-9rem{padding:6px 12px;font-size:0.9rem}
.u-padding-6px-8px-font-size-0-85rem-border-474eb2fc{padding:6px 8px;font-size:0.85rem;border:1px solid var(--border);border-radius:var(--radius-sm)}
.u-text-align-center{text-align:center}
.u-text-align-left{text-align:left}
.u-text-align-right{text-align:right}
.u-text-decoration-underline{text-decoration:underline}
.u-text-transform-capitalize{text-transform:capitalize}
.u-white-space-nowrap{white-space:nowrap}
.u-white-space-pre-wrap{white-space:pre-wrap}
.u-width-100{width:100%}
.u-width-100-padding-6px-8px-border-1px-sol-d67c29b1{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm)}
.u-width-70px-padding-6px-8px-font-size-0-8-f75faa04{width:70px;padding:6px 8px;font-size:0.85rem;border:1px solid var(--border);border-radius:var(--radius-sm)}