frontend.blogwoman.de/docs/guides/styleguide.md

# BlogWoman.de – Frontend Styleguide

**Version:** 1.0  
**Stand:** Januar 2025  
**Marke:** BlogWoman by Caroline Porwoll

---

## 1. Design-Philosophie

### 1.1 Markenkern

BlogWoman steht für **„Editorial Warmth"** – eine Premium-Ästhetik, die hochwertig wirkt, aber nahbar bleibt. Die Website soll wie ein hochwertiges Lifestyle-Magazin wirken, nicht wie ein typischer Influencer-Blog.

**Leitprinzipien:**
- **Premium, nicht protzig** – Qualität durch Zurückhaltung
- **Warm, nicht kalt** – Einladend, nicht steril
- **Klar, nicht überladen** – Luft zum Atmen, klare Hierarchien
- **System, nicht Chaos** – Strukturiert, wiedererkennbar, konsistent

### 1.2 Zielgruppe im Kopf behalten

Die Website richtet sich an berufstätige Mütter (35–45), die:
- Wenig Zeit haben → **Schnell scanbar, klare CTAs**
- Qualität schätzen → **Premium-Look, keine billige Ästhetik**
- Professionalität gewohnt sind → **Seriös, aber nicht steif**

---

## 2. Farbsystem

### 2.1 Primärfarben (Basis)

| Name | Hex | RGB | Verwendung |
|------|-----|-----|------------|
| **Ivory** | `#F7F3EC` | rgb(247, 243, 236) | Hintergründe, große Flächen (60%) |
| **Sand/Camel** | `#C6A47E` | rgb(198, 164, 126) | Cards, Module, Labels, Akzente (30%) |
| **Espresso** | `#2B2520` | rgb(43, 37, 32) | Text, Headlines, Kontrast |

### 2.2 Akzentfarben (10%)

| Name | Hex | RGB | Verwendung |
|------|-----|-----|------------|
| **Muted Brass** | `#B08D57` | rgb(176, 141, 87) | Primary Buttons, Highlights, Premium-Signal |
| **Bordeaux/Wine** | `#6B1F2B` | rgb(107, 31, 43) | Pleasure-Akzent, spezielle Serien |
| **Rosé** | `#D4A5A5` | rgb(212, 165, 165) | SPARK-Serie, feminine Akzente |
| **Gold** | `#C9A227` | rgb(201, 162, 39) | Inner Circle, Premium-Badges |

### 2.3 Neutrale Farben

| Name | Hex | RGB | Verwendung |
|------|-----|-----|------------|
| **Soft White** | `#FBF8F3` | rgb(251, 248, 243) | Cards, helle Flächen, Overlays |
| **Warm Gray** | `#DDD4C7` | rgb(221, 212, 199) | Borders, Dividers, dezente Linien |
| **Warm Gray Dark** | `#B8ADA0` | rgb(184, 173, 160) | Placeholder-Text, Icons (deaktiviert) |

### 2.4 Funktionsfarben

| Name | Hex | Verwendung |
|------|-----|------------|
| **Success** | `#4A7C59` | Erfolg, Bestätigung |
| **Warning** | `#D4A574` | Hinweise, Warnungen |
| **Error** | `#8B3A3A` | Fehler, kritische Hinweise |
| **Info** | `#6B8E9B` | Informationen, Tooltips |

### 2.5 Anwendungsregel: 60/30/10

```
60% Ivory (#F7F3EC)    → Hintergründe, große Flächen
30% Sand (#C6A47E)     → Cards, Module, Labels
10% Akzent             → Buttons, Badges, Highlights
```

**Wichtig:** Niemals Brass UND Bordeaux dominant im selben Element.

### 2.6 Verbotene Farben

- ❌ Neon-Farben (wirkt billig)
- ❌ Pastell-Überfluss (zu Pinterest/jung)
- ❌ Kühles Klinik-Blau (zu Corporate)
- ❌ Reines Schwarz `#000000` (zu hart – immer Espresso verwenden)
- ❌ Reines Weiß `#FFFFFF` (zu kalt – immer Ivory/Soft White verwenden)
- ❌ Starkes Gold mit Schwarz (zu Business EN)

### 2.7 CSS Custom Properties

