# Redesign-Masterplan — arthurkotsch.online

**Projekt:** Komplette visuelle & strukturelle Neukonzeption
**Stil:** Glassmorphism / Soft Depth + globale, dezente 3D-Hintergrundszene
**Ziel:** Eine umwerfende, professionelle, einheitliche Plattform — alle 120 bestehenden Seiten neu eingebunden
**Stack:** Yii2 (PHP) · Bootstrap 5 · neue Asset-Pipeline (CSS Tokens + WebGL/Three.js + GSAP/Lenis)
**Status:** Planungsphase — wartet auf Freigabe (siehe §12)
**Erstellt:** 2026-05-21

---

## 1. Executive Summary

Die Seite ist heute ein solides, kürzlich modernisiertes „Kotsch.Works"-Portfolio mit einem
**riesigen** dahinterliegenden Universum aus 120 Views: Portfolio, ~20 Wissenstests,
Studienmaterial, interaktive Tools, Games, VDI-Doku, ein interner Admin-Bereich und mehrere
Standalone-Seiten. Das Problem ist nicht die Technik, sondern **Kohärenz**: Es gibt zwei Gesichter
(poliertes Portfolio vs. wild gewachsene Werkzeug-/Lernsammlung), ein nur im Layout inline
gepflegtes Designsystem und keine durchgängige Erlebnis- bzw. Navigationslogik.

Dieser Plan macht daraus **eine** zusammenhängende, hochwertige Marke mit einem konsistenten
Glassmorphism-Designsystem, einer globalen, performanten 3D-Szene und einer klaren
Informationsarchitektur, die jede einzelne der 120 Seiten sinnvoll aufnimmt — vom Hero bis zum
Fehler-Screen. Umgesetzt wird zentral über **Layout + Design-Tokens + Komponentenbibliothek**,
damit eine Änderung automatisch auf alle Seiten durchschlägt.

**Leitprinzip:** *Wow durch Tiefe, Licht und Bewegung — aber niemals auf Kosten von Lesbarkeit,
Ladezeit oder Barrierefreiheit.* Glas und 3D sind Atmosphäre, nicht Selbstzweck.

---

## 2. Analyse des Ist-Zustands

### 2.1 Technische Basis
- **Framework:** Yii2 Advanced Template. Frontend unter `frontend/`.
- **Routing:** Ein zentraler `SiteController.php` mit ~120 `actionX() → render('x')`-Methoden.
- **Layout:** `frontend/views/layouts/main.php` enthält das gesamte Designsystem **inline** als
  `<style>`-Block (CSS-Variablen, Hell/Dunkel-Theme, Header, Footer, Cards, Buttons,
  reveal-on-scroll via IntersectionObserver).
- **Assets:** `AppAsset.php` lädt nur `css/site.css` (Reste vom Yii-Default + Bootstrap-Overrides).
  **Kein** zentrales JS, **keine** 3D-Bibliothek.
- **Theme:** Hell/Dunkel bereits vorhanden (CSS-Variablen + `localStorage`-Toggle).
- **Schriften:** Inter (Google Fonts).

### 2.2 Bestandsaufnahme der 120 Views (Gruppierung)

