flixcooks-website/DESIGN_GUIDE.md

# 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, 1vw + 4px, 28px);
      --grid-margin: clamp(16px, 1.5vw + 10px, 36px);
      --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 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);
    }
    ```

---

### 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 *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; }
    }
    ```