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

```css
: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 |
