# Bauplan: Luxus und Manufaktur: Stille

Rezept `luxus-manufaktur-stille` · Uhren, Schmuck, Juwelier, Luxus-Manufaktur · Stimmung: luxuriös, präzise, ruhig, seriös · Stand 02.11.2026

Viel Weißraum, Anthrazit und Weiß im Wechsel, eine feine Kontrast-Serif für Titel und gesperrte Versalien für Labels. Überraschend ist die Messung: A. Lange & Söhne und NOMOS animieren nicht langsam und schwebend, sondern kurz (0,15–0,5 s) und asymmetrisch. Menüs öffnen langsamer, als sie schließen. Ruhe entsteht durch Raum und Bildqualität, nicht durch Zeitlupe.

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

## Schrift

- Headline: `bodoni-moda` · Text: `instrument-sans`
- Größen: Titel clamp(2.5rem, 5.5vw, 5.5rem), Bodoni Moda 400, opsz an Größe gekoppelt (font-optical-sizing auto), -0.01em, line-height 1.05. Labels und Navigation Instrument Sans 0.75rem Versal, letter-spacing +0.08em (NOMOS .08em, Lange bis 2px). Fließtext 0.9375rem/1.47 (Lange line-height-base 1.4706), wght 400. Kaliber- und Preisangaben tabular-nums. Script (imperial-script) höchstens für ein Monogramm, wie Messikas KunstlerScript.
- Techniken: [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Optisch exakte Textabstände mit text-box-trim / text-box-edge](https://cecodesign.de/lab/fundus/typo-techniken/text-box-trim/demo) `text-box-trim`, [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

Anthrazit statt Schwarz (Lange #23282f) und Weiß, sektionsweise im Wechsel. Edelmetall nur als feine Linie oder Detailfarbe, nie als Fläche oder Verlauf. Produktfotos auf neutralem Hellgrau.

- `--farbe-text` #23282f (Anthrazit, dunkle Sektionen und Text)
- `--farbe-grund` #ffffff (Grund)
- `--farbe-flaeche` #f4f4f2 (Produktfläche)
- `--farbe-leise` #8b9097 (Meta, Referenznummern)
- `--farbe-linie` #d9dadb (Linien)
- `--farbe-linie-2` #a88a5a (Messing, nur Linien und Fokus)
- `--farbe-text-2` #71757B (Meta-Text barrierefrei (4.6 : 1 auf #ffffff; #8b9097 nur für Linien oder Schrift ab 24 px))

## 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: UI 125–250, Menü auf 300 / zu 200, Bildwechsel 400–500, Abdunklung auf 800 / zu 600
- Regel: Öffnen mit der Ausklang-Kurve des Stils (0,3 s), Schließen schneller mit der Anlauf-Kurve (0,2 s); Abdunklung 0,8/0,6 s. Alles andere bleibt bei 0,15–0,5 s. Langsam ist nur die native Parallaxe (scroll-gekoppelt, 4vh Weg). Kein Überschwingen, kein Schimmer.

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

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 16, 24, 40, 64, 96, 144, 200, 240
- Sektionsabstand: clamp(112px, 14vw, 240px)
- Dichte: luftig
- Hinweis: Ruhe durch Raum (kurz): die größten Sektionsabstände aller Rezepte. Technische Daten dagegen eng in Tabellenziffern.
- Spalten: 12
- Seitenrand: clamp(24px, 6vw, 96px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- Maximale Breite: 1440px
- Raster: Asymmetrisch (broken-grid-asymmetrisch): Bild 7 Spalten, Text 4 Spalten versetzt. Freisteller zentriert mit viel Rand. Sektionen wechseln Anthrazit und Weiß.
- Radius klein: 0
- Radius groß: 0
- Pillenform für Buttons: True
- Linie: 1px #d9dadb; Messing #a88a5a nur als feine Linie und Fokus
- Schatten: keiner
- Form: Bilder und Flächen eckig. Einzige runde Form ist die dunkle Pille der Haupthandlung (pfeil-icon-button, Variante tausch); Nebenweg mit versetzter Messing-Kontur (kontur-button-zeichnen, Variante doppel).

## Bildsprache

- Licht: Ruhiges, gerichtetes Studiolicht, für alle Ansichten derselbe Lichtwinkel und Maßstab.
- Ausschnitt: Freisteller auf #f4f4f2, Makro auf Zifferblatt, Fassung oder Gravur, Uhr am Handgelenk.
- Personen: Selten: Uhrmacher:in am Werktisch oder ein Handgelenk; keine Gesichter in Kampagnenpose.
- Formate: 4:5, 1:1, 3:2
- Nicht: Keine Glitzer-Spiegelungen, keine Gold-Verläufe, keine Rabatt-Badges, keine Stock-Paare, keine Parallaxe über 4vh.

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

- Anrede: Sie
- Sätze: Kurz, mit Pausen; Zahlen technisch exakt (Kaliber, Gangreserve, Durchmesser).
- Haltung: Leise und präzise. Qualität wird gezeigt, nicht behauptet.
- Tonproben: Handaufzug, 72 Stunden Gangreserve., Wir zeigen Ihnen die Uhr gern in der Boutique.
- Nicht: „Luxus pur“, „zeitlose Eleganz“ als Floskel, „exklusiv für Sie“, Countdowns, Ausrufezeichen.

## Hero

Produkt zuerst: ein Freisteller oder Kampagnenfoto der Neuheit in ruhigem Licht, Name und ein Satz, „Termin in der Boutique“ als CTA. cinematic-video-hero nur mit eigenem Manufaktur- oder Kampagnenfilm (stumm, Poster, Pause-Knopf, mobil Standbild); kleine Juweliere bleiben beim Foto.

- Raster: 12 Spalten asymmetrisch: Bild über Spalte 6 bis 12, Text über 1 bis 4 unten, 1 Spalte Luft dazwischen.
- Bild: Freisteller oder Kampagnenfoto der Neuheit, 4:5; Film nur als hero_variante mit eigenem Material, mobil Standbild.
- Überschrift: clamp(2.5rem, 5.5vw, 5.5rem), Bodoni Moda 400, links unten.
- Handlung: „Termin in der Boutique“ (dunkle Pille) und „Kollektion“ (Messing-Doppelkontur) untereinander.
- Zusatz: Referenznummer und Kaliber in Instrument Sans 0.75rem Versal +0.08em über der H1.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=split-randabfallend) `foto-hero` · Variante „Split, Foto bis an den Rand“
- 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. **Neuheit / Kampagne**: [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“
2. **Kollektionen (Kaufbox nur mit Online-Shop, sonst Anfrage oder Termin)**: [Gebrochenes / asymmetrisches Raster](https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/demo) `broken-grid-asymmetrisch`, [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“, [Kaufbox mit Farb- und Größenwahl](https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt) `produkt-kaufbox-varianten` · Variante „Schnellkauf“, [Finanzierung mit Pflichtangaben und Warnhinweis](https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=kaufbox) `finanzierung-pflichtangaben` · Variante „Ratenzeile in der Kaufbox“, [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. **Manufaktur / Handwerk**: [Subtiler mehrschichtiger Parallax](https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/demo) `mehrschicht-parallax`, [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=kunstbuch) `editorial-magazin-layout` · Variante „Kunstbuch“
4. **Technik / Kaliber**: [Zahlen-/Fakten-Sektion als Typo-Ereignis](https://cecodesign.de/lab/fundus/hero-layouts/zahlen-fakten-section/demo?v=tabelle) `zahlen-fakten-section` · Variante „Ruhige Tabelle“
5. **Service, Pflege, Garantie**: [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“
6. **Boutiquen / Termin (Standortliste nur ab zwei Boutiquen, sonst Anfahrt mit Adresse als Text und Karte per 2-Klick; Termin-Tool per 2-Klick, Telefon als Alternative)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=kompakt) `oeffnungszeiten-status` · Variante „Kopfzeile kompakt“, [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“, [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“, [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=platzhalter) `termin-buchung-zwei-klick` · Variante „Platzhalter mit 2-Klick“
7. **Vertrag widerrufen & Erklärung zur Barrierefreiheit (Footer, ohne Login; nur mit Online-Shop oder Online-Termin)**: [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)

- [Gebrochenes / asymmetrisches Raster](https://cecodesign.de/lab/fundus/hero-layouts/broken-grid-asymmetrisch/demo) `broken-grid-asymmetrisch`

## Buttons

- Haupthandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=doppel) `kontur-button-zeichnen` · Variante „Doppelkontur rückt auf“
- Nebenhandlung: [Pfeil-Icon-Button](https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/demo?v=tausch) `pfeil-icon-button` · Variante „Pfeil-Tausch“

## Weitere Bausteine

- Navigation: [Mega-Menü mit morphendem gemeinsamem Viewport](https://cecodesign.de/lab/fundus/navigation/mega-menue-morphing-viewport/demo) `mega-menue-morphing-viewport`, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Header verschwindet beim Runterscrollen, kehrt beim Hochscrollen zurück](https://cecodesign.de/lab/fundus/navigation/hide-on-scroll-header/demo) `hide-on-scroll-header`
- Scroll: [Subtiler mehrschichtiger Parallax](https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/demo) `mehrschicht-parallax`
- 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`
- Galerie: [Natives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker)](https://cecodesign.de/lab/fundus/galerien-slider/css-native-karussell/demo?v=buehne) `css-native-karussell` · Variante „Vollbild-Bühne“, [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`, [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“

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

- shimmer-gradient-text und fluessigmetall-chrom – Gold-Schimmer ist das Klischee schlechthin; keine der Referenzen nutzt ihn
- interaktives-3d-hero und glas-transmission-3d für Uhren oder Steine – kostet LCP, wirkt schnell wie ein Spielzeug gegenüber echter Fotografie
- token-luxus-weich als Gesamtsprache (1,2–2,4 s) – die gemessenen Manufaktur-Seiten bleiben bei 0,15–0,5 s
- cursor-follower-lerp, magnetische-elemente – verspielt
- Playfair Display und Cinzel – Verbotsliste, Claude-Reflex für „Luxus“
- Script-Schrift für Überschriften – Messika nutzt die Script nur als Akzent

## Regeln

- Sektionen wechseln zwischen Anthrazit und Weiß (Lange: phxsg-theme-black/-white), nie mehr als zwei Flächenfarben.
- Labels, Navigation und Referenznummern in gesperrten Versalien (+0.08em), Titel in Serif gemischt.
- Produktbild ist Hauptdarsteller: Freisteller auf Hellgrau, alle Ansichten im gleichen Licht und Maßstab.
- Öffnen langsamer als Schließen (300/200 ms), Abdunklung ruhig (800/600 ms).
- Parallaxe nur nativ (animation-timeline: view()) mit max. 4vh Weg, hinter @supports, entfällt bei reduzierter Bewegung.
- Technische Angaben (Kaliber, Gangreserve, Durchmesser) als Zahlen-Sektion mit Tabellenziffern.
- Kein Preis-Countdown, keine Rabatt-Badges; Termin in der Boutique als primärer CTA.
- bild-zoom-in-maske nie auf Bildern mit mehrschicht-parallax (wann_nicht: die Transforms kollidieren).
- Pflichtangaben und Recht (Leitfaden 8a): mit Shop: Gesamtpreis inkl. MwSt., Versand, Widerrufsbelehrung und Widerrufs-Button (§ 356a BGB, seit 19.06.2026), Produktsicherheit (GPSR); Angaben zu Feingehalt, Steinen und Echtheit nur belegt; Erklärung zur Barrierefreiheit (bfsg) bei Online-Kauf oder -Termin; Termin-Tool erst nach Klick – 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“.