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)