Lebensmittelhandwerk: Theke, Ofen, Filiale

Bäckerei / Konditorei / Café-Konditorei / Metzgerei und Fleischerei / Feinkost mit Theke (auch mit mehreren Filialen)

Die Theke verkauft Ware des Tages: Welche Filiale hat jetzt offen, was gibt es heute, kann ich vorbestellen und wann liegt es bereit. Der Name des Hauses trägt die Seite als große Wortmarke über einem Fotoband aus der Backstube. Darunter sofort die Filialen mit Status, dann Sortiment mit Allergenen, Vorbestellung mit Abholfenster, Torten und Platten auf Anfrage, Mittagstisch und die Suche nach Azubis. Shrikhand nur für Name und Überschriften, Onest für alles, was man lesen und vergleichen muss. Mehl, Kruste und Ofenschwarz als Farben, ein Krustenrot nur für Vorbestellen. Abgrenzung zu gastro-warm-appetitlich (Restaurant mit Reservierung und Karte) und d2c-produkt-zuerst (Versandmarke).

Bauplan tokens.css Alle Techniken

Schrift

Theke, Ofen, Filiale

Die Theke verkauft Ware des Tages: Welche Filiale hat jetzt offen, was gibt es heute, kann ich vorbestellen und wann liegt es bereit.

Headline: Shrikhand
Text: Onest

Farbe

#F7F1E6
#241B14
#EBD8BB
#2B211B
#8A3C12
#665746
#DDCDB4

Bewegung

cubic-bezier(0.34, 1.56, 0.64, 1)

Stil: Animationsstil „Federnd verspielt“
Stil für UI: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: 150 (Hover, Farbe), 400 (Mengen-Knopf, Häkchen), 300 (Panel, Reiter öffnen), 200 (schließen), 800 (Buchstaben der Wortmarke einmal beim Laden, 60 je Buchstabe) ; 800 (Seitenwechsel als Laib, zurück 540, cubic-bezier(0.37, 0, 0.63, 1))

Aufbau der Seite

SignaturFoto-Hero mit Wortmarke Kapitel-Kante als Signatur

HeroFoto-Hero mit Wortmarke · Wortmarke über dem FotooderFoto-Hero mit Leiste, Karte oder Weiche · Weiche zu den Filialen

Heute geöffnet, Filiale wählen (direkt unter dem Hero: je Filiale Ort, Status aus echten Zeiten, Sonntag und Feiertage nach feiertage.json; bei nur einem Laden der Status allein; ab dem Abend Abverkauf mit Preis und Uhrzeit, nur wenn es ihn gibt)Standortfinder als Liste · Nur Liste Öffnungszeiten mit Live-Status · Kopfzeile Aktion mit Preisangabe nach § 11 PAngV · Abverkauf am Abend
Sortiment (Brot, Brötchen, Kuchen und Torten, Snacks, Saisonales als Reiter; Wochentagsbrote mit Tag; je Produkt Preis, Stück oder Gewicht, Grundpreis bei Ware nach Gewicht; Zutaten und Allergene auf der Produktseite)Tabs und Segmente mit Pfeiltasten · Automatisch Raster am Desktop, Wischreihe am Telefon · Zweireihig Zeichnungsfamilie für Produkte, Läden und Leistungen · Backwaren in der Theke
Vorbestellen und abholen (Artikel und Menge → Filiale und Abholtag mit Zeitfenster → Kontakt; Bestellschluss am Vortag nennen; Bestätigung mit Abholnummer und Zeitfenster; Zahlung bei Abholung oder online)Vorbestellung mit Abholtag und Zeitfenster · Backstube Fehlerzusammenfassung im Formular · Liste Mengen-Stepper mit Einheit und Summe · Theke
Torten und Platten für Anlässe (Fotos eigener Arbeiten, ab-Preis je Stück oder Person, Vorlauf in Tagen; Motivwunsch mit Foto-Upload; Platten für Feiern und Büro)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Fenster Kontakt- und Anfrageformular als eigene Sektion · Anfrage-Sektion Datei-Ablage mit Vorschau und Prüfung · Ein Knopf und Kacheln
Mittagstisch und Café (Wochenkarte mit Datum, Preise inkl. MwSt., Allergene und Zusatzstoffe je Gericht; Frühstück)Speisekarte als Editorial · Theke-Allergene Druckansicht als System · Speisekarte
Backstube und Herkunft (wann gebacken wird, Teigruhe in Stunden, woher Mehl, Milch oder Fleisch kommen; nur echte Angaben; Bio nur mit Kontrollstellen-Nummer)Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Medium Logo-Wand / Social-Proof-Band · Siegel mit Nachweis
Filialen (ab vier Filialen Liste mit Suche; je Filiale Adresse, Zeiten, Café-Plätze, Parken; Karte per 2-Klick)Standortfinder als Liste · Liste Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Standorte Standort-Detailseite · Filiale
Ausbildung und Stellen (Bäcker:in, Konditor:in, Fleischer:in, Fachverkäufer:in; Arbeitszeiten ehrlich, früher Beginn, Zuschläge, Ausbildungsvergütung je Jahr; jede Stelle mit eigener Seite)Stellenliste mit Kurzbewerbung · Viele Stellen Stellenseite mit Gehalt, Ablauf und JobPosting-Daten · Ausbildung
Gutscheine und Versand (Gutscheine nur mit Zahlungsdienst und Codeverwaltung; Versand von Ware nur mit Haltbarkeit und allen Pflichtangaben vor dem Kauf)Gutschein-Konfigurator EU-Hinweis zur Gewährleistung und Garantie-Label · Footer-Link und Seite Eingabehilfen und Autofill · Adresse
Vertrag widerrufen, Abo kündigen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Brot- oder Kaffeeabo mit Kündigungsbutton; Erklärung nach BFSG bei Online-Bestellung prüfen lassen)Widerrufs- und Kündigungs-Button · Richtig Seite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Seitenwechsel: Seitenwechsel in wachsender Markenform · Laib von unten Wortmarke wird Kopfmarke · Beides
Navigation: Native Dropdowns mit Popover-API, Anchor Positioning und Invokern Mobile Bottom-Navigation und Bottom-Sheet-Menü · Daumen-Knopf
Scroll: Kapitel-Kante als Signatur · Zeitachse
Hover: Ganze Karte klickbar · Raster
Mikroanimation: Animiertes Auswahlmenü (anpassbares select)Druck-Feedback (Press/Tap)Animierte Checkbox und Radio Bewegung als CSS-Funktion · Drei Federn
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Fenster
Footer: Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit) · Praxis
Buttons: Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)Pfeil-Icon-Button · Seitenwechsel

