# Bauplan: Gastronomie: warm und einladend

Rezept `gastro-warm-appetitlich` · Restaurant / Café / Bar / Rösterei mit Café · Stimmung: warm, einladend, persönlich, sinnlich · Stand 02.11.2026

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.

## 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 `gastro-warm-appetitlich`) und https://cecodesign.de/lab/fundus/rezepte/gastro-warm-appetitlich/
- 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/gastro-warm-appetitlich/index.html

## Schrift

- Headline: `fraunces` · Text: `commissioner`
- Größen: h1 clamp(2.5rem, 1.6rem + 4vw, 5rem), Fraunces wght 450–600, opsz automatisch, SOFT 50–100, Laufweite -0.01em, Zeilenhöhe 1.02; Fließtext Commissioner FLAR 0, wght 400, 1.0625rem, Zeilenhöhe 1.55; Versal-Labels und Karten-Rubriken (Öffnungszeiten, Kategorien) Commissioner FLAR 60–100 als Brücke zur Serif, 0.75rem mit 0.15em (Dishoom); Speisekarte: Gericht 1.125rem/500, Beschreibung 0.9375rem, Preis rechtsbündig mit tabellarischen Ziffern. DM Mono aus der Paarung weglassen – Preise in Mono wirken nach Tech.
- 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`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`

## Farbe

Warmes Papier-Weiß statt Reinweiß, warme dunkle Schrift, eine bis zwei Hausfarben aus Interieur, Geschirr oder Logo. Food-Fotos immer in voller Farbe; Flächenfarben eher gedeckt, damit das Essen leuchtet.

- `--farbe-grund` #F0ECE0 (Grund (Dishoom))
- `--farbe-text` #353839 (Text)
- `--farbe-flaeche` #7F937A (Hausfarbe Salbei für Flächen)
- `--farbe-dunkle` #293E3A (dunkle Sektion/Footer (Bonanza))
- `--farbe-akzent` #EAC16E (Akzent Senf für Navigation/Badges (Dishoom nav-bg))
- `--farbe-akzent-2` #E1A894 (Zweitakzent Rosé, sparsam)
- `--farbe-signal` #293E3A (Signal: Haupthandlung als dunkle Pille (Senf nur als Kreis oder Akzent; Salbei trägt keine Schrift: 2,8 : 1 mit Weiß))

## Bewegung

- Animationsstil: [Animationsstil „Editorial langsam“](https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/demo) `token-editorial-langsam`
- 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.16, 1, 0.3, 1) (token-editorial-langsam), nur Bilder und h1; UI über animationsstil_ui
- Dauer: 200 (Hover, Tabs), 700 (Bild-Einblendung), 400 (Menü/Overlay)
- Regel: Nur Bilder bekommen eine eigene Einblendung (Aufhellen oder scale 0.96 → 1 mit Deckkraft, ~700 ms wie Dishoom). Text erscheint ohne Effekt oder mit einem einzigen Masken-Reveal für die h1. Karten-Tabs, Reservierung, Warenkorb und Kaufbox kurz und funktional über animationsstil_ui token-toggle-asymmetrisch.

## 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, 144
- Sektionsabstand: clamp(72px, 9vw, 128px)
- Dichte: mittel
- Hinweis: 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
- Seitenrand: clamp(16px, 4vw, 48px)
- Spaltenabstand: clamp(12px, 2vw, 24px)
- 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
- Pillenform für Buttons: True
- Linie: 1px #353839 mit 20 % Deckkraft zwischen Gerichten
- 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.

## Bildsprache

- 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.

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

- 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: „kulinarische Reise“, „Gaumenfreuden“, „mit Liebe gemacht“ ohne Beleg, „nachhaltig“ ohne Nachweis.

## Hero

Foto-Hero als Standard: echtes Foto von Raum, Team oder Gericht, dazu Öffnungszeiten, Adresse und „Reservieren“. Video nur als Variante, wenn eigenes, hochwertiges Material vorhanden ist (stumm, Poster, Pause-Knopf).

- Raster: 12 Spalten, Foto über Spalte 1 bis 7 (oder randlos), Textblock über 8 bis 12; mobil Foto oben.
- 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.

