.agents aufgeräumt

2026-05-21 14:55:10 +02:00
parent a4a2d83534
commit 8ae94e7834
5 changed files with 31 additions and 5 deletions
@@ -0,0 +1,748 @@
+# FlixCooks – Premium Web Design Guide
+
+Dieser Design Guide definiert die visuellen Prinzipien, Typografie, Farbpaletten und Interaktionsmuster für die **FlixCooks-Website**. Inspiriert von den modernen, immersiven Web-Standards führender Kreativ- und Lifestyle-Marken (wie *Capitolium*, *fromanother* und *Floema*) setzen wir auf **flüssige Bewegung, charakterstarke Kontraste und ein harmonisches, erdiges Farbklima**.
+
+Dieses Dokument dient als zentrale Design-Richtlinie und Anweisungs-Katalog für die KI, um das visuelle Erscheinungsbild und die Interaktionen auf ein absolut erstklassiges Premium-Niveau zu heben.
+
+---
+
+## 1. Farbphilosophie & Paletten
+
+Wir distanzieren uns von sterilen, reinweißen Hintergründen und hartem, reinem Schwarz. Stattdessen nutzen wir warme, organische Töne für maximalen Sehkomfort und Premium-Charakter.
+
+### Option A: Warm Premium (Empfohlen für Hauptmarke)
+*   **Hintergrund:** Warm Ivory / Creme (`#f2efea` oder `#f0e3cf`)
+*   **Text & Konturen:** Dunkles Anthrazit / Steinkohle (`#241f21` oder `#0b090a`)
+*   **Akzente & Primärfarbe:** Edles Mattgold / Bronze (`#c3a677`)
+*   **Sekundäre Grautöne:** `#58595b` (Dunkelgrau), `#a7a0a1` (Hellgrau)
+
+### Option B: Atmospheric Dark (Für immersive Storytelling-Bereiche)
+*   **Hintergrund:** Tiefes Mitternachtsblau (`#051236`)
+*   **Text & Konturen:** Pastell-Creme-Gelb (`#fffde2`)
+*   **Akzente:** Elektrisierendes Kobaltblau (`#1740a9`)
+*   **Opacity-Abstufungen:**
+    *   Sekundärtexte: `rgba(255, 253, 226, 0.6)`
+    *   Deaktiviert/Untergeordnet: `rgba(255, 253, 226, 0.3)`
+
+---
+
+## 2. Typografie & Skalierung
+
+Die Typografie lebt von einem **starken Kontrast** zwischen organisch-charismatischen Display-Schriften für Headlines und hochlesbaren, geometrischen serifenlosen Schriften für Fließtext.
+
+*   **Überschriften (Headlines - h1, h2, h3):**
+    *   **Schriftart:** Eine ausdrucksstarke, historische oder organische Serif-Schrift (z. B. *Zimula* oder *gin* Stil).
+    *   **Verhalten:** Viewport-relative Skalierung (z. B. `font-size: clamp(3rem, 8vw, 8.5rem)`), um auf Desktop-Screens eine massive, monolithische Präsenz zu erzielen.
+*   **Fließtext & Buttons:**
+    *   **Schriftart:** Eine geometrische, schnörkellose Sans-Serif (z. B. *Rubik* oder ein hochwertiger Neo-Grotesque-Schnitt).
+    *   **Größe:** `14px` bis `16px` für optimales, luftiges Satzbild.
+
+---
+
+## 3. Layout, Spacing & Responsive Grid
+
+Statt starrer Spacing-Klassen setzen wir auf vollkommen fluide Abstände und intelligente Grids auf Root-Ebene.
+
+*   **24-Spalten-Grid:** Für asymmetrische, redaktionelle Layouts wird ein 24-spaltiges CSS-Grid etabliert.
+*   **Fluide Variablen auf `:root`:**
+    ```css
+    :root {
+      --grid-gap: clamp(14px, 9.71px + 1.1vw, 28px);     /* Exakt vermessene Floema-Formel */
+      --grid-margin: clamp(16px, 10.15px + 1.5vw, 36px);  /* Exakt vermessene Floema-Formel */
+      --grid-width: calc(100vw - var(--grid-margin) * 2);
+    }
+    ```
+*   **Responsive Anpassung:** Die Abstände atmen stufenlos mit der Viewportbreite (`100vw` / `dvh`). Dadurch entfallen sprunghafte Media-Query-Knicke fast vollständig.
+
+---
+
+## 4. Motion & Interaktions-Design
+
+Eine Premium-Website fühlt sich lebendig und geschmeidig an. Das Nutzererlebnis basiert auf weicher Entschleunigung und präzisen Interaktionen.
+
+### A. Smooth Scrolling (Lenis)
+*   **Standard:** Die gesamte Seite nutzt **Lenis smooth scroll**, um ein trägheitsbasiertes, sanftes Abbremsen beim Scrollen zu gewährleisten.
+
+### B. GSAP ScrollTrigger & Pinned Storytelling
+*   Anstelle von standardmäßig herunterscrollbaren Textblöcken werden emotionale Schlüsselbereiche (z. B. Rezepte-Showcase, Teig-Prozess) **gepinnt** (z. B. eine Sektionshöhe von `300vh` bis `600vh`).
+*   Während des Pinnens animieren sich Elemente (Zutaten, Textpassagen, Kochschritte) horizontal, blenden sich butterweich über- und untereinander oder enthüllen sich durch geometrische Masken.
+
+### C. Hover-Zustände & Easings
+*   **Navigationslinks:** Minimale, hochpräzise Bewegungen statt simpler Farbwechsel. Ein sanfter Nudge/Slide nach rechts oder oben:
+    `transition: margin 0.3s cubic-bezier(0.19, 1, 0.22, 1);`
+*   **Bild-Hover:** Zoom- und Parallax-Effekte bei Interaktion.
+*   **Cubic-Bezier Easing-Bibliothek:**
+    *   `--easeOutQuart`: `cubic-bezier(0.165, 0.84, 0.44, 1)`
+    *   `--easeInOutQuart`: `cubic-bezier(0.76, 0, 0.24, 1)`
+    *   `--easeInOutCubic`: `cubic-bezier(0.65, 0, 0.35, 1)`
+
+---
+
+## 🏛️ Feature-Katalog (Abrufbar für die KI)
+
+*Wenn du eines dieser Features in die Website integrieren möchtest, nenne einfach die entsprechende **Feature-ID** (z. B. `[CapitoliumClassicTypography]`), und die KI wird die Struktur und Styles exakt wie unten beschrieben implementieren.*
+
+---
+
+### 1. Typografie & Layout-Ästhetik
+
+#### 🆔 `CapitoliumClassicTypography`
+*   **Beschreibung**: Luxuriöse Kontrast-Typografie. Große, elegante Initialen oder Zitate in geschwungener Handschrift kombiniert mit markanten, breit spationierten Serif-Überschriften in Großbuchstaben (`gin, serif` Stil) und perfekt blocksatzähnlichen Fließtexten.
+*   **HTML-Struktur**:
+    ```html
+    <div class="editorial-header">
+      <span class="editorial-script">C</span>
+      <h2 class="editorial-title">Exquisite Rezepte</h2>
+      <p class="editorial-subtitle">Seit 2026 — Handverlesene Kulinarik</p>
+    </div>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .editorial-header {
+      text-align: center;
+      position: relative;
+      padding: clamp(3rem, 5vw, 8rem) 1rem;
+    }
+    .editorial-script {
+      font-family: 'Edwardian Script ITC', 'Brush Script MT', cursive;
+      font-size: clamp(8rem, 15vw, 22rem);
+      color: var(--color-accent-gold);
+      line-height: 0.3;
+      display: block;
+      opacity: 0.8;
+    }
+    .editorial-title {
+      font-family: var(--font-serif-display);
+      font-size: clamp(2.5rem, 4vw, 5.5rem);
+      text-transform: uppercase;
+      letter-spacing: -0.02em;
+      color: var(--color-bg-dark);
+      margin-top: -1rem;
+    }
+    .editorial-subtitle {
+      font-family: var(--font-serif-classic);
+      font-style: italic;
+      font-size: 1.15rem;
+      letter-spacing: 0.1em;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      margin-top: 1rem;
+    }
+    ```
+
+#### 🆔 `FloemaLayoutGrid`
+*   **Beschreibung**: Ein modulares 24-Spalten-Layout mit anpassungsfähigen Abständen. Sorgt für ein extrem aufgeräumtes, fast architektonisches Erscheinungsbild, bei dem Bilder und Texte in asymmetrischen, perfekt ausgerichteten Rastern fließen.
+*   **HTML-Struktur**:
+    ```html
+    <div class="g-row">
+      <div class="g-col col-left">
+        <!-- 8 Spalten breit (z.B. Zutatentabelle) -->
+      </div>
+      <div class="g-col col-right">
+        <!-- 16 Spalten breit (z.B. Zubereitungsschritte) -->
+      </div>
+    </div>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .g-row {
+      display: flex;
+      flex-flow: row wrap;
+      padding-left: calc(var(--grid-margin) - var(--grid-gap) * 0.5);
+      padding-right: calc(var(--grid-margin) - var(--grid-gap) * 0.5);
+      width: 100%;
+    }
+    .g-col {
+      padding-left: calc(var(--grid-gap) * 0.5);
+      padding-right: calc(var(--grid-gap) * 0.5);
+    }
+    .col-left {
+      flex: 0 0 33.333%; /* 8/24 Spalten */
+      max-width: 33.333%;
+    }
+    .col-right {
+      flex: 0 0 66.667%; /* 16/24 Spalten */
+      max-width: 66.667%;
+    }
+    @media (max-width: 768px) {
+      .col-left, .col-right {
+        flex: 0 0 100%;
+        max-width: 100%;
+      }
+    }
+    ```
+
+---
+
+### 2. Hintergründe & Atmosphären
+
+#### 🆔 `AuraMarbleBackground`
+*   **Beschreibung**: Ein dezenter, luxuriöser Marmor- oder Stein-Hintergrundeffekt. Er verleiht der Website Tiefe und Materialität, ohne vom Inhalt abzulenken, indem er ein hochauflösendes Marmormuster per Mix-Blend-Mode mit der Hintergrundfarbe verschmilzt.
+*   **HTML-Struktur**:
+    ```html
+    <div class="bg-marble-container">
+      <div class="bg-marble-media"></div>
+      <div class="bg-marble-grain"></div>
+    </div>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .bg-marble-container {
+      position: fixed;
+      inset: 0;
+      z-index: -1;
+      overflow: hidden;
+      background-color: var(--color-bg-light);
+      pointer-events: none;
+    }
+    .bg-marble-media {
+      position: absolute;
+      inset: -50px;
+      width: calc(100% + 100px);
+      height: calc(100% + 100px);
+      background-image: url('assets/img/marble_texture.jpg'); /* Sanfte Steintextur */
+      background-size: cover;
+      background-position: center;
+      mix-blend-mode: exclusion;
+      opacity: 0.12; /* Sehr dezent */
+      will-change: transform;
+    }
+    /* Optionaler Rauscheffekt (Noise) für noch edlere Papierhaptik */
+    .bg-marble-grain {
+      position: absolute;
+      inset: 0;
+      background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
+      opacity: 0.04;
+      mix-blend-mode: overlay;
+    }
+    ```
+
+---
+
+### 3. Interaktive Elemente & Buttons
+
+#### 🆔 `CapitoliumRevealButton`
+*   **Beschreibung**: Ein minimalistischer, extrem edler Button mit Rahmen. Beim Hover füllt sich der Button von unten nach oben mit einer goldene/dunklen Fläche, die Schrift verbreitert sich elegant (Letter-spacing-Effekt) und die Pfeile drehen sich.
+*   **HTML-Struktur**:
+    ```html
+    <button class="btn-reveal">
+      <span class="btn-reveal-text">Rezept ansehen</span>
+      <span class="btn-reveal-arrow">→</span>
+    </button>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .btn-reveal {
+      background: transparent;
+      border: 1px solid var(--color-accent-gold);
+      color: var(--color-bg-dark);
+      padding: 1.15rem 2.5rem;
+      font-family: var(--font-serif-display);
+      font-size: 1rem;
+      text-transform: uppercase;
+      letter-spacing: 0.16em;
+      position: relative;
+      overflow: hidden;
+      display: inline-flex;
+      align-items: center;
+      gap: 0.75rem;
+      transition: color 0.4s var(--ease-out-expo);
+      z-index: 1;
+    }
+    .btn-reveal::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      background-color: var(--color-accent-gold);
+      transform: scaleY(0);
+      transform-origin: bottom;
+      transition: transform 0.45s var(--ease-fluid-slide);
+      z-index: -1;
+    }
+    .btn-reveal-text {
+      transition: letter-spacing 0.4s var(--ease-fluid-slide), padding-left 0.4s var(--ease-fluid-slide);
+    }
+    .btn-reveal-arrow {
+      transition: transform 0.4s var(--ease-fluid-slide);
+      display: inline-block;
+    }
+    /* Hover-Effekte */
+    .btn-reveal:hover {
+      color: var(--color-white);
+    }
+    .btn-reveal:hover::before {
+      transform: scaleY(1);
+    }
+    .btn-reveal:hover .btn-reveal-text {
+      letter-spacing: 0.24em;
+      padding-left: 0.08em;
+    }
+    .btn-reveal:hover .btn-reveal-arrow {
+      transform: translateX(5px) scale(1.1);
+    }
+    ```
+
+#### 🆔 `SlideUpTextHover`
+*   **Beschreibung**: Animierter Link-Text-Effekt (bekannt von *fromanother*). Der Text verdoppelt sich unsichtbar. Beim Hover gleitet der Originaltext nach oben aus dem Sichtbereich, während von unten zeitgleich ein Klon-Text nach oben nachrückt.
+*   **HTML-Struktur**:
+    ```html
+    <a href="#" class="slide-hover-link">
+      <span class="slide-hover-wrapper">
+        <span class="slide-text-main">Über uns</span>
+        <span class="slide-text-clone" aria-hidden="true">Über uns</span>
+      </span>
+    </a>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .slide-hover-link {
+      display: inline-block;
+      text-decoration: none;
+      color: var(--color-bg-dark);
+      font-family: var(--font-serif-display);
+      font-weight: 500;
+      overflow: hidden;
+    }
+    .slide-hover-wrapper {
+      display: block;
+      position: relative;
+      overflow: hidden;
+      height: 1.2em; /* Exakte Höhe begrenzen */
+    }
+    .slide-text-main, .slide-text-clone {
+      display: block;
+      transition: transform 0.5s var(--ease-out-expo);
+      line-height: 1.2em;
+      will-change: transform;
+    }
+    .slide-text-clone {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      color: var(--color-accent-gold);
+    }
+    /* Hover-Effekt */
+    .slide-hover-link:hover .slide-text-main {
+      transform: translateY(-100%);
+    }
+    .slide-hover-link:hover .slide-text-clone {
+      transform: translateY(-100%);
+    }
+    ```
+
+#### 🆔 `UnderlineExpandHover`
+*   **Beschreibung**: Elegante Textunterstreichung (bekannt von *Floema*). Die Linie ist im Normalzustand unsichtbar und skaliert beim Hover fließend von links nach rechts auf die volle Breite des Elements.
+*   **HTML-Struktur**:
+    ```html
+    <a href="#" class="underline-link">Datenschutz</a>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .underline-link {
+      position: relative;
+      color: currentColor;
+      text-decoration: none;
+      display: inline-block;
+    }
+    .underline-link::after {
+      content: "";
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 100%;
+      height: 1px;
+      background-color: currentColor;
+      transform: scaleX(0);
+      transform-origin: left;
+      transition: transform 0.5s var(--ease-out-expo);
+    }
+    .underline-link:hover::after {
+      transform: scaleX(1);
+    }
+    ```
+
+#### 🆔 `FloemaNudgeHover`
+*   **Beschreibung**: Hochsensibler, spielerischer Navigationseffekt. Statt Farbwechsel schiebt sich das Element minimal zur Seite (oder nach oben), was eine physische Leichtigkeit erzeugt.
+*   **HTML-Struktur**:
+    ```html
+    <a href="#" class="nudge-link">Unsere Story</a>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .nudge-link {
+      display: inline-block;
+      transition: margin 0.3s cubic-bezier(0.19, 1, 0.22, 1);
+      color: var(--color-bg-dark);
+      text-decoration: none;
+    }
+    .nudge-link:hover {
+      margin-left: 6px;
+      color: var(--color-accent-gold);
+    }
+    ```
+
+---
+
+### 4. Menüs, Overlays & Navigationen
+
+#### 🆔 `LiquidOverlayMenu`
+*   **Beschreibung**: Ein flüssiges Vollbild-Navigationsmenü. Der Hamburger-Button morpht sanft zum Schließen-Kreuz, während sich das Menü über einen weichen `clip-path` (von oben nach unten) über den Bildschirm zieht.
+*   **HTML-Struktur**:
+    ```html
+    <!-- Hamburger Button -->
+    <button class="nav-trigger" aria-label="Menü öffnen" id="menuBtn">
+      <span class="nav-burger-lines">
+        <span class="line line-top"></span>
+        <span class="line line-mid"></span>
+        <span class="line line-bot"></span>
+      </span>
+    </button>
+
+    <!-- Vollbild Overlay -->
+    <div class="nav-overlay" id="menuOverlay">
+      <div class="nav-overlay-inner">
+        <ul class="nav-menu-list">
+          <li><a href="index.php" class="slide-hover-link"><span class="slide-hover-wrapper"><span class="slide-text-main">Startseite</span><span class="slide-text-clone">Startseite</span></span></a></li>
+          <li><a href="recipe.php" class="slide-hover-link"><span class="slide-hover-wrapper"><span class="slide-text-main">Rezepte</span><span class="slide-text-clone">Rezepte</span></span></a></li>
+          <li><a href="impressum.php" class="slide-hover-link"><span class="slide-hover-wrapper"><span class="slide-text-main">Impressum</span><span class="slide-text-clone">Impressum</span></span></a></li>
+        </ul>
+      </div>
+    </div>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    /* Hamburger Button */
+    .nav-trigger {
+      position: fixed;
+      top: 2rem;
+      right: var(--grid-margin);
+      z-index: 1001;
+      width: 50px;
+      height: 50px;
+      background: var(--color-white);
+      border: 1px solid var(--color-accent-gold);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .nav-burger-lines {
+      width: 20px;
+      height: 14px;
+      position: relative;
+      display: block;
+    }
+    .line {
+      position: absolute;
+      width: 100%;
+      height: 1.5px;
+      background-color: var(--color-bg-dark);
+      transition: transform 0.4s var(--ease-fluid-slide), opacity 0.3s ease;
+    }
+    .line-top { top: 0; }
+    .line-mid { top: 6px; }
+    .line-bot { top: 12px; }
+
+    /* Aktiv-Zustand Hamburger (Kreuz) */
+    .nav-trigger.active .line-top { transform: translateY(6px) rotate(45deg); }
+    .nav-trigger.active .line-mid { opacity: 0; }
+    .nav-trigger.active .line-bot { transform: translateY(-6px) rotate(-45deg); }
+
+    /* Menü Overlay */
+    .nav-overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 1000;
+      background-color: var(--color-bg-light);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      clip-path: inset(0 0 100% 0); /* Standardmäßig von oben versteckt */
+      transition: clip-path 0.75s var(--ease-fluid-slide);
+    }
+    .nav-overlay.open {
+      clip-path: inset(0 0 0 0); /* Vollständig sichtbar */
+    }
+    .nav-menu-list {
+      text-align: center;
+      list-style: none;
+    }
+    .nav-menu-list li {
+      margin: 2.5rem 0;
+    }
+    .nav-menu-list a {
+      font-size: clamp(2rem, 3.5vw, 4rem);
+    }
+    ```
+*   **JavaScript-Anweisung**:
+    ```javascript
+    const menuBtn = document.getElementById('menuBtn');
+    const menuOverlay = document.getElementById('menuOverlay');
+    
+    menuBtn.addEventListener('click', () => {
+      menuBtn.classList.toggle('active');
+      menuOverlay.classList.toggle('open');
+      document.body.classList.toggle('modal-open');
+    });
+    ```
+
+---
+
+### 5. Ladebildschirme, Scroll-Effekte & Parallax
+
+#### 🆔 `CapitoliumPreloader`
+*   **Beschreibung**: Immersiver, ganzflächiger Ladebildschirm mit anwachsenden Zahlen oder einer edlen Botschaft, der sich beim Laden nach oben wegschiebt und die Website enthüllt.
+*   **HTML-Struktur**:
+    ```html
+    <div class="preloader" id="preloader">
+      <div class="preloader-content">
+        <h1 class="preloader-logo">FlixCooks</h1>
+        <div class="preloader-bar"><div class="preloader-fill" id="preloaderFill"></div></div>
+        <p class="preloader-text">Wird zubereitet... <span id="preloaderPerc">0</span>%</p>
+      </div>
+    </div>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .preloader {
+      position: fixed;
+      inset: 0;
+      z-index: 10000;
+      background-color: var(--color-bg-dark);
+      color: var(--color-light-gold);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
+    }
+    .preloader.loaded {
+      transform: translateY(-100vh);
+    }
+    .preloader-content {
+      text-align: center;
+      width: clamp(200px, 50vw, 400px);
+    }
+    .preloader-logo {
+      font-family: var(--font-serif-display);
+      font-size: 2.5rem;
+      text-transform: uppercase;
+      letter-spacing: 0.2em;
+      margin-bottom: 1.5rem;
+    }
+    .preloader-bar {
+      width: 100%;
+      height: 2px;
+      background-color: rgba(240, 227, 207, 0.2);
+      border-radius: 1px;
+      overflow: hidden;
+      margin-bottom: 0.5rem;
+    }
+    .preloader-fill {
+      width: 0%;
+      height: 100%;
+      background-color: var(--color-accent-gold);
+      transition: width 0.1s ease;
+    }
+    .preloader-text {
+      font-family: var(--font-sans-clean);
+      font-size: 0.85rem;
+      letter-spacing: 0.1em;
+      opacity: 0.7;
+    }
+    ```
+*   **JavaScript-Anweisung**:
+    ```javascript
+    document.addEventListener("DOMContentLoaded", () => {
+      const fill = document.getElementById("preloaderFill");
+      const perc = document.getElementById("preloaderPerc");
+      const preloader = document.getElementById("preloader");
+      let progress = 0;
+      
+      const interval = setInterval(() => {
+        progress += Math.floor(Math.random() * 15) + 5;
+        if (progress >= 100) {
+          progress = 100;
+          clearInterval(interval);
+          setTimeout(() => {
+            preloader.classList.add("loaded");
+          }, 300);
+        }
+        fill.style.width = progress + "%";
+        perc.innerText = progress;
+      }, 100);
+    });
+    ```
+
+#### 🆔 `FloemaScatterParallax`
+*   **Beschreibung**: Spielerische, unregelmäßige Bildanordnungen, die beim Scrollen oder bei Mausbewegung in asynchronen Geschwindigkeiten gleiten (Parallax-Effekt). Perfekt für die Präsentation von Zutaten oder Detailaufnahmen auf der Startseite.
+*   **HTML-Struktur**:
+    ```html
+    <div class="scatter-container">
+      <div class="scatter-item item-fast" data-speed="0.15">
+        <img src="assets/img/zutat_1.jpg" alt="Tomaten">
+      </div>
+      <div class="scatter-item item-slow" data-speed="0.05">
+        <img src="assets/img/zutat_2.jpg" alt="Basilikum">
+      </div>
+      <div class="scatter-item item-medium" data-speed="0.1">
+        <img src="assets/img/zutat_3.jpg" alt="Olivenöl">
+      </div>
+    </div>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .scatter-container {
+      position: relative;
+      height: 60vh;
+      width: 100%;
+      overflow: hidden;
+    }
+    .scatter-item {
+      position: absolute;
+      will-change: transform;
+      box-shadow: 0 15px 35px rgba(0,0,0,0.08);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .item-fast {
+      top: 10%;
+      left: 15%;
+      width: 180px;
+      z-index: 3;
+    }
+    .item-slow {
+      top: 40%;
+      right: 10%;
+      width: 250px;
+      z-index: 1;
+    }
+    .item-medium {
+      top: 25%;
+      left: 55%;
+      width: 220px;
+      z-index: 2;
+    }
+    .scatter-item img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+    ```
+*   **JavaScript-Anweisung (GSAP ScrollTrigger)**:
+    ```javascript
+    gsap.utils.toArray(".scatter-item").forEach(item => {
+      const speed = item.getAttribute("data-speed");
+      gsap.to(item, {
+        yPercent: -100 * speed,
+        ease: "none",
+        scrollTrigger: {
+          trigger: item,
+          start: "top bottom",
+          end: "bottom top",
+          scrub: true
+        }
+      });
+    });
+    ```
+
+#### 🆔 `LenisSmoothScroll`
+*   **Beschreibung**: Bietet ein samtweiches, flüssiges Scrollverhalten über die gesamte Website hinweg (bekannt von *Capitolium* und *Floema*). Wird idealerweise mit einer feinen Scroll-Progress-Anzeige kombiniert.
+*   **Einbindung (JS / CDN)**:
+    ```html
+    <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.19/bundled/lenis.min.js"></script>
+    <script>
+      const lenis = new Lenis({
+        duration: 1.2,
+        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // Weiche Bremskurve
+        direction: 'vertical',
+        gestureDirection: 'vertical',
+        smooth: true,
+        mouseMultiplier: 1,
+        smoothTouch: false
+      });
+
+      function raf(time) {
+        lenis.raf(time);
+        requestAnimationFrame(raf);
+      }
+      requestAnimationFrame(raf);
+    </script>
+    ```
+
+#### 🆔 `IndexSectionIndicator`
+*   **Beschreibung**: Eine diskrete, minimalistische Fortschrittsanzeige am Bildschirmrand (bekannt von *fromanother*). Sie zeigt die aktuelle Seitennummer, den Kategorienamen und eine sich dynamisch füllende vertikale Linie an.
+*   **HTML-Struktur**:
+    ```html
+    <div class="section-indicator">
+      <div class="indicator-index">01</div>
+      <div class="indicator-line-wrapper">
+        <div class="indicator-line-fill" id="indicatorLine"></div>
+      </div>
+      <div class="indicator-name">Zutaten</div>
+    </div>
+    ```
+*   **CSS-Anweisung**:
+    ```css
+    .section-indicator {
+      position: fixed;
+      left: var(--grid-margin);
+      top: 50%;
+      transform: translateY(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+      z-index: 100;
+      font-family: var(--font-serif-display);
+      font-size: 0.8rem;
+      color: var(--color-accent-gold);
+      pointer-events: none;
+    }
+    .indicator-line-wrapper {
+      width: 1px;
+      height: 100px;
+      background-color: rgba(195, 166, 119, 0.2);
+      position: relative;
+    }
+    .indicator-line-fill {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 0%; /* Wird per JS gesteuert */
+      background-color: var(--color-accent-gold);
+      transition: height 0.3s ease;
+    }
+    .indicator-name {
+      writing-mode: vertical-rl;
+      text-transform: uppercase;
+      letter-spacing: 0.15em;
+    }
+    @media (max-width: 960px) {
+      .section-indicator { display: none; }
+    }
+    ```
+
+---
+
+## 5. Referenz-Spezifikationen (Website Analysis Insights)
+
+Diese Spezifikationen dienen als exakte technische Grundlage und belegen das reale Verhalten der Vorbilder, die wir als Benchmark nutzen:
+
+### A. Capitolium (collabcapitolium.fr)
+*   **Pinning & Scroll-Tiefe**: Nutzt massive GSAP ScrollTrigger-Bereiche. Der Bereich `block-shirts` besitzt eine Höhe von `1816px` und `block-collection` sogar `6744px` für atemberaubende horizontale Karusselle.
+*   **Raster-Konfiguration**: Sehr enges Raster mit einem Spaltenabstand (`--gutter`) von exakt `10px` und einer Begrenzung auf `--max-width: 2560px`.
+*   **Schrifthierarchie**: Markante, massive Serifenschrift `gin, serif` (Headline-Größe: `131px`) im perfekten Kontrast zu `Times, serif` für Fließtext und geometrischem `Rubik, sans-serif` (`14px`, fett) für Buttons.
+
+### B. fromanother (fromanother.love)
+*   **Echtes Farb-Setup**: Düsteres, hochmütiges Farbverhältnis. Hintergrund ist Mitternachtsblau (`#051236`) mit cremefarbenen Texten (`#fffde2`) und einem leuchtenden Kobaltblau (`#1740a9`) für interaktive Akzente.
+*   **Asymmetrische Abstände**: Festes 6-Spalten-Raster (`--columns: 6`) mit standardisierten, progressiven Seitenabständen (`--padding-x: 1.6rem`, `--gap-x: 1.6rem`).
+*   **Monolithische Hero-Area**: Die Showcase-Projekte werden über eine GSAP-Scrollhöhe von `7518px` (exakt 6x Viewport-Höhe) gepinnt, um dreidimensionale Drehungen zu inszenieren.
+
+### C. Floema (floema.com/en)
+*   **Grounded Palette**: Warmes Elfenbein-Creme (`#f2efea`) kombiniert mit tiefem Kohlebraun (`#241f21`) und organischen Erdtönen wie Waldgrün (`#042d2b`), Kraftkarton-Beige (`#c6af88`) und Terracotta (`#f76c46`).
+*   **Scrolltrigger-Tiefe**: Extrem langes Scroll-Pinning von exakt `11.277px` für die interaktive Vorstellung der Kollektionen.
+*   **Responsive Perfektion**: Keine harten Mediaqueries, sondern vollkommen fließende Größenberechnungen:
+    *   *Grid Gap*: `clamp(14px, 9.71px + 1vw, 28px)`
+    *   *Grid Margin*: `clamp(16px, 10.15px + 1.5vw, 36px)`
@@ -0,0 +1,144 @@
+# FlixCooks Development Roadmap & Tasks
+
+Dieses Dokument enthält den aktuellen Entwicklungsstand und detaillierte Aufgabenlisten für die neuen Premium-Features von **FlixCooks**. Die Entwicklung erfolgt in Phasen, aufgeteilt in atomare, überprüfbare Arbeitsschritte.
+
+---
+
+## 🚀 Übersicht der Entwicklungsphasen
+
+- [x] **Phase 1: UI/UX Rebase & Globales Design-System (Fundament)**
+  - Globale CSS-Tokens & Farbpaletten-Setup
+  - Atmosphärischer Stein-Hintergrund (`AuraMarbleBackground`)
+  - Fullscreen Overlay-Navigation (`LiquidOverlayMenu` & `SlideUpTextHover`)
+  - Geschmeidiges Scrollverhalten (`LenisSmoothScroll` & `IndexSectionIndicator`)
+  - Layout-Raster (`FloemaLayoutGrid`) & Premium-Buttons
+- [x] **Phase 2: Authentifizierung & Firebase Integration**
+  - Firebase-Projekt Setup & Anbindung
+  - Newsletter-System (Firebase Firestore)
+  - Benutzerprofile (Registrierung, Login, Favoriten)
+- [x] **Phase 3: Nährwerte & Rezepterweiterung**
+  - Datenmodell & Admin.php Erweiterung
+  - Visuelles Nährwert-Widget (Floema-Präzision)
+  - Makro-/Diät-Filter & Kategorisierung
+- [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
+- [ ] **Phase 5: Sleek Swipe Discovery (Personalisiertes Empfehlungskarussell)**
+  - Touch-Swipe-Karussell direkt auf index.php (unter Landing-Page)
+  - Filteralgorithmus nach Benutzer-Ernährungszielen
+  - Mikro-Animationen & Quick-Save Funktion
+
+---
+
+## 🛠️ Detaillierte Checklisten
+
+### 🎨 Phase 1: UI/UX Rebase & Globales Design-System
+Das visuelle Fundament der Website. Die Etablierung des Premium-Designs stellt sicher, dass alle darauffolgenden Phasen direkt im finalen Look entwickelt werden können.
+
+- [x] **Globale Token-Etablierung**
+  - [x] CSS-Variablen in `assets/style.css` auf Basis der edlen Capitolium- & Floema-Farbpalette definieren (Creme-Elfenbein `--color-bg-light`, Steinkohle-Braun `--color-bg-dark`, Gold `--color-accent-gold`, Terracotta `--color-terracotta`).
+  - [x] Schriftarten einbinden (Serifen-Pracht für Überschriften, cleanes Inter für Lesbarkeit) in `partials/head.php` → Playfair Display + Manrope
+- [x] **Atmosphärische Grundlagen**
+  - [x] `AuraMarbleBackground` implementieren: Dezente Stein-Textur mit Mix-Blend-Mode und optionalem SVG-Papier-Rauschen (Noise) auf allen PHP/HTML Seiten im Hintergrund verankern.
+  - [x] Skalierungen für alle Paddings, Margins und Schriften mittels CSS `clamp()` definieren, um stufenlose Responsivität (Mobile bis 4K) zu garantieren.
+- [x] **Asymmetrisches Layout-Raster**
+  - [x] Das modulare 24-Spalten-Raster (`FloemaLayoutGrid`) in den Haupt-Templates (`index.php`, `recipe.php`) integrieren.
+  - [x] Bestehende Rezeptkarten und Detailblöcke an das neue Grid anpassen.
+- [x] **High-End Navigation & Header**
+  - [x] Den bestehenden Header zu `LiquidOverlayMenu` umbauen: Hamburger-Button morpht weich zum Schließen-Kreuz.
+  - [x] Vollbild-Navigationsmenü mit geschmeidigem `clip-path` (von oben nach unten gleitend) implementieren.
+  - [x] Menü-Links mit dem animierten `SlideUpTextHover` (Text verdoppelt und verschiebt sich beim Hover) ausstatten.
+- [x] **Flüssige Scroll-Erfahrung**
+  - [x] `LenisSmoothScroll` (CDN) im Footer/Head einbinden und initialisieren für samtweiches Scrollverhalten.
+  - [x] Seitliche Fortschrittsanzeige (`IndexSectionIndicator`) auf `index.php` integrieren, um aktuelle Scroll-Position und Sektionsnamen elegant anzuzeigen.
+- [x] **Premium Mikro-Interaktionen**
+  - [x] Primäre Buttons auf den Reveal-Effekt von `CapitoliumRevealButton` umstellen (von unten aufsteigende Gold-Fläche + Spationierungseffekt beim Hover).
+  - [x] Textlinks mit der anwachsenden Unterstreichung von `UnderlineExpandHover` versehen.
+- [x] **CapitoliumPreloader** (Landing Page Ladebildschirm mit Fortschrittsbalken)
+- [x] **Recipe Showcase Stage** (GSAP ScrollTrigger Bühnenpräsentation: Bilder von rechts → Mitte → links)
+
+---
+
+### 🔒 Phase 2: Authentifizierung & Firebase Integration
+Das Fundament für Personalisierung und Newsletter-Abos über eine sichere Firebase-Anbindung (Auth & Firestore).
+
+- [x] **Firebase Setup & Initialisierung**
+  - [x] Firebase SDK Client-Side Einbindung in `partials/head.php` or separaten Helper
+  - [x] Firebase Config in umweltabhängigen Settings/Variablen auslagern
+  - [x] Firestore-Datenbank initialisieren (`subscribers` und `users` Collections)
+- [x] **Premium Login- & Registrierungsseite**
+  - [x] Erstellung der Seite `login.php` (und optional `signup.php`) im neuen Design-System-Stil
+  - [x] Firebase Authentication (Email/Passwort Login & Registrierung) implementieren
+  - [x] Responsive UI mit sanften Error- & Success-Meldungen und Eingabefeldern im Glasmorphismus-Look
+  - [x] Client-seitige und Server-seitige Session-Synchronisation (z.B. Firebase Session Tokens an PHP-Session via Ajax senden)
+- [x] **Favoriten-Funktion (Rezept-Bookmarks)**
+  - [x] Firestore-Collection `user_favorites` anlegen (Format: `userId` -> Liste von `recipeSlugs`)
+  - [x] "Rezept speichern" Button (Herz-Icon) auf den Rezeptkarten und Rezept-Details mit dynamischem Login-Check
+  - [x] Mikro-Animationen für das Herz-Icon (Scale up/down, Fülleffekte mit `var(--ease-overshoot)`)
+- [x] **Firebase-gestütztes Newsletter-Abo**
+  - [x] Newsletter-Eingabefeld im Footer (`partials/footer.php`) implementieren
+  - [x] AJAX-Submit-Handler: E-Mail-Adresse prüfen und in Firestore Collection `subscribers` speichern
+  - [x] Elegantes Feedback-UI (Erfolgsmeldung ohne Page-Reload)
+
+---
+
+### 🥗 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.
+
+- [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.
+
+- [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
+
+---
+
+### 🎡 Phase 5: Sleek Swipe Discovery (Empfehlungskarussell)
+Ein hochgradig interaktives, touch-freundliches Karussell direkt auf der Startseite, das Nutzern Rezepte basierend auf ihren Zielen empfiehlt.
+
+- [ ] **Karussell-Architektur & Integration**
+  - [ ] Touch-Swipe Karussell Container direkt unter der Landing-Page (vor `#basics`) auf `index.php` einbetten
+  - [ ] CSS-Klammern (`clamp()`) für responsive Skalierung der Karten
+  - [ ] Flüssiges Einblenden per Scroll-Reveal (`reveal-target`) mit Anbindung an `LenisSmoothScroll`
+- [ ] **Personalisiertes Goal-Matching**
+  - [ ] Falls der Benutzer eingeloggt ist, sein Ernährungsziel aus den Firebase-Profildaten abrufen
+  - [ ] Rezepte dynamisch filtern (z.B. High-Protein Rezepte bei Ziel "Muskelaufbau", Low-Carb Rezepte bei Ziel "Abnehmen")
+  - [ ] Personalisierte "Für dich empfohlen"-Badge auf den Karten anzeigen
+- [ ] **Mikro-Interaktionen & Quick-Save**
+  - [ ] Touch-Gesten-Unterstützung (Wischen zum Blättern mit sanftem Trägheits-Feedback)
+  - [ ] Quick-Save Button direkt auf den Karussell-Karten (Herzeffekt mit direktem Firebase Firestore Sync)
+  - [ ] Hover-Reveal-Effekte für Rezeptdetails (Zutaten-Vorschau oder Kochzeit-Highlight schiebt sich weich hoch)
+
+---
+
+## 📈 Status-Legende
+- `[ ]` Noch nicht begonnen
+- `[/]` In Bearbeitung
+- `[x]` Erfolgreich abgeschlossen
@@ -0,0 +1,31 @@
+# FlixCooks Project Brain
+
+This document summarizes the architectural knowledge, conventions, and learnings accumulated during our session.
+
+## 1. Project Architecture & Stack
+- **Backend:** Vanilla PHP. The project intentionally avoids heavy frameworks.
+- **Database:** Flat-file JSON database (`data/recipes.json`). Data is loaded and saved via utility functions in `helpers.php`.
+- **Admin Panel (`admin.php`):** Acts as a lightweight CMS. It uses simple textareas where each line maps to an array element (e.g., for `ingredients`, `steps`, `step_videos`, `step_timers`). This keeps the JSON structure clean and parsing straightforward.
+- **Frontend:** Server-rendered PHP templates (`index.php`, `recipe.php`) with Vanilla JavaScript and Vanilla CSS. No Tailwind or heavy component libraries.
+
+## 2. Design & Aesthetics
+- **CSS:** Highly customized CSS with modern design tokens (e.g., `var(--ease-out-expo)`, `var(--surface-1)`).
+- **Animations:** Employs sophisticated micro-animations, glassmorphism (`backdrop-filter: blur`), and dynamic layouts (e.g., `clip-path` for overlays).
+- **Smooth Scrolling:** Uses **Lenis** (`LenisSmoothScroll`). 
+  - *Crucial Rule:* Whenever a fullscreen overlay (like the Cooking Mode) is opened, `lenis.stop()` must be called to prevent background scrolling. When closed, call `lenis.start()`.
+- **Preloader:** A custom `CapitoliumPreloader` runs on the homepage. It is cached in `sessionStorage('flixcooks_preloader_seen')` so it only fires once per browsing session.
+
+## 3. Antigravity Agent Configuration
+- **Workspace Rules:** Best placed in `.agents/rules/` (e.g., `AGENT.md`). To ensure they are always active, the frontmatter must include:
+  ```yaml
+  always_on: true
+  glob: "*"
+  ```
+- **Custom Skills:** Can be defined as JSON files in `.agents/skills/`. We successfully created `close_feature.json` to automate the Git workflow of checking out `main`, merging a feature branch, verifying functionality, and deleting the branch.
+
+## 4. Completed Milestones
+- **Phase 3 (Nutrition):** Implemented. Recipes now store `calories`, `protein`, `carbs`, and `fat`. Admin panel handles inputs, and the UI displays them beautifully.
+- **Phase 4 (Interactive Cooking Mode):** Implemented. Recipes now support step-by-step looping background videos and interactive timers (`step_videos`, `step_timers`). The UI utilizes a fullscreen overlay slider with Vanilla JS logic.
+
+## 5. Next Steps
+According to `TODO.md`, the next major feature block is **Phase 5 (PWA & Offline Support)**, which involves service workers, manifest files, and enabling the app to be installable on mobile devices.