Nicht verwenden

Live-Uhr und Standort in Navigation oder Footer Signatur von gastro-warm-appetitlich; der Status kommt aus echten Öffnungszeiten
In-den-Warenkorb-Flug Like/Herz mit Partikel-Burst Signatur von d2c-produkt-zuerst; die Vorbestellung bestätigt ruhig
Bento-Grid mit lebenden Zellen Produkt-Bento gehört zu d2c; das Sortiment steht als Reiter und Kacheln
Marquee-Laufband (optional scroll-gekoppelt) Tagesangebote als Laufband sind nicht ganz lesbar
Rollende Ziffern (Zahlen-Ticker / Odometer) „seit 1921“ und „3.000 Brötchen am Tag“ werden nicht hochgezählt
Grain-/Noise-Überlagerung Papier- und Drucktextur Mehlstaub- und Papier-Fake-Texturen; die Fotos zeigen das Material
Smooth Scroll mit Lenis stört Vorbestellung und Reiter
Weizenähren, Rot-Weiß-Karo, Bäckermütze als Ornament und Stockfotos von Brotkörben – Klischee; eigene Fotos aus Backstube und Theke
„hausgemacht“, „aus eigener Backstube“, „regional“ ohne Beleg – Herkunfts- und Herstellungsangaben müssen stimmen
„gesund“, „bekömmlich“ – gesundheitsbezogene Angaben nur nach der Health-Claims-Verordnung

Regeln

