feat(carbon): Carbon-Konformität nachprüfbar machen statt behaupten

Recherche an der Quelle statt an der Dokumentation. Zwei Ergebnisse:

1. Carbon regelt Datenvisualisierung nur teilweise. Farben, Gitter, Achsen,
   Tooltip und Tickanzahl sind verbindlich festgelegt — Paddings, Margins und
   Dashboard-Raster dagegen NICHT. Die Carbon-Seiten zu Chart-Anatomie und
   Dashboards tragen ausdrücklich den Hinweis "this guidance is a work in
   progress" und enthalten keine Zahlenwerte. Unsere Abstandswerte stammen
   deshalb aus der Carbon-Spacing-Skala und der Planung mit dem Branchenpartner,
   nicht aus der Data-Viz-Norm. Das steht jetzt so in DESIGN-SYSTEM.md §0.

2. Eine echte Abweichung gefunden: Der Tooltip ist seit Carbon v11 hell
   (--cds-layer-02 #ffffff auf --cds-text-primary #161616, abgesetzt allein
   durch den Schatten). Unser Theme führte den dunklen v10-Stand (#393939) und
   berief sich dabei auf das ausgelieferte Stylesheet — die Angabe war veraltet.
   Korrigiert.

Neu:
- docs/carbon-referenz.json — kanonische Werte mit Quelle, Version und
  Prüfdatum, gezogen aus @carbon/charts 1.23.0 styles.min.css und
  configuration.ts. Bewusste Abweichungen (Balkenbreite 48 statt 16, feste
  Kategoriefarben statt n-Serien-Paletten) sind dort begründet.
- scripts/verify-carbon.mjs + npm run verify:carbon — gleicht chartTheme.ts
  gegen die Referenz ab und bricht bei Drift ab.
- docs/PRUEFFRAGEN.md — Prüffragen für die Gestaltungsabnahme mit
  nachprüfbarem Ja/Nein, plus Leseliste (FT Visual Vocabulary, IBCS,
  Cleveland & McGill, Few, Datawrapper Academy).

Die 14er-Palette wurde gegen die CSS-Variablen --cds-charts-14-1-* geprüft und
stimmt exakt; ebenso Gitter #e0e0e0, Achse #8d8d8d und Achsentext #525252.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX

docs/DESIGN-SYSTEM.md

@@ -4,10 +4,48 @@ Grundlage ist **IBM Carbon Data Visualization**, ergänzt um die Spacing- und
 Zahlenregeln aus der eigenen Planung (`UI_UX_GUIDELINES.md`, Januar 2026).
 
 Die konkreten Farb- und Linienwerte sind aus dem ausgelieferten Stylesheet von
-`@carbon/charts` (`dist/styles.css`, Light Theme) übernommen — nicht aus der
-Dokumentation abgeschrieben. Alles Folgende ist in
+`@carbon/charts` (Light Theme) übernommen — nicht aus der Dokumentation
+abgeschrieben. Alles Folgende ist in
 `features/dashboard/utils/chartTheme.ts` als Code hinterlegt.
 
+## 0. Was Carbon regelt — und was nicht
+
+Wichtig für jeden, der hier etwas anzweifelt: **Carbon regelt Datenvisualisierung
+nur teilweise.** Die Grenze verläuft so:
+
+| Frage | Regelt Carbon? | Wo steht die Antwort |
+|---|---|---|
+| Farbpalette, Reihenfolge, Statusfarben | **ja, verbindlich** | ausgeliefertes Stylesheet, CSS-Variablen `--cds-charts-14-1-*` |
+| Gitter-, Achsen- und Textfarben | **ja** | dieselben Quellen |
+| Tooltip-Aufbau | **ja** | `.cds--cc--tooltip` im Stylesheet |
+| Tickanzahl je Achse | **ja** | `configuration.ts` (y: 5, x: 15) |
+| Wann welcher Diagrammtyp | teilweise, qualitativ | Carbon „Simple/Complex charts" |
+| **Padding, Margins, Kartenabstände** | **nein** | siehe unten |
+| Dashboard-Raster, Kartenhöhen | **nein**, nur Prinzipien | siehe unten |
+
+Die Carbon-Seiten zu Chart-Anatomie und Dashboards tragen ausdrücklich den
+Hinweis „this guidance is a work in progress" und enthalten **keine Zahlenwerte**
+für Abstände. Wer dort nach Paddings sucht, findet Prinzipien („create a clear
+visual hierarchy", „limit the number of metrics") — richtig, aber nicht
+nachprüfbar.
+
+**Die Abstandswerte in diesem Dokument stammen deshalb nicht von Carbon**,
+sondern aus zwei anderen Quellen:
+
+1. der **Carbon-Spacing-Skala und dem 2x-Grid** des allgemeinen Design-Systems
+   (4/8/12/16/24/32/48…) — dieselbe Skala, aus der auch Davids
+   `INTERIM-UI-DESIGN-STANDARDS.md` im Zielsystem schöpft;
+2. der eigenen Planung mit dem Branchenpartner (`UI_UX_GUIDELINES.md`).
+
+Beides ist konsistent zueinander. Es ist aber ehrlicher zu sagen: Bei Farben und
+Achsen folgen wir einer Norm, bei Abständen einer begründeten Hauskonvention.
+
+**Nachprüfbar gemacht:** `npm run verify:carbon` gleicht `chartTheme.ts` gegen
+`docs/carbon-referenz.json` ab — Palette, neutrale Werte, Tooltip, Achsenraster.
+Die Referenzdatei nennt Quelle, Version und Prüfdatum. Bewusste Abweichungen
+(Balkenbreite, feste Kategoriefarben) sind dort begründet hinterlegt und werden
+als Hinweis ausgegeben, nicht als Fehler.
+
 ---
 
 ## 1. Farben
@@ -116,13 +154,19 @@ wechselt mitten im Lesen die Einheit; die Nulllinie trägt gar keine Einheit.
 
 ## 3. Tooltip
 
-Einheitlich für alle Charts (`components/charts/ChartTooltip.tsx`):
+Einheitlich für alle Charts (`components/charts/ChartTooltip.tsx`), Werte aus
+`.cds--cc--tooltip` im ausgelieferten Stylesheet:
 
-- Fläche `#393939`, Text `#ffffff`
-- Label 12 px mit 80 % Deckkraft, Wert 13 px fett in Tabellenziffern
-- kein Rahmen, kein Doppelpunkt zwischen Name und Wert
+- Fläche `#ffffff` (`--cds-layer-02`), Text `#161616` (`--cds-text-primary`)
+- abgesetzt allein durch den Schatten `0 1px 6px 0 rgba(0,0,0,.2)` — **kein Rahmen**
+- Label und Reihenname 12 px in `#525252`, Wert fett in Tabellenziffern
+- kein Doppelpunkt zwischen Name und Wert, maximal 270 px breit
 - Farbmarker je Reihe, 10 × 10 px
 
+**Achtung bei älteren Quellen:** Bis Carbon v10 war der Tooltip dunkel
+(`#393939` auf weißem Text). Sehr viele Artikel und Screenshots zeigen noch
+diesen Stand. Maßgeblich ist das ausgelieferte Stylesheet, nicht die Bildersuche.
+
 Ein gemeinsamer Tooltip verhindert, dass jedes Chart eigene Regeln entwickelt.
 
 ---

docs/PRUEFFRAGEN.md

@@ -0,0 +1,108 @@
+# Prüffragen für die Gestaltungsabnahme
+
+Für Reviews ohne Designerauge. Die Fragen sind so gestellt, dass man sie am
+Bildschirm beantworten kann — jede hat ein nachprüfbares Ja oder Nein, keine
+Geschmacksfrage.
+
+Reihenfolge nach Wirkung: Wer nur zehn Minuten hat, nimmt Abschnitt 1.
+
+---
+
+## 1. Die vier Fragen, die die meisten Fehler finden
+
+**1. Nenne die Aussage der Seite in einem Satz.**
+Geht das nicht, fehlt die Hierarchie. Auf jeder Seite muss genau ein Block
+dominieren. Sehen alle Karten gleich aus, ist keiner wichtig.
+
+**2. Gibt es ein Diagramm, dessen Balken oder Segmente alle etwa gleich groß sind?**
+Dann trägt es keine Information. Typische Ursachen: Werte in einem engen Band
+(74–96 %) auf einer Skala ab null, oder eine Rangfolge aus 5/4/3/3/3.
+Entweder die Kodierung wechseln oder die Karte streichen.
+
+**3. Steht dieselbe Zahl zweimal auf der Seite?**
+Kennzahl oben und Fußzeile unter dem Diagramm sind der übliche Fall. Eine
+Wiederholung ist kein Beleg, sondern verbrauchter Platz.
+
+**4. Was soll der Betrachter danach tun?**
+Findet sich darauf keine Antwort, ist es ein Bericht, kein Dashboard. Eine
+Handlungsliste braucht je Zeile einen Betrag und ein Verb.
+
+---
+
+## 2. Diagramme
+
+| Frage | Wenn nein |
+|---|---|
+| Beginnt jede Balkenachse bei null? | Balken kodieren über Länge — abgeschnitten lügen sie. Bei engen Wertebändern Punktdiagramm statt Balken |
+| Hat jede Achse runde Werte (0/50/100, nicht 0/55/110)? | Der Leser rechnet bei jedem Blick mit |
+| Trägt eine Achse genau eine Einheit? | „0 €" neben „10 T€" ist ein Einheitenwechsel mitten in der Skala |
+| Belegt in einem Ring kein Segment mehr als etwa 80 %? | Dann ist die Bezugsgröße falsch gewählt, nicht der Diagrammtyp |
+| Hat der Ring höchstens fünf Segmente? | Alles darüber gehört zu „Sonstige" zusammengefasst |
+| Zeigt jede Legende eine Reihe, die es im Bild wirklich gibt? | Tote Legendeneinträge sind ein häufiger und peinlicher Fehler |
+| Sind Kategorie- und Ampelfarben getrennt? | Eine grüne Kategorie neben einem grünen Positiv-Status ist nicht mehr lesbar |
+| Behält eine Kategorie ihre Farbe über alle Seiten? | Sonst muss jede Legende neu gelesen werden |
+| Ist bei jeder Karte erkennbar, ob sie den Zeitfilter beachtet? | Stichtagswerte neben gefilterten Werten ohne Kennzeichnung erzeugen falsche Schlüsse |
+
+---
+
+## 3. Zahlen und Text
+
+- Tausendertrennung überall gleich? (`1.900`, nie `1900`)
+- Dieselbe Zahl im selben Format? (`177 T€` und `177.010 €` auf einer Seite ist ein Bruch)
+- Singular und Plural korrekt? („1 Tag", nicht „1 Tage")
+- Spaltenköpfe einheitlich geschrieben?
+- Bricht irgendwo Text ab, der nicht abbrechen dürfte? (Beträge, Kartenuntertitel)
+
+---
+
+## 4. Raster und Zustände
+
+- Erzeugt eine Karte tote Fläche, weil die Nachbarkarte höher ist?
+  Gleiche Höhe ist nur bei gleicher Struktur richtig (Kennzahlenreihe), nicht bei
+  Diagramm neben Tabelle.
+- Was passiert, wenn die Filter alles wegschneiden? Jede Ansicht braucht einen
+  Leerzustand.
+- Ist der Tastaturfokus sichtbar? Mit Tab durch die Seite gehen.
+- Schließt jedes Menü mit Escape?
+- Verspricht ein Hover-Effekt eine Interaktion, die es nicht gibt?
+
+---
+
+## 5. Womit man das Auge trainiert
+
+Kurz und ergiebig, in dieser Reihenfolge:
+
+1. **FT Visual Vocabulary** — ein Poster, das Diagrammtypen nach Aussageabsicht
+   ordnet (Vergleich, Verteilung, Anteil, Veränderung …).
+   Das beste Verhältnis von Aufwand zu Ertrag überhaupt.
+   `github.com/Financial-Times/chart-doctor` → `visual-vocabulary`
+2. **IBCS — International Business Communication Standards**, die SUCCESS-Regeln.
+   Das ist der ausgearbeitete Standard für *Geschäfts*grafik, den Carbon nicht
+   ersetzt: einheitliche Notation, Ist/Plan/Vorjahr, Informationsdichte.
+   Frei unter CC BY-SA auf `ibcs.com`.
+3. **Cleveland & McGill (1984)**, „Graphical Perception". Die Studie, aus der die
+   Rangfolge der Kodierungen stammt: Position wird genauer gelesen als Länge,
+   Länge genauer als Winkel, Winkel genauer als Fläche. Erklärt in einer Seite,
+   warum Ringe schwach und Punktdiagramme stark sind.
+4. **Stephen Few, „Information Dashboard Design"**. Das Standardwerk zur
+   Dashboard-Kritik; die ersten beiden Kapitel reichen für ein geschultes Auge.
+5. **Datawrapper Academy** (`academy.datawrapper.de`) — kurze, gut belegte
+   Artikel zu einzelnen Fragen („Wann Balken, wann Linien", „Warum keine zwei
+   Y-Achsen").
+
+Zum Zielsystem passend:
+
+6. **Carbon Data Visualization** (`carbondesignsystem.com/data-visualization/`)
+   für Farben, Achsen und Diagrammtypen — mit der Einschränkung aus
+   [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md) Abschnitt 0: Abstände regelt Carbon nicht.
+7. **Carbon Spacing und 2x-Grid** (`carbondesignsystem.com/elements/spacing/`)
+   für genau diese Abstände.
+
+---
+
+## 6. Was hier bewusst nicht geprüft wird
+
+Layout und Anordnung sind im Zielsystem **Entscheidung des Designers**
+(siehe [LEITPLANKEN.md](LEITPLANKEN.md)). Verbindlich zu übergeben sind
+Kennzahl-Definitionen, Diagrammregeln und Verhalten. Wer diese Liste im Review
+benutzt, prüft die Substanz — nicht, ob eine Karte 40 px weiter links sitzt.

docs/carbon-referenz.json

@@ -0,0 +1,73 @@
+{
+  "$kommentar": [
+    "Kanonische IBM-Carbon-Werte, gegen die dieses Dashboard geprüft wird.",
+    "Quelle ist NICHT die Dokumentation, sondern das ausgelieferte Stylesheet und die",
+    "Default-Konfiguration von @carbon/charts — Doku und Code weichen voneinander ab.",
+    "Geprüft von scripts/verify-carbon.mjs (npm run verify:carbon).",
+    "Beim Aktualisieren: Werte neu aus der Quelle ziehen, nicht abtippen."
+  ],
+  "quelle": {
+    "stylesheet": "https://cdn.jsdelivr.net/npm/@carbon/charts@1.23.0/styles.min.css",
+    "konfiguration": "https://github.com/carbon-design-system/carbon-charts/blob/master/packages/core/src/configuration.ts",
+    "geprueftAm": "2026-08-29",
+    "version": "@carbon/charts 1.23.0"
+  },
+
+  "kategorialePalette": {
+    "herkunft": "CSS-Variablen --cds-charts-14-1-1 bis --cds-charts-14-1-14",
+    "regel": "Reihenfolge ist verbindlich, Farben immer von vorne vergeben",
+    "werte": [
+      "#6929c4",
+      "#1192e8",
+      "#005d5d",
+      "#9f1853",
+      "#fa4d56",
+      "#520408",
+      "#198038",
+      "#002d9c",
+      "#ee5396",
+      "#b28600",
+      "#009d9a",
+      "#012749",
+      "#8a3800",
+      "#a56eff"
+    ]
+  },
+
+  "neutraleWerte": {
+    "gitterlinie": { "wert": "#e0e0e0", "token": "--cds-layer-accent-01" },
+    "achsenlinie": { "wert": "#8d8d8d", "token": "--cds-border-strong-01" },
+    "achsenbeschriftung": { "wert": "#525252", "token": "--cds-text-secondary" },
+    "textPrimaer": { "wert": "#161616", "token": "--cds-text-primary" }
+  },
+
+  "tooltip": {
+    "herkunft": ".cds--cc--tooltip und .content-box im Stylesheet",
+    "hintergrund": { "wert": "#ffffff", "token": "--cds-layer-02" },
+    "text": { "wert": "#161616", "token": "--cds-text-primary" },
+    "schatten": "0 1px 6px 0 rgba(0,0,0,.2)",
+    "schriftgroessePx": 12,
+    "maxBreitePx": 270,
+    "hinweis": "Bis Carbon v10 war der Tooltip dunkel (#393939). Seit v11 ist er hell."
+  },
+
+  "achsen": {
+    "herkunft": "configuration.ts",
+    "ticksYAchse": 5,
+    "ticksXAchse": 15
+  },
+
+  "bewusstAbweichend": {
+    "$kommentar": "Werte, die wir kennen und absichtlich anders setzen. Der Prüfer meldet sie als Abweichung mit Begründung, nicht als Fehler.",
+    "balkenMaxBreitePx": {
+      "carbon": 16,
+      "hier": 48,
+      "grund": "Carbons 16 px sind auf dichte Mehrreihen-Charts ausgelegt. Unsere Balken zeigen vier bis sechs Kategorien in einer breiten Karte; 16 px wirken dort wie Striche. Die Regel 'Abstand ≥ halbe Balkenbreite' bleibt eingehalten."
+    },
+    "festeKategorieFarben": {
+      "carbon": "n-Serien-Paletten (--cds-charts-2-*, -3-*, -4-*, -5-*) je nach Anzahl der Reihen",
+      "hier": "feste Farbe je Gewerk und je Status über alle Charts hinweg",
+      "grund": "Carbons n-Serien-Paletten optimieren den Kontrast innerhalb EINES Charts. Über mehrere Charts hinweg würde Heizung dadurch die Farbe wechseln. Wiedererkennbarkeit schlägt hier Binnenkontrast."
+    }
+  }
+}