# FlixCooks Design-System & Feature-Katalog

Dieses Dokument dient als zentrale Design-Richtlinie und Anweisungs-Katalog für die KI, um das visuelle Erscheinungsbild und die Interaktionen der Website **FlixCooks** auf ein absolut erstklassiges Premium-Niveau zu heben. Die Design-Prinzipien und Features basieren auf den herausragenden Merkmalen von Vorbild-Websites:
1. **Capitolium** ([collabcapitolium.fr](https://www.collabcapitolium.fr/)) — *Historischer Retro-Luxus, Goldtöne, elegante Serifen und edle Steinstrukturen.*
2. **From Another** ([fromanother.love](https://www.fromanother.love/)) — *Künstlerisch-flüssige Moderne, Micro-Interaktionen, flüssige Overlays und organische Übergänge.*
3. **Floema** ([floema.com/en](https://www.floema.com/en)) — *Natürliche Eleganz, architektonische Grid-Präzision, elastische Animationen und erdige Töne.*

---

## 🎨 Globales Design-System & Tokens

Die folgenden CSS-Variablen definieren die Farbwelt, Typografie und Abstände und kombinieren die besten Aspekte aller drei Welten.

```css
:root {
  /* --- Farbpalette (Erdig, Edel, High-End Kontrast) --- */
  --color-bg-light: #f2efea;       /* Helles Creme-Elfenbein (Floema) */
  --color-bg-dark: #241f21;        /* Tiefes Steinkohle-Braun (Floema) */
  --color-accent-gold: #c3a677;    /* Dunkles, edles Gold (Capitolium) */
  --color-light-gold: #f0e3cf;     /* Warmes, helles Seidengold (Capitolium) */
  --color-white: #ffffff;
  --color-terracotta: #f76c46;     /* Akzent-Farbe für Highlights/Aktionen */
  --color-forest: #042d2b;         /* Dunkles Waldgrün für Tiefe */
  --color-text-muted: #7a716d;     /* Gedämpftes Braun-Grau */
  
  /* --- Typografie (Kombination aus Serifen-Eleganz & cleaner Struktur) --- */
  --font-serif-classic: 'Times New Roman', Times, serif;
  --font-serif-display: 'gin', 'Zimula', Georgia, serif;
  --font-sans-clean: 'Inter', system-ui, -apple-system, sans-serif;
  
  /* --- Grid & Spacings (Präzise Floema-Berechnung) --- */
  --grid-columns: 24;
  --grid-gap: clamp(14px, 9.71px + 1.1vw, 28px);
  --grid-margin: clamp(16px, 10.15px + 1.5vw, 36px);
  
  /* --- Animation Easing Curves (Cubic-Bezier Signaturen) --- */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);    /* Ultraschnelle, weiche Verlangsamung */
  --ease-overshoot: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Elastischer Bouncing-Effekt */
  --ease-fluid-slide: cubic-bezier(0.76, 0, 0.24, 1);  /* Gleitende, organische Bewegung */
}
```

---

## 🏛️ 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 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 *From Another*). 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);
  }
  ```

---

### 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. Übergänge, Scroll-Effekte & Ladebildschirme

#### 🆔 `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 *From Another*). 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; }
  }
  ```

---

## 📋 Arbeitsanweisung für die KI

1. **Behalte den Premium-Anspruch bei**: Jedes Element, das auf FlixCooks neu erstellt oder verändert wird, muss sich an diesem Leitfaden orientieren. Keine grellen Primärfarben, keine unnatürlichen Ecken oder unsauberen Abstände.
2. **Nutze fließende Skalierung (`clamp()`)**: Benutze für alle Schriftgrößen, Abstände (`padding`/`margin`) und Höhen CSS-Klammern (`clamp()`), damit das Layout auf 4K-Monitoren genauso atemberaubend aussieht wie auf Mobilgeräten.
3. **Kombiniere die Features harmonisch**:
   * Nutze `AuraMarbleBackground` als globale Grundlage.
   * Richte die Inhalte strikt am `FloemaLayoutGrid` aus.
   * Biete geschmeidige Navigation mit `LiquidOverlayMenu` und dem interaktiven `SlideUpTextHover`.
4. **Vergiss Micro-Animationen nicht**: Buttons müssen unter Verwendung der passenden Easing-Kurven (`var(--ease-out-expo)` oder `var(--ease-overshoot)`) einladend auf Berührung reagieren.