feat: implement phase 4 interactive cooking mode and workspace rules

TODO.md

@@ -16,11 +16,11 @@ Dieses Dokument enthält den aktuellen Entwicklungsstand und detaillierte Aufgab
   - Firebase-Projekt Setup & Anbindung
   - Newsletter-System (Firebase Firestore)
   - Benutzerprofile (Registrierung, Login, Favoriten)
-- [ ] **Phase 3: Nährwerte & Rezepterweiterung**
+- [x] **Phase 3: Nährwerte & Rezepterweiterung**
   - Datenmodell & Admin.php Erweiterung
   - Visuelles Nährwert-Widget (Floema-Präzision)
   - Makro-/Diät-Filter & Kategorisierung
-- [ ] **Phase 4: Interaktiver Step-by-Step Rezept-Assistent**
+- [x] **Phase 4: Interaktiver Step-by-Step Rezept-Assistent**
   - Admin-Erweiterung für Step-Videos
   - Fullscreen Cooking-Mode Overlay (mit Lenis scroll lock)
   - Timers & Looping Video Players pro Zubereitungsschritt
@@ -86,37 +86,37 @@ Das Fundament für Personalisierung und Newsletter-Abos über eine sichere Fireb
 ### 🥗 Phase 3: Nährwerte & Rezepterweiterung
 Jedes Rezept erhält präzise Makronährstoffe (Kalorien, Proteine, Kohlenhydrate, Fette), die vom Admin gepflegt und dem Nutzer edel präsentiert werden.
 
-- [ ] **Datenmodell & Admin-Panel Erweiterung**
-  - [ ] `data/recipes.json` Struktur anpassen: Hinzufügen von `nutrition` (`calories`, `protein`, `carbs`, `fat`)
-  - [ ] `admin.php` Formular erweitern:
-    - [ ] Eingabefeld für Kalorien (kcal)
-    - [ ] Eingabefeld für Eiweiß / Protein (g)
-    - [ ] Eingabefeld für Kohlenhydrate (g)
-    - [ ] Eingabefeld für Fett (g)
-  - [ ] Validierung & Speicherung der Nährwertdaten in `admin.php` absichern
-- [ ] **Premium Nährwert-Widget (`recipe.php`)**
-  - [ ] Layout-Integration basierend auf dem `FloemaLayoutGrid` (24-Spalten-Asymmetrie)
-  - [ ] Visuelle Visualisierung der Makroverteilung (z. B. feine kreisförmige SVG-Fortschrittsanzeigen oder elegante horizontale Balken in Gold `var(--color-accent-gold)`)
-  - [ ] Hover- und Lade-Mikroanimationen für die Diagramme (Wachstumseffekt mit `var(--ease-out-expo)`)
-  - [ ] Tooltips mit Prozentangaben am Tagesbedarf
+- [x] **Datenmodell & Admin-Panel Erweiterung**
+  - [x] `data/recipes.json` Struktur anpassen: Hinzufügen von `nutrition` (`calories`, `protein`, `carbs`, `fat`)
+  - [x] `admin.php` Formular erweitern:
+    - [x] Eingabefeld für Kalorien (kcal)
+    - [x] Eingabefeld für Eiweiß / Protein (g)
+    - [x] Eingabefeld für Kohlenhydrate (g)
+    - [x] Eingabefeld für Fett (g)
+  - [x] Validierung & Speicherung der Nährwertdaten in `admin.php` absichern
+- [x] **Premium Nährwert-Widget (`recipe.php`)**
+  - [x] Layout-Integration basierend auf dem `FloemaLayoutGrid` (24-Spalten-Asymmetrie)
+  - [x] Visuelle Visualisierung der Makroverteilung (z. B. feine kreisförmige SVG-Fortschrittsanzeigen oder elegante horizontale Balken in Gold `var(--color-accent-gold)`)
+  - [x] Hover- und Lade-Mikroanimationen für die Diagramme (Wachstumseffekt mit `var(--ease-out-expo)`)
+  - [x] Tooltips mit Prozentangaben am Tagesbedarf
 
 ---
 
 ### ⏱️ Phase 4: Interaktiver Step-by-Step Rezept-Assistent
 Ein immersiver Kochmodus, der Anwendern Schritt-für-Schritt durch die Zubereitung führt – inklusive Videoanleitungen und integrierten Timern.
 
-- [ ] **Video-Verknüpfung im Admin-Panel**
-  - [ ] Rezeptstruktur in `data/recipes.json` erweitern, damit jeder Arbeitsschritt (`steps`) eine optionale `video_url` (MP4 aus Firebase Storage oder extern) besitzen kann
-  - [ ] `admin.php` erweitern, um Video-URLs pro Einzelschritt einzugeben
-- [ ] **Fullscreen Cooking-Mode Overlay**
-  - [ ] Trigger-Button "Kochmodus starten" (`CapitoliumRevealButton` Stil) auf `recipe.php` einbauen
-  - [ ] Fullscreen Overlay mit flüssigem `clip-path` Öffnungseffekt (analog zu `LiquidOverlayMenu`)
-  - [ ] Lenis Scroll-Lock während der Kochmodus aktiv ist, um störendes Scrollen im Hintergrund zu verhindern
-- [ ] **Interaktives Koch-Interface**
-  - [ ] Schritt-für-Schritt Slider/Karussell (Tastatur- & Touch-Navigation)
-  - [ ] Fortschrittsanzeige (z.B. "Schritt 3 von 8" + Fortschrittsbalken)
-  - [ ] Autolooping Video-Player: Zeigt das Kurzvideo zum aktuellen Zubereitungsschritt, stummgeschaltet und nahtlos wiederholend
-  - [ ] Integrierte Koch-Timer: Falls im Schritt eine Zeit angegeben ist, wird automatisch ein interaktiver Timer mit Start/Pause/Reset und akustischem Endsignal eingebunden
+- [x] **Video-Verknüpfung im Admin-Panel**
+  - [x] Rezeptstruktur in `data/recipes.json` erweitern, damit jeder Arbeitsschritt (`steps`) eine optionale `video_url` (MP4 aus Firebase Storage oder extern) besitzen kann
+  - [x] `admin.php` erweitern, um Video-URLs pro Einzelschritt einzugeben
+- [x] **Fullscreen Cooking-Mode Overlay**
+  - [x] Trigger-Button "Kochmodus starten" (`CapitoliumRevealButton` Stil) auf `recipe.php` einbauen
+  - [x] Fullscreen Overlay mit flüssigem `clip-path` Öffnungseffekt (analog zu `LiquidOverlayMenu`)
+  - [x] Lenis Scroll-Lock während der Kochmodus aktiv ist, um störendes Scrollen im Hintergrund zu verhindern
+- [x] **Interaktives Koch-Interface**
+  - [x] Schritt-für-Schritt Slider/Karussell (Tastatur- & Touch-Navigation)
+  - [x] Fortschrittsanzeige (z.B. "Schritt 3 von 8" + Fortschrittsbalken)
+  - [x] Autolooping Video-Player: Zeigt das Kurzvideo zum aktuellen Zubereitungsschritt, stummgeschaltet und nahtlos wiederholend
+  - [x] Integrierte Koch-Timer: Falls im Schritt eine Zeit angegeben ist, wird automatisch ein interaktiver Timer mit Start/Pause/Reset und akustischem Endsignal eingebunden
 
 ---