```css
:root {
  /* Primärfarben */
  --color-ivory: #F7F3EC;
  --color-sand: #C6A47E;
  --color-espresso: #2B2520;
  
  /* Akzentfarben */
  --color-brass: #B08D57;
  --color-bordeaux: #6B1F2B;
  --color-rose: #D4A5A5;
  --color-gold: #C9A227;
  
  /* Neutrale */
  --color-soft-white: #FBF8F3;
  --color-warm-gray: #DDD4C7;
  --color-warm-gray-dark: #B8ADA0;
  
  /* Funktionsfarben */
  --color-success: #4A7C59;
  --color-warning: #D4A574;
  --color-error: #8B3A3A;
  --color-info: #6B8E9B;
  
  /* Semantische Aliase */
  --color-background: var(--color-ivory);
  --color-surface: var(--color-soft-white);
  --color-text-primary: var(--color-espresso);
  --color-text-secondary: var(--color-warm-gray-dark);
  --color-border: var(--color-warm-gray);
  --color-primary: var(--color-brass);
  --color-primary-hover: #9E7E4D;
}
```

---

## 3. Typografie

### 3.1 Schriftarten

| Einsatz | Schrift | Fallback | Google Fonts Import |
|---------|---------|----------|---------------------|
| **Headlines** | Playfair Display | Georgia, serif | `family=Playfair+Display:wght@400;500;600;700` |
| **Body/UI** | Inter | -apple-system, BlinkMacSystemFont, sans-serif | `family=Inter:wght@400;500;600;700` |

### 3.2 Font Import

```html
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

### 3.3 Typografie-Skala

#### Headlines (Playfair Display)

| Element | Desktop | Tablet | Mobile | Weight | Line-Height | Letter-Spacing |
|---------|---------|--------|--------|--------|-------------|----------------|
| **H1** | 56px | 44px | 36px | 600 | 1.15 | -0.02em |
| **H2** | 44px | 36px | 28px | 600 | 1.2 | -0.02em |
| **H3** | 34px | 28px | 24px | 600 | 1.25 | -0.01em |
| **H4** | 28px | 24px | 20px | 500 | 1.3 | -0.01em |
| **H5** | 22px | 20px | 18px | 500 | 1.35 | 0 |
| **H6** | 18px | 16px | 16px | 500 | 1.4 | 0 |

#### Body Text (Inter)

| Element | Size | Weight | Line-Height | Letter-Spacing |
|---------|------|--------|-------------|----------------|
| **Body Large** | 18px | 400 | 1.7 | 0 |
| **Body Regular** | 16px | 400 | 1.65 | 0 |
| **Body Small** | 14px | 400 | 1.6 | 0 |
| **Caption** | 13px | 400 | 1.5 | 0.01em |
| **Overline** | 12px | 600 | 1.4 | 0.1em |

#### UI Elements (Inter)

| Element | Size | Weight | Letter-Spacing | Text-Transform |
|---------|------|--------|----------------|----------------|
| **Button Large** | 16px | 600 | 0.02em | none |
| **Button Regular** | 14px | 600 | 0.02em | none |
| **Button Small** | 13px | 600 | 0.02em | none |
| **Label** | 12px | 600 | 0.08em | uppercase |
| **Nav Link** | 14px | 500 | 0.02em | none |
| **Input** | 16px | 400 | 0 | none |

### 3.4 CSS Typografie-System

```css
:root {
  /* Font Families */
  --font-headline: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Sizes */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8125rem;  /* 13px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 1rem;       /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.375rem;   /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.125rem;  /* 34px */
  --text-4xl: 2.75rem;   /* 44px */
  --text-5xl: 3.5rem;    /* 56px */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.7;
}

/* Base Styles */
body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  margin: 0;
}

h1 {
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--text-4xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

h4 {
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  line-height: 1.3;
}

h5 {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: 1.35;
}

h6 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  line-height: 1.4;
}

p {
  margin: 0 0 1em 0;
}

