diff --git a/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx b/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx
index 308d488..18b99b8 100644
--- a/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx
+++ b/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx
@@ -95,19 +95,19 @@ export function DepartmentEntries({
       {canWrite ? (
         <div className="mb-8 border border-line p-4">
           <label className="block">
-            <span className="font-condensed text-2xs text-text-dim">
+            <span className="field-label">
               {departmentEntryText.body}
             </span>
             <textarea
               value={text}
               onChange={(event) => setText(event.target.value)}
               rows={3}
-              className="field mt-1.5 w-full"
+              className="field w-full"
             />
           </label>
 
           <div className="mt-3 flex flex-wrap items-center gap-4">
-            <label className="flex items-center gap-2 text-2xs text-text-dim">
+            <label className="field-row text-2xs text-text-dim">
               {departmentEntryText.minClearance}
               <select
                 value={stufe}
@@ -255,13 +255,13 @@ function Vermerk({
       {modus === 'zurueckziehen' ? (
         <div className="mt-2">
           <label className="block">
-            <span className="font-condensed text-2xs text-text-dim">
+            <span className="field-label">
               {departmentEntryText.retractReason}
             </span>
             <input
               value={grund}
               onChange={(event) => setGrund(event.target.value)}
-              className="field mt-1.5 w-full max-w-sm"
+              className="field w-full max-w-sm"
             />
           </label>
           <div className="mt-2 flex flex-wrap items-center gap-3">
diff --git a/web/app/(app)/admin/abteilungen/DepartmentForm.tsx b/web/app/(app)/admin/abteilungen/DepartmentForm.tsx
index b8431db..165824f 100644
--- a/web/app/(app)/admin/abteilungen/DepartmentForm.tsx
+++ b/web/app/(app)/admin/abteilungen/DepartmentForm.tsx
@@ -67,15 +67,15 @@ export function DepartmentForm({
 
       <div className="grid gap-4 sm:grid-cols-2">
         <label className="block">
-          <span className="font-condensed text-2xs text-text-dim">
+          <span className="field-label">
             {departmentAdminText.key}
           </span>
           {existing ? (
             <p className="mt-1.5 font-mono text-sm">{existing.key}</p>
           ) : (
             <>
-              <input name="key" required maxLength={21} className="field mt-1.5 w-full font-mono" />
-              <span className="mt-1 block text-2xs text-text-dim">
+              <input name="key" required maxLength={21} className="field w-full font-mono" />
+              <span className="field-hint">
                 {departmentAdminText.keyHint}
               </span>
             </>
@@ -83,7 +83,7 @@ export function DepartmentForm({
         </label>
 
         <label className="block">
-          <span className="font-condensed text-2xs text-text-dim">
+          <span className="field-label">
             {departmentAdminText.name}
           </span>
           <input
@@ -91,13 +91,13 @@ export function DepartmentForm({
             required
             maxLength={120}
             defaultValue={existing?.name}
-            className="field mt-1.5 w-full"
+            className="field w-full"
           />
         </label>
       </div>
 
       <label className="block">
-        <span className="font-condensed text-2xs text-text-dim">
+        <span className="field-label">
           {departmentAdminText.description}
         </span>
         <textarea
@@ -105,19 +105,19 @@ export function DepartmentForm({
           rows={2}
           maxLength={500}
           defaultValue={existing?.description ?? ''}
-          className="field mt-1.5 w-full"
+          className="field w-full"
         />
       </label>
 
       <div className="flex flex-wrap items-end gap-6">
         <label className="block">
-          <span className="font-condensed text-2xs text-text-dim">
+          <span className="field-label">
             {departmentAdminText.minClearance}
           </span>
           <select
             name="minClearance"
             defaultValue={existing?.minClearance ?? 0}
-            className="field mt-1.5"
+            className="field"
           >
             {levels.map((level) => (
               <option key={level.level} value={level.level}>
@@ -125,7 +125,7 @@ export function DepartmentForm({
               </option>
             ))}
           </select>
-          <span className="mt-1 block text-2xs text-text-dim">
+          <span className="field-hint">
             {departmentAdminText.minClearanceHint}
           </span>
         </label>
diff --git a/web/app/(app)/admin/protokoll/page.tsx b/web/app/(app)/admin/protokoll/page.tsx
index dfed496..dfbde18 100644
--- a/web/app/(app)/admin/protokoll/page.tsx
+++ b/web/app/(app)/admin/protokoll/page.tsx
@@ -66,9 +66,9 @@ export default async function AuditLogPage({
       <p className="mt-1 max-w-(--container-measure) text-2xs text-text-dim">{de.audit.intro}</p>
 
       <form method="get" className="mt-6 flex flex-wrap items-end gap-3">
-        <label className="text-2xs text-text-dim">
-          {de.audit.filterActor}
-          <select name="wer" defaultValue={filter.actorId ?? ''} className="field mt-1 text-2xs">
+        <label className="block">
+          <span className="field-label">{de.audit.filterActor}</span>
+          <select name="wer" defaultValue={filter.actorId ?? ''} className="field text-2xs">
             <option value="">{de.audit.all}</option>
             {akteure.map((akteur) => (
               <option key={akteur.id} value={akteur.id}>
@@ -78,9 +78,9 @@ export default async function AuditLogPage({
           </select>
         </label>
 
-        <label className="text-2xs text-text-dim">
-          {de.audit.filterAction}
-          <select name="was" defaultValue={filter.action ?? ''} className="field mt-1 text-2xs">
+        <label className="block">
+          <span className="field-label">{de.audit.filterAction}</span>
+          <select name="was" defaultValue={filter.action ?? ''} className="field text-2xs">
             <option value="">{de.audit.all}</option>
             {aktionen.map((aktion) => (
               <option key={aktion} value={aktion}>
@@ -90,23 +90,23 @@ export default async function AuditLogPage({
           </select>
         </label>
 
-        <label className="text-2xs text-text-dim">
-          {de.audit.filterFrom}
+        <label className="block">
+          <span className="field-label">{de.audit.filterFrom}</span>
           <input
             type="date"
             name="ab"
             defaultValue={wert('ab') ?? ''}
-            className="field mt-1 font-mono text-2xs"
+            className="field font-mono text-2xs"
           />
         </label>
 
-        <label className="text-2xs text-text-dim">
-          {de.audit.filterTo}
+        <label className="block">
+          <span className="field-label">{de.audit.filterTo}</span>
           <input
             type="date"
             name="bis"
             defaultValue={wert('bis') ?? ''}
-            className="field mt-1 font-mono text-2xs"
+            className="field font-mono text-2xs"
           />
         </label>
 
diff --git a/web/app/(app)/admin/rollen/RoleRow.tsx b/web/app/(app)/admin/rollen/RoleRow.tsx
index c4458d6..3631c3c 100644
--- a/web/app/(app)/admin/rollen/RoleRow.tsx
+++ b/web/app/(app)/admin/rollen/RoleRow.tsx
@@ -83,7 +83,7 @@ export function RoleRow({
       </div>
 
       <div className="mt-3 flex flex-wrap gap-x-8 gap-y-3 text-xs">
-        <label className="flex items-center gap-2">
+        <label className="field-row">
           <span className="font-condensed text-text-dim">{roleAdminText.category}</span>
           <select
             value={category}
@@ -101,7 +101,7 @@ export function RoleRow({
           </select>
         </label>
 
-        <label className="flex items-center gap-2">
+        <label className="field-row">
           <span className="font-condensed text-text-dim">{roleAdminText.clearance}</span>
           <select
             value={clearanceLevel}
diff --git a/web/app/(app)/faelle/[caseNumber]/EntryComposer.tsx b/web/app/(app)/faelle/[caseNumber]/EntryComposer.tsx
index e6bcd9f..14f92ae 100644
--- a/web/app/(app)/faelle/[caseNumber]/EntryComposer.tsx
+++ b/web/app/(app)/faelle/[caseNumber]/EntryComposer.tsx
@@ -51,7 +51,7 @@ export function EntryComposer({ caseNumber }: { caseNumber: string }) {
         action={() => submit(draft)}
         className="max-w-(--container-measure)"
       >
-        <label htmlFor="vermerk" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="vermerk" className="field-label">
           {caseText.newEntry}
         </label>
         <textarea
diff --git a/web/app/(app)/faelle/neu/NewCaseForm.tsx b/web/app/(app)/faelle/neu/NewCaseForm.tsx
index d7d3a54..3a0193e 100644
--- a/web/app/(app)/faelle/neu/NewCaseForm.tsx
+++ b/web/app/(app)/faelle/neu/NewCaseForm.tsx
@@ -21,7 +21,7 @@ export function NewCaseForm({
   return (
     <form action={action} className="mt-6 space-y-5">
       <div>
-        <label htmlFor="title" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="title" className="field-label">
           {caseText.title}
         </label>
         <input
@@ -35,7 +35,7 @@ export function NewCaseForm({
       </div>
 
       <div>
-        <label htmlFor="templateKey" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="templateKey" className="field-label">
           {caseText.type}
         </label>
         <select
@@ -53,7 +53,7 @@ export function NewCaseForm({
       </div>
 
       <div>
-        <label htmlFor="classification" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="classification" className="field-label">
           {clearanceText.classification}
         </label>
         {/* Die Auswahl zeigt nur, was erlaubt ist. Geprüft wird trotzdem serverseitig. */}
@@ -73,7 +73,7 @@ export function NewCaseForm({
 
       {people.length > 0 ? (
         <div>
-          <label htmlFor="personnelFileId" className="font-condensed text-xs text-text-dim">
+          <label htmlFor="personnelFileId" className="field-label">
             {caseText.subject}
           </label>
           {/* Gleich beim Anlegen verknüpfen erspart den zweiten Schritt, den
diff --git a/web/app/(app)/personalakten/[id]/PersonnelHead.tsx b/web/app/(app)/personalakten/[id]/PersonnelHead.tsx
index c175c1e..5d48385 100644
--- a/web/app/(app)/personalakten/[id]/PersonnelHead.tsx
+++ b/web/app/(app)/personalakten/[id]/PersonnelHead.tsx
@@ -107,13 +107,13 @@ export function PersonnelHead({
       <div className="grid gap-4 sm:grid-cols-2">
         <Feld id="rank" label={personnelText.rank} defaultValue={file.rank} />
         <label className="block">
-          <span className="font-condensed text-2xs text-text-dim">
+          <span className="field-label">
             {personnelText.department}
           </span>
           <select
             name="departmentId"
             defaultValue={file.departmentId ?? ''}
-            className="field mt-1.5 w-full"
+            className="field w-full"
           >
             <option value="">{personnelText.noDepartment}</option>
             {departments.map((abteilung) => (
@@ -140,10 +140,10 @@ export function PersonnelHead({
             </label>
           ))}
         </div>
-        <p className="mt-1 text-2xs text-text-dim">{personnelText.statusHint}</p>
+        <p className="field-hint">{personnelText.statusHint}</p>
       </fieldset>
       <div>
-        <label htmlFor="note" className="font-condensed text-2xs text-text-dim">
+        <label htmlFor="note" className="field-label">
           {personnelText.note}
         </label>
         <textarea
@@ -294,7 +294,7 @@ function Feld({
 }) {
   return (
     <div>
-      <label htmlFor={id} className="font-condensed text-2xs text-text-dim">
+      <label htmlFor={id} className="field-label">
         {label}
       </label>
       <input
diff --git a/web/app/(app)/personalakten/neu/NewPersonnelForm.tsx b/web/app/(app)/personalakten/neu/NewPersonnelForm.tsx
index 7e1c993..1bd414f 100644
--- a/web/app/(app)/personalakten/neu/NewPersonnelForm.tsx
+++ b/web/app/(app)/personalakten/neu/NewPersonnelForm.tsx
@@ -35,7 +35,7 @@ export function NewPersonnelForm({
       <Feld id="displayName" label={personnelText.name} required minLength={2} />
 
       <div>
-        <label htmlFor="userId" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="userId" className="field-label">
           {personnelText.linkedAccount}
         </label>
         <select
@@ -56,10 +56,10 @@ export function NewPersonnelForm({
       <div className="grid gap-5 sm:grid-cols-2">
         <Feld id="rank" label={personnelText.rank} />
         <label className="block">
-          <span className="font-condensed text-2xs text-text-dim">
+          <span className="field-label">
             {personnelText.department}
           </span>
-          <select name="departmentId" defaultValue="" className="field mt-1.5 w-full">
+          <select name="departmentId" defaultValue="" className="field w-full">
             <option value="">{personnelText.noDepartment}</option>
             {departments.map((abteilung) => (
               <option key={abteilung.id} value={abteilung.id}>
@@ -82,11 +82,11 @@ export function NewPersonnelForm({
             </label>
           ))}
         </div>
-        <p className="mt-1 text-2xs text-text-dim">{personnelText.statusHint}</p>
+        <p className="field-hint">{personnelText.statusHint}</p>
       </fieldset>
 
       <div>
-        <label htmlFor="note" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="note" className="field-label">
           {personnelText.note}
         </label>
         <textarea
@@ -95,11 +95,11 @@ export function NewPersonnelForm({
           rows={3}
           className="mt-1.5 block w-full field"
         />
-        <p className="mt-1 text-2xs text-text-dim">{personnelText.noteHelp}</p>
+        <p className="field-hint">{personnelText.noteHelp}</p>
       </div>
 
       <div>
-        <label htmlFor="classification" className="font-condensed text-xs text-text-dim">
+        <label htmlFor="classification" className="field-label">
           {clearanceText.classification}
         </label>
         {/* Die Auswahl zeigt nur, was erlaubt ist. Geprüft wird trotzdem serverseitig. */}
@@ -145,7 +145,7 @@ function Feld({
 }) {
   return (
     <div>
-      <label htmlFor={id} className="font-condensed text-xs text-text-dim">
+      <label htmlFor={id} className="field-label">
         {label}
       </label>
       <input
diff --git a/web/app/globals.css b/web/app/globals.css
index ab3e413..81a9ea5 100644
--- a/web/app/globals.css
+++ b/web/app/globals.css
@@ -337,6 +337,51 @@
     cursor: not-allowed;
   }
 
+  /* -------------------------------------------------------------------
+     Beschriftung und Bedienelement.
+
+     Der Abstand dazwischen war kleiner als die Polsterung **innerhalb** des
+     Feldes, und genau daran erkennt das Auge einen zu engen Satz: das Wort
+     steht naeher am Rahmen als der Inhalt des Rahmens an demselben Rahmen,
+     also wirkt es angeklebt. Die Regel daraus: **der Abstand nach aussen ist
+     groesser als die Polsterung nach innen.**
+
+     Deshalb stehen beide Werte hier und nicht an den Aufrufstellen. Sie waren
+     dort ein Dutzend Mal von Hand gesetzt, mit drei verschiedenen Werten, und
+     keiner davon reichte. Siehe docs/10-design-system.md.
+     ------------------------------------------------------------------- */
+  .field-label {
+    display: block;
+    /* Mehr als die 0.4rem Polsterung des Feldes nach oben und unten. */
+    margin-block-end: 0.5rem;
+    font-family: var(--font-condensed);
+    font-size: var(--text-2xs);
+    line-height: 1.4;
+    color: var(--color-text-dim);
+  }
+
+  /* Beschriftung daneben statt darueber. Waagerecht braucht es mehr Luft als
+     senkrecht: das Feld polstert innen 0.7rem, aussen sind es 0.85rem. */
+  .field-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.85rem;
+    font-family: var(--font-condensed);
+    font-size: var(--text-2xs);
+    color: var(--color-text-dim);
+  }
+
+  /* Der Hinweis unter einem Feld gehoert naeher an das Feld als an das
+     naechste. */
+  .field-hint {
+    display: block;
+    margin-block-start: 0.4rem;
+    font-size: var(--text-2xs);
+    line-height: 1.45;
+    color: var(--color-text-dim);
+  }
+
   /* Einzeilige Felder, die wie ein Knopf aussehen duerfen: Suchbalken,
      Schnellfilter. */
   .field-pill {
diff --git a/web/components/documents/NewDocument.tsx b/web/components/documents/NewDocument.tsx
index d9b737c..4f6083a 100644
--- a/web/components/documents/NewDocument.tsx
+++ b/web/components/documents/NewDocument.tsx
@@ -56,7 +56,7 @@ export function NewDocument({
 
       <div className="mt-3 grid gap-4 sm:grid-cols-2">
         <div>
-          <label htmlFor="templateKey" className="font-condensed text-2xs text-text-dim">
+          <label htmlFor="templateKey" className="field-label">
             {documentText.kind}
           </label>
           <select
@@ -74,7 +74,7 @@ export function NewDocument({
         </div>
 
         <div>
-          <label htmlFor="classification" className="font-condensed text-2xs text-text-dim">
+          <label htmlFor="classification" className="field-label">
             {clearanceText.classification}
           </label>
           <select
@@ -92,7 +92,7 @@ export function NewDocument({
         </div>
 
         <div className="sm:col-span-2">
-          <label htmlFor="doc-title" className="font-condensed text-2xs text-text-dim">
+          <label htmlFor="doc-title" className="field-label">
             {documentText.title}
           </label>
           <input
diff --git a/web/tests/design-tokens.test.ts b/web/tests/design-tokens.test.ts
index e56e659..0facac2 100644
--- a/web/tests/design-tokens.test.ts
+++ b/web/tests/design-tokens.test.ts
@@ -46,6 +46,31 @@ describe('Design-Tokens', () => {
     expect(gedrueckt.slice(0, 400)).toContain('inset 0 0 0')
   })
 
+  it('haelt Beschriftungen weiter weg als die Polsterung des Feldes', () => {
+    // Die Regel, aus der die Zahlen folgen: eine Beschriftung, die naeher am
+    // Rahmen steht als der Inhalt des Rahmens an demselben Rahmen, wirkt
+    // angeklebt. Also muss der Abstand nach aussen groesser sein als die
+    // Polsterung nach innen. Geprueft wird die Regel, nicht der Wert — wer die
+    // Polsterung aendert, faellt hier auf.
+    const feld = css.slice(css.indexOf('.field {'), css.indexOf('.field:hover'))
+    const polsterung = /padding:\s*([\d.]+)rem\s+([\d.]+)rem/.exec(feld)
+    expect(polsterung, feld).not.toBeNull()
+    const [innenSenkrecht, innenWaagerecht] = [
+      Number(polsterung![1]),
+      Number(polsterung![2]),
+    ]
+
+    const label = css.slice(css.indexOf('.field-label {'))
+    const unten = /margin-block-end:\s*([\d.]+)rem/.exec(label.slice(0, 300))
+    expect(unten, label.slice(0, 300)).not.toBeNull()
+    expect(Number(unten![1])).toBeGreaterThan(innenSenkrecht)
+
+    const reihe = css.slice(css.indexOf('.field-row {'))
+    const abstand = /gap:\s*([\d.]+)rem/.exec(reihe.slice(0, 300))
+    expect(abstand, reihe.slice(0, 300)).not.toBeNull()
+    expect(Number(abstand![1])).toBeGreaterThan(innenWaagerecht)
+  })
+
   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)