Zeilen nur strecken, wenn die Karten dieselbe Bauart haben

Rueckbau des letzten Commits, soweit er zu weit ging. Er hat alle
Diagrammzeilen gestreckt; richtig ist das nur dort, wo die Karten von Natur
aus aehnlich hoch sind.

Gemessen bei 1680 px, Hoehenunterschied innerhalb einer Zeile:

  Trichter | Auslastung          (Liste | Liste)        0 px /   0 px
  Zahlungseingang | Bestand      (Chart | Chart)        0 px /   0 px
  Zahlungseingang | Gewerk       (Chart | Liste)      147 px / 315 px
  Vorgaenge Status | Gewerk      (Chart | Liste)      190 px / 358 px
                                            (volle Daten / duenne Daten)

Der Grund steckt in der Liste: Eine Balkenliste hat keine Mindesthoehe. Fuenf
Kategorien ergeben 280 px, eine einzige 112 px — daneben liegt ein
Zeitverlauf unveraendert bei 427 px, weil seine Diagrammflaeche fest ist.
Diese Zeile zu strecken heisst, eine Karte mit einem Balken auf 427 px
aufzublasen. Das ist schlimmer als die Luecke, die es vermeiden soll:
Weissraum auf der Seite liest sich als "hier ist gerade wenig", eine riesige
Karte mit einem Balken darin als Fehler.

items-start kehrt deshalb auf allen Zeilen zurueck, in denen ein Diagramm mit
fester Hoehe neben einer Liste steht. Gestreckt bleibt, wo beide Karten
dieselbe Bauart haben — Trichter neben Auslastung.

Das senkrechte Zentrieren im Kartenkoerper bleibt: Auf oben buendigen Zeilen
ist es wirkungslos, auf den gestreckten verteilt es den Ueberschuss oben und
unten statt ihn unten abzuladen. Das war die Verbesserung am Trichter.

Auf dem Dashboard bleibt die Zeile aus Zeitverlauf und Balkenliste gestreckt.
Derselbe Massstab, anderes Ergebnis: Dort gibt es keinen Filter, die Liste hat
immer ihre fuenf Gewerke, und es bleiben rund 90 px. Der Filter ist der
Unterschied, nicht die Kachel.

DESIGN-SYSTEM.md traegt jetzt die Regel mit den Messwerten statt der zu
weit gefassten Fassung von vorhin.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX

docs/DESIGN-SYSTEM.md

@@ -332,25 +332,46 @@ Placeholder-Token und für lesbaren Text nicht geeignet.
 
 ## Kartenhöhen in einer Zeile
 
-Karten einer Zeile sind **gleich hoch, aber nicht gleich voll**. Die Höhe gibt
-die inhaltsreichste Karte vor; die übrigen strecken sich mit und verteilen den
-Überschuss oben und unten je zur Hälfte (`justify-center` im Kartenkörper).
+**Gestreckt wird nur, wenn die Karten einer Zeile dieselbe Bauart haben.**
+Zwei Listen, zwei Zeitverläufe, zwei Tabellen — da gibt die eine Karte eine
+Höhe vor, die die andere ohnehin fast erreicht, und der Rest verteilt sich
+oben und unten je zur Hälfte (`justify-center` im Kartenkörper).
 
-Vorher waren die Zeilen oben bündig (`items-start`), und jede Karte endete dort,
-wo ihr Inhalt endete. Bei ähnlich vollen Karten fiel das nicht auf. Bei dünner
-Datenlage schon: Ein Balkendiagramm mit einer einzigen Kategorie war 112 px
-hoch und stand neben einem Zeitverlauf mit 427 px — 315 px Seitenhintergrund
-als Loch dazwischen. Das liest sich nicht als „wenig Daten", sondern als
-„etwas ist kaputt".
+**Steht ein Diagramm mit fester Höhe neben einer Liste, bleibt die Zeile oben
+bündig.** Dann hört jede Karte dort auf, wo ihr Inhalt aufhört, und der
+Höhenunterschied wird zu Weißraum auf der Seite.
 
-Die Leere verschwindet dadurch nicht — sie zieht aus dem Seitenhintergrund in
-die Karte. Das ist der Unterschied zwischen einem Raster mit Lücken und einer
-Karte, in der gerade wenig steht.
+Das ist gemessen, nicht geschätzt. Höhenunterschiede innerhalb einer Zeile
+bei 1680 px:
 
-**Die Karten bleiben dabei dynamisch.** Es gibt keine feste Höhe: Kommt mehr
-Inhalt hinein, wächst die Karte und mit ihr die ganze Zeile.
+| Zeile | volle Daten | dünne Daten |
+|---|---|---|
+| Vertriebstrichter ∣ Auslastung (zwei Listen) | 0 px | 0 px |
+| Zahlungseingang ∣ Offener Bestand (zwei Diagramme) | 0 px | 0 px |
+| Zahlungseingang ∣ Umsatz nach Gewerk (Diagramm ∣ Liste) | 147 px | **315 px** |
+| Vorgänge nach Status ∣ nach Gewerk (Diagramm ∣ Liste) | 190 px | **358 px** |
 
