/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   DIE GESTALT — ruhiges Papier, klare Typo, die Kundenfarbe als einziger Akzent.

   Bewusst NICHT: kein Space Grotesk, kein Cyan auf Dunkelblau, keine Farbverlaeufe, keine
   Neon-Kanten, keine schweren Schatten — die Anmutung des Altsystems kommt hier nirgends vor.

   Statt dessen: eine warme, papierne Flaeche, ein einziger Akzent (die CI-Farbe des Kunden, als
   Variable gesetzt), grosszuegiger Weissraum und Typografie, die auch bei 320 px Breite noch
   lesbar ist. Hell ist der Standard; der Dunkelmodus ist eine eigene, ebenso ruhige Stimmung und
   kein invertiertes Hell.

   Alle Farben stehen als Token unter :root. Es gibt keine Farbe, die nur in einem Media-Block
   definiert waere — sonst faellt sie im anderen Modus auf ihren Vorgabewert zurueck und niemand
   merkt es, bis der Screenshot da ist.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --akzent:        #3d6b52;   /* wird pro Instanz aus der CI ueberschrieben */
  --akzent-text:   #ffffff;
  --akzent-weich:  rgba(61, 107, 82, 0.10);

  --grund:         #f4f2ed;
  --flaeche:       #fffefb;
  --flaeche-2:     #faf8f4;
  --kante:         #e4dfd5;
  --kante-stark:   #cfc8ba;

  --schrift:       #23211d;
  --schrift-2:     #5f594f;
  --schrift-3:     #8b8377;

  --warn:          #9a4b1f;
  --warn-weich:    rgba(154, 75, 31, 0.10);
  --gut:           #2f6b45;
  --gut-weich:     rgba(47, 107, 69, 0.10);

  --radius:        12px;
  --radius-klein:  8px;
  --breite:        1120px;

  --satz: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-modus="dunkel"] {
  --grund:         #171614;
  --flaeche:       #201e1b;
  --flaeche-2:     #262320;
  --kante:         #37332d;
  --kante-stark:   #4a453d;

  --schrift:       #ece7de;
  --schrift-2:     #b3aca1;
  --schrift-3:     #857e73;

  --warn:          #d98a55;
  --warn-weich:    rgba(217, 138, 85, 0.12);
  --gut:           #6bb98a;
  --gut-weich:     rgba(107, 185, 138, 0.12);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--grund);
  color: var(--schrift);
  font: 15px/1.6 var(--satz);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; font-weight: 620; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

/* ── Kopf und Reiter ────────────────────────────────────────────────────────────────────────────── */

.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--kante);
  position: sticky; top: 0; z-index: 20;
}

.kopf-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 16px; min-height: 60px;
}

