/* MARKEN-ENTSCHEID 2026-07-23 (R-092): MARKE = Teal #117d87 / Orange #ff7c36.
   #2563eb ist RESERVIERT fuer Aktiv-Wort/Wellenform-Cursor (Fachsemantik) und
   darf NIE Markenfarbe werden. Stabenet-Blau ist als Marke DEPRECATED. */
/* ════════════════════════════════════════════════════════════════════════════
   WhatzTxT · KANONISCHE DESIGN-TOKENS  (verbindlich, identisch ueberall)
   ────────────────────────────────────────────────────────────────────────────
   SELF-CONTAINED: kein externes CDN, kein @font-face, keine Drittquelle.
   Verdana ist systemresident (Windows/macOS/Office-Stack) — daher reine
   Font-Stack-Angabe. Diese Datei wird statisch aus public/ unter
   /design-tokens.css ausgeliefert und per <link> (server.js) bzw. @import
   (style.css) in alle Shop-/Legal-/Upload-Flächen eingehängt. Sie überschreibt
   NUR Schrift/Token-Variablen — kein Layout-Refactor.

   IDENTISCHE WERTE in:  Z:\...\app\modules\templates\_wt_tokens.css.j2
   (Jinja-{% include %} für die self-contained Forensik-Templates). Beide
   Dateien MÜSSEN synchron bleiben.

   ┌────────────────────────────────────────────────────────────────────────┐
   │ KOMPONENTEN-SPICKZETTEL (wo wird welcher Token verwendet?)               │
   ├────────────────────────────────────────────────────────────────────────┤
   │ Fliesstext           font-family:var(--wt-font); color:var(--wt-text)    │
   │ Konfidenz/Wortfarbe  ZWEI ROLLEN, ZWEI PALETTEN (siehe R-111-Block unten)│
   │                      TEXT/STRICH/KONTUR (lesbar, AA 4,5:1):              │
   │                        hoch   → color:var(--wt-conf-hoch)     #00785A    │
   │                        mittel → color:var(--wt-conf-mittel)   #8A5A00    │
   │                        unsich.→ color:var(--wt-conf-niedrig)  #AA4B00    │
   │                      FUELLUNG/Punkt/Marker (Okabe-Ito-ORIGINAL):         │
   │                        hoch   → var(--wt-conf-fill-hoch)      #009E73    │
   │                        mittel → var(--wt-conf-fill-mittel)    #E69F00    │
   │                        unsich.→ var(--wt-conf-fill-unsicher)  #D55E00    │
   │                      + Zweitkodierung ohne Farbe (Pflicht):              │
   │                        hoch = kein Strich · mittel = 2px DOTTED ·        │
   │                        unsicher = 2px SOLID + Alternativen-Chip          │
   │                      Quelle Forensik = consensus agreement_band          │
   │                      (hoch/mittel/unsicher); Lite = Whisper-probability   │
   │                      → im UI als "Vorschau" labeln.                      │
   │ Sprecher-Identität   NUR Avatar / Name / Bubble-Kante — NIE die          │
   │                      Wortfarbe. idx = speaker_idx, modulo 5:             │
   │                        var(--wt-spk-0..4), unknown → var(--wt-spk-unknown)│
   │ Wellenform           gehört   → fill/stroke:var(--wt-wave-heard)         │
   │                      Cursor   → var(--wt-wave-cursor)                    │
   │                      ungehört → var(--wt-wave-unheard)                   │
   │                      (Server-Hüllkurve)                                  │
   │ Aktives Wort         fett + 3px var(--wt-active) Unterstrich +           │
   │                      amplituden-gekoppeltes Buchstaben-Wippen            │
   │                      (nur wenn prefers-reduced-motion NICHT reduce)      │
   │ A11y-Neutral         [data-conf-mode=neutral] hebt per-Wort-Farbe auf;   │
   │                      Struktur-Cues (Aktiv-Unterstrich, Wasserzeichen)    │
   │                      bleiben als kostenlose Absicherung erhalten.        │
   └────────────────────────────────────────────────────────────────────────┘
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Verbindlicher Fliesstext-Font (kanonisch, systemresident) ──────────── */
  --wt-font: Verdana, Geneva, Tahoma, sans-serif;

  /* ── Verbindliches Produkt-UI-System ────────────────────────────────────
     Dieselben Werte steuern Workspace, öffentliche Seiten, Konto, Checkout
     und Recht. Fachfarben (Konfidenz/Sprecher/Wellenform) bleiben darunter
     eigenständig, damit semantische Signale nicht mit Branding vermischt
     werden. */
  --wt-ui-bg: #edf2f6;
  --wt-ui-surface: #ffffff;
  --wt-ui-surface-soft: #f5f8fa;
  --wt-ui-rail: #0b1c2d;
  --wt-ui-rail-raised: #122b43;
  --wt-ui-line: #d5e0e7;
  --wt-ui-line-strong: #a9bdc9;
  --wt-ui-text: #132437;
  --wt-ui-muted: #64788b;
  --wt-ui-muted-dark: #8da4b4;
  --wt-ui-brand: #117d87;
  --wt-ui-brand-strong: #0d6169;
  --wt-ui-accent: #ff7c36;
  --wt-ui-success: #1f9d68;
  --wt-ui-warning: #b26a08;
  --wt-ui-danger: #c63d4c;
  --wt-ui-radius: 7px;
  --wt-ui-radius-panel: 8px;
  --wt-ui-control-height: 40px;
  --wt-ui-shadow: 0 12px 28px -26px rgba(12, 31, 48, .72);

  /* ── Fliesstext-Farbe ───────────────────────────────────────────────────
     --wt-text  = aktiv aufgelöste Farbe (flippt mit Light/Dark, NUTZEN).
     --wt-text-light / --wt-text-dark = die beiden Roh-Endwerte (Referenz). */
  --wt-text-light: #111;
  --wt-text-dark:  #faf8f5;
  --wt-text:       var(--wt-text-light);   /* Light-Default */

  /* ══ KONFIDENZ-AMPEL — ROLLENBASIERT (R-111, 2026-07-28) ═══════════════════
     WARUM ZWEI PALETTEN? Weil eine Farbe nicht gleichzeitig „lesbarer Text"
     und „farbenblind-trennbarer Marker" sein kann. Getrennt nach ROLLE:

     ┌ ROLLE 1 · FUELLUNG (Punkt, Chip-Fläche, Balken, Marker) ────────────────
     │  = Okabe-Ito-ORIGINAL, unverändert. Wird NICHT abgedunkelt.
     │  Gemessen (eigene WCAG-Implementierung, Selbsttest gegen #777/#fff=4,48):
     │    #009E73 → 3,42 auf #ffffff · 3,04 auf dem dunkelsten Badge-Grund
     │    #E69F00 → 2,25 auf #ffffff · 2,00 (verfehlt 3:1 ALLEIN!)
     │    #D55E00 → 3,87 auf #ffffff · 3,43
     │  DER 3:1-KONTRAST NACH WCAG 1.4.11 WIRD DESHALB VON DER 1,5px-KONTUR
     │  GETRAGEN (--wt-conf-ring, Farbe = ROLLE 2), NICHT VON DER FUELLUNG.
     │
     │  !! NICHT „REPARIEREN" !! Wer die Fuellung hue-treu auf 3:1 abdunkelt,
     │  zerstoert genau die Eigenschaft, wegen der Okabe-Ito gewaehlt wurde.
     │  Gemessen mit CIEDE2000 auf Vienot-Rotgruen-Simulation, Paar gelb↔rot:
     │    Okabe-Ito-Original   #E69F00 ↔ #D55E00 → ΔE 18,8
     │    hue-treu abgedunkelt #8A5A00 ↔ #AA4B00 → ΔE  1,9   (= nicht trennbar)
     │  Die abgedunkelte Palette ist also fuer FLAECHEN unbrauchbar; sie ist
     │  ausschliesslich fuer duenne Formen (Text, Strich, Kontur) gedacht, wo
     │  Luminanz und nicht Farbflaeche die Unterscheidung traegt.
     └────────────────────────────────────────────────────────────────────────
     ┌ ROLLE 2 · TEXT / STRICH / KONTUR ───────────────────────────────────────
     │  = hue-treue Abdunklung derselben Okabe-Ito-Toene (Farbton bleibt,
     │  nur die Helligkeit sinkt) → erfuellt AA 4,5:1 als Fliesstextfarbe.
     │  Gemessen auf allen im Produkt real vorkommenden Gruenden
     │  (#ffffff · #f5f8fc · #eef3f9 · #eaf5f5 · #e7f6f1 · #fdeeee · #fff4e6):
     │    #00785A → 5,48 … 4,86   (schlechtester: Danger-Badge #fdeeee)
     │    #8A5A00 → 5,93 … 5,26
     │    #AA4B00 → 5,65 … 5,02
     │  Alle ≥ 4,5 → AA erfuellt. Vorher (#15a34a/#f59e0b/#ef4444) lagen die
     │  Werte bei 3,30 / 2,15 / 3,76 auf Weiss — das Gelb riss sogar die
     │  3:1-Schwelle fuer bedeutungstragende Elemente.
     │  #A81E3C aus R-106 wird hier bewusst NICHT verwendet: Farbtonsprung auf
     │  347° gegen die Okabe-Ito-Familie (26,5°) — Farbton-Untreue ohne Gewinn.
     │  Wo #A81E3C im Produkt bereits gesetzt ist, bleibt es unangetastet.
     └────────────────────────────────────────────────────────────────────────
     ┌ ROLLE 3 · ZWEITKODIERUNG OHNE FARBE (PFLICHT, keine Kosmetik) ──────────
     │  Auf Textstufe kollabiert das Paar gelb↔rot in der Rotgruen-Simulation
     │  auf ΔE 1,9 (s. o.) — Farbe allein traegt die Bedeutung dort NICHT.
     │  Deshalb zusaetzlich: mittel = 2px gepunktet, unsicher = 2px durch-
     │  gezogen + Alternativen-Chip, hoch = kein Strich; und in JEDER Legende
     │  das ausgeschriebene Wort („hoch"/„mittel"/„unsicher").
     └──────────────────────────────────────────────────────────────────────── */

  /* ROLLE 1 — FUELLUNG: Okabe-Ito-Original, absichtlich NICHT abgedunkelt. */
  --wt-conf-fill-hoch:     #009E73;
  --wt-conf-fill-mittel:   #E69F00;
  --wt-conf-fill-unsicher: #D55E00;
  --wt-conf-fill-niedrig:  var(--wt-conf-fill-unsicher);  /* Namens-Alias */

  /* ROLLE 2 — TEXT/STRICH/KONTUR: hue-treue Abdunklung, AA 4,5:1.
     Diese drei Tokens behalten ihre bisherigen NAMEN, weil in der App
     ausschliesslich Textfarbe daraus gesetzt wird (grep: 28 Fundstellen,
     alle `color:`) — der Rollenwechsel schlaegt also nirgends falsch durch. */
  --wt-conf-hoch:     #00785A;
  --wt-conf-mittel:   #8A5A00;
  --wt-conf-niedrig:  #AA4B00;
  --wt-conf-unsicher: var(--wt-conf-niedrig);             /* sprechender Alias */

  /* Kontur, die den 1.4.11-Kontrast der Fuellung traegt.
     GEMESSENE RENDERING-REALITAET (Chromium/Playwright, getComputedStyle):
     1.5px wird als used value auf 1px abgerundet — bei device_scale_factor 1
     UND 2. WCAG 1.4.11 stellt keine Mindeststrichstaerke, sondern nur die
     3:1-Kontrastanforderung; die traegt die Kontur bei 1px genauso (Konturfarbe
     = Textrolle, gemessen 4,86 … 5,93). Der Token bleibt 1.5px als Sollwert;
     wer hier auf 1px „korrigiert", verliert auf HiDPI-Geraeten mit anderer
     Rundung Strichstaerke. */
  --wt-conf-ring: 1.5px;

  /* ROLLE 3 — Zweitkodierung ohne Farbe. */
  --wt-conf-deco-hoch:      none;
  --wt-conf-deco-mittel:    dotted;
  --wt-conf-deco-niedrig:   solid;
  --wt-conf-deco-thickness: 2px;

  /* ── SPRECHER-IDENTITÄT (Avatar/Name/Bubble-Kante — NIE die Wortfarbe) ────
     aus speaker_idx, 5 Okabe-Ito + unknown. */
  --wt-spk-0:       #0072B2;
  --wt-spk-1:       #E69F00;
  --wt-spk-2:       #CC79A7;
  --wt-spk-3:       #56B4E9;
  --wt-spk-4:       #6D28D9;
  --wt-spk-unknown: #777;

  /* ── WELLENFORM (Server-Hüllkurve) ──────────────────────────────────────── */
  --wt-wave-heard:   #1e293b;
  --wt-wave-cursor:  #2563eb;
  --wt-wave-unheard: #cbd5e1;

  /* ── AKTIVES WORT (Unterstrich-/Cursor-Akzent) ──────────────────────────── */
  --wt-active:       #2563eb;
  --wt-active-underline: 3px;   /* Stärke des Aktiv-Wort-Unterstrichs */
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK-MODE — zwei Wege, identische Werte:
   1) prefers-color-scheme: dark  (System-Präferenz, automatisch)
   2) [data-theme="dark"]         (expliziter Schalter, gewinnt immer)
   Fliesstext, Wellenform UND die Ampel-TEXTROLLE flippen. Die FUELLUNGSROLLE
   (Okabe-Ito-Original) bleibt in beiden Themes identisch — gemessen 5,43 / 8,25
   / 4,81 auf #0c1320 und im schlechtesten Fall 4,25 / 6,45 / 3,76 auf #1d2a3a,
   also durchgehend ≥ 3:1 (WCAG 1.4.11). Ein Dark-Sonderwert waere hier reine
   Zusatzkomplexitaet ohne Nutzen.
   Die Textrolle dagegen faellt auf Dunkelgrund durch (die abgedunkelten Toene
   #00785A/#8A5A00/#AA4B00 liegen zu nah am Hintergrund) und bekommt hue-treue
   AUFhellungen. Gemessen auf #0c1320 | #101a2b | #16202e | #1d2a3a:
     hoch     #5FE0B4 → 11,34 | 10,63 | 10,00 | 8,87
     mittel   #E69F00 →  8,25 |  7,74 |  7,28 | 6,45  (Okabe-Ito-Orange direkt)
     unsicher #FF8A3D →  7,93 |  7,43 |  6,99 | 6,20  (hue-treu, 26,5° erhalten)
   Alle ≥ 4,5. Das Paar gelb↔unsicher bleibt auch hier in der Rotgruen-
   Simulation bei ΔE 3,8 — die Zweitkodierung (dotted/solid) ist daher im Dark
   genauso Pflicht wie im Light.
   NEBENEFFEKT, bewusst so gelassen: im Dark faellt --wt-conf-mittel (#E69F00)
   mit --wt-conf-fill-mittel (#E69F00) zusammen, die Kontur des mittel-Punkts
   ist dort also unsichtbar. Unkritisch, weil die Fuellung im Dark selbst
   6,45 … 8,25 misst und die 3:1-Schwelle allein traegt — die Kontur wird dort
   schlicht nicht mehr gebraucht. Im Light ist sie zwingend (#E69F00 = 2,00).
   ════════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wt-text:         var(--wt-text-dark);
    --wt-wave-heard:   #e2e8f0;   /* hell = gehört (gegen dunklen Grund) */
    --wt-wave-unheard: #475569;   /* gedämpft = ungehört */
    /* --wt-wave-cursor / --wt-active bleiben #2563eb (trägt auf beiden Gründen) */
    --wt-conf-hoch:    #5FE0B4;
    --wt-conf-mittel:  #E69F00;
    --wt-conf-niedrig: #FF8A3D;
  }
}

/* Expliziter Schalter — überschreibt System-Präferenz in beide Richtungen. */
[data-theme="dark"] {
  --wt-text:         var(--wt-text-dark);
  --wt-wave-heard:   #e2e8f0;
  --wt-wave-unheard: #475569;
  --wt-conf-hoch:    #5FE0B4;
  --wt-conf-mittel:  #E69F00;
  --wt-conf-niedrig: #FF8A3D;
}
[data-theme="light"] {
  --wt-text:         var(--wt-text-light);
  --wt-wave-heard:   #1e293b;
  --wt-wave-unheard: #cbd5e1;
  --wt-conf-hoch:    #00785A;
  --wt-conf-mittel:  #8A5A00;
  --wt-conf-niedrig: #AA4B00;
}

/* ────────────────────────────────────────────────────────────────────────────
   VERDANA-DURCHSETZUNG für die ausliefernden Flächen.
   Niedrige Spezifität (Element-Selektoren) — bestehende lokale Regeln auf
   Klassen/IDs gewinnen weiterhin; nur die per Webfont benannten Fliesstexte
   (Inter / Space Grotesk / Segoe UI etc., die ohnehin auf System-Fonts
   zurückfallen) werden auf das kanonische Verdana gehoben.
   ──────────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--wt-font);
}

/* Formular- und Button-Elemente erben Font in vielen Browsern nicht automatisch */
button,
input,
select,
textarea {
  font-family: var(--wt-font);
}

/* ════════════════════════════════════════════════════════════════════════════
   AMPEL — ANWENDBARE REGELN (R-111). Bewusst niedrige Spezifitaet (eine Klasse
   bzw. ein Attribut), damit lokale Komponenten-Regeln weiterhin gewinnen.
   Diese Regeln setzen NUR Ampel-Semantik; sie fassen kein Layout an.
   ──────────────────────────────────────────────────────────────────────────
   ROLLE 2 · WORT-/TEXTFARBE + Zweitkodierung ohne Farbe.
   „hoch" bekommt bewusst KEINEN Strich: der Normalfall soll ruhig lesbar
   bleiben, sonst ist die Auszeichnung wertlos.
   ════════════════════════════════════════════════════════════════════════════ */
.wt-w-hoch,
[data-conf="hoch"] {
  color: var(--wt-conf-hoch);
  text-decoration-line: var(--wt-conf-deco-hoch);   /* none */
}

.wt-w-mittel,
[data-conf="mittel"] {
  color: var(--wt-conf-mittel);
  text-decoration-line: underline;
  text-decoration-style: var(--wt-conf-deco-mittel, dotted);
  text-decoration-thickness: var(--wt-conf-deco-thickness, 2px);
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
}

.wt-w-unsicher,
.wt-w-niedrig,
[data-conf="unsicher"],
[data-conf="niedrig"] {
  color: var(--wt-conf-niedrig);
  text-decoration-line: underline;
  text-decoration-style: var(--wt-conf-deco-niedrig, solid);
  text-decoration-thickness: var(--wt-conf-deco-thickness, 2px);
  text-underline-offset: 2px;
  text-decoration-skip-ink: auto;
}

/* Alternativen-Chip: macht bei „unsicher" sichtbar, WAS die Engines sonst
   gehoert haben. Zweitkodierung mit Inhalt statt nur mit Form. */
.wt-conf-alt {
  display: inline-block;
  margin-inline-start: .25em;
  padding: 0 .38em;
  border: 1px solid var(--wt-conf-niedrig);
  border-radius: 999px;
  font-size: .82em;
  line-height: 1.5;
  color: var(--wt-conf-niedrig);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────────────
   ROLLE 1 · FUELLUNG (Punkt / Marker / Chip-Flaeche).
   Die Fuellung ist der Okabe-Ito-Originalton; den nach WCAG 1.4.11 noetigen
   3:1-Kontrast traegt die Kontur in der Textrolle. Deshalb ist border hier
   NICHT dekorativ und darf nicht entfernt werden.
   ────────────────────────────────────────────────────────────────────────── */
.wt-conf-dot {
  display: inline-block;
  inline-size: .72em;
  block-size: .72em;
  border-radius: 50%;
  vertical-align: -.06em;
  background: var(--wt-conf-fill-hoch);
  border: var(--wt-conf-ring, 1.5px) solid var(--wt-conf-hoch);
  box-sizing: border-box;
}
.wt-conf-dot[data-conf="mittel"] {
  background: var(--wt-conf-fill-mittel);
  border-color: var(--wt-conf-mittel);
  /* Zweitkodierung ohne Farbe: eckig statt rund. */
  border-radius: 2px;
}
.wt-conf-dot[data-conf="unsicher"],
.wt-conf-dot[data-conf="niedrig"] {
  background: var(--wt-conf-fill-unsicher);
  border-color: var(--wt-conf-niedrig);
  /* Zweitkodierung ohne Farbe: Raute. */
  border-radius: 2px;
  transform: rotate(45deg);
}

/* Farbfeld/Balken mit derselben Rollentrennung (z. B. Legende, Statistik). */
.wt-conf-swatch {
  display: inline-block;
  min-inline-size: 1.6em;
  block-size: .78em;
  border-radius: 3px;
  background: var(--wt-conf-fill-hoch);
  border: var(--wt-conf-ring, 1.5px) solid var(--wt-conf-hoch);
  box-sizing: border-box;
}
.wt-conf-swatch[data-conf="mittel"] {
  background: var(--wt-conf-fill-mittel);
  border-color: var(--wt-conf-mittel);
  border-style: dashed;
}
.wt-conf-swatch[data-conf="unsicher"],
.wt-conf-swatch[data-conf="niedrig"] {
  background: var(--wt-conf-fill-unsicher);
  border-color: var(--wt-conf-niedrig);
  border-style: double;
  border-width: 3px;
}

/* Legenden-Wort: die Ampelstufe MUSS ausgeschrieben danebenstehen, weil das
   Paar gelb↔unsicher fuer Rotgruen-Sehende auf ΔE < 4 kollabiert. */
.wt-conf-legend {
  display: inline-flex;
  align-items: center;
  gap: .4em;
}

/* A11y-Neutral-Modus: Farbe aus, Struktur bleibt — die Zweitkodierung ist
   dann die EINZIGE Traegerin der Bedeutung und muss deshalb erhalten bleiben. */
[data-conf-mode="neutral"] .wt-w-hoch,
[data-conf-mode="neutral"] .wt-w-mittel,
[data-conf-mode="neutral"] .wt-w-unsicher,
[data-conf-mode="neutral"] .wt-w-niedrig,
[data-conf-mode="neutral"] [data-conf] {
  color: inherit;
}
[data-conf-mode="neutral"] .wt-conf-dot,
[data-conf-mode="neutral"] .wt-conf-swatch {
  background: transparent;
  border-color: currentColor;
}

/* Kein Bewegungs-Nebeneffekt: die Raute ist eine statische Transformation. */
@media (prefers-reduced-motion: reduce) {
  .wt-conf-dot { transition: none; }
}