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
2026-06-20 20:46:44 +02:00
parent e7801ca6ee
commit 6a612e52c3
13 changed files with 503 additions and 31 deletions
--- a/public/assets/css/components.css
+++ b/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;
+    }
+}