# Bauplan: Brauerei und Brauhaus: Sud, Sorte, Stammtisch

Rezept `brauerei-brauhaus-getraenke` · Brauerei / Brauhaus mit Wirtschaft und Biergarten / Craft-Brauerei / Getränkemanufaktur (Limonade, Saft, alkoholfrei) · Stimmung: kräftig, gesellig, handwerklich, stolz · Stand 02.11.2026

Eine Brauerei verkauft Sorten, Herkunft und Besuch: welche Biere es gibt (mit % vol, Stammwürze, Füllmenge, Preis je Liter und Pfand), wo man sie kauft oder trinkt, wann Führung und Fest sind. Die Wortmarke steht über die volle Breite wie auf dem Etikett, Sortennamen ebenso. Darunter Sorten als Reihe, Bierseite mit allen Pflichtangaben, Versand nur mit Altersprüfung, Sudhaus als Bildstrecke, Brauhaus mit Karte, Führungen und Händlersuche. Imbue schmal und hoch für Etikett-Typografie, Literata für Text. Malz, Gerste, Sud und ein Kupferton nur für Kaufen und Buchen. Abgrenzung zu weingut-hofladen-herkunft (Lage und Jahrgang, Brennerei als Variante) und gastro-warm-appetitlich (Restaurant ohne eigene Produktion).

