/* Web-Service-eigene Ergänzungen (WP-04).

   app.css kommt byte-identisch aus prozesse/static/ (Docker-Build-Stage, WP-01)
   und darf hier NICHT verändert werden — sonst driften zwei Kopien einer
   sicherheitsrelevanten Datei auseinander. Alles, was nur der web-Service
   braucht (Chat-Layout, Quellen-Karten, Musterbanner), steht deshalb hier.
   Nutzt ausschließlich die Farbvariablen aus app.css, damit Hell/Dunkel und
   Typografie identisch bleiben. */

/* .app-footer/.footer-nav stehen jetzt in prozesse/static/app.css (WP-13,
   Nachtrag): seit die Landkarte denselben Fuß bekam, ist es kein
   web-spezifisches Bedürfnis mehr, sondern gehört in die geteilte Datei --
   sonst genau die Kopie-Drift, die dieser Datei-Kommentar oben verhindern
   soll. web/static/app.css übernimmt sie unverändert (Docker-Build-Stage). */

/* .visually-hidden steht jetzt in prozesse/static/app.css (Nachtrag
   Navigations-Redesign): der neue Wordmark-Header braucht sie auch auf
   prozesse-Seiten, die dieses web.css gar nicht laden -- Verschiebung in die
   geteilte Datei statt zweiter Kopie, exakt das Muster aus dem Kommentar
   oben ("sonst genau die Kopie-Drift"). */

/* ---- Musterkennzeichnung (dauerhaft, eine von vier Stellen laut Plan) ---- */
.musterbanner {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}

/* ---- KI-Transparenz nach Art. 50 EU-KI-VO (WP-Z9, Paket 1) ----
   Steht auf /chat und /editor ganz oben und sagt vor der ersten Interaktion,
   dass eine KI antwortet.

   Bewusst KEIN Ampel-Ton und keine eigene Farbe: Dass eine KI antwortet, ist
   weder Warnung noch Fehler, sondern eine Tatsache über die Seite -- dieselbe
   Überlegung wie beim Fokus-Block aus WP-Z3 darunter. Die Abgrenzung zum
   Musterbanner (gefüllte Fläche, gleicher Ton) läuft deshalb über Kontur statt
   Farbe: nur der linke Balken, kein Flächenton. Zwei gefüllte Kästen
   übereinander läsen sich als ein Block, und dann verschwimmt „erfundene
   Inhalte" mit „KI-erzeugte Antworten" -- zwei Aussagen, die getrennt gehören.

   Die Schrift bleibt --text (nicht --muted): Eine Pflichtangabe, die man
   überliest, erfüllt ihren Zweck nicht. */
.ki-hinweis {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--text);
}
.ki-hinweis__icon {
  flex: 0 0 auto;
  /* Optisch auf die erste Textzeile ausgerichtet statt auf die Kastenkante. */
  margin-top: 0.1rem;
  color: var(--accent-text);
}

/* Im Generator sitzt der Hinweis in einer bereits gerahmten Sektion -- dort
   wäre ein zweiter Rahmen ringsum eine Dopplung, der Balken genügt. Und kein
   eigener margin: .editor-generator ist ein Grid mit gap, der den Abstand
   bereits setzt -- eine zusätzliche Margin addierte sich sichtbar dazu. */
.editor-generator .ki-hinweis {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  padding: 0 0 0 0.7rem;
  margin: 0;
}

/* ---- Eingegrenzter Chat: „Frag diesen Prozess" (WP-Z3) ----
   Steht direkt unter der Mandanten-Zeile und sagt, worauf die Antworten
   beschränkt sind. Bewusst kein Ampel-Ton (--ok/--warn): Die Eingrenzung ist
   weder Erfolg noch Warnung, sondern ein Zustand — dieselbe ruhige Akzentfläche
   wie das Musterbanner, damit beide Zeilen als „Rahmenbedingung dieser Seite"
   zusammengehören. Die Aussage trägt der Text, nicht die Farbe (WCAG 1.4.1). */
