/* cf-zentrale.css — die Kommandozentrale.
 *
 * HERKUNFT DER BAUFORM: ai.taxonair.com (Operator-Vorlage, 2026-07-31). Uebernommen wird die
 * ANORDNUNG, nicht die Farbe: dreispaltig — links Lage, Mitte ein Strom aus Frage/Urteil/Beleg,
 * rechts das Netz (wer ist da, wer arbeitet). Alle Farben kommen aus den Mandanten-Variablen;
 * ein zweites Farbsystem waere genau der Fehler, den docs/guard-whitelabel-tokens.mjs bewacht.
 *
 * WAS NICHT UEBERNOMMEN WIRD: die Spielmechanik der Vorlage (Rang „Top 12 %", Beitraege,
 * Follower). Sie traegt ein Verbraucherprodukt; in einer Betriebskonsole verduennt sie die
 * Aussage — eine Zahl, die niemand zu einer Entscheidung braucht, kostet trotzdem Aufmerksamkeit.
 */

/* ---------------------------------------------------------------- Weite (Vollbild)
   DREI Stufen statt eines Schalters, weil „Vollbild" zwei verschiedene Wuensche meint:
   arbeiten OHNE Kopfleiste, aber MIT Navigation (weit) — oder die Flaeche ganz allein (voll).
   Die Klassen haengen am body, damit sie fuer JEDE Ansicht gelten, die sich dafuer anmeldet;
   cf-zentrale.js raeumt sie beim Ansichtswechsel wieder ab. */
body.cf-weit .topbar { display: none; }
body.cf-weit .main { padding-top: 18px; }
body.cf-voll .topbar { display: none; }
body.cf-voll .rail { display: none; }
body.cf-voll .app,
body.cf-voll.rail-collapsed .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
body.cf-voll .main { padding: 18px 26px 40px; }

.zt-weite { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-btn, 12px);
  background: var(--surface-2, rgba(127, 127, 127, .1)); border: 1px solid var(--line); flex: none; }
.zt-weite button { border: 0; background: none; color: var(--ink-soft); cursor: pointer;
  padding: 6px 11px; border-radius: calc(var(--r-btn, 12px) - 4px); font: inherit; font-size: .8rem;
  font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.zt-weite button .ic { width: 14px; height: 14px; }
.zt-weite button[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }

/* Rueckweg aus dem Vollbild: ohne Kopfleiste gibt es sonst keinen sichtbaren Ausgang mehr
   ausser der Escape-Taste — und eine Taste, die niemand ansagt, ist kein Ausgang. */
/* Unten LINKS, nicht oben rechts: oben rechts sitzt im Vollbild bereits die Weite-Leiste samt
   Modell-Knopf — der Rueckweg lag darueber und verdeckte die Bedienung, die er nicht ersetzt.
   Unten rechts ist der Ask-AI-Knopf. Bleibt die untere linke Ecke, die in jeder Ansicht frei ist. */
.zt-esc { position: fixed; z-index: 60; bottom: 18px; left: 18px; display: none;
  align-items: center; gap: 8px; padding: 8px 13px; border-radius: 999px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink);
  font-size: .78rem; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); }
body.cf-weit .zt-esc, body.cf-voll .zt-esc { display: inline-flex; }
.zt-esc .ic { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- Kopf + Modellwahl */
.zt-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
/* `flex:1` ALLEIN reicht nicht: bei schmalem Fenster schrumpft die Titelspalte unter die Breite
   eines Wortes, und "Kommandozentrale" bricht auf einen Buchstaben je Zeile (bei 430 px gesehen).
   Der Ueberlauf-Test schlaegt dabei NICHT an — senkrechtes Quetschen ist kein waagerechter
   Ueberlauf. Deshalb eine Mindestbreite: darunter nimmt der Titel lieber eine eigene Zeile. */
.zt-kopf .zt-titel { min-width: min(100%, 230px); flex: 1 1 260px; }
.zt-kopf h1 { font-size: 1.7rem; letter-spacing: -.02em; margin: 0; }
.zt-kopf .zt-sub { color: var(--ink-soft); font-size: .9rem; margin-top: 4px; }

.zt-mdl { position: relative; flex: none; }
.zt-mdl-btn { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 9px 14px; border-radius: var(--r-btn, 12px); background: var(--surface);
  border: 1px solid var(--line-strong); color: var(--ink); font: inherit; font-weight: 700;
  font-size: .85rem; max-width: 100%; }
.zt-mdl-btn:hover { border-color: var(--lime); }
.zt-mdl-btn .ic { width: 16px; height: 16px; flex: none; }
.zt-mdl-btn .zt-mdl-n { color: var(--ink-soft); font-weight: 600; }
.zt-mdl-btn .zt-caret { width: 12px; height: 12px; opacity: .6; transition: transform .18s var(--ease); }
.zt-mdl.open .zt-mdl-btn .zt-caret { transform: rotate(180deg); }

.zt-dd { position: absolute; z-index: 120; top: calc(100% + 8px); right: 0;
  width: min(520px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg, 16px);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34); padding: 14px; display: none; }
