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,
+ * Sportheimbuchung — Hero → 4 Argumente → Bento (Fotos + Lage + CTA) → Formular → FAQ.
- * Konditionen) folgt; Kontaktweg über data/club.json (Single Source of Truth).
+ * 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',
+    'title'       => 'Sportheim mieten – TSV 08 Kulmbach',
-    'description' => 'Das Sportheim des TSV 1908 Kulmbach für Feiern und Veranstaltungen mieten – Ansprechpartner und Buchungsablauf.',
+    '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.',
-    'schema'      => page_schema([
+    'og_image'    => 'img/pages/sportheim-2.jpg',
+    'schema'      => page_schema(
+        [
             ['name' => 'Startseite',       'slug' => ''],
             ['name' => 'Der Verein',       'slug' => 'verein'],
-        ['name' => 'Sportheimbuchung', 'slug' => 'sportheimbuchung'],
+            ['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">
+                <ul class="sponsor-arguments__grid" role="list">
-                    <p class="legal__kicker">Der Verein</p>
+<?php foreach ($page['features']['items'] as $item): ?>
-                    <h1>Sportheim mieten &amp; buchen</h1>
+                    <li class="sponsor-arguments__item">
-                    <p class="legal__lead">Unser Sportheim auf der <?= e($club['address']['venue']) ?> lässt sich für Feiern und Veranstaltungen mieten.</p>
+                        <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>
+                    </li>
+<?php endforeach; ?>
+                </ul>
             </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>
+        <?php /* === bento: fotos + lage + cta === */ ?>
-                        <h2>Ansprechpartner</h2>
+        <section class="section section--tinted" id="lage" aria-label="Impressionen und Lage">
-                        <div class="legal__card">
+            <div class="container">
-                            <p>
+                <div class="sportheim-bento">
-                                <strong><?= e($club['name']) ?></strong><br>
+                    <div class="sportheim-bento__photo sportheim-bento__photo--main">
-                                E-Mail: <a href="mailto:<?= e($club['email']) ?>"><?= e($club['email']) ?></a>
+                        <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>
-                    </section>
                 </div>
             </div>
         </section>
+
+<?php
+component('sportheimbuchung-form', ['form' => $page['form']]);
+component('faq', ['faq' => $page['faq'] ?? []]);

data/sportheimbuchung.json

@@ -0,0 +1,68 @@
+{
+  "hero": {
+    "title": "Sportheim mieten",
+    "text": "Du planst eine Feier oder Veranstaltung in Kulmbach? Das Sportheim auf der Hans-Rausch-Sportanlage im Katzbachtal bietet die perfekte Kulisse – direkt am Fußballplatz, mit Küche, Außenbereich und allem, was ihr braucht.",
+    "compact": true,
+    "image": {
+      "src": "img/pages/sportheim-2.jpg",
+      "width": 1600,
+      "height": 1066,
+      "alt": "Das Sportheim des TSV 08 Kulmbach auf der Hans-Rausch-Sportanlage"
+    }
+  },
+  "features": {
+    "title": "Was euch erwartet",
+    "items": [
+      {
+        "icon": "house-fill",
+        "title": "Vollausgestattete Küche",
+        "text": "Die Küche steht für eure Veranstaltung zur Verfügung – ideal für Catering oder eigene Verpflegung."
+      },
+      {
+        "icon": "people-fill",
+        "title": "Ausreichend Platz",
+        "text": "Das Sportheim bietet ausreichend Sitzplätze für Geburtstage, Feiern und Vereinsveranstaltungen."
+      },
+      {
+        "icon": "projector-fill",
+        "title": "Beamer auf Anfrage",
+        "text": "Für Präsentationen, Filmabende oder Sport-Events steht ein Beamer optional zur Verfügung."
+      },
+      {
+        "icon": "tree-fill",
+        "title": "Außenbereich",
+        "text": "Der angrenzende Außenbereich lädt bei schönem Wetter zum Feiern unter freiem Himmel ein."
+      }
+    ]
+  },
+  "faq": [
+    {
+      "q": "Für welche Veranstaltungen eignet sich das Sportheim?",
+      "a": "Das Sportheim eignet sich für Geburtstagsfeiern, private Partys, Weihnachtsfeiern, Firmenfeiern und Vereinsveranstaltungen jeder Art. Einfach anfragen – wir finden gemeinsam die passende Lösung."
+    },
+    {
+      "q": "Wie läuft die Buchung ab?",
+      "a": "Schick uns deine Anfrage über das Formular auf dieser Seite. Wir melden uns kurzfristig mit Informationen zu Verfügbarkeit, Ausstattung und Konditionen. Nach Absprache vereinbaren wir einen Termin."
+    },
+    {
+      "q": "Wann ist das Sportheim verfügbar?",
+      "a": "Die Verfügbarkeit richtet sich nach dem Vereinskalender. Am besten fragst du frühzeitig an – besonders Wochenenden im Frühjahr und Herbst sind beliebt."
+    },
+    {
+      "q": "Gibt es Parkplätze vor Ort?",
+      "a": "Ja, auf der Hans-Rausch-Sportanlage (Thurnauer Str. 51, Kulmbach) stehen Parkplätze zur Verfügung."
+    }
+  ],
+  "form": {
+    "title": "Jetzt anfragen",
+    "text": "Schick uns deine Anfrage – wir melden uns kurzfristig mit Verfügbarkeit und Konditionen.",
+    "event_types": [
+      "Geburtstagsfeier",
+      "Party",
+      "Vereinsveranstaltung",
+      "Weihnachtsfeier",
+      "Firmenveranstaltung",
+      "Sonstiges"
+    ]
+  }
+}

public/assets/css/components.css

@@ -3553,3 +3553,143 @@
     gap: 0.75rem;
     margin-top: 1.5rem;
 }
+
+/* === sportheim === */
+
+/* Bento: großes Foto links (2 Spalten × 2 Zeilen),
+   kleines Foto + roter CTA oben rechts, Karte + Adresse unten rechts */
+.sportheim-bento {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-rows: 220px;
+    gap: 1.25rem;
+    grid-template-areas:
+        "p1 p1 p2  cta"
+        "p1 p1 map adr";
+}
+
+/* --- Foto-Kacheln --- */
+.sportheim-bento__photo {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-card);
+}
+
+.sportheim-bento__photo img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 600ms ease;
+}
+
+.sportheim-bento__photo:hover img {
+    transform: scale(1.04);
+}
+
+.sportheim-bento__photo--main { grid-area: p1; }
+.sportheim-bento__photo--sec  { grid-area: p2; }
+
+/* --- Karten-Kachel --- */
+.sportheim-bento__map {
+    grid-area: map;
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-card);
+}
+
+.sportheim-bento__map img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+/* --- Adress-Kachel --- */
+.sportheim-bento__addr {
+    grid-area: adr;
+    background: var(--clr-glass-bg);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: var(--radius-card);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    font-style: normal;
+}
+
+.sportheim-bento__addr-label {
+    font-size: var(--fs-300);
+    font-weight: var(--fw-bold);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--clr-text-muted);
+    margin: 0 0 0.625rem;
+}
+
+.sportheim-bento__addr-text {
+    font-size: var(--fs-500);
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* --- CTA-Kachel (rot, volle Höhe) --- */
+.sportheim-bento__cta {
+    grid-area: cta;
+    background: var(--clr-accent);
+    border-radius: var(--radius-card);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 1.5rem;
+    text-align: center;
+    padding: 2rem 1.25rem;
+}
+
+.sportheim-bento__cta-title {
+    font-family: var(--ff-heading);
+    font-size: var(--fs-650);
+    text-transform: uppercase;
+    line-height: var(--lh-heading);
+    color: #fff;
+    margin: 0;
+}
+
+/* Tablet: 2-spaltig, Foto groß oben, darunter Kleinzeug */
+@media (max-width: 900px) {
+    .sportheim-bento {
+        grid-template-columns: repeat(2, 1fr);
+        grid-auto-rows: 200px;
+        grid-template-areas:
+            "p1  p1"
+            "p1  p1"
+            "p2  cta"
+            "map adr";
+    }
+}
+
+/* Mobile: alles gestapelt */
+@media (max-width: 500px) {
+    .sportheim-bento {
+        grid-template-columns: 1fr;
+        grid-auto-rows: 220px;
+        grid-template-areas:
+            "p1"
+            "p2"
+            "map"
+            "cta"
+            "adr";
+    }
+
+    .sportheim-bento__addr,
+    .sportheim-bento__cta {
+        grid-row: auto;
+        height: auto;
+        min-height: 140px;
+    }
+}

public/assets/icons/house-fill.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z"/>
+  <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z"/></svg>

public/assets/icons/projector-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M2 4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1h6a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm.5 2h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1M14 7.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m-12 1a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5"/></svg>

public/assets/icons/tree-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.416.223a.5.5 0 0 0-.832 0l-3 4.5A.5.5 0 0 0 5 5.5h.098L3.076 8.735A.5.5 0 0 0 3.5 9.5h.191l-1.638 3.276a.5.5 0 0 0 .447.724H7V16h2v-2.5h4.5a.5.5 0 0 0 .447-.724L12.31 9.5h.191a.5.5 0 0 0 .424-.765L10.902 5.5H11a.5.5 0 0 0 .416-.777z"/></svg>

public/index.php

@@ -32,6 +32,10 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && $slug === 'mitglied-werden-senden')
     require APP_PATH . '/actions/membership-submit.php';
     exit;
 }
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && $slug === 'sportheimbuchung-senden') {
+    require APP_PATH . '/actions/sportheimbuchung-senden.php';
+    exit;
+}
 
 $routes = require APP_PATH . '/routes.php';