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/actions/sportheimbuchung-senden.php
+++ b/app/actions/sportheimbuchung-senden.php
@@ -3,12 +3,13 @@
 declare(strict_types=1);

 /**
- * POST /sportheimbuchung-senden — Sportheim-Buchungsanfrage validieren und via Brevo SMTP versenden.
- * Antwort: PRG-Redirect zu /sportheimbuchung#buchung (?sent=1 | ?error=…).
+ * POST /sportheimbuchung-senden — Sportheim-Buchungsanfrage validieren und über
+ * 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).
-if (!rate_limit_ok('submit|' . $route . '|' . client_ip(), 5, 600)) {
-    log_spam($route, 'ratelimit');
-    $respond(false, 'ratelimit');
-}
-
-// --- Validierung ---
+// --- Eingaben ---
 $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
-    && filter_var($email, FILTER_VALIDATE_EMAIL) !== false
-    && mb_strlen($phone) <= 50
-    && in_array($eventType, $validTypes, true)
-    && ($eventDate === '' || preg_match('/^\d{4}-\d{2}-\d{2}$/', $eventDate))
-    && ($attendees === '' || (ctype_digit($attendees) && (int) $attendees >= 1 && (int) $attendees <= 500))
-    && mb_strlen($message) <= 3000
-    && ($_POST['privacy'] ?? '') === '1'
-    && !preg_match('/[\r\n]/', $name);
-
-if (!$valid) {
-    $respond(false, 'validation');
+// Wunschdatum: echter Kalendertag, nicht in der Vergangenheit, höchstens 3 Jahre voraus.
+$dateValid = false;
+if (preg_match('/^(\d{4})-(\d{2})-(\d{2})$/', $eventDate, $m) === 1) {
+    $dateValid = checkdate((int) $m[2], (int) $m[3], (int) $m[1])
+        && $eventDate >= date('Y-m-d')
+        && $eventDate <= date('Y-m-d', strtotime('+3 years'));
 }

-// --- 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)) {
-    log_spam($route, 'daily-cap');
-    $respond(true);
+
+// --- Volumen-Grenzen: erst ab hier, damit Tippfehler kein Kontingent verbrauchen.
+// Sie antworten ehrlich — stilles "Danke" ohne Versand verschluckt echte Anfragen. ---
+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).
-if (!rate_limit_ok('token|' . $token, 3, 86400)) {
+// Token-Mehrfachnutzung begrenzen (Replay-Schutz). IP im Schlüssel, weil form_token()
+// 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 = $eventDate !== '' ? date('d.m.Y', strtotime($eventDate)) : '–';
+$dateFormatted = date('d.m.Y', (int) 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 {
-    $mail = new PHPMailer(true);
-    $mail->isSMTP();
-    $mail->Host       = $smtp['host'];
-    $mail->Port       = (int) $smtp['port'];
-    $mail->SMTPAuth   = true;
-    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
-    $mail->Username   = $smtp['username'];
-    $mail->Password   = $smtp['password'];
-    $mail->CharSet    = PHPMailer::CHARSET_UTF8;
+$sent = send_mail([
+    'context'  => 'Sportheimbuchung',
+    'subject'  => 'Sportheimbuchung: ' . ($eventType !== '' ? $eventType : 'Anfrage') . ', ' . $dateFormatted,
+    'body'     => $body,
+    'reply_to' => ['email' => $email, 'name' => $name],
+]);

-    $mail->setFrom($smtp['from'], $smtp['from_name']);
-    $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);
+$respond($sent, $sent ? '' : 'mail');
--- 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): ?>
--- a/public/assets/css/components.css
+++ b/public/assets/css/components.css
--- a/public/assets/css/layout.css
+++ b/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;
-    padding-top: 0.35rem;
+    margin-top: var(--space-3xs);
+    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;
-    padding-block: 4.5rem 3.5rem;
+    gap: var(--space-3xl) var(--space-4xl);
+    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;
-    padding-block: 0.3rem;
+    gap: var(--space-2xs);
+    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;
-    padding-bottom: 0.6rem;
+    margin-bottom: var(--space-s);
+    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;
-    padding-top: 1.25rem;
+    margin-top: var(--space-m);
+    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;
-    padding-block: 1.5rem;
+    gap: var(--space-2xs) var(--space-2xl);
+    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;
--- a/public/assets/js/form.js
+++ b/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);
                }
            })