# Bauplan: Salon: Handschrift und Termin

Rezept `friseur-salon-handschrift` · Friseur / Barbershop / Kosmetikstudio / Nagelstudio · Stimmung: stilbewusst, persönlich, warm, selbstbewusst · Stand 02.11.2026

Ein Salon verkauft Termine bei bestimmten Menschen. Deshalb steht die Handschrift der Stylist:innen im Mittelpunkt: ihre Looks zum Durchwischen, ihr Name als Unterschrift, ihre Preisstufe offen in einer echten HTML-Preisliste. Puder statt Weiß, Espresso statt Schwarz, ein Lackrot nur für „Termin buchen“, dazu eine breitenvariable Kontrast-Antiqua mit Haltung. Alle Bewegung läuft auf einer einzigen Hauskurve: zögernder Anlauf, langer weicher Auslauf, wie ein Kammstrich.

## 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 `friseur-salon-handschrift`) und https://cecodesign.de/lab/fundus/rezepte/friseur-salon-handschrift/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt
- Starter-Seite (fertiges Beispiel nach diesem Rezept): https://cecodesign.de/lab/fundus/starter/friseur-salon-handschrift/index.html

## Schrift

- Headline: `kalnia` · Text: `familjen-grotesk` · Akzent: `mrs-saint-delafield`
- Größen: Salonname und h1 Kalnia clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem), wdth 112, wght 500, Laufweite -0.02em, Zeilenhöhe 0.95 (Barbershop: wdth 125, wght 700, Versal, Laufweite +0.01em); h2 clamp(1.75rem, 1.2rem + 2vw, 2.75rem), wdth 100, wght 500. Fließtext Familjen Grotesk 1.0625rem/1.55, wght 400, max. 62ch; Preiszeilen 1rem wght 500, Preise rechtsbündig in Tabellenziffern; Rubriken und Stufen 0.8125rem Versal, +0.06em in Familjen (keine Mono). Mrs Saint Delafield nur für den Namen unter dem Porträt, 2.25–3rem, um -4° gedreht, höchstens einmal pro Ansicht; der Name steht darunter noch einmal in Familjen, damit ihn jeder lesen kann.
- Techniken: [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [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`, [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

Puder statt Reinweiß, Espresso statt Schwarz und ein Lackrot, das nur „Termin buchen“ und aktive Zustände trägt. Große Flächen aus Puder und Espresso (Preisliste, Gutschein, Fußzeile). Die Farbe kommt aus den Fotos der Arbeiten, deshalb bleiben die UI-Flächen neutral warm und färben keine Haarfarbe um. Barbershop: Espresso als Grund, Puder als Schrift.

- `--farbe-grund` #F4E9E4 (Grund (Puder))
- `--farbe-grund-2` #1E1412 (Text, dunkle Sektionen, Barbershop-Grund (15 : 1 auf Puder))
- `--farbe-signal` #9B1D2E (Signal Lackrot: Termin buchen, aktiver Reiter (6,8 : 1 auf Puder; Weiß darauf 8 : 1; auf Espresso nur mit 2 px Puder-Rand))
- `--farbe-flaeche` #E9DBD4 (Kartenfläche, Preisliste)
- `--farbe-text` #6E5A55 (Meta: Dauer, Stufe, Bildunterschrift (5,4 : 1 auf Puder))
- `--farbe-linie` #D9C8C0 (Linien)

## Bewegung

- Animationsstil: [Animationsstil „Studio-Signatur“ (asymmetrisches Gleiten)](https://cecodesign.de/lab/fundus/animationsstile/token-studio-signatur/demo) `token-studio-signatur`
- Kurve: cubic-bezier(0.625, 0.05, 0, 1) (token-studio-signatur, eine Kurve für alles)
- Dauer: 250 (Farbe, Schatten, Hover), 400 (Menü, Drawer, Akkordeon, Unterstreichung, Reiter der Preisliste), 475 (Buttons: Fläche fährt von unten ein), 725 (nur Wurf und Rückkehr der Look-Karten, Hero-Bild einmalig); Schließen 65 % der Öffnungsdauer mit derselben Kurve (Menü 260)
- Regel: Eine Kurve, eine Skala, wie im Stil gemessen. Zögernder Anlauf, langer weicher Auslauf: Das wirkt wie ein Kammstrich und gibt dem Salon eine eigene Geste, ohne Federn und ohne Überschwingen. Text, Preise und Formulare stehen sofort. Keine Einblendungen beim Scrollen. Beim Ziehen keine Kurve, nur der Finger. Bei prefers-reduced-motion bleiben Farb- und Opazitätswechsel, Wege und Würfe entfallen.
- Hinweis: Studio-Signatur als Hauskurve des Salons: eine Kurve für Buttons, Menü, Akkordeon und Kartenstapel, so wie Osmo sie konsequent für alle UI-Übergänge nutzt (Messwert im Stil). Laut wann_nicht nicht für lange Scroll-Einblendungen (entfallen hier, nur der Hero blendet einmal ein) und nicht für Drag-Feedback (beim Ziehen folgen die Karten dem Finger 1:1, erst beim Loslassen greift die Kurve). Der Stil taugt für UI, deshalb kein animationsstil_ui; Interaktives bleibt unter 500 ms.

## 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, 136
- Sektionsabstand: clamp(64px, 8vw, 120px)
- Dichte: mittel
- Hinweis: Preisliste dicht und lesbar (Zeilen 12 px, Rubriken 32 px), Team-Karten mit Luft. Bewertungsband direkt unter dem Hero ohne großen Abstand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 48px)
- Spaltenabstand: clamp(12px, 2vw, 24px)
- Maximale Breite: 1360px
- Raster: Hero 7/5 (Name/Foto im Hochformat). Preisliste mit Stufen als Spalten, Team als 3er-Raster mit Kartenstapel je Person.
- Radius klein: 8px
- Radius groß: 16px
- Pillenform für Buttons: True
- Linie: 1px #D9C8C0
- Schatten: nur die Look-Karten im Stapel (flick-karten-stapel) heben sich weich in Espresso ab; sonst keiner
- Form: Pillen für Knöpfe (fuellung-vom-eintrittspunkt), 16 px für Look-Karten und Porträts (Demo flick-karten-stapel zeigt 12 bis 16 px).

## Bildsprache

- Licht: Salon- oder Fensterlicht, Haarfarbe farbecht.
- Ausschnitt: Hinterkopf, Profil, Bewegung im Haar; Porträt der Stylist:in auf Augenhöhe.
- Personen: Ja: Kund:innen nur mit schriftlicher Einwilligung, Kinder ohne erkennbares Gesicht; Stylist:innen mit Namen.
- Formate: 4:5, 3:4, 1:1
- Nicht: Keine Stock-Models, keine KI-Frisuren, keine Farbfilter, die Haarfarben verfälschen, kein Video im Hero.

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

- Anrede: du
- Sätze: Kurz und persönlich, mit Namen. Preiszeile: Leistung, Dauer, Preis; „ab“ nur mit dem Satz, wovon es abhängt.
- Haltung: Stilbewusst und warm. Ein Herrensalon oder klassischer Salon mit älterer Kundschaft siezt, dann durchgehend.
- Tonproben: Balayage bei Mira. Ab 145 €, je nach Haarlänge., Buch direkt bei deiner Stylistin.
- Nicht: „Ihr Wohlfühlsalon“, „Haare sind unsere Leidenschaft“, Wortspiele wie „Haarmonie“, Bewertungssterne ohne Quelle.

## Hero

Foto einer echten Arbeit aus dem Salon (Person mit Einwilligung, Salonlicht) in voller Breite oder als großes Hochformat neben dem Salonnamen in Kalnia. Darunter ein Satz zu Spezialgebiet und Ort, zwei Knöpfe „Termin buchen“ (Lackrot) und „Preise ansehen“, Telefon und WhatsApp als Links. Direkt unter dem Hero das Bewertungsband. Keine Stock-Models, keine KI-Frisuren, kein Video im Hero; eigenes Salonvideo höchstens weiter unten als Klick-Video.

- Raster: 12 Spalten: Salonname über Spalte 1 bis 7, echtes Foto im Hochformat über 8 bis 12; alternativ Foto randlos mit Name darauf.
- Bild: Eine echte Arbeit aus dem Salon, 4:5 oder 3:4, Radius 16 px.
- Überschrift: clamp(2.75rem, 1.5rem + 5.5vw, 6.5rem), Kalnia wdth 112 / 500, links.
- Handlung: „Termin buchen“ (Lackrot #9B1D2E gefüllt) und „Preise ansehen“ (Kontur); Telefon und WhatsApp als Links darunter.
- Zusatz: Satz zu Spezialgebiet und Ort unter der H1; Bewertungsband mit Quelle und Stand direkt unter dem Hero.

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

## Sektionen in dieser Reihenfolge

1. **Bewertungsband direkt unter dem Hero (Google-Profil: Schnitt, Anzahl, Stand-Datum, Echtheitshinweis daneben)**: [Plattform-Bewertungen mit Echtheitshinweis](https://cecodesign.de/lab/fundus/sektionen/bewertungsprofil-mit-echtheitshinweis/demo?v=band) `bewertungsprofil-mit-echtheitshinweis` · Variante „Band unter dem Hero“
2. **Leistungen & Preise (Rubriken Damen, Herren, Kinder, Farbe, Pflege, Kosmetik/Nägel als Reiter; Stufen als Spalten, Haarlänge als Zuschlag, ab-Preise mit dem Satz, wovon der Endpreis abhängt; jede wichtige Leistung mit eigener Unterseite, Antwort zuerst)**: [Speisekarte als Editorial](https://cecodesign.de/lab/fundus/sektionen/speisekarte-editorial/demo?v=preisliste) `speisekarte-editorial` · Variante „Preisliste Dienstleistung“, [Tabs und Segmente mit Pfeiltasten](https://cecodesign.de/lab/fundus/zugang/tabs-pfeiltasten-focusgroup/demo?v=auto) `tabs-pfeiltasten-focusgroup` · Variante „Automatisch“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“
3. **Team: wer schneidet, färbt, berät (Porträt, Name als Unterschrift, Stufe, Spezialgebiet, Sprachen, eigener Buchungsknopf; ab etwa sechs Personen Raster, darunter Variante statement)**: [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“, [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“
4. **Looks: Arbeiten je Stylist:in als Kartenstapel zum Durchwischen (Look, Leistung, Dauer, ab-Preis als Text); die ganze Wand erst ab etwa acht Bildern**: [Karten-Stapel und Fächer zum Wegschnippen](https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/demo) `flick-karten-stapel`, [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`, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“
5. **Termin buchen (Widget erst nach Klick, daneben Telefon und WhatsApp; Ausfall- und Verspätungsregel des Salons als markierter Platzhalter)**: [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“
6. **Gutscheine (Wert oder Leistung, Live-Vorschau, PDF oder Post; bei Online-Kauf Widerrufs-Button)**: [Gutschein-Konfigurator](https://cecodesign.de/lab/fundus/sektionen/gutschein-konfigurator/demo) `gutschein-konfigurator`, [Widerrufs- und Kündigungs-Button](https://cecodesign.de/lab/fundus/sektionen/widerruf-und-kuendigung-schaltflaeche/demo?v=richtig) `widerruf-und-kuendigung-schaltflaeche` · Variante „Richtig“
7. **Produkte im Salon (die Pflege, mit der gearbeitet wird; ohne Shop nur zeigen, mit Shop Kaufbox und Warenkorb aus d2c-produkt-zuerst leihen)**: [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“
8. **Karriere & Ausbildung (offene Stellen direkt offen, Ausbildung, Initiativbewerbung)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige) `stellen-karriere` · Variante „Wenige Stellen“
9. **Öffnungszeiten, Anfahrt, Kontakt (Status aus echten Zeiten im Kopf, Adresse als Text, Karte per 2-Klick, ein Datenblock für Seite und JSON-LD HairSalon / BeautySalon / NailSalon)**: [Ö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“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
10. **Barrierefreiheit (eigene Seite; Variante BFSG, wenn online gebucht oder verkauft wird und der Salon kein Kleinstunternehmen ist – vom Kunden prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“

## Signatur (Pflicht)

- [Karten-Stapel und Fächer zum Wegschnippen](https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/demo) `flick-karten-stapel`

## Buttons

- Haupthandlung: [Füllung vom Eintrittspunkt](https://cecodesign.de/lab/fundus/hover/fuellung-vom-eintrittspunkt/demo?v=basis) `fuellung-vom-eintrittspunkt` · Variante „Clip-Path-Formen (Tischlerei)“
- 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: [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=fab) `mobile-bottom-navigation` · Variante „Daumen-Knopf mit Aktionsmenü (Salon)“, [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`
- Hover: [Form-Morph-Buttons (Clip-Path)](https://cecodesign.de/lab/fundus/hover/clip-path-form-hover/demo?v=basis) `clip-path-form-hover` · Variante „Clip-Path-Morph: Blob, Pfeil, Wölbung“
- Mikroanimation: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- Galerie: [Karten-Stapel und Fächer zum Wegschnippen](https://cecodesign.de/lab/fundus/galerien-slider/flick-karten-stapel/demo) `flick-karten-stapel`, [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`, [Raster-zu-Vollbild mit geteiltem Element (Lightbox 2026)](https://cecodesign.de/lab/fundus/galerien-slider/galerie-shared-element-vollbild/demo?v=basis) `galerie-shared-element-vollbild` · Variante „Projektraster zu Vollbild oder Panel“, [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“
- 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?v=friseur) `firmendaten-strukturiert` · Variante „Friseursalon (HairSalon)“
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`

## Nicht verwenden

- graustufen-zu-farbe – Haarfarbe ist das Ergebnis, das verkauft wird; Touch-Besucher (die meisten, oft vom Instagram-Link) sähen die Farbe nie
- webgl-bildverzerrung / svg-filter-verzerrung / halbton-raster – verfälschen Farbe und Schnitt auf den Arbeitsproben
- vorher-nachher-vergleichsregler – Signatur von handwerk; bei Kosmetik mit Behandlungen zudem heilmittelwerberechtlich heikel
- marquee-laufband / rotating-words – „Schnitt · Farbe · Pflege“ als Band oder Wortwechsel ist Salon-Template-Klischee und automatische Bewegung
- prozent-zaehler / einmal-intro-session – Kundinnen kommen vom Instagram-Link und wollen sofort buchen
- smooth-scroll-lenis / cursor-follower-lerp / magnetische-elemente – Agentur-Gesten, stören beim Wischen durch die Looks
- mesh-gradient-shader / holo-irisierende-folie – Effekt statt Handschrift
- Preisliste als PDF oder Bild – nicht lesbar am Telefon, nicht durchsuchbar, nicht barrierefrei
- Stockfotos und KI-generierte Frisuren – Arbeitsproben müssen echt sein und aus dem Salon stammen

## Regeln

- Erster Bildschirm: echtes Foto einer Arbeit aus dem Salon, Salonname groß, ein Satz zu Spezialgebiet und Ort, „Termin buchen“ und „Preise ansehen“; das Bewertungsband steht direkt darunter.
- Preise als HTML-Liste, nie als PDF oder Bild: Leistung, Dauer und Preis je Zeile, Preise in Tabellenziffern; Stufen (z. B. Junior, Stylist, Master) als Spalten, Haarlänge als Zuschlag; „ab“ nur zusammen mit dem Satz, wovon der Endpreis abhängt (wie Hair by SPECHT und Josh Wood). Gesamtpreise inkl. MwSt.
- Jede Person im Team bekommt eine Karte mit Porträt, Name als Unterschrift (Akzentschrift, nur hier), Stufe, Spezialgebiet und eigenem Buchungsknopf („Bei [Name] buchen“); ihre Looks liegen als Kartenstapel (flick-karten-stapel) direkt dabei.
- Kartenstapel immer auch per Knopf bedienbar (Weiter, Zurück, Alle zeigen); Wischen ist nur der schnellere Weg. Jede Karte nennt Look, Leistung, Dauer und ab-Preis als Text, nicht nur im Bild.
- Buchung per termin-buchung-zwei-klick: Platzhalter in Widget-Höhe mit Leistungen und Anbieter, Kalender erst nach Klick; Telefon und WhatsApp stehen daneben. Ausfall- und Verspätungsregeln formuliert nur der Salon (markierter Platzhalter).
- Mobil eine untere Leiste mit Termin, Preise, Anrufen (mobile-bottom-navigation); sie verdeckt weder Consent-Banner noch Buchungs-Widget.
- Fotos von Kundinnen und Kunden nur mit schriftlicher Einwilligung, Kinder ohne erkennbares Gesicht. Instagram nicht live einbetten, sondern eine selbst gehostete Auswahl mit Link zum Profil.
- Bewertungen nur mit Quelle, Anzahl, Stand-Datum und dem Hinweis, ob und wie geprüft wird, direkt neben den Stimmen (bewertungsprofil-mit-echtheitshinweis); keine Bewertungssterne über den eigenen Salon im Markup.
- Gutscheine: Gültigkeit und Einlösung legt der Salon fest. Wird online gekauft, braucht es Gesamtpreis inkl. MwSt., Widerrufsbelehrung, AGB und den Widerrufs-Button (widerruf-und-kuendigung-schaltflaeche) – alles als markierte Platzhalter, vom Kunden prüfen lassen.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum und Datenschutz vom Footer und mobil erreichbar; beim Friseurhandwerk Handwerkskammer-Eintrag im Impressum (vom Kunden prüfen lassen). Kosmetik mit apparativen oder medizinnahen Behandlungen: keine Heilversprechen, Werbung nach Heilmittelwerbegesetz prüfen lassen. Claude schreibt keine Rechtstexte.
- Lackrot nur für „Termin buchen“ und aktive Zustände; große Flächen aus Puder und Espresso.
- Bewegung auf einer Kurve: Buttons füllen sich in 475 ms von unten, Menüs öffnen in 400 ms und schließen in 260 ms, Look-Karten fliegen beim Loslassen in 725 ms aus. Keine Scroll-Einblendungen außer dem Hero.
- Team bis etwa fünf Personen: je Person ein Reiter mit Porträt, Unterschrift (Akzentschrift einmal pro Ansicht) und Look-Stapel; ab sechs Personen Raster ohne Unterschrift.
- clip-path-form-hover nur für einen einzeln stehenden Knopf (z. B. Gutschein), nie neben „Termin buchen“.

## Rezept-Varianten

- **Barbershop**: Espresso #1E1412 als Grund, Puder #F4E9E4 als Schrift (15 : 1); Lackrot bleibt Signal, auf Espresso mit 2 px Puder-Rand (Lackrot allein hat dort nur 2,2 : 1). Kalnia wdth 125, wght 700, Versal. Preise nach Stufe (Junior, Barber, Senior) wie bei Fellow Barber, Dauer je Leistung wie bei Pall Mall Barbers.
- **Kosmetik- und Nagelstudio**: Behandlungen wie bei Heyday als eigene Leistungsseiten mit Dauer, Ablauf, Inhalt und Preis (leistungsseite-antwort-zuerst); Nageldesigns als Looks im Kartenstapel. Apparative oder medizinnahe Behandlungen (z. B. Microneedling, Laser): keine Vorher-nachher-Bilder, keine Heilversprechen, Heilmittelwerbegesetz vom Kunden prüfen lassen. Pakete oder Abos nur, wenn es sie gibt; bei Abo zusätzlich der Kündigungs-Button.
- **Tattoo- und Piercingstudio**: Schrift, Farbe, Stil und Signatur bleiben: flick-karten-stapel trägt die Portfolios, je Artist ein Stapel; jede Karte nennt Motiv, Stil, Körperstelle und Zahl der Sitzungen als Text, verheilte Arbeiten sind als solche gekennzeichnet. Die Unterschrift in Mrs Saint Delafield bleibt für die Artist-Namen. Beratungstermin als mehrschritt-anfrage (Variante senkrecht: Idee → Stelle und Größe → Referenzbilder hochladen → Kontakt und Wunschzeitraum); Gesundheitsangaben nie als Pflichtfeld, das klärt das Gespräch. Feste Termine bei einer Person über termin-buchung-zwei-klick; Anzahlung, Ausfall- und Verschieberegel formuliert nur das Studio (markierter Platzhalter). Pflegehinweise für Tattoo und Piercing als akkordeon-hoehe-auto (Variante faq) und als druckbare Seite. Guest Spots als programm-kalender erst ab etwa acht Terminen im Monat, sonst Liste. Preise als speisekarte-editorial (Variante preisliste): Piercing je Stelle inkl. Erstschmuck und Material, Tattoo als Mindestpreis oder Stundensatz mit dem Satz, wovon der Endpreis abhängt. Recht: Tätowieren und Piercen nur mit Ausweis; Altersregel des Studios (Tattoo in der Regel ab 18, Piercing bei Minderjährigen nur mit schriftlicher Einwilligung der Sorgeberechtigten) als markierter Platzhalter; nur Tätowiermittel nach der EU-REACH-Beschränkung (seit 04.01.2022); Laser-Tattooentfernung ist Ärzt:innen vorbehalten (NiSV, seit 31.12.2022) und wird nicht als Studio-Leistung beworben; Pflegehinweise ohne Heilversprechen; Hygiene nach Landesrecht; Fotos nur mit schriftlicher Einwilligung der Kundschaft; Handwerkskammer bzw. Gewerbeangaben im Impressum – 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“.