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
2026-07-27 10:09:33 +02:00
parent 8304095dc3
commit 87055bd14b
7 changed files with 458 additions and 392 deletions
--- a/app/components/contact-form.php
+++ b/app/components/contact-form.php
@@ -19,11 +19,14 @@ $intro = $intro ?? null;

 $interests = ['Herrenfußball', 'Frauenfußball', 'Jugendfußball', 'Turnen', 'Sonstiges'];

+// Fehlerquelle: PRG-Query (?error=…) oder — beim 422-Re-Render ohne JS — die
+// serverseitigen Feldfehler aus der Action.
 $sent = isset($_GET['sent']);
-$error = isset($_GET['error']) ? (string) $_GET['error'] : null;
+$error = isset($_GET['error']) ? (string) $_GET['error'] : (form_has_errors() ? 'validation' : null);
 $errorMessages = [
-    '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 oder schreib uns direkt an ' . $club['email'] . '.',
    'mail'       => 'Deine Nachricht konnte gerade nicht versendet werden. Bitte versuche es später erneut oder schreib uns direkt an ' . $club['email'] . '.',
 ];

@@ -51,7 +54,8 @@ $f = [
                </div>
 <?php endif; ?>
                <form class="form" method="post" action="<?= e(url('kontakt-senden')) ?>" novalidate>
-                    <div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status>
+                    <?php /* autofocus nur beim 422-Re-Render: bringt den Fokus auch ohne JS in die Fehlermeldung */ ?>
+                    <div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status<?= form_has_errors() ? ' autofocus' : '' ?>>
 <?php if ($sent): ?>
                        <p class="form__success">Danke für deine Anfrage! Wir melden uns so schnell wie möglich bei dir.</p>
 <?php elseif ($error !== null): ?>
--- a/app/components/membership-form.php
+++ b/app/components/membership-form.php
@@ -13,11 +13,14 @@ declare(strict_types=1);
 $club = json_load('club');
 $fee_options = $fee_options ?? [];

+// Fehlerquelle: PRG-Query (?error=…) oder — beim 422-Re-Render ohne JS — die
+// serverseitigen Feldfehler aus der Action.
 $sent = isset($_GET['sent']);
-$error = isset($_GET['error']) ? (string) $_GET['error'] : null;
+$error = isset($_GET['error']) ? (string) $_GET['error'] : (form_has_errors() ? 'validation' : null);
 $errorMessages = [
-    '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 oder schreib uns direkt an ' . $club['email'] . '.',
    'mail'       => 'Dein Antrag konnte gerade nicht versendet werden. Bitte versuche es später erneut oder schreib uns direkt an ' . $club['email'] . '.',
 ];

@@ -44,7 +47,8 @@ $f = [
 ];
 ?>
                <form class="form" method="post" action="<?= e(url('mitglied-werden-senden')) ?>" novalidate>
-                    <div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status>
+                    <?php /* autofocus nur beim 422-Re-Render: bringt den Fokus auch ohne JS in die Fehlermeldung */ ?>
+                    <div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status<?= form_has_errors() ? ' autofocus' : '' ?>>
 <?php if ($sent): ?>
                        <p class="form__success">Danke! Dein Mitgliedsantrag ist bei uns eingegangen – wir melden uns und senden dir die Beitrittserklärung per Post zu.</p>
 <?php elseif ($error !== null): ?>
--- a/app/components/sportheimbuchung-form.php
+++ b/app/components/sportheimbuchung-form.php
@@ -10,11 +10,14 @@ declare(strict_types=1);
 */
 $club = json_load('club');

+// Fehlerquelle: PRG-Query (?error=…) oder — beim 422-Re-Render ohne JS — die
+// serverseitigen Feldfehler aus der Action.
 $sent  = isset($_GET['sent']);
-$error = isset($_GET['error']) ? (string) $_GET['error'] : null;
+$error = isset($_GET['error']) ? (string) $_GET['error'] : (form_has_errors() ? 'validation' : null);
 $errorMessages = [
-    '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 oder schreib uns direkt an ' . $club['email'] . '.',
    'mail'       => 'Deine Anfrage konnte gerade nicht gesendet werden. Bitte versuche es später erneut oder schreib uns direkt an ' . $club['email'] . '.',
 ];

@@ -43,7 +46,8 @@ $f = [
                    <p class="text-muted">Oder direkt per Mail an <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a></p>
                </div>
                <form class="form" method="post" action="<?= e(url('sportheimbuchung-senden')) ?>" novalidate>
-                    <div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status>
+                    <?php /* autofocus nur beim 422-Re-Render: bringt den Fokus auch ohne JS in die Fehlermeldung */ ?>
+                    <div class="form__status" role="status" aria-live="polite" tabindex="-1" data-form-status<?= form_has_errors() ? ' autofocus' : '' ?>>
 <?php if ($sent): ?>
                        <p class="form__success">Danke für deine Anfrage! Wir melden uns kurzfristig bei dir.</p>
 <?php elseif ($error !== null): ?>