cms.c2sgmbh/docs/sensualmoments/sensualmomentsdesign.md

Design-Briefing: sensualmoment.de

Projekt-Übersicht

Website: sensualmoment.de Branche: Boudoir-Fotografie Zielgruppe: Frauen, 35–55 Jahre, die sich ein hochwertiges, intimes Fotoshooting als Akt der Selbstliebe gönnen möchten Tonalität: Warm, einladend, luxuriös aber nicht einschüchternd. Empowerment statt Sexualisierung. Die Kundin soll sich sicher, wertgeschätzt und inspiriert fühlen. CMS: Payload CMS (bereits vorhanden) Design-Referenz: Die beigefügte Datei sensualmoment-prototype.html enthält den vollständigen visuellen Prototyp mit allen Sektionen, Farben, Typografie und Layoutstrukturen.

---

1. Seitenstruktur & Payload-Collections

1.1 Globale Elemente

Navigation (Payload Global: navigation)

Feld	Typ	Beschreibung
logo	Upload (SVG/PNG)	Logo-Wordmark in Blush-Variante für dunklen Hintergrund
menuItems	Array	Menüpunkte mit label (Text) und link (Relationship oder URL)

Verhalten: Fixiert am oberen Rand, transparent über dem Hero. Nach 80px Scroll wechselt der Hintergrund zu Dark Wine (#2A1520) mit 95% Deckkraft und Backdrop-Blur. Menüpunkte sind in Josefin Sans, Uppercase, gesperrt.

Footer (Payload Global: footer)

Feld	Typ	Beschreibung
tagline	Text	Kurzbeschreibung unter dem Logo
navigationColumns	Array of Groups	Spalten mit title + Array aus label/link
socialLinks	Array	Plattform + URL
legalLinks	Array	Impressum, Datenschutz, AGB als label/link

Hintergrund: Deep Navy (#151B2B). Vierspaltig: Logo-Spalte (breit), drei schmale Navigationsspalten.

---

1.2 Einzelne Seiten

---

SEITE: Startseite (Homepage)

Route: / Payload: Page-Collection mit Slug home, Layout-Builder oder feste Felder

Sektion 1 — Hero

Feld	Typ	Beschreibung
headline	Text	Hauptüberschrift (Standard: „Sensual Moment")
subline	Text	Untertitel (Standard: „Boudoir Photography · Dein Moment der Selbstliebe")
ctaLabel	Text	Button-Text (Standard: „Dein Shooting buchen")
ctaLink	Relationship/URL	Ziel des Buttons
backgroundImage	Upload (optional)	Hintergrundbild, wird mit Dark-Wine-Overlay versehen

Layout: Fullscreen (100vh), zentrierter Inhalt. Hintergrund ist Dark Wine mit zwei subtilen radialen Gradienten (Bordeaux + Blush, je sehr niedrige Deckkraft). Scroll-Indikator am unteren Rand mit Puls-Animation. Einblendung des Inhalts mit fadeUp-Animation.

Sektion 2 — Über mich (Kurzversion)

Feld	Typ	Beschreibung
portrait	Upload	Fotografen-Portrait, hochformat (3:4)
sectionLabel	Text	„Über mich"
headline	Rich Text	z.B. „Jede Frau verdient es, sich selbst zu feiern"
bodyText	Rich Text	2–3 Absätze persönliche Vorstellung
signature	Text	Name der Fotografin
linkToFullPage	URL	Link zur vollständigen Über-mich-Seite

Layout: Zweispaltiges Grid (1:1) auf Crème-Hintergrund. Bild links mit abgerundeter Ecke oben rechts (border-radius: 0 120px 0 0). Text rechts. Max-Width 1280px, zentriert.

Sektion 3 — Galerie-Vorschau

Feld	Typ	Beschreibung
sectionLabel	Text	„Portfolio"
headline	Rich Text	z.B. „Momente der Selbstliebe"
description	Text	Kurzbeschreibung
images	Array of Uploads	8 Galerie-Bilder mit optionalem category-Label
linkToGallery	URL	„Alle Arbeiten ansehen"

Layout: Dark Wine Hintergrund, volle Breite. Asymmetrisches 4-Spalten-Grid mit 4px Gap. Das 3. Bild spannt 2 Zeilen, das 6. Bild spannt 2 Spalten. Hover-Effekt: dunkler Gradient von unten mit Category-Label das einblendet.

Sektion 4 — Testimonials

Feld	Typ	Beschreibung
sectionLabel	Text	„Erfahrungen"
headline	Rich Text	z.B. „Was meine Kundinnen sagen"
testimonials	Relationship zu Testimonials-Collection	3 Stück auf der Startseite

Layout: Crème-Hintergrund, zentrierter Header. Drei Karten im Grid mit weißem Hintergrund, feinem Blush-Border. Große Anführungszeichen in Playfair Display als Dekorelement.

Sektion 5 — Pakete-Vorschau

Feld	Typ	Beschreibung
sectionLabel	Text	„Investition in dich"
headline	Rich Text	„Pakete & Preise"
packages	Relationship zu Pakete-Collection	3 Pakete

Layout: Deep Navy Hintergrund. Drei Karten nebeneinander. Mittlere Karte ist „featured" (Blush-Border + Label „Beliebtestes Paket" als Pill oben). Hover: Border heller, translateY(-4px).

Sektion 6 — Blog/Journal-Vorschau

Feld	Typ	Beschreibung
sectionLabel	Text	„Journal"
headline	Rich Text	„Gedanken & Geschichten"
posts	Relationship zu Blog-Collection	3 neueste Beiträge

Layout: Crème-Hintergrund. Drei Karten mit Vorschaubild (4:3), Datum, Titel, Excerpt. Hover: Titel wechselt zu Bordeaux.

Sektion 7 — Kontakt-CTA

Feld	Typ	Beschreibung
headline	Rich Text	„Bereit für deinen Moment?"
description	Text	Einladungstext
contactInfo	Group	E-Mail, Telefon, Adresse, Social-Links
formFields	Definiert im Code	Name, E-Mail, Telefon, Paket-Interesse, Nachricht

Layout: Dark Wine, zweispaltig. Links: Text + Kontaktinfos. Rechts: Formular mit Underline-Inputs (kein Border, nur border-bottom). Submit-Button in Blush mit Dark-Wine-Text.

---

SEITE: Über mich

Route: /ueber-mich Payload: Page-Collection mit Slug ueber-mich

Sektion	Felder	Layout
Hero-Bereich	Großes Portrait + Headline + Kurztext	Zweispaltig, Dark Wine BG
Meine Geschichte	Rich Text mit Zwischenüberschriften	Schmale Spalte (max 720px), Crème BG
Meine Werte	3–4 Werte-Blöcke (Icon/Titel/Text)	Grid auf Crème
Persönliches	Lockerer Text, ggf. mit persönlichen Fotos	Crème, freies Layout
CTA	„Lass uns kennenlernen" → Kontaktseite	Dark Wine Band

---

SEITE: Galerie

Route: /galerie Payload Collection: gallery-images

Feld	Typ	Beschreibung
image	Upload	Das Bild selbst
title	Text (optional)	Bildtitel
category	Select	Klassisch / Artistisch / Elegant / Natürlich / Dramatisch / Sinnlich
featured	Boolean	Auf Startseite zeigen
order	Number	Sortierreihenfolge

Layout: Masonry- oder asymmetrisches Grid. Filtermöglichkeit nach Kategorie (animierte Tabs). Dark Wine Hintergrund. Lightbox bei Klick.

---

SEITE: Pakete & Preise

Route: /pakete Payload Collection: packages

Feld	Typ	Beschreibung
name	Text	Paketname (Entdecken / Erleben / Zelebrieren)
priceLabel	Text	z.B. „Ab 499 €"
features	Array of Text	Leistungsliste
featured	Boolean	Hervorgehobenes Paket
ctaLabel	Text	Button-Text
order	Number	Reihenfolge

Zusätzliche Sektionen auf der Seite: Einleitungstext oben, FAQ-Accordion unten (Payload Collection faqs mit question/answer), CTA-Band zum Kontaktformular.

---

SEITE: Blog / Journal

Route: /journal Payload Collection: blog-posts

Feld	Typ	Beschreibung
title	Text	Beitragstitel
slug	Text (auto)	URL-Pfad
publishDate	Date	Veröffentlichungsdatum
coverImage	Upload	Vorschaubild (4:3)
excerpt	Textarea	Kurztext für Vorschau
content	Rich Text / Blocks	Voller Artikelinhalt
category	Select	Tipps / Behind the Scenes / Persönlich

Übersichtsseite: Grid mit Karten (wie Startseiten-Vorschau, aber mehr Beiträge, paginiert). Einzelseite: Schmale Lesespalte (max 720px), großes Header-Bild, elegant typografiert.

---

SEITE: Kontakt

Route: /kontakt Payload: Page mit eingebettetem Formular oder Payload Forms Plugin

Identisch mit der Kontakt-Sektion auf der Startseite, aber als eigenständige Seite mit optionaler Karte/Anfahrt und erweitertem Text.

---

SEITE: FAQ

Route: /faq Payload Collection: faqs

Feld	Typ	Beschreibung
question	Text	Frage
answer	Rich Text	Antwort
category	Select	Vor dem Shooting / Während / Nachher / Allgemein
order	Number	Reihenfolge

Layout: Accordion-Elemente, gruppiert nach Kategorie. Crème-Hintergrund.

---

Pflichtseiten (Rechtlich)

Seite	Route	Payload
Impressum	/impressum	Page mit Rich-Text-Feld
Datenschutz	/datenschutz	Page mit Rich-Text-Feld
AGB	/agb	Page mit Rich-Text-Feld

Einfaches Layout: Schmale Textspalte auf Crème, sachliche Typografie.

---

1.3 Payload Collections – Zusammenfassung

Collection	Slug	Verwendung
Pages	pages	Alle statischen Seiten (Home, Über mich, Kontakt, Legal)
Gallery Images	gallery-images	Galerie-Bilder mit Kategorien
Packages	packages	Shooting-Pakete mit Preisen
Testimonials	testimonials	Kundinnenstimmen (quote, authorName, authorAge, featured)
Blog Posts	blog-posts	Journal-Beiträge
FAQs	faqs	Häufige Fragen
Media	media	Standard Payload Media-Collection

Global	Slug	Verwendung
Navigation	navigation	Logo + Menüpunkte
Footer	footer	Footer-Inhalte
Site Settings	site-settings	SEO-Defaults, Social-Media-Links, Kontaktdaten

---

2. Farbschema

2.1 Die sechs Kernfarben

┌─────────────────┬───────────┬────────────────────────────────────────────┐
│ Name            │ Hex       │ Verwendung                                 │
├─────────────────┼───────────┼────────────────────────────────────────────┤
│ Dark Wine       │ #2A1520   │ Haupthintergrund dunkler Sektionen,        │
│                 │           │ Hero, Kontakt, scrolled Navigation         │
├─────────────────┼───────────┼────────────────────────────────────────────┤
│ Blush Nude      │ #D4A9A0   │ Primäre Akzentfarbe: Buttons, Links,       │
│                 │           │ Hover-States, Logo auf dunklem Grund,      │
│                 │           │ Ornamente, Trennlinien                     │
├─────────────────┼───────────┼────────────────────────────────────────────┤
│ Bordeaux        │ #8B3A4A   │ Headlines auf hellem Hintergrund,          │
│                 │           │ Hover-Farbe für Blog-Titel, Akzente        │
├─────────────────┼───────────┼────────────────────────────────────────────┤
│ Deep Navy       │ #151B2B   │ Sektionswechsel (Pakete-Bereich), Footer   │
├─────────────────┼───────────┼────────────────────────────────────────────┤
│ Crème           │ #F8F4F0   │ Helle Flächen, Formulare, Fließtext-       │
│                 │           │ Hintergrund, Cards                         │
├─────────────────┼───────────┼────────────────────────────────────────────┤
│ Espresso        │ #3D2F30   │ Fließtext auf hellem Hintergrund           │
└─────────────────┴───────────┴────────────────────────────────────────────┘

2.2 Abgeleitete Werte (CSS Custom Properties)

:root {
  --dark-wine: #2A1520;
  --blush: #D4A9A0;
  --bordeaux: #8B3A4A;
  --navy: #151B2B;
  --creme: #F8F4F0;
  --espresso: #3D2F30;

  /* Transparenzvarianten für Overlays, Borders, Hintergründe */
  --blush-soft: rgba(212, 169, 160, 0.15);
  --blush-medium: rgba(212, 169, 160, 0.30);
  --blush-border: rgba(212, 169, 160, 0.20);
  --blush-hover-bg: rgba(212, 169, 160, 0.10);
}

2.3 Farbzuordnung nach Sektion

Sektion	Hintergrund	Text	Akzente
Navigation (gescrollt)	Dark Wine 95%	Blush	Blush Underline-Hover
Hero	Dark Wine + radiale Gradienten	Blush	Blush (CTA-Border)
Über mich	Crème	Espresso	Bordeaux (Headline), Blush (Divider)
Galerie	Dark Wine	Blush	Blush-soft (Bild-Platzhalter)
Testimonials	Crème	Espresso	Blush (Anführungszeichen), Bordeaux (Autorin)
Pakete	Deep Navy	Crème/Blush	Blush (Borders, CTA, Featured-Badge)
Blog	Crème	Espresso	Bordeaux (Hover), Blush (Divider)
Kontakt	Dark Wine	Blush	Blush (Submit-Button Hintergrund)
Footer	Deep Navy	Blush	Blush bei 30–60% Opacity

2.4 Interaktionszustände

Element	Default	Hover	Active/Focus
CTA-Buttons (dunkel)	Transparent + Blush-Border 30%	Blush-BG 10% + Border 100%	—
CTA-Buttons (Pakete)	Transparent + Blush-Border 30%	Blush-BG solid + Dark-Wine-Text	—
Submit-Button	Blush-BG + Dark-Wine-Text	Helleres Blush (#E0B8B0) + Schatten + translateY(-2px)	—
Nav-Links	Blush	Opacity 0.8 + Underline von links (width 0→100%)	—
Blog-Titel	Espresso	Bordeaux	—
Karten	Ohne Schatten	Box-Shadow + translateY(-4px)	—
Form-Inputs	Border-bottom Blush 20%	—	Border-bottom Blush 100%

---

3. Typografie

3.1 Schriftfamilien

Rolle	Font	Gewichte	Quelle
Display / Headlines	Playfair Display	400, 500, 600, 700 + Italic	Google Fonts
Fließtext / Body	Cormorant Garamond	300, 400, 500 + Italic	Google Fonts
UI / Labels / Navigation	Josefin Sans	200, 300, 400	Google Fonts

3.2 Typografie-Hierarchie

Element	Font	Größe	Gewicht	Sonstiges
Hero-Headline	Playfair Display	clamp(3.5rem, 8vw, 7rem)	400	Kursiv für zweite Zeile
Sektion-Titel (h2)	Playfair Display	clamp(2rem, 4vw, 3.2rem)	400	<em> = Italic
Sektion-Label	Josefin Sans	0.6rem	300	Uppercase, letter-spacing: 0.4em, opacity: 0.5
Fließtext	Cormorant Garamond	1.2rem	300	line-height: 1.8
Navigation	Josefin Sans	0.72rem	300	Uppercase, letter-spacing: 0.18em
Buttons/CTAs	Josefin Sans	0.62–0.68rem	300	Uppercase, letter-spacing: 0.2–0.25em
Testimonial-Text	Cormorant Garamond	1.05rem	300 Italic	line-height: 1.75
Karten-Titel	Playfair Display	1.2–1.4rem	400	—
Footer-Links	Cormorant Garamond	0.9rem	300	Opacity: 0.6, Hover: 1.0
Rechtliches/Meta	Josefin Sans	0.55–0.58rem	300	letter-spacing: 0.1–0.15em

3.3 Typografie-Prinzipien

Die drei Schriften haben klar getrennte Rollen: Playfair Display erzeugt visuelle Spannung und Eleganz in Headlines, wird aber nie für kleine Texte eingesetzt. Cormorant Garamond ist die „Stimme" der Seite und transportiert den Fließtext mit Leichtigkeit (Gewicht 300). Josefin Sans fungiert als funktionale Schrift für UI-Elemente und wird ausschließlich in Uppercase mit großzügiger Sperrung eingesetzt, um einen Kontrast zur organischen Serif-Welt zu schaffen.

Headlines nutzen häufig eine Kombination aus Regular und Italic, wobei ein Wort oder eine Phrase kursiv gesetzt wird, um einen visuellen Rhythmus zu erzeugen (z.B. „Momente der Selbstliebe"). Das Pattern zieht sich durch die gesamte Seite.

---

4. Designsprache & Gestaltungsprinzipien

4.1 Gesamteindruck

Die Seite vermittelt luxuriöse Intimität — sie fühlt sich an wie ein warmer, geschützter Raum. Dunkel genug für Atmosphäre, aber nie düster. Die Farbwelt ist bewusst Bordeaux-dominant mit warmen Hauttönen, nicht kühl oder technisch. Alles strahlt Vertrauen und Wertschätzung aus.

4.2 Layout-Prinzipien

Großzügiger Weißraum: Sektionen haben 120px Padding vertikal (80px auf Mobile). Nichts fühlt sich gedrängt an.

Rhythmischer Wechsel zwischen Hell und Dunkel: Die Seite alterniert konsequent: Hero (dunkel) → Über mich (hell) → Galerie (dunkel) → Testimonials (hell) → Pakete (dunkel/navy) → Blog (hell) → Kontakt (dunkel) → Footer (dunkel/navy)

Asymmetrie mit System: Das Galerie-Grid bricht bewusst aus dem gleichmäßigen Raster aus (ein Bild spannt 2 Zeilen, eines 2 Spalten). Das erzeugt visuelles Interesse ohne Chaos.

Max-Width für Inhalte: Textsektionen begrenzen sich auf 1100–1280px. Die Galerie darf volle Breite nutzen.

4.3 Dekorative Elemente

Element	Beschreibung
Trennlinien	48px breit, 1px hoch, Farbe Blush. Unter Sektion-Titeln.
Hero-Ornament	60px Linie mit Gradient (transparent → Blush → transparent), über dem Titel
Anführungszeichen	Großes „ in Playfair Display (2rem), Farbe Blush, in Testimonial-Karten
Featured-Badge	Pill-Shape, Blush-Hintergrund, Dark-Wine-Text, über der Paketkarte positioniert
Bild-Ecke	Das Über-mich-Portrait hat einen border-radius nur oben rechts (0 120px 0 0)

4.4 Animationen & Transitions

Effekt	Beschreibung	Dauer
Scroll-Reveal	Elemente mit Klasse .reveal faden von unten ein (translateY 30px → 0, opacity 0 → 1)	0.8s ease
Hero-Einblendung	Gesamter Hero-Content fährt von unten ein	1.2s ease-out
Nav-Transition	Padding, Hintergrund, Schatten ändern sich beim Scrollen	0.5s ease
Scroll-Indikator	Puls-Animation (Opacity + translateY)	2s infinite
Hover-Underline	Linie unter Nav-Links wächst von links (width 0 → 100%)	0.3s ease
Karten-Hover	Box-Shadow einblenden + translateY(-4px)	0.4s
Galerie-Hover	Dunkler Gradient von unten einblenden + Label einblenden (delay 0.1s)	0.4s
Button-Hover	Background-Change + ggf. Schatten + translateY(-2px)	0.4s

Alle Animationen sind subtil und unterstützend. Keine springenden, aufmerksamkeitsheischenden Effekte. Die IntersectionObserver-Schwelle liegt bei 15%.

4.5 Responsive-Verhalten

Breakpoint	Änderungen
≤ 900px	Navigation: Hamburger-Menü (Mobile-Menu noch zu implementieren). Alle Grids fallen auf 1 Spalte. Galerie wird 2-spaltig ohne Span-Varianten. Padding reduziert auf 80px/24px. Kontakt-Sektion wird einspaltig gestapelt. Footer wird 2-spaltig.

4.6 Bildsprache (Hinweis für Content)

Alle Platzhalter im Prototyp sind als dezente Blush-soft-Flächen angelegt. Die echten Bilder sollten folgenden Charakter haben: warme Töne, weiches Licht, natürliche Posen, Fokus auf Stärke und Anmut. Keine kühlen oder harten Kontraste. Die Bildwelt sollte die Farbwelt der Seite widerspiegeln — warme Hauttöne, dunkle Hintergründe, gelegentliche Stoffe in Bordeaux oder Crème.

---

5. Logo-Spezifikation

5.1 Aufbau

Das Logo ist ein reines Wordmark (keine Bildmarke, kein Symbol):

Sensual          ← Playfair Display, Regular, groß
        Moment   ← Playfair Display, Italic, kleiner, rechtsbündig unter "Sensual"
  PHOTOGRAPHY    ← Josefin Sans, Light, sehr klein, Uppercase, stark gesperrt, rechtsbündig

5.2 Farbvarianten

Variante	Text	Hintergrund	Einsatz
Primary	Blush (#D4A9A0)	Dark Wine (#2A1520)	Navigation, Hero, Kontakt
Navy	Blush (#D4A9A0)	Deep Navy (#151B2B)	Footer, Pakete-Bereich
Hell	Bordeaux (#8B3A4A)	Crème (#F8F4F0)	Helle Sektionen, Drucksachen
Invertiert	Crème (#F8F4F0)	Bordeaux (#8B3A4A)	Spezielle Akzente, Social Media

Das Logo existiert als Canva-Design mit allen 4 Varianten (Design-ID: DAHCgZTIQkg). Für die Website sollte es als SVG exportiert werden.

---

6. Technische Hinweise für Payload

6.1 Empfohlene Payload-Konfiguration

Die Seite hat einen klaren Wechsel zwischen dunklen und hellen Sektionen. Im Payload-Admin sollte es für Page-Layouts einen Block-Builder geben, bei dem jeder Block ein Feld theme hat (light | dark | navy), das automatisch die richtige Farbkombination anwendet.

6.2 Rich-Text-Kursiv-Konvention

Überall auf der Seite werden Kursivierungen in Headlines als Stilmittel eingesetzt. Das Payload-Rich-Text-Feld muss Italic unterstützen und im Frontend als <em> mit Playfair Display Italic gerendert werden.

6.3 SEO-Felder

Jede Page und jeder Blog-Post sollte folgende Felder haben: metaTitle, metaDescription, ogImage (Upload). Payload bietet dafür ein SEO-Plugin an.

6.4 Formular-Handling

Das Kontaktformular sollte über Payload Forms oder eine eigene Collection (form-submissions) verarbeitet werden. Felder: Name, E-Mail, Telefon (optional), Paket-Interesse (Select), Nachricht. E-Mail-Benachrichtigung an die Fotografin konfigurieren.

---

7. Dateireferenzen

Datei	Beschreibung
sensualmoment-prototype.html	Vollständiger visueller Prototyp mit allen Sektionen und CSS
farbschema-final.html	Interaktive Farbschema-Dokumentation
Canva Design DAHCgZTIQkg	Logo in allen 4 Farbvarianten