.marke { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marke img { height: 28px; width: auto; max-width: 150px; display: block; }
.marke-name { font-weight: 650; font-size: 15.5px; letter-spacing: -0.01em; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.wer { font-size: 13.5px; color: var(--schrift-2); white-space: nowrap; padding-right: 4px; }

.kopf-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 10px; border-radius: var(--radius-klein);
  border: 1px solid transparent; background: none; color: var(--schrift-2);
  font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none;
}
.kopf-knopf:hover { background: var(--flaeche-2); border-color: var(--kante); color: var(--schrift); text-decoration: none; }

/* Reiter-Navigation OBEN — die Hauptnavigation, keine Seitenleiste. */
.reiter { background: var(--flaeche); border-bottom: 1px solid var(--kante); }
.reiter-innen {
  max-width: var(--breite); margin: 0 auto; padding: 0 20px;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.reiter-innen::-webkit-scrollbar { display: none; }

.reiter a {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 11px 13px 10px; font-size: 14.5px; font-weight: 520; color: var(--schrift-2);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.reiter a:hover { color: var(--schrift); text-decoration: none; }
.reiter a[aria-current="page"] { color: var(--akzent); border-bottom-color: var(--akzent); font-weight: 600; }

.reiter .zahl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 10px; background: var(--akzent); color: var(--akzent-text);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ── Fläche ─────────────────────────────────────────────────────────────────────────────────────── */

.blatt { max-width: var(--breite); margin: 0 auto; padding: 26px 20px 60px; width: 100%; flex: 1; }

.titelzeile { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.titelzeile .unterzeile { color: var(--schrift-2); font-size: 14px; }

.gitter { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.gitter-2 { display: grid; gap: 16px; grid-template-columns: 1.4fr 1fr; }
@media (max-width: 800px) { .gitter-2 { grid-template-columns: 1fr; } }

.karte {
  background: var(--flaeche); border: 1px solid var(--kante); border-radius: var(--radius);
  padding: 18px 18px 16px;
}
.karte-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.karte-kopf h2 { flex: 1; }
.karte-zahl {
  font-size: 30px; font-weight: 680; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  line-height: 1; color: var(--schrift);
}
.karte-zahl.gedaempft { color: var(--schrift-3); font-size: 15px; font-weight: 500; letter-spacing: 0; }

.leer {
  color: var(--schrift-2); font-size: 14px; background: var(--flaeche-2);
  border: 1px dashed var(--kante); border-radius: var(--radius-klein); padding: 16px;
}

/* ── Aufgaben und Listen ────────────────────────────────────────────────────────────────────────── */

.liste { display: flex; flex-direction: column; gap: 10px; }

.zeile {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--flaeche); border: 1px solid var(--kante); border-radius: var(--radius-klein);
}
.zeile:hover { border-color: var(--kante-stark); }
.zeile-text { flex: 1; min-width: 0; }
.zeile-titel { font-weight: 570; font-size: 14.5px; }
.zeile-unten { color: var(--schrift-3); font-size: 12.5px; margin-top: 2px; }

.aufgabe {
  display: flex; gap: 14px; padding: 16px; background: var(--flaeche);
  border: 1px solid var(--kante); border-radius: var(--radius); align-items: flex-start;
}
.aufgabe.erledigt { background: var(--flaeche-2); opacity: 0.85; }
.aufgabe-text { flex: 1; min-width: 0; }
.aufgabe h3 { margin-bottom: 3px; }
.aufgabe .herkunft { color: var(--schrift-3); font-size: 12.5px; }
.aufgabe .tat { display: flex; align-items: center; }

.marke-art {
  display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--kante-stark);
  color: var(--schrift-2); background: var(--flaeche-2); white-space: nowrap;
}
.marke-art.freigabe   { color: var(--akzent); border-color: var(--akzent); background: var(--akzent-weich); }
.marke-art.rueckfrage { color: var(--warn);   border-color: var(--warn);   background: var(--warn-weich); }
.marke-art.gut        { color: var(--gut);    border-color: var(--gut);    background: var(--gut-weich); }

.nummer { font-family: var(--mono); font-size: 12.5px; color: var(--schrift-2);
          background: var(--flaeche-2); border: 1px solid var(--kante); border-radius: 5px; padding: 1px 6px; }

/* ── Knöpfe ─────────────────────────────────────────────────────────────────────────────────────── */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-klein); border: 1px solid var(--akzent);
  background: var(--akzent); color: var(--akzent-text); font: inherit; font-size: 14px; font-weight: 580;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.knopf:hover { filter: brightness(1.08); text-decoration: none; }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }

.knopf.zweit { background: var(--flaeche); color: var(--schrift); border-color: var(--kante-stark); }
.knopf.zweit:hover { background: var(--flaeche-2); filter: none; }
.knopf.warn { background: var(--flaeche); color: var(--warn); border-color: var(--warn); }
.knopf.klein { padding: 6px 11px; font-size: 13px; }

.knopfreihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Formulare und geführte Erfassung ───────────────────────────────────────────────────────────── */

label { display: block; font-size: 13.5px; font-weight: 560; color: var(--schrift-2); margin-bottom: 6px; }
label .pflicht { color: var(--warn); font-weight: 700; }

input[type="text"], input[type="email"], input[type="number"], input[type="date"], textarea, select {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--schrift);
  background: var(--flaeche); border: 1px solid var(--kante-stark); border-radius: var(--radius-klein);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--akzent); outline-offset: -1px; border-color: var(--akzent); }
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }

