Weingut und Hofladen: Herkunft zuerst

Weingut / Winzerhof / Hofladen / Manufaktur aus der Landwirtschaft / Brennerei (optional mit Ferienzimmern)

Herkunft ist das Produkt: Jeder Wein hängt an einer Lage, einem Boden und einem Jahrgang, und genau so ist die Seite gebaut. Sortiment mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter in einer Mono wie auf dem Etikett, Pflichtangaben direkt am Wein, Zustellung nur mit Altersprüfung. Weinproben und Hoffeste als Termine, der Hofladen mit echtem Öffnungsstatus, Ferienzimmer optional. Eine klassische Garamond für Lagen und Geschichten, DM Mono für alle Zahlen, Kalkstein und Schiefer als Grund, Buntsandstein-Rot nur für Kaufen. Signatur: ein Foto der Lage, über das man die Sonne ziehen kann, um zu sehen, wann der Hang Licht bekommt. Abgrenzung zu d2c-produkt-zuerst (Produkt-Bento, Warenkorb-Flug) und gastro-warm-appetitlich (Karte, Reservieren, Live-Uhr): Hier führen Lage und Jahrgang, nicht das Produktfoto und nicht die Speisekarte.

Bauplan tokens.css Alle Techniken

Schrift

Herkunft zuerst

Herkunft ist das Produkt: Jeder Wein hängt an einer Lage, einem Boden und einem Jahrgang, und genau so ist die Seite gebaut.

Weingut

Headline: EB Garamond
Text: EB Garamond
Akzent: DM Mono

Farbe

#F1ECE2
#22211F
#E6DCCB
#2F3236
#8A3A2B
#5A564F
#D8CFC0

Bewegung

cubic-bezier(0.37, 0, 0.63, 1)

Stil: Animationsstil „Luxus weich“
Stil für UI: Animationsstil „Asymmetrisch auf/zu“ (schnell zu, langsam auf)
Dauer: 150 (Farbe, Hover), 300 (Drawer, Filter, Popover öffnen), 200 (schließen), 1600 (Masken-Reveal eines Lagenbilds), 2200 (Zurückskalieren 1.08 → 1, einmalig); Licht der Signatur per Lerp 0.06 je Bild

Aufbau der Seite

Signatur2.5D-Bilder mit Tiefenkarte

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Bildunterschrift als

