Sportheim mieten: Buchungsseite mit Anfrageformular

Neue Seite /sportheimbuchung mit Bento-Layout (Fotos, Lage, Ausstattung) und
einem Buchungsanfrage-Formular nach Projektkonvention (form-field-Komponente,
Status-Region, Honeypot + ft-Token, Whitelist-Validierung, Rate-Limiting, PRG).
Versand via Brevo SMTP über app/actions/sportheimbuchung-senden.php, POST-Route
in index.php. form-field um min/max-Attribute erweitert (Personenzahl-Feld).

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

app/actions/sportheimbuchung-senden.php

@@ -0,0 +1,127 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * POST /sportheimbuchung-senden — Sportheim-Buchungsanfrage validieren und via Brevo SMTP versenden.
+ * Antwort: PRG-Redirect zu /sportheimbuchung#buchung (?sent=1 | ?error=…).
+ */
+
+use PHPMailer\PHPMailer\PHPMailer;
+
+$wantsJson = str_contains($_SERVER['HTTP_ACCEPT'] ?? '', 'application/json');
+
+$respond = static function (bool $ok, string $error = '') use ($wantsJson): never {
+    if ($wantsJson) {
+        header('Content-Type: application/json; charset=utf-8');
+        echo json_encode(['ok' => $ok, 'error' => $error ?: null]);
+    } else {
+        header('Location: ' . url('sportheimbuchung') . ($ok ? '?sent=1' : '?error=' . $error) . '#buchung', true, 303);
+    }
+    exit;
+};
+
+$field = static fn (string $key): string => trim((string) ($_POST[$key] ?? ''));
+
+$route = 'sportheimbuchung';
+$token = $field('ft');
+
+// --- Spam-Checks: Bots bekommen ein stilles "OK" (kein Feedback-Kanal) ---
+if ($field('company_url') !== '') {
+    log_spam($route, 'honeypot');
+    $respond(true);
+}
+if (!form_token_valid($token)) {
+    log_spam($route, '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 ---
+$name       = $field('name');
+$email      = $field('email');
+$phone      = $field('phone');
+$eventType  = $field('event_type');
+$eventDate  = $field('event_date');
+$attendees  = $field('attendees');
+$message    = $field('message');
+
+$validTypes = ['', 'Geburtstagsfeier', 'Party', 'Vereinsveranstaltung', 'Weihnachtsfeier', 'Firmenveranstaltung', 'Sonstiges'];
+
+$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');
+}
+
+// --- Inhalts-/Aufkommens-Heuristiken (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);
+}
+// Token-Mehrfachnutzung begrenzen (Replay-Schutz, großzügig für menschliches Mehrfach-Senden).
+if (!rate_limit_ok('token|' . $token, 3, 86400)) {
+    log_spam($route, 'replay');
+    $respond(true);
+}
+
+// --- Versand ---
+$smtp = config('smtp');
+
+$dateFormatted = $eventDate !== '' ? date('d.m.Y', strtotime($eventDate)) : '–';
+
+$body = "Sportheimbuchung-Anfrage über tsv08kulmbach.de\n"
+    . str_repeat('-', 40) . "\n"
+    . "Name:              {$name}\n"
+    . "E-Mail:            {$email}\n"
+    . ($phone !== '' ? "Telefon:           {$phone}\n" : '')
+    . ($eventType !== '' ? "Veranstaltungstyp: {$eventType}\n" : '')
+    . "Gewünschtes Datum: {$dateFormatted}\n"
+    . ($attendees !== '' ? "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;
+
+    $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);

app/components/form-field.php

@@ -35,7 +35,9 @@ $commonAttrs = 'name="' . e($name) . '" id="' . e($id) . '"'
     . ($required ? ' required' : '')
     . ' aria-describedby="' . e($describedBy) . '"'
     . (!empty($field['autocomplete']) ? ' autocomplete="' . e($field['autocomplete']) . '"' : '')
-    . (!empty($field['maxlength']) ? ' maxlength="' . e($field['maxlength']) . '"' : '');
+    . (!empty($field['maxlength']) ? ' maxlength="' . e($field['maxlength']) . '"' : '')
+    . (isset($field['min']) ? ' min="' . e((string) $field['min']) . '"' : '')
+    . (isset($field['max']) ? ' max="' . e((string) $field['max']) . '"' : '');
 ?>
 <?php if ($type === 'checkbox'): ?>
                     <div class="form__field form__field--checkbox">

app/components/sportheimbuchung-form.php