.feld { margin-bottom: 16px; }
.feld .hinweis { font-size: 12.5px; color: var(--schrift-3); margin-top: 5px; }

.wahl { display: flex; flex-direction: column; gap: 8px; }
.wahl label {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0;
  border: 1px solid var(--kante-stark); border-radius: var(--radius-klein); cursor: pointer;
  font-weight: 500; color: var(--schrift); background: var(--flaeche); font-size: 14.5px;
}
.wahl label:hover { border-color: var(--akzent); }
.wahl input { margin-top: 2px; accent-color: var(--akzent); }

/* Der Fortschritt der geführten Erfassung: sichtbar, wie viele Schritte noch kommen. */
.schritte { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.schritt {
  display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--schrift-3);
}
.schritt .punkt {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--kante-stark);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
  background: var(--flaeche);
}
.schritt.jetzt { color: var(--schrift); font-weight: 600; }
.schritt.jetzt .punkt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.schritt.fertig .punkt { border-color: var(--akzent); color: var(--akzent); }
.schritt .strich { width: 18px; height: 1px; background: var(--kante-stark); }

/* ── Tabellen (Rechte-Matrix, Protokoll) ────────────────────────────────────────────────────────── */

.tabellenrahmen { overflow-x: auto; border: 1px solid var(--kante); border-radius: var(--radius); background: var(--flaeche); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--kante); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--schrift-3); font-weight: 700;
     background: var(--flaeche-2); position: sticky; top: 0; }
tr:last-child td { border-bottom: none; }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
td.mitte, th.mitte { text-align: center; }
td.zeit { color: var(--schrift-3); font-size: 12.5px; white-space: nowrap; }

/* ── Meldungen an den Menschen ──────────────────────────────────────────────────────────────────── */

.hinweisbalken {
  padding: 12px 16px; border-radius: var(--radius-klein); font-size: 14px; margin-bottom: 18px;
  border: 1px solid var(--kante-stark); background: var(--flaeche-2); color: var(--schrift);
}
.hinweisbalken.gut  { border-color: var(--gut);  background: var(--gut-weich);  color: var(--gut); }
.hinweisbalken.warn { border-color: var(--warn); background: var(--warn-weich); color: var(--warn); }

/* ── Anmeldung ──────────────────────────────────────────────────────────────────────────────────── */

.tor { display: flex; align-items: center; justify-content: center; padding: 6vh 20px 40px; flex: 1; }
.tor-karte {
  width: 100%; max-width: 400px; background: var(--flaeche); border: 1px solid var(--kante);
  border-radius: 16px; padding: 32px 28px 26px;
}
.tor-marke { text-align: center; margin-bottom: 22px; }
.tor-marke img { max-height: 46px; max-width: 210px; width: auto; }
.tor-marke .name { font-size: 21px; font-weight: 660; letter-spacing: -0.02em; }
.tor-marke .satz { color: var(--schrift-2); font-size: 14px; margin-top: 6px; }
.tor-oder { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--schrift-3); font-size: 12.5px; }
.tor-oder::before, .tor-oder::after { content: ""; flex: 1; height: 1px; background: var(--kante); }
.code-feld { text-align: center; font-size: 26px; letter-spacing: 0.32em; font-family: var(--mono); padding: 12px; }

/* ── Fuß ────────────────────────────────────────────────────────────────────────────────────────── */

.fuss {
  border-top: 1px solid var(--kante); padding: 16px 20px; text-align: center;
  color: var(--schrift-3); font-size: 12px;
}
.fuss a { color: var(--schrift-3); }

