From ab942da13de50c1af53581286756751a213630ea Mon Sep 17 00:00:00 2001
From: Harlekin <bastianklingspor@gmail.com>
Date: Thu, 3 Sep 2026 22:53:07 +0200
Subject: [PATCH] =?UTF-8?q?Feste=20Spaltenbreiten=20f=C3=BCr=20jede=20List?=
 =?UTF-8?q?enzeile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

„Keine Textzentrierung" — die Beobachtung stimmte an einundzwanzig Stellen, und
die Ursache war überall dieselbe: die Zeilen waren Flex-Behälter, in denen
jedes Element so breit war wie sein Inhalt. Damit fing der Titel in jeder Zeile
woanders an, und die Stempelmarken hatten nur rechts eine gemeinsame Kante. Bei
„ETHIK" und „WS" untereinander sieht man es sofort.

Die Breiten stehen jetzt einmal in globals.css — record-key, record-label,
record-title, record-meta, stamp-mark — und sind über Variablen je Liste
anpassbar: eine Liste von Abteilungskürzeln braucht keine vierzehn Zeichen,
eine Liste von Aktenzeichen schon.

Zwei Dinge, die dabei mehr sind als Kosmetik:

Eine Spalte wird auch reserviert, wenn sie leer ist. Vorher hing der Dienstgrad
an einer Bedingung, und bei einer Person ohne Rang rutschte alles Folgende nach
links.

Was keine Kennung ist, gehört nicht in die Kennungsspalte. In „Zuletzt
geöffnet" stand der Name einer Person dort, wo sonst das Aktenzeichen steht: in
Mono, abgeschnitten, und der Dienstgrad wanderte an die Stelle des Titels. Für
eine Person ist der Name der Titel.

Die Stempelmarke ist überall gleich breit; ein zu langer Name wird gekürzt, die
Stufenziffer bleibt stehen — sie ist die eigentliche Auskunft. Unter 40 rem
fallen die festen Breiten weg, sonst liefen sie über.

Nachgesehen im Browser mit dem gebauten CSS, Fallakten, Abteilungen, Zuletzt
geöffnet und Beteiligte.
---
 .../abteilungen/[key]/DepartmentEntries.tsx   |   2 +-
 web/app/(app)/abteilungen/[key]/page.tsx      |  24 ++---
 web/app/(app)/abteilungen/page.tsx            |  22 ++--
 .../admin/abteilungen/DepartmentForm.tsx      |   6 +-
 web/app/(app)/export/Approvals.tsx            |   8 +-
 .../(app)/faelle/[caseNumber]/CaseLinks.tsx   |   4 +-
 .../faelle/[caseNumber]/Participants.tsx      |   6 +-
 web/app/(app)/faelle/page.tsx                 |  12 +--
 .../(app)/personalakten/[id]/Assignments.tsx  |   6 +-
 web/app/(app)/personalakten/[id]/page.tsx     |   6 +-
 web/app/(app)/personalakten/page.tsx          |  10 +-
 web/app/(app)/suche/page.tsx                  |  14 +--
 web/app/(app)/uebersicht/page.tsx             |  41 ++++---
 web/app/globals.css                           | 101 ++++++++++++++++++
 web/components/StampMark.tsx                  |  10 +-
 web/components/documents/DocumentList.tsx     |  10 +-
 web/tests/design-tokens.test.ts               |  19 ++++
 17 files changed, 221 insertions(+), 80 deletions(-)

