Zum Inhalt
← Rezepte
Alle Rezepte

Gastronomie: warm und einladend

Restaurant / Café / Bar / Rösterei mit Café

Fühlt sich an wie das Lokal selbst: warmes Papier-Weiß, eine weiche Serif mit Charakter, Hausfarben aus Einrichtung oder Logo, große Food- und Raumfotos. Karte, Reservierung und Öffnungszeiten sind nie mehr als einen Tipp entfernt. Bilder blenden sanft ein, alles andere bleibt ruhig.

Bauplan tokens.css Alle Techniken Beispielseite

Schrift

Warm und einladend

Fühlt sich an wie das Lokal selbst: warmes Papier-Weiß, eine weiche Serif mit Charakter, Hausfarben aus Einrichtung oder Logo, große Food- und Raumfotos.

Headline
Fraunces
Text
Commissioner

Farbe

  • #F0ECE0
  • #353839
  • #7F937A
  • #293E3A
  • #EAC16E
  • #E1A894
  • #293E3A

Bewegung

cubic-bezier(0.16, 1, 0.3, 1)
Dauer
200 (Hover, Tabs), 700 (Bild-Einblendung), 400 (Menü/Overlay)

Aufbau der Seite

SignaturLive-Uhr und Standort in Navigation oder Footer

HeroFoto-Hero mit Leiste, Karte oder Weiche · KarteoderKinoreifer Vollbild-Video-Hero

  1. Karte (Mittag / Abend / Getränke)Speisekarte als Editorial · Bistro-TafelTabs und Segmente mit Pfeiltasten · Automatisch
  2. Haltung / Geschichte des HausesWort-für-Wort-Aufhellen beim ScrollenEditorial-/Magazin-Layout · Magazin
  3. Reservieren (Tisch: Datum, Uhrzeit, Personen über das Reservierungs-Tool per 2-Klick, vorher Telefon und E-Mail) / Gruppen & Events (kurze Anfrage)Termin-Buchung per 2-Klick-Einbettung · PlatzhalterKontakt- und Anfrageformular als eigene SektionSplit-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Medium
  4. Raum & Speisen (Bilder)Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)
  5. Bewertungen (Google o. a. als Band unter dem Hero oder vor der Anfahrt; nur gepflegt und mit Echtheitshinweis)Plattform-Bewertungen mit Echtheitshinweis · Band unter dem Hero
  6. Shop / Gutscheine / Bohnen (nur mit echtem Shop: Grundpreis, Versand, Lieferzeit, Lebensmittelangaben; Gutscheine nur mit Zahlungsdienst und Codeverwaltung)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · ProduktreiheKaufbox mit Farb- und Größenwahl · SchnellkaufWarenkorb als Seitenpanel · SeitenpanelGutschein-KonfiguratorEU-Hinweis zur Gewährleistung und Garantie-Label · Label-Leiste in
  7. Presse & Auszeichnungen (nur mit echten Erwähnungen und Erlaubnis)Logo-Wand / Social-Proof-Band · Auszeichnungen
  8. Anfahrt & Öffnungszeiten (Adresse als Text, Route, Karte per 2-Klick, Status aus den echten Zeiten)Öffnungszeiten mit Live-Status · KopfzeileKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
  9. Standorte (nur bei mehreren Häusern)Standortfinder als Liste · Nur ListeÖffnungszeiten mit Live-Status · Kopfzeile
  10. Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Gutschein-Verkauf)Widerrufs- und Kündigungs-Button · RichtigSeite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

