feat: Phase 3 – konfigurierbares Karten-Dashboard

Frontend:
- Dashboard-Seite mit react-grid-layout: Karten frei verschieben/skalieren,
  hinzufügen/entfernen, Standard-Layout zurücksetzen; Layout je Nutzer gespeichert.
- Sechs Karten: Kontostände, Budget-Donut, Vermögensverlauf (Linien-Chart),
  Budget-Fortschritt (grün/rot), Einnahmen/Ausgaben, letzte Buchungen.
- SVG-Charts (Donut/Line) mit währungsbewusster Formatierung; i18n DE/EN.

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

web/src/finance.css

@@ -371,3 +371,151 @@ tr.budget-total-row td {
   color: var(--text);
   font-weight: 560;
 }
+
+/* ---------- Dashboard-Grid ---------- */
+.dash-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  position: relative;
+}
+.dash-add {
+  position: relative;
+}
+.dash-add-menu {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 4px);
+  z-index: 20;
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow);
+  min-width: 200px;
+  overflow: hidden;
+}
+.dash-add-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  color: var(--text);
+  cursor: pointer;
+}
+.dash-add-item:hover {
+  background: var(--surface-2);
+}
+
+.dash-grid {
+  position: relative;
+}
+.dash-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.dash-card-head {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  flex: 0 0 auto;
+}
+.dash-card-title {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted);
+  font-weight: 650;
+  flex: 1;
+}
+.dash-grid.editing .dash-card-head {
+  cursor: move;
+  background: var(--surface-2);
+}
+.dash-remove {
+  color: var(--danger);
+}
+.dash-card-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--sp-3);
+}
+
+.dash-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.dash-line {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 6px 0;
+  border-bottom: 1px solid var(--border);
+}
+.dash-line:last-child {
+  border-bottom: none;
+}
+.dash-total {
+  display: flex;
+  align-items: baseline;
+  gap: var(--sp-2);
+  padding-top: var(--sp-2);
+  margin-top: 2px;
+  border-top: 2px solid var(--border-strong);
+  font-variant-numeric: tabular-nums;
+}
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dash-loading, .dash-empty {
+  padding: var(--sp-4);
+  text-align: center;
+}
+.dash-progress {
+  padding: 6px 0;
+}
+.dash-progress-top {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  margin-bottom: 4px;
+}
+.dash-kpis {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--sp-2);
+  height: 100%;
+}
+.dash-kpi {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.dash-kpi strong {
+  font-size: 1.1rem;
+  font-variant-numeric: tabular-nums;
+}
+
+/* react-grid-layout: Platzhalter + Resize-Griff an das Theme angleichen. */
+.react-grid-item.react-grid-placeholder {
+  background: var(--accent);
+  opacity: 0.15;
+  border-radius: var(--radius);
+}
+.react-grid-item > .react-resizable-handle::after {
+  border-right-color: var(--border-strong);
+  border-bottom-color: var(--border-strong);
+}