/* ── Assistent (nur wenn ein Backend konfiguriert ist) ──────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   `minmax(0, 1fr)` UND `min-width: 0` — und beides ist gemessen noetig.

   BEFUND (28.08.2026, Q2, gefunden von der Handy-Probe am gerenderten Bild): auf einem 390 px
   breiten Schirm war die SEITE 729 px breit und lief seitlich ueber. Nicht die Tabelle — die scrollt
   in ihrem eigenen Rahmen (`.tabellenrahmen`) — sondern die ganze Flaeche.

   `1fr` ist die Kurzform von `minmax(auto, 1fr)`, und das `auto`-Minimum einer Raster-Spur ist die
   MIN-CONTENT-Breite ihres Feldes. Ein Feld, dessen Inhalt eine grosse min-content-Breite hat,
   sprengt damit die Spur, und die Spur sprengt die Seite. Die Stapel-Regel darunter griff korrekt
   (eine Spalte ab 950 px) — sie hat nur nichts genuetzt, weil die EINE Spalte zu breit wurde.

   Warum es in K1 nicht auffiel: die Assistent-Spalte existiert nur mit angebundenem Backend, und in
   K1 hatte keine Instanz eines. Die Handy-Bilder von damals zeigen die Flaeche OHNE Spalte. Sie war
   nicht falsch — sie war ungeprueft.

   GEMESSEN nach der Aenderung, im selben Browser: Seitenbreite 729 → 390 px, kein Element mehr
   ueber dem Rand.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
.mit-assistent {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start;
}
.mit-assistent > * { min-width: 0; }
@media (max-width: 950px) { .mit-assistent { grid-template-columns: minmax(0, 1fr); } }
.assistent { position: sticky; top: 128px; }
.assistent .verlauf { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
.assistent .sagt { padding: 9px 12px; border-radius: 10px; font-size: 14px; background: var(--flaeche-2); border: 1px solid var(--kante); }
.assistent .sagt.ich { background: var(--akzent-weich); border-color: var(--akzent); }

/* ── Handy ──────────────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 620px) {
  .blatt { padding: 18px 14px 48px; }
  .kopf-innen, .reiter-innen { padding: 0 14px; }
  .wer { display: none; }
  h1 { font-size: 22px; }
  .karte { padding: 15px; }
  .gitter { grid-template-columns: 1fr; }
  .aufgabe { flex-direction: column; gap: 10px; }
  .aufgabe .tat { width: 100%; }
  .aufgabe .tat .knopf { width: 100%; }
  .marke img { height: 24px; }
}

@media print { .kopf, .reiter, .fuss, .knopf { display: none; } }

/* ── Bausteine statt style-Attribute ───────────────────────────────────────────────────────────────
   BEFUND vom 20.08.2026, im Browser gemessen: 72 CSP-Verstoesse „Refused to apply inline style".
   Die CSP dieser Anwendung erlaubt Stile nur aus 'self' und per Nonce — ein Nonce gilt aber fuer
   <style>-BLOECKE, nicht fuer style="..."-ATTRIBUTE (die fallen unter style-src-attr und braeuchten
   'unsafe-inline'). Jede Layout-Zeile im Attribut war damit toter Text: `display:grid` blieb `block`,
   `margin-top:16px` blieb `0px`. Die Flaeche sah nur deshalb noch ordentlich aus, weil das meiste
   Layout ohnehin hier in der Datei steht — aufgefallen ist es am BILD (ein gestapeltes Formular),
   nicht an einer Zahl.
   Die Ursache wird behoben, nicht umgangen: 'unsafe-inline' bleibt draussen, die Stile kommen hierher.
   ─────────────────────────────────────────────────────────────────────────────────────────────────── */

.o4  { margin-top: 4px; }
.o6  { margin-top: 6px; }
.o8  { margin-top: 8px; }
.o10 { margin-top: 10px; }
.o12 { margin-top: 12px; }
.o14 { margin-top: 14px; }
.o16 { margin-top: 16px; }
.o18 { margin-top: 18px; }
.o26 { margin-top: 26px; }

.u4  { margin-bottom: 4px; }
.u6  { margin-bottom: 6px; }
.u8  { margin-bottom: 8px; }
.u12 { margin-bottom: 12px; }
.u20 { margin-bottom: 20px; }
.ohne-abstand { margin: 0; }

