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/pages/Dashboard.jsx

@@ -5,11 +5,15 @@ import { useAuth } from "../auth";
 import Icon from "../components/Icon";
 import { useConfirm } from "../confirm";
 import { KARTEN, KARTEN_IDS } from "../dashboard/cards";
+import Vorschau from "../dashboard/Vorschau";
 
 const Raster = WidthProvider(GridLayout);
 
 const SPALTEN = 12;
-const ZEILENHOEHE = 96;
+// Feine Zeilen: Damit lässt sich die Höhe in kleinen Schritten anpassen. Mit den
+// vorherigen 96 px war schon die kleinste Stufe entweder zu klein (Rollbalken)
+// oder unnötig hoch.
+const ZEILENHOEHE = 40;
 
 /**
  * Startseite als frei zusammenstellbares Raster.
@@ -48,9 +52,20 @@ export default function Dashboard() {
 
   useEffect(() => { laden(); }, []);
 
-  /** Unbekannte Karten aussortieren – z.B. nach einem Update, das eine entfernt. */
+  /**
+   * Unbekannte Karten aussortieren – z.B. nach einem Update, das eine entfernt.
+   * Zusätzlich zu kleine Karten auf ihre Mindestgröße heben: Gespeicherte
+   * Anordnungen aus einer früheren Fassung haben Höhen aus einem gröberen
+   * Raster und wären sonst zu flach für ihren Inhalt.
+   */
   function bereinige(liste) {
-    return (liste || []).filter((k) => KARTEN[k.i]);
+    return (liste || [])
+      .filter((k) => KARTEN[k.i])
+      .map((k) => ({
+        ...k,
+        w: Math.max(k.w, KARTEN[k.i].min.w),
+        h: Math.max(k.h, KARTEN[k.i].min.h),
+      }));
   }
 
   const verfuegbar = useMemo(
@@ -173,15 +188,17 @@ export default function Dashboard() {
                   <Icon name="plus" size={16} />Karte hinzufügen
                 </button>
                 {menuOffen && (
-                  <ul className="menu">
+                  <div className="menu karten-menu">
                     {verfuegbar.map((id) => (
-                      <li key={id}>
-                        <button className="link-btn" onClick={() => hinzufuegen(id)}>
-                          <Icon name={KARTEN[id].icon} size={15} />{KARTEN[id].titel}
-                        </button>
-                      </li>
+                      <button key={id} className="karten-wahl" onClick={() => hinzufuegen(id)}>
+                        <Vorschau art={KARTEN[id].vorschau} />
+                        <span className="karten-text">
+                          <span className="karten-titel">{KARTEN[id].titel}</span>
+                          <span className="muted small">{KARTEN[id].beschreibung}</span>
+                        </span>
+                      </button>
                     ))}
-                  </ul>
+                  </div>
                 )}
               </div>
               <button className="btn primary" onClick={speichern}>Speichern</button>