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

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"