.blind       { text-decoration: none; color: inherit; }
.blind:hover { text-decoration: none; }
.voll        { width: 100%; }
.dehn        { flex: 1; }
.schiebe     { margin-left: auto; }
.rechts      { text-align: right; }
.oben-aus    { align-items: flex-start; }
.inline-form { display: inline; }
.rahmenlos   { border: none; }
.umbruch     { white-space: pre-wrap; }

.grau      { color: var(--schrift-2); }
.satz-grau { color: var(--schrift-2); font-size: 14px; }
.klein-grau{ color: var(--schrift-3); font-size: 12.5px; }
.mini      { font-size: 11px; }

.sp28 { width: 28%; }
.sp30 { width: 30%; }
.sp34 { width: 34%; }

.hoch-scroll { max-height: 420px; overflow-y: auto; }

.suchfeld { height: 32px; padding: 0 10px; font-size: 13.5px; width: 210px; }
@media (max-width: 900px) { .suchfeld { display: none; } }

.haken-knopf { width: 28px; height: 26px; padding: 0; }

.aufklapp { cursor: pointer; color: var(--schrift-2); font-size: 14px; font-weight: 560; }

.filterzeile { margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-end; }

.einladen {
  margin-top: 16px; display: grid; gap: 10px;
  grid-template-columns: 1fr 1fr auto auto; align-items: end;
}
@media (max-width: 760px) { .einladen { grid-template-columns: 1fr; } }
.hoch70 { min-height: 70px; }

/* Die Fehlerseite: eigene Klasse, weil sie unter derselben CSP ausgeliefert wird wie alles andere. */
.fehlerblatt { max-width: 520px; margin: 12vh auto; }

/* Datei-Auswahl: das native Feld ist versteckt, das Label ist der Knopf. Ohne JavaScript
   funktioniert es weiter — ein Label spricht sein Feld selbst an. Die native Steuerung wurde
   ersetzt, weil sie die Gestalt bricht UND in der Sprache des Browsers spricht, nicht in der der
   Flaeche („Choose File" in einem deutschen System). */
.datei-feld {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.datei-knopf {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 9px 16px; border-radius: var(--radius-klein); border: 1px solid var(--kante-stark);
  background: var(--flaeche); color: var(--schrift); font-size: 14px; font-weight: 580; cursor: pointer;
}
.datei-knopf:hover { background: var(--flaeche-2); border-color: var(--akzent); }
.datei-feld:focus + .datei-name + .datei-knopf,
.datei-feld:focus ~ .datei-knopf { outline: 2px solid var(--akzent); outline-offset: 2px; }
.datei-name { margin-left: 10px; font-size: 13.5px; color: var(--schrift-2); }
.assistent .sagt.warn { border-color: var(--warn); background: var(--warn-weich); color: var(--warn); }

/* `kundentext` ist ein MARKER und keine Gestalt: hier steht, was ein Mensch eingegeben hat. Er
   traegt absichtlich keine eigene Farbe und keine eigene Schrift — ein Vorgangstitel soll aussehen
   wie ein Vorgangstitel. Gebraucht wird er von der Sprachprobe am Bild, die diese Stellen ausnimmt:
   die Sprache des Kunden ist nicht die Sprache der Anwendung, und korrigiert wird sie nie. */
.kundentext { }

/* ── Anmeldeseite: was tun, wenn kein Code ankommt ───────────────────────────────────────────────
   Der Hinweis steht UNTER dem Formular und ruhig: er ist Hilfe, keine Warnung. Die angeforderte
   Adresse steht darüber, damit ein Tippfehler sofort ins Auge fällt — genau daran ist es am
   22.08.2026 gescheitert. */
.tor-angefordert {
  margin: 10px 0 0; font-size: 13px; color: var(--text-leise); text-align: center;
}
.tor-hilfe {
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--linie);
  font-size: 12.5px; line-height: 1.6; color: var(--text-leise);
}