- Hero: [Foto-Hero mit Leiste, Karte oder Weiche](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero-mit-leiste/demo?v=karte) `foto-hero-mit-leiste` · Variante „Karte mit Öffnungsstatus“
- 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. **Karte (Mittag / Abend / Getränke)**: [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=bistro) `speisekarte-editorial` · Variante „Bistro-Tafel“, [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“
2. **Haltung / Geschichte des Hauses**: [Wort-für-Wort-Aufhellen beim Scrollen](https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/demo) `scroll-word-highlight`, [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „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](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter) `termin-buchung-zwei-klick` · Variante „Platzhalter mit 2-Klick“, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [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“
4. **Raum & Speisen (Bilder)**: [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`
5. **Bewertungen (Google o. a. als Band unter dem Hero oder vor der Anfahrt; nur gepflegt und mit Echtheitshinweis)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band) `bewertungsprofil-mit-echtheitshinweis` · Variante „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)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe) `css-native-karussell` · Variante „Produktreihe“, [Kaufbox mit Farb- und Größenwahl](https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt) `produkt-kaufbox-varianten` · Variante „Schnellkauf“, [Warenkorb als Seitenpanel](https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer) `warenkorb-drawer` · Variante „Seitenpanel“, [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`, [EU-Hinweis zur Gewährleistung und Garantie-Label](https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=kaufbox) `eu-gewaehrleistungshinweis` · Variante „Label-Leiste in der Kaufbox“
7. **Presse & Auszeichnungen (nur mit echten Erwähnungen und Erlaubnis)**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=auszeichnungen) `logo-wand-social-proof` · Variante „Auszeichnungen mit Jahr“
8. **Anfahrt & Öffnungszeiten (Adresse als Text, Route, Karte per 2-Klick, Status aus den echten Zeiten)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“, [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“
9. **Standorte (nur bei mehreren Häusern)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“
10. **Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Gutschein-Verkauf)**: [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“, [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Live-Uhr und Standort in Navigation oder Footer](https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/demo) `live-uhr-und-standort`

## Buttons

- Haupthandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch) `pfeil-icon-button` · Variante „Pfeil-Tausch“
- Nebenhandlung: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`

## Weitere Bausteine

- Navigation: [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)“, [Live-Uhr und Standort in Navigation oder Footer](https://cecodesign.de/lab/fundus/navigation/live-uhr-und-standort/demo) `live-uhr-und-standort`, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`
- Scroll: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`
- Schrift: [Wort-für-Wort-Aufhellen beim Scrollen](https://cecodesign.de/lab/fundus/schrift-animationen/scroll-word-highlight/demo) `scroll-word-highlight`, [Maskierte Zeilen-/Wort-Enthüllung (SplitText mit Maske)](https://cecodesign.de/lab/fundus/schrift-animationen/split-mask-reveal/demo) `split-mask-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: [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Icon-Squash-and-Stretch (Pfeil dehnt sich)](https://cecodesign.de/lab/fundus/mikroanimationen/icon-squash-stretch/demo) `icon-squash-stretch`
- Material: [Papier- und Drucktextur](https://cecodesign.de/lab/fundus/glas-material/papier-druck-textur/demo) `papier-druck-textur`
- 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`, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=produktreihe) `css-native-karussell` · Variante „Produktreihe“
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“, [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“

## 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

- graustufen-zu-farbe – Essen braucht Farbe
- halbton-raster – frisst Food-Details
- bild-trail-cursor – Gimmick, lenkt von Karte und Reservierung ab
- smooth-scroll-lenis / fullpage-snap-slides – Gäste suchen schnell Öffnungszeiten
- preloader jeder Art (prozent-zaehler, logo-aufbau-intro) – mobil unterwegs zählt jede Sekunde
- Speisekarte nur als PDF – nicht lesbar, nicht indexierbar

## 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.

## Rezept-Varianten

- **Rösterei / Café mit Online-Shop**: Shop-Regeln und nicht_verwenden aus d2c-produkt-zuerst gelten zusätzlich; Schrift, Farbe, Stil und Signatur (live-uhr-und-standort mit Öffnungsstatus) bleiben aus gastro.

## Vor der Abgabe

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