| # | Gruppe | Umfang | Beispiele |
|---|--------|--------|-----------|
| A | **Öffentliches Portfolio** | ~11 | `index`, `projekte`, `projekt-detail`, `arbeiten`, `about`, `wissen-blog`, `contact`, `kontakte`, `impressum`, `datenschutz`, `seitenarchiv` |
| B | **Wissenstests** | ~20 | `wissenstestsql`, `wissenstestnosql`, `wissenstestip1–4`, `wissenstestdvdi*`, `wissenstestraes`, `wissennstestabwl`, `wissenstestdsm`, `wissenstestm`, `wissenstestipm`, `wissenstestits`, `wissenstestsql1`, `wissenstestsqlm` |
| C | **Studium / Lernen** | ~20 | `uni`, `studieninfo`, `wissenssammlung(dvdi)`, `dbgrundlagen`, `stundenplan`, `essensplan`, `lernkarten`, `bwlmenu`, `bwlp`, `bwlvorbereitung`, `unternehmensbesteuerung`, `mathemenu`, `produktlebenyzyklus`, `extended`, `vergleich` |
| D | **Tools / Interaktiv** | ~18 | `tools`, `wordtopdf`, `pwm`, `paste`, `codesammlung`, `materialdb`, `arbeitszeit`, `prufungsplaner`, `trip-planner`, `planer`, `dayplanner`, `vacationplanner`, `schmitttrigger`, `fft`, `pt2`, `zeigerpaar`, `steuerung` |
| E | **Games** | ~9 | `games`, `testgame1`, `zahlenraten`, `brainrotquiz`, `greenhell` (+ `greenhellkarten/craft/pflanzen/krankheiten/tiere`), `resqlife` |
| F | **VDI** | 3 | `vdi`, `vdiregeln`, `vdiprojekt` |
| G | **Intern / Admin** (Login, User-ID 1) | ~15 | `admin`, `benutzer`, `manageselektions`, `manage-sections`, `notizen`, `stats`, `verwaltung`, `image-upload`, `3dw_pass`, `3dw_secure`, `decrypt_relationships`, `resourcemanagement`, `rm`, `datenserver`, `hypervubuntuaufloesungfix` |
| H | **Auth** | ~5 | `login`, `signup`, `requestPasswordResetToken`, `resetPassword`, `resendVerificationEmail` |
| I | **Standalone** (`$this->layout = false`) | ~14 | `resqlife`, `schmitttrigger`, `fft`, `mathemenu`, `pt2`, `zeigerpaar`, `lernkarten`, `lerncrew`, `lerncrewimpressum`, `bildervorlage`, `kartgalerie`, `brainrotquiz`, `greenhell`, `planer` |
| J | **System / Sonstiges** | ~10 | `error`, `error403`, `error404`, `testpage`, `mail-test`, `winserver2025eva2standard`, `iso`, `norma`, `links`, `inarbeit`, `butten`, `ragtechnik`, `chat`, `webanwendungen`, `phpbaukasten`, `kwept1/2`, `zertifikate` |

> Hinweis: Einige Seiten überschneiden sich (z. B. zählt `planer` zu D **und** I). Die Zahlen sind
> Richtwerte zur Aufwandsschätzung.

### 2.3 Hauptprobleme
1. **Doppelte Identität:** Poliertes Portfolio vs. private Werkzeug-/Lernsammlung wirken wie zwei
   Websites.
2. **Designsystem im Layout eingemauert** → schwer wartbar, nicht wiederverwendbar, kein JS-Hook
   für Animationen.
3. **14 Standalone-Seiten** (`layout = false`) hängen komplett außerhalb des Designsystems → größte
   Inkonsistenz-Quelle.
4. **Keine echte Informationsarchitektur:** Navigation kennt 5 Punkte, aber es existieren 120
   Seiten. Das `seitenarchiv` ist der einzige Sammelpunkt und unvollständig.
5. **Kein Motion-/3D-Layer** vorhanden.

---

## 3. Markenneupositionierung (Neustart)

> Du hast „komplett neu positionieren" gewählt. Die finale **Namenswahl braucht deine Freigabe**
> (§12). Hier die strategische Richtung + drei Namensoptionen.

