diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e43b0f9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/DESIGN.md b/DESIGN.md
new file mode 100644
index 0000000..728ca00
--- /dev/null
+++ b/DESIGN.md
@@ -0,0 +1,248 @@
+# CANCOM HTML Deck — Design System
+
+Verbindliche Grundlage für alle HTML-Präsentationen im CANCOM-Look.
+Referenz-Implementierung: `cancom-html-vs-pptx-v7.html`
+Ausgebautes Praxisbeispiel (36 Slides, Kapitel-Trenner, Mitmach-Spiel, Begriffs-Tooltips,
+Präsentations-Konfigurator, Ambient-Sound): `ki-verstehen.html` + `config.html` + `slides-manifest.js`
+Startpunkt für neue Decks: `deck-template.html`
+Copy-Paste-Bausteine: `PATTERNS.md`
+
+---
+
+## 1. Grundprinzipien
+
+1. **Ein File.** Kein Build, kein Bundler, keine Node-Dependencies. HTML + CSS + JS in einer Datei, per Doppelklick lauffähig, per Mail/Teams/SharePoint verteilbar. Einzige externe Abhängigkeit: die Fonts von Fontshare (mit lokalem Fallback).
+2. **Feste Bühne, skaliert.** Jede Slide ist exakt 1920×1080 px. Nichts wird responsiv umgebrochen — die gesamte Bühne wird per `transform: scale()` in den Viewport gerechnet. Dadurch sieht das Deck auf jedem Screen und jedem Beamer pixelidentisch aus.
+3. **Design in Tokens.** Farben, Fonts, Easings stehen ausschließlich in `:root`. Keine Hex-Codes im Slide-Markup. Ein neues Kunden-Theme = neue Token-Werte, kein Umbau.
+4. **Animation ist Argument.** Das Deck ist ein Beweis dafür, dass HTML mehr kann als PPTX. Jede Slide sollte mindestens eine Sache tun, die eine PowerPoint-Folie nicht kann — Live-Daten, echte Interaktion, GPU-Animation.
+5. **Ehrlichkeit im Ton.** Deutsch, direkt, kein Marketing-Sprech. Headlines sind kurze Sätze mit Punkt am Ende („PPTX ist Vergangenheit."), nicht Substantiv-Ketten.
+
+---
+
+## 2. Farb-Tokens
+
+| Token | Wert | Verwendung |
+|---|---|---|
+| `--cancom-red` | `#E4002B` | Signalfarbe. Akzente, Zahlen, Eyebrows, genau **ein** Highlight pro Headline |
+| `--cancom-red-glow` | `rgba(228,0,43,0.55)` | `box-shadow` / `text-shadow` Glow |
+| `--cancom-red-dim` | `rgba(228,0,43,0.15)` | Flächige Rot-Hinterlegung, Hover-Auras |
+| `--ink` | `#0A0A0F` | Standard-Slide-Hintergrund |
+| `--ink-soft` | `#14141C` | Erhöhte Flächen, Hover-States |
+| `--ink-line` | `#23232E` | Alle Rahmen und Trennlinien |
+| `--paper` | `#F5F5F2` | Primärtext auf Dunkel, Hintergrund der Closing-Slide |
+| `--paper-dim` | `rgba(245,245,242,0.6)` | Fließtext, Lead-Absätze |
+| `--paper-mute` | `rgba(245,245,242,0.35)` | Labels, Slide-Nummern, HUD |
+| `--accent-cool` | `#4CC9F0` | Zweitfarbe in Charts und Code-Highlighting |
+| `--accent-warm` | `#FFB627` | Drittfarbe, Flash-States |
+
+**Regeln**
+
+- Rot ist Signal, nicht Dekoration. Pro Slide maximal ein rotes Wort in der Headline.
+- Rot nie als große Textfläche — nur Headline-Akzente, Zahlen, Linien, Glows.
+- Semantische Ausnahmen sind erlaubt und stehen bewusst außerhalb der Marke: `#4ade80` (grün, Kurs steigt) und `#ff5060` (hellrot, Kurs fällt).
+- Die Closing-Slide dreht das Schema um: `--paper` als Hintergrund, `--ink` als Text. Das ist der einzige helle Slide — er markiert das Ende.
+
+---
+
+## 3. Typografie
+
+Drei Schriften, drei klar getrennte Jobs:
+
+| Token | Font | Job |
+|---|---|---|
+| `--font-display` | General Sans (700/600/500) | Alle Headlines, Zahlen, Buttons, Brand-Marks |
+| `--font-body` | Satoshi (700/500/400) | Fließtext, Lead-Absätze, Listen |
+| `--font-mono` | JetBrains Mono (700/500/400) | Eyebrows, Labels, HUD, Code, alles Technische |
+
+### Type-Scale (bei 1920×1080)
+
+| Rolle | Größe | Line-Height | Letter-Spacing |
+|---|---|---|---|
+| Title-Headline | 220 px | 0.88 | −0.045em |
+| Closing-Headline | 240 px | 0.86 | −0.045em |
+| Counter-Value | 220 px | 0.90 | −0.05em |
+| Slide-Title | 112 px (eng: 92 px) | 0.94 | −0.035em |
+| Versus-Headline | 100 px | 0.92 | −0.035em |
+| Card-Title | 42 px | 1.05 | −0.02em |
+| Lead-Absatz | 30 px (eng: 22–24 px) | 1.4 | normal |
+| Body / Listen | 20–24 px | 1.4–1.5 | normal |
+| Eyebrow / Label | 14–18 px | — | 0.14em–0.3em, uppercase |
+
+**Regeln**
+
+- Je größer die Schrift, desto negativer das Tracking und desto enger die Line-Height. Große Display-Typo braucht optischen Zusammenzug.
+- Mono ist **immer** uppercase mit weitem Tracking (≥ 0.14em). Es ist die „Maschinen-Stimme" des Decks.
+- Body-Text nie über 1300–1500 px Breite (`max-width` am `.slide-lead`).
+- Headlines brechen manuell per ` `. Der Zeilenumbruch ist Gestaltung, nicht Zufall.
+- Zahlen, die sich live ändern, brauchen `font-variant-numeric: tabular-nums`, sonst springt das Layout.
+
+**Schriftwahl:** Ursprünglich stand hier Clash Display. Bei sehr engem Tracking und großen
+Displaygrößen (Zahlen, Zwei-Wort-Headlines) wurde die Schrift auf Distanz schwerer lesbar —
+enge, kantige Formen laufen bei Beamer-Projektion schnell zusammen. **General Sans** ersetzt sie:
+gleiche Bühnengröße und Gewichtsstufen (500/600/700), aber offenere Punzen (a, e, s) und eine
+größere x-Höhe, die auch bei −0.04em Tracking klar bleibt. Fließtext (Satoshi) und Mono
+(JetBrains Mono) sind unverändert. Beim Schriftwechsel testen: `font-vorschau.html` zeigt
+Kandidaten direkt in Deck-Größe (92 px / 40 px) nebeneinander, bevor man sich festlegt.
+
+---
+
+## 4. Layout
+
+### Die Bühne
+
+```
+.deck-viewport → fixed, füllt das Browserfenster, schwarz, overflow hidden
+ .deck-stage → 1920×1080, transform-origin 0 0, wird per JS skaliert + zentriert
+ .slide → absolute inset 0, 1920×1080, default unsichtbar
+```
+
+Der Scale-Faktor ist `Math.min(innerWidth/1920, innerHeight/1080)`, der Rest wird als Letterbox zentriert. **Diese Struktur ist nicht optional** — sie ist der Grund, warum das Deck überall gleich aussieht.
+
+### Grid & Spacing
+
+- **Slide-Padding:** 100 px oben/unten, 120 px links/rechts (`.slide-content`). Title- und Closing-Slide: 120 px rundum.
+- **Spacing-Rhythmus:** Vielfache von 4, praktisch 8/12/16/20/24/32/44/60. Kein 13, kein 27.
+- **Gap in Grids:** 20 px (dichte Feature-Tiles), 32 px (Cards), 60 px (Spalten-Splits).
+- Content-Bereiche nutzen `flex: 1`, damit sie den Rest der Höhe füllen. Bei Grids mit fester Zeilenzahl zusätzlich `min-height: 0`, sonst sprengt Inhalt die Slide-Höhe.
+
+### Layout-Archetypen
+
+| Klasse | Struktur | Wofür |
+|---|---|---|
+| `.title-slide` | Space-between, 3 Zonen (Topbar / Headline / Meta) + Canvas-Layer | Slide 1 |
+| `.slide-content` | Eyebrow → Titel → Lead → Content-Block | Der Standard-Slide, 80 % aller Fälle |
+| `.versus` | 2 Spalten randlos + zentraler VS-Kreis | Direktvergleich, Vorher/Nachher |
+| `.counter-grid` | 3 Spalten, große animierte Zahlen | Kennzahlen |
+| `.code-slide` | Text links, Code-Window + Live-Preview rechts | Beweis-Slides |
+| `.feature-grid` | 4×2 Tiles, `.wide` = span 2 | Feature-Showcase |
+| `.closing-slide` | Hell, Space-between, Blur-Blob | Letzter Slide |
+| `.section-slide` | Dunkel, zentriert, riesige „Geister-Zahl" im Hintergrund | Kapitel-Trenner bei Themenwechsel |
+| `.game-wrap` | Satz/Lücke + Options-Buttons, JS-gesteuert | Mitmach-Slides (Publikum rät mit) |
+
+Die Slide-Nummer kommt automatisch aus `data-num="04 / 10"` am `.slide-content` (gerendert per `::before`). Sie muss beim Umbau des Decks von Hand nachgezogen werden. `.section-slide`, `.versus`, `.code-slide`, Title- und Closing-Slide tragen bewusst **kein** `data-num` — sie zählen als „Zwischenspiel", nicht als nummerierter Inhaltspunkt.
+
+### Kapitel-Trenner (`.section-slide`)
+
+Bei mehr als ~5–6 Slides pro Thema lohnt sich ein eigener Trenner-Slide vor jedem Themenwechsel — er gibt dem Publikum eine Atempause und macht die Dramaturgie sichtbar. Aufbau: riesige, transparente Zahl mit Outline (`-webkit-text-stroke`) im Hintergrund, davor ein roter Mono-Kicker („Kapitel 03 / 07") und eine kurze, große Headline plus ein Satz Unterzeile. Siehe `PATTERNS.md` Nr. 7 für den Code.
+
+Faustregel: ein Trenner pro inhaltlichem Kapitel, nicht pro Slide. Bei 30+ Slides sind 6–8 Trenner ein guter Rhythmus — mehr wirkt zerhackt, weniger verliert die Orientierung.
+
+---
+
+## 5. Motion
+
+### Reveal-System
+
+Elemente mit `.reveal` starten bei `opacity: 0; translateY(40px)` und fahren ein, sobald die Slide `.visible` bekommt. Die Staffelung läuft über `.d1`–`.d7` (100 ms → 820 ms, Schritte von ~120 ms). `.reveal-slide-x` macht dasselbe horizontal (−60 px), gedacht für die linke Versus-Spalte.
+
+```html
+Das Problem
+
Warum das nervt.
+
…
+
…
+```
+
+**Regel:** Reihenfolge im DOM = Reihenfolge der Delays. Nie `d5` vor `d3` einfahren lassen. Mehrere gleichrangige Karten dürfen sich ein Delay teilen.
+
+### Easings
+
+| Token | Kurve | Wofür |
+|---|---|---|
+| `--ease-out-expo` | `cubic-bezier(0.16, 1, 0.3, 1)` | Standard für alles, was einfährt. Schnell rein, weich aus. |
+| `--ease-swift` | `cubic-bezier(0.65, 0, 0.35, 1)` | Kurze, entschiedene Bewegungen (Durchstreichen) |
+
+### Timings
+
+- Reveal-Einfahrt: **0.9 s**
+- Hover-Feedback: **0.12–0.15 s** (muss sich sofort anfühlen)
+- Chart-Balken: **1.2 s** mit gestaffeltem `transition-delay` von 0.4 s bis 0.9 s
+- Counter-Zählung: **1.6 s**, Easing `1 - (1-p)³`
+- Loops (Blob, Ticker, Cube): **4–12 s**, `linear` oder `ease-in-out`, damit sie nie „getaktet" wirken
+
+### Performance
+
+Animiert werden **nur** `transform` und `opacity` — die laufen auf der GPU. Kein `width`, `height`, `top`, `left` in Transitions. Ausnahme: `.demo-charts-bars` animiert `height`, aber auf 6 winzigen Divs, das ist vertretbar.
+
+`prefers-reduced-motion` ist global verdrahtet: Animationen gehen auf 0.01 ms, Transitions auf 0.2 s. Slides bleiben voll funktionsfähig, nur ohne Show.
+
+---
+
+## 6. Interaktion
+
+| Trigger | Wirkung |
+|---|---|
+| `→`, `Leertaste`, `PageDown` | nächster Slide |
+| `←`, `PageUp` | vorheriger Slide |
+| `Home` / `End` | erster / letzter Slide |
+| Mausrad | Slide-Wechsel, 900 ms Cooldown |
+| Swipe (> 60 px) | Slide-Wechsel auf Touch |
+| `E` | Edit-Modus |
+| `C` | Zum Präsentations-Konfigurator (`config.html`), falls vorhanden |
+| Hotzone oben links | blendet Edit- und Config-Button ein (400 ms Grace-Period) |
+| Klick auf `.term` | öffnet Begriffs-Tooltip |
+
+**Edit-Modus:** Setzt `contenteditable` auf alle Text-Elemente, markiert sie mit rotem Dashed-Outline. Beim Verlassen wird der Stage-HTML in `localStorage` geschrieben. Das Zurückladen ist **absichtlich auskommentiert** — restauriertes HTML kollidiert mit den Animations-States. Der Edit-Modus ist ein Live-Korrektur-Werkzeug für die Bühne („Kunde will hier ein anderes Wort"), keine Persistenz-Schicht.
+
+**Begriffs-Tooltips (`.term`):** Für Laien-Publikum unentbehrlich — Fachbegriffe (Token, LLM, MCP, GPT, ANI/AGI, …) bekommen eine gepunktete rote Unterstreichung plus kleines „?"-Badge. Klick öffnet eine kurze Erklärung. Das Tooltip-Element lebt **außerhalb** der 1920er-Bühne (ein einziges `#globalTooltip`, direkt an `` gehängt, per JS in echten Viewport-Pixeln positioniert) — sonst schneiden `overflow:hidden`-Container wie `.pain-card` oder `.feature-tile` es ab. Es klappt automatisch ober- oder unterhalb des Begriffs aus, je nachdem was im Fenster noch Platz hat, und schließt bei Klick daneben, `Esc`, Resize oder Slide-Wechsel. Siehe `PATTERNS.md` Nr. 8.
+
+**Präsentations-Konfigurator:** Bei Decks mit vielen Slides (Workshop-Varianten, 45/60/90-Minuten-Kürzungen) lohnt sich `config.html` + `slides-manifest.js` statt Slides von Hand zu löschen. Der Konfigurator listet alle Slides gruppiert nach Kapitel mit Checkbox; die Auswahl wird beim Wechsel zur Präsentation als `?slides=1,4,5,…`-Parameter an die Deck-URL gehängt (nicht nur `localStorage` — das wird zwischen einzelnen `file://`-Dateien nicht überall geteilt, vor allem Safari trennt es strikt). Titel- und Closing-Slide sind im Manifest als `locked: true` markiert und immer aktiv. Siehe `PATTERNS.md` Nr. 11.
+
+**Ambient-Sound (optional, nur Titelfolie):** Ein per Web Audio API erzeugter Klangteppich (kein externes Audio-File) kann vor Vortragsbeginn Spannung aufbauen. Läuft nur, während die Titelfolie aktiv ist, blendet beim Verlassen automatisch aus. Browser blockieren Audio ohne Nutzer-Geste — deshalb immer über einen expliziten Icon-Button starten, nie automatisch. Siehe `PATTERNS.md` Nr. 10.
+
+**Hover-Regel:** Cards heben sich um 4–8 px (`translateY`) und wechseln die Border auf Rot. `.pain-card` zieht zusätzlich eine Radial-Aura hinter dem Cursor her (`--mx`/`--my` per JS gesetzt).
+
+**Wichtig bei Maus-Koordinaten:** Die Bühne ist skaliert. `e.clientX` sind Bildschirm-Pixel, das Element lebt im 1920er-Raum. Immer durch den Scale-Faktor teilen:
+
+```js
+const rect = el.getBoundingClientRect();
+const scale = rect.width / el.offsetWidth;
+const x = (e.clientX - rect.left) / scale;
+```
+
+Bei `.pain-card` fällt das nicht auf, weil dort in Prozent gerechnet wird — beim Ripple des Demo-Buttons schon.
+
+---
+
+## 7. Print / PDF
+
+`@media print` löst die fixe Bühne auf: `.deck-stage` verliert `transform`, jede Slide wird `position: relative` mit `break-after: page`. HUD, Progress-Bar und Edit-Controls verschwinden. Export: **Strg/Cmd+P → Ziel „Als PDF sichern" → Papierformat Querformat, Ränder: keine, Hintergrundgrafiken: an.**
+
+Ergebnis: eine Seite pro Slide. Animierte Inhalte frieren im jeweiligen Endzustand ein — Live-Daten (WebSocket) zeigen den letzten Wert.
+
+---
+
+## 8. Neues Deck bauen
+
+1. `deck-template.html` kopieren und umbenennen.
+2. ``, Brand-Mark, Datum, Sprecher-Name, Kontakt anpassen.
+3. Slides aus `PATTERNS.md` zusammenstellen. Bewährte Dramaturgie:
+ **Titel → Problem → Vergleich → Zahlen → Beweis (Live) → Der ehrliche Deal → Closing.**
+4. `data-num` an allen `.slide-content` auf die neue Gesamtzahl ziehen. Das HUD zählt selbst, `data-num` nicht.
+5. Durchklicken bei 1920×1080 **und** bei kleinem Fenster. Der Scale muss sauber greifen, Text darf nirgends aus einer Card laufen.
+6. Print-Preview prüfen, bevor das Deck rausgeht.
+7. Bei vielen Slides oder mehreren Vortrags-Längen (45/60/90 Min.): `slides-manifest.js` mit der finalen Slide-Liste anlegen (ein Eintrag pro `<section class="slide" data-slide-id="…">`, gleiche Reihenfolge), `config.html` aus dem Beispiel-Projekt kopieren. Damit lässt sich die Slide-Auswahl kuratieren, ohne Markup zu löschen.
+
+### Kunden-Theme
+
+Nur die Tokens in `:root` tauschen: Signalfarbe, ggf. Display-Font. Alles andere bleibt. Wenn die Signalfarbe hell ist (Gelb, Cyan), zusätzlich prüfen: Kontrast von `.demo-button` (weißer Text auf Signalfarbe) und die Glow-Shadows — die brauchen dann weniger Alpha.
+
+---
+
+## 9. Do / Don't
+
+**Do**
+
+- Ein Gedanke pro Slide. Die Headline sagt ihn, alles andere belegt ihn.
+- Große Zahlen groß machen. 220 px ist kein Fehler.
+- Weißraum halten. Die 120 px Padding sind Design, kein Verschnitt.
+- Live-Elemente bekommen immer einen Fallback (siehe WebSocket-Fallback: simuliert Ticks, wenn kein Netz da ist). **Eine Demo, die auf der Bühne offline abstürzt, ist ein Eigentor gegen die eigene These.**
+- Ein Argument pro Slide beweisen statt behaupten.
+
+**Don't**
+
+- Keine Bullet-Point-Listen aus Gewohnheit. Wenn eine Liste, dann mit gestalteten Markern (`×` / `→`).
+- Keine Hex-Codes im Markup. Token benutzen.
+- Kein Scroll innerhalb einer Slide. Passt es nicht, ist es zu viel Inhalt — nicht zu wenig Platz.
+- Keine externen Libraries. Das Deck beweist, dass Vanilla reicht.
+- Kein Rot als Fläche hinter Text.
+- Keine Animation ohne Grund. Jeder Loop, den niemand anschaut, ist verbranntes Budget an Aufmerksamkeit.
diff --git a/PATTERNS.md b/PATTERNS.md
new file mode 100644
index 0000000..4ee3c9d
--- /dev/null
+++ b/PATTERNS.md
@@ -0,0 +1,1010 @@
+# Slide-Patterns — Copy-Paste-Bibliothek
+
+Bausteine für `deck-template.html`. Regeln und Tokens stehen in `DESIGN.md`.
+
+Jedes Pattern sagt an, ob das CSS schon im Template liegt oder mitkopiert werden muss.
+„Mitkopieren" heißt: CSS in den Block `SLIDE-SPEZIFISCHES CSS` am Ende des `<style>`, JS in den Block `SLIDE-SPEZIFISCHES JS` am Ende des `<script>`.
+
+**Inhalt**
+
+1. [Versus-Slide](#1-versus-slide) — CSS im Template
+2. [Code-Slide mit Live-Demo](#2-code-slide-mit-live-demo) — CSS im Template, JS mitkopieren
+3. [SVG-Chart](#3-svg-chart) — CSS mitkopieren
+4. [Feature-Grid mit CSS-Demos](#4-feature-grid-mit-css-demos) — Grid im Template, Demos mitkopieren
+5. [Live-Daten via WebSocket](#5-live-daten-via-websocket) — CSS + JS mitkopieren
+6. [Zwei-Spalten-Abwägung](#6-zwei-spalten-abwägung) — CSS im Template
+7. [Kapitel-Trenner](#7-kapitel-trenner) — CSS mitkopieren
+8. [Begriffs-Tooltip](#8-begriffs-tooltip) — CSS + JS mitkopieren
+9. [Mitmach-Spiel](#9-mitmach-spiel) — CSS + JS mitkopieren
+10. [Ambient-Sound-Button](#10-ambient-sound-button) — CSS + JS mitkopieren
+11. [Präsentations-Konfigurator](#11-präsentations-konfigurator) — eigene Dateien (`config.html` + `slides-manifest.js`)
+
+---
+
+## 1. Versus-Slide
+
+Direktvergleich, randlos, ohne `.slide-content`. Links das Alte (`×`), rechts das Neue (`→`). Beachte: links fährt horizontal ein (`reveal-slide-x`), rechts vertikal mit `d3` — das erzeugt die Bewegung zur Mitte hin.
+
+```html
+<section class="slide">
+ <div class="versus">
+ <div class="versus-side left">
+ <div class="reveal-slide-x">
+ <div class="versus-label">Bisher · [Label]</div>
+ <div class="versus-headline">Kurze<br>Zuspitzung.</div>
+ <ul class="versus-list">
+ <li>Nachteil eins</li>
+ <li>Nachteil zwei</li>
+ <li>Nachteil drei</li>
+ <li>Nachteil vier</li>
+ </ul>
+ </div>
+ </div>
+ <div class="versus-side right">
+ <div class="reveal d3">
+ <div class="versus-label">Jetzt · [Label]</div>
+ <div class="versus-headline">Kurze<br>Antwort.</div>
+ <ul class="versus-list">
+ <li>Vorteil eins</li>
+ <li>Vorteil zwei</li>
+ <li>Vorteil drei</li>
+ <li>Vorteil vier</li>
+ </ul>
+ </div>
+ </div>
+ <div class="versus-vs">VS</div>
+ </div>
+</section>
+```
+
+Max. 4–5 Listenpunkte pro Seite, gleiche Anzahl links und rechts. Ungleiche Spalten sehen aus wie ein Fehler.
+
+---
+
+## 2. Code-Slide mit Live-Demo
+
+Das stärkste Argument des Formats: links die Behauptung, rechts der Code, darunter das laufende Ergebnis. Der gezeigte Code sollte tatsächlich das tun, was die Preview darunter zeigt — sonst ist es ein Mockup, und dann kann man auch PPTX nehmen.
+
+```html
+<section class="slide">
+ <div class="code-slide">
+ <div class="code-left">
+ <span class="slide-eyebrow reveal d1">Live-Demo</span>
+ <h2 class="slide-title reveal d2" style="font-size: 92px;">Der Code<br>ist der <span class="accent">Slide.</span></h2>
+ <p class="slide-lead reveal d3" style="font-size: 24px; margin-bottom: 0;">Rechts steht echtes HTML. Klick auf den Button — der Zähler zählt hoch.</p>
+ </div>
+ <div class="code-right">
+ <div class="code-window reveal d4">
+ <div class="code-tabs">
+ <div class="dots"><span></span><span></span><span></span></div>
+ <span class="filename">slide-demo.html</span>
+ <span class="live">LIVE</span>
+ </div>
+ <div class="code-body">
+<span class="com">// Ein Klick — echter State im Browser</span>
+<span class="kw">const</span> <span class="fn">btn</span> = document.<span class="fn">querySelector</span>(<span class="str">'.btn'</span>);
+<span class="kw">let</span> count = <span class="num">0</span>;
+
+btn.<span class="fn">addEventListener</span>(<span class="str">'click'</span>, () <span class="kw">=></span> {
+ count<span class="kw">++</span>;
+});
+ </div>
+ </div>
+ <div class="code-preview reveal d5">
+ <button class="demo-button" id="demoBtn">Klick mich →</button>
+ <div class="demo-output">Klicks: <span class="count" id="demoCount">0</span></div>
+ </div>
+ </div>
+ </div>
+</section>
+```
+
+**CSS mitkopieren** (die Preview-Ausgabe):
+
+```css
+.demo-output { font-family: var(--font-mono); font-size: 24px; color: var(--paper); }
+.demo-output .count {
+ color: var(--cancom-red);
+ font-family: var(--font-display); font-weight: 700;
+ font-size: 40px;
+ display: inline-block;
+ min-width: 60px; text-align: right;
+ transition: transform 0.3s;
+}
+.demo-output .count.bump { transform: scale(1.3); }
+```
+
+**JS mitkopieren.** Der Ripple rechnet die Mausposition durch den Scale-Faktor der Bühne zurück — ohne das landet er beim skalierten Deck an der falschen Stelle:
+
+```js
+(function() {
+ const btn = document.getElementById('demoBtn');
+ const out = document.getElementById('demoCount');
+ if (!btn || !out) return;
+ let n = 0;
+ btn.addEventListener('click', (e) => {
+ n++;
+ out.textContent = n;
+ out.classList.add('bump');
+ setTimeout(() => out.classList.remove('bump'), 300);
+
+ // clientX/Y sind Bildschirm-Pixel, der Button lebt in der skalierten Bühne
+ const rect = btn.getBoundingClientRect();
+ const scale = rect.width / btn.offsetWidth;
+ const ripple = document.createElement('span');
+ ripple.className = 'ripple';
+ ripple.style.setProperty('--rx', ((e.clientX - rect.left) / scale) + 'px');
+ ripple.style.setProperty('--ry', ((e.clientY - rect.top) / scale) + 'px');
+ btn.appendChild(ripple);
+ setTimeout(() => ripple.remove(), 700);
+ });
+})();
+```
+
+Syntax-Klassen im `.code-body`: `.kw` Keyword · `.fn` Funktion · `.str` String · `.com` Kommentar · `.num` Zahl · `.prop` Property. Einrückung im HTML ist die Einrückung im Code — der Block ist kein `<pre>`, aber `.code-body` erbt Whitespace aus dem Markup, also sauber formatieren.
+
+---
+
+## 3. SVG-Chart
+
+Balken sind `<rect>` mit `transform: scaleY(0)`, die bei `.slide.visible` auf 1 fahren. Die Staffelung kommt aus inline `transition-delay`. Für einen neuen Chart: `y` und `height` so setzen, dass `y + height = 420` (die Achse), sonst schwebt der Balken.
+
+```html
+<div class="chart-wrap">
+ <svg class="chart-svg reveal d3" viewBox="0 0 600 500" preserveAspectRatio="xMidYMid meet">
+ <defs>
+ <linearGradient id="gradGrey" x1="0" x2="0" y1="0" y2="1">
+ <stop offset="0%" stop-color="#5a5a68"/><stop offset="100%" stop-color="#2a2a34"/>
+ </linearGradient>
+ <linearGradient id="gradRed" x1="0" x2="0" y1="0" y2="1">
+ <stop offset="0%" stop-color="#ff5060"/><stop offset="100%" stop-color="#E4002B"/>
+ </linearGradient>
+ </defs>
+
+ <line class="chart-axis" x1="40" y1="420" x2="580" y2="420"/>
+
+ <rect class="chart-bar pptx" x="80" y="120" width="80" height="300" style="transition-delay: 0.4s;"/>
+ <rect class="chart-bar html" x="180" y="80" width="80" height="340" style="transition-delay: 0.5s;"/>
+
+ <text class="chart-label" x="150" y="460">Kategorie</text>
+ <text class="chart-value" x="120" y="105">1×</text>
+ <text class="chart-value red" x="220" y="65">3×</text>
+ </svg>
+ <div class="reveal d4">
+ <p style="font-size: 26px; line-height: 1.5; color: var(--paper-dim); margin-bottom: 8px;">
+ Erklärender Satz zum Chart.
+ </p>
+ <ul class="chart-legend">
+ <li><span class="swatch pptx"></span>Referenz · statisch</li>
+ <li><span class="swatch html"></span>Neu · datengebunden</li>
+ </ul>
+ </div>
+</div>
+```
+
+**CSS mitkopieren:**
+
+```css
+.chart-wrap { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
+.chart-svg { width: 100%; height: 500px; }
+.chart-bar {
+ fill: var(--ink-line);
+ transform-origin: bottom;
+ transform: scaleY(0);
+ transition: transform 1.2s var(--ease-out-expo);
+}
+.slide.visible .chart-bar { transform: scaleY(1); }
+.chart-bar.pptx { fill: url(#gradGrey); }
+.chart-bar.html { fill: url(#gradRed); filter: drop-shadow(0 0 20px var(--cancom-red-glow)); }
+.chart-label {
+ font-family: var(--font-mono); font-size: 14px;
+ fill: var(--paper-mute); letter-spacing: 0.14em; text-transform: uppercase;
+}
+.chart-value { font-family: var(--font-display); font-weight: 700; fill: var(--paper); font-size: 28px; }
+.chart-value.red { fill: var(--cancom-red); }
+.chart-axis { stroke: var(--ink-line); stroke-width: 1; }
+.chart-legend { list-style: none; margin-top: 40px; }
+.chart-legend li {
+ display: flex; align-items: center; gap: 16px;
+ padding: 14px 0;
+ font-size: 22px; color: var(--paper-dim);
+ border-bottom: 1px solid var(--ink-line);
+}
+.chart-legend .swatch { width: 20px; height: 20px; border-radius: 4px; }
+.chart-legend .swatch.pptx { background: #4b4b56; }
+.chart-legend .swatch.html { background: var(--cancom-red); box-shadow: 0 0 12px var(--cancom-red-glow); }
+```
+
+`transform-origin: bottom` funktioniert bei SVG nur zuverlässig, wenn die `<rect>` nicht zusätzlich per `transform`-Attribut verschoben ist. Position immer über `x`/`y` setzen.
+
+---
+
+## 4. Feature-Grid mit CSS-Demos
+
+4×2-Raster, `.wide` überspannt zwei Spalten. Jede Tile: Tag oben, Demo in der Mitte, Name + Beschreibung unten. Das Grid-CSS liegt im Template, die einzelnen Demos kopierst du nach Bedarf.
+
+```html
+<div class="feature-grid">
+ <div class="feature-tile reveal d3">
+ <span class="feature-tag">CSS · Blob</span>
+ <div class="demo-blob"></div>
+ <div>
+ <div class="feature-name">Organische<br>Formen</div>
+ <div class="feature-desc">border-radius animiert. Läuft ewig, kostet nichts.</div>
+ </div>
+ </div>
+ <div class="feature-tile wide reveal d4">
+ <span class="feature-tag">CSS · Ticker</span>
+ <div class="demo-scroll-text"><span>WORT · WORT · WORT · WORT · WORT · WORT · </span></div>
+ <div>
+ <div class="feature-name">Endlos-Ticker</div>
+ <div class="feature-desc">Marquee ohne <marquee>. Nahtlos, mit Fade-Maske.</div>
+ </div>
+ </div>
+</div>
+```
+
+Bei 8 Spalten-Einheiten (4×2) muss die Summe aufgehen: 6 normale + 1 `.wide` = 8. Verrechnest du dich, bricht die zweite Zeile.
+
+**Demo-Bausteine — nur mitkopieren, was du benutzt:**
+
+```css
+/* Blob — organische Form */
+.demo-blob {
+ width: 80px; height: 80px;
+ background: var(--cancom-red);
+ border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
+ animation: blob 4s ease-in-out infinite;
+ filter: drop-shadow(0 0 20px var(--cancom-red-glow));
+ margin: 0 auto;
+}
+@keyframes blob {
+ 0%, 100% { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; transform: rotate(0deg); }
+ 33% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(120deg); }
+ 66% { border-radius: 30% 60% 70% 40% / 40% 70% 30% 60%; transform: rotate(240deg); }
+}
+
+/* 3D-Cube — HTML: <div class="demo-3d-cube"><div class="cube">6× <div class="face front|back|right|left|top|bottom"></div></div></div> */
+.demo-3d-cube { width: 80px; height: 80px; margin: 0 auto; perspective: 400px; }
+.demo-3d-cube .cube {
+ width: 100%; height: 100%;
+ position: relative;
+ transform-style: preserve-3d;
+ animation: cube-spin 8s linear infinite;
+}
+.demo-3d-cube .face {
+ position: absolute; width: 80px; height: 80px;
+ border: 2px solid var(--cancom-red);
+ background: rgba(228,0,43,0.15);
+}
+.demo-3d-cube .face.front { transform: translateZ(40px); }
+.demo-3d-cube .face.back { transform: rotateY(180deg) translateZ(40px); }
+.demo-3d-cube .face.right { transform: rotateY(90deg) translateZ(40px); }
+.demo-3d-cube .face.left { transform: rotateY(-90deg) translateZ(40px); }
+.demo-3d-cube .face.top { transform: rotateX(90deg) translateZ(40px); }
+.demo-3d-cube .face.bottom { transform: rotateX(-90deg) translateZ(40px); }
+@keyframes cube-spin { to { transform: rotateX(360deg) rotateY(360deg); } }
+
+/* Ticker — Text im <span> muss doppelt drinstehen, sonst springt der Loop bei -50% */
+.demo-scroll-text {
+ overflow: hidden; white-space: nowrap;
+ font-family: var(--font-display); font-weight: 700;
+ font-size: 30px; color: var(--cancom-red);
+ letter-spacing: -0.02em;
+ mask-image: linear-gradient(90deg, transparent, black 15%, black 85%, transparent);
+}
+.demo-scroll-text span { display: inline-block; animation: scroll-x 12s linear infinite; padding-right: 40px; }
+@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
+
+/* Audio-Bars — HTML: <div class="demo-charts-bars">6× <span></span></div> */
+.demo-charts-bars { display: flex; gap: 6px; align-items: flex-end; height: 60px; }
+.demo-charts-bars span {
+ flex: 1; background: var(--cancom-red);
+ border-radius: 2px 2px 0 0;
+ animation: bar-dance 1.6s ease-in-out infinite;
+}
+.demo-charts-bars span:nth-child(1) { animation-delay: 0s; }
+.demo-charts-bars span:nth-child(2) { animation-delay: 0.2s; }
+.demo-charts-bars span:nth-child(3) { animation-delay: 0.4s; }
+.demo-charts-bars span:nth-child(4) { animation-delay: 0.6s; }
+.demo-charts-bars span:nth-child(5) { animation-delay: 0.8s; }
+.demo-charts-bars span:nth-child(6) { animation-delay: 1.0s; }
+@keyframes bar-dance { 0%,100% { height: 20%; } 50% { height: 100%; } }
+
+/* Living Gradient */
+.demo-gradient {
+ height: 60px; border-radius: 8px;
+ background: linear-gradient(90deg, var(--cancom-red), var(--accent-warm), var(--accent-cool), var(--cancom-red));
+ background-size: 300% 100%;
+ animation: gradient-shift 6s linear infinite;
+}
+@keyframes gradient-shift { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
+
+/* Typewriter — steps() muss zur Zeichenzahl des Textes passen */
+.demo-typewriter {
+ font-family: var(--font-mono);
+ color: var(--paper);
+ font-size: 20px;
+ overflow: hidden; white-space: nowrap;
+ border-right: 3px solid var(--cancom-red);
+ width: 0;
+ animation: typing 4s steps(30, end) infinite,
+ caret-blink 0.7s step-end infinite;
+}
+@keyframes typing { 0% { width: 0; } 50% { width: 100%; } 100% { width: 100%; } }
+@keyframes caret-blink { 50% { border-color: transparent; } }
+
+/* Hover-Shift — Micro-Interaktion */
+.demo-hover-shift {
+ font-family: var(--font-display); font-weight: 700;
+ font-size: 44px; color: var(--paper);
+ letter-spacing: -0.02em;
+ cursor: pointer;
+ transition: letter-spacing 0.5s var(--ease-out-expo), color 0.5s;
+ text-align: center;
+}
+.demo-hover-shift:hover { letter-spacing: 0.05em; color: var(--cancom-red); }
+```
+
+---
+
+## 5. Live-Daten via WebSocket
+
+Der Beweis-Slide schlechthin: ein offener Stream, mehrere Ticks pro Sekunde direkt in den DOM. Beispiel Binance BTC/EUR — öffentlich, kein Key, kein CORS-Problem.
+
+**Der Fallback ist Pflicht.** Ohne Netz auf der Bühne zeigt die Slide sonst „—.——" — ein Eigentor gegen die eigene These. Der Handler unten simuliert Ticks, wenn die Verbindung scheitert.
+
+```html
+<div class="api-wrap">
+ <div class="api-panel rate reveal d4">
+ <div class="api-panel-head">
+ <span>BTC · EUR</span>
+ <span class="api-live-dot" id="wsStatus">Verbinde…</span>
+ </div>
+ <div class="api-rate-pair">1 BTC =</div>
+ <div class="api-rate-value">
+ <span id="btcRateNum">—.——</span><span class="currency">EUR</span>
+ </div>
+ <div class="api-rate-meta">
+ <span id="btcChange">24h Change: —</span>
+ <span class="updated" id="btcTicks">0 Ticks</span>
+ </div>
+ </div>
+
+ <div class="api-panel conv reveal d5">
+ <div class="api-panel-head"><span>Konverter</span><span>Live berechnet</span></div>
+ <div style="display: flex; flex-direction: column; gap: 14px;">
+ <label class="conv-row">
+ <span class="conv-flag btc">₿</span>
+ <span class="conv-code">BTC</span>
+ <input class="conv-input" id="convBTC" type="number" value="1" min="0" step="0.001" inputmode="decimal">
+ </label>
+ <div class="conv-swap"><span class="conv-swap-icon">↓</span></div>
+ <label class="conv-row">
+ <span class="conv-flag eur">€</span>
+ <span class="conv-code">EUR</span>
+ <input class="conv-output" id="convEUR" type="text" readonly value="—">
+ </label>
+ </div>
+ <div class="conv-hint">Tippe eine Zahl · Powered by <code>new WebSocket()</code></div>
+ </div>
+</div>
+```
+
+**CSS mitkopieren:**
+
+```css
+.api-wrap { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
+.api-panel {
+ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
+ border: 1px solid var(--ink-line);
+ border-radius: 16px;
+ padding: 48px;
+ display: flex; flex-direction: column;
+ position: relative; overflow: hidden;
+}
+.api-panel.rate::before {
+ content: ""; position: absolute;
+ top: -50%; right: -30%;
+ width: 500px; height: 500px;
+ background: radial-gradient(circle, var(--cancom-red-dim), transparent 60%);
+ filter: blur(20px);
+ pointer-events: none;
+}
+.api-panel-head {
+ display: flex; justify-content: space-between; align-items: center;
+ margin-bottom: 32px;
+ font-family: var(--font-mono); font-size: 16px;
+ color: var(--paper-mute);
+ letter-spacing: 0.2em; text-transform: uppercase;
+ position: relative; z-index: 2;
+}
+.api-live-dot { display: inline-flex; align-items: center; gap: 10px; color: var(--cancom-red); }
+.api-live-dot::before {
+ content: ""; width: 10px; height: 10px;
+ border-radius: 50%;
+ background: var(--cancom-red);
+ box-shadow: 0 0 12px var(--cancom-red-glow);
+ animation: pulse 1.2s infinite;
+}
+.api-live-dot.disconnected { color: var(--paper-mute); }
+.api-live-dot.disconnected::before { animation: none; background: var(--paper-mute); box-shadow: none; }
+.api-rate-pair {
+ font-family: var(--font-mono); font-size: 22px;
+ color: var(--paper-dim); letter-spacing: 0.1em;
+ margin-bottom: 12px;
+ position: relative; z-index: 2;
+}
+.api-rate-value {
+ font-family: var(--font-display); font-weight: 700;
+ font-size: 112px; line-height: 0.95;
+ letter-spacing: -0.04em;
+ color: var(--paper);
+ position: relative; z-index: 2;
+ display: flex; align-items: baseline;
+ flex-wrap: wrap; gap: 14px;
+ font-variant-numeric: tabular-nums; /* sonst springt das Layout bei jedem Tick */
+ word-break: break-all;
+}
+.api-rate-value .currency {
+ color: var(--cancom-red);
+ font-size: 56px;
+ text-shadow: 0 0 40px var(--cancom-red-glow);
+ letter-spacing: 0;
+}
+.api-rate-meta {
+ margin-top: auto;
+ padding-top: 32px;
+ border-top: 1px solid var(--ink-line);
+ display: flex; justify-content: space-between;
+ font-family: var(--font-mono); font-size: 14px;
+ color: var(--paper-mute); letter-spacing: 0.14em;
+ text-transform: uppercase;
+ position: relative; z-index: 2;
+}
+.api-rate-meta .updated { color: var(--paper-dim); }
+
+/* Richtungs-Flash. Grün/Rot sind semantisch, nicht Marke. */
+.tick-up { color: #4ade80 !important; text-shadow: 0 0 40px rgba(74,222,128,0.6) !important; }
+.tick-down { color: #ff5060 !important; text-shadow: 0 0 40px rgba(255,80,96,0.6) !important; }
+#btcRateNum { transition: color 0.4s ease-out, text-shadow 0.4s ease-out; }
+
+/* Converter */
+.api-panel.conv { justify-content: space-between; }
+.conv-row {
+ display: flex; align-items: center; gap: 20px;
+ padding: 20px 24px;
+ background: rgba(0,0,0,0.35);
+ border: 1px solid var(--ink-line);
+ border-radius: 12px;
+ transition: border-color 0.15s ease-out;
+}
+.conv-row:focus-within { border-color: var(--cancom-red); box-shadow: 0 0 0 3px var(--cancom-red-dim); }
+.conv-flag {
+ width: 56px; height: 56px;
+ border-radius: 50%;
+ display: flex; align-items: center; justify-content: center;
+ font-family: var(--font-display); font-weight: 700;
+ font-size: 22px;
+ flex-shrink: 0;
+}
+.conv-flag.eur { background: linear-gradient(135deg, #003399, #002266); color: #FFCC00; }
+.conv-flag.usd { background: linear-gradient(135deg, #00693E, #004225); color: #F5F5F2; }
+.conv-flag.btc { background: linear-gradient(135deg, #F7931A, #B9700F); color: #fff; box-shadow: 0 0 20px rgba(247,147,26,0.4); }
+.conv-code {
+ font-family: var(--font-mono); font-size: 16px;
+ letter-spacing: 0.2em; color: var(--paper-mute);
+ text-transform: uppercase; width: 60px;
+}
+.conv-input, .conv-output {
+ flex: 1;
+ background: transparent; border: none; outline: none;
+ font-family: var(--font-display); font-weight: 600;
+ font-size: 56px; color: var(--paper);
+ text-align: right; letter-spacing: -0.02em;
+ width: 100%; min-width: 0;
+ -moz-appearance: textfield;
+}
+.conv-input::-webkit-outer-spin-button,
+.conv-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+.conv-output.updating { color: var(--cancom-red); }
+.conv-swap { text-align: center; margin: -8px 0; position: relative; z-index: 2; }
+.conv-swap-icon {
+ display: inline-block;
+ width: 48px; height: 48px;
+ border-radius: 50%;
+ background: var(--cancom-red);
+ color: #fff;
+ font-size: 22px; line-height: 48px;
+ box-shadow: 0 0 24px var(--cancom-red-glow);
+}
+.conv-hint {
+ margin-top: 20px;
+ font-family: var(--font-mono); font-size: 14px;
+ color: var(--paper-mute); letter-spacing: 0.1em;
+ text-align: center;
+}
+.conv-hint code { color: var(--cancom-red); background: rgba(228,0,43,0.1); padding: 2px 8px; border-radius: 4px; }
+```
+
+**JS mitkopieren:**
+
+```js
+(function initBtcStream() {
+ const rateEl = document.getElementById('btcRateNum');
+ const changeEl = document.getElementById('btcChange');
+ const ticksEl = document.getElementById('btcTicks');
+ const statusEl = document.getElementById('wsStatus');
+ const btcInput = document.getElementById('convBTC');
+ const eurOut = document.getElementById('convEUR');
+ if (!rateEl || !btcInput || !eurOut) return;
+
+ let currentRate = null;
+ let tickCount = 0;
+ let ws = null;
+ let reconnectTimer = null;
+
+ const fmt = (v, digits = 2) => new Intl.NumberFormat('de-DE', {
+ minimumFractionDigits: digits, maximumFractionDigits: digits
+ }).format(v);
+
+ function recalc() {
+ if (currentRate == null) return;
+ const btc = parseFloat(btcInput.value);
+ if (isNaN(btc)) { eurOut.value = '—'; return; }
+ eurOut.value = fmt(btc * currentRate) + ' €';
+ }
+ btcInput.addEventListener('input', recalc);
+
+ function applyTick(newRate, changePct) {
+ const prev = currentRate;
+ currentRate = newRate;
+ tickCount++;
+
+ rateEl.textContent = fmt(newRate);
+ ticksEl.textContent = tickCount.toLocaleString('de-DE') + ' Ticks';
+
+ if (changePct != null) {
+ const sign = changePct >= 0 ? '+' : '';
+ changeEl.textContent = '24h Change: ' + sign + changePct.toFixed(2) + ' %';
+ changeEl.style.color = changePct >= 0 ? '#4ade80' : '#ff5060';
+ }
+
+ if (prev != null && newRate !== prev) {
+ const cls = newRate > prev ? 'tick-up' : 'tick-down';
+ rateEl.classList.remove('tick-up', 'tick-down');
+ void rateEl.offsetWidth; // Reflow erzwingen, sonst startet die Anim nicht neu
+ rateEl.classList.add(cls);
+ setTimeout(() => rateEl.classList.remove(cls), 400);
+ }
+ recalc();
+ }
+
+ function connect() {
+ statusEl.textContent = 'Verbinde…';
+ statusEl.classList.add('disconnected');
+ try {
+ ws = new WebSocket('wss://stream.binance.com:9443/ws/btceur@ticker');
+ } catch (e) { handleFail(e); return; }
+
+ ws.addEventListener('open', () => {
+ statusEl.classList.remove('disconnected');
+ statusEl.textContent = 'Live · Binance';
+ });
+ ws.addEventListener('message', (ev) => {
+ try {
+ const d = JSON.parse(ev.data); // c = last price, P = 24h % change
+ applyTick(parseFloat(d.c), parseFloat(d.P));
+ } catch (e) { /* malformed frame ignorieren */ }
+ });
+ ws.addEventListener('close', () => {
+ statusEl.classList.add('disconnected');
+ statusEl.textContent = 'Getrennt · retry';
+ scheduleReconnect();
+ });
+ ws.addEventListener('error', handleFail);
+ }
+
+ function handleFail(err) {
+ console.warn('[ws] error', err);
+ statusEl.classList.add('disconnected');
+ statusEl.textContent = 'Offline · Fallback';
+ // Simulierte Ticks, damit die Demo auch ohne Netz läuft
+ if (currentRate == null) currentRate = 55000;
+ if (!window.__btcFallbackTimer) {
+ window.__btcFallbackTimer = setInterval(() => {
+ const wobble = (Math.random() - 0.5) * 40;
+ applyTick(currentRate + wobble, 0);
+ }, 400);
+ }
+ }
+
+ function scheduleReconnect() {
+ clearTimeout(reconnectTimer);
+ reconnectTimer = setTimeout(connect, 3000);
+ }
+
+ connect();
+})();
+```
+
+**Für eine andere Datenquelle** bleibt das Gerüst gleich: `connect()` tauschen, im `message`-Handler auf `applyTick(wert, änderung)` mappen, `handleFail` mit plausiblen Dummy-Werten füttern. Bei REST statt WebSocket: `setInterval` + `fetch`, aber die Quelle muss CORS erlauben — sonst scheitert es nur auf der Bühne, nicht auf deinem Rechner.
+
+---
+
+## 6. Zwei-Spalten-Abwägung
+
+Der ehrliche Deal: Wann das Neue, wann das Alte. Nutzt `.pain-grid` mit zwei Spalten, die linke Karte rot hinterlegt.
+
+Diese Slide macht das Deck glaubwürdig. Ein Vortrag, der nur Vorteile kennt, ist eine Werbung — einer, der die Grenzen benennt, ist ein Argument.
+
+```html
+<div class="pain-grid" style="grid-template-columns: 1fr 1fr;">
+ <div class="pain-card reveal d3" style="background: linear-gradient(180deg, rgba(228,0,43,0.08), rgba(0,0,0,0.15)); border-color: rgba(228,0,43,0.4);">
+ <span class="pain-num" style="color: var(--cancom-red);">→ [Option A]</span>
+ <div>
+ <div class="pain-title">Wenn's <span style="color: var(--cancom-red);">wow</span> machen soll</div>
+ <div class="pain-body" style="font-size: 22px;">Konkrete Anwendungsfälle, keine Allgemeinplätze.</div>
+ </div>
+ </div>
+ <div class="pain-card reveal d4">
+ <span class="pain-num">→ [Option B]</span>
+ <div>
+ <div class="pain-title">Wenn <span style="color: var(--paper-mute);">X</span> zählt</div>
+ <div class="pain-body" style="font-size: 22px;">Wo die andere Option ehrlich die bessere ist.</div>
+ </div>
+ </div>
+</div>
+```
+
+---
+
+## 7. Kapitel-Trenner
+
+Ruhiger Zwischen-Slide bei Themenwechsel: riesige, transparente „Geister-Zahl" im Hintergrund, roter Mono-Kicker, kurze Headline. Kein `.slide-content`, kein `data-num` — zählt bewusst nicht als Inhalts-Slide.
+
+```html
+<section class="slide">
+ <div class="section-slide">
+ <div class="section-ghost-num">03</div>
+ <div class="section-kicker reveal d1">Kapitel 03 / 07</div>
+ <h2 class="section-title reveal d2">Kurzer<br><span class="accent">Kapitel-Titel.</span></h2>
+ <p class="section-sub reveal d3">Ein Satz, der ankündigt, was jetzt kommt.</p>
+ </div>
+</section>
+```
+
+**CSS mitkopieren:**
+
+```css
+.section-slide {
+ background: radial-gradient(ellipse at 75% 25%, #1a0409 0%, var(--ink) 60%), var(--ink);
+ padding: 120px; height: 100%;
+ display: flex; flex-direction: column; justify-content: center;
+ position: relative; overflow: hidden;
+}
+.section-ghost-num {
+ position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
+ font-family: var(--font-display); font-weight: 700; font-size: 480px; line-height: 0.8;
+ color: transparent; -webkit-text-stroke: 1.5px var(--ink-line); z-index: 0; user-select: none;
+}
+.section-kicker {
+ position: relative; z-index: 2;
+ font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.3em; text-transform: uppercase;
+ color: var(--cancom-red); display: flex; align-items: center; gap: 16px; margin-bottom: 40px;
+}
+.section-kicker::before { content: ""; width: 60px; height: 2px; background: var(--cancom-red); }
+.section-title {
+ position: relative; z-index: 2;
+ font-family: var(--font-display); font-weight: 700; font-size: 150px; line-height: 0.94;
+ letter-spacing: -0.04em; color: var(--paper); margin-bottom: 32px; max-width: 1500px;
+}
+.section-title .accent { color: var(--cancom-red); }
+.section-sub {
+ position: relative; z-index: 2;
+ font-size: 28px; line-height: 1.4; color: var(--paper-dim); max-width: 1100px;
+}
+```
+
+Faustregel: ein Trenner pro Kapitel, nicht pro Slide. Die Geister-Zahl (`.section-ghost-num`) trägt die Kapitel-Nummer, nicht die Slide-Nummer.
+
+---
+
+## 8. Begriffs-Tooltip
+
+Fachbegriffe für Laien-Publikum anklickbar erklären, ohne die Slide zu überladen. Ein Wort bekommt eine gepunktete Unterstreichung plus „?"-Badge; Klick öffnet eine kurze Definition.
+
+```html
+<span class="term" data-title="MCP" data-def="Model Context Protocol: ein offener Standard, über den eine KI einheitlich auf Werkzeuge und Daten zugreifen kann.">MCP</span>
+```
+
+**CSS mitkopieren:**
+
+```css
+.term { border-bottom: 1.5px dotted var(--cancom-red); cursor: help; transition: color 0.15s ease-out; }
+.term:hover, .term.term-active { color: var(--cancom-red); }
+.term::after {
+ content: "?"; display: inline-flex; align-items: center; justify-content: center;
+ width: 0.62em; height: 0.62em; margin-left: 0.2em; border-radius: 50%;
+ border: 1px solid currentColor; font-family: var(--font-mono); font-size: 0.5em; font-weight: 700;
+ vertical-align: super; opacity: 0.7;
+}
+#globalTooltip {
+ position: fixed; max-width: 380px;
+ background: #14141c; border: 1px solid var(--cancom-red); border-radius: 12px;
+ padding: 18px 22px; font-family: 'Satoshi', sans-serif; font-size: 15px; line-height: 1.48;
+ color: rgba(245,245,242,0.75); text-align: left;
+ box-shadow: 0 24px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(228,0,43,0.15);
+ opacity: 0; transform: translateY(6px) scale(0.98); pointer-events: none;
+ transition: opacity 0.16s ease-out, transform 0.16s ease-out; z-index: 20000;
+}
+#globalTooltip.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
+#globalTooltip .gt-title {
+ display: block; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px;
+ letter-spacing: 0.16em; text-transform: uppercase; color: var(--cancom-red); margin-bottom: 8px;
+}
+#globalTooltip::before {
+ content: ""; position: absolute; left: var(--gt-arrow-x, 24px); width: 14px; height: 14px;
+ background: #14141c; border: 1px solid var(--cancom-red); transform: translateX(-50%) rotate(45deg);
+}
+#globalTooltip.arrow-top::before { top: -8px; border-right: none; border-bottom: none; }
+#globalTooltip.arrow-bottom::before { bottom: -8px; border-left: none; border-top: none; }
+```
+
+**HTML einmal im Body:**
+
+```html
+<div id="globalTooltip" role="tooltip"><span class="gt-title"></span><span class="gt-def"></span></div>
+```
+
+**JS mitkopieren.** Bewusst als eigenständiges, globales Element umgesetzt (nicht neben dem Begriff im DOM) — sonst schneiden `overflow:hidden`-Container wie `.pain-card` oder `.feature-tile` das Tooltip ab. Positionierung läuft in echten Viewport-Pixeln, klappt automatisch nach oben oder unten aus, je nachdem wo im Fenster noch Platz ist:
+
+```js
+(function initTermTooltips() {
+ const tip = document.getElementById('globalTooltip');
+ if (!tip) return;
+ const titleEl = tip.querySelector('.gt-title');
+ const defEl = tip.querySelector('.gt-def');
+ let activeTerm = null;
+
+ function closeTip() {
+ tip.classList.remove('visible');
+ if (activeTerm) activeTerm.classList.remove('term-active');
+ activeTerm = null;
+ }
+
+ function openTip(term) {
+ if (activeTerm === term) { closeTip(); return; }
+ if (activeTerm) activeTerm.classList.remove('term-active');
+ activeTerm = term;
+ term.classList.add('term-active');
+ titleEl.textContent = term.dataset.title || '';
+ defEl.textContent = term.dataset.def || '';
+
+ tip.classList.remove('arrow-top', 'arrow-bottom');
+ tip.style.visibility = 'hidden';
+ tip.classList.add('visible');
+ const tw = tip.offsetWidth, th = tip.offsetHeight;
+
+ const rect = term.getBoundingClientRect();
+ const margin = 16;
+ let left = rect.left + rect.width / 2 - tw / 2;
+ left = Math.max(margin, Math.min(left, window.innerWidth - tw - margin));
+ let top = rect.bottom + 14;
+ let arrowClass = 'arrow-top';
+ if (top + th > window.innerHeight - margin) {
+ top = rect.top - th - 14;
+ arrowClass = 'arrow-bottom';
+ }
+ tip.style.left = left + 'px';
+ tip.style.top = Math.max(margin, top) + 'px';
+ tip.style.setProperty('--gt-arrow-x', (rect.left + rect.width / 2 - left) + 'px');
+ tip.classList.add(arrowClass);
+ tip.style.visibility = '';
+ }
+
+ document.addEventListener('click', (e) => {
+ const term = e.target.closest ? e.target.closest('.term') : null;
+ if (term) { e.stopPropagation(); openTip(term); }
+ else if (!e.target.closest('#globalTooltip')) closeTip();
+ });
+ document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeTip(); });
+ window.addEventListener('resize', closeTip);
+})();
+```
+
+Bei Slide-Wechsel zusätzlich `closeTip()` aufrufen (z. B. `SlidePresentation.prototype.showSlide` umschließen), sonst bleibt ein Tooltip beim Weiterklicken sichtbar hängen.
+
+---
+
+## 9. Mitmach-Spiel
+
+Publikum rät live mit statt nur zuzuschauen — stärker als jede Erklärung „von außen". Beispiel: Satz Wort für Wort per Multiple-Choice vervollständigen, mit Wahrscheinlichkeits-Badges (macht das Prinzip hinter LLM-Textvorhersage erlebbar).
+
+```html
+<div class="game-wrap reveal d4">
+ <div class="game-sentence" id="gameSentence">Alle meine <span class="game-blank" id="gameBlank">___</span></div>
+ <div class="game-options" id="gameOptions"></div>
+ <p class="game-feedback" id="gameFeedback">Klicken Sie auf ein Wort.</p>
+ <p class="game-progress" id="gameProgress"></p>
+</div>
+```
+
+**CSS mitkopieren:**
+
+```css
+.game-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 44px; }
+.game-sentence { font-family: var(--font-display); font-weight: 700; font-size: 62px; line-height: 1.3; color: var(--paper); letter-spacing: -0.02em; max-width: 1600px; }
+.game-blank { display: inline-block; min-width: 200px; text-align: center; border-bottom: 4px dotted var(--cancom-red); color: var(--paper-mute); transition: transform 0.3s var(--ease-out-expo), color 0.2s ease-out; }
+.game-blank.filled { color: var(--cancom-red); border-bottom-style: solid; }
+.game-blank.bump { transform: scale(1.15); }
+.game-options { display: flex; gap: 20px; flex-wrap: wrap; }
+.game-option { padding: 22px 40px; border-radius: 10px; border: 1px solid var(--ink-line); background: #0f0f16; color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 26px; cursor: pointer; position: relative; transition: transform 0.15s ease-out, border-color 0.12s ease-out, background 0.15s ease-out; }
+.game-option:hover { transform: translateY(-4px); border-color: var(--cancom-red); }
+.game-option .prob-badge { position: absolute; top: -16px; right: -12px; background: var(--cancom-red); color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 20px; box-shadow: 0 0 12px var(--cancom-red-glow); opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
+.game-option.revealed .prob-badge { opacity: 1; transform: scale(1); }
+.game-option.low .prob-badge { background: #3a3a44; box-shadow: none; }
+.game-feedback { font-family: var(--font-mono); font-size: 18px; color: var(--paper-mute); letter-spacing: 0.03em; min-height: 26px; }
+.game-feedback.strong { color: var(--cancom-red); font-family: var(--font-display); font-weight: 600; font-size: 22px; }
+.game-progress { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-mute); }
+```
+
+**JS mitkopieren.** Baut die Options-Buttons pro Schritt dynamisch aus einem `steps`-Array — nach jedem Klick wird das gewählte Wort fest ins Satzpräfix übernommen und der nächste Schritt (mit neuen Optionen) erzeugt:
+
+```js
+(function initAutocompleteGame() {
+ const sentence = document.getElementById('gameSentence');
+ let blank = document.getElementById('gameBlank');
+ const optionsWrap = document.getElementById('gameOptions');
+ const feedback = document.getElementById('gameFeedback');
+ const progress = document.getElementById('gameProgress');
+ if (!sentence || !blank || !optionsWrap || !feedback) return;
+
+ const prefix = 'Alle meine';
+ const steps = [
+ { options: [{ word: 'Entchen', prob: 91 }, { word: 'Kinder', prob: 5 }, { word: 'Freunde', prob: 3 }, { word: 'Autos', prob: 1 }] },
+ // … weitere Schritte, je ein Array von { word, prob }
+ ];
+
+ let confirmed = [];
+ let stepIndex = 0;
+ let locked = false;
+
+ function renderOptions() {
+ optionsWrap.innerHTML = '';
+ steps[stepIndex].options.forEach((opt) => {
+ const btn = document.createElement('button');
+ btn.className = 'game-option';
+ if (opt.prob < 50) btn.classList.add('low');
+ btn.innerHTML = opt.word + '<span class="prob-badge">' + opt.prob + ' %</span>';
+ btn.addEventListener('click', () => onPick(btn, opt));
+ optionsWrap.appendChild(btn);
+ });
+ }
+
+ function onPick(btn, opt) {
+ if (locked) return;
+ locked = true;
+ optionsWrap.querySelectorAll('.game-option').forEach((b) => b.classList.remove('revealed'));
+ btn.classList.add('revealed');
+ blank.textContent = opt.word;
+ blank.classList.add('filled', 'bump');
+ setTimeout(() => blank.classList.remove('bump'), 300);
+
+ const best = steps[stepIndex].options[0].word;
+ feedback.classList.toggle('strong', opt.word === best);
+ feedback.textContent = opt.word === best
+ ? 'Genau das macht ein LLM: die wahrscheinlichste Fortsetzung wählen (' + opt.prob + ' %).'
+ : '„' + opt.word + '" wäre möglich, aber unwahrscheinlicher (' + opt.prob + ' %).';
+
+ setTimeout(() => {
+ confirmed.push(opt.word);
+ stepIndex++;
+ locked = false;
+ if (stepIndex < steps.length) {
+ sentence.innerHTML = prefix + ' ' + confirmed.join(' ') + ' <span class="game-blank filled" id="gameBlank">___</span>';
+ blank = document.getElementById('gameBlank'); // Referenz nach innerHTML-Ersatz neu holen!
+ renderOptions();
+ progress.textContent = 'Wort ' + (stepIndex + 1) + ' von ' + steps.length;
+ } else {
+ sentence.textContent = prefix + ' ' + confirmed.join(' ') + '.';
+ optionsWrap.innerHTML = '';
+ feedback.textContent = 'Fertig! Wort für Wort die wahrscheinlichste Fortsetzung — genau so entsteht jede LLM-Antwort.';
+ feedback.classList.add('strong');
+ progress.textContent = 'Satz vollständig';
+ }
+ }, 1100);
+ }
+
+ renderOptions();
+})();
+```
+
+**Falle:** Nach jedem `sentence.innerHTML = …`-Ersatz existiert das alte `#gameBlank`-Element nicht mehr im DOM. Die JS-Referenz darauf **muss** neu geholt werden (`document.getElementById('gameBlank')`), sonst schreibt der nächste Schritt unsichtbar in einen losgelösten Knoten.
+
+---
+
+## 10. Ambient-Sound-Button
+
+Optionaler, per Web Audio API erzeugter Klangteppich für die Titelfolie — kein externes Audio-File, läuft offline. Baut vor Vortragsbeginn Spannung auf, blendet beim Verlassen der Folie automatisch aus.
+
+```html
+<button class="ambient-toggle" id="ambientToggle" title="Sound (nur auf dieser Folie)">🔈</button>
+```
+
+**CSS mitkopieren:**
+
+```css
+.ambient-toggle {
+ width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
+ display: inline-flex; align-items: center; justify-content: center;
+ background: rgba(20,20,28,0.55); border: 1px solid var(--ink-line);
+ cursor: pointer; font-size: 15px; line-height: 1; color: var(--paper-mute);
+ transition: border-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.2s ease-out;
+}
+.ambient-toggle:hover { border-color: var(--cancom-red); color: var(--paper); }
+.ambient-toggle.playing {
+ color: var(--paper); border-color: rgba(228,0,43,0.5);
+ box-shadow: 0 0 14px var(--cancom-red-glow);
+ animation: pulse 1.6s infinite;
+}
+```
+
+**JS-Prinzip** (voller Code in `ki-verstehen.html`, Abschnitt „AMBIENT-SOUND"): `AudioContext` erst beim ersten Klick anlegen (Autoplay-Policy verlangt eine Nutzer-Geste), Graph aus Sub-Drone-Oszillatoren + rhythmischem Puls + Arpeggio bauen, `masterGain` mit `setTargetAtTime` sanft ein-/ausblenden. Ein gepatchtes `SlidePresentation.prototype.showSlide` prüft bei jedem Slide-Wechsel, ob die Titelfolie noch aktiv ist, und regelt die Lautstärke entsprechend runter oder rauf:
+
+```js
+function updatePlayback() {
+ if (!ctx || !master) return;
+ const shouldPlay = soundOn && isTitleSlideActive(); // slide.dataset.slideId === '1'
+ const now = ctx.currentTime;
+ master.gain.cancelScheduledValues(now);
+ master.gain.setTargetAtTime(shouldPlay ? 0.45 : 0, now, shouldPlay ? 1.4 : 0.6);
+}
+```
+
+**Regel:** Keine Geräusch-Layer, die dauerhaft wie Rauschen/Hintergrundrascheln wirken — das ermüdet. Rhythmische, sich entwickelnde Elemente (Puls, Arpeggio) wirken motivierend, ein Dauerdrone allein wirkt nur „atmosphärisch", nicht spannungsaufbauend.
+
+---
+
+## 11. Präsentations-Konfigurator
+
+Bei Decks mit vielen Slides oder mehreren Vortrags-Längen: Slides kuratieren statt löschen. Zwei zusätzliche Dateien neben dem Deck:
+
+**`slides-manifest.js`** — einzige Quelle der Wahrheit für Titel/Reihenfolge, von Deck **und** Konfigurator geladen:
+
+```js
+const SLIDE_MANIFEST = [
+ { id: 1, title: "Titel", kapitel: "—", type: "content", locked: true },
+ { id: 2, title: "Hook: …", kapitel: "—", type: "content" },
+ { id: 3, title: "Kapitel 1 · …", kapitel: "…", type: "divider" },
+ // … ein Eintrag pro <section class="slide" data-slide-id="…">, gleiche Reihenfolge
+];
+
+const SLIDE_CONFIG_STORAGE_KEY = 'cancomDeckSlideConfig';
+function loadSlideConfig() { /* liest Set aus localStorage, Fallback null */ }
+function saveSlideConfig(enabledIdSet) { /* schreibt Set in localStorage */ }
+```
+
+**Im Deck:** jede `<section class="slide">` bekommt `data-slide-id="N"` in Dokumentreihenfolge (1-basiert). `SlidePresentation` liest die aktivierten IDs **zuerst aus dem URL-Parameter** `?slides=1,4,5,…`, erst danach aus `localStorage` als Fallback — `file://`-Storage wird zwischen einzelnen HTML-Dateien nicht überall geteilt (Safari trennt strikt pro Datei). Navigation (Pfeiltasten, Mausrad, Swipe) läuft über ein gefiltertes `visibleSlides`-Array statt über alle Slides:
+
+```js
+computeVisibleSlides() {
+ const all = Array.from(this.slides);
+ const enabled = this.resolveEnabledSlideIds();
+ if (!enabled) return all;
+ const filtered = all.filter((slide) => enabled.has(parseInt(slide.dataset.slideId, 10)));
+ return filtered.length ? filtered : all; // Sicherheitsnetz: nie leere Bühne
+}
+```
+
+**`config.html`** — eigenständige Seite: Checkbox-Liste gruppiert nach Kapitel (`SLIDE_MANIFEST` nach `kapitel` gruppieren), Buttons „Alle an/aus", „Kapitel an/aus", live mitlaufender Zähler. Beim Wechsel zur Präsentation wird die Auswahl in die URL kodiert:
+
+```js
+function goToDeck() {
+ saveSlideConfig(enabled);
+ const ids = Array.from(enabled).sort((a, b) => a - b).join(',');
+ window.location.href = 'ki-verstehen.html?slides=' + encodeURIComponent(ids);
+}
+```
+
+**Locked Slides:** Titel und Closing im Manifest mit `locked: true` markieren — Checkbox disabled, immer Teil der Auswahl. Ein Deck ohne Anfang oder Ende ist kein Deck mehr.
diff --git a/README.md b/README.md
index e69de29..a4cf102 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1,53 @@
+# KI verstehen – von den Anfängen bis zu Agenten-Schwärmen
+
+CANCOM-Vortragsdeck im HTML-Format. Ein File, kein Build, kein Bundler –
+per Doppelklick lauffähig, per Mail/Teams/SharePoint verteilbar.
+
+## Dateien
+
+| Datei | Zweck |
+|---|---|
+| `ki-verstehen.html` | Das eigentliche Deck. 36 Slides, 1920×1080, per `E` editierbar. |
+| `config.html` | Präsentations-Konfigurator: Slides für den Vortrag ein-/ausblenden. |
+| `slides-manifest.js` | Gemeinsame Titel-/Reihenfolge-Liste, von Deck **und** Konfigurator geladen. |
+| `font-vorschau.html` | Vergleichsseite für Headline-Schriften (Rückblick auf die Font-Auswahl). |
+| `DESIGN.md` | Design-System: Tokens, Typografie, Layout, Motion – verbindlich für Umbauten. |
+| `PATTERNS.md` | Copy-Paste-Bausteine für einzelne Slide-Typen. |
+| `deck-template.html` | Leerer Startpunkt für ein neues Deck im selben Look. |
+
+## Präsentieren
+
+```bash
+open ki-verstehen.html
+```
+
+- `→` / Leertaste / Mausrad / Swipe: nächste Slide · `←`: vorherige · `Home`/`End`: Anfang/Ende
+- `E`: Live-Editor (Text direkt auf der Bühne korrigieren, z. B. bei Kundenwunsch „anderes Wort")
+- `C` oder das ⚙-Symbol oben links (Hotzone): zum Konfigurator
+- 🔈-Symbol unten rechts auf der Titelfolie: erzeugter Ambient-Sound (Web Audio, keine externe Datei)
+
+## Slides für einen Vortrag auswählen
+
+`config.html` öffnen, Häkchen setzen/entfernen, auf „Speichern & zur Präsentation" klicken.
+Die Auswahl wird als URL-Parameter ans Deck übergeben (zuverlässig auch bei `file://`, wo
+`localStorage` zwischen einzelnen HTML-Dateien nicht immer geteilt wird – v. a. Safari).
+Titelfolie und Closing sind fest verankert und lassen sich nicht abwählen.
+
+## Aufbau des Decks (36 Slides in 7 Kapiteln)
+
+1. **Titel** + **Hook** (Handzeichen-Frage)
+2. **Kapitel 1 · Wie alles begann** – Zeitstrahl, verschachtelte Kreise (KI/ML/DL/GenAI), wie eine Maschine lernt, ANI vs. AGI
+3. **Kapitel 2 · Wie ein LLM funktioniert** – Mitmach-Spiel „Alle meine Entchen …", Autovervollständigung, Token & Parameter, Reasoning-Modelle, System-/User-Prompt & Context, Kontext-Limit & Compact
+4. **Kapitel 3 · Die Modell-Landschaft** – woher das Wissen kommt, Anbieter-Übersicht, Geschäftsmodelle, SEO vs. GEO, wo man Modelle findet
+5. **Kapitel 4 · Vom Chatbot zum Agenten** – Eskalationsleiter, MCP
+6. **Kapitel 5 · Die Grenzen der KI** – Schwächen-Übersicht, Halluzination im Detail
+7. **Kapitel 6 · Sicherheit im Umgang mit KI** – Prompt Injection, weitere Security-Punkte
+8. **Kapitel 7 · Praxis & Ausblick** – Tipps, Ausblick, Glossar, Closing
+
+Begriffe wie *Token*, *LLM*, *MCP*, *GPT*, *ANI/AGI* u. a. sind im Fließtext anklickbar
+(gepunktete Unterstreichung) und öffnen eine kurze Erklärung.
+
+## Neues Deck bauen
+
+Siehe `DESIGN.md` Abschnitt 8 und `PATTERNS.md` für Copy-Paste-Bausteine.
+`deck-template.html` kopieren, umbenennen, Slides zusammenstellen.
diff --git a/config.html b/config.html
new file mode 100644
index 0000000..9cfd795
--- /dev/null
+++ b/config.html
@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>CANCOM · Deck konfigurieren
+
+
+
+
+
+
+
+
+
+
Präsentations-Konfigurator
+
Welche Slides sollen gezeigt werden?
+
Häkchen entfernen blendet eine Slide für den Vortrag aus, ohne sie zu löschen. Die Auswahl wird lokal in diesem Browser gespeichert und beim nächsten Öffnen des Decks automatisch angewendet.