-**Ausnahme: Zeilen mit Tabellen.** Eine Tabelle hat ein natürliches Ende und
-eine eigene Fußzeile zum Blättern. Sie zu strecken schiebt nur die Blätterleiste
-nach unten. Solche Zeilen bleiben oben bündig — im Prototyp die
-Reaktivierungs- und Zahlungsmoral-Tabellen auf der Kundenseite.
+Der Grund steckt in der Liste: Eine Balkenliste hat keine Mindesthöhe. Fünf
+Kategorien ergeben 280 px, eine einzige 112 px — daneben liegt ein
+Zeitverlauf unverändert bei 427 px, weil seine Diagrammfläche fest ist.
+
+Diese Zeilen zu strecken hieße, eine Karte mit einem Balken auf 427 px
+aufzublasen. Das ist schlimmer als die Lücke, die es vermeiden soll:
+Weißraum auf der Seite liest sich als „hier ist gerade wenig", eine riesige
+Karte mit einem Balken darin als Fehler.
+
+**Zeilen mit Tabellen bleiben ebenfalls oben bündig**, auch wenn zwei
+Tabellen nebeneinander von Natur aus gleich hoch sind. Eine Tabelle hat eine
+eigene Fußzeile zum Blättern; sie zu strecken schiebt nur die Blätterleiste
+nach unten.
+
+**Auf dem Dashboard ist die Zeile aus Zeitverlauf und Balkenliste trotzdem
+gestreckt.** Das ist kein Widerspruch, sondern derselbe Maßstab: Der
+Unterschied entsteht dort gar nicht erst groß, weil das Dashboard keinen
+Filter hat — jede Kachel zeigt ihren festen Zeitraum, die Balkenliste hat
+immer ihre fünf Gewerke, und es bleiben rund 90 px, die sich oben und unten
+verteilen. In Analytics kann derselbe Unterschied durch einen Filter auf
+315 px wachsen. Der Filter ist der Unterschied, nicht die Kachel.
+
+Die Karten sind in allen Fällen dynamisch — nirgends steht eine feste Höhe.
+Kommt mehr Inhalt hinein, wächst die Karte.

features/dashboard/pages/AuftraegeSeite.tsx

@@ -142,7 +142,7 @@ export function AuftraegeSeite({ vm }: { vm: VMState<AuftraegeDaten> }) {
           />
         </Raster>
 
-        <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
+        <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-3">
           <ChartCard
             id="auftraege-eingang"
             titel="Auftragseingang"
@@ -172,7 +172,7 @@ export function AuftraegeSeite({ vm }: { vm: VMState<AuftraegeDaten> }) {
           </ChartCard>
         </div>
 
-        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-3">
           <ChartCard
             id="auftraege-status"
             titel="Vorgänge nach Status"

features/dashboard/pages/FinanzenSeite.tsx

@@ -191,7 +191,7 @@ export function FinanzenSeite({ vm }: { vm: VMState<FinanzenDaten> }) {
           </ChartCard>
         </div>
 
-        <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+        <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-3">
           <ChartCard
             className="lg:col-span-2"
             id="finanzen-alter"

features/dashboard/pages/KundenSeite.tsx

@@ -133,7 +133,7 @@ export function KundenSeite({ vm }: { vm: VMState<KundenDaten> }) {
           />
         </Raster>
 
-        <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
+        <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-3">
           <ChartCard
             id="kunden-entwicklung"
             titel="Neukunden im Zeitverlauf"
@@ -158,7 +158,7 @@ export function KundenSeite({ vm }: { vm: VMState<KundenDaten> }) {
           </ChartCard>
         </div>
 
-        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-2">
           <ChartCard id="kunden-typ" titel="Kundenstruktur" untertitel="Privat, Gewerbe, Verwaltung">
             <Donut
               daten={d.nachTyp}

features/dashboard/pages/TeamSeite.tsx

@@ -159,7 +159,7 @@ export function TeamSeite({ vm }: { vm: VMState<TeamDaten> }) {
           />
         </ChartCard>
 
-        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-2">
           <ChartCard
             id="team-abschluesse"
             titel="Abschlüsse je Mitarbeiter"

features/dashboard/pages/UebersichtSeite.tsx

@@ -131,7 +131,7 @@ export function UebersichtSeite({ vm }: { vm: VMState<UebersichtDaten> }) {
           <AlertList eintraege={d.alerts} spalten={2} />
         </ChartCard>
 
-        <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
+        <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-3">
           <ChartCard
             id="uebersicht-umsatzverlauf"
             titel="Zahlungseingang im Zeitverlauf"