.chat-fokus {
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.92rem;
}
.chat-fokus p { margin: 0; }
.chat-fokus p + p { margin-top: 0.35rem; }
/* Titel und Ausstieg sind Links auf dem Seitenhintergrund -> --accent-text
   (Design-System: Fläche != Schrift; im Dark Mode sind die beiden Tokens
   verschieden). */
.chat-fokus a { color: var(--accent-text); }

/* ---- Verlauf ---- */
.chat-verlauf {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.chat-runde {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
}

.chat-frage {
  font-weight: 600;
  margin: 0 0 0.6rem;
  /* Nutzertext kann lange Zeichenketten enthalten — nicht aus der Karte laufen. */
  overflow-wrap: anywhere;
}

.chat-antwort .md { max-width: none; }

/* Blinkender Cursor, solange Token nachlaufen. */
.chat-antwort.streamt::after {
  content: "▍";
  color: var(--muted);
  animation: chat-blink 1s steps(2, start) infinite;
}
@keyframes chat-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .chat-antwort.streamt::after { animation: none; }
}

/* ---- Kennzeichnung jeder KI-Antwort (WP-Z9, Art. 50 Abs. 2 EU-KI-VO) ----
   Steht direkt unter dem Antworttext, vor den Quellen. Bewusst zurückhaltend:
   Der Kopfhinweis oben trägt die Aufklärung, hier geht es nur noch darum, dass
   die Kennzeichnung *an der Ausgabe selbst* hängt -- auch wenn jemand eine
   einzelne Antwort herauskopiert oder weiterleitet. Ein zweites Mal in voller
   Lautstärke zu warnen, würde die Antwort entwerten, ohne mehr zu sagen.

   --muted ist hier vertretbar (anders als beim Kopfhinweis): Diese Zeile
   wiederholt eine Angabe, die der Besucher oben bereits gelesen hat.

   0.85rem und nicht kleiner: Das Design-System lässt --muted ausdrücklich nur
   „ab normaler Fließtextgröße" zu. Gemessen kommt die Zeile auf 4,96 (hell) /
   6,37 (dunkel) — über den geforderten 4,5:1, aber hell mit wenig Luft; noch
   kleiner zu setzen würde diese Reserve ohne Not aufbrauchen. 0.85rem ist
   zugleich die Größe der Quellen-Überschrift direkt darunter. */