Regeln
  • Öffnungszeiten, Adresse und Reservieren auf dem ersten Bildschirm; mobil unten fest: Reservieren / Karte / Route / Anrufen.
  • Karte als HTML-Text mit Tabs (Mittag, Abend, Getränke), Allergene als Kürzel mit Legende; PDF höchstens zusätzlich.
  • Echte Fotos von Raum, Team und Gerichten; der Hero ist standardmäßig ein Foto. Video nur als Variante mit eigenem Material, ohne Ton, mit Poster-Bild und Pause-Knopf.
  • Signatur live-uhr-und-standort nur gekoppelt an den Öffnungsstatus ('18.42 · Küche bis 22 Uhr', Zeiten aus oeffnungszeiten-status, echte Zeiten inkl. Feiertage); eine reine Uhr ist Deko und entfällt.
  • Eine Hausfarbe für Flächen, ein Akzent für Badges; Food-Fotos nie einfärben oder überlagern.
  • Tischreservierung über termin-buchung-zwei-klick: das Widget (OpenTable, Quandoo u. a.) erst nach Consent bzw. Klick laden; vorher Telefon und E-Mail anbieten. Eine Buchungsleiste mit Datumsbereich ist für Zimmer und Zeiträume gebaut, nicht für Tische (Datum, Uhrzeit, Personen).
  • Papier-Textur nur, wenn Karte oder Logo selbst Print-Charakter haben, und dann kaum sichtbar.
  • Pflichtangaben und Recht (Leitfaden 8a): Allergene und Zusatzstoffe auf der Karte, Preise inkl. MwSt.; mit Shop: Gesamtpreis, Versandkosten, Grundpreis je kg, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), AGB, Produktsicherheit (GPSR); bei Lebensmitteln im Fernabsatz Pflichtangaben (Zutaten, Allergene, Lebensmittelunternehmer, LMIV) vor dem Kauf; Google-Bewertungen nur mit Echtheitshinweis; keine pauschalen Umweltaussagen („nachhaltig“, „klimaneutral“) ohne Nachweis – vom Kunden prüfen lassen.
Bild und Ton
  • Licht: Warmes Fenster- oder Abendlicht, gerichtete Schatten, Essen in voller Farbe.
  • Ausschnitt: Teller von oben oder in 45°, Raum mit Gästen in Unschärfe, Hände beim Anrichten.
  • Personen: Ja: Team und Gastgeber:in; Gäste nur unscharf oder mit Einwilligung.
  • Formate: 4:5, 1:1, 3:2
  • Nicht: Keine eingefärbten oder überlagerten Food-Fotos, kein Graustufen- oder Halbton-Effekt, keine Stockfotos, kein Text auf dem Teller.
  • Anrede: Sie
  • Sätze: Kurz und sinnlich, Zutaten statt Adjektive. Öffnungszeiten und Adresse als nüchterne Zeile.
  • Haltung: Persönlich wie die Gastgeber:in an der Tür. Ein Café oder eine Bar darf duzen, dann auf der ganzen Seite.
  • Tonproben: Heute ab 18 Uhr, Küche bis 22 Uhr., Wir kochen mit dem, was die Höfe rund um [Ort] liefern.
  • Nicht schreiben: „kulinarische Reise“, „Gaumenfreuden“, „mit Liebe gemacht“ ohne Beleg, „nachhaltig“ ohne Nachweis.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten, Foto über Spalte 1 bis 7 (oder randlos), Textblock über 8 bis 12; mobil Foto oben.
  • Hero-Bild: Echtes Foto von Raum, Team oder Gericht, 4:5 oder 3:2. Video nur als hero_variante mit eigenem Material.
  • Überschrift: clamp(2.5rem, 1.6rem + 4vw, 5rem), Fraunces 450–600, links im Textblock.
  • Handlung: „Reservieren“ (gefüllt, Hausfarbe) und „Karte ansehen“ (Kontur), darunter Adresse mit Route.
  • Zusatz: Statuszeile aus live-uhr-und-standort und oeffnungszeiten-status („18.42 · Küche bis 22 Uhr“); mobil feste Leiste Reservieren / Karte / Route / Anrufen.
  • Sektionsabstand: clamp(72px, 9vw, 128px)
  • Dichte: mittel
  • Raum: Speisekarte dicht und gut scanbar (Gericht und Beschreibung 4 px, Gerichte 20 px auseinander), Bilder mit viel Luft. Öffnungszeiten immer im ersten Bildschirm.
  • Spalten: 12
  • Maximale Breite: 1360px
  • Raster: Hero asymmetrisch 7/5 (Foto/Text) oder Foto randlos. Karte in 2 Spalten, Preis rechtsbündig. Bildstrecken dürfen randlos laufen.
  • Radius klein: 6px
  • Radius groß: 12px
  • Schatten: keiner
  • Form: Weich, aber nicht verspielt: 12 px an Fotos und Karten, Pillen nur für Reiter (Mittag, Abend, Getränke) und Badges in #EAC16E.
Vorbilder