# Design-Ideen für Becky's Barbershop

## Ansatz 1 – „Goldenes Handwerk" (Art Deco Barber)

<response>
<text>
**Design Movement:** Art Deco trifft auf modernen Barbershop-Stil

**Core Principles:**
- Luxuriöse Dunkelheit: Tiefes Schwarz als Basis, gebrochen durch goldene Akzente
- Asymmetrische Eleganz: Inhalte werden diagonal oder versetzt angeordnet, kein langweiliges Zentrieren
- Handwerkliche Authentizität: Ornamentale Details, die an Rasiererklingen und Barbierstühle erinnern
- Typografische Hierarchie: Kontrast zwischen Serifenschrift (Display) und klarer Groteskschrift (Body)

**Color Philosophy:**
- Primär: #0A0A0A (Fast-Schwarz) – Tiefe und Autorität
- Akzent: #C9A84C (Antikgold) – Luxus und Handwerk
- Sekundär: #F5F0E8 (Cremeweiß) – Lesbarkeit und Eleganz
- Subtil: #1A1A1A (Dunkelgrau) – Kartenoberflächen

**Layout Paradigm:**
- Große, vollflächige Hero-Sektion mit diagonalem Clip-Path-Schnitt
- Services in einem asymmetrischen Raster (3-Spalten mit versetzten Karten)
- Sticky Navigation mit Goldlinie als Unterstrich

**Signature Elements:**
- Dünne goldene Trennlinien (1px) zwischen Sektionen
- Ornamentale Schere/Kamm-Ikone als Markensymbol
- Texturierter Hintergrund (subtiles Leder- oder Papier-Grain)

**Interaction Philosophy:**
- Hover-Effekte: Goldener Unterstrich wächst von links nach rechts
- Buttons: Goldener Rahmen, beim Hover füllt sich der Button mit Gold

**Animation:**
- Fade-in von unten beim Scrollen (staggered)
- Goldene Linie zeichnet sich beim Laden

**Typography System:**
- Display: Playfair Display (Serif) – für Überschriften
- Body: DM Sans – für Fließtext und Navigation
</text>
<probability>0.07</probability>
</response>

---

## Ansatz 2 – „Urban Blade" (Industrial Modern)

<response>
<text>
**Design Movement:** Industrieller Minimalismus mit brutalistischen Akzenten

**Core Principles:**
- Raues Schwarz auf Weiß: Harter Kontrast, keine Graustufen-Kompromisse
- Typografie als Gestaltungselement: Große, überlappende Buchstaben im Hintergrund
- Geometrische Strenge: Scharfe Kanten, keine abgerundeten Ecken
- Funktionale Schönheit: Jedes Element hat einen Zweck

**Color Philosophy:**
- Primär: #111111 (Tiefschwarz)
- Akzent: #D4AF37 (Gold) – sparsam eingesetzt für CTAs
- Sekundär: #FFFFFF
- Textur: Subtiles Rauschen auf Hintergründen

**Layout Paradigm:**
- Vollbild-Hero mit großem Typografie-Overlay
- Services als horizontales Scroll-Band auf Mobile
- Sticky-Header mit Hamburger-Menü auf Mobile

**Signature Elements:**
- Große Ziffern (01, 02, 03) als Abschnittsmarker
- Dicke horizontale Trennlinien
- Monospace-Schrift für Preisangaben

**Interaction Philosophy:**
- Schnelle, direkte Übergänge – kein Schnickschnack
- Hover-Invertierung: Schwarz wird Weiß, Weiß wird Schwarz

**Animation:**
- Slide-in von links beim Laden
- Preise zählen hoch beim Eintritt in den Viewport

**Typography System:**
- Display: Bebas Neue (Condensed) – für Schlagzeilen
- Body: Space Grotesk – für Texte
</text>
<probability>0.08</probability>
</response>

---

## Ansatz 3 – „Klassiker neu gedacht" (Heritage Barber)

<response>
<text>
**Design Movement:** Vintage Americana trifft auf zeitgemäßes Web-Design

**Core Principles:**
- Warme Dunkelheit: Nicht reines Schwarz, sondern tiefe Brauntöne und Anthrazit
- Handgeschriebene Akzente: Kursive Elemente als Kontrast zur klaren Struktur
- Storytelling-Layout: Die Seite erzählt eine Geschichte von oben nach unten
- Lokale Verwurzelung: Elemente, die Oberpleis/Königswinter widerspiegeln

**Color Philosophy:**
- Primär: #1C1410 (Espresso-Schwarz)
- Akzent: #B8962E (Altgold)
- Sekundär: #F2EAD3 (Pergament)
- Highlight: #8B0000 (Dunkelrot) – für spezielle Akzente

**Layout Paradigm:**
- Zeitungsartige Spalten für den About-Bereich
- Services in einer Menükarte-Optik (wie ein Restaurant-Menü)
- Galerie als Polaroid-Grid

**Signature Elements:**
- Gestrichelte Linien als Trenner
- Barber-Pole-Farben als subtile Akzente
- Handschrift-Font für Zitate und Slogans

**Interaction Philosophy:**
- Sanfte, organische Übergänge
- Scroll-Parallax auf Hero-Bild

**Animation:**
- Sepia-zu-Farbe-Übergang beim Hover auf Galeriebilder
- Sanftes Einblenden der Abschnitte

**Typography System:**
- Display: Cormorant Garamond (Serif) – für Überschriften
- Handschrift: Dancing Script – für Akzente
- Body: Lato – für Fließtext
</text>
<probability>0.06</probability>
</response>