.zt-mdl.open .zt-dd { display: block; }
.zt-dd-kopf { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line); margin-bottom: 12px; }
/* NUR die aeussere Ebene bricht um. Ein pauschales `b { display:block }` haette jedes
   hervorgehobene Wort IM Erklaertext auf eine eigene Zeile geworfen — der Satz zerfiel in
   eine Liste, und die Zuordnung "führt = die Hauptantwort" war nicht mehr lesbar. */
.zt-dd-kopf > span > b { display: block; font-size: .95rem; }
.zt-dd-kopf > span > span { display: block; color: var(--ink-soft); font-size: .8rem; line-height: 1.55; margin-top: 3px; }
.zt-dd-kopf > span > span b { color: var(--ink); }

.zt-haus { margin-top: 14px; }
.zt-haus:first-of-type { margin-top: 0; }
.zt-haus-t { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.zt-haus-t b { font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.zt-haus-t i { font-style: normal; font-size: .74rem; color: var(--ink-faint); }

.zt-lane { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm, 12px);
  border: 1px solid var(--line); background: var(--surface-2, transparent); margin-bottom: 6px; flex-wrap: wrap; }
.zt-lane.r-fuehrt { border-color: var(--lime); }
.zt-lane.r-aus { opacity: .55; }
.zt-lane-n { min-width: 0; flex: 1; }
.zt-lane-n b { display: block; font-size: .86rem; font-weight: 700; }
.zt-lane-n span { display: block; font-size: .74rem; color: var(--ink-faint); margin-top: 2px; }

.zt-zust { display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; }
.zt-zust .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zt-zust.z-laeuft { color: var(--good); background: var(--good-bg); }
.zt-zust.z-ausgefallen { color: var(--bad); background: var(--bad-bg); }
.zt-zust.z-unbekannt { color: var(--ink-faint); background: var(--surface-2, rgba(127, 127, 127, .12)); }

/* Die Rollen-Leiste: wer FUEHRT, wer DARF, wer in Reserve steht, wer AUS ist.
   Vier Stufen statt eines An/Aus, weil „darf antworten" und „soll antworten" verschiedene
   Aussagen sind — und weil eine Gegenstimme nur zaehlt, wenn sie nicht dieselbe Rolle hat
   wie die Fuehrung. */
.zt-rolle { display: inline-flex; gap: 2px; padding: 2px; flex: none;
  border-radius: 999px; background: var(--surface-2, rgba(127, 127, 127, .12)); border: 1px solid var(--line); }
.zt-rolle button { border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink-soft);
  font-size: .68rem; font-weight: 800; letter-spacing: .03em; padding: 4px 9px; border-radius: 999px; }
.zt-rolle button[aria-pressed="true"] { background: var(--lime); color: var(--on-lime); }
.zt-rolle button[data-r="aus"][aria-pressed="true"] { background: var(--ink-faint); color: var(--surface); }