.chat-ki-fussnote {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ---- Quellen-Karten ---- */
.chat-quellen {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.chat-quellen h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.chat-quellen ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.chat-quelle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
}
.chat-quelle a { text-decoration: none; }
.chat-quelle a:hover { text-decoration: underline; }
.chat-quelle-titel { flex: 1; overflow-wrap: anywhere; }
/* Büroklammer zum Originaldokument (erst ab WP-07 vorhanden). */
.chat-quelle-original { font-size: 1.05rem; line-height: 1; text-decoration: none; }

/* ---- Hinweisboxen (429/503/Netzfehler) — ruhig, kein alert() ---- */
.chat-hinweis {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.chat-hinweis.warnung { border-left: 4px solid var(--warn); }
.chat-hinweis.fehler { border-left: 4px solid var(--ende-border); }

/* ---- Injection-Testkonsole (WP-Z4) ----
   Das Urteil trägt seine Aussage im Text; die Farbe verstärkt nur (WCAG 1.4.1).
   Deshalb liegt die Farbe auf der Fläche und dem linken Balken, die Schrift
   bleibt --text. */
.ik-beispiele { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.ik-beispiele .btn { text-align: left; }

.ik-form { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.ik-form textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
.ik-aktionen { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ik-form button[disabled] { opacity: 0.6; cursor: default; }

.ik-urteil {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
}
.ik-urteil.verdacht { border-left: 4px solid var(--color-danger); background: var(--color-danger-soft); }
.ik-urteil.ok { border-left: 4px solid var(--ok); background: var(--ok-soft); }
.ik-urteil-satz { margin: 0 0 0.4rem; font-weight: 600; }
.ik-folge { margin: 0 0 0.6rem; }

.ik-treffer { margin: 0 0 0.6rem; padding-left: 1.1rem; display: grid; gap: 0.45rem; }
/* Der dekodierte Angriffstext: eigene Zeile, umbruchfreudig, nie aus der Karte
   laufend — er kommt vom Besucher und kann beliebig lang sein. */
.ik-fund {
  display: block;
  margin-top: 0.25rem;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.ik-notizen { margin: 0; padding-left: 1.1rem; }
.ik-ergebnis { margin-bottom: 1.4rem; }

/* ---- Landingpage (WP-13) ---- */
/* Wort-Bild-Logo hat einen fest weissen Hintergrund (Markenregel: nur auf hellem Grund) --
   bleibt darum als eigene helle Karte erkennbar, auch im Dark Mode. */
.hero-logo {
  display: block;
  max-width: 100%;
  height: auto;
  width: 480px;
  margin: 0 auto 1.2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.hero-lead {
  font-size: 1.08rem;
  max-width: 720px;
  margin: 0 0 1.1rem;
}

.cta-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0 0 1.8rem;
}

/* Textueller Architektur-Überblick — bewusst kein Bild (CSP img-src bleibt
   'self' data:, kein externer Bild-Host nötig). */
.arch-flow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0.6rem 0 1.6rem;
}
.arch-flow li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  min-width: 150px;
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.arch-flow li strong { font-size: 0.9rem; }
.arch-flow li span { color: var(--muted); font-size: 0.78rem; }
.arch-flow li:not(:last-child)::after {
  content: "→";
  align-self: center;
  color: var(--muted);
  margin-top: 0.3rem;
}

.feature-grid {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.7rem;
}
.feature-grid li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.feature-grid li span { color: var(--muted); font-size: 0.85rem; }

.security-steps {
  display: grid;
  gap: 0.5rem;
  margin: 0.6rem 0 0.6rem;
  padding-left: 1.3rem;
}
.security-steps li { padding-left: 0.2rem; }

.stack-chips {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---- Eingabe ---- */
.chat-form {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.chat-form textarea {
  flex: 1;
  padding: 0.65rem 0.8rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}
.chat-form button[disabled] { opacity: 0.6; cursor: default; }

/* ---- Hinweisboxen: dritte Variante fuer Erfolg (WP-17), Warnung/Fehler
   stehen bereits weiter oben in .chat-hinweis.warnung/.fehler. ---- */
.chat-hinweis.erfolg { border-left: 4px solid var(--ok); }

/* ---- Konto: Registrierung/Login/Konto-Ansicht (WP-17) ---- */
.auth-form {
  display: grid;
  gap: 1rem;
  max-width: 22rem;
  margin: 1rem 0;
}
.auth-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.auth-form input[type="email"],
.auth-form input[type="password"] {
  padding: 0.75rem 0.8rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
.auth-form input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.auth-form .btn { justify-self: start; }
.auth-meta { margin-top: 0.8rem; font-size: 0.9rem; }

/* Honeypot: fuer Menschen unsichtbar, aber im DOM vorhanden (kein display:none/
   type=hidden -- manche Bots ueberspringen genau solche Felder gezielt). */
.hp-feld {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.konto-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  display: grid;
  gap: 0.4rem;
}
.konto-info dt { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.konto-info dd { margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.konto-info dd:last-child { margin-bottom: 0; }

/* ---- Prozess-Editor (WP-20) ----
   Nur Layout. Das Aussehen der Zeichenflaeche selbst kommt aus den einvendorten
   bpmn-js-Stylesheets (vendor/diagram-js.css, vendor/bpmn-js.css) und wird hier
   bewusst NICHT ueberschrieben: Sie sind Fremdcode und werden als Ganzes gegen
   neue Versionen getauscht. Insbesondere bleibt das bpmn.io-Wasserzeichen
   (.bjs-powered-by) unberuehrt -- die Lizenz verlangt, dass es sichtbar bleibt
   und nicht ueberdeckt wird. */
.editor-main { max-width: 1400px; }
.editor-intro { max-width: 70ch; }

.editor-leiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: end;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.editor-leiste label {
  display: grid;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--muted);
}
.editor-leiste .editor-breit { grid-column: 1 / -1; }
.editor-leiste input,
.editor-leiste select {
  font: inherit;
  font-size: var(--font-size-sm);
  padding: var(--space-2);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 44px; /* Touch-Target, Design-System-Regel 5 */
}
/* --focus-ring ist ein box-shadow-Wert (app.css), kein outline — gleiches
   Muster wie .nav-dropdown__trigger dort. Der Ring bleibt sichtbar. */
.editor-leiste input:focus-visible,
.editor-leiste select:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.editor-leiste input[readonly] { color: var(--muted); background: var(--bg); }
.editor-aktionen { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }
.editor-aktionen .btn { width: 100%; min-height: 44px; }
/* "Endgültig entfernen" (Papierkorb-Stufe 2, WP-20a) -- eigene Fläche statt
   der Akzentfarbe von .btn, damit der irreversible Schritt sich optisch von
   "Speichern"/"Archivieren" abhebt. --color-danger ist bereits ein Token
   (app.css), keine neue Rohfarbe. */
.btn.gefahr { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-text-on-brand); }
.btn.gefahr:hover:not(:disabled) { filter: brightness(1.08); }

/* ---- KI-Prozessgenerator (WP-21) ----
   Eigene Karte oberhalb der Metadaten-Leiste: Der Generator ist ein zweiter
   Einstieg in den Editor ("beschreiben statt zeichnen"), kein Feld unter
   vielen. Bewusst dieselbe Flaechen-/Rahmen-Sprache wie .editor-leiste, damit
   beides als ein zusammengehoeriger Block gelesen wird. */
.editor-generator {
  display: grid;
  gap: var(--space-2);
  max-width: 80ch;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.editor-generator__titel { margin: 0; font-size: var(--font-size-lg); }
.editor-generator__feld {
  display: grid;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--muted);
}
.editor-generator textarea {
  font: inherit;
  font-size: var(--font-size-sm);
  padding: var(--space-2);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 88px;
}
/* --focus-ring ist ein box-shadow-Wert (app.css), kein outline -- gleiches
   Muster wie bei .editor-leiste oben. */
.editor-generator textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.editor-generator__aktion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.editor-generator__aktion .btn { min-height: 44px; } /* Touch-Target, Regel 5 */

.editor-leinwand {
  height: min(70vh, 700px);
  min-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  /* Ohne feste Hoehe zeichnet diagram-js in einen 0 px hohen Container. */
  resize: vertical;
}

/* Textfarbe der bpmn-js-Bedienelemente festnageln — sonst ist der Editor im
   Dunkelmodus praktisch unbenutzbar.

   Warum: bpmn-js zeichnet auf ein bewusst WEISSES Blatt (die Zeichenflaeche ist
   ein Dokument, kein UI-Hintergrund) und legt seine Bedienelemente direkt
   darauf. Drei davon bringen KEINE eigene Textfarbe mit und erben sie vom
   Dokument (nachgeprueft in vendor/diagram-js.css):

     * .djs-direct-editing-content — das Eingabefeld beim Doppelklick auf ein
       Element. Untergrund komplett durchsichtig, also das weisse Blatt.
     * .djs-context-pad .entry     — die Werkzeuge neben dem gewaehlten Element,
       Untergrund fest weiss.
     * .djs-popup                  — das Menue zum Wechseln des Elementtyps,
       Untergrund fest weiss.

   Im Hellmodus faellt das nicht auf: Die geerbte Farbe ist ohnehin dunkel. Im
   Dunkelmodus erbten sie --color-text (#EAEEF3) und standen damit fast weiss
   auf weiss — Beschriftung und Schaltflaechen waren kaum zu erkennen
   (Nutzerbefund 25.07.2026, am laufenden Editor nachgemessen).

   Der Wert wird bewusst in BEIDEN Modi gesetzt, nicht nur unter .dark: Diese
   Bedienelemente gehoeren zum weissen Blatt und nicht zum Seitenhintergrund;
   ihre Lesbarkeit darf gar nicht erst davon abhaengen, welche Textfarbe die
   Seite gerade fuehrt. --color-neutral-800 ist die Roh-Tinte der Farbskala und
   wird in .dark nicht umdefiniert (app.css) — genau deshalb der richtige Token
   und keine rohe Farbe.

   .djs-parent ist der Container, den diagram-js selbst anlegt; alle drei
   Bedienelemente haengen darunter, eine Regel genuegt also. Die SVG-Grafik
   bleibt unberuehrt: Formen faerben ueber fill/stroke, und die
   Vendor-Stylesheets benutzen nirgends currentColor (geprueft). */
.editor-leinwand .djs-parent {
  color: var(--color-neutral-800);
}

/* ---- Besucher-Upload (WP-22, static/hochladen.html) ----
   Aufbau wie .auth-form (dasselbe Formular-Muster wie Registrierung/Login),
   nur breiter: Der Dateiname und der Titel-Platzhalter brauchen mehr Platz als
   eine E-Mail-Adresse. */
.upload-intro { max-width: 70ch; }
.upload-form {
  display: grid;
  gap: var(--space-4);
  max-width: 34rem;
  margin: var(--space-4) 0;
}
.upload-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}
.upload-form input[type="file"],
.upload-form input[type="text"] {
  padding: 0.75rem 0.8rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
}
/* Touch-Target (Design-System-Regel 5): Der Dateiwaehler ist auf dem Handy die
   einzige Schaltflaeche des Formulars neben dem Absenden-Knopf. */
.upload-form input[type="file"] { min-height: 44px; }
.upload-form input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.upload-form .btn { justify-self: start; min-height: 44px; }

/* Der Scanner-Fund in der Quarantaene-Meldung. Er enthaelt Fremdtext aus dem
   abgelehnten Dokument (bei einem Base64-Treffer ein Stueck des Klartexts) und
   kann beliebig lang sein — deshalb umbrechen statt die Zeile sprengen. */
.upload-fund code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---- Nachweis-Ansicht (WP-Z2, static/nachweis.html) ----
   Aufbau bewusst wie der Aktualitaets-Check in prozesse/static/app.css
   (.ak-*/table.aktualitaet): dieselbe Tabellenanmutung, dieselbe Rolle der
   Abzeichen. Die BESCHRIFTUNG der Gruppe traegt die Aussage, die Farbe ist
   Verstaerkung -- nie der einzige Traeger (WCAG 1.4.1). Schriftfarbe bleibt
   deshalb ueberall --text bzw. --accent-text, keine Farbflaeche mit weisser
   Schrift. */
/* ---- Seite /ki-transparenz (WP-Z9, Paket 5) ----
   Reine Textseite wie Impressum und Datenschutz. Die Faktentabelle uebernimmt
   bewusst die Optik von .konto-info: Beides beantwortet "welche Werte gelten
   hier gerade", und zwei verschiedene Kaesten fuer dieselbe Rolle waeren eine
   Formensprache zu viel. */
.kit-intro { max-width: 70ch; }
.kit-stellen, .kit-nicht { max-width: 70ch; }
.kit-stellen li, .kit-nicht li { margin-bottom: 0.5rem; }

.kit-fakten {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  max-width: 70ch;
}
.kit-fakten dt {
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kit-fakten dd { margin: 0 0 0.6rem; overflow-wrap: anywhere; }
.kit-fakten dd:last-child { margin-bottom: 0; }

.nw-intro { max-width: 70ch; }
.nw-grenzen { max-width: 70ch; }
.nw-grenzen li { margin-bottom: 0.35rem; }

.nw-kennzahlen { margin: 0.9rem 0 0.8rem; display: grid; gap: 0.5rem; }
.nw-satz { margin: 0; font-size: 0.95rem; }
.nw-satz strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.nw-zaehler { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.nw-zaehler-item { display: inline-flex; align-items: baseline; gap: 0.35rem; }

table.nachweis { border-collapse: collapse; font-size: 0.88rem; background: var(--surface); width: 100%; }
table.nachweis th, table.nachweis td {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}
table.nachweis thead th {
  position: sticky; top: 0; background: var(--surface);
  font-size: 0.8rem; color: var(--muted); font-weight: 600; white-space: nowrap;
}
table.nachweis tbody tr:last-child th, table.nachweis tbody tr:last-child td { border-bottom: none; }

/* Zeitspalte in der Monospace-Schrift: gleiche Ziffernbreite, damit die
   Zeitpunkte untereinander vergleichbar bleiben (Design-System: JetBrains Mono
   fuer Zahlen-Tabellen). */
table.nachweis td.nw-zeit {
  font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap;
}
table.nachweis td.nw-herkunft { white-space: nowrap; color: var(--muted); }
/* Die technische Kennung des Vorgangs (chat, search_knowledge, ...). Fuer den
   technischen Pruefer ist sie die eigentliche Aussage -- klein, aber lesbar. */
.nw-kennung { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }

/* Fragetext, Detailzeile und Eintragsverweis stapeln sich in einer Zelle.
   overflow-wrap: der Fragetext ist Fremdeingabe und kann ein einziges langes
   Wort sein -- er darf die Tabelle nicht auseinanderdruecken. */
table.nachweis td.nw-geschehen { max-width: 46ch; }
.nw-frage { overflow-wrap: anywhere; }
.nw-detail { color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
.nw-eintrag { margin-top: 0.25rem; }
.nw-eintrag a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.nw-eintrag a:hover, .nw-eintrag a:focus-visible { text-decoration: underline; }

/* Vorgangsgruppen. Die Flaeche traegt die Farbe, die SCHRIFT bleibt --text
   (bzw. --accent-text, das Text-Token der Akzentfarbe) -- dieselbe Regel wie
   bei den Dringlichkeitsstufen des Aktualitaets-Checks. Ein Abzeichen ist mit
   0,72rem kleiner Text; da traegt keine Flaechenfarbe als Schriftfarbe.
   Gemessen am laufenden Container mit getComputedStyle, ueber die
   --surface-Flaeche der Tabelle gerechnet (die Soft-Tints sind halbtransparent):
   hell 9,9 / 12,1 / 11,8 / 14,5 -- dunkel 7,4 / 11,8 / 13,2 / 15,9.
   Erster Anlauf gab "inhalt" die Flaechenfarbe --ok als Schrift, wie es
   .badge.open in app.css tut: 4,25 hell und 2,68 dunkel -- beides unter AA.
   "sicherheit" nutzt bewusst nur die Soft-Flaeche, nicht die volle
   Danger-Flaeche: Ein abgewehrter Upload ist eine gute Nachricht, kein Alarm --
   er soll auffallen, aber nicht schreien. */
.badge.gruppe-frage      { background: var(--accent-soft);       color: var(--accent-text); border-color: var(--accent); }
.badge.gruppe-inhalt     { background: var(--ok-soft);           color: var(--text);        border-color: var(--ok); }
.badge.gruppe-sicherheit { background: var(--color-danger-soft); color: var(--text);        border-color: var(--color-danger); }
.badge.gruppe-system     { background: transparent;              color: var(--text);        border-color: var(--border); }