Brauerei und Brauhaus: Sud, Sorte, Stammtisch

Brauerei / Brauhaus mit Wirtschaft und Biergarten / Craft-Brauerei / Getränkemanufaktur (Limonade, Saft, alkoholfrei)

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

Bauplan tokens.css Alle Techniken

Schrift

Sud, Sorte, Stammtisch

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.

Headline: Imbue
Text: Literata

Farbe

#F3EBDD
#1E1A16
#E7D4AE
#2A1F18
#9A421B
#625749
#D6C7AA

Bewegung

cubic-bezier(0.625, 0.05, 0, 1)

Stil: Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)
Dauer: 250 (Hover, Farbe), 400 (Reiter, Akkordeon, schließen), 525 (Drawer, Dialog öffnen), 725 (Masken-Reveal eines Sudhaus-Fotos, einmal)

Aufbau der Seite

SignaturKondensierte Versal-Headlines auf volle Breite (fit-to-width)

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Foto im

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) · Produktreihe Karussell-Steuerung und Anzeige · Fortschrittsleiste Wein-Steckbrief mit Pflichtangaben · Liste Facettenfilter mit Ergebnisliste · Filterleiste
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 · Bier Kaufbox mit Farb- und Größenwahl · Produktseite EU-Hinweis zur Gewährleistung und Garantie-Label · Label-Leiste in
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 · Seitenpanel
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) · Sticky-Medium
Brauhaus und Biergarten (Speisekarte mit Allergenen, Öffnungszeiten mit Biergarten-Saison und Wetterhinweis, Tisch reservieren per 2-Klick, Telefon daneben)Speisekarte als Editorial · Bistro-Tafel Öffnungszeiten mit Live-Status · Kopfzeile Termin-Buchung per 2-Klick-Einbettung · Platzhalter Druckansicht als System · Speisekarte
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 · Liste und Monat Gutschein-Konfigurator
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 · Ticket
Wo gibt es unser Bier? (Händler und Gaststätten nach Ort; Liste ab vier Stellen mit Suche nach Postleitzahl)Standortfinder als Liste · Liste
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 · Ruhige Tabelle Team-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz Logo-Wand / Social-Proof-Band · Siegel mit Nachweis
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) · Kartenbild Firmendaten aus einer Quelle · Friseursalon
Bierpost (wenige Briefe im Jahr zu Saisonbieren und Festen; Anmeldung nur ab 18 mit Bestätigung)Newsletter-Modul mit Persönlichkeit · Saisonbrief im Danke-Seite: was jetzt passiert · E-Mail bestätigen
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 · Richtig Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Navigation: Native Dropdowns mit Popover-API, Anchor Positioning und Invokern Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt Brotkrumen-Pfad mit Strukturdaten · Voll
Scroll: Bild-Reveal per Clip-Path/Maske
Hover: Bild-Zoom in der Maske · Basis Ganze Karte klickbar · Raster
Mikroanimation: Druck-Feedback (Press/Tap)Animiertes Auswahlmenü (anpassbares select)
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Produktreihe
Footer: Newsletter-Modul mit Persönlichkeit · Saisonbrief im
Buttons: Füllung vom Eintrittspunkt · Clip-Path Kontur-Button, der sich zeichnet · Eckklammern schließen sich

OptionalKapitel-Kante als Signatur

Nicht verwenden

2.5D-Bilder mit Tiefenkarte Signatur von weingut-hofladen-herkunft
Live-Uhr und Standort in Navigation oder Footer Signatur von gastro-warm-appetitlich; das Brauhaus zeigt den Status aus echten Zeiten
In-den-Warenkorb-Flug Like/Herz mit Partikel-Burst Signaturen von d2c-produkt-zuerst
WebGL-Bildverzerrung per Shader (Hover, Linse, RGB-Shift)SVG-Filter-Verzerrung (Turbulenz und Gooey) für Bild und Text verzerrte Gläser wirken wie Rausch und verfälschen Fotos
Rotierendes Kreistext-Siegel (Badge, Stempel, Scroll-Hinweis) „Gebraut nach dem Reinheitsgebot“ als drehendes Siegel ist Klischee; die Angabe steht als Text, wenn sie stimmt
Marquee-Laufband (optional scroll-gekoppelt) Sortennamen als Laufband sind nicht lesbar und unruhig neben Preisen
Rollende Ziffern (Zahlen-Ticker / Odometer) „seit 1886“ und Hektoliter werden nicht hochgezählt
Konfetti / Erfolgs-Feier nach dem Kauf eine ruhige Bestätigung mit Lieferzeit
Smooth Scroll mit 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.

Bild und Ton

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.
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 schreiben: „süffig ohne Ende“, „Prost auf die Gesundheit“, „bekömmlich“, Trinkspiele.

Hero, Raum und Form

Hero-Raster: Wortmarke über volle Breite oben; darunter 12 Spalten: Foto im Rahmen über 1 bis 7, Satz und Wege über 8 bis 12.
Hero-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.
Sektionsabstand: clamp(64px, 9vw, 136px)
Dichte: mittel
Raum: Etikett-dicht bei Bierdaten (4 bis 8 px), Brauhaus und Sudhaus mit viel Luft.
Spalten: 12
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
Schatten: keiner
Form: Eckig wie ein Etikett; Kupfer nur auf Kauf- und Buchungsknöpfen.

Vorbilder