Zum Inhalt
← Rezepte
Alle Rezepte

Boutique-Hotel: Gastgeber mit Haltung

Hotel / Boutique-Unterkunft / Pension / Ferienapartments

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.

Bauplan tokens.css Alle Techniken Beispielseite

Schrift

Gastgeber mit Haltung

Die Website ist das Foyer: großes Bild oder kurzer Film vom Haus, direkt darunter die Buchungsleiste mit Datum und Gästen.

Headline
Newsreader
Text
Mona Sans

Farbe

  • #F3EEE7
  • #FEF2E3
  • #3E3A37
  • #D5D1C8
  • #82847F
  • #6E5A47
  • #6A6C67

Bewegung

cubic-bezier(0.37, 0, 0.63, 1)
Dauer
300–600 (Deckkraft, linear oder sine, wie Michelberger), 400 (UI-Farben, Rahmen wie Aman), 900–1200 (Bild-Crossfades/Hero-Wechsel)

Aufbau der Seite

SignaturVollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung

HeroFoto-Hero mit Leiste, Karte oder Weiche · Buchungsleiste im BildoderKinoreifer Vollbild-Video-Hero

  1. Buchungsleiste (Datum, Gäste) direkt unter dem HeroBuchungsleiste mit Datumsbereich · Leiste unter dem Hero
  2. Zimmer & SuitenHorizontale Akkordeon-Panels / Akkordeon-BildgalerieRaster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · ProduktgalerieKarussell-Steuerung und Anzeige · Zähler
  3. Restaurant / Bar / SpaSplit-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-MediumSpeisekarte als Editorial · Fine Dining
  4. Erlebnisse & Umgebung / Was ist losEditorial-/Magazin-Layout · ZeitungProgramm-Kalender mit Liste und Monat · 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) · KartenreiheGutschein-Konfigurator
  6. Gästestimmen (Plattform-Bewertungen wie Google oder HolidayCheck mit Echtheitshinweis; bewertungen-verteilung nur bei eigenem, geprüftem Bewertungssystem)Plattform-Bewertungen mit Echtheitshinweis · Mehrere PlattformenBewertungen mit Sternverteilung · Verteilung seitlichTestimonials neu gedacht · Ein großes Zitat
  7. Tagungen & FeiernSplit-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Medium
  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) · KartenbildKontakt- und Anfrageformular als eigene Sektion
  9. Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung nach BFSG)Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG
Recht (nur wenn die Bedingung zutrifft)
Widerrufs- und Kündigungs-Button

Nicht verwenden

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.
Bild und Ton
  • 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.
  • 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 schreiben: „Ihre Auszeit vom Alltag“, „Wohlfühloase“, „einzigartiges Erlebnis“, Countdown oder „Nur noch 1 Zimmer“ ohne echte Zahl.
Hero, Raum und Form
  • Hero-Raster: Foto randlos über die volle Breite bis knapp über die Bildschirmunterkante; Text unten links über Spalte 1 bis 6.
  • Hero-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.
  • Sektionsabstand: clamp(88px, 11vw, 168px)
  • Dichte: luftig
  • Raum: 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
  • 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
  • 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).
Vorbilder