# 🎨 Luna Recipes — Design-Konzept

## 1. Farbschema

Warm, einladend, modern-feminin ohne kitschig zu wirken. Inspiriert von Backzutaten: Vanille, Karamell, Beeren.

| Rolle | Farbe | Hex | Verwendung |
|---|---|---|---|
| **Primary** | Dusty Rose | `#C4737E` | Buttons, aktive States, Akzente |
| **Primary Light** | Soft Blush | `#F2D7DB` | Hover, Badges, Tags |
| **Secondary** | Warm Caramel | `#D4A574` | Sekundäre Buttons, Icons |
| **Background** | Cream White | `#FBF8F5` | Seitenhintergrund |
| **Surface** | Pure White | `#FFFFFF` | Cards, Modals |
| **Text Primary** | Espresso | `#2D2016` | Überschriften, Body |
| **Text Secondary** | Warm Grey | `#7A6E65` | Subtexte, Metadaten |
| **Success** | Sage Green | `#7BAE7F` | Timer fertig, Erfolg |
| **Error** | Berry Red | `#C94C4C` | Fehler, Löschen |
| **Border** | Sand | `#E8E0D8` | Trennlinien, Card-Borders |

### Dark Mode (optional, Phase 2)
- Background: `#1A1614`
- Surface: `#2D2620`
- Text: `#F5EDE8`

## 2. Typografie

| Rolle | Font | Gewicht | Größe |
|---|---|---|---|
| **Logo/Brand** | *Playfair Display* | 700 | 28px |
| **H1** | *Playfair Display* | 600 | 24px |
| **H2** | *Playfair Display* | 600 | 20px |
| **H3** | *Inter* | 600 | 17px |
| **Body** | *Inter* | 400 | 15px |
| **Small/Meta** | *Inter* | 400 | 13px |
| **Kochmodus** | *Inter* | 500 | 22–28px |
| **Timer** | *JetBrains Mono* | 500 | 48px |

> Playfair Display für Eleganz in Überschriften, Inter als saubere UI-Schrift. Monospace nur für Timer-Anzeige.

## 3. Screen-Übersicht

```
┌─────────────────────────────────────────────┐
│                  App-Struktur               │
├─────────────────────────────────────────────┤
│                                             │
│  📱 Bottom Navigation:                      │
│  [Startseite] [Suche] [+Neu] [Liste] [Me]  │
│                                             │
│  Screens:                                   │
│  ├── Startseite (Feed)                      │
│  ├── Kategorie-Ansicht                      │
│  ├── Suche + Filter                         │
│  ├── Rezept-Detail                          │
│  │   ├── Kochmodus (Fullscreen)             │
│  │   └── Notizen-Sheet                      │
│  ├── Rezept erstellen/bearbeiten            │
│  ├── Einkaufsliste                          │
│  ├── Profil / Einstellungen                 │
│  └── Onboarding (Erststart)                 │
│                                             │
└─────────────────────────────────────────────┘
```

## 4. Component-Liste

### Layout
- `AppShell` — Wrapper mit Bottom-Nav
- `BottomNav` — 5 Icons, aktiver State mit Farbe + Label
- `TopBar` — Kontextuell: Titel, Back-Button, Actions
- `FullscreenOverlay` — Für Kochmodus

### Cards
- `RecipeCard` — Foto (3:4), Titel, Kategorie-Badge, Dauer, Favorit-Herz
- `RecipeCardSmall` — Horizontal, Thumbnail links, Infos rechts
- `CategoryCard` — Rundes Bild + Label darunter

### Rezept-Detail
- `HeroImage` — Parallax-Scroll Foto oben
- `RecipeMeta` — Dauer, Portionen, Schwierigkeit als Icons
- `IngredientList` — Checkbare Zutatenliste mit Mengenrechner
- `StepList` — Nummerierte Schritte mit optionalen Bildern
- `NoteSection` — Eigene Notizen mit Bearbeiten-Button
- `ActionBar` — Kochmodus starten, zur Liste hinzufügen, Teilen

### Kochmodus
- `CookingStep` — Großer Text, Schrittnummer, Swipe-Geste
- `CookingTimer` — Kreisförmiger Countdown, Vibration bei Ende
- `CookingProgress` — Fortschrittsbalken oben
- `CookingNav` — Vor/Zurück-Buttons unten

### Suche & Filter
- `SearchBar` — Prominent, mit Mikrofon-Icon (Phase 2)
- `FilterChips` — Horizontale Scroll-Chips (Kategorie, Zeit, Zutat)
- `FilterSheet` — Bottom-Sheet mit erweiterten Filtern

### Einkaufsliste
- `ShoppingItem` — Checkbox + Zutat + Menge + Rezeptherkunft
- `ShoppingSection` — Gruppiert nach Rezept oder Abteilung
- `AddItemInput` — Schnelles Hinzufügen eigener Einträge

