From d49edeed1896e0a8a019560b1be07cd2025a3d11 Mon Sep 17 00:00:00 2001
From: Harlekin <bastianklingspor@gmail.com>
Date: Thu, 3 Sep 2026 20:28:42 +0200
Subject: [PATCH] Abstand zur Beschriftung folgt aus der Polsterung des Feldes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

„Zwischen der Auswahl und dem Text ist kaum Platz" - und das stimmte überall,
nicht nur an der einen Stelle. Der Grund war messbar: der Abstand zur
Beschriftung betrug 8 px, die Polsterung innerhalb des Feldes 11,2 px. Das Wort
stand also näher am Rahmen als der Inhalt des Rahmens an demselben Rahmen, und
genau daran erkennt das Auge einen zu engen Satz.

Die Regel heisst jetzt: der Abstand nach aussen ist grösser als die Polsterung
nach innen. Sie steht einmal in globals.css als .field-label, .field-row und
.field-hint - vorher war sie ein Dutzend Mal als mt-1, mt-1.5 oder gap-2 an den
Aufrufstellen verteilt, mit drei verschiedenen Werten, von denen keiner
reichte. 33 Stellen umgestellt.

Der Test prüft die Regel und nicht die Zahl: er liest die Polsterung von .field
aus dem CSS und verlangt, dass beide Abstände darüber liegen. Gegengeprobt mit
einem zu kleinen Wert, dann schlägt er an.

Nachgemessen im Browser mit dem gebauten CSS: 8 px senkrecht gegen 5,6 px
Innenpolsterung, 13,6 px waagerecht gegen 11,2 px.
---
 .../abteilungen/[key]/DepartmentEntries.tsx   | 10 ++---
 .../admin/abteilungen/DepartmentForm.tsx      | 20 ++++-----
 web/app/(app)/admin/protokoll/page.tsx        | 24 +++++-----
 web/app/(app)/admin/rollen/RoleRow.tsx        |  4 +-
 .../faelle/[caseNumber]/EntryComposer.tsx     |  2 +-
 web/app/(app)/faelle/neu/NewCaseForm.tsx      |  8 ++--
 .../personalakten/[id]/PersonnelHead.tsx      | 10 ++---
 .../personalakten/neu/NewPersonnelForm.tsx    | 16 +++----
 web/app/globals.css                           | 45 +++++++++++++++++++
 web/components/documents/NewDocument.tsx      |  6 +--
 web/tests/design-tokens.test.ts               | 25 +++++++++++
 11 files changed, 120 insertions(+), 50 deletions(-)

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)