/* WICHTIG: Keine CAPSLOCK Headlines */
/* Headlines sind NIEMALS vollständig in Großbuchstaben */
```

### 3.5 Typografie-Regeln

1. **Headlines:** Immer Playfair Display, max. 6-8 Wörter pro Zeile
2. **Body:** Immer Inter, optimale Zeilenlänge 60-80 Zeichen
3. **Keine CAPSLOCK-Headlines** – wirkt unpremium
4. **Labels/Overlines:** Einzige Ausnahme für Uppercase, dann mit Letter-Spacing
5. **Kein Underline für Links** – Farbwechsel + Hover-Effekt stattdessen

---

## 4. Spacing-System

### 4.1 Spacing-Skala (8px Base)

| Token | Value | Verwendung |
|-------|-------|------------|
| `--space-0` | 0 | Reset |
| `--space-1` | 4px | Minimaler Abstand |
| `--space-2` | 8px | Icons zu Text, enge Abstände |
| `--space-3` | 12px | Kleine Lücken, Inline-Elemente |
| `--space-4` | 16px | Standard-Padding, Gaps |
| `--space-5` | 20px | Card-Padding (small) |
| `--space-6` | 24px | Zwischen-Abschnitte |
| `--space-8` | 32px | Card-Padding (medium), Sections |
| `--space-10` | 40px | Card-Padding (large) |
| `--space-12` | 48px | Section-Abstände |
| `--space-16` | 64px | Große Section-Gaps |
| `--space-20` | 80px | Hero-Sections, große Abstände |
| `--space-24` | 96px | Page-Sections |
| `--space-32` | 128px | Maximale Section-Abstände |

### 4.2 CSS Custom Properties

```css
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */
  --space-32: 8rem;    /* 128px */
}
```

### 4.3 Container & Layout

```css
:root {
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1400px;
  
  --content-max-width: 1200px;
  --content-padding: var(--space-5);
}

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

@media (min-width: 768px) {
  :root {
    --content-padding: var(--space-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --content-padding: var(--space-10);
  }
}
```

---

## 5. Border Radius System

### 5.1 Radius-Skala

| Token | Value | Verwendung |
|-------|-------|------------|
| `--radius-none` | 0 | Keine Rundung |
| `--radius-sm` | 4px | Kleine Elemente, Inputs |
| `--radius-md` | 8px | Buttons (small), Tags |
| `--radius-lg` | 12px | Buttons, Badges, Pills |
| `--radius-xl` | 16px | Cards (small) |
| `--radius-2xl` | 20px | Cards (medium) |
| `--radius-3xl` | 24px | Cards (large), Modals |
| `--radius-full` | 9999px | Runde Buttons, Avatare, Pills |

### 5.2 CSS Custom Properties

```css
:root {
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
}
```

---

## 6. Schatten-System

### 6.1 Schatten-Skala

| Token | Value | Verwendung |
|-------|-------|------------|
| `--shadow-sm` | `0 1px 2px rgba(43, 37, 32, 0.05)` | Subtile Tiefe |
| `--shadow-md` | `0 4px 12px rgba(43, 37, 32, 0.08)` | Cards (default) |
| `--shadow-lg` | `0 8px 24px rgba(43, 37, 32, 0.1)` | Elevated Cards |
| `--shadow-xl` | `0 12px 40px rgba(43, 37, 32, 0.12)` | Modals, Dropdowns |
| `--shadow-2xl` | `0 20px 60px rgba(43, 37, 32, 0.15)` | Hero-Elemente |

### 6.2 CSS Custom Properties

```css
:root {
  --shadow-sm: 0 1px 2px rgba(43, 37, 32, 0.05);
  --shadow-md: 0 4px 12px rgba(43, 37, 32, 0.08);
  --shadow-lg: 0 8px 24px rgba(43, 37, 32, 0.1);
  --shadow-xl: 0 12px 40px rgba(43, 37, 32, 0.12);
  --shadow-2xl: 0 20px 60px rgba(43, 37, 32, 0.15);
}
```

**Wichtig:** Schatten sind immer warm getönt (basierend auf Espresso), niemals kalt-grau oder schwarz.

---

## 7. Komponenten

### 7.1 Buttons

#### Primary Button

```css
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  
  padding: 14px 28px;
  min-height: 48px;
  
  background: var(--color-brass);
  color: var(--color-soft-white);
  
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
  
  border: none;
  border-radius: var(--radius-lg);
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #9E7E4D;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 2px;
}
```

#### Secondary Button

```css
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  
  padding: 13px 27px;
  min-height: 48px;
  
  background: transparent;
  color: var(--color-espresso);
  
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  text-decoration: none;
  
  border: 1.5px solid var(--color-espresso);
  border-radius: var(--radius-lg);
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: var(--color-espresso);
  color: var(--color-soft-white);
}
```

#### Tertiary / Ghost Button

```css
.btn-tertiary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  
  padding: 14px 20px;
  
  background: transparent;
  color: var(--color-espresso);
  
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  text-decoration: none;
  
  border: none;
  border-radius: var(--radius-lg);
  
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tertiary:hover {
  background: rgba(43, 37, 32, 0.05);
  color: var(--color-brass);
}
```

#### Button Sizes

```css
/* Small */
.btn-sm {
  padding: 10px 20px;
  min-height: 40px;
  font-size: var(--text-sm);
}

