/* Diagramme (1.4, Spec 2.3): Farben nur ueber Tokens, Formen aus public/js/diagramme.js. */
.diagramm { display: block; max-width: 100%; overflow: visible; }
.diagramm.linie { width: 100%; height: 80px; }
.diagramm .strich { fill: none; stroke: var(--akzent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.diagramm .flaeche { fill: var(--akzent-hell); }
.diagramm .punkt { fill: none; stroke: var(--akzent); stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.diagramm .ring-spur, .diagramm .donut-spur { stroke: var(--flaeche-2); }
.diagramm .ring-wert { stroke: var(--akzent); }
.diagramm.balken { width: 100%; height: 8px; }
.diagramm .balken-spur { fill: var(--flaeche-2); }
.diagramm .balken-wert { fill: var(--akzent); }
.seg-1 { stroke: var(--diagramm-1); } .seg-2 { stroke: var(--diagramm-2); } .seg-3 { stroke: var(--diagramm-3); }
.seg-4 { stroke: var(--diagramm-4); } .seg-5 { stroke: var(--diagramm-5); } .seg-6 { stroke: var(--diagramm-6); }
/* Legendenpunkte in derselben Reihenfolge wie die Segmente */
.legende-1, .legende-2, .legende-3, .legende-4, .legende-5, .legende-6 { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; }
.legende-1 { background: var(--diagramm-1); } .legende-2 { background: var(--diagramm-2); } .legende-3 { background: var(--diagramm-3); }
.legende-4 { background: var(--diagramm-4); } .legende-5 { background: var(--diagramm-5); } .legende-6 { background: var(--diagramm-6); }