feat: Dashboard – Donut ohne Überlauf, Achse lesbar, Karten-Optionen

- Budget-Donut: Mittelbetrag passt sich der Länge an (kein Hineinlaufen in den
  Ring bei 4-stelligen Beträgen)
- Vermögensverlauf: Y-Achse ohne Währungssymbol (formatAmount) + etwas mehr
  linker Rand → „CHF …" wird nicht mehr abgeschnitten
- Karten-Optionen: im Anordnen-Modus je Karte einstellbar; Budget-Donut und
  Budget-Fortschritt können nach Gruppen ODER Kategorien aufschlüsseln
  (?group_by=), Auswahl wird im Layout (props) mitgespeichert

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

web/src/dashboard/charts/Line.jsx

@@ -5,7 +5,8 @@ import useGroesse from "./useGroesse";
 // Liniendiagramm über die Zeit.
 // labels: ["01.07.", …]  serien: [{ name, color, werte: number[] }]
 // fmt: Werteformatierer.
-export default function Line({ labels = [], serien = [], fmt = (v) => String(v) }) {
+export default function Line({ labels = [], serien = [], fmt = (v) => String(v), achsenFmt }) {
+  const yFmt = achsenFmt || fmt; // Achsen-Ticks dürfen schmaler sein (ohne Währungssymbol)
   const wirt = useRef(null);
   const plot = useRef(null);
   const { breite, hoehe } = useGroesse(plot);
@@ -18,7 +19,7 @@ export default function Line({ labels = [], serien = [], fmt = (v) => String(v)
     return <div className="chart-line" ref={wirt}><div className="empty">Keine Daten vorhanden.</div></div>;
   }
 
-  const rand = { oben: 12, rechts: 12, unten: 24, links: 52 };
+  const rand = { oben: 12, rechts: 12, unten: 24, links: 58 };
   const w = Math.max(breite, 240);
   const h = Math.max(hoehe, 120);
   const flaecheB = Math.max(w - rand.links - rand.rechts, 10);
@@ -71,7 +72,7 @@ export default function Line({ labels = [], serien = [], fmt = (v) => String(v)
           {gitter.map((g) => (
             <g key={g.wert}>
               <line x1={rand.links} x2={w - rand.rechts} y1={g.y} y2={g.y} stroke={gitterFarbe} strokeWidth="1" />
-              <text x={rand.links - 8} y={g.y + 4} textAnchor="end" fontSize="11" fill={textFarbe}>{fmt(g.wert)}</text>
+              <text x={rand.links - 8} y={g.y + 4} textAnchor="end" fontSize="11" fill={textFarbe}>{yFmt(g.wert)}</text>
             </g>
           ))}
           {achse.map(({ l, i }) => (