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