# Bauplan: Weingut und Hofladen: Herkunft zuerst

Rezept `weingut-hofladen-herkunft` · Weingut / Winzerhof / Hofladen / Manufaktur aus der Landwirtschaft / Brennerei (optional mit Ferienzimmern) · Stimmung: bodenständig, klar, warm, handwerklich · Stand 02.11.2026

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.

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

## Schrift

- Headline: `eb-garamond` · Text: `eb-garamond` · Akzent: `dm-mono`
- Größen: h1 EB Garamond clamp(2.75rem, 1.6rem + 5vw, 6rem), wght 400, Laufweite -0.015em, Zeilenhöhe 1.0; h2 clamp(2rem, 1.5rem + 2vw, 3.25rem), wght 400; Lagennamen und Jahrgangstitel in EB Garamond Italic. Fließtext EB Garamond 1.25rem (20 px, wegen der kleinen x-Höhe), wght 400, Zeilenhöhe 1.55, höchstens 66ch, Mediävalziffern (onum) nur im Fließtext. DM Mono für alle Zahlen und Etiketten: Preis 1rem wght 500, Grundpreis, Füllmenge, % vol, Jahrgang, Analysewerte 0.875rem wght 400; Labels 0.75rem, Versal, +0.1em; Knöpfe DM Mono 500, 0.875rem, Versal, +0.08em.
- Techniken: [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`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`

## Farbe

Grund und Flächen kommen aus dem Boden der Hauptlage, nicht aus dem Wein. Beispiel hier: Kalkstein hell als Grund, Löss als Fläche für Kaufbox und Steckbrief, Schiefer für dunkle Bänder, das Lagen-Kapitel und den Footer. Signal Buntsandstein-Rot nur für In den Warenkorb, Kaufen und Tickets; auf Schiefer wird der Kauf-Knopf kalkhell mit Schiefer-Schrift. Je nach Lage austauschbar (Schiefer-Blau, Löss-Ocker, Granit-Grau), immer mit 4,5 : 1 geprüft. Weinfarben (Rot, Gold, Rosé) nur aus den Fotos, nie als Fläche. Kein Bordeaux-Verlauf, kein Rebenblatt-Grün als Marke, keine Holzmaserung.

- `--farbe-grund` #F1ECE2 (Grund Kalkstein)
- `--farbe-text` #22211F (Text (13,7 : 1))
- `--farbe-flaeche` #E6DCCB (Fläche Löss: Kaufbox, Steckbrief, Hofladen-Zeiten (Text 11,9 : 1))
- `--farbe-schiefer` #2F3236 (Schiefer: dunkle Bänder, Lagen-Kapitel, Footer (Kalk darauf 10,9 : 1))
- `--farbe-signal` #8A3A2B (Signal Buntsandstein: In den Warenkorb, Kaufen, Ticket (Weiß darauf 7,7 : 1; als Fläche auf Kalk 6,6 : 1, auf Löss 5,7 : 1); auf Schiefer stattdessen Kalk-Knopf mit Schiefer-Schrift)
- `--farbe-grund-2` #5A564F (Sekundärtext, Grundpreis, Analysewerte (6,2 : 1 auf Kalk))
- `--farbe-linie` #D8CFC0 (Linien, Etikett-Rahmen)

## Bewegung

- Animationsstil: [Animationsstil „Luxus weich“](https://cecodesign.de/lab/fundus/animationsstile/token-luxus-weich/demo) `token-luxus-weich`
- 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.37, 0, 0.63, 1) (token-luxus-weich, nur Bilder); UI über animationsstil_ui
- 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
- Regel: Nur Bilder bewegen sich, und nur einmal: Lagenfotos öffnen sich per Maske, das Hero-Foto skaliert einmal zurück. Text, Preise, Steckbriefe und Formulare stehen sofort. Kein Dauerzoom, keine Diashow mit Autoplay. Das Sonnenlicht der Signatur bewegt sich nur mit dem Zeiger oder einem Regler „Tageszeit“, nie von selbst. Bei prefers-reduced-motion sind Bilder sofort da, das Licht steht fest auf Nachmittag, der Regler bleibt ohne Übergang bedienbar.
- Hinweis: Weich nur für Bilder: Lagenfotos öffnen sich einmal per Maske mit innerem Zurückskalieren, das Hero-Foto skaliert einmal von 1.08 auf 1 (kein Dauerzoom). Shop, Filter, Warenkorb-Drawer, Checkout und Termine laufen über token-toggle-asymmetrisch (öffnen 300 ms, schließen 200 ms), weil token-luxus-weich Formulare und hohe Informationsdichte ausschließt. Das Licht der Signatur folgt dem Zeiger mit dem Lerp-Wert des Musters, ohne eigene Kurve. token-luxus-weich nennt Weingüter ausdrücklich unter wann_einsetzen.

## 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, 144px)
- Dichte: mittel
- Hinweis: Wie ein Etikett: Weinzeilen mit Jahrgang, Füllmenge, Preis und Grundpreis eng (4 bis 8 px), Lagen-Kapitel mit viel Luft.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 56px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- 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
- Pillenform für Buttons: False
- Linie: 1px #D8CFC0 als Etikett-Rahmen um Kaufbox und Steckbrief
- 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.

## Bildsprache

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

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

- 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: „edler Tropfen“, „Genuss pur“, gesundheitsbezogene Angaben, „Bio“ ohne Kontrollstellen-Nummer.

## Hero

Foto-Hero: die wichtigste Lage oder der Hof in echtem Licht, mit Ort und Lage als Bildunterschrift in DM Mono. Ein Satz in EB Garamond über Herkunft, keine Werbezeile. Zwei Wege: „Weine entdecken“ (Shop) und „Weinprobe & Hoffest“ (Termine); im Kopf der Hofladen-Status aus echten Zeiten. Kein Video ohne eigenes Material, keine Weinglas- oder Trauben-Stockfotos und kein Altersabfrage-Fenster vor dem ersten Bild.

- Raster: 12 Spalten: Foto der Lage randlos oder über 8 Spalten, Satz zur Herkunft über Spalte 1 bis 6 darunter oder daneben.
- 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.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=bildunterschrift) `foto-hero` · Variante „Bildunterschrift als Gestaltung“