### Formulare
- `RecipeForm` — Multi-Step Formular für Rezepterstellung
- `ImageUpload` — Drag/Drop + Kamera-Auslöser
- `IngredientInput` — Menge + Einheit + Zutat als Inline-Row
- `StepInput` — Textfeld + optionales Bild + Timer-Feld

### Allgemein
- `Button` — Primary, Secondary, Ghost, Danger Varianten
- `Badge` — Kategorie-Tags farblich kodiert
- `Toast` — Erfolgs-/Fehlermeldungen
- `EmptyState` — Illustration + Text wenn Liste leer
- `Skeleton` — Loading-Platzhalter für Cards

## 5. Wireframe-Beschreibungen

### 5.1 Startseite (Feed)

```
┌──────────────────────────┐
│ 🍰 Luna Recipes    [👤]  │  ← TopBar mit Logo + Profil-Avatar
├──────────────────────────┤
│ ○Backen ○Torten ○Mittag  │  ← Horizontale Kategorie-Chips (scrollbar)
│  ○Frühstück ○Snacks ...  │
├──────────────────────────┤
│ ┌────────┐ ┌────────┐   │
│ │ 📷     │ │ 📷     │   │  ← Pinterest-artiges Masonry Grid
│ │        │ │  groß  │   │     Unterschiedliche Höhen
│ │ Titel  │ │        │   │     Tap → Rezept-Detail
│ │ 30min ❤│ │ Titel  │   │
│ └────────┘ │ 45min ❤│   │
│ ┌────────┐ └────────┘   │
│ │ 📷     │ ┌────────┐   │
│ │ Titel  │ │ 📷     │   │
│ │ 20min ❤│ │ Titel  │   │
│ └────────┘ └────────┘   │
├──────────────────────────┤
│ [🏠] [🔍] [➕] [🛒] [👤] │  ← Bottom Navigation
└──────────────────────────┘
```

- Standard: Alle Rezepte, neuste zuerst
- Kategorie-Chips filtern den Feed inline
- Pull-to-Refresh
- Endlos-Scroll mit Lazy Loading
- Favorit-Herz direkt auf der Card antippbar

### 5.2 Suche + Filter

```
┌──────────────────────────┐
│ [← ] 🔍 Suche...    [✕] │  ← Autofokus auf Suchfeld
├──────────────────────────┤
│ Letzte Suchen:           │
│ Schokoladentorte  Pasta  │  ← Antippbare Tags
├──────────────────────────┤
│ [Kategorie ▼] [Zeit ▼]  │  ← Filter-Chips
│ [Schwierigkeit ▼]       │
├──────────────────────────┤
│ 3 Ergebnisse             │
│ ┌────────────────────┐   │
│ │ 🖼 │ Schwarzwälder  │   │  ← RecipeCardSmall Layout
│ │    │ Kirschtorte    │   │     Horizontal für Suchergebnisse
│ │    │ ⏱90min ⭐Mittel │   │
│ └────────────────────┘   │
│ ┌────────────────────┐   │
│ │ 🖼 │ Schoko-Mousse  │   │
│ └────────────────────┘   │
└──────────────────────────┘
```

- Suche durchsucht: Titel, Zutaten, Tags, Notizen
- Debounced (300ms) Live-Ergebnisse
- Filter kombinierbar (AND-Verknüpfung)
- Zeitfilter: <15min, 15–30, 30–60, >60min

### 5.3 Rezept-Detail

```
┌──────────────────────────┐
│ [←]              [❤] [⋯]│  ← Floating über Hero-Bild
│                          │
│     ┌──────────────┐     │
│     │              │     │  ← Hero-Image, 16:10
│     │    📷 Foto   │     │     Parallax beim Scrollen
│     │              │     │
│     └──────────────┘     │
├──────────────────────────┤
│ Schwarzwälder Kirschtorte│  ← H1 Playfair Display
│ 🏷 Torten  ⏱ 90min      │
│ 👤 8 Portionen  ⭐ Mittel │
├──────────────────────────┤
│ [🍳 Kochen] [🛒 Liste]   │  ← Primary + Secondary Button
├──────────────────────────┤
│ ── Zutaten ──────────────│
│ Portionen: [−] 8 [+]    │  ← Mengenrechner
│ ☐ 200g Mehl              │
│ ☐ 150g Zucker            │  ← Antippbar → Einkaufsliste
│ ☐ 5 Eier                 │
│ ☐ 500ml Sahne            │
│ ...                      │
├──────────────────────────┤
│ ── Zubereitung ──────────│
│ 1. Eier trennen und...   │
│ 2. Mehl mit Kakao...     │  ← Kompakte Schritt-Liste
│ 3. Backofen auf 180°...  │
│ ...                      │
├──────────────────────────┤
│ ── Meine Notizen ────────│
│ 📝 "Nächstes Mal weniger │  ← Editierbar
│ Zucker, dafür mehr       │
│ Kirschen!"               │
│ [✏️ Bearbeiten]           │
├──────────────────────────┤
│ [🏠] [🔍] [➕] [🛒] [👤] │
└──────────────────────────┘
```