### 3.1 Positionierungs-Idee
Statt „Portfolio einer Person" → **„Digitale Werkstatt / Engineering-Lab"**: ein Ort, an dem
sichtbar wird, *wie* gearbeitet, gebaut, gelernt und experimentiert wird. Das verbindet beide
Gesichter unter einem Dach: ernsthafte Projekte **und** die lebendige Tool-/Wissens-/Spiel-Welt
werden zur **Stärke** („so denke und arbeite ich"), nicht zum Bruch.

**Markenversprechen:** *„Systeme, Werkzeuge und Wissen — sauber gebaut, klar erklärt, schön gemacht."*

**Tonalität:** technisch-präzise, ruhig-selbstbewusst, ein Hauch Neugier/Spieltrieb. Deutsch primär.

### 3.2 Namensoptionen (zur Auswahl)
| Option | Wortmarke | Charakter |
|--------|-----------|-----------|
| **A (Empfehlung)** | **Kotsch Lab** / `kotsch.lab` | Werkstatt-/Labor-Gefühl, deckt Projekte + Tools + Experimente ab |
| B | **Atelier Kotsch** | kreativ-handwerklich, edel, weniger „tech" |
| C | **Kotsch Systems** | seriös-technisch, B2B-nah, weniger verspielt |

Die Wort-/Bildmarke wird als schlankes Logo-Lockup (Wortmarke + optional 3D-„Glas-Monogramm" K)
umgesetzt; passt zum Glassmorphism-Look.

### 3.3 Auswirkung auf bestehende Inhalte
- Domain & Yii-Routen bleiben (kein Breaking Change). Nur **Markenoberfläche** (Logo, Claims,
  Navigation, Footer, Meta-Titel) wird neu.
- `Kotsch.Works`-Texte in `main.php`, `index.php`, Footer, Meta-Tags werden auf die neue Marke
  umgestellt.

---

## 4. Designsystem — „Soft Depth Glass"

Glassmorphism lebt von **Tiefe (Layern), Licht und Unschärfe**. Damit es professionell statt
billig wirkt, gelten strenge Regeln (abgeleitet aus den UI/UX-Pro-Max-Prioritäten 1, 4, 6).

### 4.1 Design-Tokens (CSS Custom Properties)

Wird in eine echte Datei ausgelagert: `frontend/web/css/tokens.css`.

**Farb-Fundament (Dunkel als Leitmodus, Hell gleichwertig gepflegt):**
```
Dark:
  --bg-base:      #0b0f17   (tiefes Nachtblau, kein reines Schwarz)
  --bg-deep:      #070a11
  --aurora-1:     #6366f1   (Indigo)   – Lichtquelle 1
  --aurora-2:     #22d3ee   (Cyan)     – Lichtquelle 2
  --aurora-3:     #a855f7   (Violett)  – Akzent
  --glass-fill:   rgba(255,255,255,0.06)
  --glass-stroke: rgba(255,255,255,0.14)
  --glass-hi:     rgba(255,255,255,0.22)  (Kantenlicht oben)
  --text:         #f4f7ff
  --text-muted:   #aab4c8   (>= 4.5:1 auf Glas-Fill über --bg-base geprüft)

Light:
  --bg-base:      #eef1f7
  --glass-fill:   rgba(255,255,255,0.55)
  --glass-stroke: rgba(255,255,255,0.85)
  --text:         #0e1320
  --text-muted:   #46506a
```

**Geometrie / Effekte:**
```
--radius-card: 20px;  --radius-pill: 999px;  --radius-sm: 12px;
--blur-glass: 18px;   --blur-strong: 30px;
--shadow-glass: 0 8px 32px rgba(2,6,23,.37);
--shadow-lift:  0 20px 60px rgba(2,6,23,.45);
--spring: cubic-bezier(.22,1,.36,1);   /* enter */
--ease-out: cubic-bezier(.16,1,.3,1);
```

**Spacing:** strikt 4/8-px-Skala (4,8,12,16,24,32,48,64,96).
**Typo-Skala:** 12·14·16·18·22·28·36·48·64 (clamp für fluid). Body 16px min.

### 4.2 Schrift
- **Headlines:** „Space Grotesk" (technisch, charaktervoll) **oder** „Sora".
- **Body/UI:** Inter (bleibt — bewährt, lädt schon).
- `font-display: swap`, nur die zwei Familien preloaden.

### 4.3 Glas-Komponentenbibliothek (`components.css`)
Wiederverwendbare Klassen, damit **jede** Seite konsistent wird:
- `.glass` — Basis-Panel (fill + stroke + blur + Kantenlicht via `::before`-Gradient).
- `.glass-card`, `.glass-nav`, `.glass-pill`, `.glass-input`, `.glass-modal`, `.glass-table`.
- `.btn`, `.btn-primary` (Aurora-Gradient), `.btn-ghost`.
- `.elev-1/2/3` — konsistente Tiefen-/Schattenstufen.
- `.kicker`, `.lead`, `.section` — Typografie-/Layout-Helfer (aus heutigem Layout übernommen).

> **Profi-Regeln für Glas (Pflicht):**
> 1. Hinter jedem Glas **muss** genug Kontrast/Backdrop liegen → Text immer ≥ 4.5:1 (auf realen
>    Hintergründen testen, nicht nur auf Mockup).
> 2. `backdrop-filter` mit `@supports`-Fallback (massiver Fill statt Blur, wenn nicht unterstützt).
> 3. Borders/Dividers in **beiden** Themes sichtbar.
> 4. Max. 2–3 Glas-Ebenen übereinander, sonst „Matsch".

### 4.4 Icons & Bilder
- Einheitliches SVG-Set (Lucide). **Keine Emojis** als Icons.
- Bilder als WebP/AVIF, `width/height` gesetzt (kein Layout-Shift).

---

## 5. 3D- & Motion-System (global)

Du willst **global**: dezente animierte 3D-Szene auf allen öffentlichen Seiten. Umsetzung so, dass
es überall gleich aussieht, aber **eine** Codebasis ist und Performance/Akku schützt.

### 5.1 Architektur
- **Ein einziger, globaler `<canvas id="scene">`** im Layout, `position:fixed; inset:0; z-index:-1;
  pointer-events:none;` — liegt hinter dem Glas-Content. So „schwebt" der gesamte Glas-Content über
  einer lebendigen Tiefe (genau der Soft-Depth-Effekt).
- Initialisiert von einem Asset-Modul `scene.js`, **asynchron** geladen (defer), nach `first paint`.

### 5.2 Technik-Stack
- **Three.js (r16x)** für die WebGL-Szene. Szene = langsam driftende, weichgezeichnete
  „Aurora-Blobs" / Partikelfeld / leichtes Low-Poly-Mesh in den Markenfarben. Bewusst **ruhig**
  (Atmosphäre, kein Flacker-Feuerwerk).
- **GSAP + ScrollTrigger** für scroll-getriebene Reveals, Parallax der Glas-Layer, Hero-Intro.
- **Lenis** für sanftes „smooth scroll" (gibt dem Glas/Parallax den Premium-Flow).
- Optional pro Seite: leichte **Tilt-/Pointer-Parallax** der Hero-Karten (Maus/Gyro), gedrosselt.

### 5.3 Performance-Budget (verbindlich)
- Three.js + GSAP + Lenis nur **einmal** gebündelt, async, code-split. Ziel: < 90 KB gz für den
  Motion-Layer; Three.js tree-shaken (nur benötigte Module).
- Renderer: `powerPreference:'high-performance'`, `pixelRatio` auf max 1.5 begrenzt,
  Frame-Throttle, **`requestAnimationFrame` pausiert bei `document.hidden`** und wenn Canvas
  außerhalb Viewport.
- Ziel-Metriken: LCP < 2.5 s, CLS < 0.1, INP < 200 ms, 60 fps Desktop / 30 fps+ Mobil.

### 5.4 Fallbacks & Barrierefreiheit (kritisch, UI/UX-Prio 1 & 7)
- **`prefers-reduced-motion: reduce`** → 3D-Szene wird **nicht** animiert; statt dessen ein
  statischer, schöner CSS-Aurora-Gradient. Alle GSAP-Reveals fallen auf „sofort sichtbar" zurück.
- **Mobil / Low-Power / `deviceMemory` niedrig / kein WebGL** → automatisch CSS-Gradient-Fallback
  statt Canvas (Akku & Datenvolumen schonen). Erkennung via Feature-/Heuristik-Check.
- Inhalt ist **nie** von der Animation abhängig (Text/Funktion stehen ohne JS).

### 5.5 Motion-Sprache
- Eintritt 220–320 ms (`--spring`), Austritt ~60–70 % davon. Nur `transform`/`opacity` animieren.
- Listen/Grids: Stagger 30–50 ms. Max. 1–2 „Held"-Animationen pro View.

---

## 6. Neue Informationsarchitektur (IA)

Ziel: 120 Seiten in eine klare, mehrschichtige Struktur bringen. Niemand sieht 120 Links —
sondern wenige starke Einstiege mit dahinterliegenden Hubs.

### 6.1 Top-Navigation (öffentlich, max. 6)
```
[Logo]   Projekte   ·   Lab   ·   Wissen   ·   Spielwiese   ·   Über   ·   Kontakt     [◐ Theme]
```

### 6.2 Hub-Logik (jede Sektion = Landing/Hub mit Glas-Kacheln)
| Hub | Sammelt Gruppen | Inhalt |
|-----|------------------|--------|
| **Projekte** | A | Portfolio-Projekte (`_projectData.php`), Projekt-Detailseiten, „Arbeiten", VDI-Projekt, Win-Server-/Tech-Doku als Case-Studies |
| **Lab** (Tools) | D + F | Interaktive Werkzeuge & Rechner: WordToPDF, Paste, Codesammlung, Materialdatenbank, Planer-Familie, Signalverarbeitung (FFT, Schmitt-Trigger, PT2, Zeigerpaar), VDI-Regeln |
| **Wissen** | B + C | Studien-Hub, Wissenssammlungen, **alle Wissenstests** (als einheitliche „Quiz-Engine"-Optik), DB-Grundlagen, BWL, Mathe-Menü |
| **Spielwiese** | E | Games-Hub: Zahlenraten, Quizze, GreenHell-Guide (+ Unterseiten), ResQLife |
| **Über / Kontakt** | A | Person, Positionierung, Kontaktformular, Impressum, Datenschutz |
| **Archiv** | J + Rest | Vollständige, durchsuchbare Liste **aller** öffentlichen Seiten (Ersatz/Ausbau von `seitenarchiv`) → garantiert, dass *jede* Seite erreichbar bleibt |
| **Intern** | G + H | Login-geschützter Bereich (Admin/Dashboards/Notizen/Stats) — eigenes, ruhigeres Glas-Cockpit-Layout |

### 6.3 Garantie „jede Seite wieder eingebunden"
- Jede der 120 Views wird genau einem Hub **und** dem **Archiv** zugeordnet (Mapping-Tabelle wird
  in Phase 1 als `frontend/views/site/_siteMap.php` angelegt — Single Source für Navigation,
  Archiv & Footer).
- Standalone-Seiten (Gruppe I) werden zurück ins Layout geholt (siehe §7.3) oder erhalten ein
  **schlankes Glas-Standalone-Layout**, damit auch sie zur Marke gehören.

---

## 7. Technische Architektur der Umsetzung

### 7.1 Asset-Pipeline neu (zentral steuerbar)
Designsystem **raus aus dem Layout**, rein in echte Dateien:
```
frontend/web/css/tokens.css        → Farben, Spacing, Radius, Blur, Schatten (Light/Dark)
frontend/web/css/components.css     → Glas-Komponenten, Buttons, Layout-Helfer
frontend/web/css/site.css           → seitenspezifische Reste / Overrides
frontend/web/js/scene.js            → globale Three.js-Szene + Fallbacks
frontend/web/js/motion.js           → GSAP/Lenis-Init, Reveals, Parallax, Theme-Toggle, Menü
```
`AppAsset.php` lädt diese gebündelt; 3D-Bundle via Code-Splitting/async. Reduced-Motion- und
Low-Power-Checks **vor** dem Laden von Three.js.

### 7.2 Layout-Refactor
- `layouts/main.php`: Inline-`<style>` entfernen → Klassen aus `components.css`. Header/Footer auf
  neue Marke + neue Navigation (`_siteMap.php`) umstellen. Globaler `<canvas>` + Skip-Link +
  korrekte ARIA.
- **Neues `layouts/app.php`** (schlankes Glas-Layout) für Tools/Standalone, die volle Breite oder
  weniger „Marketing-Chrome" brauchen — teilt sich aber Tokens & Glas-Look.
- **`layouts/intern.php`** (Cockpit) für den Admin-Bereich.

### 7.3 Standalone-Seiten zurückholen (Gruppe I)
Pro Seite entscheiden:
- **Reintegrieren** in `app.php`-Layout, wenn der Inhalt das verträgt (die meisten: `mathemenu`,
  `lerncrew*`, `kartgalerie`, `bildervorlage`).
- **Eigene Vollbild-Erfahrung behalten**, aber mit Marken-Token-Datei + „Zurück"-Glas-Pill, wenn es
  bewusst immersiv ist (`greenhell`, `resqlife`, `brainrotquiz`, `planer`).

### 7.4 Komponenten-Wiederverwendung
- Eine **Quiz-Engine-Optik** (eine CSS/JS-Partial) für alle ~20 Wissenstests → einmal bauen, 20×
  anwenden. Riesiger Konsistenz- und Aufwandsgewinn.
- Eine **Hub-Kachel-Partial** (`_hubGrid.php`) für alle Landing-Hubs.
- Wiederverwendbare `_glassCard`, `_pageHeader`, `_breadcrumb` Partials.

### 7.5 Kein Daten-/Funktionsbruch
- Controller-Routen, Models, Formulare, Auth, DB-Logik (Planer, Sektionen, Stats, Image-Upload)
  bleiben **unverändert**. Redesign ist View-/Asset-Layer. Funktion zuerst, Politur danach.

---

## 8. Seitengruppen — konkrete Behandlung

| Gruppe | Behandlung | Layout |
|--------|-----------|--------|
| A Portfolio | Komplett neu: immersiver Hero (3D), Glas-Projektkacheln, Case-Study-Detailseiten, neuer About-/Kontakt-Flow | `main` |
| B Wissenstests | Einheitliche Glas-Quiz-Engine (Fortschritt, Karten, Auswertung), gemeinsamer Wissens-Hub | `app` |
| C Studium | Glas-Hub + Listen/Akkordeons, klare Lese-Typografie | `app` |
| D Tools | Glas-Tool-Shell (Eingaben links, Ergebnis rechts), Chart.js für Signal-Tools | `app` |
| E Games | Verspielter Glas-Look, mehr Bewegung erlaubt, Game-Hub | `app`/standalone |
| F VDI | In „Lab"/„Projekte" integriert, Doku-Layout | `app` |
| G Intern | Ruhiges Cockpit, Daten-dichte Glas-Tabellen, keine schweren 3D-Effekte | `intern` |
| H Auth | Zentrierte Glas-Login-Karte über Aurora-Hintergrund | `app` |
| I Standalone | Reintegrieren oder Marken-Token + Zurück-Pill (siehe §7.3) | `app`/standalone |
| J System | Schöne 404/403/Error mit 3D-Hintergrund; Archiv als vollständiger Index | `main`/`app` |

---

## 9. Performance & Barrierefreiheit (Qualitäts-Gate)

Vor „fertig" muss jede Phase diese Checks bestehen (UI/UX-Pro-Max Prio 1–3, 7):
- [ ] **Kontrast** ≥ 4.5:1 für Text auf Glas — in **beiden** Themes, auf realem Hintergrund.
- [ ] **`prefers-reduced-motion`** respektiert (3D aus, Reveals sofort).
- [ ] **Tastatur**: Fokus-Ringe sichtbar, Tab-Reihenfolge logisch, Skip-Link, Modals mit Escape.
- [ ] **Touch-Targets** ≥ 44×44 px, 8 px Abstand.
- [ ] **CLS < 0.1** (Bildmaße/Aspect-Ratio gesetzt, Glas reserviert Platz).
- [ ] **LCP < 2.5 s**: 3D lädt nach Inhalt, Fonts `swap`, Critical CSS inline.
- [ ] **Mobil 375 px** + Querformat geprüft, kein horizontaler Scroll.
- [ ] **Low-Power/kein WebGL** → CSS-Gradient-Fallback greift.
- [ ] `color-not-only`: Status/Feedback nie nur über Farbe.

---

## 10. Umsetzungs-Fahrplan (Phasen)

> Empfehlung: Phasenweise mergen. Nach jeder Phase ist die Seite **lauffähig** und schöner — kein
> „Big Bang".

**Phase 0 — Fundament & Freigabe (Setup)**
- Markenname/Logo final (§12), Schriftwahl, Token-Werte fixieren.
- `tokens.css`, `components.css`, `AppAsset` anlegen; `_siteMap.php` (Mapping aller 120 Seiten).

**Phase 1 — Layout & Designsystem global**
- `main.php` refactoren (Tokens/Komponenten, neue Marke, neue Navigation, globaler Canvas).
- `app.php` + `intern.php` Layouts. Glas-Komponentenbibliothek steht.
- *Ergebnis:* Alle Seiten, die das Layout nutzen, sehen sofort neu & konsistent aus.

**Phase 2 — 3D & Motion-Layer**
- `scene.js` (Three.js Aurora-Szene) + `motion.js` (GSAP/Lenis/Reveals/Parallax) + alle Fallbacks.
- Performance-Budget verifizieren (Lighthouse, echtes Mobilgerät).

**Phase 3 — Öffentliches Portfolio (Gruppe A)**
- Neuer Hero, Projekte-Hub, Projekt-Detail, Über, Kontakt, Archiv (vollständiger Index).

**Phase 4 — Hubs & Engines (B, C, D, E, F)**
- Quiz-Engine (alle Wissenstests), Lab-/Wissen-/Spielwiese-Hubs, Tool-Shell, Charts.

**Phase 5 — Standalone-Reintegration (Gruppe I) + System (J)**
- Standalone-Seiten ins `app`-Layout / Marken-Token; 404/403/Error neu.

**Phase 6 — Intern & Auth (G, H)**
- Cockpit-Layout, Glas-Tabellen, Login-/Signup-Karten.

**Phase 7 — Politur & QA**
- Vollständiger A11y-/Performance-Pass, Cross-Browser, Reduced-Motion, Mobil, Korrekturschleife.

---

## 11. Risiken & Gegenmaßnahmen

| Risiko | Gegenmaßnahme |
|--------|---------------|
| **Glas + Kontrast** → schlecht lesbar | Strenge Kontrast-Gates (§9), getestet auf realem Hintergrund je Theme |
| **3D frisst Akku/FPS, v. a. mobil** | Canvas-Pause bei `hidden`/Off-Screen, pixelRatio-Cap, Low-Power-Fallback, async Laden |
| **120 Seiten = großer Umfang** | Zentrales Token/Komponenten-System + wiederverwendbare Engines (Quiz/Hub) → 1× bauen, vielfach nutzen |
| **Standalone-Seiten brechen aus** | Klare Reintegrations-Regel (§7.3), Token-Datei auch dort |
| **Funktion bricht beim Redesign** | View-/Asset-Layer only; Controller/Models/DB unangetastet; Phase-für-Phase testbar |
| **`backdrop-filter`-Support** | `@supports`-Fallback (Solid-Fill) |
| **SEO/Meta beim Rebrand** | Titel/OG/Canonical zentral in `main.php` pflegen; Routen bleiben → keine toten Links |

---

## 12. Offene Entscheidungen (Freigabe nötig, bevor Phase 0 startet)

1. **Markenname** — A „Kotsch Lab" (Empfehlung), B „Atelier Kotsch", C „Kotsch Systems" oder eigener.
2. **Leitmodus** — Dunkel als Default (empfohlen für Glas/3D) oder Hell als Default? (beide bleiben verfügbar)
3. **Headline-Schrift** — Space Grotesk (empfohlen) vs. Sora.
4. **3D-Motiv** — weiche Aurora-Blobs (empfohlen, ruhig & edel) vs. Partikelfeld vs. Low-Poly-Mesh.
5. **Reihenfolge** — mit Phase 1 (globales Layout, sofort überall sichtbar) starten? (empfohlen)

---

*Nächster Schritt nach Freigabe: Phase 0 — Tokens, Komponenten-Grundgerüst und das vollständige
`_siteMap.php`-Mapping aller 120 Seiten anlegen.*