Kartengroessen korrigiert, Vorschau im Menue, Zeitraum-Auswahl bei Verlaeufen

Zu kleine Karten (Konstruktionsfehler):
Bei Schnellzugriff, Status und den Kennzahlen war die Mindesthoehe gleich der
Standardhoehe - und beide zu klein. Bei 96 px Zeilenhoehe blieben nach Kartenkopf
und Innenabstand nur 23 px fuer den Inhalt, eine Kennzahl braucht allein rund
45 px. Deshalb erschien schon in der Grundeinstellung ein Rollbalken, und
kleiner ging es nicht.
- Zeilenhoehe von 96 auf 40 px: die Hoehe laesst sich jetzt fein abstufen.
- Jede Karte hat eine Mindesthoehe, in die ihr Inhalt nachweislich passt
  (Rechnung steht als Kommentar am Verzeichnis).
- Gespeicherte Anordnungen aus der alten Fassung werden beim Laden auf die
  Mindestgroesse angehoben, statt zu flach zu bleiben.

Vorschau im Menue "Karte hinzufuegen":
Der Name allein verriet nicht, was eine Karte zeigt. Jede Karte hat jetzt eine
kleine Skizze (Tabelle, Ring, Balken, Linie, Kennzahl) und eine Beschreibung.
Bewusst gezeichnete Skizzen statt echter Vorschau - sonst muesste das Menue fuer
jede Karte Daten laden.

Zeitraum bei den Verlaufskarten:
Bestandsverlauf, Artikelverlauf und Ein-/Auslagerungen haben eine Auswahl
7 Tage bis 1 Jahr.

Ringdiagramme:
Der Ring klebte oben in der Karte, darunter blieb viel Leerraum. Er fuellt jetzt
die Karte und sitzt mittig.

Geprueft: "npm run build" laeuft durch.

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

web/src/styles.css

@@ -495,7 +495,10 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 }
 .dash-card-head h2 { margin: 0; flex: 1; font-size: 0.9rem; }
 .dash-card-head .icon { color: var(--muted); }
-.dash-card-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4); }
+.dash-card-body {
+  flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4);
+  display: flex; flex-direction: column;
+}
 
 /* Anfasser nur im Bearbeitungsmodus - sonst stoert er beim Lesen. */
 .dash-grid .react-resizable-handle { display: none; }
@@ -536,6 +539,25 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 }
 .menu .link-btn:hover { background: var(--surface-2); text-decoration: none; }
 
+/* Auswahl mit Skizze: Der Name allein verraet nicht, ob eine Karte eine
+   Tabelle, ein Ring oder eine Linie wird. */
+.karten-menu { min-width: 340px; max-height: 60vh; }
+.karten-wahl {
+  display: flex; align-items: center; gap: var(--sp-3);
+  width: 100%; padding: var(--sp-2); border: none; background: none;
+  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
+  font: inherit; color: var(--text);
+}
+.karten-wahl:hover { background: var(--surface-2); }
+.karten-wahl .vorschau { width: 72px; height: 44px; flex: 0 0 auto; }
+.karten-text { display: flex; flex-direction: column; min-width: 0; }
+.karten-titel { font-weight: 600; font-size: 0.875rem; }
+
+/* Auswahlfelder in Karten (Zeitraum, Artikel) */
+.card-toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
+.card-toolbar select { margin-top: 0; width: auto; min-width: 0; flex: 1 1 140px; }
+select.zeitraum { margin-top: 0; width: auto; min-width: 0; flex: 0 0 auto; align-self: flex-start; }
+
 /* ---------- Startseite: Kartentypen ---------- */
 .card-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
 .card-stack { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }
@@ -551,7 +573,13 @@ td select { width: auto; min-width: 0; max-width: 100%; }
 .kpi.danger .kpi-value { color: var(--danger); }
 
 /* ---------- Diagramme ---------- */
-.chart-donut { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
+/* Der Ring fuellt die Karte und sitzt mittig – vorher klebte er oben und
+   darunter blieb eine grosse leere Flaeche stehen. */
+.chart-donut {
+  display: flex; align-items: center; justify-content: center;
+  gap: var(--sp-4); flex-wrap: wrap;
+  flex: 1; min-height: 0;
+}
 .donut-svg { width: 160px; height: 160px; flex: 0 0 auto; }
 .donut-svg circle { transition: stroke-width 120ms ease; cursor: default; }
 .donut-value { font-size: 20px; font-weight: 680; fill: var(--text); }