/* ══ Q1 · KOMPAKTE AUSWAHL, LISTE, WEICHE ═══════════════════════════════════════════════════════

   DER BEFUND (Ninos Blick, 24.08.2026): jede Auswahl stand als raumgreifende Karte untereinander.
   „Anrede" (4 Optionen) und „Rechtsform" (6) füllten mit fünf Textfeldern zusammen 3088 Bildpunkte
   Höhe — für sieben Angaben. Die Regel dahinter steht in flaechen/modul.ts: bis vier Optionen eine
   Zeile, ab fünf eine Auswahlliste, ab fünfzehn mit Suche. Hier steht nur ihre Gestalt.

   `.wahl` (die hohen Karten) BLEIBT — die Melde-Fläche benutzt sie für drei lange Sätze, und dort
   ist sie richtig: „Ich komme nicht weiter" ist keine Segment-Beschriftung. Was falsch war, ist
   nicht die Karte, sondern sie ÜBERALL zu nehmen. */

/* ── Die kompakte Auswahl-Zeile: alle Möglichkeiten auf einen Blick, ein Zehntel der Höhe ─────── */
.wahl-zeile { display: flex; flex-wrap: wrap; gap: 6px; }
.wahl-zeile label {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 7px 12px; border: 1px solid var(--kante-stark); border-radius: var(--radius-klein);
  background: var(--flaeche); font-size: 14px; font-weight: 500; color: var(--schrift);
  cursor: pointer; white-space: nowrap;
}
.wahl-zeile label:hover { border-color: var(--akzent); }
.wahl-zeile input { accent-color: var(--akzent); margin: 0; }
/* Die gewählte Option trägt die Akzentfarbe — sonst sieht eine Zeile aus wie fünf gleiche Knöpfe.
   `:has()` ist der Weg ohne Skript; wo es fehlt, bleibt der Radiopunkt die Auskunft. */
.wahl-zeile label:has(input:checked) {
  border-color: var(--akzent); background: var(--akzent-weich); font-weight: 600;
}

/* ── Betrag mit Einheit: die Währung steht AM Feld, nicht im Kopf des Lesers ──────────────────── */
.mit-einheit { display: flex; align-items: stretch; }
.mit-einheit input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mit-einheit .einheit {
  display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--kante-stark); border-left: none;
  border-top-right-radius: var(--radius-klein); border-bottom-right-radius: var(--radius-klein);
  background: var(--flaeche-2); color: var(--schrift-2); font-size: 14px;
}