- Drei-Punkte-Menü (⋯): Bearbeiten, Teilen, Löschen
- Zutaten-Checkbox → einzeln zur Einkaufsliste
- Portionen-Rechner skaliert alle Mengen live
- Notizen: Inline-Edit, Markdown-Unterstützung

### 5.4 Kochmodus (Fullscreen)

```
┌──────────────────────────┐
│ Schritt 3 von 12    [✕]  │  ← Progress-Info + Schließen
│ ████████░░░░░░░░░░░░░░░░ │  ← Fortschrittsbalken
├──────────────────────────┤
│                          │
│                          │
│  Backofen auf 180°C      │  ← GROSSE SCHRIFT (22–28px)
│  Ober-/Unterhitze         │     Zentriert
│  vorheizen.              │     Max 3-4 Zeilen
│                          │
│                          │
│      ┌──────────┐        │
│      │  05:00   │        │  ← Timer (falls Schritt Timer hat)
│      │  ▶ Start │        │     Kreisförmig
│      └──────────┘        │
│                          │
├──────────────────────────┤
│  [← Zurück]  [Weiter →]  │  ← Navigation + Swipe-Geste
└──────────────────────────┘
```

- Bildschirm bleibt an (Wake Lock API)
- Swipe links/rechts für Navigation
- Timer: Antippen startet, Vibration + Sound bei 0:00
- Mehrere Timer gleichzeitig möglich (Badge-Anzeige)
- Schließen fragt "Wirklich beenden?"

### 5.5 Einkaufsliste

```
┌──────────────────────────┐
│ Einkaufsliste     [🗑 ✓] │  ← Erledigte löschen
├──────────────────────────┤
│ [+ Eigenen Artikel ...]  │  ← Quick-Add Input
├──────────────────────────┤
│ 🍰 Schwarzwälder Kirsch. │  ← Gruppiert nach Rezept
│   ☐ 200g Mehl            │
│   ☑ 150g Zucker          │  ← Durchgestrichen
│   ☐ 5 Eier               │
│   ☐ 500ml Sahne          │
├──────────────────────────┤
│ 🥗 Caesar Salad           │
│   ☐ 1 Römersalat         │
│   ☐ Parmesan             │
├──────────────────────────┤
│ 📝 Eigene                 │
│   ☐ Küchenrolle          │
├──────────────────────────┤
│ [🏠] [🔍] [➕] [🛒] [👤] │
└──────────────────────────┘
```

- Gleiche Zutaten aus verschiedenen Rezepten werden zusammengefasst (Phase 2)
- Wisch nach links → Artikel entfernen
- Sortierbar: nach Rezept oder nach Abteilung
- Offline verfügbar (PWA!)

### 5.6 Rezept erstellen/bearbeiten

```
┌──────────────────────────┐
│ [✕] Neues Rezept  [Save] │
├──────────────────────────┤
│ Schritt 1 von 4         │
│ ●───○───○───○            │  ← Stepper
├──────────────────────────┤
│                          │
│ [📷 Foto hinzufügen]     │  ← Kamera oder Galerie
│                          │
│ Titel *                  │
│ [________________________]│
│                          │
│ Kategorie *              │
│ [Backen ▼]               │
│                          │
│ Tags                     │
│ [Schoko] [Torte] [+ ...]│
│                          │
│ Portionen    Dauer       │
│ [_8_]        [_90_] min  │
│                          │
│ Schwierigkeit            │
│ ○ Einfach ● Mittel ○ Pro│
│                          │
│         [Weiter →]       │
└──────────────────────────┘
```

- 4 Schritte: Basis → Zutaten → Zubereitung → Vorschau
- Auto-Save als Entwurf
- Zutaten: dynamische Rows (Menge + Einheit + Name)
- Zubereitung: Schritte mit optionalem Timer pro Schritt

### 5.7 Profil / Einstellungen

- Anzahl Rezepte, Favoriten
- Kategorien verwalten (eigene hinzufügen)
- Einheiten-Präferenz (metrisch/imperial)
- Dark Mode Toggle
- Daten exportieren/importieren
- App-Version & Info

## 6. Design-Prinzipien

1. **Fotos im Fokus** — Große, appetitliche Bilder treiben die Navigation
2. **One-Thumb-Use** — Alle wichtigen Aktionen im Daumenbereich
3. **Kochmodus = Stressfrei** — Große Schrift, einfache Navigation, keine Ablenkung
4. **Schnelles Wiederfinden** — Suche, Kategorien, Favoriten auf max 2 Taps
5. **Offline First** — Einkaufsliste und gespeicherte Rezepte immer verfügbar

## 7. Animationen & Micro-Interactions

- Card-Tap: Sanftes Scale-Up (0.98 → 1.0)
- Favorit-Herz: Kurze Bounce-Animation + Farbwechsel
- Kochmodus-Swipe: Slide-Transition zwischen Schritten
- Timer-Ende: Pulsieren + Vibration
- Pull-to-Refresh: Custom Cupcake-Animation (Phase 2)
- Page-Transitions: Shared Element Transition für Hero-Image (Card → Detail)