Add Docker deployment, EU AI Act slide, and chapter name in HUD

Serves the deck via a small nginx container (docker compose up -d).
The Dockerfile copies files individually rather than COPY . . so the
speaker notes, design docs and local backups stay out of the image.

Deck grows to 44 slides: adds a Vibe Coding slide covering AI-assisted
programming, an EU AI Act slide with the four risk tiers, and expands
the outlook from three to six trends. The HUD now also shows the
current chapter name, resolved from the slide manifest.

.dockerignore

@@ -0,0 +1,12 @@
+# Nichts davon gehört ins Image — schützt vor versehentlichem Ausliefern
+# der Sprechernotizen und hält den Build-Context klein.
+.git
+.gitignore
+.DS_Store
+*.md
+ki-verstehen.backup-*.html
+ki-verstehen-bearbeitet.html
+deck-template.html
+docker-compose.yml
+Dockerfile
+.dockerignore

Dockerfile

@@ -0,0 +1,23 @@
+# Statisches Deck via nginx ausliefern — kein Build-Schritt, kein Node.
+FROM nginx:alpine
+
+# Eigene Server-Config (macht ki-verstehen.html zur Startseite, schaltet gzip an)
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# nginx-Willkommensseite entfernen, sonst liegt sie unter /index.html im Webroot
+RUN rm -f /usr/share/nginx/html/index.html
+
+# WICHTIG: Dateien einzeln kopieren, NICHT `COPY . .` —
+# Sprecher.md enthält die Sprechernotizen und darf nicht im Web landen.
+# Dasselbe gilt für DESIGN.md/PATTERNS.md und die lokalen Backup-Dateien.
+COPY ki-verstehen.html   /usr/share/nginx/html/
+COPY config.html         /usr/share/nginx/html/
+COPY slides-manifest.js  /usr/share/nginx/html/
+COPY font-vorschau.html  /usr/share/nginx/html/
+
+EXPOSE 80
+
+# Bewusst 127.0.0.1 statt localhost: nginx lauscht hier nur auf IPv4,
+# "localhost" löst im Container aber zuerst auf ::1 auf -> Connection refused.
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD wget -qO- http://127.0.0.1/ >/dev/null || exit 1

README.md

@@ -7,13 +7,15 @@ per Doppelklick lauffähig, per Mail/Teams/SharePoint verteilbar.
 
 | Datei | Zweck |
 |---|---|
-| `ki-verstehen.html` | Das eigentliche Deck. 36 Slides, 1920×1080, per `E` editierbar. |
+| `ki-verstehen.html` | Das eigentliche Deck. 44 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. |
+| `Sprecher.md` | Sprecherkarten je Folie – **nicht** Teil des Docker-Images. |
 | `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. |
+| `Dockerfile`, `docker-compose.yml`, `nginx.conf` | Deck als Webdienst ausliefern (siehe unten). |
 
 ## Präsentieren
 
@@ -47,6 +49,36 @@ Titelfolie und Closing sind fest verankert und lassen sich nicht abwählen.
 Begriffe wie *Token*, *LLM*, *MCP*, *GPT*, *ANI/AGI* u. a. sind im Fließtext anklickbar
 (gepunktete Unterstreichung) und öffnen eine kurze Erklärung.
 
+## Als Webdienst betreiben (Docker)
+
+Statt die Datei zu verteilen, kann das Deck auch als kleiner Webdienst laufen –
+praktisch für Präsentationsrechner, Intranet oder Teilnehmer-Zugriff im Nachgang.
+
+```bash
+docker compose up -d --build
+```
+
+Danach: **http://localhost:8080** → öffnet direkt das Deck, `…/config.html` den Konfigurator.
+
+```bash
+docker compose down          # stoppen
+docker compose logs -f deck  # Logs ansehen
+```
+
+Ein schlanker `nginx:alpine` liefert die statischen Dateien aus (gzip halbiert die
+Übertragung auf ~44 KB). Port lässt sich in `docker-compose.yml` ändern.
+
+**Was bewusst NICHT im Image liegt:** `Sprecher.md` (Sprechernotizen!), `DESIGN.md`,
+`PATTERNS.md`, `deck-template.html` und die lokalen Backup-Dateien. Das Dockerfile
+kopiert einzelne Dateien statt `COPY . .` – beim Ergänzen neuer Assets muss die Liste
+im `Dockerfile` mitgepflegt werden, sonst fehlen sie im Container.
+
+Zum Weiterbauen am Deck ohne Rebuild: die `volumes:`-Zeilen in `docker-compose.yml`
+einkommentieren, dann werden die Dateien live aus dem Projektordner gelesen.
+
+Nebeneffekt gegenüber `file://`: Über `http://localhost` gilt die Seite als sicherer
+Kontext – der 💾-Button im Edit-Modus kann dort direkt in den gewählten Ordner speichern.
+
 ## Neues Deck bauen
 
 Siehe `DESIGN.md` Abschnitt 8 und `PATTERNS.md` für Copy-Paste-Bausteine.

docker-compose.yml

