feat: stabilization + recipe edit/create UI

features/DESIGN-CONCEPT.md

@@ -0,0 +1,344 @@
+# 🎨 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)