/* Large */
.btn-lg {
  padding: 18px 36px;
  min-height: 56px;
  font-size: var(--text-md);
}
```

### 7.2 Cards

#### Standard Card

```css
.card {
  background: var(--color-soft-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card-title {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  margin-bottom: var(--space-3);
}

.card-text {
  font-size: var(--text-md);
  color: var(--color-text-primary);
  line-height: var(--leading-relaxed);
}
```

#### Featured Card (für Videos, Produkte)

```css
.card-featured {
  background: var(--color-soft-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-featured:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card-featured-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.card-featured-content {
  padding: var(--space-6);
}
```

#### Subtle Card (für Newsletter-Boxen, Info-Bereiche)

```css
.card-subtle {
  background: var(--color-ivory);
  border: 1px solid var(--color-warm-gray);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
```

### 7.3 Pills / Badges

#### Serien-Pills

```css
.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  
  border-radius: var(--radius-full);
}

/* Serien-spezifische Farben */
.pill-grfi {
  background: var(--color-sand);
  color: var(--color-espresso);
}

.pill-investment {
  background: var(--color-brass);
  color: var(--color-soft-white);
}

.pill-pl {
  background: var(--color-bordeaux);
  color: var(--color-soft-white);
}

.pill-spark {
  background: var(--color-rose);
  color: var(--color-espresso);
}

.pill-inner-circle {
  background: var(--color-gold);
  color: var(--color-espresso);
}

.pill-reset,
.pill-decision,
.pill-regeneration,
.pill-m2m {
  background: var(--color-sand);
  color: var(--color-espresso);
}

.pill-backstage {
  background: var(--color-warm-gray);
  color: var(--color-espresso);
}
```

#### Status Badges

```css
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  
  font-size: 12px;
  font-weight: 600;
  
  border-radius: var(--radius-md);
}

.badge-new {
  background: var(--color-brass);
  color: var(--color-soft-white);
}

.badge-popular {
  background: var(--color-bordeaux);
  color: var(--color-soft-white);
}
```

### 7.4 Form Elements

#### Text Input

```css
.input {
  width: 100%;
  padding: 14px 16px;
  
  background: var(--color-soft-white);
  color: var(--color-text-primary);
  
  font-family: var(--font-body);
  font-size: var(--text-md);
  
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input::placeholder {
  color: var(--color-warm-gray-dark);
}

.input:hover {
  border-color: var(--color-sand);
}

.input:focus {
  outline: none;
  border-color: var(--color-brass);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15);
}

.input:disabled {
  background: var(--color-warm-gray);
  cursor: not-allowed;
  opacity: 0.6;
}
```

#### Label

```css
.label {
  display: block;
  margin-bottom: var(--space-2);
  
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-espresso);
}

.label-required::after {
  content: '*';
  color: var(--color-bordeaux);
  margin-left: 2px;
}
```

#### Textarea

```css
.textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  
  background: var(--color-soft-white);
  color: var(--color-text-primary);
  
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.textarea:focus {
  outline: none;
  border-color: var(--color-brass);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.15);
}
```

#### Checkbox

```css
.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.checkbox {
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  
  accent-color: var(--color-brass);
  cursor: pointer;
}

.checkbox-label {
  font-size: var(--text-base);
  color: var(--color-text-primary);
  cursor: pointer;
}
```

#### Newsletter Signup (Spezialkomponente)

```css
.newsletter-box {
  background: var(--color-soft-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-10);
  text-align: center;
}

.newsletter-title {
  font-family: var(--font-headline);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  margin-bottom: var(--space-3);
}

.newsletter-subtitle {
  font-size: var(--text-md);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 400px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .newsletter-form {
    flex-direction: row;
  }
  
  .newsletter-form .input {
    flex: 1;
  }
}

.newsletter-privacy {
  font-size: var(--text-sm);
  color: var(--color-warm-gray-dark);
  margin-top: var(--space-4);
}

.newsletter-privacy a {
  color: var(--color-espresso);
  text-decoration: underline;
}
```

### 7.5 Navigation

#### Header

```css
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  
  background: rgba(247, 243, 236, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--space-4) var(--content-padding);
}

