Legendenmarker zeichnet, was das Diagramm zeichnet

Der Eintrag "Vorjahr" war ein 10 px grosses Kaestchen mit gestricheltem Rand.
Auf zehn Pixel bleiben von einem gestrichelten Rechteck ein paar Eckstriche
uebrig; das sah aus wie ein Zeichenfehler.

Es stimmte auch inhaltlich nicht: Im Diagramm ist die Vergleichsreihe keine
Flaeche, sondern eine Linie. Ein Marker, der etwas anderes zeigt als die
Reihe, die er benennt, ist genau die Art Kleinigkeit, die eine Legende
nutzlos macht.

Jetzt ein gestricheltes Linienstueck als SVG, mit derselben Staerke und
demselben Muster wie die Reihe im Chart (1,5 px, 4/4). Gefuellte Reihen
behalten ihren Punkt. Die Werte stehen als Konstante neben dem Marker mit dem
Hinweis, dass sie zu AreaVerlauf.tsx passen muessen.

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

features/dashboard/components/charts/ChartLegende.tsx

@@ -6,7 +6,20 @@ import React from "react";
  * Legende als eigene Komponente statt Recharts-Legend:
  * Recharts platziert die Legende im SVG und kostet damit Chartfläche.
  * Carbon setzt sie über den Chart, linksbündig, 12 px, 12 px Marker.
+ *
+ * **Der Marker zeigt, was das Diagramm zeichnet.** Eine gefüllte Reihe bekommt
+ * einen Punkt, eine gestrichelte Vergleichsreihe ein gestricheltes
+ * Linienstück mit demselben Strichmuster wie im Chart.
+ *
+ * Vorher war auch die gestrichelte Reihe ein 10 px großes Kästchen, nur mit
+ * gestricheltem Rand. Auf zehn Pixel bleiben von einem gestrichelten Rechteck
+ * ein paar Eckstriche übrig; das sah aus wie ein Zeichenfehler und nicht wie
+ * eine Linie. Und es stimmte auch nicht: Im Diagramm ist „Vorjahr" kein
+ * Kästchen, sondern eine Linie.
  */
+
+/** Muss zur Vergleichsreihe in AreaVerlauf.tsx passen: 1,5 px, Muster 4/4. */
+const STRICH = { breite: 18, staerke: 1.5, muster: "4 4" } as const;
 export function ChartLegende({
   eintraege,
   /** Ausgeblendete Reihen erscheinen ausgegraut: Klick schaltet um. */
@@ -23,14 +36,31 @@ export function ChartLegende({
         const aus = inaktiv.includes(eintrag.name);
         const Inhalt = (
           <>
-            <span
-              className="h-2.5 w-2.5 flex-none rounded-sm"
-              style={{
-                background: eintrag.gestrichelt ? "transparent" : eintrag.farbe,
-                border: eintrag.gestrichelt ? `2px dashed ${eintrag.farbe}` : undefined,
-                opacity: aus ? 0.35 : 1,
-              }}
-            />
+            {eintrag.gestrichelt ? (
+              <svg
+                width={STRICH.breite}
+                height={STRICH.staerke * 2}
+                viewBox={`0 0 ${STRICH.breite} ${STRICH.staerke * 2}`}
+                className="flex-none overflow-visible"
+                style={{ opacity: aus ? 0.35 : 1 }}
+                aria-hidden
+              >
+                <line
+                  x1="0"
+                  y1={STRICH.staerke}
+                  x2={STRICH.breite}
+                  y2={STRICH.staerke}
+                  stroke={eintrag.farbe}
+                  strokeWidth={STRICH.staerke}
+                  strokeDasharray={STRICH.muster}
+                />
+              </svg>
+            ) : (
+              <span
+                className="h-2.5 w-2.5 flex-none rounded-sm"
+                style={{ background: eintrag.farbe, opacity: aus ? 0.35 : 1 }}
+              />
+            )}
             <span
               className="text-[12px]"
               style={{ color: aus ? "#a8a8a8" : "#525252" }}