# Bauplan: Boutique-Hotel: Gastgeber mit Haltung

Rezept `boutique-hotel-gastgeber` · Hotel / Boutique-Unterkunft / Pension / Ferienapartments · Stimmung: gastfreundlich, entspannt, hochwertig, ortsverbunden · Stand 02.11.2026

Die Website ist das Foyer: großes Bild oder kurzer Film vom Haus, direkt darunter die Buchungsleiste mit Datum und Gästen. Eine leichte Serif für Stimmung, eine breite Grotesk für Labels, sandige Töne. Weiche, langsame Bildwechsel (clip-path-Reveal, Slideshow mit innerer Gegenbewegung), aber eine schnelle Buchungsstrecke mit eigenem, asymmetrischem UI-Tempo.

## 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 `boutique-hotel-gastgeber`) und https://cecodesign.de/lab/fundus/rezepte/boutique-hotel-gastgeber/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt
- Starter-Seite (fertiges Beispiel nach diesem Rezept): https://cecodesign.de/lab/fundus/starter/boutique-hotel-gastgeber/index.html

## Schrift

- Headline: `newsreader` · Text: `mona-sans`
- Größen: h1 clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader opsz 72, wght 300–400, Laufweite -0.015em, Zeilenhöhe 1.05; Kursiv für Ortsnamen/Akzente (wie Tiempos Fine Italic bei Hoxton). Labels und Buttons Mona Sans wdth 112–125 (breit wie GT America Extended), 0.75rem Versal, Laufweite 0.06em; Fließtext Mona Sans wdth 100, 1.0625rem, Zeilenhöhe 1.6.
- Techniken: [Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)](https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/demo) `serif-grotesk-duotone`, [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [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`

## Farbe

Sand und Creme als Grund, warmes Dunkelbraun-Grau statt Schwarz, ein gedämpfter Naturton aus dem Haus (Holz, Stein, Pflanzen). Kein Gold, keine Verläufe – die Fotos tragen die Stimmung.

- `--farbe-grund` #F3EEE7 (Grund (Aman Sand))
- `--farbe-flaeche` #FEF2E3 (Creme für Buchungsleiste/Karten (Hoxton))
- `--farbe-text` #3E3A37 (Text/Footer (Hoxton))
- `--farbe-linie` #D5D1C8 (Linien, Rahmen)
- `--farbe-text-2` #82847F (Sekundärtext, Meta (Aman))
- `--farbe-hauston` #6E5A47 (Hauston für Buttons (frei gewählt aus dem Interieur, hier Beispiel Holz))
- `--farbe-text-3` #6A6C67 (Meta-Text barrierefrei (4.6 : 1 auf #F3EEE7; #82847F nur für Linien oder Schrift ab 24 px))

## Bewegung

- Animationsstil: [Animationsstil „Luxus weich“](https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/demo) `token-luxus-weich`
- Für UI: [Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)](https://cecodesign.de/lab/fundus/animationsstile/token-toggle-asymmetrisch/demo) `token-toggle-asymmetrisch`
- Kurve: cubic-bezier(0.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder und Hero-Wechsel); UI über animationsstil_ui
- Dauer: 300–600 (Deckkraft, linear oder sine, wie Michelberger), 400 (UI-Farben, Rahmen wie Aman), 900–1200 (Bild-Crossfades/Hero-Wechsel)
- Regel: Lange, sanfte Kurven nur für Bilder und Hero-Wechsel; Buchungsleiste, Datumsauswahl und Formulare reagieren in 150–250 ms über animationsstil_ui token-toggle-asymmetrisch. Keine Federn, kein Überschwingen, kein Dauer-Ken-Burns – höchstens einmaliges Zurückskalieren 1.06 → 1.

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

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 64, 96, 168
- Sektionsabstand: clamp(88px, 11vw, 168px)
- Dichte: luftig
- Hinweis: Werte wie im Starter (starter/boutique-hotel-gastgeber/tokens.css: --s-1 bis --s-8, --sektion). Bilder und Kapitel mit viel Luft, die Buchungsleiste dagegen kompakt mit 56 px Höhe.
- Spalten: 12
- Seitenrand: clamp(18px, 3.6vw, 56px)
- Spaltenabstand: clamp(16px, 2.4vw, 32px)
- Maximale Breite: 1320px
- Raster: Hero und Zimmerbilder randlos, Text auf 62ch. Zimmer als 2er-Raster mit 3:2-Bildern, Lage und Anreise 6/6.
- Radius klein: 6px
- Radius groß: 6px
- Pillenform für Buttons: True
- Linie: 1px #D5D1C8 für Linien und Rahmen (nur Deko); Feldrahmen #8f877c
- Schatten: keiner; der einzige Material-Effekt ist der Glas-Knopf über dem Hero-Foto (glas-button, Variante frost)
- Form: Knöpfe als Pille (Starter --knopf-radius 999px), Karten und Popover 6 px (Starter --radius).

## Bildsprache

- Licht: Weiches Tageslicht am Morgen oder Abend, warme Töne, Schatten erlaubt; nichts aufgehellt.
- Ausschnitt: Haus in der Landschaft, Zimmer mit Blick aus dem Fenster, Details wie Bettwäsche, Frühstück, Material.
- Personen: Selten: Gäste von hinten oder klein im Bild, Gastgeber:innen mit Namen; Gästefotos nur mit Einwilligung.
- Formate: 3:2, 4:5, 16:9
- Nicht: Keine Weitwinkel-Zimmer, keine Pool- und Spa-Stockfotos, kein Gold, keine Verläufe, keine 3D-Rundgänge im Hero.

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

- Anrede: Sie
- Sätze: Ruhig und gastlich, kurze Sätze mit Ort und Zahl. Preise immer mit „ab“ und Zeitraum.
- Haltung: Gastgeber:in, nicht Buchungsportal. Direktbuchungs-Vorteile klar und ohne Druck.
- Tonproben: Zwölf Zimmer am See, zehn Minuten zu Fuß zum Wasser., Direkt bei uns gebucht: Frühstück und späte Abreise inklusive.
- Nicht: „Ihre Auszeit vom Alltag“, „Wohlfühloase“, „einzigartiges Erlebnis“, Countdown oder „Nur noch 1 Zimmer“ ohne echte Zahl.

## Hero

Foto-Hero als Standard: ein starkes, echtes Foto von Haus, Zimmer oder Lage, Name und ein Satz zur Lage; die Buchungsleiste liegt halb darüber. cinematic-video-hero nur als Variante mit eigenem, hochwertigem Footage (stumm, Poster, Pause-Knopf, mobil Standbild); Pensionen und Ferienwohnungen bleiben beim Foto.

- Raster: Foto randlos über die volle Breite bis knapp über die Bildschirmunterkante; Text unten links über Spalte 1 bis 6.
- Bild: Ein starkes, echtes Foto, 16:9 Desktop, 4:5 mobil; Video nur als hero_variante mit eigenem Footage, mobil Standbild.
- Überschrift: clamp(2.5rem, 1.5rem + 4vw, 5.5rem), Newsreader 300–400, unten links, Ortsname kursiv.
- Handlung: Buchungsleiste (Anreise, Abreise, Gäste, „Verfügbarkeit prüfen“) liegt halb über der Bildunterkante, über 10 Spalten; mobil als feste untere Leiste.
- Zusatz: Kein Versal-Label über der H1 (C13), der Ort steht kursiv in der H1. Sprachwahl DE/EN im Kopf. Umsetzung: foto-hero-mit-leiste/leiste.

- 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. **Buchungsleiste (Datum, Gäste) direkt unter dem Hero**: [Buchungsleiste mit Datumsbereich](https://cecodesign.de/lab/fundus/sektionen/buchungsleiste-datumsbereich/demo?v=leiste) `buchungsleiste-datumsbereich` · Variante „Leiste unter dem Hero“
2. **Zimmer & Suiten**: [Horizontale Akkordeon-Panels / Akkordeon-Bildgalerie](https://cecodesign.de/lab/fundus/galerien-slider/akkordeon-panels/demo) `akkordeon-panels`, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt) `galerie-shared-element-vollbild` · Variante „Produktgalerie mit Daumen“, [Karussell-Steuerung und Anzeige](https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=zaehler) `karussell-steuerung` · Variante „Zähler“
3. **Restaurant / Bar / Spa**: [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“, [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=menue) `speisekarte-editorial` · Variante „Fine-Dining-Menü“
4. **Erlebnisse & Umgebung / Was ist los**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung) `editorial-magazin-layout` · Variante „Zeitung mit Spalten“, [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“
5. **Angebote & Pakete / Gutscheine (Preise mit „ab“ und Zeitraum; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)**: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“, [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`
6. **Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=mehrere) `bewertungsprofil-mit-echtheitshinweis` · Variante „Mehrere Plattformen“, [Bewertungen mit Sternverteilung](https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=seitlich) `bewertungen-verteilung` · Variante „Verteilung seitlich“, [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=zitat) `testimonials-neu-gedacht` · Variante „Ein großes Zitat“
7. **Tagungen & Feiern**: [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“
8. **Lage & Anreise / Kontakt (Adresse als Text, Anreise nach Verkehrsmittel, Karte per 2-Klick, Anfrage für Gruppen und Feiern)**: [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`
9. **Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung nach BFSG)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung](https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=hero) `slideshow-innere-gegenparallaxe` · Variante „Foto-Hero ohne Autoplay (Gasthaus am See)“

## Buttons

- Haupthandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch) `pfeil-icon-button` · Variante „Pfeil-Tausch“
- Nebenhandlung: [Glas-Button](https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=frost) `glas-button` · Variante „Frost“

## Weitere Bausteine

- Navigation: [Vollbild-Overlay-Menü mit Riesentypo und Bildvorschau](https://cecodesign.de/lab/fundus/navigation/vollbild-overlay-menue-bildvorschau/demo) `vollbild-overlay-menue-bildvorschau`, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=basis) `mobile-bottom-navigation` · Variante „Menü-Leiste wird Sheet (Fotografin)“
- Scroll: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen) `bild-zoom-in-maske` · Variante „Rahmen schrumpft, Bild zoomt gegenläufig“
- Mikroanimation: [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`, [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`
- Galerie: [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt) `galerie-shared-element-vollbild` · Variante „Produktgalerie mit Daumen“, [Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung](https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=hero) `slideshow-innere-gegenparallaxe` · Variante „Foto-Hero ohne Autoplay (Gasthaus am See)“, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=gastgeber) `studio-visitenkarte-footer` · Variante „Gastgeber (Hotel am See)“, [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=saison) `footer-newsletter-mit-persoenlichkeit` · Variante „Saisonbrief im Gastro-Footer“
- Recht (nur wenn die Bedingung zutrifft): [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo) `widerruf-und-kuendigung-schaltflaeche`

## 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) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Nicht verwenden

- gaussian-splats – Dateigrößen sprengen die mobile Ladezeit, Zimmerfotos verkaufen besser
- 3d-karussell-zylinder – Zimmerfotos seitlich verzerrt
- smooth-scroll-lenis – verträgt sich schlecht mit Datums-Popovern und Buchungs-iFrames
- logo-aufbau-intro / prozent-zaehler – Gäste wollen sofort Verfügbarkeit sehen
- magnetische-elemente – Agentur-Geste, passt nicht zum Gastgeber-Ton
- konfetti-erfolg nach der Buchung – eine ruhige Bestätigung mit Anreise-Infos ist hochwertiger

## Regeln

- Buchungsleiste (Anreise, Abreise, Gäste, Button) direkt unter dem Hero und mobil als feste untere Leiste – wie Hoxton und Aman.
- Mindestaufenthalt und belegte Tage schon im Kalender zeigen (Michelberger), nicht erst im Buchungsschritt.
- Hero-Film nur mit eigenem Material, stumm, mit Poster und Pause; sonst ein starkes Foto.
- Direktbuchungs-Vorteile klar benennen (Hoxton 'Why Book With Us?'), Preise mit 'ab' und Zeitraum.
- Serif nur für Headlines und kurze Zitate; Labels breit und versal, Fließtext neutral.
- Zimmerkategorien mit Größe, Bettenart, Ausblick und 3–6 Fotos; Detailbilder im Vollbild per Shared-Element-Übergang.
- Mehrsprachig (mindestens DE/EN) mit Sprachwahl im Header.
- Lage und Anreise als eigene Sektion und zusätzlich im Footer als Visitenkarte; Karte erst nach Klick laden.
- Buchungsleiste, Datumsauswahl, Menüs und Drawer nutzen token-toggle-asymmetrisch (öffnen ca. 300 ms mit Ausklang-Kurve, schließen ca. 200 ms); token-luxus-weich gilt nur für Bilder und Hero-Wechsel.
- Pflichtangaben und Recht (Leitfaden 8a): Preise inkl. MwSt. als Gesamtpreis mit allen unvermeidbaren Kosten, Kurtaxe bzw. Übernachtungssteuer erkennbar; Storno- und Zahlungsbedingungen vor der Buchung; für Beherbergung gilt meist kein Widerrufsrecht, das klar sagen statt einen Widerrufs-Button vorzutäuschen; Erklärung zur Barrierefreiheit (bfsg) bei Online-Buchung; Plattform-Bewertungen nur mit Echtheitshinweis (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; Gästefotos nur mit Einwilligung – vom Kunden prüfen lassen.
- Auf dem Telefon nur eine untere Leiste: Buchen gehört in mobile-bottom-navigation, keine zweite feste Buchungsleiste darüber.
- Gutscheine online verkaufen heißt Verbrauchervertrag: dann gehört widerruf-und-kuendigung-schaltflaeche dazu (Abschnitt 8a, vom Kunden prüfen lassen).
- glas-button nur über Fotos (Hero, Slideshow). Auf Creme und in Formularen gilt pfeil-icon-button in der Hausfarbe.

## Rezept-Varianten

- **Ferienwohnung / Pension (wenige Einheiten)**: Für Ferienwohnungen, Ferienhäuser und kleine Pensionen mit etwa einer bis acht Einheiten. Schrift, Farbe, Stil und Signatur bleiben; slideshow-innere-gegenparallaxe nur für die Bilder der Einheiten, nie im Kalender. buchungsleiste-datumsbereich auf der Startseite in der Variante leiste, auf jeder Wohnungsseite in der Variante zimmer (Buchungskarte rechts, Gesamtpreis unter dem Formular); belegte Tage, Mindestaufenthalt und An- bzw. Abreisetage stehen schon im Kalender. Bei nur einer Wohnung mit wenigen Anfragen statt Online-Buchung den Belegungskalender als Ansicht und darunter kontakt-anfrage-formular (wann_nicht von buchungsleiste-datumsbereich). Widgets von Channel-Manager oder Buchungsportal über termin-buchung-zwei-klick (Variante platzhalter, mobil linkout), Telefon und E-Mail daneben. Saisonpreise ab drei Einheiten als vergleichstabelle-sticky, sonst als einfache Tabelle. Gastgeber:innen mit team-ueber-mich-layout, Variante statement. Recht: Endpreis inkl. Endreinigung, Bettwäsche und Nebenkosten, wenn sie in jedem Fall anfallen (PAngV; OLG Schleswig 22.03.2013, 6 U 27/12); Kurtaxe bzw. Gästebeitrag als kommunale Abgabe getrennt und gut sichtbar nennen (Empfehlung des DTV); Anzahlung, Storno und Zahlungsarten vor der Buchung; für Beherbergung zu festen Terminen meist kein Widerrufsrecht, das klar sagen statt einen Widerrufs-Button vorzutäuschen; eine Registriernummer anzeigen, wo die Gemeinde eine Registrierung verlangt (Zweckentfremdungssatzung; die EU-Verordnung 2024/1028 zur Kurzzeitvermietung gilt seit Mai 2026, ein bundesweites Register gibt es nicht); BFSG bei Online-Buchung prüfen (Kleinstunternehmen ausgenommen) – vom Kunden prüfen lassen.

## Vor der Abgabe

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