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

features/dashboard/components/charts/ChartTooltip.tsx

@@ -1,14 +1,19 @@
 "use client";
 
 import React from "react";
-import { CHART } from "../../utils/chartTheme";
+import { CHART, TOOLTIP_SCHATTEN } from "../../utils/chartTheme";
 
 /**
  * Einheitlicher Tooltip für alle Charts.
  *
- * Carbon-Vorgabe: dunkle Fläche (#393939), heller Text, 12 px Label,
- * kein Rahmen, kein Doppelpunkt zwischen Name und Wert.
- * Ein gemeinsamer Tooltip verhindert, dass jedes Chart eigene Regeln erfindet.
+ * Carbon-Vorgabe (@carbon/charts, .cds--cc--tooltip): helle Fläche
+ * (--cds-layer-02), Text in --cds-text-primary, 12 px, abgesetzt allein durch
+ * den Schatten — kein Rahmen, kein Doppelpunkt zwischen Name und Wert,
+ * maximal 270 px breit.
+ *
+ * Bis Carbon v10 war der Tooltip dunkel (#393939). Viele Quellen im Netz
+ * zeigen noch diesen Stand; maßgeblich ist das ausgelieferte Stylesheet.
+ * Geprüft von scripts/verify-carbon.mjs.
  *
  * Die Props sind bewusst weit typisiert: Recharts reicht sein internes
  * Payload-Format durch, das je nach Chart-Typ leicht abweicht.
@@ -49,25 +54,29 @@ export function ChartTooltip({
 
   return (
     <div
-      className="pointer-events-none rounded-md px-3 py-2 shadow-lg"
-      style={{ background: CHART.tooltipBg, color: CHART.tooltipFg }}
+      className="pointer-events-none max-w-[270px] rounded-md px-3 py-2"
+      style={{
+        background: CHART.tooltipBg,
+        color: CHART.tooltipFg,
+        boxShadow: TOOLTIP_SCHATTEN,
+      }}
     >
       {labelText ? (
-        <div className="mb-1 text-[12px] opacity-80">
+        <div className="mb-1 text-[12px]" style={{ color: CHART.textSekundaer }}>
           {labelPrefix ? `${labelPrefix} ` : ""}
           {labelText}
         </div>
       ) : null}
       <div className="flex flex-col gap-0.5">
         {reihen.map((reihe) => (
-          <div key={reihe.name} className="flex items-center gap-2 text-[13px]">
+          <div key={reihe.name} className="flex items-center gap-2 text-[12px]">
             {reihe.color ? (
               <span
                 className="h-2.5 w-2.5 flex-none rounded-sm"
                 style={{ background: reihe.color }}
               />
             ) : null}
-            <span className="opacity-80">{reihe.name}</span>
+            <span style={{ color: CHART.textSekundaer }}>{reihe.name}</span>
             <span className="ml-auto font-semibold tabular-nums">{formatWert(reihe.value)}</span>
           </div>
         ))}

features/dashboard/utils/chartTheme.ts

@@ -7,7 +7,7 @@
  *   Achse       #8d8d8d  (--cds-border-strong-01)
  *   Text primär #161616  (--cds-text-primary)
  *   Text sek.   #525252  (--cds-text-secondary)
- *   Tooltip     #393939  (--cds-background-inverse) auf #ffffff Text
+ *   Tooltip     #ffffff  (--cds-layer-02) auf #161616 Text, Schatten statt Rahmen
  *
  * Warum kein bunter "Marketing"-Farbsatz: Die Carbon-Palette ist auf
  * Unterscheidbarkeit und Kontrast optimiert und in dieser Reihenfolge
@@ -148,10 +148,16 @@ export const CHART = {
   achse: "#8d8d8d",
   text: "#161616",
   textSekundaer: "#525252",
-  tooltipBg: "#393939",
-  tooltipFg: "#ffffff",
+  // Seit Carbon v11 ist der Tooltip hell: --cds-layer-02 auf --cds-text-primary,
+  // getrennt vom Untergrund allein durch den Schatten. Bis v10 war er dunkel
+  // (#393939) — diese Angabe steht in vielen älteren Quellen noch so.
+  tooltipBg: "#ffffff",
+  tooltipFg: "#161616",
 } as const;
 
+/** Tooltip-Schatten laut @carbon/charts (.cds--cc--tooltip). */
+export const TOOLTIP_SCHATTEN = "0 1px 6px 0 rgba(0,0,0,.2)";
+
 /**
  * Chart-Innenabstände.
  * Carbon rechnet Achsenbeschriftungen in den Chart-Rahmen ein; die Karte selbst