.zt-dd-fuss { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.zt-dd-fuss .zt-hinw { flex: 1; min-width: 180px; font-size: .76rem; color: var(--ink-faint); line-height: 1.5; }

/* ---------------------------------------------------------------- Dreispaltiges Feld */
.zt-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
@media (max-width: 1400px) { .zt-grid { grid-template-columns: 240px minmax(0, 1fr); } .zt-netz { grid-column: 1 / -1; } }
@media (max-width: 980px) { .zt-grid { grid-template-columns: minmax(0, 1fr); } }
.zt-sp { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.zt-karte { background: var(--surface); border: 1px solid var(--cardline, var(--line));
  border-radius: var(--r-lg, 16px); padding: 16px 18px; }
.zt-karte > h3 { font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 12px; }

.zt-kpi { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.zt-kpi b { font-family: var(--disp); font-size: 1.6rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.zt-kpi span { font-size: .78rem; color: var(--ink-soft); }
.zt-kpi.k-unbekannt b { color: var(--ink-faint); }

.zt-zeile { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .82rem; }
.zt-zeile:first-of-type { border-top: 0; }
.zt-zeile .zt-l { flex: 1; min-width: 0; color: var(--ink-soft); overflow-wrap: anywhere; }
.zt-zeile .zt-w { font-weight: 700; flex: none; }

/* ---------------------------------------------------------------- Frage + Strom */
.zt-frage { background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg, 16px); padding: 16px 18px; }
.zt-frage textarea { width: 100%; min-height: 76px; resize: vertical; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.55; outline: none; }
.zt-frage textarea::placeholder { color: var(--ink-faint); }
.zt-frage-fuss { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.zt-frage-fuss .zt-wer { flex: 1; min-width: 160px; font-size: .78rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.zt-frage-fuss .zt-wer b { color: var(--ink); }

.zt-vor { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.zt-vor button { border: 1px solid var(--line); background: none; color: var(--ink-soft); cursor: pointer;
  font: inherit; font-size: .78rem; padding: 6px 11px; border-radius: 999px; text-align: left; }
.zt-vor button:hover { border-color: var(--lime); color: var(--ink); }

.zt-strom { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.zt-eintrag { background: var(--surface); border: 1px solid var(--cardline, var(--line));
  border-radius: var(--r-lg, 16px); overflow: hidden; }
.zt-eintrag-kopf { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.zt-eintrag-kopf .zt-f { font-size: 1rem; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.zt-eintrag-kopf .zt-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 7px; font-size: .74rem; color: var(--ink-faint); }

.zt-ant { padding: 14px 18px; border-top: 1px solid var(--line); }
.zt-ant:first-of-type { border-top: 0; }
.zt-ant-kopf { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.zt-ant-kopf .zt-quelle { font-size: .74rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.zt-ant-kopf .zt-ms { font-size: .72rem; color: var(--ink-faint); margin-left: auto; flex: none; }
.zt-ant-txt { font-size: .93rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.zt-ant-txt.zu { max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.zt-mehr { border: 0; background: none; color: var(--lime-strong, var(--lime)); cursor: pointer;
  font: inherit; font-size: .8rem; font-weight: 700; padding: 8px 0 0; }
.zt-ant.a-fehler .zt-ant-txt { color: var(--bad); font-style: italic; }
/* Ersetzte Antwort: sichtbar abgesetzt, aber NICHT wie ein Fehler — sie ist ein brauchbarer
   Text unter falschem Absender. Der Rand sagt "Vorsicht", die Zeile darunter sagt warum. */
.zt-ant.a-ersetzt { border-left: 3px solid var(--warn); padding-left: 15px; }
.zt-ersatz { background: var(--warn-bg); color: var(--warn); border-radius: var(--r-sm, 10px);
  padding: 9px 12px; font-size: .82rem; line-height: 1.55; margin-bottom: 11px; }
/* Auffaellig kurze Antwort: gleiche Bauform wie der Ersatz-Hinweis, weil es dieselbe Klasse
   Aussage ist — "hier stimmt etwas mit der Herkunft der Antwort nicht". Kein Fehler-Rot:
   die Antwort ist nicht falsch, sie ist moeglicherweise unvollstaendig. */
.zt-kurz { display: flex; gap: 8px; align-items: flex-start; background: var(--warn-bg); color: var(--warn);
  border-radius: var(--r-sm, 10px); padding: 9px 12px; font-size: .82rem; line-height: 1.55; margin-bottom: 11px; }
.zt-kurz .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.zt-ant.a-unbekannt .zt-ant-txt { color: var(--ink-faint); font-style: italic; }

.zt-ant-akt { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }

.zt-leer { text-align: center; padding: 44px 20px; color: var(--ink-faint); }
.zt-leer .ic { width: 30px; height: 30px; opacity: .4; margin-bottom: 10px; }
.zt-leer b { display: block; color: var(--ink-soft); font-size: .95rem; margin-bottom: 5px; }

.zt-lauf { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: .86rem; color: var(--ink-soft); }
.zt-lauf .zt-puls { width: 9px; height: 9px; border-radius: 50%; background: var(--lime); flex: none;
  animation: ztpuls 1.15s ease-in-out infinite; }
@keyframes ztpuls { 0%, 100% { opacity: .3; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .zt-lauf .zt-puls { animation: none; opacity: .8; } }

/* ---------------------------------------------------------------- Netz (rechte Spalte) */
.zt-netz .zt-lane { border: 0; background: none; padding: 6px 0; margin: 0; border-top: 1px solid var(--line); }
.zt-netz .zt-lane:first-of-type { border-top: 0; }

/* ---------------------------------------------------------------- Nova-Zugang
   Der Code-Weg steht ABSICHTLICH neben dem Kauf-Weg, nicht statt ihm: ein freigeschalteter
   Zugang, der so aussieht wie ein bezahlter, verwischt spaeter, wer wofuer bezahlt hat. */
.zt-code { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.zt-code input { height: 42px; min-width: 190px; padding: 0 14px; border-radius: var(--r-in, 12px);
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .1); color: #fff; font: inherit; }
.zt-code input::placeholder { color: rgba(255, 255, 255, .55); }
.zt-code .zt-code-msg { flex-basis: 100%; text-align: center; font-size: .8rem; margin-top: 4px; min-height: 1.2em; }
.zt-code .zt-code-msg.gut { color: #9df58b; }
.zt-code .zt-code-msg.schlecht { color: #ffb4a8; }

/* ---------------------------------------------------------------- NOVA-Feld: dunkel bleiben
   ALTDEFEKT, vom Kontrast-Messer gefunden (2026-07-31): `.nova-hero` zieht seinen ersten
   Farbstopp aus `var(--rail)`. Seit „Nav folgt Theme" (Runde 9) ist --rail im HELLMODUS hell —
   damit wurde das Feld hell, und jede Schrift darin ist auf `#fff` festgenagelt (h2, p, Badge).
   Weiss auf hell: unlesbar. Der Defekt war unsichtbar, weil ihn niemand im Hellmodus ansah.
   Das Feld ist eine bewusst DUNKLE Flaeche — es darf nicht mit dem Modus kippen. Der Akzent
   kommt weiterhin aus dem Marken-Kit; nur der Trag-Grund steht fest. */
.nova-hero { background: linear-gradient(150deg, #2f2960, #171334); }

/* Dieselbe Messung, zweiter Fund: `.ent-badge` traegt weisse Schrift auf einem Verlauf, dessen
   heller Stopp (#b06bff) nur 3.28:1 erreicht — unter der Schwelle fuer kleine Schrift. Es ist
   ein Etikett, kein Zierrat: es sagt, welcher Zugang gilt. Nur die zwei Stopps werden dunkler,
   der Farbton bleibt; Aenderung hier statt in index.html, damit sie in einer Zeile ruecknehmbar ist. */
.ent-badge { background: linear-gradient(135deg, #6b46e0, #8f4fd6); }

/* Knopf auf dunklem Grund. NICHT nur `color:#fff` auf .btn-ghost setzen: dessen Flaeche kommt
   aus var(--surface) und ist im Hellmodus weiss — weisse Schrift darauf ist unsichtbar (im Bild
   gesehen, 2026-07-31). Die Flaeche muss mitgeaendert werden, nicht nur die Schrift. */
.zt-btn-hell, .nova-hero .btn.zt-btn-hell {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .34); color: #fff;
}
.zt-btn-hell:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.zt-btn-hell.zt-leise { background: none; border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .8); }

/* Nova bei der Arbeit: Streifen statt Kacheln — die Frage ist „was laeuft gerade",
   und darauf antwortet eine Zeitachse besser als ein Raster. */
.zt-nv { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.zt-nv:first-of-type { border-top: 0; }
.zt-nv-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface-2, rgba(127, 127, 127, .12)); color: var(--ink-soft); }
.zt-nv-ic .ic { width: 15px; height: 15px; }
.zt-nv.s-laeuft .zt-nv-ic { background: var(--lime); color: var(--on-lime); }
.zt-nv.s-wartet .zt-nv-ic { background: var(--warn-bg); color: var(--warn); }
.zt-nv-t { min-width: 0; flex: 1; }
.zt-nv-t b { display: block; font-size: .88rem; overflow-wrap: anywhere; }
.zt-nv-t span { display: block; font-size: .78rem; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.zt-nv-z { flex: none; font-size: .72rem; color: var(--ink-faint); }

/* ==========================================================================================
   KOMMANDOZENTRALE — Bauform 2 (2026-08-01)

   AUFTRAG (Operator): "bei ai.taxonair ist es maximal geiler ... du hättest dich einfach nur
   die Farben ändern müssen ... nutze auch die Darstellungsfunktion wie die tax on air ai
   bietet bei einem chat ... Infos im Design darzustellen."

   WAS UEBERNOMMEN WIRD: die ANORDNUNG der Vorlage — ruhige Buehne mit zweifarbiger
   Schlagzeile, EIN breites Eingabefeld mit rundem Absende-Knopf, Vorschlags-Pillen; und die
   Antwort als DOKUMENT statt als Sprechblase: Kopf mit Absender, Status-Zeile mit gemessener
   Zahl, Urteil als Schlagzeile, Analyse, Belege als Chips am Fuss.
   Dazu die Handschrift aus cf-hgf.css: die winzige, versale, sehr fette KURSIVE Pille und der
   Hervorhebungs-Streifen ueber der fuehrenden Karte.

   WAS NICHT UEBERNOMMEN WIRD: die Farben. Diese Konsole ist white-label — jeder Ton kommt aus
   den Mandanten-Variablen. Das Blau der Vorlage waere beim ersten fremden Marken-Kit falsch.

   DIE FARB-ENTSCHEIDUNG, die hier die eigentliche Arbeit ist: --lime ist ein sehr heller Ton
   (#CFDD28 bei BBE). Als TEXT auf heller Flaeche kommt er auf rund 1,7:1 und reisst damit
   sowohl den Text- als auch den UI-Grenzwert (R5, P0). Er wird deshalb NIE zu Text auf hellem
   Grund. Er wird zur FLAECHE mit --on-lime darauf — als Marker-Block hinter dem betonten Wort
   der Schlagzeile. Das traegt in Hell UND Dunkel, ist kontraststark, und sieht staerker aus
   als der Verlaufstext der Vorlage. Wo der Akzent als Linie oder Streifen auftritt, ist er
   Schmuck und nie der alleinige Traeger einer Aussage (R28d).
   ========================================================================================== */

/* -------------------------------------------------------------------- Zustands-Zeichen
   R28d: jeder Zustand hat eine eigene FORM, nicht nur eine Farbe. */
.zt-zeichen { width: 14px; height: 14px; flex: none; }
.zt-zust { display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 9px; border-radius: 999px; font-size: .75rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; }
.zt-zust .dot { display: none; }

/* -------------------------------------------------------------------- Die Buehne */
.zt-buehne { position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: clamp(22px, 4vw, 44px) clamp(18px, 3.4vw, 40px); }
.zt-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% -12%, color-mix(in srgb, var(--lime) 22%, transparent), transparent 62%),
    radial-gradient(74% 54% at 88% 6%, color-mix(in srgb, var(--info) 16%, transparent), transparent 60%); }

.zt-eyebrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft); }
.zt-puls-pkt { width: 7px; height: 7px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent); animation: zt-puls 2.2s infinite; }
@keyframes zt-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 50%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.zt-schlag { margin: 14px 0 0; text-align: center; font-family: var(--disp);
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.1rem); font-weight: 900; line-height: 1.06;
  letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
/* Der Marker-Block statt Akzent-Text: hoher Kontrast in beiden Themen (siehe Kopfkommentar). */
.zt-schlag-akz { display: inline-block; background: var(--lime); color: var(--on-lime);
  padding: 0 .22em; border-radius: calc(var(--r-sm) * .6); box-decoration-break: clone;
  -webkit-box-decoration-break: clone; }
.zt-schlag-sub { margin: 14px auto 0; max-width: 46ch; text-align: center;
  font-size: 1rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

/* Das Eingabefeld — EIN breites Feld, runder Absende-Knopf rechts. */
.zt-ask { display: flex; align-items: flex-end; gap: 10px; margin: 26px auto 0;
  max-width: 760px; padding: 10px 10px 10px 18px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-lg); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.zt-ask:focus-within { border-color: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 26%, transparent); }
.zt-ask-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.zt-ask textarea { flex: 1; min-width: 0; border: 0; background: none; resize: none;
  font: inherit; font-size: 1rem; line-height: 1.55; color: var(--ink);
  padding: 11px 0; min-height: 46px; max-height: 220px; }
.zt-ask textarea:focus { outline: none; }
.zt-ask textarea::placeholder { color: var(--ink-faint); }
.zt-ask-btn { flex: none; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--lime); color: var(--on-lime);
  transition: transform .15s var(--ease), filter .2s var(--ease); }
.zt-ask-btn svg { width: 20px; height: 20px; }
.zt-ask-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.zt-ask-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.zt-buehne .zt-vor { justify-content: center; margin-top: 16px; }
.zt-buehne .zt-vor button { min-height: 40px; border-radius: 999px; font-size: .875rem;
  padding: 8px 15px; }
.zt-buehne .zt-wer { display: block; margin: 16px 0 0; text-align: center;
  font-size: .875rem; color: var(--ink-soft); }
.zt-buehne .zt-wer b { color: var(--ink); }

/* -------------------------------------------------------------------- Modell-Karten */
.zt-mk { position: relative; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); padding: 13px 14px 12px; margin-top: 9px; }
/* Hervorhebungs-Streifen der fuehrenden Karte (Higgsfield-Bauteil). Er ist Schmuck: die
   Fuehrung steht zusaetzlich als Wort in der Pille — Farbe traegt nie allein (R28d). */
.zt-mk.r-fuehrt { border-color: var(--lime); }
.zt-mk.r-fuehrt::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--lime); }
.zt-mk.r-aus { opacity: .58; }
.zt-mk-kopf { display: flex; align-items: center; gap: 10px; }
.zt-mk-n { min-width: 0; flex: 1; }
.zt-mk-n b { display: block; font-size: .9375rem; font-weight: 700; overflow-wrap: anywhere; }
.zt-mk-n span { display: block; font-size: .8125rem; color: var(--ink-faint); margin-top: 1px; }
.zt-mk .zt-zust { margin-top: 10px; }

/* Das Siegel: zwei Buchstaben statt eines fremden Markenzeichens. */
.zt-siegel { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-family: var(--disp);
  font-size: .8125rem; font-weight: 900; letter-spacing: .02em;
  background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line); }

/* Die KURSIVE Pille: sie sagt "das ist eine Absicht" (die gesetzte Rolle), nie "das ist ein
   Befund" — der Zustand daneben steht aufrecht. Genau diese Unterscheidung traegt das
   Vorlagen-Pack, und wer sie ueberall setzt, hat den Ton kopiert und die Aussage verloren. */
.zt-rollpille { flex: none; font-style: italic; font-weight: 900; font-size: .6875rem;
  letter-spacing: .07em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--line-strong); }
.zt-rollpille.p-fuehrt { background: var(--lime); color: var(--on-lime); border-color: var(--lime); }

/* Der Ausfall — mit Deutung und Handlung statt drei duerrer Zeilen. Die ART faerbt:
   wartet = es kommt von selbst zurueck, mensch = ohne dich nie, unbekannt = nicht gemessen. */
.zt-mk-stoer, .zt-stoerung { margin-top: 10px; padding: 11px 12px; border-radius: var(--r-sm);
  border-left: 3px solid var(--ink-faint); background: var(--surface-3); }
.zt-mk-stoer.s-wartet, .zt-stoerung.s-wartet { border-left-color: var(--warn); background: var(--warn-bg); }
.zt-mk-stoer.s-mensch, .zt-stoerung.s-mensch { border-left-color: var(--bad); background: var(--bad-bg); }
.zt-mk-stoer.s-unbekannt, .zt-stoerung.s-unbekannt { border-left-color: var(--ink-faint); background: var(--surface-3); }
.zt-mk-stoer b, .zt-stoerung b { display: block; font-size: .875rem; font-weight: 800; }
.zt-mk-stoer p, .zt-stoerung p { margin: 5px 0 0; font-size: .875rem; line-height: 1.55; color: var(--ink-soft); }
.zt-stoerung .zt-tun { color: var(--ink); font-weight: 600; }
.zt-stoerung .zt-detail { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem; color: var(--ink-faint); overflow-wrap: anywhere; }

.zt-inline-btn { margin-top: 8px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); cursor: pointer; font: inherit; font-size: .8125rem; font-weight: 700;
  padding: 8px 12px; min-height: 40px; border-radius: var(--r-sm); white-space: nowrap; }
.zt-inline-btn:hover { border-color: var(--lime); }
.zt-ersatzweg { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line); font-size: .875rem; line-height: 1.55; }
.zt-ersatzweg > .zt-zeichen { color: var(--good); margin-top: 3px; }
.zt-ersatzweg .zt-inline-btn { margin-top: 6px; }

/* -------------------------------------------------------------------- Antwort als Dokument */
.zt-ant-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.zt-absender { min-width: 0; flex: 1; }
.zt-absender b { display: block; font-size: .9375rem; font-weight: 800; overflow-wrap: anywhere; }
.zt-absender > span { display: block; font-size: .8125rem; color: var(--ink-faint); margin-top: 1px; }
.zt-dauer { flex: none; display: inline-flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 700; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.zt-kurve { width: 58px; height: 22px; color: var(--ink-faint); }
/* Die Selbstauskunft des Modells — als solche gekennzeichnet, nie als Messung der Konsole. */
.zt-sicher { flex: none; display: inline-flex; align-items: baseline; gap: 7px;
  padding: 5px 11px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-2); }
.zt-sicher b { font-size: .875rem; font-weight: 800; }
.zt-sicher.k-good b { color: var(--good); }
.zt-sicher.k-warn b { color: var(--warn); }
.zt-sicher.k-bad b { color: var(--bad); }
.zt-sicher.k-mut b { color: var(--ink-faint); }

.zt-lbl { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-soft); }

/* Das Urteil als Schlagzeile — die Kernuebernahme aus der Vorlage: der Satz, auf den es
   ankommt, ist gross und steht oben, nicht in Absatz vier. */
.zt-urteil-t { margin: 0 0 4px; font-family: var(--disp);
  font-size: clamp(1.125rem, 1rem + .7vw, 1.45rem); font-weight: 800; line-height: 1.32;
  letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.zt-abschnitt { margin-top: 18px; }
.zt-abschnitt > .zt-lbl { margin-bottom: 7px; }

.zt-ant-txt { font-size: 1rem; line-height: 1.7; color: var(--ink); white-space: normal;
  overflow-wrap: anywhere; }
.zt-ant-txt.zu { max-height: 300px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.zt-mehr { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; font: inherit; font-size: .875rem; font-weight: 700;
  padding: 8px 13px; min-height: 40px; border-radius: var(--r-sm); }
.zt-mehr:hover { border-color: var(--lime); }
.zt-mehr .ic { width: 15px; height: 15px; }

/* -------------------------------------------------------------------- Markdown im Text
   Das ist die "Darstellungsfunktion", die der Operator vermisst hat: eine Liste ist eine
   Liste, eine Tabelle eine Tabelle, eine Adresse ein Ziel. */
.zt-p { margin: 0 0 .85em; }
.zt-ant-txt > *:last-child { margin-bottom: 0; }
.zt-h { margin: 1.25em 0 .45em; font-family: var(--disp); font-weight: 800;
  letter-spacing: -.015em; line-height: 1.3; color: var(--ink); }
h3.zt-h { font-size: 1.125rem; } h4.zt-h { font-size: 1.0625rem; }
h5.zt-h, h6.zt-h { font-size: 1rem; }
.zt-liste { margin: 0 0 .85em; padding-left: 1.35em; }
.zt-liste li { margin: .3em 0; line-height: 1.65; }
.zt-liste li::marker { color: var(--ink-faint); font-weight: 700; }
.zt-zitat { margin: 0 0 .85em; padding: 2px 0 2px 14px; border-left: 3px solid var(--lime);
  color: var(--ink-soft); }
.zt-hr { border: 0; border-top: 1px solid var(--line); margin: 1.2em 0; }
.zt-kode { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.zt-pre { margin: 0 0 .85em; padding: 13px 15px; border-radius: var(--r-sm);
  background: var(--surface-3); border: 1px solid var(--line); overflow-x: auto; }
.zt-pre code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem; line-height: 1.6; color: var(--ink); white-space: pre; }
/* Breites bekommt einen eigenen Rollbereich — der Rumpf der Seite scrollt nie seitwaerts. */
.zt-tblw { margin: 0 0 .85em; overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-sm); }
.zt-tbl { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.zt-tbl th, .zt-tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top; }
.zt-tbl th { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--surface-2); white-space: nowrap; }
.zt-tbl tr:last-child td { border-bottom: 0; }

/* Der Link. Unterstrichen, nicht nur gefaerbt — Farbe traegt nie allein (R28d), und der
   Akzent waere auf hellem Grund ohnehin nicht kontraststark genug fuer Text (R5). */
.zt-link { color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--lime-strong, var(--lime)); text-decoration-thickness: 2px;
  text-underline-offset: 3px; font-weight: 600; overflow-wrap: anywhere; }
.zt-link:hover { background: color-mix(in srgb, var(--lime) 26%, transparent);
  border-radius: 3px; }
.zt-link-ic { width: 11px; height: 11px; margin-left: 3px; vertical-align: baseline;
  color: var(--ink-faint); }

/* -------------------------------------------------------------------- Belege
   R63 (P0): eine vom Modell genannte Adresse ist eine BEHAUPTUNG. Sie ist klickbar — das hat
   der Operator verlangt — aber sie traegt sichtbar, dass die Konsole sie nie aufgerufen hat.
   Ein Link, der aussieht wie ein geprueftes Zitat, borgt sich die Glaubwuerdigkeit der
   Oberflaeche; das ist die teuerste Form von Halluzination. */
.zt-beleg { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.zt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.zt-chip-link { display: inline-flex; align-items: center; gap: 4px; min-height: 34px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--ink); font-size: .8125rem; font-weight: 600;
  text-decoration: none; overflow-wrap: anywhere; }
.zt-chip-link:hover { border-color: var(--lime); background: var(--surface-3); }
.zt-beleg-leer { margin: 7px 0 0; font-size: .875rem; line-height: 1.55; color: var(--ink-faint); }
.zt-beleg-warn { display: flex; align-items: flex-start; gap: 6px; margin: 9px 0 0;
  font-size: .8125rem; line-height: 1.5; color: var(--ink-faint); }
.zt-beleg-warn > .zt-zeichen { margin-top: 2px; flex: none; }

.zt-kurzwarn { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 13px;
  padding: 10px 12px; border-radius: var(--r-sm); border-left: 3px solid var(--warn);
  background: var(--warn-bg); font-size: .875rem; line-height: 1.55; }
.zt-kurzwarn > .zt-zeichen { margin-top: 3px; color: var(--warn); }
.zt-ersatz { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 13px;
  padding: 10px 12px; border-radius: var(--r-sm); border-left: 3px solid var(--bad);
  background: var(--bad-bg); font-size: .875rem; line-height: 1.55; }
.zt-ersatz > .zt-zeichen { margin-top: 3px; color: var(--bad); }

.zt-ant-akt { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* -------------------------------------------------------------------- Skelett statt Balken
   R48: dieselbe Form wie die fertige Karte, damit beim Eintreffen nichts springt. Und kein
   Fortschrittsbalken: die Bruecke meldet keinen Fortschritt, also behaupten wir keinen. */
.zt-lauf { padding: 16px 18px; }
.zt-lauf > p { margin: 0 0 14px; font-size: .875rem; line-height: 1.55; color: var(--ink-soft); }
.zt-skel { padding: 14px 0; border-top: 1px solid var(--line); }
.zt-skel:first-of-type { border-top: 0; padding-top: 0; }
.zt-skel-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.zt-skel-kreis { width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; }
.zt-skel-z { display: block; height: 11px; border-radius: 5px; margin-bottom: 8px; }
.zt-skel-gross { height: 18px; margin-bottom: 12px; }
.zt-skel-r { margin-left: auto; }
.zt-skel-kreis, .zt-skel-z { background: var(--surface-3);
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 7%, transparent), transparent);
  background-size: 220% 100%; animation: zt-schimmer 1.5s linear infinite; }
@keyframes zt-schimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } }

/* -------------------------------------------------------------------- Klick-Register */
.zt-klickliste { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.zt-klick { min-width: 0; }
.zt-klick-w { display: block; font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
.zt-klick-m { display: block; font-size: .8125rem; color: var(--ink-faint); margin-top: 1px; }
.zt-klick-leer, .zt-klick-rest { margin: 6px 0 0; font-size: .875rem; line-height: 1.55; color: var(--ink-faint); }
.zt-klick-fuss { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: .8125rem; line-height: 1.5; color: var(--ink-faint); }

/* -------------------------------------------------------------------- Zugaenglichkeit */
.zt-buehne :focus-visible, .zt-mk :focus-visible, .zt-ant :focus-visible,
.zt-karte :focus-visible, .zt-tblw:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.zt-ask:focus-within .zt-ask-btn:focus-visible { outline-color: var(--on-lime); }

@media (prefers-reduced-motion: reduce) {
  .zt-puls-pkt, .zt-skel-kreis, .zt-skel-z { animation: none; }
  .zt-ask-btn:hover { transform: none; }
}

/* -------------------------------------------------------------------- Schmal
   R7: nicht quetschen, sondern stapeln. */
@media (max-width: 900px) {
  .zt-buehne { padding: 24px 16px; }
  .zt-ask { flex-direction: row; padding-left: 14px; }
  .zt-ant-kopf { gap: 8px; }
  .zt-dauer { margin-left: auto; }
}