diff --git a/app/(app)/page.tsx b/app/(app)/page.tsx
index 999ff1f..ccdddef 100644
--- a/app/(app)/page.tsx
+++ b/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 />