## 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 `brauerei-brauhaus-getraenke`) und https://cecodesign.de/lab/fundus/rezepte/brauerei-brauhaus-getraenke/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `imbue` · Text: `literata`
- Größen: Wortmarke und Sortennamen Imbue in Versal, opsz 100, wght 600, über die volle Breite eingepasst (versal-kondensiert-fit-to-width: Größe je Zeile aus der gemessenen Breite, Zeilenhöhe 0.85, Laufweite +0.01em); h1 Imbue clamp(2.75rem, 1.4rem + 6vw, 7rem), Versal, wght 500; h2 clamp(2rem, 1.4rem + 2.6vw, 3.5rem), gemischte Schreibung, wght 600, opsz an die Größe gekoppelt (opsz 100 nur für Wortmarke und H1). Fließtext Literata 1.125rem (18 px), opsz automatisch, wght 400, Zeilenhöhe 1.6, höchstens 64ch. Bierdaten (% vol, Stammwürze in °P, IBU, Füllmenge, Preis je Liter, Pfand) Literata 500 mit Tabellenziffern. Knöpfe Literata 600, 1rem.
- Techniken: [Kondensierte Versal-Headlines auf volle Breite (fit-to-width)](https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/demo) `versal-kondensiert-fit-to-width`, [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`, [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

Farben des Brauens: Malz hell als Grund, Gerste als Fläche für Sortenkarten und Bierdaten, dunkler Sud für Brauhaus-Band und Footer. Ein Kupferton wie der Sudkessel nur für Kaufen, Buchen und Tickets. Bierfarben (Gold, Bernstein, Schwarz) kommen aus den Fotos, nie als Verlauf. Keine Hopfenranken, kein Bayern-Rautenmuster als Deko, keine Schaumkronen-Grafik.

- `--farbe-grund` #F3EBDD (Grund Malz)
- `--farbe-text` #1E1A16 (Text (14,6 : 1 auf Grund))
- `--farbe-flaeche` #E7D4AE (Fläche Gerste: Sortenkarten, Bierdaten, Führungen (Text 11,9 : 1))
- `--farbe-dunkel` #2A1F18 (Dunkel Sud: Brauhaus-Band, Footer (Weiß darauf 16,1 : 1))
- `--farbe-signal` #9A421B (Signal Kupfer: In den Warenkorb, Führung buchen, Tickets (Weiß darauf 6,6 : 1; als Fläche auf Grund 5,6 : 1, auf Gerste 4,6 : 1); auf Sud stattdessen Malz-Knopf mit dunkler Schrift)
- `--farbe-leise` #625749 (Leise: Meta-Angaben, Pfand und Preis je Liter (6,0 : 1 auf Grund, 4,8 : 1 auf Gerste))
- `--farbe-linie` #D6C7AA (Linie: Etikett-Linien um Bierdaten (nur Dekoration))

## 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)
- Dauer: 250 (Hover, Farbe), 400 (Reiter, Akkordeon, schließen), 525 (Drawer, Dialog öffnen), 725 (Masken-Reveal eines Sudhaus-Fotos, einmal)
- Regel: Kräftig, aber kurz: Panels öffnen mit dem Schnapp der Studio-Kurve, Fotos öffnen sich einmal. Die Wortmarke und Sortennamen stehen still und werden nur eingepasst. Kein Schaum-, Blasen- oder Füllanimation, kein schwankendes Glas. Bei prefers-reduced-motion stehen Fotos sofort, Panels erscheinen ohne Weg.
- Hinweis: token-studio-signatur ist als UI-Standard für Premium-Marken geeignet und gilt für alles: Warenkorb-Drawer 525 ms auf, 400 ms zu; Reiter und Akkordeon 400 ms; Hover 250 ms. Die Wortmarke steht; sie wird nur eingepasst, nicht animiert. Lange Scroll-Reveals schließt der Stil aus, deshalb öffnen sich Fotos nur einmal per Maske in 725 ms.

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.625, 0.05, 0, 1)` (--ease) für alles (Schnapp der Studio-Kurve): Panels, Drawer, Fotos einmal
- Dauern: klein 250 ms, mittel 525 ms, gross 725 ms, seitenwechsel 525 ms, schliessen 400 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit Tisch und Shop: ab 0 ms, steht
2. Wortmarke (versal-kondensiert-fit-to-width): ab 0 ms, steht, nur eingepasst (Rezept)
3. Hero-Foto (inset-rahmen): ab 0 ms, 725 ms, Maske öffnet sich einmal, --ease
4. Rest: beim Scrollen, erst beim Scrollen (scroll)
- Ende nach 725 ms. Wiederholt: Foto steht.

**Scrollen** (höchstens drei Reveal-Arten):

- Bild-Maske (`clip-path-bild-reveal`): Sudhaus- und Biergarten-Fotos; 725ms, Versatz 40 ms, Maske öffnet sich einmal; einmal, wenn 33 % sichtbar (IntersectionObserver)
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Sortennamen und Wortmarke (stehen still, Rezept), Preise, Alkoholgehalt, Allergene, Reservierung

**Hover** (250 ms ein, 175 ms aus, --ease; nur mit Zeiger):

- Link: Unterstreichung wächst in 250 ms
- Knopf: fuellung-vom-eintrittspunkt basis (Füllung 475 ms, --dauer-button); kontur-button-zeichnen ecken
- Karte: Sorte: Bild scale 1.05 im Rahmen (bild-zoom-in-maske basis)
- Bild: wie Karte

**Signatur** `versal-kondensiert-fit-to-width`: Die Versalzeilen stehen und füllen die Breite (keine Animation, Rezept). Der eine bewegte Moment ist die Maske des Hero-Fotos. Auslöser: keiner; Wiederholung: keine.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen). Richtung: vorwaerts (Sorten → Sorte, Wirtschaft → Speisekarte) von rechts, zurueck gespiegelt. Geteilt: kopf. Dauer 525 ms.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Kräftig, aber kurz (Rezept). Fotos öffnen sich nur einmal (Rezept).

**Reduzierte Bewegung:** Fotos stehen sofort, Panels ohne Weg (Rezept); Seitenwechsel als Überblendung. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Schaum-, Blasen- oder Füllanimation, schwankendes Glas (Rezept); Hopfenranken als Animation; Altersabfrage als Sperrbildschirm (Rezept).

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und animationsstil_hinweis (Drawer 525/400). Rest eigene Festlegung.