.header-logo {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-espresso);
  text-decoration: none;
  
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--color-brass);
}

.nav-link.active {
  color: var(--color-brass);
}
```

#### Mobile Menu

```css
.mobile-menu-toggle {
  display: none;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
  
  .header-nav {
    display: none;
  }
  
  .header-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-soft-white);
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }
}
```

### 7.6 Footer

```css
.footer {
  background: var(--color-espresso);
  color: var(--color-soft-white);
  padding: var(--space-16) 0 var(--space-8);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer-logo {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: var(--font-semibold);
  color: var(--color-soft-white);
  margin-bottom: var(--space-4);
}

.footer-tagline {
  color: var(--color-sand);
  font-style: italic;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brass);
  margin-bottom: var(--space-4);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: var(--space-2);
}

.footer-links a {
  color: var(--color-soft-white);
  text-decoration: none;
  font-size: var(--text-base);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-sand);
}

.footer-bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-warm-gray);
}
```

### 7.7 Video Cards (für YouTube-Einbindung)

```css
.video-card {
  background: var(--color-soft-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.video-card:hover .video-thumbnail img {
  transform: scale(1.03);
}

.video-thumbnail-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 37, 32, 0.3);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-card:hover .video-thumbnail-overlay {
  opacity: 1;
}

.video-play-btn {
  width: 64px;
  height: 64px;
  background: var(--color-soft-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}

.video-content {
  padding: var(--space-5);
}

.video-series {
  margin-bottom: var(--space-2);
}

.video-title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  line-height: 1.3;
  margin-bottom: var(--space-2);
  
  /* Max 2 Zeilen, dann Ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  font-size: var(--text-sm);
  color: var(--color-warm-gray-dark);
}
```

### 7.8 Produkt-/Favoriten-Cards (für Affiliate)

```css
.product-card {
  background: var(--color-soft-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.product-image {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  background: var(--color-ivory);
}

.product-content {
  padding: var(--space-5);
}

.product-category {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: var(--space-2);
}

.product-title {
  font-family: var(--font-headline);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  margin-bottom: var(--space-2);
}

.product-description {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-price {
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-brass);
  text-decoration: none;
  
  transition: gap 0.2s ease;
}

.product-link:hover {
  gap: var(--space-2);
}
```

### 7.9 Testimonials / Quotes

```css
.quote-card {
  background: var(--color-soft-white);
  border-left: 4px solid var(--color-brass);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.quote-text {
  font-family: var(--font-headline);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  font-style: italic;
  color: var(--color-espresso);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.quote-author {
  font-size: var(--text-sm);
  color: var(--color-warm-gray-dark);
}

.quote-author strong {
  color: var(--color-espresso);
  font-weight: var(--font-semibold);
}
```

### 7.10 Dividers / Separators

```css
.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-12) 0;
}

.divider-with-text {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-12) 0;
}

.divider-with-text::before,
.divider-with-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.divider-with-text span {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-warm-gray-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
```

---

## 8. Layout-Patterns

### 8.1 Hero Section

```css
.hero {
  padding: var(--space-24) 0;
  text-align: center;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero-overline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: var(--space-4);
}

.hero-title {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  line-height: 1.15;
  margin-bottom: var(--space-6);
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
```

### 8.2 Two-Column Layout

```css
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 768px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }
  
  .two-col.reverse {
    direction: rtl;
  }
  
  .two-col.reverse > * {
    direction: ltr;
  }
}

.two-col-image {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}

.two-col-image img {
  width: 100%;
  height: auto;
  display: block;
}
```

### 8.3 Grid Layouts

```css
/* 2-Spalten-Grid */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 3-Spalten-Grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4-Spalten-Grid */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--space-6);
}