Weine nach Linie und Jahrgang (Guts-, Orts- und Lagenweine; Filter nach Farbe, Rebsorte, Geschmack, Lage und Jahrgang erst ab etwa 15 Weinen, sonst eine Liste; jede Zeile mit Jahrgang, Füllmenge, Preis und Grundpreis je Liter; ausgetrunkene Jahrgänge bleiben mit Hinweis sichtbar; auf der Startseite eine Reihe mit fünf bis acht Weinen)Facettenfilter mit Ergebnisliste · Filterleiste Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Produktreihe Karussell-Steuerung und Anzeige · Fortschrittsleiste
Weinseite (Steckbrief mit allen Pflichtangaben am Wein: Alkohol in % vol, „enthält Sulfite“, Füllmenge, Herkunft, Erzeugerabfüllung mit Anschrift, Zutaten und Nährwerte bei Weinen, die nach dem 08.12.2023 hergestellt wurden; Kaufbox für Flasche, Magnum oder Karton; Lage und Boden als Link)Wein-Steckbrief mit Pflichtangaben Kaufbox mit Farb- und Größenwahl · Produktseite Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Produktgalerie EU-Hinweis zur Gewährleistung und Garantie-Label · Label-Leiste in
Warenkorb und Versand (Drawer mit Grundpreis und MwSt.; Versandkosten je Karton, Lieferzeit, Zustellung nur mit Alters- und Identitätsprüfung; Abholung im Hofladen als Versandart)Warenkorb als Seitenpanel · Seitenpanel
Herkunft: Lagen und Boden (Lagenfoto, über das man die Sonne zieht; je Lage Boden, Ausrichtung, Neigung, Höhe, Rebsorten, Klassifikation und die Weine daraus; Übersichtskarte als eigene Zeichnung ohne Drittanbieter)2.5D-Bilder mit Tiefenkarte · Abendsonne Lagen mit Steckbrief und eigener Karte Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung · Überblenden
Der Jahrgang (Lesebericht des aktuellen Jahrgangs: Wetter, Lese, Stil, Menge; einmal im Jahr als Magazinbeitrag, ältere Jahrgänge als Archiv)Editorial-/Magazin-Layout · Magazin
Weinproben und Hoffeste (Datum, Uhrzeit, Dauer, Preis pro Person, freie Plätze, Buchung; als Liste nach Monat, erst ab etwa acht Terminen im Monat als Kalender; Tickets über das Ticketsystem erst nach Klick; Gruppen auf Anfrage)Programm-Kalender mit Liste und Monat · Liste und Monat Termin-Buchung per 2-Klick-Einbettung · Link-out
Hofladen und Vinothek (Öffnungszeiten mit Status, Sonderzeiten zu Lese, Hoffest und Feiertagen; was es gibt, eigene Erzeugnisse getrennt von Zugekauftem; Probierausschank; Abholung von Online-Bestellungen)Öffnungszeiten mit Live-Status · Karte
Familie und Arbeit im Weinberg (wer hier arbeitet, als Satz mit kleinen Porträts; Arbeit im Jahr; Bio- oder Öko-Angaben nur mit Kontrollstellen-Nummer)Team-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz Logo-Wand / Social-Proof-Band · Siegel mit Nachweis
Ferienzimmer (nur, wenn es sie gibt: Zimmer mit Lagennamen, Preis pro Nacht inkl. MwSt., Anfrage; Online-Buchung nur mit eigener Booking-Engine)Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe Kontakt- und Anfrageformular als eigene Sektion
Anfahrt und Kontakt (Adresse als Text, Parken, Bus und Wanderweg durch die Lagen, Karte per 2-Klick)Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild Firmendaten aus einer Quelle · Friseursalon
Weinbrief (wenige Briefe im Jahr, an die Saison gebunden: Jahrgangsvorstellung, Hoffest, Lese; im dunklen Footer neben Öffnungszeiten)Newsletter-Modul mit Persönlichkeit · Saisonbrief im
Vertrag widerrufen, Weinabo kündigen und Barrierefreiheit (Footer und mobiles Menü, ohne Login; Erklärung nach BFSG, wenn der Shop an Verbraucher verkauft und das Weingut kein Kleinstunternehmen ist)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
Hover: Bild-Zoom in der Maske · Basis
Mikroanimation: Ein-/Ausblenden mit @starting-style Animiertes Auswahlmenü (anpassbares select)Animierte Checkbox und Radio
Galerie: Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Produktreihe Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Produktgalerie
Footer: Newsletter-Modul mit Persönlichkeit · Saisonbrief im
Buttons: Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)Kontur-Button, der sich zeichnet · Eckklammern schließen sich

OptionalTrennlinien im Raster (Gap Decorations)Responsive Sektionskanten mit shape()

Nicht verwenden

In-den-Warenkorb-Flug Like/Herz mit Partikel-Burst Signatur von d2c-produkt-zuerst; hier bestätigt der Drawer ruhig, was im Korb liegt
Live-Uhr und Standort in Navigation oder Footer Signatur von gastro-warm-appetitlich; der Hofladen zeigt den Status aus echten Zeiten
Bento-Grid mit lebenden Zellen das Produkt-Bento gehört zu d2c; Weine stehen als Liste nach Lage und Jahrgang
WebGL-Bildverzerrung per Shader (Hover, Linse, RGB-Shift)SVG-Filter-Verzerrung (Turbulenz und Gooey) für Bild und Text verfälschen Lagen- und Flaschenfotos
Smooth Scroll mit Lenis stört Filter, Drawer und Checkout
Konfetti / Erfolgs-Feier nach dem Kauf eine ruhige Bestätigung mit Lieferzeit
Rollende Ziffern (Zahlen-Ticker / Odometer) „seit 1648“ wird nicht hochgezählt
Marquee-Laufband (optional scroll-gekoppelt) unruhig neben Preisen und Pflichtangaben
Altersabfrage als Sperrbildschirm vor dem ersten Inhalt – vom Jugendschutzgesetz nicht verlangt, schützt nicht wirksam und verzögert den ersten Bildschirm; geprüft wird bei der Übergabe
Weinglas-, Korken- und Trauben-Stockfotos, Holzmaserung, Rebenranken als Ornament – Klischee; eigene Fotos von Lage, Keller, Hof und Menschen
„bekömmlich“, „gesund“, „wohltuend“ – gesundheitsbezogene Angaben sind bei Getränken über 1,2 % vol unzulässig
„nachhaltig“, „naturnah“, „klimaneutral“ ohne Nachweis – Umweltaussagen nur mit Beleg (Leitfaden 8a)

