# Bauplan: Optik und Hörakustik: scharf sehen, gut hören

Rezept `optik-hoerakustik-sehen-hoeren` · Augenoptiker / Optikerfachgeschäft / Kontaktlinsen-Institut / Hörakustiker / Optik und Akustik unter einem Dach (auch mit Filialen) · Stimmung: präzise, kultiviert, zugewandt, klar · Stand 02.11.2026

Zwischen Mode, Gesundheitshandwerk und Beratung: Verkauft werden der Termin für Sehtest oder Hörtest, Fassungen mit Marken und eine verständliche Rechnung mit Kassenanteil. Die Seite beginnt mit einem ruhigen Porträt im Passepartout, die Überschrift wird beim ersten Laden einmal scharf wie beim Sehtest. Danach Sehen und Hören als zwei Reiter, Termin mit Dauer und Preis je Leistung, Fassungen nach Form und Material, Kosten mit Beispielen, Werkstatt mit freiwilligen Richtpreisen, Team mit Meistertitel. Bodoni Moda für Überschriften, Mona Sans für Text, Fragment Mono für Messwerte (dpt, dB, mm). Papierweiß, Schildpatt und Tinte. Abgrenzung zu mode-beauty-kollektion (Kollektion und Kaufbox), praxis-gesundheit-ruhig (Behandlung) und luxus-manufaktur-stille (Manufaktur).