@media (min-width: 640px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
```

### 8.4 Section Patterns

```css
.section {
  padding: var(--space-20) 0;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12);
}

.section-overline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-headline);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

/* Alternative: Section mit Hintergrund */
.section-alt {
  background: var(--color-soft-white);
}

/* CTA Section */
.section-cta {
  background: var(--color-espresso);
  color: var(--color-soft-white);
  text-align: center;
}

.section-cta .section-title {
  color: var(--color-soft-white);
}

.section-cta .section-subtitle {
  color: var(--color-warm-gray);
}
```

---

## 9. Animationen & Transitions

### 9.1 Timing Functions

```css
:root {
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
}
```

### 9.2 Standard-Transitions

```css
/* Hover-Transitions */
.transition-colors {
  transition: color var(--duration-normal) var(--ease-out),
              background-color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out);
}

.transition-transform {
  transition: transform var(--duration-slow) var(--ease-out);
}

.transition-shadow {
  transition: box-shadow var(--duration-slow) var(--ease-out);
}

.transition-all {
  transition: all var(--duration-slow) var(--ease-out);
}
```

### 9.3 Scroll-Animationen (Optional)

```css
/* Fade-In beim Scrollen */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered Animation */
[data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

[data-animate-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-animate-stagger].is-visible > *:nth-child(2) { transition-delay: 100ms; }
[data-animate-stagger].is-visible > *:nth-child(3) { transition-delay: 200ms; }
[data-animate-stagger].is-visible > *:nth-child(4) { transition-delay: 300ms; }

[data-animate-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
```

### 9.4 Interaktions-Feedback

```css
/* Button Press */
.btn:active {
  transform: scale(0.98);
}

/* Card Lift */
.card:hover {
  transform: translateY(-4px);
}

/* Link Underline Animation */
.link-animated {
  position: relative;
  text-decoration: none;
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--duration-slow) var(--ease-out);
}

.link-animated:hover::after {
  width: 100%;
}
```

---

## 10. Responsive Design

### 10.1 Breakpoints

```css
/* Mobile First Breakpoints */
/* sm: 640px  – Größere Phones, kleine Tablets */
/* md: 768px  – Tablets */
/* lg: 1024px – Kleine Laptops, große Tablets */
/* xl: 1280px – Laptops, Desktops */
/* 2xl: 1536px – Große Bildschirme */

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}
```

### 10.2 Responsive Typography

```css
/* Mobile */
h1 { font-size: 2.25rem; }   /* 36px */
h2 { font-size: 1.75rem; }   /* 28px */
h3 { font-size: 1.5rem; }    /* 24px */
h4 { font-size: 1.25rem; }   /* 20px */

/* Tablet (768px+) */
@media (min-width: 768px) {
  h1 { font-size: 2.75rem; } /* 44px */
  h2 { font-size: 2.25rem; } /* 36px */
  h3 { font-size: 1.75rem; } /* 28px */
  h4 { font-size: 1.5rem; }  /* 24px */
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  h1 { font-size: 3.5rem; }  /* 56px */
  h2 { font-size: 2.75rem; } /* 44px */
  h3 { font-size: 2.125rem; } /* 34px */
  h4 { font-size: 1.75rem; } /* 28px */
}
```

### 10.3 Responsive Spacing

```css
/* Sections: Mobile vs Desktop */
.section {
  padding: var(--space-12) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--space-16) 0;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: var(--space-20) 0;
  }
}
```

### 10.4 Touch Targets

```css
/* Minimum Touch Target: 44x44px */
.btn,
.nav-link,
.checkbox,
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
}

@media (min-width: 1024px) {
  .btn {
    min-height: 48px;
  }
}
```

---

## 11. Bilder & Medien

### 11.1 Bildbehandlung

```css
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Rounded Images */
.img-rounded {
  border-radius: var(--radius-xl);
}

.img-rounded-full {
  border-radius: var(--radius-full);
}