Regeln

Erster Bildschirm: echtes Foto der Lage oder des Hofs mit Ort als Bildunterschrift, ein Satz zur Herkunft, zwei Wege „Weine entdecken“ und „Weinprobe & Hoffest“, im Kopf der Hofladen-Status aus echten Zeiten.
Herkunft führt: Jeder Wein nennt Lage, Jahrgang und Rebsorte und verlinkt die Lage; jede Lage nennt Boden, Ausrichtung und ihre Weine (wie Bürgerspital mit der Lage als Filter, Wittmann mit Karte je Lage).
Preise (Preisangabenverordnung): Gesamtpreis inkl. MwSt. und Grundpreis je Liter bei jedem Preis, auch in Liste, Reihe, Kaufbox und Warenkorb; kein Gesamtpreis ohne Grundpreis. Versandkosten und Lieferzeit vor dem Kauf, Pfand getrennt, Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV). Bestellknopf „zahlungspflichtig bestellen“. Vom Kunden prüfen lassen.
Pflichtangaben am Wein (wein-steckbrief-pflichtangaben): Alkoholgehalt in % vol in ganzen oder halben Einheiten, „enthält Sulfite“, Füllmenge, Herkunft („Wein aus Deutschland“, Anbaugebiet), Erzeugerabfüllung oder Abfüller mit vollständiger Anschrift. Bei Weinen, die nach dem 08.12.2023 hergestellt wurden, Zutatenverzeichnis und Nährwerte vollständig auf der Weinseite, nicht nur als Link oder QR-Code. Alle Angaben des Etiketts stehen vor dem Kauf im Shop. Vom Kunden prüfen lassen.
Das E-Label hinter dem QR-Code der Flasche ist nicht die eigene Website: neutral, ohne Werbung, ohne Shop-Link, ohne Cookies und Tracking (LGL Bayern). Die Website verlinkt es nicht als Werbefläche und ersetzt mit ihm nicht die Angaben im Shop.
Jugendschutz (§ 9 JuSchG): Wein, Sekt und Bier nicht an unter 16-Jährige, Spirituosen und spirituosenhaltige Getränke nicht an unter 18-Jährige. Geprüft wird bei der Übergabe: Versand mit Alters- und Identitätsprüfung (etwa DHL Ident-Check), Abholung im Hofladen mit Ausweis. Ein Klick „Ich bin über 18“ reicht nicht. Eine Altersabfrage beim Betreten ist nicht vorgeschrieben; wünscht der Kunde sie, dann als kleiner Dialog, der Inhalte für Suchmaschinen und Screenreader nicht sperrt. Vom Kunden prüfen lassen.
Werbung: keine gesundheitsbezogenen Angaben bei Getränken über 1,2 % vol (Art. 4 Abs. 3 VO (EG) 1924/2006); keine Ansprache von Jugendlichen; Bio und Öko nur mit Zertifikat und Kontrollstellen-Nummer (wie Gut Wulksfelde mit „DE-ÖKO-006“ im Footer); Umweltaussagen nur mit Nachweis.
Verträge: Widerrufs-Button „Vertrag widerrufen“ im Footer und mobilen Menü; Weinabo oder Weinclub als Dauervertrag zusätzlich mit „Verträge hier kündigen“ (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Tickets für Weinproben mit festem Termin haben kein Widerrufsrecht (§ 312g Abs. 2 Nr. 9 BGB); für Subskription gilt eine eigene Ausnahme (§ 312g Abs. 2 Nr. 5 BGB), nur nach Prüfung nutzen. Texte vom Kunden.
Hofladen: Öffnungszeiten aus einer Quelle (firmendaten-strukturiert) mit Sonderzeiten für Lese, Hoffest und Feiertage; eigene Erzeugnisse getrennt von Zugekauftem kennzeichnen. Werden andere Lebensmittel online verkauft, gelten dieselben Pflichtangaben vor dem Kauf (Zutaten, Allergene, Hersteller).
Signatur (tiefenkarten-relighting, Variante sonne) im Kapitel Herkunft, nicht im Hero: echtes Lagenfoto mit Tiefenkarte; das Licht folgt dem Zeiger, auf Touch ein Regler „Tageszeit“ statt Gyroskop. Bildunterschrift „Licht interaktiv simuliert“. Standbild als Rückfall ohne WebGL, bei reduzierter Bewegung und auf schwachen Geräten; three.js erst beim Erreichen der Sektion laden. Text liegt als HTML neben dem Bild, nie auf dem Canvas.
Typografie: EB Garamond für Headlines, Lagen und Geschichten, Fließtext mindestens 20 px; DM Mono für jede Zahl (Preis, Grundpreis, Jahrgang, % vol, Füllmenge, Analysewerte) und für Labels in Versal; Mediävalziffern nur im Fließtext.
Bewegung: nur Bilder, nur einmal (Masken-Reveal 1,6 s, Zurückskalieren 2,2 s, sine.inOut); Shop, Filter, Drawer und Formulare in 300 ms auf und 200 ms zu. Nichts bewegt sich von selbst.
Knöpfe: Buntsandstein gefüllt mit allen Zuständen (Laden, Erfolg „Im Warenkorb“) nur für Kaufen und Tickets; Nebenwege als Kontur mit Eckklammern wie die Passermarken eines Etiketts. Ein Knopfsystem, Trefferfläche mindestens 44 px.
Ferienzimmer sind Beiwerk: Preis pro Nacht inkl. MwSt., Hinweis auf Gästebeitrag, wo er erhoben wird; Anfrage statt Buchungsleiste, solange es keine Booking-Engine gibt (wie Dr. Loosen).
Pflichtangaben (Leitfaden 8a): Impressum, Datenschutzerklärung, AGB, Widerrufsbelehrung, Zahlungsarten, Erklärung zur Barrierefreiheit. Für Non-Food im Shop (Gläser, Geschenkkisten) Hersteller und Sicherheitsangaben nach GPSR. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen.

Bild und Ton

Licht: Echtes Licht in der Lage, früher Morgen oder Abend; Hof und Keller im Arbeitslicht.
Ausschnitt: Hang in der Totale, Boden und Rebe im Detail, Flasche als ruhiger Freisteller.
Personen: Ja: Winzer:in und Team bei der Arbeit; Gäste bei Proben nur mit Einwilligung.
Formate: 3:2, 4:5, 1:1
Nicht: Keine Weinglas- oder Trauben-Stockfotos, keine Gesundheitsversprechen, keine Ansprache Jugendlicher, kein Altersabfrage-Fenster vor dem ersten Bild.
Anrede: Sie
Sätze: Klar und erzählend in der Herkunft, nüchtern in den Zahlen (Jahrgang, % vol, Preis je Liter).
Haltung: Bodenständig und warm. Herkunft führt, nicht Werbung. Ein junges Weingut darf duzen, dann durchgehend.
Tonproben: Riesling von der Lage [Name], Schiefer, Südhang. 2023., Hoffest am [Datum]: Weinprobe ab 14 Uhr im Hof.
Nicht schreiben: „edler Tropfen“, „Genuss pur“, gesundheitsbezogene Angaben, „Bio“ ohne Kontrollstellen-Nummer.

Hero, Raum und Form

Hero-Raster: 12 Spalten: Foto der Lage randlos oder über 8 Spalten, Satz zur Herkunft über Spalte 1 bis 6 darunter oder daneben.
Hero-Bild: Echtes Foto der Hauptlage oder des Hofs, 3:2 Desktop, 4:5 mobil; Ort und Lage als Bildunterschrift in DM Mono.
Überschrift: clamp(2.75rem, 1.6rem + 5vw, 6rem), EB Garamond 400, links unter dem Bild.
Handlung: „Weine entdecken“ (Buntsandstein gefüllt) und „Weinprobe & Hoffest“ (Kontur mit Eckklammern).
Zusatz: Hofladen-Status aus echten Zeiten im Kopf; Bildunterschrift Ort · Lage in DM Mono 0.75rem Versal.
Sektionsabstand: clamp(72px, 9vw, 144px)
Dichte: mittel
Raum: Wie ein Etikett: Weinzeilen mit Jahrgang, Füllmenge, Preis und Grundpreis eng (4 bis 8 px), Lagen-Kapitel mit viel Luft.
Spalten: 12
Maximale Breite: 1320px
Raster: Sortiment als Liste oder 3er-Raster, Lage als Filter. Lagen-Kapitel 7/5 (Foto/Steckbrief), Kaufbox auf Löss.
Radius klein: 0
Radius groß: 0
Schatten: keiner
Form: Eckig wie ein Etikett. Nebenwege als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Buntsandstein gefüllt nur für Kaufen und Tickets.

Vorbilder