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

app/actions/sportheimbuchung-senden.php

@@ -3,12 +3,13 @@
 declare(strict_types=1);
 
 /**
- * POST /sportheimbuchung-senden — Sportheim-Buchungsanfrage validieren und via Brevo SMTP versenden.
+ * POST /sportheimbuchung-senden — Sportheim-Buchungsanfrage validieren und über
- * Antwort: PRG-Redirect zu /sportheimbuchung#buchung (?sent=1 | ?error=…).
+ * All-Inkl-SMTP versenden.
+ * Antwort: PRG-Redirect zu /sportheimbuchung#buchung (?sent=1 | ?error=…),
+ *          JSON bei fetch (form.js) oder — bei Feldfehlern ohne JS — die Seite direkt
+ *          mit HTTP 422, erhaltenen Eingaben und Feldfehlern (render_form_invalid()).
  */
 
-use PHPMailer\PHPMailer\PHPMailer;
-
 $wantsJson = str_contains($_SERVER['HTTP_ACCEPT'] ?? '', 'application/json');
 
 $respond = static function (bool $ok, string $error = '') use ($wantsJson): never {
@@ -26,6 +27,13 @@ $field = static fn (string $key): string => trim((string) ($_POST[$key] ?? ''));
 $route = 'sportheimbuchung';
 $token = $field('ft');
 
+// Ohne vollständige config/config.php liefe die Seite auf der Vorlage (öffentliches
+// app_secret, kein SMTP-Passwort) — dann gar nicht erst verarbeiten.
+if (config_problems() !== []) {
+    error_log('[' . date('c') . "] {$route}: Formular abgewiesen, Konfiguration unvollständig (php bin/preflight.php).\n", 3, STORAGE_PATH . '/logs/mail.log');
+    $respond(false, 'mail');
+}
+
 // --- Spam-Checks: Bots bekommen ein stilles "OK" (kein Feedback-Kanal) ---
 if ($field('company_url') !== '') {
     log_spam($route, 'honeypot');
@@ -36,13 +44,7 @@ if (!form_token_valid($token)) {
     $respond(true);
 }
 
-// Rate-Limit pro IP (sichtbarer Hinweis statt still — legitime NAT-Nutzer nicht im Dunkeln lassen).
+// --- Eingaben ---
-if (!rate_limit_ok('submit|' . $route . '|' . client_ip(), 5, 600)) {
-    log_spam($route, 'ratelimit');
-    $respond(false, 'ratelimit');
-}
-
-// --- Validierung ---
 $name       = $field('name');
 $email      = $field('email');
 $phone      = $field('phone');
@@ -50,43 +52,86 @@ $eventType  = $field('event_type');
 $eventDate  = $field('event_date');
 $attendees  = $field('attendees');
 $message    = $field('message');
+$privacy    = ($_POST['privacy'] ?? '') === '1';
 
-$validTypes = ['', 'Geburtstagsfeier', 'Party', 'Vereinsveranstaltung', 'Weihnachtsfeier', 'Firmenveranstaltung', 'Sonstiges'];
+// Veranstaltungsarten aus derselben Quelle wie das Formular (data/sportheimbuchung.json).
+$validTypes = json_load('sportheimbuchung')['form']['event_types'] ?? [];
 
-$valid = $name !== '' && mb_strlen($name) <= 200
+// Wunschdatum: echter Kalendertag, nicht in der Vergangenheit, höchstens 3 Jahre voraus.
-    && filter_var($email, FILTER_VALIDATE_EMAIL) !== false
+$dateValid = false;
-    && mb_strlen($phone) <= 50
+if (preg_match('/^(\d{4})-(\d{2})-(\d{2})$/', $eventDate, $m) === 1) {
-    && in_array($eventType, $validTypes, true)
+    $dateValid = checkdate((int) $m[2], (int) $m[3], (int) $m[1])
-    && ($eventDate === '' || preg_match('/^\d{4}-\d{2}-\d{2}$/', $eventDate))
+        && $eventDate >= date('Y-m-d')
-    && ($attendees === '' || (ctype_digit($attendees) && (int) $attendees >= 1 && (int) $attendees <= 500))
+        && $eventDate <= date('Y-m-d', strtotime('+3 years'));
-    && mb_strlen($message) <= 3000
-    && ($_POST['privacy'] ?? '') === '1'
-    && !preg_match('/[\r\n]/', $name);
-
-if (!$valid) {
-    $respond(false, 'validation');
 }
 
-// --- Inhalts-/Aufkommens-Heuristiken (still abweisen, Bot-typisch) ---
+// --- Validierung (Whitelist-Prinzip, Fehler pro Feld) ---
+$errors = [];
+if ($name === '' || mb_strlen($name) > 200 || preg_match('/[\r\n]/', $name)) {
+    $errors['buch-name'] = 'Bitte gib deinen Namen an (max. 200 Zeichen).';
+}
+if (filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
+    $errors['buch-email'] = 'Bitte gib eine gültige E-Mail-Adresse an.';
+}
+if (mb_strlen($phone) > 50) {
+    $errors['buch-phone'] = 'Die Telefonnummer ist zu lang (max. 50 Zeichen).';
+}
+if ($eventType !== '' && !in_array($eventType, $validTypes, true)) {
+    $errors['buch-type'] = 'Bitte wähle eine der angebotenen Veranstaltungsarten.';
+}
+if (!$dateValid) {
+    $errors['buch-date'] = 'Bitte gib ein Wunschdatum an (heute oder später).';
+}
+if (!ctype_digit($attendees) || (int) $attendees < 1 || (int) $attendees > 500) {
+    $errors['buch-attendees'] = 'Bitte gib die ungefähre Personenzahl an (1 bis 500).';
+}
+if (mb_strlen($message) > 3000) {
+    $errors['buch-message'] = 'Der Text ist zu lang (max. 3000 Zeichen).';
+}
+if (!$privacy) {
+    $errors['buch-privacy'] = 'Ohne Zustimmung zum Datenschutz können wir die Anfrage nicht entgegennehmen.';
+}
+
+if ($errors !== []) {
+    if ($wantsJson) {
+        header('Content-Type: application/json; charset=utf-8');
+        echo json_encode(['ok' => false, 'error' => 'validation', 'fields' => $errors]);
+        exit;
+    }
+    // Ohne JS: Seite mit Eingaben und Feldfehlern neu rendern statt PRG (Werte bleiben erhalten).
+    render_form_invalid($route, [
+        'name' => $name, 'email' => $email, 'phone' => $phone, 'event_type' => $eventType,
+        'event_date' => $eventDate, 'attendees' => $attendees, 'message' => $message,
+        'privacy' => $privacy ? '1' : '',
+    ], $errors);
+}
+
+// --- Inhalts-Heuristik (still abweisen, Bot-typisch) ---
 if (preg_match_all('~https?://~i', $message) > 2) {
     log_spam($route, 'links');
     $respond(true);
 }
-// Globaler Tages-Cap als Brevo-Kosten-Backstop — die Flut soll ihn nicht bemerken.
+
-if (!rate_limit_ok('daily', 100, 86400)) {
+// --- Volumen-Grenzen: erst ab hier, damit Tippfehler kein Kontingent verbrauchen.
-    log_spam($route, 'daily-cap');
+// Sie antworten ehrlich — stilles "Danke" ohne Versand verschluckt echte Anfragen. ---
-    $respond(true);
+if (!rate_limit_ok('submit|' . $route . '|' . client_ip(), 5, 600)) {
+    log_spam($route, 'ratelimit');
+    $respond(false, 'ratelimit');
 }
-// Token-Mehrfachnutzung begrenzen (Replay-Schutz, großzügig für menschliches Mehrfach-Senden).
+// Token-Mehrfachnutzung begrenzen (Replay-Schutz). IP im Schlüssel, weil form_token()
-if (!rate_limit_ok('token|' . $token, 3, 86400)) {
+// sekundengenau ist: sonst teilen sich alle Besucher derselben Sekunde ein Kontingent.
+if (!rate_limit_ok('token|' . $token . '|' . client_ip(), 3, 86400)) {
     log_spam($route, 'replay');
-    $respond(true);
+    $respond(false, 'ratelimit');
+}
+// Globaler Tages-Cap über alle Formulare: schützt Postfach und Absender-Reputation.
+if (!rate_limit_ok('daily', 200, 86400)) {
+    log_spam($route, 'daily-cap');
+    $respond(false, 'busy');
 }
 
 // --- Versand ---
-$smtp = config('smtp');
+$dateFormatted = date('d.m.Y', (int) strtotime($eventDate));
-
-$dateFormatted = $eventDate !== '' ? date('d.m.Y', strtotime($eventDate)) : '–';
 
 $body = "Sportheimbuchung-Anfrage über tsv08kulmbach.de\n"
     . str_repeat('-', 40) . "\n"
@@ -95,33 +140,17 @@ $body = "Sportheimbuchung-Anfrage über tsv08kulmbach.de\n"
     . ($phone !== '' ? "Telefon:           {$phone}\n" : '')
     . ($eventType !== '' ? "Veranstaltungstyp: {$eventType}\n" : '')
     . "Gewünschtes Datum: {$dateFormatted}\n"
-    . ($attendees !== '' ? "Personenzahl:      {$attendees}\n" : '')
+    . "Personenzahl:      {$attendees}\n"
     . str_repeat('-', 40) . "\n\n"
     . ($message !== '' ? $message . "\n\n" : '')
     . str_repeat('-', 40) . "\n"
     . 'Datenschutz zugestimmt: ja (' . date('d.m.Y H:i') . ")\n";
 
-try {
+$sent = send_mail([
-    $mail = new PHPMailer(true);
+    'context'  => 'Sportheimbuchung',
-    $mail->isSMTP();
+    'subject'  => 'Sportheimbuchung: ' . ($eventType !== '' ? $eventType : 'Anfrage') . ', ' . $dateFormatted,
-    $mail->Host       = $smtp['host'];
+    'body'     => $body,
-    $mail->Port       = (int) $smtp['port'];
+    'reply_to' => ['email' => $email, 'name' => $name],
-    $mail->SMTPAuth   = true;
+]);
-    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
-    $mail->Username   = $smtp['username'];
-    $mail->Password   = $smtp['password'];
-    $mail->CharSet    = PHPMailer::CHARSET_UTF8;
 
-    $mail->setFrom($smtp['from'], $smtp['from_name']);
+$respond($sent, $sent ? '' : 'mail');
-    $mail->addAddress($smtp['to']);
-    $mail->addReplyTo($email, $name);
-    $mail->Subject = 'Sportheimbuchung: ' . ($eventType !== '' ? $eventType : 'Anfrage') . ', ' . $dateFormatted;
-    $mail->Body    = $body;
-
-    $mail->send();
-} catch (Throwable $e) {
-    error_log('[' . date('c') . '] Sportheimbuchung-Mailversand fehlgeschlagen: ' . $e->getMessage() . "\n", 3, STORAGE_PATH . '/logs/mail.log');
-    $respond(false, 'mail');
-}
-
-$respond(true);

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): ?>

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): ?>

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): ?>

public/assets/css/layout.css

@@ -30,14 +30,14 @@
 .site-header__inner {
     display: flex;
     align-items: center;
-    gap: 1.5rem;
+    gap: var(--space-l);
     min-height: var(--header-h);
 }
 
 .site-header__brand {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: var(--space-xs);
     text-decoration: none;
     color: var(--clr-text);
 }
@@ -60,7 +60,7 @@
 .site-header__actions {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2xs);
 }
 
 /* Header-CTAs haben eine eigene, kompakte Größe (kein generisches sm/lg-Preset):
@@ -84,7 +84,7 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 1.5rem;
+    gap: var(--space-l);
     font-size: var(--fs-500);
 }
 
@@ -162,11 +162,11 @@
     transform-origin: top center;
     z-index: 25;
     display: grid;
-    gap: 0.2rem;
+    gap: var(--space-3xs);
     min-width: 15rem;
     margin: 0;
     /* Gleichmäßiges Padding rundum — Pillen stehen oben/unten/seitlich gleich dezent frei. */
-    padding: 0.55rem;
+    padding: var(--space-2xs);
     list-style: none;
     /* Glasiges, leicht transluzentes Panel mit Tiefe über der Hintergrund-Textur. */
     background: rgb(20 20 20 / 0.96);
@@ -199,7 +199,7 @@
 .site-nav__list .site-nav__submenu a:not(.btn) {
     position: relative;
     display: block;
-    padding: 0.65rem 0.9rem 0.65rem 1rem;
+    padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-s);
     border-bottom: 0;
     border-radius: var(--radius-btn);
     font-size: var(--fs-500);
@@ -226,7 +226,7 @@
 .site-nav__list .site-nav__submenu a:not(.btn):hover,
 .site-nav__list .site-nav__submenu a:not(.btn):focus-visible {
     border-bottom: 0;
-    padding-left: 1.25rem;
+    padding-left: var(--space-m);
     background: rgb(var(--clr-accent-rgb) / 0.14);
 }
 
@@ -238,15 +238,15 @@
 
 .site-nav__list .site-nav__submenu a:not(.btn)[aria-current="page"] {
     border-bottom: 0;
-    padding-left: 1.25rem;
+    padding-left: var(--space-m);
     background: rgb(var(--clr-accent-rgb) / 0.2);
 }
 
 /* Letzter Dropdown-Punkt mit optischer Trennung (hairline oben + etwas Abstand) */
 .site-nav__submenu-sep {
     border-top: 1px solid var(--clr-glass-border);
-    margin-top: 0.35rem;
+    margin-top: var(--space-3xs);
-    padding-top: 0.35rem;
+    padding-top: var(--space-3xs);
 }
 
 @media (max-width: 1249px) {
@@ -349,7 +349,7 @@
        damit die Menüpunkte mit dem Logo fluchten. */
     .site-nav .site-nav__list {
         /* Oben: Header + Logo-Überhang (Logo ragt unter den Header) + Luft. */
-        padding: calc(var(--header-h) + 4rem) var(--container-pad) 3rem;
+        padding: calc(var(--header-h) + var(--space-5xl)) var(--container-pad) var(--space-4xl);
     }
 
     @supports (backdrop-filter: blur(1px)) {
@@ -378,7 +378,7 @@
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        padding: 1rem 0.25rem;
+        padding: var(--space-s) var(--space-3xs);
         border-bottom: 0;
         font-family: var(--ff-heading);
         font-size: var(--fs-650);
@@ -389,7 +389,7 @@
     .site-nav__sublink[data-current] {
         border-bottom: 0;
         box-shadow: inset 3px 0 0 var(--clr-accent);
-        padding-left: 1rem;
+        padding-left: var(--space-s);
     }
 
     /* Volle Breite + zentrierter Text: Items und Untermenüs zentrieren sich am
@@ -422,7 +422,7 @@
         overflow: hidden;
         opacity: 0;
         visibility: hidden;
-        gap: 0.25rem;
+        gap: var(--space-3xs);
         min-width: 0;
         justify-self: stretch;
         margin: 0;
@@ -449,7 +449,7 @@
     }
 
     .site-nav__list .site-nav__submenu > li:last-child {
-        padding-bottom: 0.75rem;
+        padding-bottom: var(--space-xs);
     }
 
     /* Unterpunkte in Abel, Groß-/Kleinschreibung — wie im Desktop-Dropdown
@@ -457,7 +457,7 @@
        den Hauptpunkten; die aktive Unterseite rückt per Desktop-Regel mit
        Akzentbalken + Tint leicht ein. */
     .site-nav__list .site-nav__submenu a:not(.btn) {
-        padding: 0.6rem 0.25rem;
+        padding: var(--space-2xs) var(--space-3xs);
         font-family: var(--ff-body);
         font-size: var(--fs-500);
         text-transform: none;
@@ -552,8 +552,8 @@
 .site-footer__grid {
     display: grid;
     grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
-    gap: 2.5rem 3rem;
+    gap: var(--space-3xl) var(--space-4xl);
-    padding-block: 4.5rem 3.5rem;
+    padding-block: var(--space-6xl) var(--space-5xl);
 }
 
 /* Brand-Block bleibt links stehen, Nav-Spalten rücken rechts daneben */
@@ -575,7 +575,7 @@
 @media (max-width: 500px) {
     .site-footer__grid {
         grid-template-columns: 1fr;
-        gap: 2.25rem;
+        gap: var(--space-3xl);
     }
 }
 
@@ -583,7 +583,7 @@
 .site-footer__brand {
     display: grid;
     justify-items: start;
-    gap: 1.25rem;
+    gap: var(--space-m);
 }
 
 .site-footer__claim {
@@ -593,14 +593,14 @@
 
 .site-footer__social {
     display: grid;
-    gap: 0.5rem;
+    gap: var(--space-2xs);
 }
 
 .site-footer__social a {
     display: inline-flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: var(--space-2xs);
-    padding-block: 0.3rem;
+    padding-block: var(--space-3xs);
     color: var(--clr-text-muted);
     text-decoration: none;
     transition: color var(--transition);
@@ -616,8 +616,8 @@
 .site-footer__heading {
     font-size: var(--fs-650);
     letter-spacing: 0.06em;
-    margin-bottom: 1.1rem;
+    margin-bottom: var(--space-s);
-    padding-bottom: 0.6rem;
+    padding-bottom: var(--space-2xs);
     position: relative;
 }
 
@@ -646,12 +646,12 @@
     font-style: normal;
     color: var(--clr-text-muted);
     display: grid;
-    gap: 1rem;
+    gap: var(--space-s);
 }
 
 .site-footer__address p {
     display: flex;
-    gap: 0.6rem;
+    gap: var(--space-2xs);
     margin: 0;
 }
 
@@ -663,13 +663,13 @@
 
 .site-footer__list {
     display: grid;
-    gap: 0.25rem;
+    gap: var(--space-3xs);
 }
 
 .site-footer__list a,
 .site-footer__address a {
     display: inline-block;
-    padding-block: 0.3rem;
+    padding-block: var(--space-3xs);
     color: var(--clr-text-muted);
     text-decoration: none;
     transition: color var(--transition);
@@ -686,8 +686,8 @@
 
 /* Zusatzlinks (Startseite, Mitglied werden) unter dem Kontakt-Block */
 .site-footer__list--extra {
-    margin-top: 1.25rem;
+    margin-top: var(--space-m);
-    padding-top: 1.25rem;
+    padding-top: var(--space-m);
     border-top: 1px solid var(--clr-glass-border);
 }
 
@@ -700,8 +700,8 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    gap: 0.5rem 2rem;
+    gap: var(--space-2xs) var(--space-2xl);
-    padding-block: 1.5rem;
+    padding-block: var(--space-l);
     font-size: var(--fs-400);
     color: var(--clr-text-muted);
 }
@@ -713,7 +713,7 @@
 .site-footer__legal {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.4rem 1.5rem;
+    gap: var(--space-2xs) var(--space-l);
     margin: 0;
     padding: 0;
     list-style: none;

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);
                 }
             })