## Sektionen in dieser Reihenfolge

1. **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](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“, [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“
2. **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](https://cecodesign.de/lab/fundus/sektionen/wein-steckbrief-pflichtangaben/demo) `wein-steckbrief-pflichtangaben`, [Kaufbox mit Farb- und Größenwahl](https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=seite) `produkt-kaufbox-varianten` · Variante „Produktseite“, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt) `galerie-shared-element-vollbild` · Variante „Produktgalerie mit Daumen“, [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 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](https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer) `warenkorb-drawer` · Variante „Seitenpanel“
4. **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](https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/demo?v=sonne) `tiefenkarten-relighting` · Variante „Abendsonne am Zeiger“, [Lagen mit Steckbrief und eigener Karte](https://cecodesign.de/lab/fundus/sektionen/lagen-steckbrief-karte/demo) `lagen-steckbrief-karte`, [Vollbild-Slideshow mit Masken-Schub und innerer Gegenbewegung](https://cecodesign.de/lab/fundus/galerien-slider/slideshow-innere-gegenparallaxe/demo?v=ueberblenden) `slideshow-innere-gegenparallaxe` · Variante „Ruhige Überblendung (Weingut, fünf Lagen)“
5. **Der Jahrgang (Lesebericht des aktuellen Jahrgangs: Wetter, Lese, Stil, Menge; einmal im Jahr als Magazinbeitrag, ältere Jahrgänge als Archiv)**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „Magazin“
6. **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](https://cecodesign.de/lab/fundus/sektionen/programm-kalender/demo?v=programm) `programm-kalender` · Variante „Liste und Monat“, [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=linkout) `termin-buchung-zwei-klick` · Variante „Link-out in neuem Tab“
7. **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](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=karte) `oeffnungszeiten-status` · Variante „Sprechzeiten-Karte“
8. **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](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“
9. **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)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=peek) `css-native-karussell` · Variante „Kartenreihe mit Peek“, [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`
10. **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)](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. **Weinbrief (wenige Briefe im Jahr, an die Saison gebunden: Jahrgangsvorstellung, Hoffest, Lese; im dunklen Footer neben Öffnungszeiten)**: [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“
12. **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](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)

- [2.5D-Bilder mit Tiefenkarte](https://cecodesign.de/lab/fundus/3d-webgl/tiefenkarten-relighting/demo?v=sonne) `tiefenkarten-relighting` · Variante „Abendsonne am Zeiger“

## Buttons

- Haupthandlung: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- 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`
- 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“
- Mikroanimation: [Ein-/Ausblenden mit @starting-style](https://cecodesign.de/lab/fundus/mikroanimationen/einblenden-starting-style/demo) `einblenden-starting-style`, [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- 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“, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=produkt) `galerie-shared-element-vollbild` · Variante „Produktgalerie mit Daumen“
- 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`

## Optional (nur als Zusatz)

- [Trennlinien im Raster (Gap Decorations)](https://cecodesign.de/lab/fundus/hero-layouts/gap-decorations-raster/demo?v=kenndaten) `gap-decorations-raster` · Variante „Kenndaten-Raster“
- [Responsive Sektionskanten mit shape()](https://cecodesign.de/lab/fundus/hero-layouts/sektionskante-shape/demo) `sektionskante-shape`

## Nicht verwenden

- in-den-warenkorb-flug / like-herz-burst – Signatur von d2c-produkt-zuerst; hier bestätigt der Drawer ruhig, was im Korb liegt
- live-uhr-und-standort – Signatur von gastro-warm-appetitlich; der Hofladen zeigt den Status aus echten Zeiten
- bento-grid-interaktiv – das Produkt-Bento gehört zu d2c; Weine stehen als Liste nach Lage und Jahrgang
- webgl-bildverzerrung / svg-filter-verzerrung – verfälschen Lagen- und Flaschenfotos
- smooth-scroll-lenis – stört Filter, Drawer und Checkout
- konfetti-erfolg – nach dem Kauf eine ruhige Bestätigung mit Lieferzeit
- zahlen-odometer – „seit 1648“ wird nicht hochgezählt
- marquee-laufband – 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.

## Rezept-Varianten

- **Brennerei / Edelbrand-Manufaktur**: Spirituosen nicht an unter 18-Jährige: Zustellung mit Ident-Prüfung ab 18, auch bei gemischten Kartons mit Wein. An die Stelle der Lage tritt die Herkunft des Obstes (Streuobstwiese, Sorte, Erntejahr), an die Stelle des Jahrgangsberichts „Ernte und Brand“. Pflichtangaben je Brand: % vol, Füllmenge, Grundpreis je Liter (0,35 l, 0,5 l), Hersteller mit Anschrift; ob Zutaten und Nährwerte nötig sind, regelt anderes Recht als beim Wein, vom Kunden prüfen lassen. Signatur bleibt: das Licht über der Obstwiese.
- **Hofladen ohne Onlineshop**: Hauptziel ist der Besuch: Öffnungsstatus und „Was es gerade gibt“ stehen ganz oben. Vorbestellen zur Abholung als Anfrage ohne Kauf auf der Seite; ob dabei trotzdem ein Vertrag im Fernabsatz entsteht, vom Kunden prüfen lassen. Werden Preise gezeigt, gilt auch hier der Grundpreis. Wein-Steckbriefe bleiben ohne Kaufbox, Jugendschutz gilt an der Ladenkasse. Signatur bleibt: Licht über Feld, Wiese oder Lage.

## Vor der Abgabe

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