mporwoll/frontend.blogwoman.de
1
0
Fork 0
mirror of https://github.com/complexcaresolutions/frontend.blogwoman.de.git synced 2026-03-17 22:03:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
frontend.blogwoman.de/docs/guides/styleguide.md
CCS Admin dcfc48f5ce Add documentation and BlogWoman frontend development prompt 
- Add API documentation (API_ANLEITUNG.md)
- Add architecture docs (UNIVERSAL_FEATURES.md, Analytics.md)
- Add guides (FRONTEND.md, SEO_ERWEITERUNG.md, styleguide.md)
- Add Planungs-KI prompt template (ANLEITUNG-PLANUNGS-KI-FRONTEND.md)
- Add BlogWoman frontend development prompt with:
  - Tenant-ID 9 configuration
  - Design system based on styleguide
  - BlogWoman-specific blocks (Favorites, Series, VideoEmbed)
  - API patterns with tenant isolation
  - SEO and Analytics integration

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-20 21:24:13 +00:00

42 KiB
Raw Blame History

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

: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

<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

: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

: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

: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

: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

: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

.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

.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

.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

/* 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

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

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

.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

.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

.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

.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

.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

.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

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

.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

.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

.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

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

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

.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

.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

.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

.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

.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

/* 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

.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

: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

/* 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)

/* 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

/* 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

/* 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

/* 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

/* 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

/* 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

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

.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

.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

.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

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

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

.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

.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

.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

/* 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

.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

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

{
  "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."