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

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>