/* Image mit Overlay */
.img-overlay {
  position: relative;
}

.img-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(43, 37, 32, 0.6) 100%
  );
  pointer-events: none;
}
```

### 11.2 Aspect Ratios

```css
.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

.aspect-wide {
  aspect-ratio: 21 / 9;
}
```

### 11.3 Avatar

```css
.avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 2px solid var(--color-soft-white);
}

.avatar-sm {
  width: 32px;
  height: 32px;
}

.avatar-lg {
  width: 64px;
  height: 64px;
}

.avatar-xl {
  width: 96px;
  height: 96px;
}
```

### 11.4 Bildrichtlinien

**Fotografiestil:**
- Warmes, natürliches Licht (Fensterlicht bevorzugt)
- Keine knalligen Filter, nur subtile Wärme
- Ruhige Hintergründe: Creme, Holz, Stein, klare Linien
- Fokus auf Texturen: Wolle, Leder, Seide, hochwertiger Strick
- 50mm-Look, Portrait-nah, ruhig

**Verboten:**
- ❌ Überbearbeitete Glam-Filter
- ❌ Unruhige Hintergründe
- ❌ Harte Kontraste/Blitzlicht
- ❌ Stock-Fotos mit Models

---

## 12. Icons

### 12.1 Icon-Style

- **Style:** Outline/Stroke-basiert (nicht filled)
- **Stroke Width:** 1.5px bis 2px
- **Corners:** Leicht gerundet
- **Empfohlene Libraries:** Lucide Icons, Heroicons (Outline)

### 12.2 Icon-Größen

```css
.icon-xs { width: 16px; height: 16px; }
.icon-sm { width: 20px; height: 20px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }
```

### 12.3 Icon-Farben

```css
.icon {
  color: currentColor;
}

.icon-muted {
  color: var(--color-warm-gray-dark);
}

.icon-primary {
  color: var(--color-brass);
}
```

---

## 13. Spezielle Komponenten

### 13.1 Dr.-Badge (Trust-Signal)

```css
.dr-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  
  background: var(--color-espresso);
  color: var(--color-soft-white);
  
  font-size: 12px;
  font-weight: 600;
  
  border-radius: var(--radius-lg);
}

/* Nur verwenden bei: ROI/System-Formaten (P&L, Investment, datenbasierte Inhalte) */
```

### 13.2 Serien-Header (für Serien-Landingpages)

```css
.series-header {
  padding: var(--space-16) 0;
  text-align: center;
}

.series-pill-large {
  display: inline-flex;
  padding: 10px 24px;
  margin-bottom: var(--space-6);
  
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  
  border-radius: var(--radius-full);
}

.series-title {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--font-semibold);
  color: var(--color-espresso);
  margin-bottom: var(--space-4);
}

.series-description {
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  max-width: 600px;
  margin: 0 auto;
}
```

### 13.3 Affiliate-Disclosure

```css
.affiliate-disclosure {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  
  background: rgba(176, 141, 87, 0.1);
  border-radius: var(--radius-md);
  
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.affiliate-disclosure-icon {
  flex-shrink: 0;
  color: var(--color-brass);
}
```

### 13.4 Cookie Banner

```css
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  
  padding: var(--space-5);
  
  background: var(--color-soft-white);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px rgba(43, 37, 32, 0.1);
}

.cookie-banner-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .cookie-banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.cookie-banner-text {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
}

.cookie-banner-actions {
  display: flex;
  gap: var(--space-3);
}
```

---

## 14. Accessibility

### 14.1 Focus States

```css
/* Konsistenter Focus Ring */
:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 2px;
}

/* Remove default outline */
:focus:not(:focus-visible) {
  outline: none;
}

/* High Contrast Focus für Dark Backgrounds */
.dark-bg :focus-visible {
  outline-color: var(--color-soft-white);
}
```

### 14.2 Screen Reader Utilities

```css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}
```

### 14.3 Reduced Motion

```css
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

### 14.4 Kontrast-Anforderungen

Alle Text/Hintergrund-Kombinationen müssen WCAG AA erfüllen (4.5:1 für normalen Text, 3:1 für großen Text).