@@ -0,0 +1,16 @@
+services:
+  deck:
+    build: .
+    image: ki-verstehen-deck
+    container_name: ki-verstehen-deck
+    ports:
+      # Host:Container — Deck läuft dann auf http://localhost:8080
+      - "8080:80"
+    restart: unless-stopped
+
+    # Für's Weiterbauen am Deck: Zeilen einkommentieren, dann werden die
+    # Dateien live aus dem Projektordner gelesen (kein Rebuild nötig, nur Reload).
+    # volumes:
+    #   - ./ki-verstehen.html:/usr/share/nginx/html/ki-verstehen.html:ro
+    #   - ./config.html:/usr/share/nginx/html/config.html:ro
+    #   - ./slides-manifest.js:/usr/share/nginx/html/slides-manifest.js:ro

ki-verstehen.html

@@ -221,8 +221,8 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 .counter-item { text-align: left; }
 .counter-value { font-family: var(--font-display); font-weight: 700; font-size: 180px; line-height: 0.9; letter-spacing: -0.05em; color: var(--cancom-red); text-shadow: 0 0 60px var(--cancom-red-glow); display: block; }
 .counter-value .unit { font-size: 64px; color: var(--paper); text-shadow: none; }
-.counter-label { font-family: var(--font-mono); font-size: 18px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-mute); margin-top: 16px; line-height: 1.5; }
+.counter-label { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-mute); margin-top: 12px; line-height: 1.45; }
-.counter-caption { font-size: 20px; color: var(--paper-dim); margin-top: 12px; max-width: 380px; line-height: 1.4; }
+.counter-caption { font-size: 18px; color: var(--paper-dim); margin-top: 10px; max-width: 460px; line-height: 1.4; }
 
 /* ===========================================
    CODE SLIDE
@@ -496,6 +496,17 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
     display: block; font-family: var(--font-mono); font-weight: 700; font-size: 11px;
     letter-spacing: 0.16em; text-transform: uppercase; color: var(--cancom-red); margin-bottom: 8px;
 }
+/* EU AI Act — Eckdaten-Leiste */
+.aiact-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+.aiact-fact {
+    border-left: 2px solid var(--cancom-red); padding: 4px 0 4px 18px;
+    font-size: 16px; color: var(--paper-dim); line-height: 1.4;
+}
+.aiact-fact strong {
+    display: block; font-family: var(--font-mono); font-weight: 700; font-size: 13px;
+    letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); margin-bottom: 5px;
+}
+
 .mcp-node .term { border-bottom-color: rgba(255,255,255,0.7); }
 .mcp-node .term::after { border-color: rgba(255,255,255,0.7); }
 .mcp-node .term:hover, .mcp-node .term.term-active { color: #fff; opacity: 0.85; }
@@ -586,9 +597,11 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 <main class="deck-stage" id="deckStage" style="transform: translate(32.7778px, 0px) scale(0.856481);">
 <div class="deck-hud">
     <span class="dot"></span>
-    <span id="hudCounter">01 / 42</span>
+    <span id="hudCounter">01 / 44</span>
     <span>·</span>
     <span>KI verstehen - Erik Thiele</span>
+    <span id="hudChapterSep">·</span>
+    <span id="hudChapter"></span>
 </div>
 
 <!-- ============ SLIDE 01: TITEL ============ -->
@@ -620,7 +633,7 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 
 <!-- ============ SLIDE 02: HOOK ============ -->
 <section class="slide" data-slide-id="2">
-    <div class="slide-content" data-num="02 / 42">
+    <div class="slide-content" data-num="02 / 44">
         <span class="slide-eyebrow reveal d1">Einstieg</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Wer hat heute schon<br>KI <span class="accent">benutzt?</span></h2>
         <div class="hook-wrap">
@@ -651,7 +664,7 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 
 <!-- ============ SLIDE 03: GESCHICHTE ZEITSTRAHL ============ -->
 <section class="slide" data-slide-id="4">
-    <div class="slide-content" data-num="04 / 42">
+    <div class="slide-content" data-num="04 / 44">
         <span class="slide-eyebrow reveal d1">Wie alles begann</span>
         <h2 class="slide-title reveal d2" contenteditable="false">70 Jahre Auf<br>und <span class="accent">Ab.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 24px;" contenteditable="false">KI ist kein Blitz aus heiterem Himmel – der Durchbruch kam durch mehr Daten, mehr Rechenleistung und eine bessere Architektur.</p>
@@ -669,7 +682,7 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 
 <!-- ============ SLIDE 04: VERSCHACHTELTE KREISE ============ -->
 <section class="slide" data-slide-id="5">
-    <div class="slide-content" data-num="05 / 42">
+    <div class="slide-content" data-num="05 / 44">
         <span class="slide-eyebrow reveal d1">Begriffe entwirren</span>
         <h2 class="slide-title reveal d2" contenteditable="false">KI ist der <span class="accent">Oberbegriff.</span></h2>
         <div class="circles-wrap">
@@ -768,7 +781,7 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 
 <!-- ============ SLIDE 07: AUTOVERVOLLSTÄNDIGUNGS-SPIEL ============ -->
 <section class="slide" data-slide-id="9">
-    <div class="slide-content" data-num="09 / 42">
+    <div class="slide-content" data-num="09 / 44">
         <span class="slide-eyebrow reveal d1">Mitmach-Spiel</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Vervollständigen Sie<br>den <span class="accent">Satz.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 40px;" contenteditable="false">Rufen Sie mir zu, wie es weitergeht – genau das macht gleich ein LLM. Nur eben mit Milliarden Beispielen statt einem Kinderlied.</p>
@@ -813,7 +826,7 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 
 <!-- ============ SLIDE 08: TOKEN & PARAMETER ============ -->
 <section class="slide" data-slide-id="11">
-    <div class="slide-content" data-num="11 / 42">
+    <div class="slide-content" data-num="11 / 44">
         <span class="slide-eyebrow reveal d1">Zwei Fachbegriffe</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Token und <span class="accent">Parameter.</span></h2>
         <p class="slide-lead reveal d3" contenteditable="false">Nicht überfrachten – aber diese zwei Begriffe erklären später auch typische Schwächen.</p>
@@ -838,7 +851,7 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 
 <!-- ============ SLIDE 08B: TOKEN BEISPIEL ============ -->
 <section class="slide" data-slide-id="12">
-    <div class="slide-content" data-num="12 / 42">
+    <div class="slide-content" data-num="12 / 44">
         <span class="slide-eyebrow reveal d1">Beispiel</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Token an einem<br>ganz normalen <span class="accent">Satz.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 32px;" contenteditable="false">Ein LLM zerlegt Text in Wortbausteine – oft mehr, als man denkt.</p>
@@ -861,7 +874,7 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 
 <!-- ============ SLIDE 08C: PARAMETER GRUNDLAGEN ============ -->
 <section class="slide" data-slide-id="13">
-    <div class="slide-content" data-num="13 / 42">
+    <div class="slide-content" data-num="13 / 44">
         <span class="slide-eyebrow reveal d1">Beispiel</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Parameter: die<br>Stellschrauben <span class="accent">wachsen.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 32px;" contenteditable="false">Parameter (Gewichte) sind Zahlen, die das Modell beim Training lernt. Sie bestimmen, wie stark eine Information die nächste beeinflusst.</p>
@@ -887,7 +900,7 @@ img, video, canvas, svg { max-width: 100%; max-height: 100%; }
 
 <!-- ============ SLIDE 08D: PARAMETER BEISPIELE ============ -->
 <section class="slide" data-slide-id="14">
-    <div class="slide-content" data-num="14 / 42">
+    <div class="slide-content" data-num="14 / 44">
         <span class="slide-eyebrow reveal d1">Drei Beispiele</span>
         <h2 class="slide-title reveal d2" style="font-size: 80px;" contenteditable="false">Was sind diese<br>Stellschrauben <span class="accent">konkret?</span></h2>
         <div class="pain-grid">
@@ -943,7 +956,7 @@ Jeder Kilometer weiter von der Innenstadt entfernt senkt den Preis um 5.000.
 
 <!-- ============ SLIDE 09: REASONING-MODELLE ============ -->
 <section class="slide" data-slide-id="15">
-    <div class="slide-content" data-num="15 / 42">
+    <div class="slide-content" data-num="15 / 44">
         <span class="slide-eyebrow reveal d1">Eine neue Modell-Generation</span>
         <h2 class="slide-title reveal d2" style="font-size: 80px;" contenteditable="false">Reasoning-Modelle:<br>wenn die KI erst <span class="accent">nachdenkt.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 28px;" contenteditable="false">Ein klassisches LLM antwortet sofort. Reasoning-Modelle wie GPT-5 Thinking, Claude mit Extended Thinking oder DeepSeek-R1 schalten einen Zwischenschritt davor.</p>
@@ -976,7 +989,7 @@ Jeder Kilometer weiter von der Innenstadt entfernt senkt den Preis um 5.000.
 
 <!-- ============ SLIDE 10: SYSTEM-PROMPT, USER-PROMPT, CONTEXT ============ -->
 <section class="slide" data-slide-id="16">
-    <div class="slide-content" data-num="16 / 42">
+    <div class="slide-content" data-num="16 / 44">
         <span class="slide-eyebrow reveal d1">Was die KI bei jeder Anfrage sieht</span>
         <h2 class="slide-title reveal d2" contenteditable="false">System-Prompt,<br>User-Prompt, <span class="accent">Context.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 28px;" contenteditable="false">Ein LLM hat kein eigenes Gedächtnis. Bei jeder einzelnen Anfrage wird der komplette bisherige Verlauf neu mitgeschickt.</p>
@@ -1084,7 +1097,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 13: WOHER KOMMT DAS WISSEN ============ -->
 <section class="slide" data-slide-id="20">
-    <div class="slide-content" data-num="20 / 42" style="justify-content: center;">
+    <div class="slide-content" data-num="20 / 44" style="justify-content: center;">
         <span class="slide-eyebrow reveal d1">Die entscheidende Klarstellung</span>
         <h2 class="slide-title reveal d2" style="font-size: 76px; max-width: 1500px;" contenteditable="false">Ein LLM schlägt<br>nichts in einer <span class="accent">Datenbank</span> nach.</h2>
         <p class="slide-lead reveal d3" style="font-size: 30px; max-width: 1500px; margin-bottom: 0;" contenteditable="false">Das Wissen ist nicht abgelegt wie in einem Lexikon, sondern <strong style="color: var(--paper);">komprimiert</strong> in den Parametern – ungefähr so, wie Sie den groben Inhalt eines Buches wiedergeben können, ohne die exakten Seiten vor sich zu haben.</p>
@@ -1094,7 +1107,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 14: MODELL-LANDSCHAFT ============ -->
 <section class="slide" data-slide-id="21">
-    <div class="slide-content" data-num="21 / 42">
+    <div class="slide-content" data-num="21 / 44">
         <span class="slide-eyebrow reveal d1">Modell-Landschaft</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Nicht nur <span class="accent">ein</span> LLM.</h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 28px;" contenteditable="false">Hinter dem Begriff „KI-Chatbot" stecken ganz unterschiedliche Modelle – gebaut von unterschiedlichen Firmen, mit unterschiedlichen Stärken.</p>
@@ -1113,7 +1126,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 15: WER BAUT SIE, WAS UNTERSCHEIDET SIE ============ -->
 <section class="slide" data-slide-id="22">
-    <div class="slide-content" data-num="22 / 42">
+    <div class="slide-content" data-num="22 / 44">
         <span class="slide-eyebrow reveal d1">Wettbewerb &amp; Vielfalt</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Wer baut sie – und was<br>macht den <span class="accent">Unterschied?</span></h2>
         <div class="pain-grid">
@@ -1144,7 +1157,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 16: GESCHÄFTSMODELL ============ -->
 <section class="slide" data-slide-id="23">
-    <div class="slide-content" data-num="23 / 42">
+    <div class="slide-content" data-num="23 / 44">
         <span class="slide-eyebrow reveal d1">Geschäftsmodell</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Womit verdienen die<br>großen KI-Firmen ihr <span class="accent">Geld?</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 21px; margin-bottom: 28px;" contenteditable="false">Über mehrere Kanäle gleichzeitig – aber kaum eine Firma ist damit heute schon profitabel.</p>
@@ -1221,7 +1234,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 18: WO FINDE ICH DIESE MODELLE ============ -->
 <section class="slide" data-slide-id="25">
-    <div class="slide-content" data-num="25 / 42">
+    <div class="slide-content" data-num="25 / 44">
         <span class="slide-eyebrow reveal d1">Portale &amp; Zugänge</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Wo Sie diese Modelle<br><span class="accent">finden.</span></h2>
         <div class="feature-grid reveal d3">
@@ -1249,7 +1262,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 19: CHATBOT -> AGENT LEITER ============ -->
 <section class="slide" data-slide-id="27">
-    <div class="slide-content" data-num="27 / 42">
+    <div class="slide-content" data-num="27 / 44">
         <span class="slide-eyebrow reveal d1">Vom Chatbot zum Agenten</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Eine <span class="accent">Eskalationsleiter.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 32px;" contenteditable="false">Ein einzelner Agent ist ein Mitarbeiter. Ein Schwarm ist eine kleine Abteilung – mit Chef, Rechercheur und Qualitätskontrolle.</p>
@@ -1264,7 +1277,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 20: MCP ============ -->
 <section class="slide" data-slide-id="28">
-    <div class="slide-content" data-num="28 / 42">
+    <div class="slide-content" data-num="28 / 44">
         <span class="slide-eyebrow reveal d1">Model Context Protocol</span>
         <h2 class="slide-title reveal d2" contenteditable="false">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></h2>
         <p class="slide-lead reveal d3" contenteditable="false">Früher brauchte man für jedes Gerät ein eigenes Kabel; heute passt ein Anschluss für alles. Genauso muss man dank <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 – Mail, Dateien, Datenbanken, Firmensysteme – statt für jedes Tool eine eigene Extra-Lösung zu bauen.">MCP</span> nicht mehr für jedes Tool eine Extra-Bastellösung bauen.</p>
@@ -1298,7 +1311,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 21: SCHWÄCHEN FEATURE-GRID ============ -->
 <section class="slide" data-slide-id="30">
-    <div class="slide-content" data-num="30 / 42">
+    <div class="slide-content" data-num="30 / 44">
         <span class="slide-eyebrow reveal d1">Das Herzstück</span>
         <h2 class="slide-title reveal d2" style="font-size: 80px;" contenteditable="false">KI berechnet<br>Wahrscheinlichkeiten – sie <span class="accent">versteht nicht.</span></h2>
         <div class="feature-grid reveal d3">
@@ -1314,7 +1327,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 22: HALLUZINATION IM DETAIL ============ -->
 <section class="slide" data-slide-id="31">
-    <div class="slide-content" data-num="31 / 42">
+    <div class="slide-content" data-num="31 / 44">
         <span class="slide-eyebrow reveal d1">Halluzination im Detail</span>
         <h2 class="slide-title reveal d2" style="font-size: 76px;" contenteditable="false">Man hat der KI doch<br>keine <span class="accent">Lügen</span> beigebracht?</h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 28px;" contenteditable="false">Stimmt. Niemand hat der KI das Lügen beigebracht – und trotzdem erfindet sie Dinge. Der Grund liegt in dem, wofür sie überhaupt trainiert wurde.</p>
@@ -1347,7 +1360,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 23: GROUNDING ============ -->
 <section class="slide" data-slide-id="32">
-    <div class="slide-content" data-num="32 / 42">
+    <div class="slide-content" data-num="32 / 44">
         <span class="slide-eyebrow reveal d1">Die Antwort auf Halluzination</span>
         <h2 class="slide-title reveal d2" style="font-size: 78px;" contenteditable="false"><span class="term" data-title="Grounding" data-def="Englisch für „Erdung“/„Verankerung“: Die KI-Antwort wird an überprüfbare, externe Fakten gebunden, statt frei aus dem trainierten Wissen zu generieren.">Grounding</span>: die KI an der<br>Realität <span class="accent">verankern.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 22px; margin-bottom: 28px;" contenteditable="false">Statt sich nur auf komprimiertes Trainings-Wissen zu verlassen, bekommt die KI aktuelle, geprüfte Fakten an die Hand – bevor sie antwortet.</p>
@@ -1451,7 +1464,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 24: SECURITY WEITERE PUNKTE ============ -->
 <section class="slide" data-slide-id="36">
-    <div class="slide-content" data-num="36 / 42">
+    <div class="slide-content" data-num="36 / 44">
         <span class="slide-eyebrow reveal d1">Security</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Worauf Sie als<br>Anwender <span class="accent">achten müssen.</span></h2>
         <div class="pain-grid">
@@ -1483,7 +1496,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 25: PRAKTISCHE TIPPS ============ -->
 <section class="slide" data-slide-id="38">
-    <div class="slide-content" data-num="38 / 42">
+    <div class="slide-content" data-num="38 / 44">
         <span class="slide-eyebrow reveal d1">Für den Alltag</span>
         <h2 class="slide-title reveal d2" contenteditable="false">Fünf <span class="accent">Praxis-Tipps.</span></h2>
         <div class="feature-grid reveal d3">
@@ -1498,7 +1511,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 
 <!-- ============ SLIDE 25B: AGENTEN SELBST BAUEN ============ -->
 <section class="slide" data-slide-id="39">
-    <div class="slide-content" data-num="39 / 42">
+    <div class="slide-content" data-num="39 / 44">
         <span class="slide-eyebrow reveal d1">Agenten selbst bauen</span>
         <h2 class="slide-title reveal d2">Ein Agent, gebaut in<br><span class="accent">Microsoft Copilot.</span></h2>
         <p class="slide-lead reveal d3" style="font-size: 19px; margin-bottom: 24px;">Kein Code nötig — die Bausteine aus diesem Vortrag stecken direkt in der Oberfläche. Ein durchgängiges Beispiel: der HR-Agent.</p>
@@ -1518,34 +1531,106 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
     </div>
 </section>
 
-<!-- ============ SLIDE 26: AUSBLICK ============ -->
+<!-- ============ SLIDE 25C: VIBE CODING ============ -->
 <section class="slide" data-slide-id="40">
-    <div class="slide-content" data-num="40 / 42">
+    <div class="slide-content" data-num="40 / 44">
-        <span class="slide-eyebrow reveal d1">Ausblick</span>
+        <span class="slide-eyebrow reveal d1">Praxisbeispiel</span>
-        <h2 class="slide-title reveal d2" contenteditable="false">Wohin die Reise<br>weiter <span class="accent">geht.</span></h2>
+        <h2 class="slide-title reveal d2">Vibe Coding: Programmieren<br>durch <span class="accent">Beschreiben.</span></h2>
-        <div class="counter-grid">
+        <p class="slide-lead reveal d3" style="font-size: 21px; margin-bottom: 28px;">Statt Zeile für Zeile Code zu tippen, beschreibt man in natürlicher Sprache, was entstehen soll — die KI schreibt, testet, korrigiert.</p>
-            <div class="counter-item reveal d3">
+        <div class="ladder-grid reveal d4" style="grid-template-columns: repeat(3, 1fr); margin-bottom: 24px;">
-                <span class="counter-value" style="font-size: 110px;">Agenten</span>
+            <div class="ladder-card"><span class="ladder-step">Stufe 1</span><div class="ladder-title">Autocomplete</div><div class="ladder-desc">Klassische Code-Vervollständigung (z. B. GitHub Copilot) — schlägt beim Tippen den nächsten Codeschnipsel vor.</div><div class="ladder-example"><strong>Beispiel</strong>Tippt man <code style="color: var(--paper); font-family: var(--font-mono); background: rgba(255,255,255,0.06); padding: 1px 5px; border-radius: 4px;">function berechneRabatt(</code>, schlägt die KI den Rest der Funktion vor.</div><span class="ladder-arrow">→</span></div>
-                <div class="counter-label" contenteditable="false">Von Assistent zu Akteur</div>
+            <div class="ladder-card"><span class="ladder-step">Stufe 2</span><div class="ladder-title">Chat-<br>Assistent</div><div class="ladder-desc">Im Chat beschreiben, was gebraucht wird — die KI liefert einzelne Code-Blöcke zum Einfügen.</div><div class="ladder-example"><strong>Beispiel</strong>„Schreib mir eine Funktion, die eine Telefonnummer validiert."</div><span class="ladder-arrow">→</span></div>
-                <div class="counter-caption" contenteditable="false">Assistenten werden zunehmend zu Agenten, die selbstständig Aufgaben erledigen.</div>
+            <div class="ladder-card"><span class="ladder-step">Stufe 3</span><div class="ladder-title">Agentic<br>Coding</div><div class="ladder-desc">Werkzeuge wie Claude Code oder Cursor bekommen ein Ziel, öffnen Dateien, schreiben Code, führen ihn aus und beheben Fehler eigenständig — der <span class="term" data-title="Agent" data-def="KI, die eigenständig ein Ziel in mehreren Schritten verfolgt, statt nur eine einzelne Frage zu beantworten.">Agent</span> aus Kapitel 4.</div><div class="ladder-example"><strong>Beispiel</strong>„Baue eine Login-Seite mit Formularvalidierung" — Ergebnis ist direkt lauffähig.</div></div>
         </div>
-            <div class="counter-item reveal d4">
+        <p class="reveal d5" style="font-size: 19px; color: var(--cancom-red); font-family: var(--font-display); font-weight: 600;">Dieses Deck ist ein Beispiel: Mitmach-Spiel, Tooltips, Sound und Konfigurator entstanden Schritt für Schritt im Dialog mit einer KI — nicht von Hand programmiert.</p>
-                <span class="counter-value" style="font-size: 110px;"><span class="term" data-title="Multimodal" data-def="Ein Modell verarbeitet und erzeugt mehrere Formate gleichzeitig: Text, Bild, Ton und Video – nicht nur eines.">Multimodal</span></span>
+    </div>
+</section>
+
+<!-- ============ SLIDE 26: AUSBLICK ============ -->
+<section class="slide" data-slide-id="41">
+    <div class="slide-content" data-num="41 / 44">
+        <span class="slide-eyebrow reveal d1">Ausblick</span>
+        <h2 class="slide-title reveal d2" style="font-size: 76px; margin-bottom: 20px;" contenteditable="false">Wohin die Reise<br>weiter <span class="accent">geht.</span></h2>
+        <div class="counter-grid" style="grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 28px 60px; min-height: 0;">
+            <div class="counter-item reveal d3">
+                <span class="counter-value" style="font-size: 62px;">Agenten</span>
+                <div class="counter-label" contenteditable="false">Von Assistent zu Akteur</div>
+                <div class="counter-caption" contenteditable="false">Assistenten werden zu Agenten, die Aufgaben selbstständig erledigen – und im Team als Schwarm.</div>
+            </div>
+            <div class="counter-item reveal d3">
+                <span class="counter-value" style="font-size: 62px;"><span class="term" data-title="Multimodal" data-def="Ein Modell verarbeitet und erzeugt mehrere Formate gleichzeitig: Text, Bild, Ton und Video – nicht nur eines.">Multimodal</span></span>
                 <div class="counter-label" contenteditable="false">Ein Modell, alle Formate</div>
                 <div class="counter-caption" contenteditable="false">Text, Bild, Ton und Video werden zum Standard eines einzigen Modells.</div>
             </div>
-            <div class="counter-item reveal d5">
+            <div class="counter-item reveal d4">
-                <span class="counter-value" style="font-size: 110px;">Lokal</span>
+                <span class="counter-value" style="font-size: 62px;">Lokal</span>
                 <div class="counter-label" contenteditable="false">Datenschutzfreundlich</div>
-                <div class="counter-caption" contenteditable="false">Lokale Modelle werden für Firmen und Privatnutzer wichtiger.</div>
+                <div class="counter-caption" contenteditable="false">Modelle laufen auf dem eigenen Rechner – Daten verlassen das Haus nicht mehr.</div>
+            </div>
+            <div class="counter-item reveal d4">
+                <span class="counter-value" style="font-size: 62px;">Überall</span>
+                <div class="counter-label" contenteditable="false">Eingebaut statt aufgerufen</div>
+                <div class="counter-caption" contenteditable="false">KI wandert ins Betriebssystem und in jede Anwendung – man „geht" nicht mehr zur KI.</div>
+            </div>
+            <div class="counter-item reveal d5">
+                <span class="counter-value" style="font-size: 62px;">Physisch</span>
+                <div class="counter-label" contenteditable="false">Raus aus dem Bildschirm</div>
+                <div class="counter-caption" contenteditable="false">Robotik und Fahrzeuge bekommen dieselben Modelle – KI beginnt zu handeln, nicht nur zu reden.</div>
+            </div>
+            <div class="counter-item reveal d5">
+                <span class="counter-value" style="font-size: 62px;">Reguliert</span>
+                <div class="counter-label" contenteditable="false">EU AI Act &amp; Nachweispflichten</div>
+                <div class="counter-caption" contenteditable="false">Firmen müssen künftig belegen, wo und wie sie KI einsetzen – Compliance wird Pflichtprogramm.</div>
             </div>
         </div>
+        <p class="reveal d6" style="font-size: 18px; color: var(--cancom-red); font-family: var(--font-display); font-weight: 600; margin-top: 24px;" contenteditable="false">Die offenen Fragen bleiben: Energiebedarf, Urheberrecht und die Frage, wem die Modelle eigentlich gehören.</p>
+    </div>
+</section>
+
+<!-- ============ SLIDE 26B: EU AI ACT ============ -->
+<section class="slide" data-slide-id="42">
+    <div class="slide-content" data-num="42 / 44">
+        <span class="slide-eyebrow reveal d1">Regulierung</span>
+        <h2 class="slide-title reveal d2" style="font-size: 76px; margin-bottom: 20px;">Der <span class="accent">EU AI Act</span>:<br>KI nach Risiko sortiert.</h2>
+        <p class="slide-lead reveal d3" style="font-size: 20px; margin-bottom: 26px;">Das weltweit erste umfassende KI-Gesetz. Es reguliert nicht die Technik, sondern den <strong style="color: var(--paper);">Anwendungsfall</strong> – je höher das Risiko für Menschen, desto strenger die Pflichten.</p>
+        <div class="ladder-grid reveal d4" style="margin-bottom: 24px;">
+            <div class="ladder-card" style="background: linear-gradient(180deg, rgba(228,0,43,0.14), rgba(0,0,0,0.15)); border-color: var(--cancom-red); padding: 24px 22px;">
+                <span class="ladder-step">Stufe 1 · Verboten</span>
+                <div class="ladder-title" style="font-size: 26px;">Inakzeptables<br>Risiko</div>
+                <div class="ladder-desc" style="font-size: 15px;">Komplett untersagt in der EU – unabhängig davon, wie gut die Technik funktioniert.</div>
+                <div class="ladder-example" style="font-size: 13px;"><strong>Beispiel</strong>Social Scoring, manipulative Systeme, Emotionserkennung am Arbeitsplatz.</div>
+            </div>
+            <div class="ladder-card" style="border-color: rgba(228,0,43,0.45); padding: 24px 22px;">
+                <span class="ladder-step">Stufe 2 · Streng geprüft</span>
+                <div class="ladder-title" style="font-size: 26px;">Hohes<br>Risiko</div>
+                <div class="ladder-desc" style="font-size: 15px;">Erlaubt, aber mit harten Auflagen: Dokumentation, Risikomanagement, menschliche Aufsicht.</div>
+                <div class="ladder-example" style="font-size: 13px;"><strong>Beispiel</strong>KI in Bewerbungsverfahren, Kreditvergabe, Medizin, kritischer Infrastruktur.</div>
+            </div>
+            <div class="ladder-card" style="padding: 24px 22px;">
+                <span class="ladder-step">Stufe 3 · Transparenz</span>
+                <div class="ladder-title" style="font-size: 26px;">Begrenztes<br>Risiko</div>
+                <div class="ladder-desc" style="font-size: 15px;">Hauptpflicht: offenlegen, dass KI im Spiel ist. Menschen sollen nicht getäuscht werden.</div>
+                <div class="ladder-example" style="font-size: 13px;"><strong>Beispiel</strong>Chatbots müssen sich zu erkennen geben, KI-Bilder und Deepfakes gekennzeichnet werden.</div>
+            </div>
+            <div class="ladder-card" style="opacity: 0.75; padding: 24px 22px;">
+                <span class="ladder-step">Stufe 4 · Frei</span>
+                <div class="ladder-title" style="font-size: 26px;">Minimales<br>Risiko</div>
+                <div class="ladder-desc" style="font-size: 15px;">Keine besonderen Auflagen – hier fällt der Großteil der heutigen Anwendungen hinein.</div>
+                <div class="ladder-example" style="font-size: 13px;"><strong>Beispiel</strong>Spam-Filter, Produktempfehlungen, KI in Computerspielen.</div>
+            </div>
+        </div>
+        <div class="aiact-facts reveal d5">
+            <div class="aiact-fact"><strong>Seit 08/2024</strong>in Kraft, Pflichten greifen gestaffelt bis 2027</div>
+            <div class="aiact-fact"><strong>Auch für Nicht-EU-Firmen</strong>sobald KI in der EU angeboten oder genutzt wird</div>
+            <div class="aiact-fact"><strong>Bis 35 Mio. € Bußgeld</strong>oder 7 % des weltweiten Jahresumsatzes</div>
+        </div>
+        <p class="reveal d6" style="font-size: 18px; color: var(--cancom-red); font-family: var(--font-display); font-weight: 600; margin-top: 20px;">Artikel 4 verlangt seit Februar 2025 KI-Kompetenz von Mitarbeitenden – genau deshalb sitzen Sie heute hier.</p>
     </div>
 </section>
 
 <!-- ============ SLIDE 27: GLOSSAR ============ -->
-<section class="slide" data-slide-id="41">
+<section class="slide" data-slide-id="43">
-    <div class="slide-content" data-num="41 / 42">
+    <div class="slide-content" data-num="43 / 44">
         <span class="slide-eyebrow reveal d1">Handout</span>
         <h2 class="slide-title reveal d2" style="font-size: 80px;" contenteditable="false">Glossar der<br>wichtigsten <span class="accent">Abkürzungen.</span></h2>
         <div class="glossary-list reveal d3">
@@ -1564,7 +1649,7 @@ Du bist ein hilfsbereiter <span class="str">Kundenservice-Assistent</span> für
 </section>
 
 <!-- ============ SLIDE 28: CLOSING ============ -->
-<section class="slide" data-slide-id="42">
+<section class="slide" data-slide-id="44">
     <div class="closing-slide">
         <div class="closing-top reveal d1">Take-away · KI verstehen</div>
         <h2 class="closing-headline reveal d2" contenteditable="false">
@@ -1685,6 +1770,8 @@ class SlidePresentation {
         this.stage = document.getElementById('deckStage');
         this.progress = document.getElementById('progressBar');
         this.hud = document.getElementById('hudCounter');
+        this.hudChapter = document.getElementById('hudChapter');
+        this.hudChapterSep = document.getElementById('hudChapterSep');
         this.setupStageScale();
         this.setupKeyboardNav();
         this.setupTouchNav();
@@ -1807,6 +1894,16 @@ class SlidePresentation {
         this.hud.textContent =
             String(this.currentSlide + 1).padStart(2, '0') + ' / ' +
             String(total).padStart(2, '0');
+
+        if (this.hudChapter) {
+            const activeSlide = this.visibleSlides[this.currentSlide];
+            const id = activeSlide ? parseInt(activeSlide.dataset.slideId, 10) : null;
+            const entry = (typeof SLIDE_MANIFEST !== 'undefined' && id) ?
+                SLIDE_MANIFEST.find((s) => s.id === id) : null;
+            const kapitel = entry && entry.kapitel !== '—' ? entry.kapitel : '';
+            this.hudChapter.textContent = kapitel;
+            if (this.hudChapterSep) this.hudChapterSep.style.display = kapitel ? '' : 'none';
+        }
     }
 }
 

nginx.conf

@@ -0,0 +1,39 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+
+    # Das Deck ist die Startseite — "/" öffnet direkt die Präsentation.
+    index ki-verstehen.html;
+
+    # Redirects relativ halten. Sonst baut nginx sie absolut zusammen und
+    # verliert dabei den gemappten Port (localhost/... statt localhost:8080/...).
+    absolute_redirect off;
+
+    # Das Deck ist eine einzige ~160 KB große HTML-Datei — gzip lohnt sich deutlich.
+    gzip on;
+    gzip_types text/html text/css application/javascript image/svg+xml;
+    gzip_min_length 1024;
+
+    # HTML/JS nicht cachen: Nach einem Deck-Update soll ein Reload sofort
+    # die neue Fassung zeigen, nicht die vom letzten Vortrag.
+    location ~* \.(html|js)$ {
+        add_header Cache-Control "no-cache, must-revalidate";
+    }
+
+    # Wenn jemand /config aufruft, auf die Konfigurator-Seite auflösen
+    location = /config {
+        return 302 /config.html;
+    }
+
+    location / {
+        try_files $uri $uri/ =404;
+    }
+
+    # Sicherheits-Basics. Bewusst keine strikte CSP: Das Deck lädt die
+    # Fonts von api.fontshare.com, eine zu enge Policy würde die Typografie brechen.
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header Referrer-Policy "no-referrer-when-downgrade" always;
+}

slides-manifest.js

@@ -44,9 +44,11 @@ const SLIDE_MANIFEST = [
     { id: 37, title: "Kapitel 7 · Praxis & Ausblick",            kapitel: "Praxis & Ausblick",           type: "divider" },
     { id: 38, title: "Praktische Tipps",                         kapitel: "Praxis & Ausblick",           type: "content" },
     { id: 39, title: "Agenten selbst bauen: Microsoft Copilot",   kapitel: "Praxis & Ausblick",           type: "content" },
-    { id: 40, title: "Ausblick",                                 kapitel: "Praxis & Ausblick",           type: "content" },
+    { id: 40, title: "Vibe Coding: KI-Unterstützung beim Programmieren", kapitel: "Praxis & Ausblick",   type: "content" },
-    { id: 41, title: "Glossar",                                  kapitel: "Praxis & Ausblick",           type: "content" },
+    { id: 41, title: "Ausblick",                                 kapitel: "Praxis & Ausblick",           type: "content" },
-    { id: 42, title: "Closing",                                  kapitel: "—",                          type: "content", locked: true },
+    { id: 42, title: "EU AI Act: KI nach Risiko sortiert",       kapitel: "Praxis & Ausblick",           type: "content" },
+    { id: 43, title: "Glossar",                                  kapitel: "Praxis & Ausblick",           type: "content" },
+    { id: 44, title: "Closing",                                  kapitel: "—",                          type: "content", locked: true },
 ];
 
 const SLIDE_CONFIG_STORAGE_KEY = 'cancomDeckSlideConfig';