Zum Inhalt
← Rezepte
Alle Rezepte

Freizeit und Erlebnis: Zeitfenster, Gruppe, Geburtstag

Freizeitanlage mit Zeitfenstern (Kletter- und Boulderhalle, Escape Room, Minigolf, Trampolinpark, Lasertag, Kartbahn, Bowling)

Verkauft werden Zeitfenster, keine Mitgliedschaft: Wann ist frei, was kostet es für Erwachsene, Kinder und Gruppen, wie läuft ein Kindergeburtstag, welche Regeln gelten. Der Hero ist ein Hallenfoto mit Leiste für Datum und Personen, der einzige große Knopf verformt sich beim Darüberfahren. Darunter Zeitfenster mit Auslastung nur aus echten Zahlen, Preise als Liste, Geburtstag und Firmenevent als Pakete, Regeln und Sicherheit lesbar, Gutscheine. Anybody kräftig und schmal für Überschriften, TikTok Sans für Text. Hallengrau, Dunkel und eine kräftige Griff-Farbe. Abgrenzung zu fitness-studio-rhythmus (Mitgliedschaft, Kursplan) und eventlocation-hochzeit (Raummiete).

Bauplan tokens.css Alle Techniken

Schrift

Zeitfenster, Gruppe, Geburtstag

Verkauft werden Zeitfenster, keine Mitgliedschaft: Wann ist frei, was kostet es für Erwachsene, Kinder und Gruppen, wie läuft ein Kindergeburtstag, welche Regeln gelten.

Headline
Anybody
Text
TikTok Sans

Farbe

  • #F4F3EF
  • #17161A
  • #E6E3DA
  • #19181D
  • #AE1650
  • #5B595F
  • #D3D0C7

Bewegung

cubic-bezier(0.34, 1.56, 0.64, 1)
Dauer
150 (Hover, Farbe), 400 (Zähler, Häkchen), 500 (Form des Signatur-Knopfs), 300 (Panel, Dialog öffnen), 200 (schließen)

Aufbau der Seite

SignaturForm-Morph-Buttons (Clip-Path)

HeroFoto-Hero mit Leiste, Karte oder Weiche · Buchungsleiste im Bild

  1. Zeitfenster und Auslastung (Datum und Personen aus der Leiste → freie Zeitfenster mit Plätzen als Zahl und Wort; Auslastung nur mit echten Zählwerten; Buchungssystem erst nach Klick, Telefon daneben)Wunschtermin mit freien Terminen und Anfrage-Übergabe · Zeitfenster statt UhrzeitTermin-Buchung per 2-Klick-Einbettung · PlatzhalterÖffnungszeiten mit Live-Status · AuslastungMengen-Stepper mit Einheit und Summe · Tickets
  2. Preise (Erwachsene, Kinder, Familie, Gruppe, Zehnerkarte, Leihausrüstung; Preise inkl. MwSt.; Ermäßigung mit Nachweis; Stand-Datum)Preisseite: Endpreise, Rechenweg, Vergleich · KurskarteSpeisekarte als Editorial · Salon-Preise
  3. Kindergeburtstag, Schulklassen und Firmenevents (je Paket Alter, Dauer, Gruppengröße, Preis, was enthalten ist, Betreuung; Einverständniserklärung als PDF; Anfrage mit Datum, Anzahl, Alter)Vergleichstabelle mit fester Kopfzeile · PaketvergleichKontakt- und Anfrageformular als eigene Sektion · Satz-Formular
  4. Dein erstes Mal (so läuft es ab: ankommen, Einweisung, losgehen; was mitbringen; Mindestalter und Aufsicht; Hallenregeln kurz, die Benutzungsordnung als eigene Seite)Prozess-/Timeline-Sektion mit wachsender LinieAkkordeon mit Höhenanimation auf auto · FAQ
  5. Was es hier gibt (Bereiche, Räume, Bahnen oder Rätsel als Kacheln mit Foto, Schwierigkeit und Dauer)Raster am Desktop, Wischreihe am Telefon · EinreihigBild-Zoom in der Maske · Richtungsabhängiger Clip
  6. Kurse und Events (Technikkurse, Turniere, Nachtöffnung; Einzeltermine mit Datum, Preis, Plätzen)Programm-Kalender mit Liste und Monat · Liste und Monat
  7. Veranstaltung-Detailseite (je Termin eine Seite, aufgerufen aus der Liste: Technikkurs, Turnier oder Nachtöffnung mit Datum, Alter, Niveau, Preis, Plätzen und Buchung; freie Plätze nur aus echter Quelle, Vergangenes mit Hinweis statt Fehlerseite)Veranstaltung: Detailseite mit Zuständen · TicketTeilen und In den Kalender · VeranstaltungFavicon-Satz und Teilbild je Seite · Teilbild je Seite
  8. Gutscheine (Wertgutschein oder Erlebnis; nur mit Zahlungsdienst und Codeverwaltung)Gutschein-Konfigurator
  9. Bewertungen (Google- oder Plattform-Bewertungen mit Schnitt, Anzahl, Stand und Echtheitshinweis direkt daneben)Plattform-Bewertungen mit Echtheitshinweis · Band unter dem Hero
  10. Café (nur, wenn es eins gibt: Karte mit Allergenen, Preise inkl. MwSt.)Speisekarte als Editorial · Bistro-Tafel
  11. Anfahrt und Öffnungszeiten (Ferien und Feiertage nach Bundesland, Parken, Bus und Bahn; Adresse als Text, Karte per 2-Klick)Öffnungszeiten mit Live-Status · KarteKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildFirmendaten aus einer Quelle · Friseursalon
  12. Vertrag kündigen und Barrierefreiheit (Kündigungsbutton nur bei Abos und Mitgliedschaften; Online-Tickets nach BFSG prüfen lassen)Widerrufs- und Kündigungs-Button · RichtigSeite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