| Kombination | Kontrastverhältnis | Status |
|-------------|-------------------|--------|
| Espresso auf Ivory | 11.2:1 | ✅ AAA |
| Espresso auf Soft White | 10.8:1 | ✅ AAA |
| Espresso auf Sand | 3.5:1 | ✅ AA (large text) |
| Soft White auf Espresso | 10.8:1 | ✅ AAA |
| Soft White auf Bordeaux | 7.2:1 | ✅ AAA |
| Soft White auf Brass | 3.1:1 | ✅ AA (large text) |

---

## 15. Do's & Don'ts

### ✅ DO

- **Farben:** Warme Töne, Ivory als Basis, Brass als Akzent
- **Typografie:** Playfair für Headlines, Inter für Body
- **Spacing:** Großzügig, Luft zum Atmen
- **Bilder:** Warm, natürlich, hochwertig
- **Interaktionen:** Subtil, elegant, nicht übertrieben
- **Cards:** Leichter Hover-Lift, sanfte Schatten
- **Buttons:** Klar erkennbar, ausreichend Padding

### ❌ DON'T

- **Farben:** Neon, kaltes Blau, reines Schwarz/Weiß
- **Typografie:** CAPSLOCK Headlines, zu viele Schriftarten
- **Spacing:** Eng zusammengedrängte Elemente
- **Bilder:** Überbearbeitet, Stock-Fotos, chaotische Hintergründe
- **Interaktionen:** Übertriebene Animationen, Bounce-Effekte
- **Cards:** Harte Schatten, zu starke Effekte
- **Buttons:** Neon-Farben, zu klein, schwer lesbar

---

## 16. Design Tokens (Export-Ready)

```json
{
  "colors": {
    "ivory": "#F7F3EC",
    "sand": "#C6A47E",
    "espresso": "#2B2520",
    "brass": "#B08D57",
    "brassHover": "#9E7E4D",
    "bordeaux": "#6B1F2B",
    "rose": "#D4A5A5",
    "gold": "#C9A227",
    "softWhite": "#FBF8F3",
    "warmGray": "#DDD4C7",
    "warmGrayDark": "#B8ADA0",
    "success": "#4A7C59",
    "warning": "#D4A574",
    "error": "#8B3A3A",
    "info": "#6B8E9B"
  },
  "typography": {
    "fontHeadline": "'Playfair Display', Georgia, serif",
    "fontBody": "'Inter', -apple-system, BlinkMacSystemFont, sans-serif"
  },
  "spacing": {
    "1": "4px",
    "2": "8px",
    "3": "12px",
    "4": "16px",
    "5": "20px",
    "6": "24px",
    "8": "32px",
    "10": "40px",
    "12": "48px",
    "16": "64px",
    "20": "80px",
    "24": "96px"
  },
  "radius": {
    "sm": "4px",
    "md": "8px",
    "lg": "12px",
    "xl": "16px",
    "2xl": "20px",
    "3xl": "24px",
    "full": "9999px"
  },
  "shadows": {
    "sm": "0 1px 2px rgba(43, 37, 32, 0.05)",
    "md": "0 4px 12px rgba(43, 37, 32, 0.08)",
    "lg": "0 8px 24px rgba(43, 37, 32, 0.1)",
    "xl": "0 12px 40px rgba(43, 37, 32, 0.12)",
    "2xl": "0 20px 60px rgba(43, 37, 32, 0.15)"
  }
}
```

---

## 17. Quick Reference Card

### Farben (Copy-Paste)
```
Ivory:      #F7F3EC
Sand:       #C6A47E
Espresso:   #2B2520
Brass:      #B08D57
Bordeaux:   #6B1F2B
Rosé:       #D4A5A5
Gold:       #C9A227
Soft White: #FBF8F3
Warm Gray:  #DDD4C7
```

### Schriften
```
Headlines: Playfair Display (600)
Body: Inter (400, 500, 600)
```

### Wichtige Maße
```
Container Max: 1200px
Content Padding: 20px (Mobile) / 40px (Desktop)
Button Height: 48px
Border Radius Card: 20px
Border Radius Button: 12px
```

---

*BlogWoman.de Styleguide | Version 1.0 | Januar 2025*
*„Für Frauen, die Karriere, Familie & Stil ernst nehmen."*