Die acht Kacheln stehen wieder in einer Reihe

Der erste Anlauf gab jeder Gruppe denselben Anteil der Breite (flex-1).
Damit quetschten sich fuenf Kacheln in ein Drittel und brachen um, waehrend
die einzelne rechts dasselbe Drittel fuer sich hatte — gemeint war eine
Reihe, wie im Entwurf.

Die Breite einer Gruppe folgt jetzt der Zahl ihrer Kacheln. Die Zahl geht
als CSS-Variable in beide Regeln statt als ausgeschriebene Klasse je Gruppe:
kaeme eine neunte Kachel dazu, stimmte die Aufteilung von selbst, waehrend
ein von Hand gesetztes xl:flex-[5] jemand nachziehen muesste — und es fiele
nicht auf, wenn er es vergisst.

Unterhalb der grossen Breite weiterhin untereinander, zwei Kacheln je Reihe:
acht nebeneinander waeren auf einem Laptop unlesbar schmal.

Die Zahl wird in der Reihe kleiner gesetzt. Je Kachel bleiben dort gut
110 px, und "748.4" braucht in 30 px Schriftgrad mehr, als nach dem
Innenabstand uebrig ist — die Kachel hat overflow-hidden, die Zahl waere
also nicht zu breit, sondern abgeschnitten.

app/(app)/page.tsx

@@ -1,6 +1,6 @@
 import { ChevronRight } from "lucide-react";
 import Link from "next/link";
-import { Suspense } from "react";
+import { Suspense, type CSSProperties } from "react";
 import { AnstehendFilter } from "@/components/dashboard/AnstehendFilter";
 import { AnstehendListe, type AnstehendEintrag } from "@/components/dashboard/AnstehendListe";
 import { DraftsCard } from "@/components/dashboard/DraftsCard";
@@ -224,16 +224,31 @@ export default async function DashboardPage({
   return (
     <div className="flex flex-col gap-6">
       {drafts.length > 0 && <DraftsCard drafts={drafts} />}
-      {/* Die Gruppen nebeneinander, solange der Platz reicht, und darunter,
-          wenn nicht. `flex-wrap` statt eines Rasters: die Gruppen sind
-          verschieden breit (fünf, zwei, eine Kachel), und ein Raster zwänge
-          sie in gleiche Spalten — die einzelne Kachel rechts bekäme dann
-          denselben Platz wie fünf. */}
-      <div className="flex flex-wrap items-start gap-x-6 gap-y-4">
+      {/* ── Eine Reihe, drei Gruppen ──────────────────────────────────
+          Ab der grossen Breite stehen alle acht Kacheln nebeneinander, die
+          Überschrift jeweils über den ihren.
+
+          Die Breite einer Gruppe folgt der **Zahl ihrer Kacheln**: fünf, zwei,
+          eine. Der erste Versuch gab jeder Gruppe denselben Anteil (`flex-1`)
+          — dann quetschten sich fünf Kacheln in ein Drittel und brachen um,
+          während die einzelne rechts dasselbe Drittel für sich hatte.
+
+          Die Zahl geht als CSS-Variable in beide Regeln, statt als
+          ausgeschriebene Klasse je Gruppe. Käme eine neunte Kachel dazu,
+          stimmte die Aufteilung von selbst; mit `xl:flex-[5]` von Hand müsste
+          jemand daran denken, und es fiele nicht auf, wenn er es nicht tut.
+
+          Darunter untereinander, je Gruppe zwei Kacheln nebeneinander — in
+          einer Reihe wären acht Kacheln auf einem Laptop unlesbar schmal. */}
+      <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:gap-5">
         {kpiGruppen.map((gruppe) => (
-          <section key={gruppe.titel} className="min-w-0 flex-1">
+          <section
+            key={gruppe.titel}
+            className="min-w-0 xl:[flex:var(--kacheln)_1_0%]"
+            style={{ "--kacheln": gruppe.kacheln.length } as CSSProperties}
+          >
             <h2 className="mb-1.5 text-[11px] font-bold uppercase tracking-wider text-ink-muted">{gruppe.titel}</h2>
-            <div className="grid grid-cols-2 gap-3 sm:grid-cols-[repeat(auto-fit,minmax(9rem,1fr))]">
+            <div className="grid grid-cols-2 gap-3 xl:[grid-template-columns:repeat(var(--kacheln),minmax(0,1fr))]">
               {gruppe.kacheln.map((kpi) => (
                 <Link
                   key={kpi.label}
@@ -243,7 +258,16 @@ export default async function DashboardPage({
                   <span className={`absolute inset-y-0 left-0 w-1 ${TONE[kpi.tone].bar}`} aria-hidden />
                   {/* Number first in the visual order: it is what the eye is
                       looking for, and the label only qualifies it. */}
-                  <div className={`text-3xl font-extrabold leading-none tabular-nums ${TONE[kpi.tone].text}`}>{kpi.value}</div>
+                  {/* Kleiner, sobald alle acht in einer Reihe stehen: dort
+                      bleiben je Kachel gut 110 px, und „748.4" braucht in
+                      30 px Schriftgrad mehr davon, als nach dem Innenabstand
+                      übrig ist. Die Kachel hat `overflow-hidden` — die Zahl
+                      wäre also nicht zu breit, sondern abgeschnitten, und
+                      eine abgeschnittene Kennzahl ist schlimmer als eine
+                      kleine. Darunter stehen zwei je Reihe, da ist Platz. */}
+                  <div className={`text-3xl font-extrabold leading-none tabular-nums xl:text-2xl ${TONE[kpi.tone].text}`}>
+                    {kpi.value}
+                  </div>
                   <div className="mt-1.5 flex items-center gap-1 text-xs font-semibold leading-tight text-ink-muted">
                     {kpi.label}
                     <ChevronRight className="h-3 w-3 shrink-0 opacity-0 transition-opacity group-hover:opacity-100" aria-hidden />