# Bauplan: Mode und Beauty: Kollektion und Ritual

Rezept `mode-beauty-kollektion` · Mode-Label, Concept Store, Kosmetik und Hautpflege · Stimmung: kuratiert, ruhig, warm, modisch · Stand 02.11.2026

Kampagnenbild in voller Breite, warmes Off-White, eine Grotesk für fast alles und Bewegung nur als weiche Bildüberblendung. Toteme und Lemaire verkaufen mit Weißraum und Fotografie. Typology zeigt bei Beauty die Formel direkt in der Überschrift (Wirkstoff + Prozent + Preis) und setzt dafür eine Mono-Schrift. Der Shop muss schnell bedienbar bleiben, deshalb wird die UI knapp animiert.

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

## Schrift

- Headline: `zalando-sans` · Text: `zalando-sans` · Akzent: `fragment-mono`
- Größen: Kampagnen-Headline clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, wght 400–500 (nicht fett), -0.01em, line-height 1.05. Produktname 0.9375rem wght 500, Preis tabular-nums. Fließtext 0.9375–1rem/1.5. Rubriken und Wirkstoffe in Fragment Mono 0.75rem Versal, +0.06em (Lemaire .06–.1rem). Editorial-Zitat optional EB Garamond Italic 1.5rem (Lemaire nutzt Garamond als zweite Stimme).
- Techniken: [Eine Familie, wenige Gewichte (Hierarchie über Größe)](https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/demo) `eine-familie-wenig-gewichte`, [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`, [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`

## Farbe

Warmes Off-White statt Reinweiß (Toteme #f6f5f3, Lemaire #fdfbf9, Typology #f3efe9), Fast-Schwarz mit Rotstich für Text. Farbe kommt aus Produkt und Kampagnenbild; die UI bleibt zweifarbig. Sale und Fehler sind die einzigen Signalfarben.

- `--farbe-grund` #f6f3ee (Grund)
- `--farbe-text` #121010 (Text)
- `--farbe-grund-2` #ebe7e0 (Kartenfläche, Produkt-Hintergrund)
- `--farbe-linie` #cecdc6 (Linien)
- `--farbe-leise` #8c857b (Meta, Wirkstoff-Labels)
- `--farbe-fehler` #a3402a (Sale/Fehler (sparsam))
- `--farbe-text-2` #726D63 (Meta-Text barrierefrei (4.6 : 1 auf #f6f3ee; #8c857b nur für Linien oder Schrift ab 24 px))

## 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 und Hero-Wechsel); Shop-UI über animationsstil_ui
- Dauer: Kampagnen-Bildwechsel 1000, UI (Menü, Akkordeon, Hover) 200–300, Unterstreichung 100
- Regel: Zwei Tempi: Bilder überblenden langsam mit Opazität (1 s, Kurve des Stils), Shop-UI (Menü, Filter, Drawer, Kaufbox) reagiert über animationsstil_ui token-toggle-asymmetrisch in 200–300 ms. Keine Bewegung auf Produktbildern beim Scrollen, kein Überschwingen.

## 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, 160
- Sektionsabstand: clamp(64px, 8vw, 128px)
- Dichte: luftig
- Hinweis: Weißraum um Kampagnenbilder, aber ein enges Produktraster (8 bis 16 px Spalt). Produktname, Preis und Wirkstoff stehen 4 px auseinander.
- Spalten: 12
- Seitenrand: clamp(12px, 2vw, 32px)
- Spaltenabstand: clamp(8px, 1vw, 16px)
- Maximale Breite: none
- Raster: Kampagnenbild randlos. Produktraster 4 Spalten Desktop, 2 mobil, alle Bilder im selben Format. Footer darf die volle Bildschirmhöhe nehmen.
- Radius klein: 2px
- Radius groß: 0
- Pillenform für Buttons: False
- Linie: 1px #cecdc6
- Schatten: keiner
- Form: Eckig wie ein Lookbook. Der getönte Glas-Knopf (glas-button, Variante getoent) steht nur über dem Kampagnenbild und bekommt hier 2 px statt der Pille aus der Demo.

## Bildsprache

- Licht: Weiches Studio- oder Tageslicht, warme Hauttöne, Produkt in echter Farbe.
- Ausschnitt: Kampagne: Ganzkörper oder Anschnitt; Produkt: Freisteller auf #ebe7e0 mit gleichem Rand.
- Personen: Ja in der Kampagne (Models mit Rechten); Produktbilder ohne Person.
- Formate: 3:4, 4:5, 16:9
- Nicht: Keine wechselnden Seitenverhältnisse im Produktraster, keine Stock-Models, kein Rot außer für Sale und Fehler, kein Glanz-Filter auf Haut.

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

- Anrede: du
- Sätze: Knapp und sachlich: Material, Schnitt, Wirkstoff mit Prozent, Preis.
- Haltung: Kuratiert, ruhig, selbstverständlich. Beauty nennt die Formel statt eines Versprechens.
- Tonproben: Mantel aus Wolle, gerader Schnitt. Ab 389 €., Serum mit 15 % Vitamin C. Für jeden Hauttyp.
- Nicht: „Must-have“, „Gönn dir“, „Shop the look!“ ohne Look, Wirkversprechen ohne Beleg, Emojis.

## Hero

Foto-Hero als Standard: ein Kampagnenbild in voller Breite, Text klein in einer Ecke. Video nur als Variante mit eigenem Kampagnenmaterial (Poster, mobil Hochformat oder Standbild).

- Raster: Kampagnenbild randlos, volle Bildschirmhöhe; Text klein in der unteren linken Ecke über 4 Spalten.
- Bild: Ein Kampagnenbild, 16:9 Desktop, 3:4 oder 4:5 mobil; Video nur als hero_variante mit eigenem Material.
- Überschrift: clamp(2rem, 5vw, 4.5rem), Zalando Sans wdth 125, 400–500, unten links.
- Handlung: Ein Weg: „Kollektion ansehen“ als Textlink oder getönter Glas-Knopf; kein zweiter CTA im Bild.
- Zusatz: Rubrik in Fragment Mono 0.75rem Versal (Saison, „Neu“) über der Headline.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links) `foto-hero` · Variante „Vollbild, Satz unten links“
- Nur unter der Bedingung oben: [Kinoreifer Vollbild-Video-Hero](https://cecodesign.de/lab/fundus/hero-layouts/cinematic-video-hero/demo) `cinematic-video-hero`

## Sektionen in dieser Reihenfolge

1. **Kampagne / Editorial**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=kunstbuch) `editorial-magazin-layout` · Variante „Kunstbuch“
2. **Lookbook (Kapitel scrollen ins nächste)**: [Scroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)](https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/demo) `scroll-naechstes-projekt`, [Bild mit Markierungspunkten](https://cecodesign.de/lab/fundus/sektionen/bild-hotspots/demo?v=shop) `bild-hotspots` · Variante „Shop the Look“
3. **Produktreihe / 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“
4. **Kategorie mit Filter**: [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=schublade) `facettenfilter-ergebnisliste` · Variante „Schublade“
5. **Produktdetail (Bilder links, Kaufbox rechts sticky)**: [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=hinweis) `warenkorb-drawer` · Variante „Hinweis am Symbol“, [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. **Anwendung / Ritual (Beauty)**: [Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt)](https://cecodesign.de/lab/fundus/hero-layouts/split-screen-sticky-seiten/demo?v=bild) `split-screen-sticky-seiten` · Variante „Sticky-Medium mit Clip-Reveal“
7. **Welche Pflege passt? (Finder in wenigen Fragen)**: [Produktfinder in wenigen Fragen](https://cecodesign.de/lab/fundus/sektionen/produktfinder-quiz/demo?v=schritte) `produktfinder-quiz` · Variante „Schritt für Schritt“
8. **Wirkstoffe, Pflege, Service**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“
9. **Bewertungen**: [Bewertungen mit Sternverteilung](https://cecodesign.de/lab/fundus/sektionen/bewertungen-verteilung/demo?v=band) `bewertungen-verteilung` · Variante „Verteilung als Band“
10. **Kontakt / Laden (Service-Anfrage; Adresse, Öffnungszeiten und Karte per 2-Klick nur mit Ladengeschäft)**: [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“
11. **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)

- [Scroll zum nächsten Projekt (scroll-gesteuerter Seitenwechsel)](https://cecodesign.de/lab/fundus/seitenuebergaenge/scroll-naechstes-projekt/demo) `scroll-naechstes-projekt`

## Buttons

- Haupthandlung: [Glas-Button](https://cecodesign.de/lab/fundus/buttons/glas-button/demo?v=getoent) `glas-button` · Variante „Getönt“
- Nebenhandlung: [Text-Roll beim Hover (doppelte Zeile rollt durch)](https://cecodesign.de/lab/fundus/schrift-animationen/text-roll-hover/demo) `text-roll-hover`

## Weitere Bausteine

- 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`, [Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück](https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/demo) `hide-on-scroll-header`
- Hover: [Bild-Zoom in der Maske](https://cecodesign.de/lab/fundus/hover/bild-zoom-in-maske/demo?v=gegen) `bild-zoom-in-maske` · Variante „Rahmen schrumpft, Bild zoomt gegenläufig“
- Mikroanimation: [Animiertes Auswahlmenü (anpassbares select)](https://cecodesign.de/lab/fundus/mikroanimationen/animiertes-select/demo) `animiertes-select`, [Toast-Benachrichtigungen im Stapel](https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/demo) `toast-stapel`
- 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: [Mega-Footer mit Sitemap und Utility-Leiste](https://cecodesign.de/lab/fundus/footer/mega-footer-sitemap/demo) `mega-footer-sitemap`, [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“

## 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`

## Optional (nur als Zusatz)

- [Kartenfächer nach Containerbreite](https://cecodesign.de/lab/fundus/galerien-slider/karten-faecher-container/demo) `karten-faecher-container`

## Nicht verwenden

- in-den-warenkorb-flug und konfetti-erfolg – verspielt, wirkt im Premium-Mode-Umfeld billig
- kippen-3d-karten und karten-spotlight-glow auf Produktkarten – Gadget-Look statt Ware
- smooth-scroll-lenis – Shop mit Filtern, Drawer und verschachtelten Scrollbereichen
- graustufen-zu-farbe – die Farbe des Produkts ist die Kaufinformation
- Fette Display-Headlines und Laufweite unter -0.03em – Mode-Referenzen setzen Headlines in Light/Regular
- Playfair Display als „Eleganz“-Reflex – Verbotsliste

## Regeln

- Erster Bildschirm: ein Kampagnenbild in voller Breite, Text klein in einer Ecke; Video nur mit eigenem Kampagnenmaterial.
- Eine Grotesk für Headline und Text (Toteme: nur Toteme Sans); Mono nur für Rubriken, Größen und Wirkstoffe.
- Beauty: Formel in die Produktzeile (Wirkstoff + Konzentration + Preis), wie bei Typology.
- Produktbilder auf einheitlicher Off-White-Fläche, alle im selben Seitenverhältnis (3:4 oder 4:5).
- Bilder überblenden langsam (1 s), UI reagiert schnell (≤ 300 ms).
- Größen, Preise und Mengen in Tabellenziffern. Gefilterte Produkte ordnen sich per FLIP in höchstens 250 ms um (nur Position, kein Einblend-Effekt); bei reduced motion springen sie.
- Footer großzügig: Service, Newsletter, Sitemap; darf die volle Bildschirmhöhe einnehmen (Lemaire h-screen).
- Lookbook-Kapitel gehen per Scroll ins nächste über; am Ende der Lookbook-Seite bleiben Footer, Service und rechtliche Links erreichbar.
- hide-on-scroll-header nur auf Kampagne, Lookbook und Kategorie; auf Produktdetail, Warenkorb und Checkout bleibt der Header fest, damit der Warenkorb immer erreichbar ist (wann_nicht des Musters).
- Pflichtangaben und Recht (Leitfaden 8a): Gesamtpreis inkl. MwSt., Versandkosten, Lieferzeit, Knopf „zahlungspflichtig bestellen“, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), AGB, Zahlungsarten; Kosmetik mit Grundpreis je 100 ml und Inhaltsstoffen vor dem Kauf; Produktsicherheit (GPSR Art. 19: Hersteller mit Post- und E-Mail-Adresse) als Akkordeon „Hersteller und Sicherheit“; 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; Erklärung zur Barrierefreiheit (bfsg) – 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“.