## 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, 136
- Sektionsabstand: clamp(64px, 9vw, 136px)
- Dichte: mittel
- Hinweis: Etikett-dicht bei Bierdaten (4 bis 8 px), Brauhaus und Sudhaus mit viel Luft.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(12px, 2vw, 28px)
- Maximale Breite: 1320px
- Raster: Wortmarke über volle Breite, Hero 7/5 darunter. Sorten als Reihe mit Etikett-Karten, Bierseite 7/5 (Bild und Name links, Kaufbox rechts sticky).
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 1px #D6C7AA als Etikett-Rahmen um Bierdaten und Kaufbox
- Schatten: keiner
- Form: Eckig wie ein Etikett; Kupfer nur auf Kauf- und Buchungsknöpfen.

## Bildsprache

- Licht: Warmes Licht im Sudhaus, kühles Kellerlicht, Abendlicht im Biergarten.
- Ausschnitt: Kessel und Leitungen im Detail, Brauer:in bei der Arbeit, Flasche und Glas als ruhiger Freisteller, Biergarten in der Totale.
- Personen: Ja: Team mit Einwilligung; Gäste nur erwachsen und mit Einwilligung, nie beim Trinken als Hauptmotiv.
- Formate: 3:2, 4:5, 1:1
- Nicht: Keine Stock-Biergläser, keine Jugendlichen, kein Autofahren, keine übertriebenen Schaumkronen.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz.

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

- Anrede: Sie oder du je nach Haus, dann durchgehend
- Sätze: Kräftig und kurz in den Sorten, erzählend im Sudhaus, nüchtern in den Zahlen.
- Haltung: Stolz auf das Handwerk, gesellig, ohne Trinkaufforderung.
- Tonproben: Helles, 4,9 % vol, 12,1 °P. Nur im Sommer., Führung dienstags um 18 Uhr, 75 Minuten, mit Verkostung ab 16.
- Nicht: „süffig ohne Ende“, „Prost auf die Gesundheit“, „bekömmlich“, Trinkspiele.

## Hero

Oben die Wortmarke der Brauerei über die volle Breite in Imbue Versal, darunter ein Foto im Rahmen auf Malz (foto-hero, Variante inset-rahmen): Sudhaus, Gärkeller oder Biergarten im echten Licht. Daneben ein Satz zu Ort und Brauweise und zwei Wege: „Unsere Biere“ und „Brauhaus und Führungen“. Kein Altersabfrage-Fenster vor dem ersten Bild, keine Stock-Biergläser.

- Raster: Wortmarke über volle Breite oben; darunter 12 Spalten: Foto im Rahmen über 1 bis 7, Satz und Wege über 8 bis 12.
- Bild: Echtes Foto aus Sudhaus, Keller oder Biergarten, 4:5 im Rahmen auf Malz.
- Überschrift: Die Wortmarke ist die H1 (Name der Brauerei, Imbue Versal, eingepasst); kein Label darüber.
- Handlung: „Unsere Biere“ (Kupfer gefüllt) und „Brauhaus und Führungen“ (Kontur mit Eckklammern).
- Zusatz: Brauhaus-Status aus echten Zeiten im Kopf.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=inset-rahmen) `foto-hero` · Variante „Foto im Rahmen auf der Markenfarbe“

## Sektionen in dieser Reihenfolge