/* ── Die Filterleiste der Liste ───────────────────────────────────────────────────────────────── */
.filterleiste {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.filterleiste > div { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.filterleiste .dehn { flex: 1 1 240px; }
.filterleiste label { font-size: 12.5px; color: var(--schrift-2); font-weight: 500; margin: 0; }
.filterleiste input, .filterleiste select { margin: 0; }
.filterleiste .knopfreihe { flex-direction: row; align-items: center; min-width: 0; }

/* ── Die Tabelle der Liste ────────────────────────────────────────────────────────────────────── */
.liste-tabelle td { font-size: 14px; }
.liste-tabelle tbody tr:hover { background: var(--flaeche-2); }
.liste-tabelle a { color: var(--schrift); text-decoration: none; }
.liste-tabelle a:hover { color: var(--akzent); text-decoration: underline; }
.liste-tabelle a.nummer { color: var(--akzent); }

/* Ein Spaltenkopf, der sortiert, zeigt es auch — sonst rät der Leser, wonach gerade sortiert ist. */
.sortkopf { color: inherit; text-decoration: none; white-space: nowrap; }
.sortkopf:hover { color: var(--akzent); }
.sortkopf.aktiv { color: var(--akzent); }

.blaettern { display: flex; align-items: center; gap: 12px; justify-content: center; }

/* ── Eine Kachel, die irgendwohin führt, sieht auch so aus ────────────────────────────────────── */
.karte-klick { display: block; text-decoration: none; color: inherit; transition: border-color .12s; }
.karte-klick:hover { border-color: var(--akzent); text-decoration: none; }

/* ── Ein Feld hinter einer Weiche, das gerade nicht gilt ──────────────────────────────────────── */
/* Es wird AUSGEBLENDET, nicht ausgegraut: ein graues Feld sieht aus wie eines, das man freischalten
   könnte. Ein Feld, das für diesen Fall nicht gilt, gibt es hier nicht.

   Die REGEL dafür steht weiter unten als `[hidden] { display: none !important }` und gilt für alle
   Elemente. Hier stand sie einmal nur für `.feld` — jemand hatte dieselbe Falle schon getroffen und
   sie an EINER Stelle behoben. Zwei Regeln für dieselbe Sache sind zwei Wahrheiten; diese ist die
   engere und fällt weg. */

@media (max-width: 700px) {
  /* Am Handy stehen die Filter untereinander — nebeneinander wären sie 90 px breit und unlesbar. */
  .filterleiste > div, .filterleiste .dehn { min-width: 100%; }
}

/* ── Feld-Gruppen: dieselben Gruppen wie in der Erfassung, beim Lesen und beim Bearbeiten ─────── */
/* Der Vorgang zeigte bisher dreiundzwanzig Zeilen in EINER Tabelle. Wer eine Angabe suchte, las
   alle. Jetzt steht sie dort, wo sie eingegeben wurde. */
.feldgruppe + .feldgruppe { margin-top: 20px; }
.feldgruppe-kopf {
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--schrift-3); margin: 0 0 8px;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   Q2 · DIE AI-FIRST-SCHICHT — schmale Kennzahlen-Leiste, Ergaenzungs-Marken, Adress-Vorschlaege.

   Bau-Standard 2.5: zu jeder neuen Flaeche gehoert ihre Gestalt IM SELBEN ZUG. In K1 war eine
   Flaeche inhaltlich richtig und sah aus wie ein Textdokument, weil das CSS fehlte.

   Kein neuer Farbton, keine neue Schrift: alles aus den Token oben.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Die schmale Kennzahlen-Leiste ueber der Liste ──────────────────────────────────────────────
   SCHMAL heisst schmal: eine Zeile, Zahl und Wort nebeneinander, keine Kachel. Sie ersetzt drei
   Kacheln, die zusammen die erste Tabellenzeile unter den Bildschirmrand geschoben haben. */
.kennleiste {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-top: 14px;
}
.kennzahl {
  display: flex; align-items: baseline; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--kante); border-radius: var(--radius-klein);
  background: var(--flaeche); text-decoration: none; color: inherit;
}
.kennzahl:hover { border-color: var(--kante-stark); background: var(--flaeche-2); }
.kennzahl-wert { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--schrift); }
.kennzahl-wert.gedaempft { color: var(--schrift-3); font-size: 17px; font-weight: 500; }
.kennzahl-wort { font-size: 12.5px; color: var(--schrift-2); }

/* Eine Karte, die eine Fussnote ist und keine Hauptsache: der Massstab des Moduls. */
.karte.leise { background: var(--flaeche-2); border-style: dashed; }
.karte.leise p { margin: 4px 0; }

/* ── „automatisch ergaenzt" ─────────────────────────────────────────────────────────────────────
   Sie steht UNTER dem Feld, in der Groesse des Hinweises, aber in der Akzentfarbe: der Mensch soll
   sehen, dass hier die Maschine gearbeitet hat, ohne dass es wie eine Warnung aussieht. */
/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   `[hidden]` MUSS GEWINNEN — sonst zeigt eine Klasse mit `display` ein verborgenes Element doch.

   BEFUND (28.08.2026, gefunden am BILD der Erfassung auf dem Handy, nicht an einer Zahl): unter
   jedem Feld stand ein kleiner roter Punkt. Das war der Aufzaehlungs-Punkt von `.ergaenzt::before` —
   der Kasten trug `hidden`, aber `display: flex` aus DIESER Regel schlaegt das `display: none`, das
   der Browser fuer `[hidden]` mitbringt: eine Autoren-Regel gewinnt gegen die Vorgabe des Browsers.

   Die Probe war gruen. Drei Punkte, die niemand erklaeren kann, sieht nur ein Bild (Bau-Standard
   2.5) — und dasselbe galt fuer die Vorschlagsliste der Adress-Suche, die aus demselben Grund als
   leerer Kasten dastand.

   Die Regel steht bewusst OBEN und gilt fuer ALLE Elemente: jede kuenftige Klasse mit `display`
   waere sonst dieselbe Falle. `!important` ist hier richtig und nicht faul — `hidden` ist keine
   Gestaltung, sondern eine Aussage ueber die Existenz.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