## 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 `optik-hoerakustik-sehen-hoeren`) und https://cecodesign.de/lab/fundus/rezepte/optik-hoerakustik-sehen-hoeren/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `bodoni-moda` · Text: `mona-sans` · Akzent: `fragment-mono`
- Größen: h1 Bodoni Moda clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem), opsz an die Größe gekoppelt (font-optical-sizing auto, nie fest 96), wght 500 bis 3.5rem, darüber 400, Laufweite -0.015em, Zeilenhöhe 1.0; Bodoni als Display nur für die H1. h2 Bodoni Moda clamp(1.875rem, 1.3rem + 2vw, 3rem) mit opsz fest 24 bis 36 und wght 600, damit die Haarlinien tragen; h3 und kleiner Mona Sans wdth 112, wght 600; Kursive für Fassungsnamen. Fließtext Mona Sans 1.0625rem (17 px), wdth 100, wght 400, Zeilenhöhe 1.6, höchstens 64ch; Rubriken Mona Sans wdth 112, wght 600, 0.875rem. Fragment Mono für Messwerte und Daten: dpt, Achse, Pupillendistanz in mm, Hörverlust in dB, Dauer und Preis je Termin, 0.875rem; Labels 0.75rem Versal +0.08em. Knöpfe Mona Sans 600, 1rem.
- Techniken: [Optische Größen nutzen (opsz-Achse)](https://cecodesign.de/lab/fundus/typo-techniken/optische-groessen-opsz/demo) `optische-groessen-opsz`, [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`, [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

Viel Papierweiß um Fassungen und Gesichter, Schildpatt hell als Fläche für Termin und Kosten, Tinte für Footer und Hören-Kapitel. Ein Tintenblau nur für Termin buchen. Farben der Fassungen kommen aus den Fotos. Kein Blau-Weiß-Medizin-Look, keine Augen-Icons, keine Linsenreflexe als Effekt.

- `--farbe-grund` #F4F5F3 (Grund Papierweiß)
- `--farbe-text` #121417 (Text (16,9 : 1 auf Grund))
- `--farbe-flaeche` #E8DED3 (Fläche Schildpatt: Termin, Kosten, Werkstatt (Text 13,9 : 1))
- `--farbe-dunkel` #1C2026 (Dunkel Tinte: Footer, Kapitel Hören (Weiß darauf 16,4 : 1))
- `--farbe-signal` #2442A8 (Signal Tintenblau: Termin buchen (Weiß darauf 8,7 : 1; als Fläche auf Grund 7,9 : 1, auf Schildpatt 6,5 : 1); auf Tinte stattdessen weißer Knopf mit dunkler Schrift)
- `--farbe-leise` #5A5F67 (Leise: Meta-Angaben, Messwert-Einheiten (5,9 : 1 auf Grund, 4,8 : 1 auf Schildpatt))
- `--farbe-linie` #D3D6D2 (Linie: Haarlinien um Fassungsbilder (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Editorial langsam“](https://cecodesign.de/lab/fundus/animationsstile/token-editorial-langsam/demo) `token-editorial-langsam`
- 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.16, 1, 0.3, 1) (token-editorial-langsam); UI über animationsstil_ui
- Dauer: 150 (Hover, Farbe), 300 (Reiter, Filter, Dialog öffnen), 200 (schließen), 1000 (H1 wird scharf, Wörter mit 50 Versatz), 1200 (Masken-Reveal eines Fassungsbilds)
- Regel: Die Unschärfe ist eine Pointe, keine Dauerbewegung: einmal auf der H1 der Startseite, nie auf Fließtext, Preisen oder Formularen, nie bei jedem Besuch erneut (Session). Fassungsbilder öffnen sich einmal. Bei prefers-reduced-motion steht die H1 sofort scharf, Bilder erscheinen ohne Maske.
- Hinweis: Langsam nur für zwei Momente: die H1 wird beim ersten Laden einmal scharf (blur-reveal, Wörter, 1000 ms) und Fassungsbilder öffnen sich per Maske. Termin, Reiter Sehen/Hören, Filter und Galerie-Vollbild laufen über token-toggle-asymmetrisch (300 ms auf, 200 ms zu), wie von der Recherche vorgeschlagen.

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.16, 1, 0.3, 1)` (--ease) für nur zwei Momente: die H1 wird beim ersten Laden scharf, Fassungsbilder öffnen sich per Maske; Termin, Reiter, Filter, Galerie über das UI-Paar; dazu der Seitenwechsel als Blende (Kreis) mit --ease-form; UI: `cubic-bezier(0.16, 1, 0.3, 1)` / `cubic-bezier(0.7, 0, 0.84, 0)`; Ausnahme `cubic-bezier(0.76, 0, 0.24, 1)` nur für der Kreis beim Seitenwechsel (seitenwechsel-wachsende-form klickpunkt); Expo-out verschluckt die Form
- Dauern: klein 150 ms, mittel 300 ms, gross 1200 ms, seitenwechsel 800 ms, schliessen 200 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit Termin: ab 0 ms, steht
2. Hero-Foto (passepartout): ab 0 ms, steht (LCP)
3. H1: ab 0/50/100/150 ms, 1000 ms, Wörter tauchen aus der Unschärfe auf (blur 12 px → 0), --ease
4. Reiter Sehen / Hören: ab 0 ms, stehen
5. Rest: beim Scrollen, erst beim Scrollen (scroll)
- Ende nach 1150 ms. Wiederholt: H1 steht scharf (einmal je Sitzung, Rezept).

**Scrollen** (höchstens drei Reveal-Arten):

- Bild-Maske (`clip-path-bild-reveal`): Fassungsbilder und Werkstatt; 1200ms, Versatz 100 ms, Maske öffnet sich einmal, Bild innen 1.06 → 1; einmal, wenn 33 % sichtbar (IntersectionObserver)
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Preise, Zuzahlungen, Kassenleistungen, Termin-Formular

**Hover** (300 ms ein, 200 ms aus, --ui-ease-ein / --ui-ease-aus (Bild --ease); nur mit Zeiger):

- Link: Unterstreichung wächst von links
- Knopf: pfeil-icon-button tausch; kontur-button-zeichnen zeichnen
- Karte: Fassung: Bild scale 1.05 im Rahmen (bild-zoom-in-maske basis)
- Bild: Zoom klingt mit --ease in 1200 ms aus, der Pfeil antwortet sofort

**Signatur** `blur-reveal`: Die H1 der Startseite wird beim ersten Laden einmal scharf wie beim Fokusziehen (Wörter, 50 ms Versatz, 1000 ms); nie auf Fließtext, Preisen oder Formularen (Rezept). Auslöser: Laden; Wiederholung: einmal je Sitzung.

**Seitenwechsel** `seitenwechsel-wachsende-form` (Variante klickpunkt); dazu `vt-cross-document-mpa` (benannt), `vt-shared-element-morph`. Richtung: vorwaerts: ein Kreis öffnet sich am angeklickten Bild bis zur fernsten Ecke (Position per pageswap und pagereveal); zurueck: der Kreis schließt sich in das Bild, von dem man kam; Bild → Detail fliegt das Bild zusätzlich als geteiltes Element über dem Kreis; sonst Überblendung. Geteilt: kopf, held (Fassungsbild). Dauer 800 ms, zurück 700 ms. Kurve: `cubic-bezier(0.76, 0, 0.24, 1) (--ease-form); zurück cubic-bezier(0.45, 0, 0.55, 1), weicher (05.11.2026, Probe Optik: 540 ms mit --ease-form waren nur etwa 180 ms sichtbar, ein Wischer)`.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Unschärfe nur einmal und nur auf der H1 (Rezept). Kein zweiter Blur-Effekt auf der Seite.

**Reduzierte Bewegung:** H1 steht sofort scharf, Bilder ohne Maske (Rezept); Seitenwechsel als Überblendung. Seitenwechsel als Überblendung 150 ms ohne Kreis. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** verschwommene Flächen als Gag (Rezept); Sehtafel oder Augen, die blinzeln; Schallwellen oder Pegel als Dauer-Animation; Bildverzerrung und Glas-Refraktion (Rezept).

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und animationsstil_hinweis; Signatur nach blur-reveal (Wörter: 800 ms, 50 ms Versatz, blur 12 px; Dauer auf Rezept 1000 ms). Rest eigene Festlegung. Seitenwechsel 05.11.2026 aus seitenwechsel-wachsende-form (klickpunkt: 800/540 ms, cubic-bezier(0.76, 0, 0.24, 1)).

## 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: luftig
- Hinweis: Viel Weiß um jedes Produktfoto (mindestens 48 px), Messwert-Tabellen dagegen dicht mit 8 px Zeilenabstand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 64px)
- Spaltenabstand: clamp(16px, 2vw, 32px)
- Maximale Breite: 1320px
- Raster: Hero 5/7 (Text links, Passepartout rechts). Fassungen als 4er-Raster mit viel Abstand, mobil 2. Kosten als Tabelle über 8 Spalten.
- Radius klein: 2px
- Radius groß: 2px
- Pillenform für Buttons: True
- Linie: 1px #D3D6D2 um Fassungsbilder; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Kanten fein wie ein Brillenrand; nur die Haupt-Pille (pfeil-icon-button, Variante tausch) ist rund.

## Bildsprache

- Licht: Weiches Seitenlicht, neutral, Haut natürlich, keine Reflexe auf den Gläsern.
- Ausschnitt: Porträt Kopf und Schultern, Fassung als Freisteller von vorn und seitlich, Werkstatt im Detail.
- Personen: Ja: Team und Modelle mit Einwilligung; Kundschaft nur mit Erlaubnis.
- Formate: 4:5, 1:1, 3:2
- Nicht: Keine Sehtafeln, keine Augen in Großaufnahme, keine Hörgerät-Stockfotos mit Senioren-Klischee.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz.

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

- Anrede: Sie
- Sätze: Ruhig und genau: Leistung, Dauer, Preis, was danach passiert.
- Haltung: Kultiviert und zugewandt, ohne Fachjargon; Fachwort in Klammern.
- Tonproben: Sehtest mit Beratung: 45 Minuten, kostenlos., Probetragen im Alltag, zwei Wochen, danach entscheiden Sie.
- Nicht: „Nie wieder schlecht hören“, „perfektes Sehen“, „Tinnitus weg“, „Top-Marken zu Top-Preisen“.

## Hero

Foto-Hero im Passepartout: ein ruhiges Porträt mit Brille oder Hörsystem, viel Papierweiß ringsum, daneben die H1, die einmal scharf wird. Darunter zwei gleichwertige Wege „Sehtest buchen“ und „Hörtest buchen“ und die nächste freie Zeit als Text, wenn das Terminsystem sie liefert. Kein Stockfoto mit Sehtafel, keine verschwommene Bildfläche als Gag.

- Raster: 12 Spalten: Text über Spalte 1 bis 5, Passepartout-Foto über 6 bis 12 mit 48 px Weiß ringsum; mobil Foto oben im Passepartout, Text darunter.
- Bild: Ruhiges Porträt mit Brille oder Hörsystem, 4:5.
- Überschrift: clamp(2.5rem, 1.5rem + 4vw, 5rem), Bodoni Moda 400 opsz 96, wird einmal scharf; kein Label darüber.
- Handlung: „Sehtest buchen“ (Tintenblau, Pfeil-Pille) und „Hörtest buchen“ (Kontur) nebeneinander, darunter Telefon als tel:-Link.
- Zusatz: Nächste freie Zeit als Text in Fragment Mono, nur wenn das Terminsystem sie liefert.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=passepartout) `foto-hero` · Variante „Kleiner Abzug auf Fläche“

## Sektionen in dieser Reihenfolge

1. **Termin (Sehtest, Brillenberatung, Kontaktlinsenanpassung, Kinder-Sehberatung, Hörtest, Hörberatung; je Leistung Dauer und Preis oder kostenlos; Hinweis „Kontaktlinsen vorher ablegen“; Buchungs-Widget erst nach Klick, Telefon daneben)**: [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl) `termin-buchung-zwei-klick` · Variante „Vorauswahl vor dem Laden“
2. **Sehen und Hören (zwei Reiter; je Reiter die Leistungen mit Unterseite, Antwort zuerst: was gemessen wird, wie lange, was es kostet; bei Beschwerden der Hinweis auf die Augen- oder HNO-Ärztin)**: [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“, [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen) `akkordeon-hoehe-auto` · Variante „Leistungsliste mit Bild“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“
3. **Fassungen und Marken (nach Form, Material, Gesichtsform und Marke filtern; Fassungen mit „Fassung ab“ und dem Satz, wovon der Brillenpreis abhängt; Markennamen und Logos nur mit Erlaubnis; Vollbild mit Materialdetail; Neuheiten als Karten mit Bildzonen; Aktionen nur mit Zeitraum, Bedingungen und Preisangabe)**: [Facettenfilter mit Ergebnisliste](https://cecodesign.de/lab/fundus/sektionen/facettenfilter-ergebnisliste/demo?v=schublade) `facettenfilter-ergebnisliste` · Variante „Schublade“, [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“, [Produktkarte mit Bildwechsel](https://cecodesign.de/lab/fundus/hover/produktkarte-bildwechsel/demo?v=zonen) `produktkarte-bildwechsel` · Variante „Bildzonen“, [Aktion mit Preisangabe nach § 11 PAngV](https://cecodesign.de/lab/fundus/sektionen/aktion-mit-preisangabe/demo?v=zeitraum) `aktion-mit-preisangabe` · Variante „Zeitraum“
4. **Was kostet eine Brille, was ein Hörgerät? (Beispielrechnungen mit Fassung, Glasart und Stärke; Hörgeräte mit Festbetrag der Kasse, Eigenanteil und gesetzlicher Zuzahlung; Stand-Datum; Ratenkauf nur mit allen Pflichtangaben)**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Finanzierung mit Pflichtangaben und Warnhinweis](https://cecodesign.de/lab/fundus/sektionen/finanzierung-pflichtangaben/demo?v=kaufbox) `finanzierung-pflichtangaben` · Variante „Ratenzeile in der Kaufbox“
5. **So läuft die Hörgeräte-Versorgung (Verordnung der HNO-Ärztin → Hörtest → Probetragen im Alltag → Feinanpassung → Nachsorge; Dauer je Schritt nur, wenn sie gehalten wird)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
6. **Werkstatt und Service (Reparatur, Gläsertausch, Nachjustieren, Reinigung, Batterien und Zubehör; freiwillig Richtpreise typischer Reparaturen oder das Europäische Formular als Angebot)**: [Reparatur-Richtpreise und Reparaturweg](https://cecodesign.de/lab/fundus/sektionen/reparatur-richtpreise/demo?v=betrieb) `reparatur-richtpreise` · Variante „Betrieb: Europäisches Formular als Angebot“
7. **Team (Augenoptikermeister:in, Optometrist:in, Hörakustikmeister:in mit Foto, Schwerpunkt wie Kinder, Kontaktlinsen, Tinnitus, Sprachen)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“
8. **Person-Detailseite (je Person eine Seite, aufgerufen aus dem Team: Augenoptikermeisterin, Optometristin oder Hörakustikmeister mit Schwerpunkt wie Kinder, Kontaktlinsen oder Tinnitus, Sprachen und Termin bei dieser Person; Foto nur echt und mit Einwilligung, sonst markierter Platzhalter)**: [Personen-Detailseite](https://cecodesign.de/lab/fundus/sektionen/person-detailseite/demo?v=aerztin) `person-detailseite` · Variante „Ärztin“
9. **Stimmen (sachlich über Beratung und Service, nie über Heilwirkung; Google-Bewertungen nur mit Echtheitshinweis)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=stimmen-reihe) `testimonials-neu-gedacht` · Variante „Stimmen-Reihe mit Höhe der aktiven Stimme“, [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=pille) `bewertungsprofil-mit-echtheitshinweis` · Variante „Kopfzeilen-Pille“
10. **Filialen und Öffnungszeiten (Liste ab zwei Filialen, je Filiale Optik, Akustik oder beides; Status aus echten Zeiten; Karte per 2-Klick)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“, [Ö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. **Standorte (nur bei mehreren Häusern: je Standort eine eigene Seite mit Status aus echten Zeiten, Optik, Akustik oder beidem, Bus und Rad, Parken und ehrlichen Zugangsangaben; nie dieselbe Seite mit getauschtem Ortsnamen)**: [Standort-Detailseite](https://cecodesign.de/lab/fundus/sektionen/standort-detailseite/demo?v=filiale) `standort-detailseite` · Variante „Filiale“
12. **Kontaktlinsen und Pflegemittel nachbestellen (nur mit Online-Shop: Kaufbox, Versand, Gewährleistungshinweis, Widerruf mit den gesetzlichen Ausnahmen)**: [Kaufbox mit Farb- und Größenwahl](https://cecodesign.de/lab/fundus/sektionen/produkt-kaufbox-varianten/demo?v=kompakt) `produkt-kaufbox-varianten` · Variante „Schnellkauf“, [EU-Hinweis zur Gewährleistung und Garantie-Label](https://cecodesign.de/lab/fundus/sektionen/eu-gewaehrleistungshinweis/demo?v=footer-seite) `eu-gewaehrleistungshinweis` · Variante „Footer-Link und Seite“, [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“
13. **Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Termin oder Shop nach BFSG prüfen lassen; besonders auf Schriftgröße, Kontrast und Untertitel achten)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Unschärfe-Enthüllung (Blur-to-sharp) pro Wort](https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/demo) `blur-reveal`

## Moment (Pflicht: woran man sich erinnert)

- Was: Scharf stellen: die H1 wird beim ersten Laden scharf wie beim Fokusziehen; darunter ein breiter Regler, mit dem man eine Sehprobe bzw. ein Porträt selbst scharf stellt (Akustik: derselbe Regler macht einen Satz von dumpf zu klar), als Brücke zu „Sehtest buchen“.
- Wo: Startseite, erster und zweiter Bildschirm
- Gewicht: groß und interaktiv: Regler über mindestens 8 Spalten, Sehprobe mindestens 50 vh
- Muster: [Unschärfe-Enthüllung (Blur-to-sharp) pro Wort](https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/demo) `blur-reveal`
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## Buttons

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

## Weitere Bausteine

- Seitenwechsel: [Seitenwechsel in wachsender Markenform](https://cecodesign.de/lab/fundus/seitenuebergaenge/seitenwechsel-wachsende-form/demo?v=klickpunkt) `seitenwechsel-wachsende-form` · Variante „Kreis ab Klick“, [Vorschaubild wird zur Hero (Shared-Element-Morph)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-shared-element-morph/demo) `vt-shared-element-morph`
- 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`, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Scroll: [Bild-Reveal per Clip-Path/Maske](https://cecodesign.de/lab/fundus/scroll/clip-path-bild-reveal/demo) `clip-path-bild-reveal`
- Schrift: [Unschärfe-Enthüllung (Blur-to-sharp) pro Wort](https://cecodesign.de/lab/fundus/schrift-animationen/blur-reveal/demo) `blur-reveal`
- 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“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- 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: [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“
- Footer: [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`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo) `danke-seite-naechste-schritte`
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Nicht verwenden

- hovercard-interest-invoker – Signatur von praxis-gesundheit-ruhig; Fachwörter wie Prisma oder Audiogramm per details erklärt
- scroll-naechstes-projekt – Signatur von mode-beauty-kollektion
- liquid-glass-refraktion / webgl-bildverzerrung – Linsenverzerrung als Effekt verfälscht Fassungen und Gesichter
- cursor-masken-reveal – Lupe und Taschenlampe am Zeiger sind Spielerei und auf Touch unsichtbar
- marquee-laufband – Markenlogos als Laufband ohne Erlaubnis und unruhig
- zahlen-odometer – keine hochgezählten Kundenzahlen
- konfetti-erfolg – nach der Buchung eine ruhige Bestätigung
- smooth-scroll-lenis – stört Filter und Termin
- „Sehtest online“, „Hörtest in 2 Minuten“ ohne Fachperson – irreführend
- Augen-Icons, Sehtafel-Stockfotos, verschwommene Flächen als Gag – Klischee

## Regeln

- Erster Bildschirm: Porträt im Passepartout, H1, zwei gleichwertige Wege Sehtest und Hörtest, Telefon. Bei reiner Optik oder reiner Akustik nur der eine Weg.
- Signatur (blur-reveal): Die H1 der Startseite wird beim ersten Laden einmal scharf (Wörter, Blur 10 px → 0, 1000 ms, 50 ms Versatz). Nur dort, nur einmal je Sitzung, nie auf anderen Überschriften. Bei reduzierter Bewegung steht sie scharf.
- Termin: Jede Leistung mit Dauer und Preis oder „kostenlos“; das Buchungs-Widget lädt erst nach Klick, daneben Telefon. Keine Gesundheitsangaben als Pflichtfeld; Refraktionswerte und Audiogramme nie per Formular-Upload.
- Kosten ehrlich: Brillenpreis aus Fassung, Gläsern und Stärke als Beispielrechnung mit Stand-Datum; bei Hörgeräten Festbetrag der Krankenkasse, Eigenanteil und gesetzliche Zuzahlung je Gerät mit Stand und Quelle; Kassenleistung für Brillengläser nur mit den aktuellen Voraussetzungen. Festbetrag, Eigenanteil und Zuzahlung bei Hörgeräten sowie die Voraussetzungen für den Zuschuss zu Brillengläsern liefert der Kunde mit Stand und Quelle (Krankenkasse, Innung); bis dahin markierter Platzhalter, auch mit Beispieldaten nie erfundene Beträge. Vom Kunden prüfen lassen.
- Heilmittelwerbegesetz: Hörsysteme und Kontaktlinsen sind Medizinprodukte; keine Heilversprechen, keine Aussagen zur Heilung von Tinnitus oder Schwerhörigkeit, Stimmen nur über Beratung und Service. Kostenlose Sehtests und Hörtests sachlich nennen, ohne Druck. Vom Kunden prüfen lassen.
- Preise und Aktionen: Gesamtpreis inkl. MwSt.; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV); Ratenkauf nur mit effektivem Jahreszins und Warnhinweis direkt dabei (finanzierung-pflichtangaben, ab 20.11.2026).
- Marken: Hersteller-Logos und Kollektionsfotos nur mit Erlaubnis und Bildrechten.
- Werkstatt: Richtpreise und das Europäische Formular für Reparaturinformationen sind freiwillig (reparatur-richtpreise, Variante betrieb); wenn genutzt, 30 Tage bindend.
- Typografie: Bodoni Moda als Display nur für die H1 (ab 2.75rem, opsz an die Größe gekoppelt, nie fest 96); H2 in Bodoni Moda nur mit opsz 24 bis 36 und wght 600, darunter Mona Sans. Haarlinien zerfallen auf dem Bildschirm unter etwa 40 px (Jury Optiker-Probe 05.11.2026). Fragment Mono für jede Messgröße und Termindaten; Fließtext Mona Sans mindestens 17 px.
- Pflichtangaben (Leitfaden 8a): Impressum mit Handwerkskammer und Meister:in (Augenoptiker und Hörakustiker sind zulassungspflichtige Handwerke); bei Warenverkauf an Verbraucher der EU-Gewährleistungshinweis; beim Online-Shop Widerruf (hygienisch versiegelte Kontaktlinsen nach dem Öffnen ausgenommen, § 312g Abs. 2 Nr. 3 BGB) und GPSR-Angaben. Claude schreibt keine Rechtstexte, alles vom Kunden prüfen lassen.
- Seitenwechsel als Blende (seitenwechsel-wachsende-form, Variante klickpunkt, 800 ms hin mit cubic-bezier(0.76, 0, 0.24, 1) als --ease-form, 700 ms zurück mit der weicheren cubic-bezier(0.45, 0, 0.55, 1)): der Kreis öffnet sich am angeklickten Fassungsbild und schließt sich beim Zurück wieder dorthin. Kein Blur im Wechsel; die Unschärfe bleibt der einmalige Moment der H1.

## Rezept-Varianten

- **Hörakustik-Fachgeschäft (ohne Optik)**: Schrift, Farbe, Stil und Signatur bleiben; das Kapitel Hören wird die Startseite. Hörtest und Probetragen zuerst, Kosten mit Festbetrag und Zuzahlung, Zubehör und Batterien, Service für Hörsysteme anderer Anbieter. Untertitel für jedes Video, Telefonnummer und Rückruf gleich groß, weil Telefonieren für die Zielgruppe schwer sein kann (E-Mail und Rückruf-Formular gleichwertig).

## Vor der Abgabe

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