Karten einer Zeile gleich hoch, Ueberschuss mittig verteilen

Aus dem Sparring: Bei duenner Datenlage riss die oben buendige Ausrichtung
Loecher in die Seite. Nachgemessen auf /analytics mit Zeitraum "heute" und
Gewerk "Heizung": "Umsatz nach Gewerk" 112 px neben "Zahlungseingang im
Zeitverlauf" 427 px — 315 px Seitenhintergrund dazwischen. Das liest sich
nicht als "wenig Daten", sondern als "etwas ist kaputt".

Zwei Aenderungen, beide klein:

- Der Kartenkoerper zentriert seinen Inhalt senkrecht. Der Ueberschuss geht
  je zur Haelfte nach oben und unten, statt unten abgeladen zu werden. Eine
  Stelle in ChartCard und eine in WidgetKachel — nicht in fuenf Diagrammen.

- items-start faellt auf den Zeilen, die ausschliesslich Diagrammkarten
  tragen. Die Zeile mit den beiden Tabellen auf der Kundenseite bleibt oben
  buendig: Eine Tabelle hat ein natuerliches Ende und eine eigene
  Blaetterleiste, Strecken schiebt die nur nach unten.

Die Karten bleiben dynamisch — keine feste Hoehe, mehr Inhalt laesst die
Karte und mit ihr die Zeile weiter wachsen.

Die Leere verschwindet nicht, sie zieht aus dem Seitenhintergrund in die
Karte. Das ist der Unterschied zwischen einem Raster mit Luecken und einer
Karte, in der gerade wenig steht.

Nachgemessen nach der Aenderung: 427/427, 389/389 auf /analytics,
372/372 und 423/423 auf /dashboard. Dabei ist nebenbei die Leerflaeche unter
dem Vertriebstrichter verschwunden, die vorher auffiel.

In DESIGN-SYSTEM.md als Regel festgehalten.

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

docs/DESIGN-SYSTEM.md

@@ -327,3 +327,30 @@ auslösenden Knopf zurück.
 (5,15:1 auf Weiß), nicht auf `neutral-600` (3,68:1 — unter WCAG AA). Das
 entspricht dem a11y-Override im Zielsystem. `text-neutral-subtle` ist ein
 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).
+
+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".
+
+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.
+
+**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.
+
+**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.

features/dashboard/components/cards/ChartCard.tsx

@@ -138,7 +138,12 @@ export function ChartCard({
 
       {legende ? <div className="flex-none px-4 pb-2">{legende}</div> : null}
 
-      <div className="min-h-0 grow px-4 pb-4">{children}</div>
+      {/* justify-center: Karten einer Zeile sind gleich hoch, aber nicht gleich
+          voll. Eine Karte mit einem Balken neben einer mit einem Diagramm über
+          400 px bekommt den Überschuss oben und unten je zur Hälfte, statt ihn
+          unten abzuladen. Der Inhalt behält seine natürliche Höhe — die Karte
+          wächst weiter mit, wenn mehr hineinkommt. */}
+      <div className="flex min-h-0 grow flex-col justify-center px-4 pb-4">{children}</div>
     </section>
   );
 }

features/dashboard/components/dashboard/WidgetKachel.tsx

@@ -109,7 +109,12 @@ export function WidgetKachel({
         </span>
       </header>
 
-      <div className="min-h-0 grow px-4 pb-4">{children}</div>
+      {/* justify-center: Karten einer Zeile sind gleich hoch, aber nicht gleich
+          voll. Eine Karte mit einem Balken neben einer mit einem Diagramm über
+          400 px bekommt den Überschuss oben und unten je zur Hälfte, statt ihn
+          unten abzuladen. Der Inhalt behält seine natürliche Höhe — die Karte
+          wächst weiter mit, wenn mehr hineinkommt. */}
+      <div className="flex min-h-0 grow flex-col justify-center px-4 pb-4">{children}</div>
 
       {absprung ? (
         <footer className="dv-no-print flex flex-none items-center px-4 pb-4">

features/dashboard/pages/AuftraegeSeite.tsx

@@ -142,7 +142,7 @@ export function AuftraegeSeite({ vm }: { vm: VMState<AuftraegeDaten> }) {
           />
         </Raster>
 
-        <div className="grid grid-cols-1 items-start gap-4 xl:grid-cols-3">
+        <div className="grid grid-cols-1 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 items-start gap-4 lg:grid-cols-3">
+        <div className="grid grid-cols-1 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 items-start gap-4 lg:grid-cols-3">
+        <div className="grid grid-cols-1 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 items-start gap-4 xl:grid-cols-3">
+        <div className="grid grid-cols-1 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 items-start gap-4 lg:grid-cols-2">
+        <div className="grid grid-cols-1 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 items-start gap-4 lg:grid-cols-2">
+        <div className="grid grid-cols-1 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 items-start gap-4 xl:grid-cols-3">
+        <div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
           <ChartCard
             id="uebersicht-umsatzverlauf"
             titel="Zahlungseingang im Zeitverlauf"
@@ -181,7 +181,7 @@ export function UebersichtSeite({ vm }: { vm: VMState<UebersichtDaten> }) {
           </ChartCard>
         </div>
 
-        <div className="grid grid-cols-1 items-start gap-4 lg:grid-cols-2">
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
           <ChartCard
             id="uebersicht-trichter"
             titel="Vertriebstrichter"