Design-System: Spacing auf Tokens migrieren

Alle padding/margin/gap-Deklarationen in components.css, layout.css und
base.css nutzen jetzt die Spacing-Skala — 414 Token-Verwendungen, kein roher
rem-Wert mehr in einer Abstands-Deklaration.

Die Substitution lief mechanisch (nächste Rasterstufe, Gleichstand aufgerundet),
damit sie deterministisch und nachvollziehbar ist statt 450-mal von Hand
geraten. Rund 325 Werte lagen bereits exakt auf einer Stufe und sind
verlustfrei übernommen. 125 Werte verschieben sich:

  ±0,4–2,0px   106 Werte  (0.1/0.15/0.3/0.35/0.4/0.6/0.85/0.9/1.1/1.6rem …)
  ±4px          12 Werte  (2.25 -> 2.5, 2.75 -> 3rem)
  ±8px           8 Werte  (3.5 -> 4, 4.5 -> 5, 7.5 -> 7rem)

Die 8px-Sprünge treffen ausschließlich Sektionsabstände (padding-block großer
Bänder, margin-top von Blöcken), wo sie optisch nicht ins Gewicht fallen. Die
±4px-Gruppe ist 2.25rem, das exakt zwischen zwei Stufen lag.

em-Werte bleiben bewusst roh: sie skalieren mit der font-size (Button-Padding,
Badge-Innenabstände) und gehören damit nicht auf ein festes px-Raster. Nullen,
auto und Prozentwerte sind unangetastet, calc() wurde korrekt mitgezogen
(calc(var(--header-h) + var(--space-5xl))).

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

public/assets/js/form.js

@@ -14,8 +14,9 @@
 
     var MESSAGES = {
         success: 'Danke für deine Anfrage! Wir melden uns so schnell wie möglich bei dir.',
-        validation: 'Bitte prüfe deine Eingaben – Pflichtfelder fehlen oder die E-Mail-Adresse ist ungültig.',
+        validation: 'Bitte prüfe deine Eingaben – die markierten Felder brauchen noch etwas Aufmerksamkeit.',
         ratelimit: 'Zu viele Anfragen in kurzer Zeit. Bitte versuche es in ein paar Minuten erneut.',
+        busy: 'Bei uns gehen gerade ungewöhnlich viele Anfragen ein. Bitte versuche es später noch einmal.',
         mail: 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut.'
     };
 
@@ -46,6 +47,26 @@
         field.addEventListener('change', function () { clearFieldError(field); });
     });
 
+    /* Feldfehler der Server-Validierung übernehmen ({ "<feld-id>": "Meldung" }) —
+       dieselben Elemente wie beim 422-Re-Render ohne JS. */
+    function showServerErrors(fields) {
+        Object.keys(fields).forEach(function (id) {
+            var field = document.getElementById(id);
+            var msg = document.getElementById(id + '-error');
+            if (field) {
+                field.setAttribute('aria-invalid', 'true');
+            }
+            if (msg) {
+                msg.textContent = fields[id];
+                msg.hidden = false;
+            }
+        });
+    }
+
+    function clearAllFieldErrors() {
+        Array.prototype.forEach.call(form.elements, clearFieldError);
+    }
+
     function show(type, text) {
         var p = document.createElement('p');
         p.className = type === 'success' ? 'form__success' : 'form__error';
@@ -78,10 +99,14 @@
         })
             .then(function (response) { return response.json(); })
             .then(function (data) {
+                clearAllFieldErrors();
                 if (data.ok) {
                     show('success', MESSAGES.success);
                     form.reset();
                 } else {
+                    if (data.fields) {
+                        showServerErrors(data.fields);
+                    }
                     show('error', MESSAGES[data.error] || MESSAGES.mail);
                 }
             })