Regeln
  • Erster Bildschirm: Hallenfoto, Leiste mit Datum und Personen, ein großer Knopf, ein Satz mit Angebot und Mindestalter. Mobil öffnet die Leiste als Dialog.
  • Signatur (clip-path-form-hover): nur der eine Knopf „Zeitfenster finden“ im Hero und der Abschluss-Knopf am Seitenende verformen sich bei Hover und Fokus (500 ms); nie in Formularen, nie mehrere nebeneinander. Auf Touch bleibt die Form, der Knopf reagiert mit Druck-Feedback.
  • Zeitfenster: freie Plätze als Zahl und Wort („noch 6 Plätze“, „ausgebucht“) aus dem Buchungssystem; Auslastung nur mit echten Zählwerten (oeffnungszeiten-status, Variante auslastung). Ohne Datenquelle keine Live-Anzeige.
  • Preise inkl. MwSt. mit Stand-Datum; Gruppen- und Geburtstagspakete mit Gesamtpreis und was enthalten ist; Leihausrüstung getrennt.
  • Regeln und Sicherheit lesbar statt versteckt: Mindestalter, Aufsicht, Einweisung, Einverständniserklärung für Minderjährige als PDF zum Ausfüllen; Haftungsregeln in der Benutzungsordnung vom Kunden prüfen lassen (Haftungsausschlüsse für Körperschäden sind in AGB unwirksam, § 309 Nr. 7 BGB).
  • Verträge: Tickets für einen festen Termin haben kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB), Gutscheine schon; Abos und Mitgliedschaften brauchen den Kündigungsbutton (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Vom Kunden prüfen lassen.
  • Kinder und Fotos: Fotos von Kindern nur mit Einwilligung der Sorgeberechtigten; Geburtstagsfotos nie ohne Freigabe veröffentlichen. Jugendschutz beim Ausschank im Café beachten.
  • Bewertungen von Plattformen nur mit Echtheitshinweis direkt daneben (bewertungsprofil-mit-echtheitshinweis).
  • Knöpfe: Griff-Magenta als Tiefen-Taste (tiefen-taste-3d, Variante stapel) für Buchen, Nebenwege als Kontur; nie zwei Tiefen-Tasten nebeneinander.
Bild und Ton
  • Licht: Hallenlicht, kräftige Farben der Anlage, Bewegung erlaubt.
  • Ausschnitt: Menschen mitten in der Aktion, Gruppen von hinten oder seitlich, Anlage in der Totale.
  • Personen: Ja, mit Einwilligung; Kinder nur mit Einwilligung der Sorgeberechtigten.
  • Formate: 16:9, 4:5, 1:1
  • Nicht: Keine Stockfotos jubelnder Kinder, keine Comic-Grafiken, keine Bilder, die Rätsel verraten.
  • Anrede: du (Familien und Gruppen), Sie für Firmen-Anfragen
  • Sätze: Kurz, aktiv, mit Zahl: Alter, Dauer, Preis, Uhrzeit.
  • Haltung: Fröhlich und klar, ohne Übertreibung.
  • Tonproben: Ab 5 Jahren. 90 Minuten Bouldern, danach Kuchen am Tisch., Samstag, 14:30 Uhr: noch 6 Plätze.
  • Nicht schreiben: „Mega-Spaß garantiert“, „das ultimative Erlebnis“, „nur heute“.
Hero, Raum und Form
  • Hero-Raster: Foto randlos über 12 Spalten, Satz über Spalte 1 bis 6 im oberen Drittel, Leiste über 1 bis 12 im unteren Drittel; mobil Foto oben, Leiste als Dialog.
  • Hero-Bild: Echtes Hallenfoto mit Menschen in Bewegung, 16:9 Desktop, 4:5 mobil.
  • Überschrift: clamp(2.75rem, 1.4rem + 6vw, 6.5rem), Anybody wdth 70, wght 850; kein Label darüber.
  • Handlung: In der Leiste Datum, Erwachsene, Kinder und der eine Knopf „Zeitfenster finden“ (Griff-Magenta, Signatur-Form); daneben Telefon.
  • Zusatz: Mindestalter und Öffnungszeit heute als Zeile unter der H1.
  • Sektionsabstand: clamp(64px, 8vw, 128px)
  • Dichte: mittel
  • Raum: Kräftig und klar: große Überschriften, Zeitfenster als Kacheln mit 12 px Spalt, Preise eng.
  • Spalten: 12
  • Maximale Breite: 1320px
  • Raster: Hero randlos mit Leiste im unteren Drittel. Zeitfenster als Raster mit 4 bis 6 Spalten, mobil 2. Pakete als Tabelle mit drei Spalten.
  • Radius klein: 8px
  • Radius groß: 20px
  • Schatten: nur die Tiefen-Taste (Kante in Dunkel)
  • Form: Kräftig gerundet wie Griffe und Matten; die Signatur-Form ist die einzige freie Silhouette.
Vorbilder