Design-System: Token-Ebene für Spacing, Fokus und Tap-Targets

Vorbereitung für die Konsolidierung. tokens.css war für Farben und Typo schon
die Single Source of Truth, für Abstände aber nur mit --space-section und
--container-pad besetzt — dem standen ~450 Spacing-Deklarationen mit 39
verschiedenen rem-Werten gegenüber.

Neu: 14-stufige Spacing-Skala auf 4px-Raster, aus dem Ist-Bestand geclustert
statt frei erfunden. Die neun häufigsten Werte der Codebase (1, 1.5, 1.25, 2.5,
0.75, 0.5, 1.75, 2, 3rem — zusammen ~60% aller Deklarationen) liegen bereits
exakt auf Stufen, die Migration ist dort verlustfrei. Nach oben wird das Raster
gröber (3 → 4 → 5 → 7rem), weil große Abstände das vertragen. --space-4xs (2px)
ist ausdrücklich nur für optische Korrekturen an Icon-/Baseline-Nudges.

Dazu --tap-min (44px, WCAG 2.5.5) und --focus-ring/--focus-offset. Der Fokus
wird auf Weiß festgeschrieben: 15,9:1 auf --clr-bg gegenüber 3,2:1 für Rot,
das WCAG 1.4.11 nur knapp schafft und als einziger Indikator zu schwach ist.

--container-pad und --space-section verweisen jetzt auf die Skala statt eigene
Werte zu führen. Entfernt: --clr-bg-light und --clr-surface-raised, beide
projektweit 0× verwendet.

Consumer folgen in den nächsten Commits — dieser Schritt ändert die Darstellung
noch nicht.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MSsVdooFLgPA8gPFp7HwZU

public/assets/css/tokens.css

@@ -11,15 +11,13 @@
     --clr-bg:            #222222;            /* Grund-Hintergrund (mit Textur) */
     --clr-bg-deep:       #161616;            /* abgesetzte Sektionen */
     --clr-bg-footer:     #000000;
-    --clr-bg-corporate:  #383838;
-    --clr-bg-light:      #f5f5f5;
+    --clr-bg-corporate:  #383838;            /* Scrollbar-Thumb */
     --clr-text:          #ffffff;
     --clr-text-muted:    #b3b3b3;            /* 7.7:1 auf --clr-bg */
     --clr-text-faint:    #8c8c8c;            /* 4.5:1 auf --clr-bg (AA) */
     --clr-sepia-bg:      #f3efe4;            /* Timeline-Museumsrahmen (Foto-Mount) */
     --clr-sepia-text:    #3a372f;            /* Timeline-Text auf hellem Sepia-Grund */
     --clr-glass-bg:      rgb(0 0 0 / 0.22);            /* dunkles Glas (dunkler als der Grund) */
-    --clr-surface-raised: rgb(255 255 255 / 0.055);    /* Karte, die auf einem abgesetzten (dunkleren) Band liegt */
     --clr-glass-border:  rgb(255 255 255 / 0.14);      /* sehr dezenter Card-Rand — Glow/Sheen tragen die Kontur */
     --clr-glass-border-strong: rgb(255 255 255 / 0.45); /* Back-to-Top, position-/group-card etc.: ≥3:1 (WCAG 1.4.11) */
     --clr-field-bg:            rgb(255 255 255 / 0.07); /* Formularfelder: sanfte Füllfläche (etwas heller als das Glas) */
@@ -47,6 +45,28 @@
     --fw-regular: 400;
     --fw-bold: 700;
 
+    /* --- Spacing ---
+       4px-Raster. EINZIGE Quelle für padding/margin/gap — keine rohen rem-Werte
+       mehr in den anderen CSS-Dateien. Stufen wurden aus dem Ist-Bestand
+       geclustert, die häufigsten Werte treffen exakt (--space-s ist mit Abstand
+       der meistgenutzte). Nach oben wird das Raster gröber, weil große Abstände
+       das vertragen. --space-4xs (2px) ist ausschließlich für optische
+       Korrekturen gedacht (Icon-/Baseline-Nudges), nicht für Layout. */
+    --space-4xs:  0.125rem;   /*   2px */
+    --space-3xs:  0.25rem;    /*   4px */
+    --space-2xs:  0.5rem;     /*   8px */
+    --space-xs:   0.75rem;    /*  12px */
+    --space-s:    1rem;       /*  16px */
+    --space-m:    1.25rem;    /*  20px */
+    --space-l:    1.5rem;     /*  24px */
+    --space-xl:   1.75rem;    /*  28px */
+    --space-2xl:  2rem;       /*  32px */
+    --space-3xl:  2.5rem;     /*  40px */
+    --space-4xl:  3rem;       /*  48px */
+    --space-5xl:  4rem;       /*  64px */
+    --space-6xl:  5rem;       /*  80px */
+    --space-7xl:  7rem;       /* 112px */
+
     /* --- Buttons --- */
     --btn-font:     1rem;            /* 16px – Default (moderat) */
     --btn-font-sm:  var(--fs-300);   /* 13px – dezente Buttons */
@@ -55,6 +75,16 @@
     --btn-pad-x:    1.25em;
     --btn-line:     1.2;
 
+    /* --- Interaktion --- */
+    /* Mindest-Trefferfläche (WCAG 2.5.5 AAA). Controls, die optisch kleiner
+       bleiben sollen, strecken ihre Hit-Area per .tap-target auf diesen Wert —
+       gewertet wird die Trefferfläche, nicht die sichtbare Fläche. */
+    --tap-min:      44px;
+    /* Fokus immer weiß: 15,9:1 auf --clr-bg. Rot käme nur auf 3,2:1 und würde
+       WCAG 1.4.11 gerade so schaffen — als einziger Fokus-Indikator zu knapp. */
+    --focus-ring:   2px solid var(--clr-text);
+    --focus-offset: 3px;
+
     /* --- Form & Tiefe --- */
     --radius-btn:  8px;
     --radius-card: 15px;
@@ -67,8 +97,8 @@
 
     /* --- Layout --- */
     --container-max: 1200px;
-    --container-pad: 1rem;
-    --space-section: 5rem;
+    --container-pad: var(--space-s);
+    --space-section: var(--space-6xl);
     --header-h: 60px;
     --logo-h: 72px;