.ergaenzt {
  font-size: 12.5px; color: var(--akzent); margin-top: 5px;
  display: flex; align-items: center; gap: 6px;
}
.ergaenzt::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--akzent); flex: 0 0 auto;
}

/* ── Die Adress-Suche ───────────────────────────────────────────────────────────────────────────
   Der Kasten setzt sich vom Rest der Gruppe ab (er ist ein Angebot, kein Pflichtfeld) und die
   Vorschlaege sind KNOEPFE — Aktionen sind Buttons, nie nackte Text-Links (Nino-Regel). */
.feld.adresssuche {
  padding: 12px 14px; border: 1px dashed var(--kante-stark);
  border-radius: var(--radius-klein); background: var(--flaeche-2); margin-bottom: 18px;
}
.feld.adresssuche input { margin-bottom: 0; }
.vorschlaege { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.vorschlag {
  text-align: left; font: inherit; font-size: 13.5px; cursor: pointer;
  padding: 8px 10px; border: 1px solid var(--kante); border-radius: var(--radius-klein);
  background: var(--flaeche); color: var(--schrift);
}
.vorschlag:hover { border-color: var(--akzent); background: var(--akzent-weich); }
.vorschlaege .hinweis { margin: 0 0 4px; }

@media (max-width: 700px) {
  /* Auf dem Handy tragen zwei Kennzahlen nebeneinander; drei waeren drei Zeilen. */
  .kennzahl { flex: 1 1 calc(50% - 4px); justify-content: space-between; }
}

/* ── Q2 · Der Vorschlag des Assistenten ─────────────────────────────────────────────────────────
   Er setzt sich vom Chat ab, weil er etwas anderes ist als eine Antwort: er ist ein Formular, das
   auf einen Klick wartet. Die Akzentkante sagt „hier passiert etwas", der Knopf darin ist der
   primaere — Aktionen sind Buttons (Nino-Regel), und dieser legt wirklich an. */
.vorschlag-kasten {
  border: 1px solid var(--akzent); border-left-width: 3px;
  border-radius: var(--radius-klein); padding: 12px 14px; background: var(--akzent-weich);
}
.vorschlag-kasten h3 { font-size: 15px; margin: 0; }
.vorschlag-kasten .knopfreihe { flex-wrap: wrap; }

/* ── Die Zusammenfassung im Vorschlag STAPELT ──────────────────────────────────────────────────
   BEFUND (28.08.2026, am Bild der Assistent-Spalte): die Zusammenfassung stand als zweispaltige
   Tabelle in einer 330 px breiten Spalte, und die Werte waren rechts abgeschnitten — „chat@mail.
   syntropia…", „DE02 7015 0000 000…". Sie liessen sich scrollen, aber ein Mensch, der BESTAETIGEN
   soll, muss sehen, WAS er bestaetigt. Eine halb sichtbare IBAN ist keine Bestaetigung.

   Also: Beschriftung ueber dem Wert, eine Angabe je Block, Wert umbruchfaehig. Dieselbe Tabelle
   bleibt im Detail-Blatt zweispaltig — dort ist Platz. */
.vorschlag-kasten .tabellenrahmen { border: 0; background: none; overflow: visible; }
.vorschlag-kasten table, .vorschlag-kasten tbody, .vorschlag-kasten tr { display: block; width: 100%; }
.vorschlag-kasten th, .vorschlag-kasten td {
  display: block; width: auto; padding: 0; border: 0; background: none;
  overflow-wrap: anywhere;
}
.vorschlag-kasten tr { padding: 6px 0; border-bottom: 1px solid var(--kante); }
.vorschlag-kasten tr:last-child { border-bottom: 0; }
.vorschlag-kasten th { font-size: 11px; }
.vorschlag-kasten td { font-size: 13.5px; margin-top: 1px; }