# Bauplan: Eventlocation: ein Tag, der in die Nacht geht

Rezept `eventlocation-hochzeit` · Eventlocation / Hochzeitslocation / Gutshof / Tagungsort (auch Eventcatering) · Stimmung: festlich, emotional, großzügig, klar · Stand 02.11.2026

Verkauft wird ein Tag, nicht eine Nacht: Wunschdatum, Anlass und Gästezahl stehen direkt unter dem Hero, freie Termine sind ehrlich sichtbar, Räume haben Kapazitäten je Bestuhlung, Pakete einen ab-Preis mit Bezug. Festlich über Licht, Raum und Typografie statt über Herzen und Glitzer: eine schmale Art-déco-Didone für große Wörter und Daten, eine breitenvariable Grotesk für Tabellen und Formulare, Mohnrot als einziger Signalton. Signatur: Die Seite färbt sich im Kapitel „Ein Tag bei uns“ vom Kalklicht des Mittags über das Sandsteinlicht des Abends bis in die Nacht. Abgrenzung zu boutique-hotel-gastgeber: kein Zeitraum-Kalender, keine Zimmer zuerst, keine Bild-Diashow als Signatur; Übernachtung ist Beiwerk zum Fest.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `eventlocation-hochzeit`) und https://cecodesign.de/lab/fundus/rezepte/eventlocation-hochzeit/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `imbue` · Text: `archivo`
- Größen: h1 Imbue clamp(3rem, 1.6rem + 6vw, 7.5rem), wght 300, opsz 100, Laufweite -0.01em, Zeilenhöhe 0.95, gemischt gesetzt; Raumnamen, Kapitel und große Daten („Samstag, 12. Juni“) in Imbue ab 2rem, wght 400, opsz an die Größe gekoppelt; nie unter 2rem. Text Archivo wdth 100, wght 400, 1.0625rem (17 px), Zeilenhöhe 1.6, höchstens 64ch; Tabellen und Kalender Archivo wdth 87, Tabellenziffern; Labels und Rubriken Archivo wdth 112, wght 600, 0.8125rem, Versal, +0.08em; Knöpfe Archivo wdth 100, wght 600, 1rem.
- Techniken: [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`

## Farbe

Drei Lichtstimmungen statt einer Markenfläche: Kalk für den Tag (Grund der ganzen Seite), Sandstein für den Abend, Nachtblau für die Nacht. Im Kapitel „Ein Tag bei uns“ färbt sich die Seite an den Kapitelgrenzen um; Räume, Preise, Kalender und Anfrage stehen immer auf Kalk. Mohnrot ist der einzige Signalton (Anfragen, Datum wählen, freie Termine) und funktioniert auf allen drei Gründen. Messing nur als Doppelkontur der Nebenknöpfe und als Linie. Kein Rosé, kein Glitzer-Gold, keine Verläufe, keine Bokeh-Flächen.

- `--farbe-grund` #F5F0E6 (Grund Kalk (Tag))
- `--farbe-text` #1D1A17 (Text auf Kalk (15 : 1) und auf Sandstein (12,8 : 1))
- `--farbe-sandstein` #E9DCC8 (Sandstein (Abend-Kapitel, Flächen, Tabellenkopf))
- `--farbe-nachtblau` #15171F (Nachtblau (Nacht-Kapitel, Footer); Text #F2ECE2 (15 : 1))
- `--farbe-signal` #C43B2B (Signal Mohnrot: Anfragen, Datum wählen, frei (Weiß darauf 5,2 : 1; als Fläche auf Kalk 4,6 : 1, auf Sandstein 3,9 : 1, auf Nachtblau 3,4 : 1))
- `--farbe-linie` #8C6A3C (Messing: Doppelkontur und Linien auf Kalk (4,4 : 1); auf Nachtblau #C9A66B (7,8 : 1))
- `--farbe-text-2` #5C574E (Sekundärtext, Bildnachweis (6,3 : 1 auf Kalk))
- `--farbe-linie-2` #D8CFC0 (Linien auf Kalk)

## Bewegung

- Animationsstil: [Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)](https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/demo) `token-studio-signatur`
- Kurve: cubic-bezier(0.625, 0.05, 0, 1) (token-studio-signatur, für alles)
- Dauer: 250 (Farben, Schatten, Hover), 400 (Deckkraft, Unterstreichung, Kalenderzelle), 475 (Knopf-Füllung), 525 (Akkordeon, Reiter-Inhalt), 725 (Menü, Galerie-Vollbild, Farbwechsel der Kapitel); Fokus ohne Übergang
- Regel: Bewegt wird, was den Zustand wechselt: Kapitel färbt sich um, Kalender springt einen Monat weiter, Raum wechselt, Menü öffnet. Keine Einblendungen beim Scrollen, kein Autoplay, keine Diashow. Der Farbwechsel kommt an der Kapitelgrenze in 725 ms, der Text schaltet am Kipppunkt statt mitzumischen. Bei prefers-reduced-motion wechseln Farben in 200 ms, alles andere ohne Weg.
- Hinweis: Eine eigene Kurve für die ganze Seite, wie eine Hausfarbe: langsamer Anlauf, langer, weicher Ausklang. Sie gilt für Menü, Kalender, Reiter, Galerie und den Farbwechsel (725 ms). Der Stil taugt laut wann_nicht nicht für lange Scroll-Einblendungen; die Seite hat deshalb keine Reveals beim Scrollen, sondern nur Zustandswechsel. Kein eigener animationsstil_ui nötig, weil der Stil als UI-Standard gebaut ist; Fokus ohne Übergang.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 56, 88, 136, 200
- Sektionsabstand: clamp(88px, 12vw, 192px)
- Dichte: luftig
- Hinweis: Festlich über Raum: große Sprünge zwischen Kapiteln, Raumtabellen und Kalender dagegen kompakt (Zeilen 12 px).
- Spalten: 12
- Seitenrand: clamp(20px, 5vw, 72px)
- Spaltenabstand: clamp(16px, 2.4vw, 32px)
- Maximale Breite: 1440px
- Raster: Hero randlos, Räume 7/5 (Bild/Tabelle). „Ein Tag bei uns“ in drei bis vier Kapiteln über volle Breite; Räume, Preise, Kalender und Anfrage immer auf Kalk.
- Radius klein: 2px
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 1px #8C6A3C als Messing-Doppelkontur der Nebenwege; Tabellen 1px #D8CFC0
- Schatten: keiner
- Form: Art déco statt weich: eckige Bilder, Nebenwege mit versetzter Messing-Kontur (kontur-button-zeichnen, Variante doppel), Mohnrot mit Füllung vom Eintrittspunkt nur für die Haupthandlung.

## Bildsprache

- Licht: Spätes Licht, goldene Stunde; am Abend echtes Kerzen- und Lichterkettenlicht.
- Ausschnitt: Raum leer und gedeckt, Hof in der Totale, Details wie Tafel und Blumen.
- Personen: Gäste und Paare nur mit Einwilligung, nicht als Gesicht im Mittelpunkt; Fotograf:in am Bild genannt.
- Formate: 3:2, 4:5, 16:9
- Nicht: Keine Herzen, kein Glitzer, keine Ringe-Stockfotos, keine Bilder anderer Häuser, kein Video ohne eigenes Material.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: du
- Sätze: Warm und konkret: Plätze, Preise mit Bezug, freie Termine als Wort.
- Haltung: Festlich, aber klar. Paare im Plural (ihr, euch); auf der Unterseite für Tagungen und Firmenfeiern Sie.
- Tonproben: Euer Fest im Gutshof: bis 120 Gäste, Trauung im Garten., Freitag, 3. Oktober: angefragt, Option bis [Datum].
- Nicht: „Der schönste Tag eures Lebens“, „Traumhochzeit“, „märchenhaft“, „über 500 Hochzeiten“ hochgezählt.

## Hero

Foto-Hero als Standard: echtes Foto der Location im späten Licht (Hof, Scheune, Garten, Saal), Gäste nur mit Einwilligung und nicht als Gesicht im Mittelpunkt. Ein Satz mit Ort und Anlass in Imbue, darunter die Anfrage-Leiste mit Wunschdatum (oder Monat und „flexibel“), Anlass und Gästezahl und dem Knopf „Termin anfragen“; daneben Telefon und „Besichtigung vereinbaren“ als Nebenweg. Video nur als hero_variante, wenn eigenes, hochwertiges Material da ist (stumm, Poster, Pause-Knopf).

- Raster: Foto randlos über die volle Breite; Satz unten links über Spalte 1 bis 7; die Anfrage-Leiste über 10 Spalten an der Unterkante.
- Bild: Echtes Foto der Location im späten Licht, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante.
- Überschrift: clamp(3rem, 1.6rem + 6vw, 7.5rem), Imbue 300, gemischt gesetzt, unten links.
- Handlung: Anfrage-Leiste (Wunschdatum oder Monat mit „flexibel“, Anlass, Gästezahl) mit „Termin anfragen“ (Mohnrot); daneben „Besichtigung vereinbaren“ und Telefon.
- Zusatz: Label in Archivo wdth 112 Versal (Ort, Anlass) über dem Satz.

- Hero: [Foto-Hero mit Leiste, Karte oder Weiche](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=leiste) `foto-hero-mit-leiste` · Variante „Buchungsleiste im Bild“
- Nur unter der Bedingung oben: [Kinoreifer Vollbild-Video-Hero](https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/demo) `cinematic-video-hero`

## Sektionen in dieser Reihenfolge

1. **Wunschtermin, Anlass, Gästezahl (Leiste direkt unter dem Hero; Datum oder Monat mit „flexibel“, Anlass als Auswahl, Erwachsene und Kinder; übergibt alles an die Anfrage)**: [Wunschtermin mit freien Terminen und Anfrage-Übergabe](https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/demo) `termin-verfuegbarkeit-anfrage`, [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`
2. **Ein Tag bei uns (drei bis vier Kapitel vom Ankommen und der Trauung im Garten über den Empfang im Hof und das Essen in der Scheune bis zur Feier in der Nacht; Bild steht, Text erklärt; die Seite färbt sich an jeder Kapitelgrenze um)**: [Farb-/Theme-Wechsel beim Scrollen](https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/demo?v=tageslauf) `theme-farbwechsel-scroll` · Variante „Tageslauf: Tag, Abend und Nacht in einem Kapitel“, [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild) `split-screen-sticky-seiten` · Variante „Sticky-Medium mit Clip-Reveal“
3. **Räume und Kapazitäten (je Raum Foto, Fläche, Plätze je Bestuhlung: Tafel, Rundtische, Reihe, parlamentarisch, Stehempfang; Mindestgäste, Raummiete nach Saison; Plan als SVG mit Text; ein Raum zur Zeit, Reiter nennen den Raum; Filter nach Gästezahl)**: [Räume mit Kapazitäten je Bestuhlung](https://cecodesign.de/lab/fundus/sektionen/raumkapazitaeten-bestuhlung/demo) `raumkapazitaeten-bestuhlung`, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“
4. **Anlässe, Pakete und Preise (Reiter Hochzeit, Feier, Tagung; je Reiter höchstens vier Pakete mit ab-Preis pro Person, Stunden, Mindestgästen und Liste, was enthalten ist und was nicht; der Umschalter wechselt Saison oder Wochentag statt Monat und Jahr)**: [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“, [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“
5. **Atmosphäre (Galerie nach Jahreszeit und Tageszeit, ab etwa acht Bildern als Wand, Bildnachweis der Fotografin oder des Fotografen; Vollbild mit Raumname)**: [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“
6. **Freie Termine (Monatsansicht mit frei, angefragt und vergeben, als Text und Zeichen, nicht nur Farbe; Samstage und Feiertage markiert; ein Klick übernimmt das Datum in die Anfrage; nur mit gepflegtem Kalender)**: [Wunschtermin mit freien Terminen und Anfrage-Übergabe](https://cecodesign.de/lab/fundus/sektionen/termin-verfuegbarkeit-anfrage/demo) `termin-verfuegbarkeit-anfrage`
7. **Anfrage (Anlass und Datum mit Ausweichdatum → Gäste und Räume, Trauung vor Ort, Übernachtung gewünscht → Kontakt; Budget nur freiwillig; Prüfseite vor dem Senden; Antwortzeit ehrlich nennen)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=leiste) `mehrschritt-anfrage` · Variante „Schrittleiste“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“, [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
8. **Besichtigung und Probeessen vereinbaren (Termin-Tool erst nach Klick, daneben Telefon und E-Mail)**: [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter) `termin-buchung-zwei-klick` · Variante „Platzhalter mit 2-Klick“
9. **Übernachtung und Anfahrt (Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parkplätze, letzte Bahn; Lageplan des Geländes als eigene Skizze mit Trauort, Saal, Parkplatz und Zimmern; Adresse als Text; Büro „Besichtigung nach Vereinbarung · Telefon erreichbar“; Zugang ohne Stufen als Text)**: [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze) `karte-zwei-klick` · Variante „Lageskizze“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
10. **Dienstleister-Netzwerk (Catering, Floristik, Fotografie, Musik, Trauredner; sichtbar, wer Pflichtpartner ist und ob eine Provision fließt; Logos nur mit Erlaubnis, ab etwa fünf als Raster, sonst Liste)**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster) `logo-wand-social-proof` · Variante „Ruhiges Raster“
11. **Stimmen (Google und Hochzeitsportal je mit eigenem Schnitt, Anzahl, Stand und Echtheitshinweis; Stimmen von Paaren nur mit Freigabe)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=mehrere) `bewertungsprofil-mit-echtheitshinweis` · Variante „Mehrere Plattformen“
12. **Barrierefreiheit (eigene Seite für die Website; Barrierefreiheit vor Ort steht zusätzlich bei Anfahrt und Räumen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“

## Signatur (Pflicht)

- [Farb-/Theme-Wechsel beim Scrollen](https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/demo?v=tageslauf) `theme-farbwechsel-scroll` · Variante „Tageslauf: Tag, Abend und Nacht in einem Kapitel“

## Buttons

- Haupthandlung: [Füllung vom Eintrittspunkt](https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis) `fuellung-vom-eintrittspunkt` · Variante „Clip-Path-Formen (Tischlerei)“
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=doppel) `kontur-button-zeichnen` · Variante „Doppelkontur rückt auf“

## Weitere Bausteine

- Navigation: [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab) `mobile-bottom-navigation` · Variante „Daumen-Knopf mit Aktionsmenü (Salon)“
- Scroll: [Farb-/Theme-Wechsel beim Scrollen](https://cecodesign.de/lab/fundus/scroll/theme-farbwechsel-scroll/demo?v=tageslauf) `theme-farbwechsel-scroll` · Variante „Tageslauf: Tag, Abend und Nacht in einem Kapitel“
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“
- Mikroanimation: [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`, [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`
- Galerie: [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“
- Footer: [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Optional (nur als Zusatz)

- [Agentenformular mit WebMCP](https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=projekt) `agentenformular-webmcp` · Variante „Projektanfrage“

## Nicht verwenden

- buchungsleiste-datumsbereich – Anreise und Abreise passen zu Zimmern, nicht zu einem Festtag; hier Wunschdatum mit Ausweichdatum und Gästezahl
- slideshow-innere-gegenparallaxe / glas-button – Signatur und Hauptknopf des Hotel-Rezepts; die Eventlocation erzählt über den Farbwechsel vom Tag zur Nacht
- konfetti-erfolg / like-herz-burst – Hochzeitskitsch; nach der Anfrage eine ruhige Bestätigung mit Antwortzeit
- kreistext-siegel-rotierend / text-on-path – drehende Siegel und Schriftbögen kippen sofort ins Kitschige
- mesh-gradient-shader / atmosphaere-partikel / fluessig-marmor-hintergrund – Bokeh, Glitzer und Schimmer sind das Klischee; Stimmung kommt aus echten Fotos
- marquee-laufband / rotating-words – unruhig neben Kalender und Preisen
- zahlen-odometer – „über 500 Hochzeiten“ hochgezählt wirkt verkäuferisch; Zahlen stehen still oder gar nicht
- smooth-scroll-lenis / fullpage-snap-slides – stören Kalender, Tabellen und schnelles Überfliegen
- prozent-zaehler / logo-aufbau-intro – Wartezeit vor dem ersten Bild
- cursor-follower-lerp / magnetische-elemente – Agentur-Gesten ohne Nutzen
- prompt-hero-eingabefeld – Anfrage über klare Felder, nicht über einen Chat
- Herzen, Ringe, Tauben, Rosenblätter, Schnörkel-Script, Pastell-Rosé und Glitzer-Gold – Kitsch; festlich wird es über Licht, Raum und Typografie
- Stock-Hochzeitsfotos und Bilder anderer Locations – nur eigene Fotos mit Bildnachweis

## Regeln

- Erster Bildschirm: echtes Foto, ein Satz mit Ort und Anlass, darunter die Anfrage-Leiste (Wunschdatum oder Monat mit „flexibel“, Anlass, Gästezahl) und „Termin anfragen“; Telefon und „Besichtigung vereinbaren“ als Nebenweg. Hauptziel ist die Anfrage, nicht der Klick in die Galerie.
- Freie Termine ehrlich: frei, angefragt (Option mit Haltefrist, wie Hedsor mit sieben Tagen) und vergeben, jeweils als Text und Zeichen, nicht nur als Farbe. Nur mit gepflegtem Kalender und Stand-Datum; sonst kein Kalender, sondern Anfrage mit Ausweichdatum. Keine künstliche Knappheit („nur noch 2 Samstage!“).
- Räume mit Zahlen: je Raum Fläche und Plätze je Bestuhlung als echte Tabelle in Tabellenziffern (wie der Historische Rathaussaal Nürnberg), Mindestgäste und Raummiete nach Saison (wie Schloss Hohenkammer), Plan als SVG mit Textbeschreibung. Höchstzahlen ergeben sich aus Genehmigung und Brandschutz; Zahlen kommen vom Kunden und werden vom Kunden geprüft.
- Preise (Preisangabenverordnung): ab-Preise nur mit Bezug (pro Person, Stunden, Mindestgäste, Saison oder Wochentag) und mit der Liste, was enthalten ist und was nicht (Raummiete, Speisen, Getränke, Technik). Preise für Verbraucher inkl. MwSt.; Tagungspauschalen dürfen netto stehen, wenn das Angebot erkennbar nur an Unternehmen geht. Vom Kunden prüfen lassen.
- Verträge über Veranstaltungen, Bewirtung und Beherbergung mit festem Termin haben im Fernabsatz kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB). Anzahlung, Option und Storno stehen deshalb klar vor dem Vertrag; die Texte kommen vom Kunden. Werden Gutscheine online verkauft, gilt der Widerrufs-Button aus der Grundausstattung (Leitfaden 8a).
- Dienstleister-Netzwerk: Pflichtpartner offen benennen („Catering nur über …“). Fließt eine Provision, steht das an der Empfehlung (§ 5a UWG). Logos nur mit Erlaubnis (logo-wand-social-proof), ab etwa fünf als Raster, sonst als Liste.
- Menschen auf Fotos: Paare und Gäste nur mit Einwilligung, Bildnachweis der Fotografin oder des Fotografen am Bild. Keine Stockfotos, keine Bilder anderer Häuser.
- Übernachtung ehrlich: Zahl der Zimmer und Betten vor Ort, Partnerhotels mit Entfernung, Shuttle, Parken, letzte Bahn. Ruhezeiten und Musik im Freien so, wie die Genehmigung es sagt (vom Kunden prüfen lassen).
- Barrierefreiheit vor Ort als Text bei Räumen und Anfahrt: stufenloser Zugang, WC, Parkplatz, Trauort im Garten mit Rollstuhl erreichbar oder nicht.
- Farbwechsel (theme-farbwechsel-scroll) nur im Kapitel „Ein Tag bei uns“, drei bis vier Kapitel, Wechsel an der Viewport-Mitte. Jedes Farbpaar mindestens 4,5 : 1, der Text schaltet am Kipppunkt; meta theme-color zieht mit. Räume, Preise, Kalender und Anfrage stehen immer auf Kalk. Bilder werden nie eingefärbt.
- Bewegung: eine Kurve cubic-bezier(0.625, 0.05, 0, 1) mit 250, 400, 475, 525 und 725 ms. Keine Einblendungen beim Scrollen, kein Autoplay; Video nur mit eigenem Material, stumm, mit Poster und Pause-Knopf.
- Typografie: Imbue nur für Headlines, Raumnamen, Kapitel und große Daten, nie unter 2rem; Archivo für Text, Tabellen, Kalender und Formulare. Zahlen in Tabellen und im Kalender immer in Tabellenziffern.
- Knöpfe: Mohnrot gefüllt mit Füllung vom Eintrittspunkt nur für die Haupthandlung (Anfragen, Datum übernehmen); Nebenwege als Messing-Doppelkontur, die bei Hover aufrückt. Ein Knopfsystem auf der ganzen Seite, Trefferfläche mindestens 44 px.
- Bewertungen von Google oder Hochzeitsportalen nur mit Echtheitshinweis direkt daneben (§ 5b Abs. 3 UWG), je Plattform eigener Schnitt und Stand, nichts verrechnen.
- Abgrenzung: Ist das Haus vor allem ein Hotel und die Feier ein Zusatz, gilt boutique-hotel-gastgeber mit der Sektion „Tagungen & Feiern“. Dieses Rezept gilt, wenn der Festtag das Produkt ist.
- Pflichtangaben (Leitfaden 8a): Impressum, Datenschutzerklärung mit Hinweis direkt an Anfrage und Kalender, Erklärung zur Barrierefreiheit. Zeigt die Seite Menüs, stehen Allergene und Zusatzstoffe dabei. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen.

## Rezept-Varianten

- **Eventcatering / Caterer (ohne eigene Location)**: Das Produkt ist das Essen an einem Tag an einem fremden Ort. Statt Räumen die Locations, in denen schon gekocht wurde, und die Formen (Menü, Buffet, Flying Dinner, Food-Station). Menüs mit Allergenen und Zusatzstoffen (speisekarte-editorial, Variante menue). Preise pro Person ab, mit Mindestgästen und was dazukommt (Personal, Geschirr, Anfahrt). Die Lieferung von Speisen zu einem festen Termin hat im Fernabsatz kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB); Storno klar nennen. Signatur bleibt: „Ein Abend mit uns“ färbt sich vom Aperitif bis zum Mitternachtssnack.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.