@@ -0,0 +1,86 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Sportheim-Buchungsanfrage-Formular. Props:
+ *   $form  array{title, text, event_types: string[]}
+ * PRG-Flash via ?sent=1 / ?error=validation / ?error=mail.
+ * Felder ausschließlich über component('form-field').
+ */
+$club = json_load('club');
+
+$sent  = isset($_GET['sent']);
+$error = isset($_GET['error']) ? (string) $_GET['error'] : null;
+$errorMessages = [
+    'validation' => 'Bitte prüfe deine Eingaben – Pflichtfelder fehlen oder die E-Mail-Adresse ist ungültig.',
+    'ratelimit'  => 'Zu viele Anfragen in kurzer Zeit. Bitte versuche es in ein paar Minuten erneut.',
+    'mail'       => 'Deine Anfrage konnte gerade nicht gesendet werden. Bitte versuche es später erneut oder schreib uns direkt an ' . $club['email'] . '.',
+];
+
+$today = date('Y-m-d');
+
+$f = [
+    'name'       => ['type' => 'text',     'name' => 'name',       'id' => 'buch-name',      'label' => 'Name',                 'required' => true,  'autocomplete' => 'name', 'maxlength' => 200],
+    'email'      => ['type' => 'email',    'name' => 'email',      'id' => 'buch-email',     'label' => 'E-Mail',               'required' => true,  'autocomplete' => 'email', 'maxlength' => 200],
+    'phone'      => ['type' => 'tel',      'name' => 'phone',      'id' => 'buch-phone',     'label' => 'Telefonnummer',        'autocomplete' => 'tel', 'maxlength' => 50],
+    'event_type' => ['type' => 'select',   'name' => 'event_type', 'id' => 'buch-type',      'label' => 'Art der Veranstaltung','options' => $form['event_types']],
+    'event_date' => ['type' => 'date',     'name' => 'event_date', 'id' => 'buch-date',      'label' => 'Gewünschtes Datum',    'required' => true, 'min' => $today, 'hint' => 'Frühestmögliches Buchungsdatum'],
+    'attendees'  => ['type' => 'number',   'name' => 'attendees',  'id' => 'buch-attendees', 'label' => 'Ungefähre Personenzahl','required' => true, 'min' => '1', 'max' => '500'],
+    'message'    => ['type' => 'textarea', 'name' => 'message',    'id' => 'buch-message',   'label' => 'Weitere Wünsche oder Fragen', 'rows' => 5, 'maxlength' => 3000],
+    'privacy'    => [
+        'type' => 'checkbox', 'name' => 'privacy', 'id' => 'buch-privacy', 'required' => true,
+        'label'      => 'Ich stimme den Datenschutzbestimmungen zu.',
+        'label_html' => 'Ich stimme den <a href="' . e(url('datenschutz')) . '">Datenschutzbestimmungen</a> zu.',
+    ],
+];
+?>
+        <section class="section" id="buchung">
+            <div class="container contact__inner">
+                <div class="contact__intro">
+                    <h2><?= e($form['title']) ?></h2>
+                    <p><?= e($form['text']) ?></p>
+                    <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 if ($sent): ?>
+                        <p class="form__success">Danke für deine Anfrage! Wir melden uns kurzfristig bei dir.</p>
+<?php elseif ($error !== null): ?>
+                        <p class="form__error"><?= e($errorMessages[$error] ?? $errorMessages['mail']) ?></p>
+<?php endif; ?>
+                    </div>
+
+                    <p class="form__note">Pflichtfelder sind mit <span class="form__required" aria-hidden="true">*</span><span class="visually-hidden">Stern</span> markiert.</p>
+
+                    <div class="form__row">
+<?php component('form-field', ['field' => $f['name']]); ?>
+<?php component('form-field', ['field' => $f['email']]); ?>
+                    </div>
+
+                    <div class="form__row">
+<?php component('form-field', ['field' => $f['phone']]); ?>
+<?php component('form-field', ['field' => $f['event_type']]); ?>
+                    </div>
+
+                    <div class="form__row">
+<?php component('form-field', ['field' => $f['event_date']]); ?>
+<?php component('form-field', ['field' => $f['attendees']]); ?>
+                    </div>
+
+<?php component('form-field', ['field' => $f['message']]); ?>
+<?php component('form-field', ['field' => $f['privacy']]); ?>
+
+                    <?php /* Honeypot */ ?>
+                    <div class="visually-hidden" aria-hidden="true">
+                        <label for="buch-company-url">Bitte dieses Feld leer lassen</label>
+                        <input type="text" id="buch-company-url" name="company_url" tabindex="-1" autocomplete="off">
+                    </div>
+                    <input type="hidden" name="ft" value="<?= e(form_token()) ?>">
+
+                    <p class="form__submit">
+                        <button class="btn" type="submit">Anfrage senden</button>
+                    </p>
+                </form>
+            </div>
+        </section>

app/pages/sportheimbuchung.php

@@ -3,44 +3,85 @@
 declare(strict_types=1);
 
 /**
- * Sportheimbuchung — Platzhalter/Stub. Inhalt (Verfügbarkeiten, Buchungsablauf,
- * Konditionen) folgt; Kontaktweg über data/club.json (Single Source of Truth).
+ * Sportheimbuchung — Hero → 4 Argumente → Bento (Fotos + Lage + CTA) → Formular → FAQ.
+ * Inhalte: data/sportheimbuchung.json. Adresse: data/club.json (Single Source of Truth).
  */