diff --git a/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx b/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx
index 18b99b8..b7d4b44 100644
--- a/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx
+++ b/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx
@@ -182,7 +182,7 @@ function Vermerk({
 
   return (
     <li>
-      <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
+      <div className="record-row">
         <span className="font-condensed text-2xs text-text-dim">{vermerk.authorName}</span>
         <time className="text-2xs text-text-dim">
           {new Date(vermerk.createdAt).toLocaleString('de-DE')}
diff --git a/web/app/(app)/abteilungen/[key]/page.tsx b/web/app/(app)/abteilungen/[key]/page.tsx
index ca7b40f..2579fea 100644
--- a/web/app/(app)/abteilungen/[key]/page.tsx
+++ b/web/app/(app)/abteilungen/[key]/page.tsx
@@ -60,7 +60,7 @@ export default async function DepartmentPage({ params }: { params: Promise<{ key
     <main className="mx-auto max-w-5xl px-6 py-10">
       <header>
         <div className="flex flex-wrap items-baseline gap-x-4 gap-y-2">
-          <span className="font-mono text-xs text-text-dim">{abteilung.key}</span>
+          <span className="record-key">{abteilung.key}</span>
           <span className="font-condensed text-2xs text-text-dim">{de.department.one}</span>
           {abteilung.isArchived ? (
             <span className="font-condensed text-2xs text-text-dim">
@@ -171,13 +171,11 @@ async function Members({
         <li key={person.id} className="border-b border-line">
           <Link
             href={`/personalakten/${person.id}`}
-            className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+            className="record-row py-2 pl-3 text-text no-underline"
             style={classificationEdgeStyle(person.classification)}
           >
-            <span className="grow">{person.displayName}</span>
-            {person.rank ? (
-              <span className="font-condensed text-2xs text-text-dim">{person.rank}</span>
-            ) : null}
+            <span className="record-title">{person.displayName}</span>
+            <span className="record-meta">{person.rank}</span>
             <StampMark
               level={person.classification}
               name={levelName.get(person.classification) ?? de.common.unknown}
@@ -207,12 +205,12 @@ async function Cases({
         <li key={akte.id} className="border-b border-line">
           <Link
             href={`/faelle/${akte.caseNumber}`}
-            className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+            className="record-row py-2 pl-3 text-text no-underline"
             style={classificationEdgeStyle(akte.classification)}
           >
-            <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
-            <span className="grow">{akte.title}</span>
-            <span className="font-condensed text-2xs text-text-dim">
+            <span className="record-key">{akte.caseNumber}</span>
+            <span className="record-title">{akte.title}</span>
+            <span className="record-meta">
               {de.case.statusNames[akte.status] ?? akte.status}
             </span>
             <StampMark
@@ -244,10 +242,10 @@ async function Documents({
         <li key={dokument.id} className="border-b border-line">
           <Link
             href={`/dokumente/${dokument.documentNumber}`}
-            className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 text-text no-underline"
+            className="record-row py-2 text-text no-underline"
           >
-            <span className="font-mono text-xs text-text-dim">{dokument.documentNumber}</span>
-            <span className="grow">{dokument.title}</span>
+            <span className="record-key">{dokument.documentNumber}</span>
+            <span className="record-title">{dokument.title}</span>
           </Link>
         </li>
       ))}
diff --git a/web/app/(app)/abteilungen/page.tsx b/web/app/(app)/abteilungen/page.tsx
index 297d7ac..2e16f6a 100644
--- a/web/app/(app)/abteilungen/page.tsx
+++ b/web/app/(app)/abteilungen/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next'
+import type { CSSProperties } from 'react'
 import Link from 'next/link'
 import { requireUser } from '@/lib/auth/current'
 import { casesPerDepartment, listDepartments } from '@/lib/departments/service'
@@ -50,17 +51,20 @@ export default async function DepartmentsPage() {
               <li key={abteilung.id} className="border-b border-line">
                 <Link
                   href={`/abteilungen/${abteilung.key}`}
-                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 text-text no-underline"
+                  className="record-row py-3 text-text no-underline"
+                  style={{ '--record-key': '8ch' } as CSSProperties}
                 >
-                  <span className="font-mono text-xs text-text-dim">{abteilung.key}</span>
-                  <span className="grow">{abteilung.name}</span>
-                  {abteilung.description ? (
-                    <span className="w-full text-2xs text-text-dim sm:w-auto sm:grow-[2]">
-                      {abteilung.description}
-                    </span>
-                  ) : null}
+                  <span className="record-key">{abteilung.key}</span>
+                  <span className="record-title">
+                    {abteilung.name}
+                    {abteilung.description ? (
+                      <span className="mt-0.5 block text-2xs text-text-dim">
+                        {abteilung.description}
+                      </span>
+                    ) : null}
+                  </span>
                   {abteilung.memberCount === null ? null : (
-                    <span className="font-condensed text-2xs text-text-dim">
+                    <span className="record-meta">
                       {de.department.memberCount(abteilung.memberCount)}
                     </span>
                   )}
diff --git a/web/app/(app)/admin/abteilungen/DepartmentForm.tsx b/web/app/(app)/admin/abteilungen/DepartmentForm.tsx
index 165824f..33b6278 100644
--- a/web/app/(app)/admin/abteilungen/DepartmentForm.tsx
+++ b/web/app/(app)/admin/abteilungen/DepartmentForm.tsx
@@ -41,9 +41,9 @@ export function DepartmentForm({
 
   if (existing && !offen) {
     return (
-      <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
-        <span className="font-mono text-xs text-text-dim">{existing.key}</span>
-        <span className="grow">{existing.name}</span>
+      <div className="record-row">
+        <span className="record-key">{existing.key}</span>
+        <span className="record-title">{existing.name}</span>
         {existing.memberCount === null ? null : (
           <span className="font-condensed text-2xs text-text-dim">
             {departmentAdminText.members} {existing.memberCount}
diff --git a/web/app/(app)/export/Approvals.tsx b/web/app/(app)/export/Approvals.tsx
index 40c6abd..2ea51e2 100644
--- a/web/app/(app)/export/Approvals.tsx
+++ b/web/app/(app)/export/Approvals.tsx
@@ -36,12 +36,12 @@ export function Approvals({ jobs }: { jobs: Auftrag[] }) {
       <ul className="border-t border-line">
         {jobs.map((auftrag) => (
           <li key={auftrag.id} className="border-b border-line py-2">
-            <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1 text-2xs">
-              <span className="font-condensed text-text-dim">
+            <div className="record-row text-2xs">
+              <span className="record-label">
                 {exportText.kinds[auftrag.kind] ?? auftrag.kind}
               </span>
-              <span className="font-mono">{auftrag.label}</span>
-              <span className="grow text-text-dim">
+              <span className="record-key">{auftrag.label}</span>
+              <span className="record-title text-text-dim">
                 {exportText.requestedBy} {auftrag.requestedBy}
               </span>
               <button
diff --git a/web/app/(app)/faelle/[caseNumber]/CaseLinks.tsx b/web/app/(app)/faelle/[caseNumber]/CaseLinks.tsx
index 918026c..de2d7bc 100644
--- a/web/app/(app)/faelle/[caseNumber]/CaseLinks.tsx
+++ b/web/app/(app)/faelle/[caseNumber]/CaseLinks.tsx
@@ -43,7 +43,7 @@ export function CaseLinks({
           {links.map((link) => (
             <li
               key={`${link.direction}:${link.kind}:${link.other.id}`}
-              className="flex flex-wrap items-baseline gap-x-4 gap-y-1 border-b border-line py-2 pl-3"
+              className="record-row border-b border-line py-2 pl-3"
               style={classificationEdgeStyle(link.other.classification)}
             >
               <span className="font-condensed text-2xs text-text-dim">
@@ -53,7 +53,7 @@ export function CaseLinks({
               <Link
                 href={`/faelle/${link.other.caseNumber}`}
                 prefetch
-                className="font-mono text-xs text-text-dim"
+                className="record-key"
               >
                 {link.other.caseNumber}
               </Link>
diff --git a/web/app/(app)/faelle/[caseNumber]/Participants.tsx b/web/app/(app)/faelle/[caseNumber]/Participants.tsx
index 1f49375..7114600 100644
--- a/web/app/(app)/faelle/[caseNumber]/Participants.tsx
+++ b/web/app/(app)/faelle/[caseNumber]/Participants.tsx
@@ -50,12 +50,12 @@ export function Participants({
           {participants.map((person) => (
             <li
               key={person.id}
-              className="flex flex-wrap items-baseline gap-x-4 gap-y-1 border-b border-line py-2"
+              className="record-row border-b border-line py-2"
             >
-              <span className="font-condensed text-2xs text-text-dim">
+              <span className="record-label">
                 {participantText.roles[person.role] ?? person.role}
               </span>
-              <span className="grow text-sm">
+              <span className="record-title text-sm">
                 {person.personnelFileId ? (
                   <Link href={`/personalakten/${person.personnelFileId}`}>
                     {person.displayName ?? commonText.unknown}
diff --git a/web/app/(app)/faelle/page.tsx b/web/app/(app)/faelle/page.tsx
index 611591d..b9ae0f1 100644
--- a/web/app/(app)/faelle/page.tsx
+++ b/web/app/(app)/faelle/page.tsx
@@ -72,7 +72,7 @@ export default async function CaseListPage({
     <main className="mx-auto max-w-5xl px-6 py-10">
       <div className="flex flex-wrap items-baseline justify-between gap-4">
         <h1 className="font-condensed">{de.case.listHeading}</h1>
-        <span className="font-mono text-xs text-text-dim">{de.case.countLabel(total)}</span>
+        <span className="record-key">{de.case.countLabel(total)}</span>
       </div>
 
       <nav className="mt-4 flex flex-wrap gap-3 font-condensed text-xs">
@@ -98,14 +98,12 @@ export default async function CaseListPage({
               <Link
                 href={`/faelle/${akte.caseNumber}`}
                 prefetch
-                className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
+                className="record-row py-3 pl-3 text-text no-underline"
                 style={classificationEdgeStyle(akte.classification)}
               >
-                <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
-                <span className="grow">{akte.title}</span>
-                <span className="font-condensed text-2xs text-text-dim">
-                  {de.case.statusNames[akte.status]}
-                </span>
+                <span className="record-key">{akte.caseNumber}</span>
+                <span className="record-title">{akte.title}</span>
+                <span className="record-meta">{de.case.statusNames[akte.status]}</span>
                 <StampMark
                   level={akte.classification}
                   name={levelName.get(akte.classification) ?? de.common.unknown}
diff --git a/web/app/(app)/personalakten/[id]/Assignments.tsx b/web/app/(app)/personalakten/[id]/Assignments.tsx
index 07c8829..b4eb595 100644
--- a/web/app/(app)/personalakten/[id]/Assignments.tsx
+++ b/web/app/(app)/personalakten/[id]/Assignments.tsx
@@ -44,12 +44,12 @@ export function Assignments({
           {assignments.map((zuordnung) => (
             <li
               key={zuordnung.id}
-              className="flex flex-wrap items-baseline gap-x-4 gap-y-1 border-b border-line py-2"
+              className="record-row border-b border-line py-2"
             >
-              <span className="font-condensed text-2xs text-text-dim">
+              <span className="record-label">
                 {assignmentText.roles[zuordnung.role] ?? zuordnung.role}
               </span>
-              <span className="grow text-sm">{zuordnung.user.displayName}</span>
+              <span className="record-title text-sm">{zuordnung.user.displayName}</span>
               {canEdit ? (
                 <button
                   type="button"
diff --git a/web/app/(app)/personalakten/[id]/page.tsx b/web/app/(app)/personalakten/[id]/page.tsx
index d8ce91f..f071188 100644
--- a/web/app/(app)/personalakten/[id]/page.tsx
+++ b/web/app/(app)/personalakten/[id]/page.tsx
@@ -80,11 +80,11 @@ async function Backlinks({
                 <Link
                   href={`/faelle/${akte.caseNumber}`}
                   prefetch
-                  className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+                  className="record-row py-2 pl-3 text-text no-underline"
                   style={classificationEdgeStyle(akte.classification)}
                 >
-                  <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
-                  <span className="grow">{akte.title}</span>
+                  <span className="record-key">{akte.caseNumber}</span>
+                  <span className="record-title">{akte.title}</span>
                   <span className="font-condensed text-2xs text-text-dim">
                     {de.case.statusNames[akte.status]}
                   </span>
diff --git a/web/app/(app)/personalakten/page.tsx b/web/app/(app)/personalakten/page.tsx
index f8f3bef..b4eb77e 100644
--- a/web/app/(app)/personalakten/page.tsx
+++ b/web/app/(app)/personalakten/page.tsx
@@ -39,7 +39,7 @@ export default async function PersonnelListPage({
     <main className="mx-auto max-w-5xl px-6 py-10">
       <div className="flex flex-wrap items-baseline justify-between gap-4">
         <h1 className="font-condensed">{de.personnel.listHeading}</h1>
-        <span className="font-mono text-xs text-text-dim">{de.personnel.countLabel(total)}</span>
+        <span className="record-key">{de.personnel.countLabel(total)}</span>
       </div>
 
       <form method="get" className="mt-4 flex flex-wrap items-center gap-3">
@@ -85,13 +85,11 @@ export default async function PersonnelListPage({
               <Link
                 href={`/personalakten/${akte.id}`}
                 prefetch
-                className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
+                className="record-row py-3 pl-3 text-text no-underline"
                 style={classificationEdgeStyle(akte.classification)}
               >
-                <span className="grow">{akte.displayName}</span>
-                {akte.rank ? (
-                  <span className="font-condensed text-2xs text-text-dim">{akte.rank}</span>
-                ) : null}
+                <span className="record-title">{akte.displayName}</span>
+                <span className="record-meta">{akte.rank}</span>
                 <StatusTags tags={akte.statusTags} known={statusTags} />
                 <StampMark
                   level={akte.classification}
diff --git a/web/app/(app)/suche/page.tsx b/web/app/(app)/suche/page.tsx
index 1345a60..a40873b 100644
--- a/web/app/(app)/suche/page.tsx
+++ b/web/app/(app)/suche/page.tsx
@@ -97,7 +97,7 @@ export default async function SearchPage({
     <main className="mx-auto max-w-5xl px-6 py-10">
       <div className="flex flex-wrap items-baseline justify-between gap-4">
         <h1 className="font-condensed">{de.search.heading}</h1>
-        <span className="font-mono text-xs text-text-dim">
+        <span className="record-key">
           {de.search.countLabel(gesamt)}
         </span>
       </div>
@@ -294,7 +294,7 @@ function Treffer({
   /** Gesetzt, wenn der Treffer an einem Beteiligten hängt und nicht am Text. */
   beteiligung?: { name: string; role: string }[]
 }) {
-  const zeile = 'flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline'
+  const zeile = 'record-row py-3 pl-3 text-text no-underline'
 
   if ('caseNumber' in treffer) {
     return (
@@ -304,8 +304,8 @@ function Treffer({
         className={zeile}
         style={classificationEdgeStyle(treffer.classification)}
       >
-        <span className="font-mono text-xs text-text-dim">{treffer.caseNumber}</span>
-        <span className="grow">
+        <span className="record-key">{treffer.caseNumber}</span>
+        <span className="record-title">
           {treffer.title}
           {beteiligung && beteiligung.length > 0 ? (
             <span className="mt-0.5 block text-2xs text-text-dim">
@@ -339,8 +339,8 @@ function Treffer({
         className={zeile}
         style={classificationEdgeStyle(treffer.classification)}
       >
-        <span className="font-mono text-xs text-text-dim">{treffer.documentNumber}</span>
-        <span className="grow">{treffer.title}</span>
+        <span className="record-key">{treffer.documentNumber}</span>
+        <span className="record-title">{treffer.title}</span>
         <span className="font-condensed text-2xs text-text-dim">
           {de.document.statusNames[treffer.status] ?? treffer.status}
         </span>
@@ -355,7 +355,7 @@ function Treffer({
       className={zeile}
       style={classificationEdgeStyle(treffer.classification)}
     >
-      <span className="grow">{treffer.displayName}</span>
+      <span className="record-title">{treffer.displayName}</span>
       {treffer.rank ? (
         <span className="font-condensed text-2xs text-text-dim">{treffer.rank}</span>
       ) : null}
diff --git a/web/app/(app)/uebersicht/page.tsx b/web/app/(app)/uebersicht/page.tsx
index 02a2369..db1b311 100644
--- a/web/app/(app)/uebersicht/page.tsx
+++ b/web/app/(app)/uebersicht/page.tsx
@@ -114,7 +114,7 @@ export default async function DashboardPage() {
                     prefetch
                     className="flex items-baseline gap-4 py-2 text-text no-underline"
                   >
-                    <span className="font-mono text-xs text-text-dim">{eintrag.label}</span>
+                    <span className="record-key">{eintrag.label}</span>
                     <span className="grow font-condensed text-2xs text-accent">
                       {de.dashboard.unreadCount(eintrag.count)}
                     </span>
@@ -200,6 +200,11 @@ function Block({
  * Dokument sein — deshalb steht die Art nicht dabei, sondern nur das, woran
  * man sie erkennt: Aktenzeichen, Name oder Dokumentnummer.
  *
+ * Eine Akte und ein Dokument tragen eine **Kennung**, eine Person nicht: ihr
+ * Name ist der Titel. Stünde er in der Kennungsspalte, stünde er in Mono, wäre
+ * abgeschnitten, und der Dienstgrad rutschte dorthin, wo sonst der Titel
+ * steht — untereinander ergäbe das keine Spalte mehr.
+ *
  * Ohne Vorabruf, anders als die übrigen Listen: die Seiten dahinter merken
  * sich, dass sie geöffnet wurden. Der Vorabruf wird zwar serverseitig erkannt
  * und zählt nicht mit, aber ausgerechnet diese Liste sollte sich nicht selbst
@@ -216,11 +221,27 @@ function Sprung({
     <Link
       href={eintrag.href}
       prefetch={false}
-      className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+      className="record-row py-2 pl-3 text-text no-underline"
       style={classificationEdgeStyle(eintrag.classification)}
     >
-      <span className="font-mono text-xs text-text-dim">{eintrag.label}</span>
-      <span className="grow">{eintrag.secondary}</span>
+      {eintrag.targetType === 'PERSONNEL' ? (
+        <>
+          <span className="record-key" />
+          <span className="record-title">
+            {eintrag.label}
+            {eintrag.secondary ? (
+              <span className="ml-3 font-condensed text-2xs text-text-dim">
+                {eintrag.secondary}
+              </span>
+            ) : null}
+          </span>
+        </>
+      ) : (
+        <>
+          <span className="record-key">{eintrag.label}</span>
+          <span className="record-title">{eintrag.secondary}</span>
+        </>
+      )}
       <StampMark
         level={eintrag.classification}
         name={levelName.get(eintrag.classification) ?? de.common.unknown}
@@ -244,16 +265,12 @@ function Akte({
     <Link
       href={`/faelle/${akte.caseNumber}`}
       prefetch
-      className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-2 pl-3 text-text no-underline"
+      className="record-row py-2 pl-3 text-text no-underline"
       style={classificationEdgeStyle(akte.classification)}
     >
-      <span className="font-mono text-xs text-text-dim">{akte.caseNumber}</span>
-      <span className="grow">{akte.title}</span>
-      {zusatz ? (
-        <span className={`font-condensed text-2xs ${dringend ? 'text-stamp-4' : 'text-text-dim'}`}>
-          {zusatz}
-        </span>
-      ) : null}
+      <span className="record-key">{akte.caseNumber}</span>
+      <span className="record-title">{akte.title}</span>
+      <span className={`record-meta ${dringend ? 'text-stamp-4' : ''}`}>{zusatz}</span>
       <StampMark
         level={akte.classification}
         name={levelName.get(akte.classification) ?? de.common.unknown}
diff --git a/web/app/globals.css b/web/app/globals.css
index 591b0a3..b6c1013 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -313,6 +313,107 @@
     background-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-raised));
   }
 
+  /* ---------------------------------------------------------------------
+     Die Zeile einer Liste.
+
+     Jede Liste in dieser Anwendung zeigt dasselbe Gebilde: eine Kennung, ein
+     Titel, etwas Beiwerk, eine Stempelmarke. Bisher bestimmte **jede Zeile
+     ihre Spaltenbreiten selbst** — die Kennung war so breit wie ihr Text, und
+     damit fing der Titel in jeder Zeile woanders an. Bei „ETHIK" und „WS"
+     untereinander sieht man das sofort.
+
+     Die Breiten stehen deshalb hier und nicht an den Aufrufstellen. Sie sind
+     Variablen: eine Liste von Abteilungskuerzeln braucht keine vierzehn
+     Zeichen, eine Liste von Aktenzeichen schon. Was gleich bleibt, ist dass
+     **innerhalb einer Liste** alles buendig steht.
+     --------------------------------------------------------------------- */
+  .record-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: 1rem;
+    row-gap: 0.25rem;
+  }
+
+  /* Die Kennung: Aktenzeichen, Dokumentnummer, Abteilungskuerzel. Mono mit
+     Tabellenziffern, damit auch die Ziffern untereinander stehen. */
+  .record-key {
+    flex: none;
+    width: var(--record-key, 14ch);
+    overflow: hidden;
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    font-variant-numeric: tabular-nums;
+    color: var(--color-text-dim);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Wie die Kennung, aber fuer eine Bezeichnung aus einer festen Liste:
+     die Rolle eines Beteiligten, die Art eines Auftrags. Kein Mono — es ist
+     Sprache, keine Nummer. */
+  .record-label {
+    flex: none;
+    width: var(--record-label, 11rem);
+    overflow: hidden;
+    font-family: var(--font-condensed);
+    font-size: var(--text-2xs);
+    color: var(--color-text-dim);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Der Titel nimmt den Rest. `min-width: 0` ist noetig, damit ein langer
+     Titel die Zeile nicht aufblaeht, statt zu kuerzen. */
+  .record-title {
+    flex: 1 1 10rem;
+    min-width: 0;
+  }
+
+  /* Beiwerk am rechten Rand: Status, Datum, Anzahl. Rechtsbuendig, damit die
+     Spalte eine Kante hat. */
+  .record-meta {
+    flex: none;
+    width: var(--record-meta, 7rem);
+    font-family: var(--font-condensed);
+    font-size: var(--text-2xs);
+    color: var(--color-text-dim);
+    text-align: right;
+  }
+
+  /* Auf schmalen Schirmen gibt es keine Spalten, nur noch Zeilen. Feste
+     Breiten wuerden dort ueberlaufen. */
+  @media (max-width: 40rem) {
+    .record-key,
+    .record-label,
+    .record-meta {
+      width: auto;
+      text-align: left;
+    }
+  }
+
+  /* Die Stempelmarke: ueberall gleich breit, siehe components/StampMark.tsx. */
+  .stamp-mark {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    gap: 0.375rem;
+    width: var(--stamp-width, 11.5rem);
+    max-width: 100%;
+    border: 1px solid;
+    border-radius: var(--radius-control);
+    padding: 0.1rem 0.6rem;
+    font-family: var(--font-condensed);
+    font-size: var(--text-2xs);
+    line-height: 1.5;
+  }
+
+  .stamp-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   /* Der Ladepunkt in einem Link, solange der Wechsel laeuft. Kein Kreisel:
      eine ruhig pulsierende Scheibe in der Groesse eines Satzzeichens, die
      nichts verdeckt und nichts aufhaelt. */
diff --git a/web/components/StampMark.tsx b/web/components/StampMark.tsx
index 8ec4161..185f34b 100644
--- a/web/components/StampMark.tsx
+++ b/web/components/StampMark.tsx
@@ -16,19 +16,25 @@ export function stampColor(level: number): string {
  * schmalen Schnitt, der Rahmenlinie und der Farbe, nicht aus Grossbuchstaben.
  * Die Stufe steht zusaetzlich als Text, nicht nur als Farbe.
  *
+ * **Feste Breite.** Die Namen der Stufen sind unterschiedlich lang und im
+ * Adminbereich aenderbar; unterschiedlich breite Marken untereinander lesen
+ * sich als Unordnung, nicht als Unterschied. Ein zu langer Name wird gekuerzt,
+ * die Stufenziffer davor bleibt immer stehen — sie ist die eigentliche
+ * Auskunft.
+ *
  * `name` kommt aus ClearanceLevelConfig und ist im Adminbereich aenderbar,
  * deshalb wird er hereingereicht statt aus lib/i18n/de.ts gelesen.
  */
 export function StampMark({ level, name }: { level: number; name: string }) {
   return (
     <span
-      className="inline-flex items-center gap-1.5 border px-1.5 py-0.5 font-condensed text-2xs"
+      className="stamp-mark"
       style={{ borderColor: stampColor(level), color: stampColor(level) }}
     >
       <span aria-hidden className="font-mono">
         {level}
       </span>
-      {name}
+      <span className="stamp-name">{name}</span>
     </span>
   )
 }
diff --git a/web/components/documents/DocumentList.tsx b/web/components/documents/DocumentList.tsx
index 826dc42..3c9fa87 100644
--- a/web/components/documents/DocumentList.tsx
+++ b/web/components/documents/DocumentList.tsx
@@ -35,17 +35,17 @@ export function DocumentList({
           <Link
             href={`/dokumente/${doc.documentNumber}`}
             prefetch
-            className="flex flex-wrap items-baseline gap-x-4 gap-y-1 py-3 pl-3 text-text no-underline"
+            className="record-row py-3 pl-3 text-text no-underline"
             style={classificationEdgeStyle(doc.classification)}
           >
-            <span className="font-mono text-xs text-text-dim">{doc.documentNumber}</span>
-            <span className={`grow ${doc.retractedAt ? 'line-through text-text-dim' : ''}`}>
+            <span className="record-key">{doc.documentNumber}</span>
+            <span className={`record-title ${doc.retractedAt ? 'line-through text-text-dim' : ''}`}>
               {doc.title}
             </span>
-            <span className="font-condensed text-2xs text-text-dim">
+            <span className="record-meta">
               {de.document.layoutNames[doc.layout] ?? doc.layout}
             </span>
-            <span className="font-condensed text-2xs text-text-dim">
+            <span className="record-meta">
               {de.document.statusNames[doc.status] ?? doc.status}
             </span>
             <StampMark
diff --git a/web/tests/design-tokens.test.ts b/web/tests/design-tokens.test.ts
index 0facac2..d5ffc19 100644
--- a/web/tests/design-tokens.test.ts
+++ b/web/tests/design-tokens.test.ts
@@ -71,6 +71,25 @@ describe('Design-Tokens', () => {
     expect(Number(abstand![1])).toBeGreaterThan(innenWaagerecht)
   })
 
+  it('gibt jeder Spalte einer Listenzeile eine feste Breite', () => {
+    // Ohne feste Breiten bestimmt jede Zeile ihre Spalten selbst, und der
+    // Titel fängt in jeder Zeile woanders an. Geprüft wird, dass die Breiten
+    // an **einer** Stelle stehen und nicht an den Aufrufstellen.
+    for (const klasse of ['.record-key', '.record-label', '.record-meta']) {
+      const block = css.slice(css.indexOf(`${klasse} {`))
+      expect(block.slice(0, 400), klasse).toMatch(/width:\s*var\(--record-[a-z]+,/)
+      expect(block.slice(0, 400), klasse).toContain('flex: none')
+    }
+
+    // Die Stempelmarke ist überall gleich breit, sonst lesen sich
+    // unterschiedliche Namen als Unordnung statt als Unterschied.
+    const stempel = css.slice(css.indexOf('.stamp-mark {'))
+    expect(stempel.slice(0, 500)).toMatch(/width:\s*var\(--stamp-width,/)
+
+    // Und auf schmalen Schirmen fallen sie weg, statt überzulaufen.
+    expect(css).toMatch(/@media \(max-width: 40rem\)/)
+  })
+
   it('kennt keine Schatten ausser dem Fokusring', () => {
     const shadows = [...css.matchAll(/--shadow-[\w-]+:\s*([^;]+);/g)].map((m) => m[1]!.trim())
     expect(shadows.length).toBeGreaterThan(0)