Erster Bildschirm: Wortmarke, ein Satz zu Ort und Backstube, Vorbestellen; direkt darunter die Filialen mit Status. Bei langen Namen foto-hero-mit-leiste (Variante weiche) statt Wortmarke.
Signatur (foto-hero-wortmarke, Variante gestapelt): Der Name steht randlos, gemessen und eingepasst, das Fotoband darunter zeigt Backstube oder Theke. Die Buchstaben laufen nur beim ersten Laden ein (Session), bei reduzierter Bewegung stehen sie. Beim Scrollen und beim Verlassen der Startseite wird der Name zur Kopfmarke (wortmarke-wird-kopfmarke, Variante beides), ohne dass die Buchstaben neu einlaufen.
Öffnungszeiten aus einer Quelle (firmendaten-strukturiert): Filialen, Sonntagsöffnung, Feiertage nach Bundesland, Betriebsferien als Sonderzeit; ein falsches „Jetzt geöffnet“ ist schlimmer als keine Anzeige.
Allergene und Zutaten: Bei loser Ware im Laden die Allergeninformation schriftlich oder mit sichtbarem Hinweis, wo man sie bekommt; bei Vorbestellung und Versand online alle Pflichtangaben vor dem Kauf (Bezeichnung, Zutaten, Allergene hervorgehoben, Menge, Hersteller). Mittagstisch mit Allergenen und Zusatzstoffen je Gericht. Vom Kunden prüfen lassen.
Preise: inkl. MwSt.; bei Ware nach Gewicht Grundpreis je kg; Stückpreis bei Brötchen und Kuchen; Pfand und Versand getrennt.
Vorbestellung: Bestellschluss und Abholfenster offen nennen, Bestätigung mit Abholnummer. Schnell verderbliche Ware und Torten nach Kundenwunsch haben kein Widerrufsrecht (§ 312g Abs. 2 Nr. 1 und 2 BGB); bei Abos und Gutscheinen gelten Widerruf und Kündigungsbutton (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Vom Kunden prüfen lassen.
Typografie: Shrikhand nur für Wortmarke, h1 und h2; alles mit Zahlen, Allergenen und Formularen in Onest mit Tabellenziffern.
Knöpfe: Krustenrot gefüllt mit allen Zuständen (button-zustaende) nur für Vorbestellen und Bestellung abschicken; Nebenwege als Pfeil-Pille (pfeil-icon-button, Variante seitenwechsel).
Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Handwerkskammer und Meister:in (Bäcker, Konditor und Fleischer sind zulassungspflichtig); Bio und Öko nur mit Kontrollstellen-Nummer; keine Umweltaussagen ohne Nachweis; Fotos von Mitarbeitenden mit Einwilligung; Stellen mit JobPosting. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen.
Leitidee über die ganze Seite (z. B. „Über Nacht“): Kapitelkanten als Zeitachse von der Nacht zum Morgen (kapitel-kante-signatur, Variante zeitachse) zwischen Filialen, Backstube und Sortiment, mit echten Uhrzeiten aus der Backstube; der Seitenwechsel geht als Laib auf (seitenwechsel-wachsende-form, Variante laib, 800 ms hin, 540 ms zurück, cubic-bezier(0.37, 0, 0.63, 1)); die Wortmarke ist das gemeinsame Element. Sortiment, Leerzustand und Hero ohne eigene Fotos als Zeichnungen aus einer Familie (zeichnungsfamilie-produkte, Variante backwaren), nie gemischt mit Stockfotos auf derselben Seite.

Bild und Ton

Licht: Streiflicht in der Backstube am frühen Morgen, warmes Thekenlicht; nicht übersättigt.
Ausschnitt: Hände am Teig, Kruste im Anschnitt, Theke in der Halbtotale, Filiale von außen.
Personen: Ja: eigenes Team mit Einwilligung; Kundschaft nur mit Erlaubnis.
Formate: 21:9, 4:5, 1:1
Nicht: Keine Stockfotos von Brotkörben, keine Weizenähren-Deko, kein KI-Brot ohne Kennzeichnung. Ohne eigene Fotos: Zeichnungen aus einer Familie (gleiche Linie, ein Akzent) statt Stock.
Anrede: Sie
Sätze: Kurz und konkret: Produkt, Tag, Uhrzeit, Preis.
Haltung: Freundlich wie an der Theke, stolz auf das Handwerk, ohne Werbesprech. Ein junges Café darf duzen, dann durchgehend.
Tonproben: Dinkelkruste, 750 g, gibt es dienstags und freitags., Bis 18 Uhr bestellen, ab 7 Uhr abholen.
Nicht schreiben: „mit Liebe gebacken“, „Genuss pur“, „ofenfrisch“ bei Aufbackware, „Bio“ ohne Kontrollstellen-Nummer.

Hero, Raum und Form

Hero-Raster: Volle Breite: Satz oben links über Spalte 1 bis 5, Vorbestellen oben rechts, Wortmarke randlos darunter, Fotoband 21:9 bis zum Rand.
Hero-Bild: Echtes Foto aus Backstube oder Theke, Streiflicht; mobil Hochformat 4:5 unter der Wortmarke. Ohne eigene Fotos eine große Zeichnung der Familie (zeichnungsfamilie-produkte, backwaren) im selben Format.
Überschrift: Die Wortmarke ist die H1 (Name des Hauses, Shrikhand, eingepasst); kein Label darüber, der Satz zur Backstube steht als Absatz.
Handlung: „Vorbestellen“ (Krustenrot gefüllt) oben rechts; „Filialen und Zeiten“ als Pfeil-Pille unter dem Fotoband.
Zusatz: Direkt unter dem Hero die Filialen mit Status; mobil untere Leiste Vorbestellen / Anrufen.
Sektionsabstand: clamp(64px, 8vw, 128px)
Dichte: mittel
Raum: Theke dicht, Backstube luftig: Preislisten mit 8 px Zeilenabstand, Kapitel mit viel Raum. Mobil eine untere Leiste Vorbestellen / Anrufen.
Spalten: 12
Maximale Breite: 1320px
Raster: Wortmarke über volle Breite, Fotoband 21:9 darunter. Sortiment als Kachelraster 4 Spalten, mobil zweireihige Wischreihe. Backstube 6/6 mit stehendem Bild.
Radius klein: 6px
Radius groß: 16px
Schatten: keiner
Form: Weich wie ein Laib: runde Ecken an Kacheln und Panels, Knöpfe als Pille. Krustenrot nur für Vorbestellen.

Vorbilder