+$page = json_load('sportheimbuchung');
 $club = json_load('club');
 
 $meta = [
-    'title'       => 'Sportheim mieten & buchen',
-    'description' => 'Das Sportheim des TSV 1908 Kulmbach für Feiern und Veranstaltungen mieten – Ansprechpartner und Buchungsablauf.',
-    'schema'      => page_schema([
-        ['name' => 'Startseite', 'slug' => ''],
-        ['name' => 'Der Verein', 'slug' => 'verein'],
-        ['name' => 'Sportheimbuchung', 'slug' => 'sportheimbuchung'],
-    ]),
+    'title'       => 'Sportheim mieten – TSV 08 Kulmbach',
+    'description' => 'Das Sportheim auf der Hans-Rausch-Sportanlage in Kulmbach für Feiern und Veranstaltungen mieten – Küche, Außenbereich und Beamer optional. Jetzt unverbindlich anfragen.',
+    'og_image'    => 'img/pages/sportheim-2.jpg',
+    'schema'      => page_schema(
+        [
+            ['name' => 'Startseite',       'slug' => ''],
+            ['name' => 'Der Verein',       'slug' => 'verein'],
+            ['name' => 'Sportheim mieten', 'slug' => 'sportheimbuchung'],
+        ],
+        $page['faq'] ?? []
+    ),
 ];
+
+$addr = $club['address'];
+
+component('hero', ['hero' => $page['hero']]);
 ?>
-        <section class="section legal">
+        <?php /* === argumente === */ ?>
+        <section class="section sponsor-arguments" id="ausstattung">
             <div class="container">
-                <div class="legal__head">
-                    <p class="legal__kicker">Der Verein</p>
-                    <h1>Sportheim mieten &amp; buchen</h1>
-                    <p class="legal__lead">Unser Sportheim auf der <?= e($club['address']['venue']) ?> lässt sich für Feiern und Veranstaltungen mieten.</p>
-                </div>
-
-                <div class="legal__body">
-                    <section>
-                        <h2>Buchung &amp; Verfügbarkeit</h2>
-                        <p>Die Online-Buchung mit Belegungskalender und Konditionen befindet sich gerade in Vorbereitung. Bis dahin nimm bitte direkt Kontakt mit uns auf – wir klären Termin, Ausstattung und Preise unkompliziert mit dir.</p>
-                    </section>
-
-                    <section>
-                        <h2>Ansprechpartner</h2>
-                        <div class="legal__card">
-                            <p>
-                                <strong><?= e($club['name']) ?></strong><br>
-                                E-Mail: <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a>
-                            </p>
+                <ul class="sponsor-arguments__grid" role="list">
+<?php foreach ($page['features']['items'] as $item): ?>
+                    <li class="sponsor-arguments__item">
+                        <div class="sponsor-arguments__icon" aria-hidden="true"><?= icon($item['icon']) ?></div>
+                        <div class="sponsor-arguments__body">
+                            <h3 class="sponsor-arguments__title"><?= e($item['title']) ?></h3>
+                            <p class="sponsor-arguments__text"><?= e($item['text']) ?></p>
                         </div>
-                    </section>
+                    </li>
+<?php endforeach; ?>
+                </ul>
+            </div>
+        </section>
+
+        <?php /* === bento: fotos + lage + cta === */ ?>
+        <section class="section section--tinted" id="lage" aria-label="Impressionen und Lage">
+            <div class="container">
+                <div class="sportheim-bento">
+                    <div class="sportheim-bento__photo sportheim-bento__photo--main">
+                        <img src="<?= e(asset('img/pages/sportheim-1.jpg')) ?>"
+                             alt="Innenansicht des Veranstaltungsraums im Sportheim"
+                             width="1600" height="1066"
+                             loading="lazy" decoding="async">
+                    </div>
+                    <div class="sportheim-bento__photo sportheim-bento__photo--sec">
+                        <img src="<?= e(asset('img/pages/sportheim-2.jpg')) ?>"
+                             alt="Das Sportheim auf der Hans-Rausch-Sportanlage"
+                             width="1600" height="1066"
+                             loading="lazy" decoding="async">
+                    </div>
+                    <div class="sportheim-bento__map">
+                        <img src="<?= e(asset('img/pages/verein-1000.jpg')) ?>"
+                             alt="Luftaufnahme der Hans-Rausch-Sportanlage mit Sportheim, Rasenplatz und Turnhalle"
+                             width="1000" height="667"
+                             loading="lazy" decoding="async">
+                    </div>
+                    <address class="sportheim-bento__addr">
+                        <p class="sportheim-bento__addr-label">Lage &amp; Adresse</p>
+                        <p class="sportheim-bento__addr-text">
+                            <strong><?= e($addr['venue']) ?></strong><br>
+                            <?= e($addr['street']) ?><br>
+                            <?= e($addr['zip']) ?> <?= e($addr['city']) ?>
+                        </p>
+                    </address>
+                    <div class="sportheim-bento__cta">
+                        <p class="sportheim-bento__cta-title">Jetzt anfragen</p>
+                        <a class="btn btn--outline" href="#buchung">Anfrage senden</a>
+                    </div>
                 </div>
             </div>
         </section>
+
+<?php
+component('sportheimbuchung-form', ['form' => $page['form']]);
+component('faq', ['faq' => $page['faq'] ?? []]);