1. **Unsere Biere (ganzjährige und saisonale Sorten als Reihe; je Sorte Name in Etikett-Typografie, Stil, % vol, Füllmenge, Preis, Grundpreis je Liter, Pfand getrennt; ausgetrunkene Sude mit Hinweis; Filter erst ab etwa 15 Sorten)**: [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“, [Karussell-Steuerung und Anzeige](https://cecodesign.de/lab/fundus/galerien-slider/karussell-steuerung/demo?v=fortschritt) `karussell-steuerung` · Variante „Fortschrittsleiste“, [Wein-Steckbrief mit Pflichtangaben](https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/demo?v=liste) `wein-steckbrief-pflichtangaben` · Variante „Kompakte Zeile und Warenkorb“, [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“
2. **Bierseite (Sortenname über die volle Breite, Steckbrief mit Pflichtangaben vor dem Kauf: Bezeichnung, Alkohol in % vol, Allergene hervorgehoben wie Gerstenmalz und Weizenmalz, Füllmenge, Lebensmittelunternehmer mit Anschrift; dazu Stammwürze, IBU, Hopfen und Malz; Kaufbox für Flasche, Kasten oder Fass mit Pfand)**: [Wein-Steckbrief mit Pflichtangaben](https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/demo?v=bier) `wein-steckbrief-pflichtangaben` · Variante „Bier mit Pfand und MHD“, [Kaufbox mit Farb- und Größenwahl](https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=seite) `produkt-kaufbox-varianten` · Variante „Produktseite“, [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“
3. **Warenkorb, Versand und Abholung (Drawer mit Grundpreis, Pfand und MwSt.; Kasten und Fass nur zur Abholung oder regionalen Lieferung; Versand mit Alters- und Identitätsprüfung bei der Übergabe; Abholung an der Rampe als Versandart)**: [Warenkorb als Seitenpanel](https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer) `warenkorb-drawer` · Variante „Seitenpanel“
4. **Vom Malz zum Bier (Sudhaus, Gärkeller, Lager, Abfüllung; je Schritt ein starkes Foto und echte Zahlen wie Sudgröße in Hektolitern und Lagerzeit in Wochen)**: [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“
5. **Brauhaus und Biergarten (Speisekarte mit Allergenen, Öffnungszeiten mit Biergarten-Saison und Wetterhinweis, Tisch reservieren per 2-Klick, Telefon daneben)**: [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=bistro) `speisekarte-editorial` · Variante „Bistro-Tafel“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“, [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“, [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=speisekarte) `druckansicht-print` · Variante „Speisekarte“
6. **Führungen, Braukurse, Feste (Datum, Dauer, Preis pro Person, freie Plätze, Mindestalter für die Verkostung; Gruppen auf Anfrage; Tickets und Gutscheine nur mit Ticket- bzw. Zahlungsdienst)**: [Programm-Kalender mit Liste und Monat](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“, [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`
7. **Veranstaltung-Detailseite (je Termin eine Seite, aufgerufen aus der Liste: Führung, Braukurs oder Fest mit Datum, Dauer, Preis pro Person, Mindestalter für die Verkostung, Treffpunkt und Buchung; freie Plätze nur aus echter Quelle, Vergangenes mit Hinweis statt Fehlerseite)**: [Veranstaltung: Detailseite mit Zuständen](https://cecodesign.de/lab/fundus/sektionen/veranstaltung-detailseite/demo?v=ticket) `veranstaltung-detailseite` · Variante „Ticket“
8. **Wo gibt es unser Bier? (Händler und Gaststätten nach Ort; Liste ab vier Stellen mit Suche nach Postleitzahl)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=liste) `standortfinder-liste` · Variante „Liste mit Übersicht und Karte per 2-Klick“
9. **Brauerei und Familie (seit wann, wer braut, Hektoliter im Jahr; nur echte Zahlen, stehend, nicht hochgezählt; Mitgliedschaften und Bio nur mit Nachweis)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle) `zahlen-fakten-section` · Variante „Ruhige Tabelle“, [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=statement) `team-ueber-mich-layout` · Variante „Statement-Satz mit Inline-Bildern“, [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=siegel-nachweis) `logo-wand-social-proof` · Variante „Siegel mit Nachweis“
10. **Anfahrt, Rampe und Kontakt (Adresse als Text, Abholzeiten an der Rampe, Parken, Bus und Bahn mit dem Hinweis, nach dem Besuch nicht selbst zu fahren; Karte per 2-Klick)**: [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“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
11. **Bierpost (wenige Briefe im Jahr zu Saisonbieren und Festen; Anmeldung nur ab 18 mit Bestätigung)**: [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“, [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=bestaetigen) `danke-seite-naechste-schritte` · Variante „E-Mail bestätigen“
12. **Vertrag widerrufen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Bierabo mit Kündigungsbutton; Erklärung nach BFSG beim Shop prüfen lassen)**: [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)

- [Kondensierte Versal-Headlines auf volle Breite (fit-to-width)](https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/demo) `versal-kondensiert-fit-to-width`

## Moment (Pflicht: woran man sich erinnert)

- Was: Die Wortmarke füllt in Versal die volle Breite, darunter öffnet sich das Foto aus Sudhaus oder Biergarten im Rahmen.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß: Wortmarke über 100 vw, Foto mindestens 8 Spalten
- Muster: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=inset-rahmen) `foto-hero` · Variante „Foto im Rahmen auf der Markenfarbe“, [Kondensierte Versal-Headlines auf volle Breite (fit-to-width)](https://cecodesign.de/lab/fundus/typo-techniken/versal-kondensiert-fit-to-width/demo) `versal-kondensiert-fit-to-width`
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## 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=ecken) `kontur-button-zeichnen` · Variante „Eckklammern schließen sich“

## Weitere Bausteine

- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- 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=basis) `bild-zoom-in-maske` · Variante „Basis: nur das Bild zoomt“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`
- 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: [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?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=bestaetigen) `danke-seite-naechste-schritte` · Variante „E-Mail bestätigen“
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Optional (nur als Zusatz)

- [Kapitel-Kante als Signatur](https://cecodesign.de/lab/fundus/scroll/kapitel-kante-signatur/demo?v=zeitachse) `kapitel-kante-signatur` · Variante „Zeitachse (Bäckerei, über Nacht)“

## Nicht verwenden

- tiefenkarten-relighting – Signatur von weingut-hofladen-herkunft
- live-uhr-und-standort – Signatur von gastro-warm-appetitlich; das Brauhaus zeigt den Status aus echten Zeiten
- in-den-warenkorb-flug / like-herz-burst – Signaturen von d2c-produkt-zuerst
- webgl-bildverzerrung / svg-filter-verzerrung – verzerrte Gläser wirken wie Rausch und verfälschen Fotos
- kreistext-siegel-rotierend – „Gebraut nach dem Reinheitsgebot“ als drehendes Siegel ist Klischee; die Angabe steht als Text, wenn sie stimmt
- marquee-laufband – Sortennamen als Laufband sind nicht lesbar und unruhig neben Preisen
- zahlen-odometer – „seit 1886“ und Hektoliter werden nicht hochgezählt
- konfetti-erfolg – nach dem Kauf eine ruhige Bestätigung mit Lieferzeit
- smooth-scroll-lenis – stört Drawer und Checkout
- Altersabfrage als Sperrbildschirm vor dem ersten Inhalt – vom Jugendschutzgesetz nicht verlangt, geprüft wird bei der Übergabe
- Stock-Biergläser, Hopfenranken, Rautenmuster, Schaumkronen-Grafik – eigene Fotos aus Sudhaus, Keller und Biergarten
- „bekömmlich“, „gesund“, „isotonisch“ bei Bier mit Alkohol – gesundheitsbezogene Angaben sind bei Getränken über 1,2 % vol unzulässig; Ansprache Jugendlicher, Trinkspiele, Autofahren im Bild

## Regeln

- Erster Bildschirm: Wortmarke über die volle Breite, Foto im Rahmen, ein Satz zu Ort und Brauweise, zwei Wege „Unsere Biere“ und „Brauhaus und Führungen“. Kein Altersabfrage-Fenster davor.
- Signatur (versal-kondensiert-fit-to-width): Wortmarke und Sortennamen in Imbue Versal, jede Zeile randvoll in eigener Größe wie auf dem Etikett (Größe aus der gemessenen Breite, keine Bibliothek). Auf schmalen Bildschirmen die Zeilen neu aufteilen, damit nichts unter 2.5rem fällt. Nie für Fließtext oder lange Namen.
- Preise (Preisangabenverordnung): Gesamtpreis inkl. MwSt. und Grundpreis je Liter bei jedem Preis, Pfand als eigene Zeile und nicht im Gesamtpreis; Versandkosten und Lieferzeit vor dem Kauf; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage. Bestellknopf „zahlungspflichtig bestellen“. Vom Kunden prüfen lassen.
- Pflichtangaben am Bier vor dem Kauf: Bezeichnung, Alkoholgehalt in % vol, Allergene (z. B. Gerste, Weizen) hervorgehoben, Nettofüllmenge, Name und Anschrift des Lebensmittelunternehmers; ein Zutatenverzeichnis ist bei Getränken über 1,2 % vol nicht vorgeschrieben, freiwillig aber gut. Alkoholfreie Getränke mit Zutaten und Nährwerttabelle. In der Liste die Variante liste von wein-steckbrief-pflichtangaben als Zeilenaufbau. Vom Kunden prüfen lassen.
- Jugendschutz (§ 9 JuSchG): Bier nicht an unter 16-Jährige, Biermischgetränke mit Spirituosen nicht an unter 18-Jährige. Versand mit Alters- und Identitätsprüfung bei der Übergabe, Abholung mit Ausweis; ein Klick „Ich bin über 18“ reicht nicht. Newsletter nur ab 18. Vom Kunden prüfen lassen.
- Werbung: keine gesundheitsbezogenen Angaben bei Getränken über 1,2 % vol, keine Ansprache Jugendlicher, keine Verbindung mit Autofahren oder Leistung (Verhaltensregeln des Deutschen Werberats); „Reinheitsgebot“ und Bio nur, wenn sie stimmen, Bio mit Kontrollstellen-Nummer.
- Verträge: Widerrufs-Button im Footer, Bierabo mit Kündigungsbutton (widerruf-und-kuendigung-schaltflaeche, Variante richtig); Tickets für Führungen mit festem Termin ohne Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB), Gutscheine mit. EU-Gewährleistungshinweis beim Warenverkauf (eu-gewaehrleistungshinweis). Texte vom Kunden.
- Brauhaus: Speisekarte mit Allergenen und Zusatzstoffen, Preise inkl. MwSt.; Öffnungszeiten aus einer Quelle mit Biergarten-Saison und Feiertagen.
- Knöpfe: Kupfer gefüllt (fuellung-vom-eintrittspunkt, Variante basis) nur für Kaufen, Buchen und Tickets; Nebenwege als Kontur mit Eckklammern wie die Passermarken eines Etiketts (kontur-button-zeichnen, Variante ecken).
- kapitel-kante-signatur (Variante zeitachse) nur als Zusatz im Kapitel „Vom Malz zum Bier“: Stationen statt Uhrzeit (Schroten, Maischen, Läutern, Kochen, Gären, Lagern) mit echten Dauern aus dem Sudhaus; die Wortmarke bleibt still.

## Rezept-Varianten

- **Getränkemanufaktur ohne Alkohol (Limonade, Saft, Kombucha)**: Schrift, Farbe, Stil und Signatur bleiben; die Altersprüfung entfällt. Pflichtangaben mit Zutaten, Allergenen und Nährwerttabelle vor dem Kauf; Zuckerangaben und gesundheitsbezogene Angaben nur nach der Health-Claims-Verordnung; Mehrweg und Pfand getrennt. Umweltaussagen (z. B. „klimaneutral“) nur mit Nachweis.
- **Brauhaus und Wirtschaft im Vordergrund**: Wenn die Gaststätte das Hauptgeschäft ist: Brauhaus mit Speisekarte, Reservieren und Biergarten-Status direkt unter dem Hero; Sorten als kurze Liste mit Preisen je Glas. Shop nur als Link. Die Wortmarke bleibt Signatur, keine Live-Uhr.

## Vor der Abgabe

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