Web: Ring-Karten – Legende in eigenem Scroll-Bereich (Ring bleibt stehen)

align-self:stretch an der <ul> war zu unzuverlaessig (u.a. wegen flex-wrap). Jetzt
kanonisches Muster: Ring (feste Groesse, mittig) + eigener .chart-legend-scroll
(flex:1 1 0; min-height:0; overflow-y:auto) in einem align-items:stretch-Container
ohne Umbruch. Nur die Legende scrollt, der Ring bleibt stehen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

web/src/dashboard/charts/Donut.jsx

@@ -65,19 +65,22 @@ export default function Donut({ segmente = [], gesamtLabel = "gesamt", einheit =
         </text>
       </svg>
 
-      <ul className="chart-legend">
-        {boegen.map((b) => (
-          <li key={b.name}
-            onMouseEnter={() => setAktiv(b)}
-            onMouseLeave={() => setAktiv(null)}>
-            <span className="swatch" style={{ background: b.color }} />
-            <span className="legend-name">{b.name}</span>
-            <span className="legend-value">
-              {fmt(b.value)} · {Math.round(b.anteil * 100)} %
-            </span>
-          </li>
-        ))}
-      </ul>
+      {/* Eigener Scroll-Bereich: nur die Legende scrollt, der Ring bleibt stehen. */}
+      <div className="chart-legend-scroll">
+        <ul className="chart-legend">
+          {boegen.map((b) => (
+            <li key={b.name}
+              onMouseEnter={() => setAktiv(b)}
+              onMouseLeave={() => setAktiv(null)}>
+              <span className="swatch" style={{ background: b.color }} />
+              <span className="legend-name">{b.name}</span>
+              <span className="legend-value">
+                {fmt(b.value)} · {Math.round(b.anteil * 100)} %
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
     </div>
   );
 }