# Bauplan: Onlineshop & Produktmarke: Produkt zuerst

Rezept `d2c-produkt-zuerst` · Onlineshop / D2C-Produktmarke / Manufaktur mit Shop · Stimmung: sympathisch, direkt, hochwertig, zugänglich · Stand 02.11.2026

Produktfotos auf warmen Neutraltönen, eine klare Grotesk für Navigation, Preise und Produktnamen und eine charaktervolle Serif nur für Marken-Claims – so arbeiten Allbirds, ooia und KoRo. Kategorien, Bestseller und Vertrauen (Bewertungen, Versand, Rückgabe) kommen vor jeder Inszenierung. Bewegung ist schnell und dient Warenkorb, Filtern und Drawern.

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

## Schrift

- Headline: `young-serif` · Text: `instrument-sans`
- Größen: Prinzip aller drei Referenzen: Grotesk für UI/Preise/Produktnamen, eigene Serif nur für Marken-Claims. h1 (Claim) clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), Young Serif 400, Laufweite -0.01em, Zeilenhöhe 1.05; Sektions-Titel Instrument Sans 600, clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem), -0.015em; Produktname 1rem–1.125rem wght 500–600; Preis gleiche Größe mit tabellarischen Ziffern; Fließtext/Beschreibung 1rem, Zeilenhöhe 1.55; Labels/Badges 0.75rem Versal +0.06em.
- Techniken: [Serif + Grotesk als ‚Duotone‘ (Mono als dritte Stimme)](https://cecodesign.de/lab/fundus/typo-techniken/serif-grotesk-duotone/demo) `serif-grotesk-duotone`, [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

Warme Neutraltöne als Bühne für Produktfotos, fast schwarze Tinte und ein schwarzer (oder sehr dunkler) Primär-Button für 'In den Warenkorb'. Markenfarben als Akzent für Badges, Sale, Themenwelten; Produktfarben kommen aus den Varianten (Farb-Swatches als Tokens).

- `--farbe-grund` #F5F4F1 (Grund (Allbirds natural-white-25))
- `--farbe-grund-2` #ECE9E2 (Produktkachel-Hintergrund (Allbirds natural-white-60))
- `--farbe-text` #212121 (Text und Primär-Button (Allbirds black))
- `--farbe-grund-3` #6B6B6B (Sekundärtext/Grundpreis)
- `--farbe-nachhaltigkeit` #10714E (Nachhaltigkeit/Verfügbar (Allbirds green))
- `--farbe-akzent` #EB5C9D (Marken-Akzent/Sale-Badge (ooia; austauschbar))

## Bewegung

- Animationsstil: [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.16, 1, 0.3, 1) (token-toggle-asymmetrisch, Öffnen); Schließen cubic-bezier(0.7, 0, 0.84, 0) in etwa 65 % der Dauer
- Dauer: 150–200 (Hover, Swatches, Buttons), 250–300 Öffnen / 200 Schließen (Warenkorb-Drawer, Filter, Mega-Menü), 400 (Produktbild-Wechsel)
- Regel: Öffnen mit der Ausklang-Kurve des Stils, Schließen schneller mit dessen Anlauf-Kurve (das Prinzip steht so bei Allbirds und KoRo im CSS, Werte unter beobachtet). Keine Scroll-Inszenierung zwischen Kunde und Produkt; Bewegung bestätigt Handlungen (hinzugefügt, gefiltert, gemerkt).

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 20, 24, 32, 48, 72, 112
- Sektionsabstand: clamp(56px, 7vw, 104px)
- Dichte: mittel
- Hinweis: Shop-Rhythmus: Produktkacheln dicht (8 bis 16 px Spalt), Kaufbox mit 16 px zwischen Variante, Preis und Knopf. Inszenierung kommt nach Kategorien und Bestsellern.
- Spalten: 12
- Seitenrand: clamp(16px, 3vw, 40px)
- Spaltenabstand: clamp(8px, 1.2vw, 16px)
- Maximale Breite: 1440px
- Raster: Startseite: Bento oder 2 bis 4 große Kacheln, darunter Bestseller in 4 Spalten (2 mobil). Produktseite 7/5: Galerie links, Kaufbox rechts sticky.
- Radius klein: 8px
- Radius groß: 12px
- Pillenform für Buttons: True
- Linie: 1px #212121 mit 10 % Deckkraft
- Schatten: keiner auf Kacheln; der Warenkorb-Drawer dunkelt den Grund ab
- Form: Kacheln 12 px auf #ECE9E2, Knöpfe als Pille, Swatches rund. grain-noise-overlay nur am Button (Variante button).

## Bildsprache

- Licht: Helles, gleichmäßiges Studiolicht auf #ECE9E2; Themenwelten in Tageslicht.
- Ausschnitt: Produkt mittig mit gleichem Rand; das zweite Bild zeigt den Gebrauch.
- Personen: Im zweiten Bild und in Themenwelten; nie im Produktraster.
- Formate: 1:1, 4:5, 3:2
- Nicht: Keine wechselnden Hintergründe im Raster, keine Freisteller mit künstlichem Schlagschatten, keine Stock-Lifestyle-Bilder.

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

- Anrede: du
- Sätze: Kurz und freundlich, konkret zu Material, Menge, Preis und Lieferzeit.
- Haltung: Sympathisch und direkt; Vertrauen über Fakten (Versand, Rückgabe, Bewertungen mit Quelle).
- Tonproben: Leicht, weich, waschbar. Ab 89 €., Bis 14 Uhr bestellt, am selben Tag verschickt.
- Nicht: „nachhaltig“ ohne Nachweis, „Bestseller“ ohne Grundlage, Fake-Countdown, „Nur noch 2 Stück!“ ohne echte Zahl.

## Hero

Claim plus 2–4 Kategorie-Einstiege mit echten Produktfotos; bento-grid-interaktiv nur mit echten, ungleich gewichteten Inhalten (eine große Kachel für Bestseller oder Neuheit, kleinere für Kategorien), sonst 2–4 große Kacheln. Darunter sofort Bestseller mit Preis. Kein Slider, kein Video.

- Raster: Claim über 8 Spalten oben, darunter Bento: eine große Kachel über 6 Spalten und 2 Reihen, 2 bis 3 kleinere daneben (bento-grid-interaktiv).
- Bild: Echte Produkt- und Kategoriefotos, 4:5 und 1:1; kein Slider, kein Video.
- Überschrift: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem), Young Serif 400, oben links.
- Handlung: „Bestseller ansehen“ (#212121 gefüllt); die Kategorie-Kacheln sind selbst die Wege, kein zweiter Knopf.
- Zusatz: Schmale Ankündigungsleiste oben (Gratisversand ab …), Vertrauenszeile Versand / Rückgabe / Bewertungen unter dem Bento.

- Hero: [Bento-Grid mit lebenden Zellen](https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/demo) `bento-grid-interaktiv`

## Sektionen in dieser Reihenfolge

1. **Bestseller / Neuheiten**: [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“
2. **Kategorien / Themenwelten (Bento höchstens einmal pro Seite: steht es im Hero, hier große Bildkacheln ohne Bento)**: [Bento-Grid mit lebenden Zellen](https://cecodesign.de/lab/fundus/hero-layouts/bento-grid-interaktiv/demo) `bento-grid-interaktiv`, [Bild mit Markierungspunkten](https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=shop) `bild-hotspots` · Variante „Shop the Look“
3. **Kategorie mit Filter**: [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=leiste) `facettenfilter-ergebnisliste` · Variante „Filterleiste mit Popover“
4. **Warum wir – Vertrauen (Material, Prüfsiegel, Versand, Rückgabe)**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=typo) `zahlen-fakten-section` · Variante „Typo-Ereignis“
5. **Produktdetailseite**: [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=zoom) `galerie-shared-element-vollbild` · Variante „Zoom im Vollbild mit Lupe“, [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=basis) `akkordeon-hoehe-auto` · Variante „FAQ Fahrschule, natives details“, [Warenkorb als Seitenpanel](https://cecodesign.de/lab/fundus/sektionen/warenkorb-drawer/demo?v=drawer) `warenkorb-drawer` · Variante „Seitenpanel“, [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“
6. **Produktvergleich / Finder**: [Produktfinder in wenigen Fragen](https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=schritte) `produktfinder-quiz` · Variante „Schritt für Schritt“, [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“
7. **Bewertungen (eigene, geprüfte Bewertungen mit Hinweis, wie geprüft wird; Plattform-Bewertungen mit Echtheitshinweis)**: [Bewertungen mit Sternverteilung](https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=band) `bewertungen-verteilung` · Variante „Verteilung als Band“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“
8. **Community / Rezepte / Journal**: [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`, [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=magazin) `editorial-magazin-layout` · Variante „Magazin“
9. **Hilfe / Kontakt (Service-Anfrage; Laden oder Manufaktur mit Öffnungszeiten und Karte per 2-Klick nur, wenn es einen gibt)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo) `kontakt-anfrage-formular`, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“, [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“
10. **Vertrag widerrufen / kündigen & Erklärung zur Barrierefreiheit (Footer, ohne Login; bei Online-Verträgen mit Verbrauchern)**: [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)

- [In-den-Warenkorb-Flug](https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/demo) `in-den-warenkorb-flug`
- [Like/Herz mit Partikel-Burst](https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/demo) `like-herz-burst`

## Buttons

- Haupthandlung: [Button-Gruppe expressiv (Toggle, Auswahl, Split)](https://cecodesign.de/lab/fundus/buttons/button-gruppe-expressiv/demo?v=split) `button-gruppe-expressiv` · Variante „Split-Button mit Menü“
- Nebenhandlung: [Grain-/Noise-Überlagerung](https://cecodesign.de/lab/fundus/glas-material/grain-noise-overlay/demo?v=button) `grain-noise-overlay` · Variante „Körnung auf Button-Flächen (Kaufbox)“

## Weitere Bausteine

- Seitenwechsel: [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- Navigation: [Mega-Menü mit morphendem gemeinsamem Viewport](https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/demo) `mega-menue-morphing-viewport`, [Gestapelte bzw. mehrstufige Drawer-Navigation](https://cecodesign.de/lab/fundus/navigation/gestapelte-drawer-navigation/demo) `gestapelte-drawer-navigation`, [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“, [Hover-Absicht und Zeitlogik](https://cecodesign.de/lab/fundus/hover/hover-absicht-timing/demo) `hover-absicht-timing`
- Mikroanimation: [In-den-Warenkorb-Flug](https://cecodesign.de/lab/fundus/mikroanimationen/in-den-warenkorb-flug/demo) `in-den-warenkorb-flug`, [Toast-Benachrichtigungen im Stapel](https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/demo) `toast-stapel`, [Skeleton mit Schimmer](https://cecodesign.de/lab/fundus/mikroanimationen/skeleton-shimmer/demo) `skeleton-shimmer`, [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`, [Like/Herz mit Partikel-Burst](https://cecodesign.de/lab/fundus/mikroanimationen/like-herz-burst/demo) `like-herz-burst`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`
- 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“, [Masonry-Galerie mit nativem display: grid-lanes (plus Fallback)](https://cecodesign.de/lab/fundus/galerien-slider/masonry-grid-lanes-galerie/demo) `masonry-grid-lanes-galerie`
- Footer: [Newsletter-Modul mit Persönlichkeit](https://cecodesign.de/lab/fundus/footer/footer-newsletter-mit-persoenlichkeit/demo?v=basis) `footer-newsletter-mit-persoenlichkeit` · Variante „Shop mit Markenstimme“, [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`

## 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) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Nicht verwenden

- smooth-scroll-lenis – verlangsamt Scrollen durch Produktlisten und kostet auf Mobilgeräten Leistung
- horizontal-scroll-section / pinned-scrub-scrollytelling – versteckt Produkte hinter Scroll-Inszenierung
- fullpage-snap-slides – Kunden wollen frei durch Listen scrollen
- jeder Preloader – jede Sekunde vor dem ersten Produkt kostet Umsatz
- cursor-follower-lerp / kontextueller-cursor – Agentur-Geste, im Shop ohne Nutzen
- webgl-bildverzerrung / interaktives-3d-hero – schwer, und Produktfotos sollen unverfälscht aussehen (3D nur als echter Produkt-Konfigurator)

## Regeln

- Startseite: Claim + Kategorie-Einstiege (Bento oder 2–4 große Kacheln) statt Slider; darunter sofort Bestseller mit Preis, Bewertung und Farb-Swatches.
- Produktkacheln einheitlich: gleiches Seitenverhältnis, gleicher Hintergrundton (#ECE9E2), zweites Bild beim Hover, Preis mit Tabellenziffern, Grundpreis wo Pflicht.
- Produktseite: Galerie links, Kaufbox rechts sticky (Varianten, Größe, Preis, Lieferzeit, Button); darunter Akkordeons für Material, Pflege, Versand & Rückgabe.
- Serif nur für Claims und Themenwelten, nie für Preise, Buttons oder Formulare.
- Warenkorb als Drawer mit Bestätigung (Flug-Animation nur, wenn das Warenkorb-Icon sichtbar ist) und Hinweis auf Gratisversand-Schwelle.
- Vertrauen sichtbar: Prüfsiegel, Bewertungen, Versand/Rückgabe direkt unter dem CTA (ooia-Prinzip: drei konkrete Argumente).
- Laufband (marquee) höchstens als schmale Ankündigungsleiste oben, nie für Produktreihen.
- Footer mit Newsletter (Vorteil konkret nennen), Zahlungsarten, Hilfe/FAQ, Impressum, Widerruf (Widerrufs-Button), AGB, Erklärung zur Barrierefreiheit.
- Pflichtangaben und Recht (Leitfaden 8a): Gesamtpreis inkl. MwSt., Versandkosten, Grundpreis wo Pflicht, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), bei Abos Kündigungs-Button (§ 312k BGB), AGB, Zahlungsarten; Produktsicherheit (GPSR Art. 19: Hersteller mit Post- und E-Mail-Adresse, Warnhinweise) in der Kaufbox; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage; Bewertungen mit Hinweis, ob und wie sie geprüft werden (§ 5b UWG); keine pauschalen Umweltaussagen ohne Nachweis; bei Lebensmitteln LMIV-Angaben vor dem Kauf – vom Kunden prüfen lassen.

## Vor der Abgabe

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