diff --git a/slides/dhbw/01_web_eng.md b/slides/dhbw/01_web_eng.md
index 031c177..da914cc 100644
--- a/slides/dhbw/01_web_eng.md
+++ b/slides/dhbw/01_web_eng.md
@@ -9,48 +9,17 @@ title: Web Engineering
 ---
 
 <style>
-:root {
-  --color-foreground: #1a1a2e;
-  --color-highlight: #d63384;
-  --color-dimmed: #4a4a6a;
-}
-section.invert {
-  --color-foreground: #fff;
-}
-section {
-  font-size: 1.4rem;
-}
-h1 {
-  color: #a02060;
-}
-section.invert h1 {
-  color: #fff;
-}
-h2 {
-  color: #1f2937;
-}
-section.invert h2 {
-  color: #f48fb1;
-}
-pre {
-  background: #0f0f23;
-  color: #f48fb1;
-  border-radius: 8px;
-  border-left: 3px solid #d63384;
-}
-pre code {
-  background: transparent;
-  color: inherit;
-}
-code {
-  background: #1a1a2e;
-  color: #f48fb1;
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-a {
-  color: var(--color-highlight);
-}
+:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; }
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.4rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
+section.invert h2 { color: #f48fb1; }
+pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
+pre code { background: transparent; color: inherit; }
+code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
+a { color: var(--color-highlight); }
 </style>
 
 <!-- _class: invert -->
@@ -62,7 +31,6 @@ a {
 # Web Engineering
 
 **DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
 **Sommersemester 2026**
 
 ---
@@ -71,7 +39,7 @@ a {
 
 - **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
 - **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
-- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
+- **MDN** — [developer.mozilla.org](https://developer.mozilla.org/de/)
 - **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
 - **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
 
@@ -89,229 +57,117 @@ a {
 
 ![bg right:33% fit](./assets/logos/collage.png)
 
-**Michael Werner Czechowski**
+Michael Czechowski
 
-- Systems and Platform Engineer
-- Schwerpunkte:
-  - Web-Technologien, Barriere-Armut, Open Source
-- Hintergrund:
-  - Philosophie (Uni Stuttgart)
-  - Wirtschaftsinformatik (Leibniz-FH Hannover)
-- Honorardozent (DHBW Stuttgart, HdM Stuttgart, Leibniz-FH)
-- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de
+- Software Engineer, ehemals freischaffend
+- Lektor an HdM Stuttgart + DHBW
+- librete.ch
 
 ---
 
-# Vorlesungsplan
+# Vorlesungsplan (Auszug)
 
-<style scoped>
-.lp-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 10px;
-  margin-top: 0.5rem;
-}
-.lp-card {
-  border: 1px solid #d63384;
-  border-radius: 8px;
-  padding: 10px 12px;
-  background: #fff;
-  font-size: 0.95em;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.lp-card .head {
-  font-weight: bold;
-  color: #a02060;
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  font-size: 0.85em;
-}
-.lp-card .head .num {
-  font-size: 1.1em;
-}
-.lp-card .topic {
-  color: #1a1a2e;
-  line-height: 1.25;
-}
-.lp-card.milestone {
-  background: #fce4ec;
-  border-color: #a02060;
-  border-width: 2px;
-}
-.lp-card.milestone .topic {
-  font-weight: bold;
-}
-</style>
-
-<div class="lp-grid">
-  <div class="lp-card"><div class="head"><span class="num">1</span><span>08.05.</span></div><div class="topic">Intro · Projektgruppen · Internet 101</div></div>
-  <div class="lp-card"><div class="head"><span class="num">2</span><span>15.05.</span></div><div class="topic">HTML und CSS (Frameworks)</div></div>
-  <div class="lp-card"><div class="head"><span class="num">3</span><span>22.05.</span></div><div class="topic">JS (Frameworks) und npm</div></div>
-  <div class="lp-card"><div class="head"><span class="num">4</span><span>29.05.</span></div><div class="topic">nodeJS: Scripting, Running, Building</div></div>
-  <div class="lp-card"><div class="head"><span class="num">5</span><span>05.06.</span></div><div class="topic">Express API, CRUD, Middlewares</div></div>
-  <div class="lp-card milestone"><div class="head"><span class="num">6</span><span>12.06.</span></div><div class="topic">Projektwerkstattbericht</div></div>
-  <div class="lp-card"><div class="head"><span class="num">7</span><span>19.06.</span></div><div class="topic">Testing (Unit · Integration · E2E)</div></div>
-  <div class="lp-card"><div class="head"><span class="num">8</span><span>26.06.</span></div><div class="topic">TypeScript</div></div>
-  <div class="lp-card"><div class="head"><span class="num">9</span><span>03.07.</span></div><div class="topic">Docker · Proxies · DBs</div></div>
-  <div class="lp-card"><div class="head"><span class="num">10</span><span>10.07.</span></div><div class="topic">Wrap-up & Projektsupport</div></div>
-  <div class="lp-card milestone"><div class="head"><span class="num">11</span><span>17.07.</span></div><div class="topic">Präsentation</div></div>
-</div>
+| Termin | Thema |
+|--------|-------|
+| 1 | Web Engineering (heute) |
+| 2 | CSS Extended |
+| 3 | Node.js Basics |
+| 4 | Node.js Advanced |
+| 5 | Testing |
+| 6 | TypeScript |
+| 7 | Docker |
+| 8 | Best Practices |
 
 ---
 
-# Prüfungsleistung – Übersicht
+# Prüfungsleistung — 75 P + 10 Bonus
 
-Eigenes Projekt: **Web-App** ODER **Backend** (API/CLI — Command-Line Interface).
+**Projekt-Abgabe** statt Klausur.
 
-**Grundanforderungen (75 Punkte)**
-
-| Punkte | Bereich |
-|--------|---------|
-| 20 | Idee, Konzeption, Planung |
-|  5 | Plattformunabhängigkeit |
-| 25 | Clean Code (KISS, SOLID, DI, Testing, Error Handling) |
-| 15 | Präsentation |
-| 10 | Dokumentation |
-
-**Zusatzpunkte (max. 10):** TypeScript, Docker, Dev/Prod-Parity, `.env`, npm-Publish, Domain, HTTPS, Responsive Design.
+| Bereich | Punkte |
+|---------|-------:|
+| Projekt-Struktur + README | 10 |
+| Code-Qualität | 15 |
+| Git-Hygiene | 10 |
+| Tests | 10 |
+| Docker | 10 |
+| HTTP / API | 10 |
+| Frontend + A11y | 10 |
+| Präsentation + Bonus | 5 + 10 |
 
 ---
 
-# Prüfungsleistung – Idee & Konzeption (20 P.)
+<!-- _class: lead -->
 
-- "Powerpoint"-Präsentation + Folien
-- Aussagekräftiger Arbeitstitel + Beschreibung
-- **Elevator Pitch** (max. 1 Min.)
-- Repo-Link (GitHub / GitLab / Codeberg / BitBucket)
-- **Logs**: wie hat sich Projekt verändert vs. Ursprungsidee?
-- Schematischer Projektaufbau (UML o. Ä.)
-
----
-
-# Prüfungsleistung – Clean Code (25 P.)
-
-- `README.md` (clone, start, contribute)
-- **KISS** – Keep It Simple, Stupid
-- **SOLID:**
-  - **S**ingle Responsibility Principle
-  - **O**pen/Closed Principle
-  - **L**iskov Substitution Principle
-  - **I**nterface Segregation Principle
-  - **D**ependency Inversion Principle
-- **DI** – Dependency Injection
-- **Testing-Pyramide** (Unit, Integration, E2E)
-- **Exception/Error Handling**
-
----
-
-# Prüfungsleistung – Abgabe & Termine
-
-- **Code-Upload:** bis 27.07.
-- **Präsentation:** 17.07. (Gruppen, ~10 Min.)
-
-Details: https://librete.ch/DHBW/pruefungsleistung
+# Kontext: was ist „das Web"?
 
 ---
 
 # Internet-Timeline
 
-| Jahr | Meilenstein |
-|------|-------------|
-| **1966** | ARPANET-Projekt startet (DARPA) |
-| **1969** | Erste Verbindung zwischen UCLA und Stanford |
-| **1974** | TCP/IP-Protokoll entwickelt |
-| **1989** | Tim Berners-Lee erfindet das WWW (CERN) |
-| **1993** | Mosaic — erster grafischer Browser |
-| **1994** | W3C gegründet (HTML, CSS, SVG, WCAG) |
-| **1995** | ECMAScript / JavaScript wird Standard |
-| **2008** | V8 JavaScript Engine (Chrome / Node.js) |
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/arpanet.jpg)
+| Jahr | Was |
+|------|-----|
+| 1969 | ARPANET — 4 Knoten |
+| 1971 | Email (Ray Tomlinson, `@`) |
+| 1983 | TCP/IP-Standard |
+| **1989** | **WWW** (Berners-Lee, CERN) |
+| 1993 | Mosaic-Browser → Web wird populär |
 
 ---
 
 # Das WWW (1989)
 
-**Tim Berners-Lee** am **CERN** (Genf)
+**Tim Berners-Lee am CERN.** Drei Standards:
 
-**Problem:** Wissenschaftler:innen können Forschungsdokumente nicht verlinken — Inkompatible Systeme, kein gemeinsames Format.
+- **HTTP** — Protokoll
+- **HTML** — Format
+- **URL** — Adresse
 
-**Lösung — drei Bausteine:**
-
-- **HTML** — Auszeichnungssprache für Dokumente
-- **HTTP** — Protokoll zur Übertragung
-- **URL** — eindeutige Adressen
-
-**1991:** erste Webseite geht online · 1993 vom CERN gemeinfrei freigegeben.
-
-→ WWW ≠ Internet. Das WWW ist eine **Anwendung auf** dem Internet.
+Patentfrei → Web konnte explodieren.
 
 ---
 
-<!-- _header: '' -->
-<!-- _footer: '' -->
+# Heute: physische Infrastruktur
 
-![bg fit](./assets/mosaic.jpg)
+- ~400 Unterseekabel
+- 1,3 Mio km Glasfaser weltweit
+- DE-CIX Frankfurt: größter Internet-Knoten (~12 Tbit/s)
+
+Das Web ist **physisch.**
 
 ---
 
-<!-- _header: '' -->
-<!-- _footer: '' -->
+# URL → Pixel in 7 Schritten
 
-![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
+1. **URL parsen** — Schema, Host, Port, Path
+2. **DNS-Lookup** — Host-Name → IP
+3. **TCP-Handshake** mit Server
+4. **TLS-Handshake** (https)
+5. **HTTP-Request** senden
+6. Server antwortet mit **HTML + CSS + JS**
+7. Browser **parsed + rendert** → Pixel
 
 ---
 
-# Heute: Physische Infrastruktur
+# HTTP — Anatomie
 
-- **5,5 Milliarden** Menschen online
-- **> 400 Unterseekabel**, ca. **1,3 Mio. km** Glasfaser
-- Daten reisen mit **Lichtgeschwindigkeit**
-- Latenz Frankfurt — New York: ~80 ms
+```http
+GET /index.html HTTP/1.1
+Host: librete.ch
+User-Agent: Mozilla/5.0 ...
 
-→ Keine "Cloud" ohne Kabel. Das Internet ist **physische** Infrastruktur — und damit angreifbar.
-
-**Geopolitik:** Five-Eyes-Allianz (USA, UK, CA, AU, NZ) zapft Unterseekabel ab (Programm "Tempora", aufgedeckt 2013 durch Snowden). DE ist Teil der Fourteen Eyes.
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/browser-server-sequence.png)
-
-
----
-
-# HTTP – Hypertext Transfer Protocol
-
-**Request:**
-```
-GET /products HTTP/1.1
-Host: localhost:8080
-```
-
-**Response:**
-```
 HTTP/1.1 200 OK
-Content-Type: application/json
+Content-Type: text/html
+Content-Length: 1234
 
-[{"id": 1, "name": "Produkt A"}, ...]
+<!DOCTYPE html>...
 ```
 
+**Statuscodes:** 200 OK · 301 Moved · 404 Not Found · 500 Server Error
+
 ---
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
 # Onboarding
 ## Tools, Runtimes, Workflows
@@ -320,1190 +176,511 @@ Content-Type: application/json
 
 # Werkzeuge & Betriebssystem
 
-**Erforderliche Werkzeuge:**
-- **Terminal** (zsh / bash / fish / pwsh) — Kommandozeile
-- **Editor** (siehe folgende Folie)
-- **JavaScript-Runtime** (Node.js / Bun / Deno)
-- **Browser mit DevTools** (Chromium / Firefox / Safari)
-- **Git** — verteiltes Versionskontrollsystem (Stand der Industrie)
-
-**OS-Empfehlung:**
-
-| OS | Status |
-|----|--------|
-| **macOS** | First-class, viele Tools "just work" |
-| **Linux** | First-class, beste Server-Parität |
-| **Windows + WSL2** | Empfohlen — Windows-CLI hat Edge Cases |
-| **Windows nativ** (PowerShell) | Funktioniert, aber holpriger Pfad |
+| Bereich | Empfehlung |
+|---------|------------|
+| Editor | **VS Code** · JetBrains (edu lizenz frei) |
+| Browser | **Chromium / Firefox** |
+| Terminal | macOS Terminal · Linux Terminal · Windows Terminal |
+| Paket-Manager | macOS: brew · Linux: apt/dnf · Windows: winget/scoop/choco |
+| Versions-Control | Git + GitHub/Gitea |
 
 ---
 
-# Node.js installieren – macOS
+# Node.js installieren
 
-Empfohlen: **LTS** (aktuell **Node.js 24** — Stand 2026).
+**Best Practice:** Versions-Manager statt Direkt-Install.
 
-Paketmanager: **[Homebrew](https://brew.sh)**
+| OS | Empfehlung |
+|----|------------|
+| macOS | `brew install fnm` → `fnm install --lts` |
+| Linux | `curl -fsSL https://fnm.vercel.app/install \| bash` |
+| Windows | `winget install Schniz.fnm` |
 
-```bash
-# Homebrew installieren (falls nicht vorhanden)
-/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-
-# Node.js LTS installieren
-brew install node@24
-
-# Version prüfen
-node --version
-npm --version
-```
-
-Alternative: Installer von [nodejs.org](https://nodejs.org)
+**Aktuelle LTS:** Node 24.
 
 ---
 
-# Node.js installieren – Linux
+# Warum Versions-Manager?
 
-Empfohlen: **LTS** (aktuell **Node.js 24**).
+**Direkt-Install** (z.B. `brew install node`) bringt Probleme:
+- Projekt-A braucht Node 18, Projekt-B braucht Node 22 → Konflikt
+- Update bricht alte Projekte
+- Kein automatisches Switching pro Projekt
 
-**Debian / Ubuntu** ([NodeSource](https://github.com/nodesource/distributions)):
-```bash
-curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
-sudo apt install -y nodejs
-```
-
-**Arch / Manjaro:**
-```bash
-sudo pacman -S nodejs npm
-```
-
-**Fedora / RHEL:**
-```bash
-sudo dnf module install nodejs:24/common
-```
-
-→ Distro-Pakete sind oft **veraltet**. Versionsmanager (folgende Folie) bevorzugen.
-
----
-
-# Node.js installieren – Windows
-
-Empfohlen: **LTS** (aktuell **Node.js 24**).
-
-**Option 1: winget** (empfohlen, Win 10/11):
-```powershell
-winget install OpenJS.NodeJS.LTS
-```
-
-**Option 2: Chocolatey** ([chocolatey.org](https://chocolatey.org)):
-```powershell
-choco install nodejs-lts
-```
-
-**Option 3: Scoop** ([scoop.sh](https://scoop.sh)):
-```powershell
-scoop install nodejs-lts
-```
-
-**Option 4:** Installer von [nodejs.org](https://nodejs.org)
-
-→ **Empfehlung:** WSL2 + Linux-Workflow nutzen.
-
----
-
-# Direkt-Install: Wenn es eng wird
-
-**Typisches Szenario** — drei parallele Projekte mit unterschiedlichen Anforderungen:
-
-| Projekt | Stack | Node-Version |
-|---------|-------|--------------|
-| Praktikums-API | Express (Legacy) | 18.x (LTS Hydrogen) |
-| Studienarbeit | Next.js 15 | 22.x (LTS Jod) |
-| Aktuelles Lab-Projekt | neueste Features | 24.x (Iron, current LTS) |
-
-System-Install kennt nur **eine** Node-Version global → Konflikt.
-
----
-
-# Symptome im Alltag
-
-- `npm install` bricht mit `engines`-Warning ab
-- native Module (z. B. `node-sass`) bauen nicht
-- CI-Pipeline ist grün, lokal rot — oder umgekehrt
-- erheblicher Zeitverlust beim Debuggen von Versions-Konflikten
-
-→ Lösung: **Versionsmanager** und Node-Version pro Projekt pinnen.
-
----
-
-# Node-Versionsmanager
-
-Verschiedene Projekte brauchen oft verschiedene Node-Versionen. **Lösung:** Versionsmanager.
-
-| Tool | Sprache | Geschwindigkeit | Plattform |
-|------|---------|-----------------|-----------|
-| **nvm** | Bash | langsam (Shell-Funktion) | macOS, Linux |
-| **fnm** | Rust | sehr schnell | macOS, Linux, Windows |
-| **asdf** | Bash | mittel, multi-language | macOS, Linux |
-| **volta** | Rust | schnell, pinning per `package.json` | alle |
-
-```bash
-# fnm
-curl -fsSL https://fnm.vercel.app/install | bash
-fnm install --lts        # aktuell Node 24
-fnm use lts-latest
-
-# .nvmrc / .node-version automatisch
-echo "lts/*" > .nvmrc
-fnm use   # liest .nvmrc
-```
+**fnm / nvm / volta:** pro Projekt Node-Version, automatisch via `.nvmrc`.
 
 ---
 
 # Alternative Runtimes
 
-| Runtime | Erschienen | Engine | USP |
-|---------|------------|--------|-----|
-| **Node.js** | 2009 | V8 (C++) | Standard, größtes Ökosystem |
-| **Deno** | 2020 | V8 (Rust) | Sicherheit, TypeScript nativ, Std-Lib |
-| **Bun** | 2022 | JavaScriptCore (Zig) | Geschwindigkeit, all-in-one |
+| Runtime | Stärke |
+|---------|--------|
+| **Node** | Standard, größtes Ökosystem |
+| **Deno** | Sicher by default, TypeScript nativ |
+| **Bun** | Schnell, all-in-one (runtime + bundler + tester) |
 
-```bash
-# Deno
-curl -fsSL https://deno.land/install.sh | sh
-deno run main.ts
-
-# Bun
-curl -fsSL https://bun.sh/install | bash
-bun install
-bun run dev
-```
-
-→ Im Kurs primär **Node.js**. Bun und Deno sind ebenfalls zulässig.
-
----
-
-# Editor
-
-- **VS Code** (empfohlen) — kostenlos, große Plugin-Auswahl
-- **JetBrains WebStorm** — sehr mächtig, kostenpflichtig
-  - kostenlos für Studierende via [JetBrains Education](https://www.jetbrains.com/community/education/#students)
-- **Vim / Neovim / Emacs** — für CLI-Profis
-- **Zed** — modern, schnell
+Für DHBW-Kurs: **Node 24 LTS.**
 
 ---
 
 # Browser DevTools
 
-Chromium / Firefox / Safari — `F12` oder `Cmd+Opt+I`
+**F12** öffnet das Power-Tool jeder Webentwicklung.
 
-<small>Chromium = Open-Source-Basis von Chrome, Edge, Brave, Opera, Vivaldi etc.</small>
-
-**Wichtigste Panels:**
-- **Network** — HTTP-Requests, Responses, Timing
-- **Console** — `console.log`, JS-Errors, REPL
-- **Elements** — DOM-Inspektor, Live-CSS-Editor
-- **Sources** — Debugger, Breakpoints, Source-Maps
-- **Performance** — Profiling, Frame-Rate, FPS
-- **Application** — LocalStorage, Cookies, Service Workers
+| Tab | Wofür |
+|-----|-------|
+| Elements | DOM-Baum inspizieren + live editieren |
+| Console | JS ausführen, Errors lesen |
+| Network | HTTP-Requests sehen, Latenz |
+| Performance | Render + Memory profilen |
+| Lighthouse | A11y · SEO · Perf-Audit |
 
 ---
 
 # HTTP-Clients
 
-- **Bruno** ([usebruno.com](https://usebruno.com)) — open source, git-friendly
-- **Hoppscotch** ([hoppscotch.io](https://hoppscotch.io)) — open source, browser-basiert (vormals Postwoman)
-- **Insomnia** / **Postman** — etabliert, freemium
-- **curl** / **httpie** — CLI (Command-Line Interface, scriptbar)
+Tools zum Testen von APIs:
+
+- **curl** — CLI, überall
+- **Hoppscotch** — Browser, Open Source
+- **Postman** — GUI, kommerziell
+- **VS Code REST Client** — Plugin
 
 ---
 
-# Git Setup & Workflow
+# Git Setup
 
-**Einmalige Konfiguration:**
-```bash
-git config --global user.name "Vorname Nachname"
-git config --global user.email "vorname.nachname@example.com"
+```sh
+git config --global user.name "Dein Name"
+git config --global user.email "du@dhbw.de"
 git config --global init.defaultBranch main
-git config --global pull.rebase true
+git config --global core.autocrlf input   # Windows: true
 ```
 
-**SSH-Key für GitHub/GitLab:**
-```bash
-ssh-keygen -t ed25519 -C "vorname.nachname@example.com"
-cat ~/.ssh/id_ed25519.pub   # → in GitHub-Settings einfügen
-```
-
-**Tägliche Befehle:**
-```bash
-git status                  # was hat sich geändert?
-git add <file>              # für Commit vormerken
-git commit -m "feat: ..."   # Conventional Commits
-git push                    # hochladen
-git pull --rebase           # neueste Änderungen holen
+**SSH-Key** für GitHub/Gitea ohne Passwort-Prompt:
+```sh
+ssh-keygen -t ed25519 -C "du@dhbw.de"
+cat ~/.ssh/id_ed25519.pub  # zu GitHub kopieren
 ```
 
 ---
 
 # Projekt-Skeleton
 
-```bash
-mkdir mein-projekt && cd mein-projekt
-git init
-npm init -y                 # erzeugt package.json
-echo "node_modules" > .gitignore
-echo ".env" >> .gitignore
-npm install express
 ```
-
-**`package.json` minimal:**
-```json
-{
-  "name": "mein-projekt",
-  "version": "0.1.0",
-  "type": "module",
-  "scripts": {
-    "start": "node index.js",
-    "dev": "node --watch index.js"
-  }
-}
+mein-projekt/
+├── .git/
+├── .gitignore       # node_modules/, .env, build/
+├── README.md        # was, wie, warum
+├── package.json     # npm metadata + scripts
+├── src/             # eigener Code
+├── public/          # statische Assets (für Web)
+├── tests/           # Unit + Integration
+└── Dockerfile       # für Container-Deploy
 ```
 
-`.env` für Secrets (nie committen!), `.env.example` mit Dummy-Werten committen.
-
 ---
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# HTML – Hypertext Markup Language
+# HTML
+## Hypertext Markup Language
 
 ---
 
-# Was ist HTML? (1/2)
+# Was ist HTML?
 
-**H**yper**T**ext **M**arkup **L**anguage
+**Tim Berners-Lee, 1989.** Struktur-Format des Webs.
 
-- **Keine** Programmiersprache
-- Am ehesten eine Formattierungssprache
-- Beschreibt **Struktur und Aufbau** einer Webseite
+**Syntax:** Tags mit Attributen umfassen Inhalt.
+**Browser parst HTML** → DOM (Document Object Model) → rendert.
+
+Plain-Text mit Tags. Lesbar mit jedem Editor.
+
+---
+
+# HTML-Anatomie
 
 ```html
-<p>Das ist ein Absatz.</p>
-<input type="date" />
+<a href="https://librete.ch" target="_blank">Mein Link</a>
 ```
 
-Erfunden 1989 von Tim Berners-Lee. Aktuelle Version: HTML5 (seit 2014).
+- `<a` — Opening-Tag mit Tag-Namen
+- `href="..."` — Attribut (Name + Wert)
+- `Mein Link` — Inhalt
+- `</a>` — Closing-Tag
+- Alles zusammen = **Element**
 
 ---
 
-# Was ist HTML? (2/2)
-
-- Mit HTML werden **HTML-Dokumente** beschrieben (`index.html`)
-- Ein HTML-Dokument beschreibt das **Document Object Model (DOM)**
-- Der DOM ist eine **hierarchische Baumstruktur** (Eltern, Kinder, Geschwister)
-  - *parent* nodes / elements
-  - *child* nodes / elements
-  - *sibling* nodes / elements
-
-<small>In HTML sprechen wir von **Elementen**, in JavaScript eher von **Nodes**.</small>
-
----
-
-# HTML-Anatomie (1/2)
-
-```
-   Opening tag                       Closing tag
-       │                                   │
-       ▼                                   ▼
-      <p>  My cat is very grumpy  </p>
-            └────────┬─────────┘
-                  Content
-       └─────────────────────────────────┘
-                  Element
-```
-
-- **Opening tag** + **Content** + **Closing tag** = **Element**
-- Öffnende und schließende Tags müssen identisch sein
-- Schließendes Tag hat ein `/` nach der Spitzklammer
-
----
-
-# HTML-Anatomie — Attribute
-
-```
-                    Attribute
-                ┌───────────────┐
-   <p  class="editor-note">  My cat is very grumpy  </p>
-```
-
-- **Attribute** stehen im opening tag
-- Format: `name="wert"` (Anführungszeichen empfohlen)
-- Mehrere Attribute durch Leerzeichen getrennt: `<input type="text" name="email" required>`
-
----
-
-# HTML-Anatomie (2/2)
-
-Wir unterscheiden **umschließende** und **selbst-schließende** Tags.
-
-**Umschließend:**
-- `<b> ... </b>` – fett-gedruckter Text (inline)
-- `<a> ... </a>` – Hyperlink
-- `<body> ... </body>` – sichtbarer Teil eines HTML-Dokuments
-- `<details> ... </details>` – Aufklapp-Text / Akkordion
-
-**Selbst-schließend:**
-- `<img />` – Bild, Vektorgrafik
-- `<input />` – Eingabefeld
-- `<meta />` – Metadaten
-
----
-
-# Darstellungsebene und Metadaten
+# Self-closing Tags
 
 ```html
-<html>
-  <head>
-    METADATEN
-  </head>
-  <body>
-    DARSTELLUNGSEBENE
-  </body>
-</html>
+<img src="foto.jpg" alt="Sonnenuntergang">
+<br>
+<input type="text" name="username">
+<meta charset="utf-8">
+<link rel="stylesheet" href="style.css">
 ```
 
-Ein HTML-Dokument besteht aus zwei Teilen:
-- `<head> ... </head>` – Metadaten für Browser, Suchmaschinen, Social Sharing
-- `<body> ... </body>` – darzustellender Inhalt, Text, Formulare
+Kein Closing-Tag. Inhalt aus Attributen + (für `<input>`) User-Eingabe.
 
 ---
 
-# HTML Metadaten
-
-```html
-<html>
-  <head>
-    <title>DHBW Stuttgart</title>
-    <meta name="description" content="Studium mit Praxis" />
-    <meta property="og:image" content="https://...." />
-  </head>
-  ...
-</html>
-```
-
-<small>*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.*</small>
-
----
-
-# HTML Metadaten – Vertiefung
-
-| Tag | Funktion |
-|-----|----------|
-| `<title>` | Browser-Tab, Suchergebnis-Titel |
-| `<meta charset>` | Zeichenkodierung (Umlaute!) |
-| `<meta viewport>` | Mobile Darstellung |
-| `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) |
-
-**Open Graph** (Social-Media-Vorschau):
-```html
-<meta property="og:title" content="Artikel-Titel">
-<meta property="og:image" content="https://example.com/preview.jpg">
-```
-
-→ Wirkt auf Mastodon, LinkedIn, Signal, Slack, MS Teams ...
-
-**SEO:** Google nutzt `<title>` + `<meta description>` für Ranking + Snippet.
-
----
-
-# HTML-Tags und Attribute
-
-![bg right:35%](./assets/demos/tag-attribut.png)
-
-```html
-<body>
-  <p class="wichtig">Das ist ein wichtiger Absatz.</p>
-  <p>Das ist ein gewöhnlicher Absatz.</p>
-</body>
-```
-
-| Teil | Bezeichnung |
-|------|-------------|
-| `<p>` | Opening Tag |
-| `class="wichtig"` | Attribut |
-| `Das ist ein wichtiger Absatz.` | Inhalt |
-| `</p>` | Closing Tag |
-
----
-
-# HTML-Tags und Attribute (selbst-schließend)
-
-![bg right:35%](./assets/demos/input-date.png)
-
-```html
-Geburtsdatum <input type="date" />
-```
-
-| Teil | Bezeichnung |
-|------|-------------|
-| `<input ...` | Eingabefeld |
-| `type="date"` | Attribut *type* mit Wert *date* |
-| `... />` | Schließendes `/` im (öffnenden) Tag |
-
----
-
-# Vollständiges Grundgerüst
-
-![bg right:35%](./assets/demos/grundgeruest.png)
+# Document-Grundgerüst
 
 ```html
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <title>Portfolio von ...</title>
-  <meta name="description" content="..." />
-  <meta property="og:image" content="https://...." />
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Meine Seite</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
-  <h1>Hallo Welt!</h1>
-  <p>Das ist mein erster Absatz.</p>
+  <h1>Hallo Welt</h1>
 </body>
 </html>
 ```
 
 ---
 
-# Die wichtigsten Tags
+# Semantische HTML-Tags
 
 | Tag | Bedeutung |
 |-----|-----------|
-| `<h1>` … `<h6>` | Überschriften (h1 = größte) |
-| `<p>` | Absatz (Paragraph) |
-| `<a href="..."> ... </a>` | Hyperlink |
-| `<img src="..." />` | Bild |
-| `<ul>`, `<ol>`, `<li>` | Listen |
-| `<div>` | Container / Box |
-| `<span>` | Inline-Container |
-| `<input type="...">` | Eingabefeld |
+| `<header>` | Kopfbereich (Logo, Nav) |
+| `<nav>` | Navigation |
+| `<main>` | Hauptinhalt |
+| `<section>` | Thematischer Abschnitt |
+| `<article>` | eigenständiger Inhalt |
+| `<aside>` | Seiten-Inhalt |
+| `<footer>` | Fußbereich |
 
-<small>Semantische Tags (`<header>`, `<main>`, `<article>`, `<footer>`, `<nav>`, `<aside>`) wichtig für Accessibility.</small>
+**Pflicht** für SEO + A11y + Wartbarkeit.
 
 ---
 
-# Natives HTML
+# Native HTML-Elemente — nicht vergessen!
 
-Was früher mit JavaScript gelöst wurde, kann HTML heute selbst. JS dafür einzusetzen ist heute oft ein **Code Smell**.
+Bevor du eine Custom-Component baust: **gibt's das schon nativ?**
 
-| Funktion | HTML-Element |
-|----------|--------------|
-| Aufklapp-Text | `<details>` + `<summary>` |
-| Popup / Modal | `<dialog>` |
-| Fortschrittsbalken | `<progress>` |
-| Datum-Auswahl | `<input type="date">` |
-| Validierung | Attribute: `required`, `min`, `max`, `pattern` |
+| Element | Was |
+|---------|-----|
+| `<details>` / `<summary>` | Accordion ohne JS |
+| `<dialog>` | Modal mit Native Backdrop |
+| `<input type="date">` | Date-Picker, native, A11y |
+| `<input type="color">` | Color-Picker |
+| `<input type="range">` | Slider |
+| `<datalist>` | Autocomplete-Vorschläge |
+| `<progress>` | Lade-Balken |
+
+**Faustregel:** Native zuerst, Custom nur wenn nötig.
 
 ---
 
-# Beispiel: Details/Summary
-
-<small>*Akkordion · Accordion · Aufklappmenü · Collapsible*</small>
-
-![bg right:35%](./assets/demos/details-closed.png)
-
-```html
-<details>
-  <summary>Klick mich!</summary>
-  <p>Dieser Text ist versteckt.</p>
-</details>
-```
-
-<small>Doku: [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details)</small>
-
----
-
-# Beispiel: Details/Summary (geöffnet)
-
-![bg right:35%](./assets/demos/details-open.png)
-
-```html
-<details open>
-  <summary>Klick mich!</summary>
-  <p>Dieser Text war versteckt.</p>
-</details>
-```
-
----
-
-# Beispiel: Button
-
-![bg right:35%](./assets/demos/button.png)
-
-```html
-<button>Add to favorites</button>
-```
-
-<small>Doku: [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button)</small>
-
----
-
-# Beispiel: Input/Eingabefeld
-
-![bg right:35%](./assets/demos/input.png)
-
-```html
-<input
-  type="text"
-  maxlength="8"
-  size="10" />
-```
-
-<small>Doku: [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input)</small>
-
----
-
-# Beispiel: Dialog
-
-<small>*Modal · Modales Fenster · Popup · Overlay · Dialogfenster*</small>
-
-![bg right:35%](./assets/demos/dialog.png)
-
-```html
-<dialog open>
-  <p>Greetings, one and all!</p>
-  <form method="dialog">
-    <button>OK</button>
-  </form>
-</dialog>
-```
-
-<small>Doku: [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog)</small>
-
----
-
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
 # Barrierefreiheit
-## Accessibility (a11y)
+## A11y — Accessibility
+
+---
+
+# BFSG + EAA — Pflicht ab 28.06.2025
+
+**Barrierefreiheitsstärkungsgesetz** (DE) setzt **European Accessibility Act** (EU) um.
+
+**Pflicht:**
+- Online-Shops, Banken, Versicherungen
+- E-Books, Buchungssysteme
+- Smartphone-Apps mit kommerziellem Bezug
+
+**Ausnahme:** < 10 Mitarbeiter + < 2 Mio € Umsatz.
+
+**Strafe:** bis 100.000 € Bußgeld + Klage durch Behindertenverbände.
 
 ---
 
 # Wie nutzen Menschen das Web?
 
-| Eingabe | Nutzungsweise |
-|---------|---------------|
-| **Maus** | Klicken, Scrollen |
-| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
-| **Screenreader** | NVDA, VoiceOver, TalkBack, Orca |
-| **Sprachsteuerung** | "Klicke auf Anmelden" |
-| **Augensteuerung** | Eye-Tracking |
-| **Switch-Geräte** | Ein-/Aus-Schalter (motorische Einschränkungen) |
+- **Sehen:** Screen-Reader (NVDA, JAWS, VoiceOver)
+- **Hören:** Untertitel + Transkripte
+- **Motorik:** Tastatur statt Maus, Switch-Control
+- **Kognitiv:** klare Sprache, viel Whitespace
+- **Vorübergehend:** Sonne im Bildschirm, gebrochener Arm, ÖPNV-Lärm
 
-→ Nicht alle Menschen nutzen Maus oder Touchscreens gleichermaßen.
+~10 % der Bevölkerung haben relevante Beeinträchtigungen. *Du auch — irgendwann.*
 
 ---
 
-# Web-Zugänglichkeit — Statistik
+# WCAG · 4 Prinzipien (POUR)
 
-WHO: ca. **15 % der Weltbevölkerung** mit Behinderung — über **1 Milliarde** potenzielle Nutzer:innen.
+| Prinzip | Was |
+|---------|-----|
+| **P**erceivable | Alt-Text · Untertitel · Kontrast |
+| **O**perable | Keyboard · Skip-Links |
+| **U**nderstandable | klare Sprache · Fehler-Hilfe |
+| **R**obust | semantisches HTML · Standards-konform |
 
-| Typ | Permanent | Temporär | Situativ |
-|-----|-----------|----------|----------|
-| Visuell | Blindheit | Augen-OP | Grelle Sonne |
-| Motorisch | Amputation | Gebrochener Arm | Kind auf dem Arm |
-| Auditiv | Taubheit | Ohrenentzündung | Laute Umgebung |
-| Kognitiv | Legasthenie | Müdigkeit | Ablenkung |
-
-**Curb-Cut-Effekt:** Bordsteinabsenkung für Rollstühle hilft auch Kinderwagen, Rollkoffern, Fahrrädern.
+**WCAG 2.1 Level AA** = Mindest-Standard für BFSG.
 
 ---
 
-# Warum Barrierefreiheit?
+# Perceivable — wahrnehmbar
 
-**Rechtlich (DE / EU):**
-- **EAA** — European Accessibility Act, in Kraft seit 28.06.2025
-- **BFSG** — DE-Umsetzung des EAA, betrifft auch Privatwirtschaft
-- **BITV 2.0** — Barrierefreie Informationstechnik-Verordnung (öff. Stellen)
-- Bußgelder bis **100.000 €**
-
-**Ethisch:** Teilhabe und digitale Inklusion.
-
-**Praktisch:**
-- Bessere UX für **alle** (mobile, ältere Menschen, situative Einschränkungen)
-- SEO-Bonus durch semantisches HTML, Alt-Texte
-- Größerer Markt — ca. 15 % der Bevölkerung
-
----
-
-# WCAG: Der Standard
-
-**W**eb **C**ontent **A**ccessibility **G**uidelines · Herausgeber: W3C / WAI
-
-**Aktuell:** WCAG 2.2 (verbindlich seit Okt. 2023). WCAG 3 in Working-Draft.
-
-**4 Prinzipien (POUR):**
-
-| Prinzip | Bedeutung |
-|---------|-----------|
-| **P**erceivable | Wahrnehmbar — Inhalte müssen erkennbar sein |
-| **O**perable | Bedienbar — Funktionen müssen nutzbar sein |
-| **U**nderstandable | Verständlich — Inhalte müssen klar sein |
-| **R**obust | Robust — funktioniert mit verschiedenen Technologien |
-
-**Konformitätslevel:** A · **AA** (gesetzlicher Standard) · AAA
-
-→ [w3.org/WAI/WCAG22/quickref](https://www.w3.org/WAI/WCAG22/quickref/)
-
----
-
-# Perceivable: Wahrnehmbar
-
-![bg right:35% fit](./assets/demos/contrast-levels.png)
-
-**Texte:**
-- **Kontrast:** mindestens 4,5:1 für normalen Text
-- **Untertitel** für Videos
-- Inhalte bei **200 % Zoom** noch nutzbar
-
-**Textalternativen für Nicht-Text:**
+- **Alt-Text** für jedes Bild (`<img alt="...">`)
+- **Untertitel** für jedes Video
+- **Kontrast 4.5:1** für Text (Level AA)
+- **Skalierbar** bis 200 %
 
 ```html
-<img src="tankman.jpg"
-     alt="Ein Mann mit Einkaufstüten steht
-          allein vor einer Reihe Panzer —
-          Tiananmen, Peking, 5. Juni 1989">
+<img src="foto.jpg" alt="Sonnenuntergang am Bodensee">
+<!-- LEER alt="" für rein dekorative Bilder -->
 ```
 
-→ Leeres `alt=""` für rein dekorative Bilder.
-
 ---
 
-# Operable: Bedienbar
+# Operable — bedienbar
 
-![bg right:35%](./assets/demos/a11y-focus.png)
+- Alle interaktiven Elemente **mit Tastatur erreichbar**
+- **Fokus sichtbar** (`:focus-visible` mit Outline)
+- **Skip-Links** für Screen-Reader (Hauptnav überspringen)
+- **Genug Zeit** für Aufgaben (Auto-Logout pausierbar)
 
-**Tastaturzugänglich:**
 ```css
-/* Fokus-Ring nur bei Tastatur-Navigation */
 button:focus-visible {
-  outline: 3px solid #d63384;
-  outline-offset: 3px;
-  border-radius: 4px;
+  outline: 3px solid hotpink;
+  outline-offset: 2px;
 }
-
-/* Anti-Pattern */
-button:focus { outline: none; }
 ```
 
-**Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen.
-
-**Kein Flackern:** maximal 3×/Sekunde (epileptische Anfälle vermeiden).
-
 ---
 
-# Understandable: Verständlich
+# Understandable — verständlich
 
-![bg right:35%](./assets/demos/a11y-error.png)
+- **Lese-Niveau** angemessen (Level AA: 9. Klasse)
+- **Klare Fehlermeldungen** (was war falsch, wie korrigieren)
+- **Konsistente Navigation** (Header bleibt gleich)
+- **`lang`-Attribut** im html-Element
 
-**Sprache angeben:**
 ```html
 <html lang="de">
+  <p lang="en">This sentence is in English.</p>
+</html>
 ```
 
-**Konsistente Navigation** — gleiche Elemente an gleicher Stelle.
+---
+
+# Robust — Tech-stabil
+
+- **Semantisches HTML** statt div-Suppe
+- **ARIA** *nur als Ergänzung*, nicht als Ersatz
+- **Standards-konform** (Validator: validator.w3.org)
 
-**Fehler erklären:**
 ```html
-<input type="email" aria-describedby="email-error">
-<p id="email-error" role="alert">
-  Bitte eine gültige E-Mail-Adresse eingeben.
-</p>
+<!-- ❌ semantisch falsch -->
+<div onclick="...">Klick</div>
+
+<!-- ✓ semantisch korrekt -->
+<button onclick="...">Klick</button>
 ```
 
 ---
 
-# Robust: Technisch solide
+# A11y-Testen — Werkzeuge
 
-![bg right:35%](./assets/demos/a11y-semantic.png)
+| Tool | Was |
+|------|-----|
+| **Lighthouse** (Chrome DevTools) | automatischer Audit |
+| **axe DevTools** | Plugin, präziser |
+| **WAVE** | Browser-Plugin, visuell |
+| **Manuell** | Maus weglegen, nur Tab |
+| **Screen-Reader** | macOS: VoiceOver (Cmd+F5) · Win: NVDA |
 
-**Semantisches HTML:**
-```html
-<!-- Schlecht -->
-<div class="button" onclick="...">Klick mich</div>
-
-<!-- Gut -->
-<button type="button">Klick mich</button>
-```
-
-**ARIA — nur wenn nötig:**
-```html
-<div role="tablist" aria-label="Produktkategorien">
-  <button role="tab" aria-selected="true">Schuhe</button>
-  <button role="tab" aria-selected="false">Jacken</button>
-</div>
-```
-
-→ Erste ARIA-Regel: **wenn möglich, natives HTML nutzen**.
+**Automatisierte Tools** finden ~30 %. Rest = manuell.
 
 ---
 
-# Barrierefreiheit testen — Werkzeuge
+<!-- _class: lead -->
 
-**Automatisierte Tools** (finden ca. 30 % der Verstöße):
+# CSS
+## Cascading Style Sheets
 
-| Tool | Typ | Findet |
-|------|-----|--------|
-| [WAVE](https://wave.webaim.org/) | Browser-Extension | Kontrast, Struktur, Tab-Reihenfolge |
-| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + A11y-Audit |
-| [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension | Detailanalyse, Regel-Engine |
-| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
-
-**Screenreader (OS-nativ oder Open Source):**
-
-| OS | Screenreader |
-|----|--------------|
-| macOS / iOS | VoiceOver (`Cmd + F5`) — builtin |
-| Windows | [NVDA](https://www.nvaccess.org/) (OSS) · Narrator (builtin) |
-| Linux | [Orca](https://orca.gnome.org/) — GNOME builtin |
-| Android | TalkBack — builtin |
-
----
-
-# Barrierefreiheit testen
-
-Automatisierte Tools finden nur etwa **30 %** der Probleme. Manuelles Testen unverzichtbar — Gold-Standard: echte Nutzer:innen mit Assistiven Technologien.
-
-**Tastatur-Test** — Maus weglegen, nur Tab / Shift+Tab / Enter / Pfeiltasten:
-
-![w:900 center](./assets/demos/keyboard-a11y.png)
-
----
-
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
-
-# CSS – Cascading Style Sheets
-
----
-
-# Was ist CSS?
-
-**C**ascading **S**tyle **S**heets
-
-```css
-p {
-  color: blue;
-  font-size: 16px;
-}
-```
-
-- Trennt **Inhalt** (HTML) von **Darstellung** (CSS)
-- "Cascading" = Regeln können überschrieben werden
-- Eine CSS-Datei kann viele HTML-Seiten stylen
+*(Vertiefung in Kap 2 — CSS Extended)*
 
 ---
 
 # CSS einbinden
 
-**Option 1: Externe Datei** (empfohlen)
 ```html
-<link rel="stylesheet" href="style.css">
-```
+<!-- External (best practice) -->
+<link rel="stylesheet" href="./style.css">
 
-**Option 2: Style-Tag**
-```html
-<style>p { color: blue; }</style>
-```
+<!-- Internal -->
+<style>
+  body { background: #fafafa; }
+</style>
 
-**Option 3: Inline** (vermeiden)
-```html
-<p style="color: blue;">...</p>
+<!-- Inline (vermeiden) -->
+<button style="background: hotpink">Klick</button>
 ```
 
-→ Standard ist externe Datei. Inline vermeiden (schwer zu warten, keine Wiederverwendung).
-
 ---
 
 # CSS-Anatomie
 
 ```css
-/* ID selector */
-#description {
-  color: orangered;
-/*  │       └──── Indicates the value of the expression
-    │
-    └──── Indicates the property of the expression  */
+button {
+  background-color: hotpink;
+  padding: 10px 20px;
+  border-radius: 8px;
 }
 ```
 
-- **Selector** — was wird gestylt (`#description` = Element mit `id="description"`)
-- **Property** — welche Eigenschaft (`color`)
-- **Value** — welcher Wert (`orangered`)
-- **Declaration** — `property: value;` (Semikolon trennt Deklarationen)
-- **Declaration block** — alles zwischen `{` und `}`
+- `button` = **Selektor** (welche Elemente)
+- `background-color` = **Property**
+- `hotpink` = **Value**
+- alles in `{ }` = **Declaration Block**
 
 ---
 
-# Selektoren: Element
+# Selektoren
 
-![bg right:35%](./assets/demos/css-selector-element.png)
+| Selektor | Was |
+|----------|-----|
+| `p` | alle `<p>` |
+| `.btn` | alle mit `class="btn"` |
+| `#header` | das Element mit `id="header"` |
+| `button:hover` | Button beim Hover |
+| `nav > a` | direkte `<a>` unter `<nav>` |
+| `*` | alles |
+
+---
+
+# Spezifizität — wer gewinnt?
 
 ```css
-/* Alle <p>-Elemente */
-p {
-  color: gray;
-}
-
-/* Mehrere Elemente gleichzeitig */
-h1, h2, h3 {
-  font-family: sans-serif;
-}
+p          { color: blue; }   /* 1 */
+.notice    { color: red; }    /* 10 */
+#warn      { color: green; }  /* 100 */
+[style]    /* inline */       /* 1000 */
 ```
 
-Element-Selektoren sind die einfachsten. Komma = "oder".
+**Inline > ID > Klasse > Element.** Bei Gleichstand: **letzte Regel.**
+
+`!important` umgeht alles — *vermeiden.*
 
 ---
 
-# Selektoren: Klasse
+# Box-Model
 
-![bg right:35%](./assets/demos/css-selector-class.png)
-
-```html
-<p class="wichtig">Dieser Text ist wichtig.</p>
-<p>Dieser nicht.</p>
+```
+┌──────────────────────┐
+│       margin         │
+│  ┌────────────────┐  │
+│  │     border     │  │
+│  │  ┌──────────┐  │  │
+│  │  │ padding  │  │  │
+│  │  │ content  │  │  │
+│  │  └──────────┘  │  │
+│  └────────────────┘  │
+└──────────────────────┘
 ```
 
-```css
-.wichtig {
-  color: red;
-  font-weight: bold;
-}
-```
-
-**Punkt** vor dem Namen = Klasse. Beliebig oft anwendbar; ein Element kann mehrere Klassen haben.
-
----
-
-# Selektoren: ID
-
-![bg right:35%](./assets/demos/css-selector-id.png)
-
-```html
-<nav id="hauptnavigation">...</nav>
-```
-
-```css
-#hauptnavigation {
-  background: #333;
-  padding: 1rem;
-}
-```
-
-**Raute** vor dem Namen = ID.
-
-**Hinweis:** IDs sollten **einmalig** pro Seite sein. In der Praxis: Klassen meist besser.
-
----
-
-# Selektoren: Kombinationen
-
-![bg right:35%](./assets/demos/css-combinators.png)
-
-```css
-/* Nachfahre (beliebig tief verschachtelt) */
-article p { line-height: 1.6; }
-
-/* Direktes Kind (eine Ebene) */
-nav > a { text-decoration: none; }
-
-/* Nächstes Geschwister */
-h2 + p { font-size: 1.2rem; }
-
-/* Element mit Klasse */
-p.wichtig { color: red; }
-```
-
----
-
-# Spezifität: Welche Regel gewinnt?
-
-![bg right:35%](./assets/demos/css-specificity.png)
-
-| Selektor | Spezifität |
-|----------|------------|
-| Element (`p`) | 0,0,0,1 |
-| Klasse (`.wichtig`) | 0,0,1,0 |
-| ID (`#header`) | 0,1,0,0 |
-| Inline (`style="..."`) | 1,0,0,0 |
-
-```css
-p { color: blue; }      /* 0,0,0,1 */
-.text { color: green; } /* 0,0,1,0 → gewinnt */
-#intro { color: red; }  /* 0,1,0,0 → gewinnt über beide */
-```
-
----
-
-# CSS Spezifität – Vertiefung
-
-| Selektor | Inline | IDs | Klassen | Elemente | Gesamt |
-|----------|--------|-----|---------|----------|--------|
-| `p` | 0 | 0 | 0 | 1 | 0,0,0,1 |
-| `.info` | 0 | 0 | 1 | 0 | 0,0,1,0 |
-| `p.info` | 0 | 0 | 1 | 1 | 0,0,1,1 |
-| `#header` | 0 | 1 | 0 | 0 | 0,1,0,0 |
-| `#header .nav a` | 0 | 1 | 1 | 1 | 0,1,1,1 |
-
-**Regeln:**
-- Eine Klasse (0,0,1,0) schlägt **jede Anzahl** Elemente (0,0,0,99)
-- Eine ID schlägt jede Anzahl Klassen
-- `!important` bricht alles → vermeiden
-
-**Best Practice:** Flache Spezifität. BEM-Methodik (`.block__element--modifier`) hält sie niedrig.
-
----
-
-# Box-Modell
-
-![bg right:42% fit](./assets/demos/box-model-diagram.png)
-
-Jedes HTML-Element ist eine rechteckige **Box**.
-
-**Schichten innen → außen:**
-
-- **content** – Inhalt (Text, Bild)
-- **padding** – Innenabstand
-- **border** – Rahmen
-- **margin** – Außenabstand
-
-<small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>
-
----
-
-# Box-Modell: CSS
-
-![bg right:35%](./assets/demos/css-box-model.png)
-
-```css
-.box {
-  width: 200px;
-  height: 100px;
-  padding: 20px;
-  border: 2px solid black;
-  margin: 10px;
-}
-```
-
-**Wichtig:**
-```css
-* {
-  box-sizing: border-box;
-}
-```
-→ width/height inkludiert padding + border.
+**Best Practice:** `* { box-sizing: border-box; }` global.
 
 ---
 
 # Farben
 
-![bg right:35%](./assets/demos/css-colors.png)
-
-CSS kennt fünf Notationen für Farben: **Keyword**, **Hex**, **RGB**, **RGBA** (mit Transparenz) und **HSL**.
-
-```css
-/* Keyword */
-color: red;
-color: rebeccapurple;
-
-/* Hex */
-color: #FF0000;
-color: #F00;
-
-/* RGB / RGBA */
-color: rgb(255, 0, 0);
-color: rgba(255, 0, 0, 0.5);
-
-/* HSL */
-color: hsl(0, 100%, 50%);
-```
+| Notation | Beispiel |
+|----------|----------|
+| Hex | `#FF5733` |
+| RGB | `rgb(255, 87, 51)` |
+| RGBA | `rgb(255, 87, 51, 0.5)` |
+| HSL | `hsl(11, 100%, 60%)` |
+| OKLCH (modern) | `oklch(0.7 0.2 30)` |
+| Schlüsselwort | `hotpink`, `tomato` |
 
 ---
 
 # Einheiten
 
-| Einheit | Bedeutung |
-|---------|-----------|
-| `px` | Pixel (absolut) |
-| `%` | Prozent vom Elternelement |
-| `em` | Relativ zur Schriftgröße des Elements |
-| `rem` | Relativ zur Schriftgröße des Root-Elements |
-| `vw` / `vh` | Prozent der Viewport-Breite/-Höhe |
+| Einheit | Was |
+|---------|-----|
+| `px` | Pixel, fix |
+| `rem` | relativ zu Wurzel-Font (16 px default) |
+| `em` | relativ zu Eltern-Font |
+| `%` | relativ zur Eltern-Größe |
+| `vw` / `vh` | Viewport-Breite/-Höhe |
+| `ch` | Breite eines Zeichens |
 
-**Empfehlung:**
-`rem` für Schrift, `%` oder `vw/vh` für Layout.
+**Faustregel:** Font + Spacing in `rem`. Layout in `%` oder `fr`.
 
 ---
 
-# Pseudo-Klassen
-
-![bg right:35%](./assets/demos/css-pseudo-classes.png)
+# Pseudo-Klassen & -Elemente
 
 ```css
-/* Hover */
-a:hover { color: red; }
+/* Pseudo-Klassen (Zustand) */
+a:hover { color: hotpink; }
+input:focus { outline: 2px solid; }
+button:disabled { opacity: 0.5; }
+li:nth-child(2n) { background: #eee; }
 
-/* Besuchter Link */
-a:visited { color: purple; }
-
-/* Fokussiertes Element */
-input:focus { border-color: blue; }
-
-/* Erstes/n-tes Kind */
-li:first-child { font-weight: bold; }
-li:nth-child(odd) { background: #eee; }
-```
-
-`:` vor dem Namen = Pseudo-Klasse.
-
----
-
-# Pseudo-Elemente
-
-![bg right:35%](./assets/demos/css-pseudo-elements.png)
-
-```css
-/* Vor dem Inhalt einfügen */
-.required::before {
-  content: "* ";
-  color: red;
-}
-
-/* Erster Buchstabe */
-p::first-letter {
-  font-size: 2em;
-}
-```
-
-`::` = Pseudo-Element (erzeugt "virtuelles" Element)
-`:` = Pseudo-Klasse (wählt existierendes Element im Zustand)
-
----
-
-# Layout: Flexbox
-
-```css
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-```
-
-→ Eindimensionales Layout (Zeile *oder* Spalte). Tiefer in `02_css_extended`.
-
----
-
-# Layout: Grid
-
-```css
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
-}
-```
-
-→ Zweidimensionales Layout (Zeilen *und* Spalten gleichzeitig).
-
----
-
-# Responsive Design
-
-![bg right:35%](./assets/demos/css-responsive.png)
-
-```css
-/* Mobile First: Basis-Styles */
-.container {
-  padding: 1rem;
-}
-
-/* Ab 768px (Tablet) */
-@media (min-width: 768px) {
-  .container { padding: 2rem; }
-}
-
-/* Ab 1024px (Desktop) */
-@media (min-width: 1024px) {
-  .container { padding: 3rem; }
-}
+/* Pseudo-Elemente (Virtuelles) */
+p::first-letter { font-size: 2em; }
+.tooltip::after { content: " 💡"; }
 ```
 
 ---
 
-# Responsive Design – Vertiefung
-
-**Mobile First** ist Standard: Basis-CSS für kleine Screens, dann Erweiterungen.
-
-| Breakpoint | Gerät | Media Query |
-|------------|-------|-------------|
-| < 576px | Smartphone (Portrait) | Basis |
-| ≥ 576px | Smartphone (Landscape) | `@media (min-width: 576px)` |
-| ≥ 768px | Tablet | `@media (min-width: 768px)` |
-| ≥ 992px | Desktop | `@media (min-width: 992px)` |
-| ≥ 1200px | Large Desktop | `@media (min-width: 1200px)` |
-
-**Viewport-Meta-Tag (kritisch!):**
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1">
-```
-
-**Moderne Alternativen:** `clamp()`, Container Queries, CSS Grid `auto-fit`/`auto-fill`.
-
----
-
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
 # JavaScript
+## Die Sprache des Webs
+
+*(Vertiefung in Kap 3+4 — Node.js)*
 
 ---
 
 # ECMAScript
 
-- **Ecma International** — European Computer Manufacturers Association
-- Seit **1997** standardisiert als **ECMA-262**
-- Implementierungen: **JavaScript** (Netscape, später Mozilla), **JScript** (Microsoft), **ActionScript** (Adobe Flash) etc.
-- Aktuelle Version: **ECMAScript 2024 (ES15)**, jährliche Releases
+**ECMA International** (Schweiz) standardisiert die Sprache.
 
-**Browser-Kompatibilität:**
-- Faustregel: **ES2017+** läuft in allen modernen Browsern
-- Ältere Targets via Transpiler (Babel, esbuild, swc, tsc)
-- Kompatibilitätstabelle: [kangax.github.io/compat-table](https://kangax.github.io/compat-table/)
+| Version | Jahr | Highlight |
+|---------|------|-----------|
+| ES5 | 2009 | strict mode, JSON |
+| ES6 / 2015 | 2015 | `let` `const`, arrow, classes, modules |
+| ES2017 | 2017 | async/await |
+| ES2020 | 2020 | optional chaining `?.` |
+| ES15 | 2024 | aktuell |
 
 ---
 
-# JavaScript Grundlagen
+# JavaScript-Grundlagen
 
 ```javascript
 // Variablen
-let name = "Welt";
-const alter = 25;
+const name = "Ada";
+let alter = 56;
 
 // Funktionen
-function gruss(name) {
-  return `Hallo, ${name}!`;
+const begrüßen = (name) => `Hallo ${name}`;
+
+// Arrays + Objects
+const fruits = ["A", "B"];
+const user = { name: "Ada", admin: true };
+
+// Schleifen
+fruits.map(f => f.toUpperCase());
+
+// async
+async function laden() {
+  const res = await fetch('/api');
+  return res.json();
 }
-
-// Arrow Functions
-const add = (a, b) => a + b;
-
-// Arrays
-const arr = [1, 2, 3];
-arr.map(x => x * 2); // [2, 4, 6]
 ```
 
 ---
@@ -1511,281 +688,144 @@ arr.map(x => x * 2); // [2, 4, 6]
 # DOM Manipulation
 
 ```javascript
-// Element auswählen
-const title = document.querySelector('h1');
+// Element finden
+const btn = document.querySelector('#myBtn');
 
 // Inhalt ändern
-title.textContent = 'Neue Überschrift';
+btn.textContent = 'Neu';
+btn.classList.add('active');
 
-// Event Listener
-button.addEventListener('click', () => {
-  alert('Geklickt!');
+// Event-Handler
+btn.addEventListener('click', () => {
+  console.log('Klick!');
+});
+
+// Element erzeugen
+const li = document.createElement('li');
+li.textContent = 'Item';
+document.querySelector('ul').appendChild(li);
+```
+
+---
+
+# Fetch + JSON
+
+```javascript
+// GET
+const res = await fetch('https://api.github.com/users/torvalds');
+const data = await res.json();
+console.log(data.public_repos);
+
+// POST
+await fetch('/api/posts', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ title: 'Hallo', body: '...' })
 });
 ```
 
 ---
 
-# Fetch API
+<!-- _class: lead -->
 
+# Frameworks-Vorschau
+
+---
+
+# Framework-Landschaft
+
+| Framework | Typ | Use-Case |
+|-----------|-----|----------|
+| **React** | Library | dominant, große Community |
+| **Vue 3** | Framework | sanfter Einstieg |
+| **Svelte** | Compiler | kein Virtual DOM, kleines Bundle |
+| **Astro** | Hybrid | Content-First, Multi-Framework |
+| **Angular** | Framework | Enterprise, Google |
+
+Alle: **Komponenten + reaktive State + Re-Render.**
+
+---
+
+# Counter — vier Wege
+
+**Vanilla JS:**
 ```javascript
-fetch('/api/products')
-  .then(res => res.json())
-  .then(data => {
-    console.log(data);
-  })
-  .catch(err => console.error(err));
+let count = 0;
+btn.onclick = () => { count++; display.textContent = count; };
 ```
 
----
-
-# Async/Await
-
-```javascript
-async function loadProducts() {
-  try {
-    const res = await fetch('/api/products');
-    const data = await res.json();
-    return data;
-  } catch (err) {
-    console.error('Fehler:', err);
-  }
-}
-```
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-<!-- _backgroundColor: #050517 -->
-
-![bg fit](./assets/demos/web-engineering-mandala.png)
-
----
-
-<!-- _backgroundColor: #050517 -->
-<!-- _color: #e2e8f0 -->
-
-# Web Engineering Mandala
-
-Interaktive version: [nextlevelshit.github.io/web-engineering-mandala](https://nextlevelshit.github.io/web-engineering-mandala/)
-
-3 Schichten:
-- **Core Layer** — JS, HTML, CSS (vanilla)
-- **Build Layer** — bundlers, runtimes, template engines, pre/post processors
-- **Application Layer** — frontend, backend, frameworks, SSR, CSS-utilities
-
-3 Segmente: HTML (blau) · JavaScript (rot) · CSS (grün) · Mittelpunkt: `package.json`
-
----
-
-# JavaScript Frameworks – Kategorien
-
-| Kategorie | Beispiele |
-|-----------|-----------|
-| **CSS Frameworks** | Tailwind, Bootstrap, shadcn/ui |
-| **Frontend Frameworks** | React, Vue, Svelte, Astro |
-| **Rendering / Meta** | Next.js, Nuxt, Gatsby |
-| **Build Tools / Bundler** | Webpack, Vite, Parcel, esbuild |
-| **Backend Frameworks** | Express, Fastify, NestJS |
-
----
-
-# Vanilla JS – Counter
-
-```html
-<button id="myButton">Clicked 0 times</button>
-<script>
-  let count = 0;
-  const btn = document.getElementById('myButton');
-  btn.addEventListener('click', () => {
-    count++;
-    btn.textContent = `Clicked ${count} times`;
-  });
-</script>
-```
-
-**Pro:** hohe Kompatibilität, simpel
-**Contra:** State-Management und Re-Rendering werden schnell komplex
-
----
-
-# React – Counter (JSX)
-
-![bg right:25% fit](./assets/logos/frameworks/react.svg)
-
+**React (JSX):**
 ```jsx
-import { useState } from "react";
-
-function MyButton() {
+function Counter() {
   const [count, setCount] = useState(0);
-
-  return (
-    <button onClick={() => setCount(count + 1)}>
-      Clicked {count} times
-    </button>
-  );
+  return <button onClick={() => setCount(count + 1)}>{count}</button>;
 }
 ```
 
-- **Component-Based** Architecture
-- **Virtual DOM**, JSX, Hooks
-- großes Ökosystem (React Router, Redux, …)
-
----
-
-# Vue 3 – Composition API
-
-![bg right:25% fit](./assets/logos/frameworks/vue.svg)
-
+**Vue 3 (Composition):**
 ```vue
-<script setup>
-import { ref } from "vue";
-const count = ref(0);
-</script>
-
-<template>
-  <button @click="count++">
-    Clicked {{ count }} times
-  </button>
-</template>
+<script setup>const count = ref(0)</script>
+<template><button @click="count++">{{ count }}</button></template>
 ```
 
-- **Reactive Data Binding**
-- Single-File Components (`.vue`)
-- Vue Router, Pinia (State)
-
----
-
-# Svelte – Counter
-
-![bg right:25% fit](./assets/logos/frameworks/svelte.svg)
-
+**Svelte:**
 ```svelte
-<script>
-  let count = 0;
-</script>
-
-<button on:click={() => count += 1}>
-  Clicked {count} {count === 1 ? 'time' : 'times'}
-</button>
+<script>let count = 0</script>
+<button on:click={() => count++}>{count}</button>
 ```
 
-- **Compiler-Based** – kein Runtime-Framework
-- Reactive Assignments (`let`)
-- Built-in Animationen
+---
+
+# Build-Tools
+
+| Tool | Stärke |
+|------|--------|
+| **Vite** | schnell, modern, Default für React/Vue/Svelte |
+| **Webpack** | etabliert, mächtig, verbreitet |
+| **Parcel** | zero-config |
+| **Bun** | all-in-one, sehr schnell |
+
+**Heute:** Vite ist der Default für neue Projekte.
 
 ---
 
-# Astro – Content-First
+# Rendering-Modi
 
-![bg right:25% fit](./assets/logos/frameworks/astro.svg)
+| Modus | Wann |
+|-------|------|
+| **CSR** (Client-Side) | Single-Page-Apps (Dashboard, Editor) |
+| **SSR** (Server-Side) | SEO + erste Latenz wichtig (News, Shop) |
+| **SSG** (Static Site Gen) | reine Content-Sites (Blog, Doku) |
+| **ISR** (Incremental SSG) | Hybrid: Content selten ändert |
 
-```astro
----
-const greeting = "Hallo DHBW";
----
-<html>
-  <body>
-    <h1>{greeting}</h1>
-    <MyReactButton client:load />
-  </body>
-</html>
-```
-
-- **Islands Architecture** – Komponenten mehrerer Frameworks mischen
-- Default: kein JS im Output (nur statisches HTML)
-- Hydration on demand (`client:load`, `client:visible`)
+Astro / Next.js / Nuxt unterstützen alle.
 
 ---
 
-# Rendering Frameworks
+<!-- _class: aufgabe -->
 
-| | Frontend | SSR | SSG | File Routing |
-|---|---|---|---|---|
-| **Next.js** | React | ja | ja | `/app/page.js` |
-| **Nuxt** | Vue | ja | ja | `/pages/*.vue` |
-| **Gatsby** | React | nein | ja | GraphQL Data |
+# Selbstlernen — Erste eigene Seite
+
+1. **Mappe anlegen** `meine-seite/`
+2. `index.html` mit dem **Grundgerüst** (DOCTYPE, head, body, h1, p)
+3. `style.css` daneben — mit Hotpink-Background
+4. **VS Code Live Server** starten → im Browser öffnen
+5. **DevTools** auf, F12, Tab Elements → DOM-Baum anschauen
+
+**Bonus:** Lighthouse Audit laufen lassen. Welchen Score erreicht ihr?
 
 ---
 
-# Build Tools – Webpack
+# Zusammenfassung
 
-![bg right:25% fit](./assets/logos/frameworks/webpack.svg)
+**Heute gelernt:**
+- Internet-Geschichte → WWW → URL→Pixel-7-Schritte
+- Onboarding-Stack: Node (fnm), VS Code, Git, DevTools
+- HTML: Anatomie, semantisch, A11y-Foundation
+- A11y: BFSG/EAA-Pflicht, WCAG POUR
+- CSS-Basics (Vertiefung in Kap 2)
+- JS-Basics (Vertiefung in Kap 3+4)
+- Framework-Landschaft (Vorschau)
 
-- Module Bundling (JS, CSS, Images)
-- Module Loaders + großes Plugin-Ökosystem
-- Code Splitting, HMR
-- Konfigurations-lastig (`webpack.config.js`)
-
-→ Standard für viele Legacy-Setups.
-
----
-
-# Build Tools – Vite
-
-![bg right:25% fit](./assets/logos/frameworks/vite.svg)
-
-```javascript
-// vite.config.js
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  server: {
-    proxy: {
-      "/api": {
-        target: "http://localhost:4567",
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, "")
-      }
-    }
-  }
-});
-```
-
-- Rollup unter der Haube, **HMR mit ES Modules**
-- Tree-Shaking, Code Splitting, React + Vue out-of-the-box
-
----
-
-# Build Tools – Parcel
-
-![bg right:25% fit](./assets/logos/frameworks/parcel.png)
-
-```json
-{
-  "name": "my-project",
-  "source": "src/index.html",
-  "browserslist": "> 0.5%, last 2 versions, not dead",
-  "scripts": {
-    "start": "parcel",
-    "build": "parcel build"
-  },
-  "devDependencies": {
-    "parcel": "latest"
-  }
-}
-```
-
-- **Zero-Config**
-- Auto-Resolution, HMR
-- TS / CSS-Preprocessors out-of-the-box
-
----
-
-# Microfrontends
-
-- Mehrere unabhängige Frontend-Apps in einer Page
-- Module Federation (Webpack 5)
-- **single-spa**: https://single-spa.js.org/
-- Anwendungsfall: große Teams, unterschiedliche Tech-Stacks pro Domain
-
-→ Komplexitätskosten: nur bei echtem Skalierungsbedarf.
-
----
-
-# Demo-Repos
-
-- https://github.com/nextlevelshit/dhbw-client-js (Counter, multi-framework)
-- https://github.com/nextlevelshit/node-cache-api (API + Tests)
-- https://github.com/nextlevelshit/dhbw-docker (Compose-Stack)
+**Nächste Stunde:** CSS deeper — Flexbox, Grid, Responsive, Animations.
 
diff --git a/slides/dhbw/02_css_extended.md b/slides/dhbw/02_css_extended.md
index b4a834c..c80baab 100644
--- a/slides/dhbw/02_css_extended.md
+++ b/slides/dhbw/02_css_extended.md
@@ -8,217 +8,373 @@ footer: "Michael Czechowski – SoSe 2026"
 ---
 
 <style>
-:root {
-  --color-foreground: #1a1a2e;
-  --color-highlight: #d63384;
-  --color-dimmed: #4a4a6a;
-}
-section.invert {
-  --color-foreground: #fff;
-}
-section {
-  font-size: 1.4rem;
-}
-h1 {
-  color: #a02060;
-}
-section.invert h1 {
-  color: #fff;
-}
-h2 {
-  color: #1f2937;
-}
-section.invert h2 {
-  color: #f48fb1;
-}
-pre {
-  background: #0f0f23;
-  color: #f48fb1;
-  border-radius: 8px;
-  border-left: 3px solid #d63384;
-}
-pre code {
-  background: transparent;
-  color: inherit;
-}
-code {
-  background: #1a1a2e;
-  color: #f48fb1;
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-a {
-  color: var(--color-highlight);
-}
+:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; }
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.4rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
+section.invert h2 { color: #f48fb1; }
+pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
+pre code { background: transparent; color: inherit; }
+code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
+a { color: var(--color-highlight); }
 </style>
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# Web Engineering
-
-**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
-**Sommersemester 2026** · Sitzung 2 — HTML & CSS (Frameworks)
+# Kapitel 2 — CSS Extended
+## Box-Model · Flexbox · Grid · Responsive · Animations
 
 ---
 
-# Ressourcen zum Selbstlernen
+# Recap Kap 1
 
-- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
-- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
-- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
-- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
-- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
+| Bereich | Was wir kennen |
+|---------|----------------|
+| Anatomie | `selector { property: value }` |
+| Selektoren | element, `.class`, `#id`, `:hover` |
+| Spezifizität | inline > id > class > element |
+| Farben | hex, rgb, hsl, oklch |
+| Einheiten | px, rem, em, %, vw, vh |
+
+**Heute:** Layout + Animation in Tiefe.
 
 ---
 
-# Inhalt
+# Box-Model — die Erinnerung
 
-Aufbauend auf den Grundlagen aus Sitzung 1.
+```
+┌──────────────────┐
+│      margin      │
+│  ┌────────────┐  │
+│  │   border   │  │
+│  │ ┌────────┐ │  │
+│  │ │padding │ │  │
+│  │ │content │ │  │
+│  │ └────────┘ │  │
+│  └────────────┘  │
+└──────────────────┘
+```
 
-1. Attribut-Selektoren
-2. Combinators (vertieft)
-3. Pseudo-Klassen — erweitert
-4. Shorthand Properties
-5. Flexbox-Shorthands
-6. Custom Properties (Variables)
-7. CSS Functions (`calc`, `clamp`, ...)
-8. Transition & Animation
-9. CSS Frameworks (Tailwind & Co.)
+`box-sizing: border-box` global setzen.
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
-
-# CSS: Extended
-
----
-
-# CSS Selectors – Attribut-Selektoren
+# Box-Model in Code
 
 ```css
-/* presence */
-[disabled] { opacity: 0.5; }
+* { box-sizing: border-box; }
 
-/* exact value */
-[type="email"] { border-color: blue; }
+.card {
+  width: 320px;        /* inkl. padding + border */
+  padding: 1.5rem;
+  border: 2px solid #ccc;
+  border-radius: 0.75rem;
+  margin: 1rem auto;   /* Außen + horizontal zentriert */
+}
+```
 
-/* contains word */
-[class~="btn"] { cursor: pointer; }
+Inspector im DevTools zeigt das Box-Model live an.
 
-/* starts with */
-[href^="https"] { color: green; }
+---
 
-/* ends with */
-[src$=".png"] { border: 1px solid #ccc; }
+<!-- _class: lead -->
 
-/* contains substring */
-[class*="icon"] { padding-left: 20px; }
+# Flexbox
+## 1D-Layout (Reihe ODER Spalte)
+
+---
+
+# Flexbox — Basics
+
+```css
+.container {
+  display: flex;
+  gap: 1rem;                   /* Abstand zwischen Items */
+  flex-direction: row;         /* row | column */
+  justify-content: space-between; /* Haupt-Achse */
+  align-items: center;         /* Quer-Achse */
+  flex-wrap: wrap;             /* umbruchen erlaubt */
+}
+```
+
+```html
+<div class="container">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
 ```
 
 ---
 
-# CSS Combinators
+# Flexbox — Achsen
+
+**`flex-direction: row` (default):** Haupt-Achse horizontal.
+
+```
+┌─────────────────────────────────────┐
+│ ◄── justify-content ──►             │
+│ ▲                                   │
+│ │                                   │
+│ align-items                         │
+│ │                                   │
+│ ▼                                   │
+└─────────────────────────────────────┘
+```
+
+`column`: Achsen drehen sich 90°.
+
+---
+
+# Flexbox — Item-Properties
 
 ```css
-/* Child (direkt) */
-div > p { margin: 0; }
+.item {
+  flex: 1;        /* nimm gleiche Anteile vom verfügbaren Raum */
+  flex: 0 0 200px; /* fest 200px, kein wachsen, kein schrumpfen */
+  flex-grow: 2;   /* doppelte Anteile */
+  order: -1;      /* visuell zuerst, im DOM hinten */
+  align-self: end; /* override align-items für DIESES Item */
+}
+```
 
-/* Descendant (Nachkomme) */
-div p { margin: 0; }
+**Shorthand:** `flex: <grow> <shrink> <basis>`.
 
-/* Next Sibling */
-h1 + p { font-size: 1.2em; }
+---
 
-/* Subsequent Sibling */
-h1 ~ p { color: #666; }
+# Typische Flex-Patterns
 
-/* Selector List */
-h1, h2, h3 { font-weight: bold; }
+```css
+/* Navigation: Logo links, Items rechts */
+.nav { display: flex; justify-content: space-between; }
+
+/* Karte: Bild + Text nebeneinander */
+.card { display: flex; gap: 1rem; align-items: center; }
+
+/* Button-Gruppe: alle gleich groß */
+.btn-group { display: flex; gap: 0.5rem; }
+.btn-group button { flex: 1; }
+
+/* Footer: gleichmäßig verteilt */
+.footer { display: flex; justify-content: space-around; }
 ```
 
 ---
 
-# Pseudo Classes – Erweitert
+<!-- _class: lead -->
 
-```css
-/* Form States */
-:valid { border-color: green; }
-:invalid { border-color: red; }
-:placeholder-shown { color: #999; }
-
-/* Content */
-:before { content: "→ "; }
-:after { content: " [Wichtig]"; }
-:first-letter { font-size: 2em; }
-:first-line { font-weight: bold; }
-
-/* NOT */
-:not(.disabled) { pointer-events: auto; }
-:not(:last-child) { border-bottom: 1px solid #ccc; }
-```
+# Grid
+## 2D-Layout (Reihe UND Spalte)
 
 ---
 
-# Shorthand Properties
+# Grid — Basics
 
 ```css
-/* margin: top right bottom left */
-margin: 10px 20px 10px 20px;
-
-/* centering */
-margin: 0 auto;
-
-/* padding same */
-padding: 20px;
-
-/* border: width style color */
-border: 1px solid #333;
-
-/* background: color image position/size repeat */
-background: #fff url(logo.png) 0 0 no-repeat;
-
-/* font: style variant weight size/line-height family */
-font: italic normal bold 16px/1.5 Arial, sans-serif;
+.container {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;  /* 3 Spalten, Verhältnis 1:2:1 */
+  grid-template-rows: auto 1fr auto;   /* Header, Body, Footer */
+  gap: 1rem;
+}
 ```
 
+`fr` = Fraction Unit — verbleibender Raum aufgeteilt.
+
 ---
 
-# Flexbox Shorthands
+# Grid — Areas (named layout)
 
 ```css
-/* flex: grow shrink basis */
-flex: 1 0 auto;
+.layout {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "nav    main"
+    "footer footer";
+  grid-template-columns: 200px 1fr;
+}
 
-/* place-items: align-items justify-items */
-place-items: center stretch;
-
-/* place-content: align-content justify-content */
-place-content: space-between center;
-
-/* gap: row-gap column-gap */
-gap: 20px 40px;
+.layout header { grid-area: header; }
+.layout nav    { grid-area: nav; }
+.layout main   { grid-area: main; }
+.layout footer { grid-area: footer; }
 ```
 
+Lesbarer als Spalten-/Zeilen-Nummern.
+
 ---
 
-# CSS Custom Properties (Variables)
+# Grid — Auto-Layout
+
+```css
+/* So viele Spalten wie reinpassen, jede min. 200px */
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+```
+
+Mobile: 1 Spalte. Tablet: 2-3. Desktop: 4-5. **Ohne Media Queries.**
+
+---
+
+# Flexbox vs. Grid
+
+| | Flexbox | Grid |
+|--|---------|------|
+| Dimension | 1D | 2D |
+| Use-Case | Navigation, Karten-Reihe, Button-Gruppe | Seiten-Layout, komplexes Raster |
+| Item-Größe | flexibel | meist fest |
+| Direction | row/column | rows + columns |
+
+**Beide in einem Layout möglich:** Grid für Seite, Flexbox in Komponenten.
+
+---
+
+<!-- _class: lead -->
+
+# Responsive Design
+
+---
+
+# Mobile-First mit Media Queries
+
+```css
+/* Default: Mobile */
+.sidebar { display: none; }
+.content { padding: 1rem; }
+
+/* Tablet aufwärts */
+@media (min-width: 768px) {
+  .sidebar { display: block; width: 240px; }
+  .content { padding: 2rem; }
+}
+
+/* Desktop */
+@media (min-width: 1280px) {
+  .sidebar { width: 320px; }
+}
+```
+
+**Mobile-First**: kleinste Größe als Default, dann größer.
+
+---
+
+# Viewport-Meta
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
+
+**Pflicht** im `<head>`. Ohne dieses Meta zoomt iPhone & Android alles auf 980 px Breite.
+
+---
+
+# Fluid Sizing — ohne Media Queries
+
+```css
+/* Font: skaliert zwischen 14px und 22px */
+h1 { font-size: clamp(1.4rem, 2.5vw + 1rem, 2.5rem); }
+
+/* Padding: skaliert mit Viewport */
+.card { padding: clamp(1rem, 3vw, 3rem); }
+
+/* Breite: nie mehr als 70 Zeichen für Lesetext */
+.prose { max-width: 70ch; margin: auto; }
+```
+
+`clamp(min, ideal, max)` ist modernes Allzweck-Werkzeug.
+
+---
+
+<!-- _class: lead -->
+
+# Animationen
+
+---
+
+# Transitions — sanfter Wechsel
+
+```css
+button {
+  background: hotpink;
+  transition: background 0.2s ease, transform 0.15s;
+}
+
+button:hover {
+  background: deeppink;
+  transform: translateY(-2px);
+}
+```
+
+**Was animiert performant:** `transform`, `opacity`. **Was nicht:** `width`, `height`, `top/left`.
+
+---
+
+# Keyframe-Animationen
+
+```css
+@keyframes pulse {
+  0%   { transform: scale(1); opacity: 1; }
+  50%  { transform: scale(1.1); opacity: 0.7; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+.notification {
+  animation: pulse 1.5s ease infinite;
+}
+```
+
+`animation: <name> <duration> <timing> <iteration>`.
+
+---
+
+# Reduced Motion — Pflicht
+
+Nicht alle wollen Animationen. (Vestibuläre Probleme, ADHS, Migräne.)
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+**Standard-Bestandteil** jeder Seite — ein User-Setting respektieren.
+
+---
+
+<!-- _class: lead -->
+
+# CSS-Variablen + Modern
+
+---
+
+# Custom Properties (CSS Variables)
 
 ```css
 :root {
-  --primary-color: #d63384;
-  --spacing: 20px;
-  --radius: 8px;
+  --primary: hotpink;
+  --gap: 1rem;
+  --radius: 0.75rem;
 }
 
-.button {
-  background: var(--primary-color);
-  padding: var(--spacing);
+button {
+  background: var(--primary);
+  padding: var(--gap);
   border-radius: var(--radius);
 }
+
+/* Dark Mode: nur Variablen umsetzen */
+@media (prefers-color-scheme: dark) {
+  :root { --primary: deeppink; }
+}
 ```
 
 ---
@@ -226,67 +382,72 @@ gap: 20px 40px;
 # CSS Functions
 
 ```css
-/* calc */
-width: calc(100% - 40px);
-
-/* min/max/clamp */
-width: min(100%, 600px);
-font-size: clamp(14px, 2vw, 20px);
-
-/* var with fallback */
-color: var(--text-color, #333);
-
-/* rgb/rgba/hsl/hsla */
-color: hsl(200, 100%, 50%);
-background: rgba(0, 0, 0, 0.5);
-```
-
----
-
-# Transition & Animation
-
-```css
-/* transition: property duration timing-function */
-transition: all 0.3s ease-in-out;
-transition: background 0.2s, transform 0.1s;
-
-/* animation */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.fade-in {
-  animation: fadeIn 0.5s ease-out;
+.box {
+  width: calc(100% - 2rem);             /* Mathe */
+  font-size: clamp(1rem, 2vw, 2rem);    /* min, ideal, max */
+  background: linear-gradient(45deg, hotpink, deeppink);
+  color: oklch(0.7 0.2 30);             /* moderner Farbraum */
+  filter: blur(2px) brightness(1.2);    /* Bildeffekte */
 }
 ```
 
 ---
 
-# CSS Frameworks
+# CSS-Frameworks
 
 | Framework | Stil |
 |-----------|------|
-| **Bootstrap** | Komponenten + Grid, opinionated |
-| **Tailwind CSS** | Utility-First, atomar |
-| **Bulma** | klassisch, ohne JS |
-| **shadcn/ui** | kopierbare Komponenten (Tailwind-basiert) |
-| **Flowbite** | Tailwind-Komponentenbib. |
-
----
-
-# Tailwind CSS – Beispiel
+| **Tailwind CSS** | Utility-Klassen direkt im HTML |
+| **Bootstrap** | Komponenten-Bibliothek (klassisch) |
+| **Pico** | klassen-frei, semantisches HTML reicht |
+| **Open Props** | CSS-Variablen-Set |
 
 ```html
-<button class="bg-blue-600 hover:bg-blue-700
-               text-white font-semibold
-               px-4 py-2 rounded-lg
-               transition shadow-sm">
-  Klick mich
+<!-- Tailwind: alle Styles als Klassen -->
+<button class="bg-pink-500 hover:bg-pink-600 px-4 py-2 rounded-md">
+  Klick
 </button>
 ```
 
-- Keine eigenen CSS-Klassen mehr
-- JIT-Compiler erzeugt nur genutzte Klassen
-- Design-System via `tailwind.config.js`
+---
 
+# Tailwind — Argumente dafür/dagegen
+
+**Pro:**
+- Schnell, weniger Context-Switch (HTML + CSS in einer Datei)
+- Konsistent (Design-System eingebaut)
+- Tree-Shaking → kleines Bundle
+
+**Contra:**
+- HTML voller Klassen — schwerer zu lesen
+- Lernkurve eigene
+- Versions-Lock-in mit Setup
+
+**Faustregel:** für neue Projekte ausprobieren, vorhandene Projekte nicht zwanghaft migrieren.
+
+---
+
+<!-- _class: aufgabe -->
+
+# Selbstlernen — Layout-Übung
+
+1. **Flexbox-Spiel:** [flexboxfroggy.com](https://flexboxfroggy.com) — alle 24 Level durch.
+2. **Grid-Spiel:** [cssgridgarden.com](https://cssgridgarden.com) — 28 Level durch.
+3. **Eigene Karten-Galerie:** `repeat(auto-fit, minmax(...))` Pattern anwenden.
+
+**Bonus:** Dark-Mode mit CSS-Variablen + `prefers-color-scheme`.
+
+---
+
+# Zusammenfassung
+
+**Heute gelernt:**
+- Box-Model + `box-sizing: border-box` global
+- **Flexbox** für 1D-Layouts (Navigation, Karten-Reihen)
+- **Grid** für 2D-Layouts (Seiten-Layout, Galerien)
+- Mobile-First Media Queries + `clamp()` für fluid
+- Transitions + Keyframes — `prefers-reduced-motion` respektieren
+- CSS-Variablen für Theming
+- Tailwind & Co. als moderner Framework-Stil
+
+**Nächste Stunde:** Node.js — JavaScript außerhalb des Browsers.
diff --git a/slides/dhbw/03_nodejs_basics.md b/slides/dhbw/03_nodejs_basics.md
index 083cd1c..16a30b4 100644
--- a/slides/dhbw/03_nodejs_basics.md
+++ b/slides/dhbw/03_nodejs_basics.md
@@ -8,277 +8,354 @@ footer: "Michael Czechowski – SoSe 2026"
 ---
 
 <style>
-:root {
-  --color-foreground: #1a1a2e;
-  --color-highlight: #d63384;
-  --color-dimmed: #4a4a6a;
-}
-section.invert {
-  --color-foreground: #fff;
-}
-section {
-  font-size: 1.4rem;
-}
-h1 {
-  color: #a02060;
-}
-section.invert h1 {
-  color: #fff;
-}
-h2 {
-  color: #1f2937;
-}
-section.invert h2 {
-  color: #f48fb1;
-}
-pre {
-  background: #0f0f23;
-  color: #f48fb1;
-  border-radius: 8px;
-  border-left: 3px solid #d63384;
-}
-pre code {
-  background: transparent;
-  color: inherit;
-}
-code {
-  background: #1a1a2e;
-  color: #f48fb1;
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-a {
-  color: var(--color-highlight);
-}
+:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; }
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.4rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
+pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
+pre code { background: transparent; color: inherit; }
+code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
+a { color: var(--color-highlight); }
 </style>
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# Web Engineering
-
-**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
-**Sommersemester 2026** · Sitzung 4 — Node.js: Scripting, Running and Building
+# Kapitel 3 — Node.js Basics
+## JavaScript außerhalb des Browsers
 
 ---
 
-# Ressourcen zum Selbstlernen
+# Was ist Node.js?
 
-- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
-- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
-- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
-- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
-- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
+**Ryan Dahl, 2009.** JavaScript-Runtime auf V8 (Chrome's JS-Engine).
+
+Vorher: JS war Browser-only.
+Mit Node: JS auch als Server, CLI-Tools, Build-Skripte.
+
+**Heute:** Node ist Standard-Backend für viele Web-Apps. Netflix, LinkedIn, NASA, Walmart.
 
 ---
 
-# Inhalt
+# Warum Node?
 
-1. Node.js: was und warum
-2. `node --check`, `node -e` (One-Liner)
-3. Module: `require` / `import`, `__dirname` / `__filename`
-4. HTTP-Server (built-in)
-5. `fs` — Dateien lesen / schreiben
-6. `package.json` — Aufbau und Lifecycle
-7. npm Scripts
-8. Module exportieren
+| Vorteil | Was bedeutet das |
+|---------|------------------|
+| **JS überall** | gleiche Sprache Frontend + Backend |
+| **NPM** | größtes Package-Ökosystem (~3 Mio Packages) |
+| **Non-blocking I/O** | viele Verbindungen gleichzeitig |
+| **Schnell genug** | V8 optimiert JS aggressiv |
+| **Cross-platform** | Linux, macOS, Windows |
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
+# Node Versions-Manager
 
-# Node.js – Scripting, Running and Building
+**fnm** (oder `nvm`, `volta`) — pro Projekt Node-Version.
 
----
+```sh
+# Installieren (macOS/Linux)
+brew install fnm        # oder curl-script
 
-# Node.js – Was ist das?
+# Aktuelle LTS
+fnm install --lts
+fnm use lts-latest      # 24.x
 
-- JavaScript Runtime (V8 Engine)
-- Server-side JavaScript
-- npm Package Manager
-- Ideal für: APIs, CLI Tools, Automation
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/nodejs-usecases.png)
-
-
----
-
-# node --check und node -e
-
-```bash
-# Syntax check only
-node --check script.js
-
-# One-liner
-node -e "console.log('Hallo Welt')"
+# Pro Projekt
+echo "24" > .nvmrc
+fnm use                 # liest .nvmrc
 ```
 
+**Aktuell:** Node 24 LTS.
+
 ---
 
-# node -e Beispiele
+# Projekt initialisieren
 
-```bash
-# String
-node -e "console.log('Hello ' + process.argv[2])" Welt
+```sh
+mkdir mein-projekt && cd mein-projekt
+npm init -y             # erzeugt package.json
 
-# File reading (ESM via --input-type)
-node --input-type=module -e \
-  "import { readFileSync } from 'node:fs'; \
-   console.log(readFileSync('data.json', 'utf8'))"
+# Abhängigkeiten installieren
+npm install express     # → dependencies
+npm install -D vitest   # → devDependencies (nur dev)
 
-# JSON parsen
-node -e "console.log(JSON.parse(process.argv[1]))" '{"a":1}'
+# Skripte ausführen
+npm run start
+npm test
 ```
 
----
-
-# Module laden – ESM (modern)
-
-`"type": "module"` in `package.json` einschalten.
-
-```javascript
-// Eigene Datei (Endung .js erforderlich!)
-import { add, greet } from "./utils.js";
-
-// npm Modul (default + named import)
-import express from "express";
-import { Router } from "express";
-
-// Built-in (mit "node:"-Präfix)
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-```
-
-<small>**Legacy CJS:** `const express = require("express")` — funktioniert noch, aber ESM ist heute Standard.</small>
+`-y` = alle Defaults akzeptieren.
 
 ---
 
-# Pfad-Auflösung in ESM
-
-```javascript
-import { fileURLToPath } from "node:url";
-import { dirname, join } from "node:path";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname  = dirname(__filename);
-
-const configPath = join(__dirname, "..", "config.json");
-```
-
-<small>In ESM gibt es **kein** automatisches `__dirname` / `__filename` (anders als CJS). Über `import.meta.url` rekonstruieren.</small>
-
----
-
-# HTTP Server mit Node.js (Built-in)
-
-**ESM** (modern, `"type": "module"` in `package.json`):
-```javascript
-import { createServer } from "node:http";
-
-const server = createServer((req, res) => {
-  res.writeHead(200, { "Content-Type": "text/html" });
-  res.end("<h1>Hallo Welt!</h1>");
-});
-
-server.listen(3000, () => {
-  console.log("Server läuft auf Port 3000");
-});
-```
-
-<small>**CommonJS** (legacy): `const http = require("http");` — funktioniert noch, aber neue Projekte nutzen ESM.</small>
-
----
-
-# fs – Dateien lesen/schreiben
-
-```javascript
-import { readFile, readFileSync, writeFile } from "node:fs";
-import { readFile as readFileAsync } from "node:fs/promises";
-
-// Promise-API (empfohlen, modern)
-const data = await readFileAsync("data.json", "utf8");
-console.log(JSON.parse(data));
-
-// Callback-API
-readFile("data.json", "utf8", (err, data) => {
-  if (err) throw err;
-  console.log(JSON.parse(data));
-});
-
-// Sync (nur für Setup / Scripts)
-const content = readFileSync("data.json", "utf8");
-```
-
----
-
-# package.json – Das Herzstück
+# package.json
 
 ```json
 {
   "name": "mein-projekt",
-  "version": "1.0.0",
-  "main": "index.js",
+  "version": "0.1.0",
+  "type": "module",
   "scripts": {
-    "start": "node index.js",
-    "dev": "node --watch index.js",
-    "test": "node --test"
+    "dev": "node --watch src/server.js",
+    "start": "node src/server.js",
+    "test": "vitest"
   },
   "dependencies": {
-    "express": "^4.18.0"
+    "express": "^5.0.0"
   },
   "devDependencies": {
-    "nodemon": "^3.0.0"
+    "vitest": "^2.0.0"
   }
 }
 ```
 
+`"type": "module"` aktiviert ESM.
+
 ---
 
-# npm Scripts
+# ESM — modern
 
-```bash
-# npm run <script>
-npm run start
-npm run dev
+```javascript
+// utils.js
+export function greet(name) {
+  return `Hallo ${name}`;
+}
 
-# Mit Argumenten
-npm run build -- --production
+export const VERSION = "1.0";
 
-# Lifecycle scripts
-npm install  → postinstall
-npm start    → start (direkt)
+// main.js
+import { greet, VERSION } from './utils.js';
+console.log(greet('Ada'), VERSION);
+```
+
+**Pflicht:** `.js`-Endung in import-Pfad.
+
+---
+
+# CommonJS — Legacy
+
+```javascript
+// utils.cjs
+function greet(name) {
+  return `Hallo ${name}`;
+}
+module.exports = { greet };
+
+// main.cjs
+const { greet } = require('./utils.cjs');
+```
+
+**Wann CJS?** Alte Codebases, npm-Packages, die nicht migriert sind. **Default heute:** ESM.
+
+---
+
+# Built-in Modules
+
+```javascript
+import { readFile } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+```
+
+`node:` Prefix macht explizit klar — kein npm-Package.
+
+---
+
+<!-- _class: lead -->
+
+# HTTP-Server
+
+---
+
+# Eingebauter HTTP-Server
+
+```javascript
+import { createServer } from 'node:http';
+
+const server = createServer((req, res) => {
+  res.writeHead(200, { 'Content-Type': 'text/plain' });
+  res.end('Hallo Welt');
+});
+
+server.listen(3000, () => {
+  console.log('Server läuft auf :3000');
+});
+```
+
+Nackt — ohne Framework. **Funktioniert.**
+
+---
+
+# Express — der Klassiker
+
+```javascript
+import express from 'express';
+const app = express();
+
+app.use(express.json());          // parsed JSON-Body
+app.use(express.static('public')); // statische Dateien
+
+app.get('/', (req, res) => {
+  res.send('Hallo Welt');
+});
+
+app.post('/api/echo', (req, res) => {
+  res.json({ youSent: req.body });
+});
+
+app.listen(3000);
 ```
 
 ---
 
-# Node.js Module – exports (ESM)
+# REST mit Express
 
 ```javascript
-// utils.js — named exports
-export const add = (a, b) => a + b;
-export const greet = (name) => `Hallo ${name}!`;
+const users = [{ id: 1, name: 'Ada' }];
 
-// utils.js — default export
-export default {
-  add,
-  greet
+app.get('/users', (req, res) => res.json(users));
+
+app.get('/users/:id', (req, res) => {
+  const user = users.find(u => u.id == req.params.id);
+  user ? res.json(user) : res.sendStatus(404);
+});
+
+app.post('/users', (req, res) => {
+  const user = { id: users.length + 1, ...req.body };
+  users.push(user);
+  res.status(201).json(user);
+});
+```
+
+---
+
+# Alternative Frameworks
+
+| Framework | Stärke |
+|-----------|--------|
+| **Express** | etabliert, größte Community |
+| **Fastify** | schneller, schemas eingebaut |
+| **Hono** | leichtgewichtig, Edge-deployable |
+| **Koa** | von Express-Autoren, modern |
+
+Für DHBW: **Express** oder **Hono**.
+
+---
+
+# Routing-Pattern
+
+```javascript
+import { Router } from 'express';
+const userRouter = Router();
+
+userRouter.get('/',     (req, res) => { /* alle Users */ });
+userRouter.get('/:id',  (req, res) => { /* ein User */ });
+userRouter.post('/',    (req, res) => { /* User anlegen */ });
+userRouter.put('/:id',  (req, res) => { /* User update */ });
+userRouter.delete('/:id', (req, res) => { /* User löschen */ });
+
+app.use('/users', userRouter);  // mountet unter /users/*
+```
+
+---
+
+<!-- _class: lead -->
+
+# Fetch in Node
+
+---
+
+# fetch — global ab Node 18
+
+```javascript
+// GET
+const res = await fetch('https://api.github.com/users/torvalds');
+const data = await res.json();
+console.log(data.public_repos);
+
+// POST
+const post = await fetch('https://api.example.com/posts', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ title: 'Hallo' })
+});
+```
+
+Genau wie im Browser. **Kein extra Package** (vorher: `node-fetch`, `axios`).
+
+---
+
+# Error-Handling
+
+```javascript
+try {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status}`);
+  }
+  const data = await res.json();
+  return data;
+} catch (error) {
+  console.error('API call failed:', error.message);
+  throw error;  // re-throw für caller
+}
+```
+
+`res.ok` ist `true` für 2xx-Statuscodes.
+
+---
+
+# Environment Variables
+
+```javascript
+// .env (gitignored!)
+DATABASE_URL=postgres://...
+API_KEY=sk-...
+PORT=3000
+
+// src/config.js
+import 'dotenv/config';
+
+export const config = {
+  port: process.env.PORT || 3000,
+  dbUrl: process.env.DATABASE_URL,
+  apiKey: process.env.API_KEY,
 };
 ```
 
-```javascript
-// nutzen
-import { add, greet } from "./utils.js";       // named
-import utils from "./utils.js";                // default
-import utils, { add } from "./utils.js";       // beides
-```
+**Niemals** API-Keys ins Repo committen.
 
-<small>**Legacy CJS:** `module.exports = { add, greet }` + `const { add } = require("./utils")`.</small>
+---
 
+<!-- _class: aufgabe -->
+
+# Selbstlernen — Mini-API
+
+1. **Projekt initialisieren:** `npm init -y`, ESM aktivieren
+2. **Express installieren**
+3. **REST-API** für eine Ressource (Books / Movies / TODO)
+   - `GET /items`, `GET /items/:id`, `POST /items`, `DELETE /items/:id`
+4. **In-Memory-Store** als Array (echte DB kommt Kap 4)
+5. **Mit Hoppscotch oder curl** testen
+
+**Bonus:** `npm run dev` mit `--watch`-Flag.
+
+---
+
+# Zusammenfassung
+
+**Heute gelernt:**
+- Node.js als JS-Runtime außerhalb Browser
+- **fnm + Node 24 LTS** als Versions-Setup
+- **npm init**, package.json, scripts, dependencies
+- **ESM** (import/export) als modernes Modul-System
+- Built-in HTTP-Server + **Express** für REST
+- **fetch** global ab Node 18
+- **.env + dotenv** für Secrets
+
+**Nächste Stunde:** async/await, Filesystem, Datenbank, Auth.
diff --git a/slides/dhbw/04_nodejs_advanced.md b/slides/dhbw/04_nodejs_advanced.md
index 6d2f238..31a4ed4 100644
--- a/slides/dhbw/04_nodejs_advanced.md
+++ b/slides/dhbw/04_nodejs_advanced.md
@@ -8,289 +8,373 @@ footer: "Michael Czechowski – SoSe 2026"
 ---
 
 <style>
-:root {
-  --color-foreground: #1a1a2e;
-  --color-highlight: #d63384;
-  --color-dimmed: #4a4a6a;
-}
-section.invert {
-  --color-foreground: #fff;
-}
-section {
-  font-size: 1.4rem;
-}
-h1 {
-  color: #a02060;
-}
-section.invert h1 {
-  color: #fff;
-}
-h2 {
-  color: #1f2937;
-}
-section.invert h2 {
-  color: #f48fb1;
-}
-pre {
-  background: #0f0f23;
-  color: #f48fb1;
-  border-radius: 8px;
-  border-left: 3px solid #d63384;
-}
-pre code {
-  background: transparent;
-  color: inherit;
-}
-code {
-  background: #1a1a2e;
-  color: #f48fb1;
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-a {
-  color: var(--color-highlight);
-}
+:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; }
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.4rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
+pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
+pre code { background: transparent; color: inherit; }
+code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
+a { color: var(--color-highlight); }
 </style>
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# Web Engineering
-
-**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
-**Sommersemester 2026** · Sitzung 5 — Express API, CRUD und Middlewares
+# Kapitel 4 — Node.js Advanced
+## async · Files · Database · Auth · Errors
 
 ---
 
-# Ressourcen zum Selbstlernen
+<!-- _class: lead -->
 
-- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
-- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
-- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
-- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
-- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
+# Asynchron + Promises
 
 ---
 
-# Inhalt
+# Synchron vs. Asynchron
 
-1. Node.js — Fun Facts & alternative Runtimes
-2. `process` — Signal-Handling, Graceful Shutdown
-3. Express — Setup, Routing
-4. Middlewares (eigene + built-in)
-5. CRUD-Endpunkte (Create, Read, Update, Delete)
-6. Error Handling
-7. WebSockets
+**Synchron** (blockierend):
+```javascript
+const data = readFileSync('huge.txt');  // wartet
+console.log('weiter');                    // erst danach
+```
+
+**Asynchron** (non-blocking):
+```javascript
+const data = await readFile('huge.txt'); // wartet ohne blockieren
+console.log('weiter');                    // erst danach
+```
+
+Node's Stärke: **non-blocking I/O** für viele parallele Operationen.
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
-
-# Node.js – Advanced
-
----
-
-# node.js – Fun Facts
-
-- Entwickelt von Ryan Dahl in 2009
-- Erste serverseitige Laufzeitumgebung in JavaScript (C++)
-- Inspiriert von Nginx (Non-blocking I/O)
-
-**Alternativen heute:**
-- **Deno** (2020): Rust, Tokio
-- **Bun** (2022): Zig
-
----
-
-# process – Prozess-Steuerung
+# Promise — Anatomie
 
 ```javascript
-process.on("SIGINT", () => {
-  console.log("Received SIGINT. Closing server...");
-  server.close(() => {
-    console.log("Server closed.");
-    process.exit(0);
-  });
-});
+const promise = fetch('https://api.example.com');
 
-// Signale
-process.exit(0);  // Erfolgreich
-process.exit(1);  // Fehler
+// then-style (alt)
+promise
+  .then(res => res.json())
+  .then(data => console.log(data))
+  .catch(err => console.error(err));
+
+// async/await (modern)
+try {
+  const res = await fetch('https://api.example.com');
+  const data = await res.json();
+  console.log(data);
+} catch (err) {
+  console.error(err);
+}
 ```
 
 ---
 
-# node.js Module System
+# Sequenziell vs. Parallel
 
 ```javascript
-// ES Modules (modern, "type": "module")
-import express from "express";
-import { port } from "./src/config/constants.js";
-import { readFileSync } from "node:fs";
+// SEQUENZIELL — langsam (warten + warten + warten)
+const a = await fetch('/api/a');
+const b = await fetch('/api/b');
+const c = await fetch('/api/c');
+// Gesamtzeit: a + b + c
+
+// PARALLEL — schnell (alle gleichzeitig starten)
+const [a, b, c] = await Promise.all([
+  fetch('/api/a'),
+  fetch('/api/b'),
+  fetch('/api/c'),
+]);
+// Gesamtzeit: max(a, b, c)
 ```
 
+---
+
+# Promise-Methoden
+
+| Methode | Was |
+|---------|-----|
+| `Promise.all([…])` | alle erfolgreich ODER ein Fehler |
+| `Promise.allSettled([…])` | alle, Resultat = { status, value/reason } |
+| `Promise.race([…])` | erstes Resultat gewinnt (auch Fehler) |
+| `Promise.any([…])` | erstes erfolgreiches, ignore Fehler |
+
 ```javascript
-// CommonJS (legacy)
-const express = require("express");
-const fs = require("fs");
+const fastest = await Promise.race([
+  fetch('/api'),
+  new Promise((_, rej) => setTimeout(() => rej('timeout'), 3000))
+]);
 ```
 
-→ Neue Projekte: ESM. Built-ins immer mit `node:`-Präfix.
-
 ---
 
-# HTTP Request mit node-fetch
+<!-- _class: lead -->
+
+# Filesystem
+
+---
+
+# fs/promises — Files lesen + schreiben
 
 ```javascript
-// Node.js 18+ hat fetch eingebaut
-const res = await fetch('https://api.example.com/data');
-const data = await res.json();
+import { readFile, writeFile, readdir, mkdir } from 'node:fs/promises';
 
-// Ältere Versionen: node-fetch
-import fetch from 'node-fetch';
+// Lesen
+const text = await readFile('input.txt', 'utf-8');
+const buf = await readFile('image.png');         // Buffer
+
+// Schreiben
+await writeFile('output.txt', 'Hallo Welt');
+await writeFile('data.json', JSON.stringify({ x: 1 }, null, 2));
+
+// Verzeichnis lesen
+const files = await readdir('./uploads');
+
+// Verzeichnis anlegen
+await mkdir('./tmp', { recursive: true });
 ```
 
 ---
 
-# Web Server, Builder, Bundler
-
-```bash
-# Boilerplates erstellen
-npm create vite@latest my-app -- --template react
-npm create svelte@latest
-npm create astro@latest
-
-# nuxt
-npm install nuxt
-npm run dev
-```
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/js-frameworks-overview.png)
-
-
----
-
-# Express – Grundlagen
+# Streams für große Dateien
 
 ```javascript
-import express from 'express';
-const app = express();
+import { createReadStream, createWriteStream } from 'node:fs';
+import { pipeline } from 'node:stream/promises';
 
-app.listen(port, () => {
-  console.log(`Server läuft auf Port ${port}`);
-});
+// 10 GB Logfile ohne RAM-Explosion verarbeiten
+await pipeline(
+  createReadStream('huge.log'),
+  // ... transform-stream ...
+  createWriteStream('output.log')
+);
 ```
 
+Streams = Daten **stückweise** verarbeiten, nicht alles in RAM.
+
 ---
 
-# Express – Middleware
+<!-- _class: lead -->
+
+# Datenbank
+
+---
+
+# Welche DB für DHBW-Projekte?
+
+| DB | Wann |
+|----|------|
+| **SQLite** | klein, embedded, eine Datei. Lokal/dev/demo. |
+| **PostgreSQL** | Standard für „echte" Apps. Open Source, mächtig. |
+| **MongoDB** | NoSQL, dokumentenorientiert. Selten erste Wahl. |
+| **Redis** | Cache, Queue, schnell. |
+
+Für Prüfungsleistung: **SQLite** (kein Setup) oder **Postgres** (production-realistisch).
+
+---
+
+# SQLite mit `better-sqlite3`
 
 ```javascript
-app.use(express.json());
+import Database from 'better-sqlite3';
+const db = new Database('app.db');
 
-app.use('/api', (req, res, next) => {
-  console.log('Time:', Date.now());
-  next();
-});
+db.prepare(`
+  CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY,
+    name TEXT NOT NULL,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+  )
+`).run();
 
-app.use((req, res, next) => {
-  console.log('Middleware 2');
-  next();
-});
+// Insert
+const insert = db.prepare('INSERT INTO users (name) VALUES (?)');
+insert.run('Ada');
+
+// Query
+const users = db.prepare('SELECT * FROM users').all();
+const ada = db.prepare('SELECT * FROM users WHERE id = ?').get(1);
 ```
 
 ---
 
-# Express – CRUD Routes
+# ORM / Query-Builder
+
+Für komplexere Apps: ORM statt Raw-SQL.
+
+| Tool | Typ |
+|------|-----|
+| **Drizzle** | TypeScript-first, modern, lightweight |
+| **Prisma** | umfangreich, eigenes Schema |
+| **Knex** | Query-Builder, kein ORM |
+| **TypeORM** | klassisches ORM |
+
+```typescript
+// Drizzle Beispiel
+const result = await db.select().from(users).where(eq(users.id, 1));
+```
+
+---
+
+# CRUD-Pattern mit Express + SQLite
 
 ```javascript
-app.get('/api/:key', async (req, res) => {
-  const context = cache.get(req.params.key);
-  res.json({ context });
+app.get('/users', (req, res) => {
+  const users = db.prepare('SELECT * FROM users').all();
+  res.json(users);
 });
 
-app.post('/api/:key', async (req, res) => {
-  const payload = req.body;
-  res.json({ created: cache.set(req.params.key, payload) });
+app.get('/users/:id', (req, res) => {
+  const user = db.prepare('SELECT * FROM users WHERE id = ?').get(req.params.id);
+  user ? res.json(user) : res.sendStatus(404);
 });
 
-app.put('/api/:key', async (req, res) => {
-  const payload = req.body;
-  res.json({ updated: cache.update(req.params.key, payload) });
-});
-
-app.delete('/api/:key', async (req, res) => {
-  cache.remove(req.params.key);
-  res.json({ deleted: req.params.key });
+app.post('/users', (req, res) => {
+  const { name } = req.body;
+  const result = db.prepare('INSERT INTO users (name) VALUES (?)').run(name);
+  res.status(201).json({ id: result.lastInsertRowid, name });
 });
 ```
 
 ---
 
-# Express – server.listen
+<!-- _class: lead -->
+
+# Authentifizierung
+
+---
+
+# Auth-Strategien
+
+| Strategie | Wann |
+|-----------|------|
+| **Session-Cookie** | klassische Web-App, Server-Side Render |
+| **JWT** (JSON Web Token) | API + SPA, stateless |
+| **OAuth** | „Mit Google einloggen", Drittpartei-Login |
+| **Magic Link** | Email statt Passwort, modern |
+| **Passkeys** | passwordless, FIDO2, Zukunft |
+
+Für DHBW-Projekt: **Session-Cookie** (express-session) ODER **JWT**.
+
+---
+
+# Passwörter — *niemals plaintext*
 
 ```javascript
-const server = app.listen(port, () => {
-  console.log(`Server läuft auf Port ${port}`);
-});
+import bcrypt from 'bcrypt';
 
-server.on('error', (err) => {
-  console.error('Server error:', err);
-});
+// Registrieren
+const hashed = await bcrypt.hash('mein-passwort', 12);
+db.prepare('INSERT INTO users (email, password) VALUES (?, ?)').run(email, hashed);
 
-server.close(() => {
-  console.log('Server geschlossen');
-});
+// Login
+const user = db.prepare('SELECT * FROM users WHERE email = ?').get(email);
+const valid = await bcrypt.compare(password, user.password);
 ```
 
+**bcrypt** oder **argon2** für Passwort-Hashing. Niemals MD5/SHA1.
+
 ---
 
-# WebSockets
+# JWT — kurzer Überblick
 
 ```javascript
-import { WebSocketServer } from 'ws';
+import jwt from 'jsonwebtoken';
 
-const wss = new WebSocketServer({ port: 8080 });
+// Signieren (beim Login)
+const token = jwt.sign(
+  { userId: user.id, role: user.role },
+  process.env.JWT_SECRET,
+  { expiresIn: '1d' }
+);
+res.cookie('token', token, { httpOnly: true, secure: true });
 
-wss.on('connection', (ws) => {
-  console.log('Client verbunden');
+// Verifizieren (Middleware)
+const token = req.cookies.token;
+const payload = jwt.verify(token, process.env.JWT_SECRET);
+req.user = payload;
+```
 
-  ws.on('message', (data) => {
-    console.log('Empfangen:', data.toString());
-    ws.send('Pong');
-  });
-});
+`httpOnly + secure + sameSite` — XSS/CSRF-Schutz.
+
+---
+
+<!-- _class: lead -->
+
+# Error-Handling
+
+---
+
+# try/catch + Error-Klassen
+
+```javascript
+class NotFoundError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = 'NotFoundError';
+    this.status = 404;
+  }
+}
+
+try {
+  const user = await getUser(id);
+  if (!user) throw new NotFoundError(`User ${id} not found`);
+  res.json(user);
+} catch (err) {
+  if (err instanceof NotFoundError) return res.status(404).json({ error: err.message });
+  console.error(err);
+  res.sendStatus(500);
+}
 ```
 
 ---
 
-<!-- _header: '' -->
-<!-- _footer: '' -->
+# Globaler Express-Error-Handler
 
-![bg fit](./assets/demos/ts-js-compilation.png)
+```javascript
+// Am Ende aller Routes!
+app.use((err, req, res, next) => {
+  console.error(err);
+  
+  if (err.status) {
+    return res.status(err.status).json({ error: err.message });
+  }
+  
+  res.status(500).json({ error: 'Internal Server Error' });
+});
+```
 
+4 Argumente: `(err, req, res, next)` → Express erkennt Error-Handler.
 
 ---
 
-<!-- _header: '' -->
-<!-- _footer: '' -->
+<!-- _class: aufgabe -->
 
-![bg fit](./assets/demos/docker-orchestration.png)
+# Selbstlernen — REST-API mit DB
 
+Erweitert eure Kap-3-API:
+
+1. **SQLite-DB** mit `better-sqlite3`
+2. **CRUD** mit DB statt In-Memory-Array
+3. **Validierung** (z.B. mit `zod`) für POST-Body
+4. **Auth:** einfache Login-Route mit bcrypt + JWT
+5. **Global Error-Handler** für saubere Responses
+
+**Bonus:** Async-Race-Condition simulieren + Promise.all nutzen.
 
 ---
 
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/test-automation-trophy.png)
+# Zusammenfassung
 
+**Heute gelernt:**
+- **async/await + Promise** sauber anwenden, sequenziell vs. parallel
+- **fs/promises + Streams** für Dateien
+- **SQLite + Prepared Statements** als pragmatische DB
+- **bcrypt** für Passwörter, **JWT** als Token-Pattern
+- **Error-Klassen + Globaler Handler** in Express
 
+**Nächste Stunde:** Testing — Vitest, TDD, Integration, E2E.
diff --git a/slides/dhbw/05_testing.md b/slides/dhbw/05_testing.md
index 7be108a..415a9b7 100644
--- a/slides/dhbw/05_testing.md
+++ b/slides/dhbw/05_testing.md
@@ -9,366 +9,375 @@ title: Testing
 ---
 
 <style>
-:root {
-  --color-foreground: #1a1a2e;
-  --color-highlight: #d63384;
-  --color-dimmed: #4a4a6a;
-}
-section.invert {
-  --color-foreground: #fff;
-}
-section {
-  font-size: 1.4rem;
-}
-h1 {
-  color: #a02060;
-}
-section.invert h1 {
-  color: #fff;
-}
-h2 {
-  color: #1f2937;
-}
-section.invert h2 {
-  color: #f48fb1;
-}
-pre {
-  background: #0f0f23;
-  color: #f48fb1;
-  border-radius: 8px;
-  border-left: 3px solid #d63384;
-}
-pre code {
-  background: transparent;
-  color: inherit;
-}
-code {
-  background: #1a1a2e;
-  color: #f48fb1;
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-a {
-  color: var(--color-highlight);
-}
+:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; }
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.4rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
+pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
+pre code { background: transparent; color: inherit; }
+code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
+a { color: var(--color-highlight); }
 </style>
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# Web Engineering
-
-**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
-**Sommersemester 2026** · Sitzung 7 — Testing
+# Kapitel 5 — Testing
+## Unit · Integration · E2E · TDD
 
 ---
 
-# Ressourcen zum Selbstlernen
+# Warum testen?
 
-- **CODE CRISPIES** — [codecrispi.es](https://codecrispi.es/)
-- **Online Code-Editor** — [codepen.io](https://codepen.io/pen/)
-- **MDN** (Mozilla Developer Network) — [developer.mozilla.org/de/](https://developer.mozilla.org/de/)
-- **Flexbox-Spiel** — [flexboxfroggy.com](https://flexboxfroggy.com/)
-- **Grid-Spiel** — [cssgridgarden.com](https://cssgridgarden.com/)
+| Vorteil | Was bedeutet das |
+|---------|------------------|
+| **Confidence** | Refactor ohne Angst |
+| **Regression-Schutz** | alter Bug taucht nicht wieder auf |
+| **Living Documentation** | Tests zeigen, was Code soll |
+| **CI/CD-Voraussetzung** | automatisch vor jedem Deploy |
+
+**„Untested Code is broken by design."**
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
-
-# Testing
-
-## Unit · Integration · End-to-End
-
----
-
-# Inhalt
-
-1. Test Automation Pyramid
-2. Test Automation Trophy
-3. Static Code Analysis
-4. Unit Tests
-5. Integration Tests
-6. End-to-End Tests (API + Client)
-7. Live Coding
-
----
-
-# Test Automation Pyramid
+# Test-Pyramide
 
 ```
-            ▲  manual / exploratory
-           ▲ ▲   E2E (UI + API)
-          ▲▲▲▲   Integration (class + real deps)
-         ▲▲▲▲▲▲   Unit (class + mocked deps)
-        ▲▲▲▲▲▲▲▲   Static analysis (compiler, linter)
+        /\
+       /E2E\         wenige (langsam, fragil)
+      /-----\
+     / Integ \       einige (mittel)
+    /---------\
+   /   Unit    \     viele (schnell, isoliert)
+  /-------------\
 ```
 
-- Oben: wenige, langsam, teuer, brüchig
-- Unten: viele, schnell, billig, stabil
+**Faustregel:** 70 % Unit, 20 % Integration, 10 % E2E.
 
 ---
 
-# Test Automation V-Modell
+# Vitest — modernes JS-Testing
 
+```sh
+npm install -D vitest
 ```
-Requirements ────────────► Acceptance Test
-   ▼                            ▲
-Architecture ────────► Integration Test
-   ▼                            ▲
-Modular Design ──────► Unit Test
-   ▼                            ▲
-        Implementation
-```
-
-Jede Design-Phase hat Testpendant. Testfälle früh ableiten.
-
----
-
-# Test Automation Trophy (Kent C. Dodds)
-
-```
-   ┌─────────┐
-   │   E2E   │  ← klein
-   ├─────────┤
-   │ Integr. │  ← GROSS (Hauptfokus)
-   ├─────────┤
-   │  Unit   │  ← mittel
-   ├─────────┤
-   │ Static  │  ← Basis (TS, ESLint)
-   └─────────┘
-```
-
-Andere Gewichtung: **Integration im Zentrum**, Static als breite Basis.
-
----
-
-# Testing Frameworks Übersicht
-
-**Static Code Analysis**
-- ESLint, Prettier, SonarQube, TypeScript
-
-**Unit + Integration**
-- jest, mocha, **vitest**
-
-**End-to-End**
-- **Cypress**, **Playwright**, supertest (API only)
-
-**Visual / Interaction**
-- Storybook, Chromatic
-
----
-
-# Static Code Analysis
-
-- Läuft in Millisekunden
-- Findet Syntaxfehler, ungenutzte Variablen, undefined refs
-- Kein Runtime-Overhead
-- **Erste Verteidigungslinie**
-
-```bash
-npm i -D eslint prettier
-npx eslint --init
-npx prettier --write .
-```
-
-`SonarQube`: zentraler Server, Code Smells, Security, Coverage.
-
----
-
-# Unit Tests – Eigenschaften
-
-- **Isolation** – jede Dependency gemockt
-- **Deterministisch** – gleicher Input → gleicher Output
-- **Schnell** – kein I/O, kein Netzwerk, kein FS
-- **Fokussiert** – eine Funktion pro Test
-
----
-
-# Unit Test – Beispiel (vitest)
 
 ```javascript
-// cache.unit.test.js
-import { describe, it, expect } from "vitest";
-import { Cache } from "./cache.js";
+// utils.test.js
+import { describe, it, expect } from 'vitest';
+import { greet } from './utils.js';
 
-describe("Cache", () => {
-  it("creates and retrieves data with custom key", () => {
-    const cache = new Cache();
-    const data = { user: "wolfgang", city: "stuttgart" };
+describe('greet', () => {
+  it('returns greeting with name', () => {
+    expect(greet('Ada')).toBe('Hallo Ada');
+  });
+  
+  it('handles empty string', () => {
+    expect(greet('')).toBe('Hallo ');
+  });
+});
+```
 
-    const key = cache.create(data, "custom-key");
+```sh
+npx vitest
+npx vitest --coverage
+```
 
-    expect(key).toBe("custom-key");
-    expect(cache.get("custom-key")).toEqual(data);
+---
+
+# Test-Struktur (AAA)
+
+```javascript
+it('adds two numbers', () => {
+  // ARRANGE — Setup
+  const a = 2;
+  const b = 3;
+  
+  // ACT — die Operation
+  const result = add(a, b);
+  
+  // ASSERT — Erwartung
+  expect(result).toBe(5);
+});
+```
+
+**Eine Erwartung pro Test** (Faustregel).
+
+---
+
+# Vitest-Matchers
+
+| Matcher | Was |
+|---------|-----|
+| `.toBe(x)` | strict equal (`===`) |
+| `.toEqual(x)` | deep equal (Objects, Arrays) |
+| `.toBeNull()` / `.toBeUndefined()` | |
+| `.toBeTruthy()` / `.toBeFalsy()` | |
+| `.toContain(item)` | Array enthält |
+| `.toHaveLength(n)` | |
+| `.toThrow()` | wirft Fehler |
+| `.toMatchSnapshot()` | Snapshot-Test |
+
+---
+
+<!-- _class: lead -->
+
+# TDD — Test-Driven Development
+
+---
+
+# TDD-Cycle: Red → Green → Refactor
+
+1. **Red:** Test schreiben (schlägt fehl)
+2. **Green:** minimaler Code, damit Test besteht
+3. **Refactor:** Code säubern, Test bleibt grün
+
+**Kent Beck, 2002.** Steile Lernkurve, aber stark fokussiert.
+
+```javascript
+// 1. Red — Test ohne Implementierung
+it('isEven returns true for even', () => {
+  expect(isEven(4)).toBe(true);
+});
+// → ReferenceError: isEven is not defined
+
+// 2. Green — minimale Lösung
+function isEven(n) { return n % 2 === 0; }
+
+// 3. Refactor — Edge Cases, Lesbarkeit
+```
+
+---
+
+<!-- _class: lead -->
+
+# Integration-Tests
+
+---
+
+# API testen mit Supertest
+
+```javascript
+import request from 'supertest';
+import { app } from './app.js';
+
+describe('GET /users', () => {
+  it('returns users array', async () => {
+    const res = await request(app).get('/users');
+    expect(res.status).toBe(200);
+    expect(res.body).toBeInstanceOf(Array);
+  });
+});
+
+describe('POST /users', () => {
+  it('creates a user', async () => {
+    const res = await request(app)
+      .post('/users')
+      .send({ name: 'Ada' });
+    expect(res.status).toBe(201);
+    expect(res.body.name).toBe('Ada');
   });
 });
 ```
 
 ---
 
-# Integration Tests – Eigenschaften
-
-- **Reale Komponenten** – echte Cache + Express-Instanzen
-- **Supertest-Magie** – simuliert HTTP ohne Server-Startup
-- **In-Process** – alles im selben Node-Prozess
-- **Kein Netzwerk** – keine TCP-Connections
-
-→ teste Zusammenspiel mehrerer Module ohne Deployment.
-
----
-
-# Integration Test – Beispiel (supertest)
+# Test-Datenbank
 
 ```javascript
-// app.integration.test.js
-import request from "supertest";
-import { app, cache } from "./app.js";
+import { beforeAll, afterEach, afterAll } from 'vitest';
+import Database from 'better-sqlite3';
 
-test("full CRUD lifecycle with real cache", async () => {
-  const res = await request(app)
-    .post("/api/entries")
-    .send({ name: "integration-test", status: "active" });
+let db;
 
-  expect(res.status).toBe(201);
-  const { key } = res.body;
-
-  expect(cache.keys()).toContain(key);
+beforeAll(() => {
+  db = new Database(':memory:');  // in-RAM, super schnell
+  db.exec('CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT)');
 });
+
+afterEach(() => {
+  db.exec('DELETE FROM users');   // sauberer Start
+});
+
+afterAll(() => db.close());
 ```
 
----
-
-# End-to-End Tests (API)
-
-- **Echter Server** – HTTP auf TCP-Port
-- **Echtes Netzwerk** – `fetch` über localhost
-- **Echte Umgebung** – CORS, Middleware-Stack
-- **User-Perspektive** – exakt was Clients sehen
+`:memory:`-DB = jeder Test isoliert, blitzschnell.
 
 ---
 
-# E2E API Test – Beispiel
+# Mocking
 
 ```javascript
-// index.e2e.test.js
-import { createServer } from "node:http";
-import { app } from "./app.js";
+import { vi, it, expect } from 'vitest';
 
-let server;
-const TEST_PORT = 8081;
-const baseUrl = `http://localhost:${TEST_PORT}`;
-
-beforeAll(async () => {
-  server = createServer(app);
-  await new Promise((r) => server.listen(TEST_PORT, r));
-});
-
-afterAll(() => server.close());
-
-test("complete user journey", async () => {
-  const res = await fetch(`${baseUrl}/api`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ message: "e2e", timestamp: Date.now() }),
+it('calls fetch with right URL', async () => {
+  const mockFetch = vi.spyOn(global, 'fetch').mockResolvedValue({
+    ok: true,
+    json: async () => ({ name: 'Ada' })
   });
-  expect(res.status).toBe(201);
+  
+  await getUserData(1);
+  
+  expect(mockFetch).toHaveBeenCalledWith('https://api/users/1');
 });
 ```
 
----
-
-# End-to-End Tests (Client)
-
-- **Echter Browser** – Chromium / Firefox / WebKit
-- **Echtes DOM** – Klicks, Tippen, Scrollen
-- **Echtes Rendering** – CSS, async Operationen
-- **Cross-Origin** – Client- und Server-Kommunikation
-
-Tools: **Cypress**, **Playwright**
+**Mock sparsam** — übermockt-Tests testen Mocks, nicht Code.
 
 ---
 
-# Cypress – Minimalbeispiel
+<!-- _class: lead -->
+
+# E2E — End-to-End
+
+---
+
+# Playwright — moderne E2E
+
+```sh
+npm init playwright@latest
+```
 
 ```javascript
-// cypress/e2e/counter.cy.js
-describe("Counter App", () => {
-  it("increments on click", () => {
-    cy.visit("http://localhost:3000");
-    cy.contains("button", "Clicked 0 times").click();
-    cy.contains("button", "Clicked 1 times");
-  });
+import { test, expect } from '@playwright/test';
+
+test('login flow', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  await page.getByLabel('Email').fill('ada@example.com');
+  await page.getByLabel('Password').fill('secret123');
+  await page.getByRole('button', { name: 'Login' }).click();
+  
+  await expect(page.getByText('Hallo Ada')).toBeVisible();
 });
 ```
 
-```bash
-npx cypress open    # GUI
-npx cypress run     # headless / CI
-```
+Browser tatsächlich öffnen + interagieren. **Realer User-Flow.**
 
 ---
 
-# Playwright – Minimalbeispiel
+# Playwright-Locators
 
 ```javascript
-// tests/counter.spec.js
-import { test, expect } from "@playwright/test";
+// Bevorzugt: rollenbasiert (A11y-konform!)
+page.getByRole('button', { name: 'Submit' });
+page.getByLabel('Username');
+page.getByText('Welcome');
 
-test("counter increments", async ({ page }) => {
-  await page.goto("http://localhost:3000");
-  await page.getByRole("button").click();
-  await expect(page.getByRole("button")).toContainText("Clicked 1 times");
-});
+// Fallback: CSS-Selektor
+page.locator('.submit-btn');
+page.locator('#username');
 ```
 
-```bash
-npx playwright test
-npx playwright test --ui
-```
+**Rollenbasierte Locators** finden Bugs, die A11y betreffen.
 
 ---
 
-# Coverage Reports
+# E2E vs. Unit — Trade-offs
 
-```bash
-npx vitest run --coverage
-```
+| | Unit | E2E |
+|--|------|-----|
+| Geschwindigkeit | ms | s |
+| Isolation | hoch | gering |
+| Realismus | gering | hoch |
+| Wartung | wenig | viel |
+| Wann | jede Funktion | kritische Flows |
 
-```
-File          | % Stmts | % Branch | % Funcs | % Lines
---------------|---------|----------|---------|--------
-cache.js      |   95.2  |   80.0   |  100.0  |  95.2
-app.js        |   88.7  |   75.0   |   90.0  |  88.7
-```
-
-- `lcov.info` → CI / SonarQube
-- HTML Report → `coverage/index.html`
+E2E nicht für jede Detail-Logik — für **happy path + Login + Bezahlung**.
 
 ---
 
-# Best Practices
+<!-- _class: lead -->
 
-- **AAA**: Arrange · Act · Assert
-- Tests sind **Dokumentation** – beschreibend benennen
-- Ein Verhalten pro Test
-- Keine Logik im Test (keine `if`/`for`)
-- **Test Doubles**: stub, mock, spy, fake
-- CI: Tests bei jedem Push
+# Coverage + CI
 
 ---
 
-# Live Coding
+# Coverage-Report
 
-Repo: `node-cache-api`
-
-```bash
-git clone https://github.com/nextlevelshit/node-cache-api
-cd node-cache-api
-npm install
-npm test          # unit + integration
-npm run test:e2e  # e2e
+```sh
+npx vitest --coverage
 ```
 
+```
+File         | % Stmts | % Branch | % Funcs | Uncovered
+-------------+---------+----------+---------+-----------
+utils.js     |     100 |      100 |     100 |
+api.js       |    75.3 |       60 |      80 | 42-48
+auth.js      |    91.2 |       85 |     100 | 15
+```
+
+**100 % ≠ keine Bugs.** Aber 0 % = sicher Bugs.
+
+---
+
+# Coverage-Ziel realistisch
+
+| Code-Typ | Realistisch |
+|----------|-------------|
+| Pure Funktionen | 100 % |
+| Business-Logik | 80-90 % |
+| API-Routes | 70-80 % |
+| UI-Komponenten | 60-70 % |
+| Drittpartei-Wrapper | 0 % |
+| Konfig-Files | 0 % |
+
+**Faustregel:** über 80 % Gesamt = gut. Unter 50 % = gefährlich.
+
+---
+
+# CI: Tests auf jedem Push
+
+```yaml
+# .github/workflows/test.yml
+name: Test
+
+on: [push, pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+      - run: npm ci
+      - run: npm test
+      - run: npm run test:e2e
+```
+
+Tests sind grün → PR mergebar. Sonst: rot, mergen verboten.
+
+---
+
+<!-- _class: aufgabe -->
+
+# Selbstlernen — Tests schreiben
+
+Erweitert eure API:
+
+1. **3+ Unit-Tests** für eure Helper-Funktionen (`utils.test.js`)
+2. **3+ Integration-Tests** für eure REST-Endpunkte (mit Supertest)
+3. **In-Memory-DB** in `beforeAll`/`afterEach`
+4. **1 E2E-Test** mit Playwright (z.B. Login-Flow)
+5. **Coverage-Report** generieren
+
+**Bonus:** GitHub-Actions-Workflow für CI.
+
+---
+
+# Zusammenfassung
+
+**Heute gelernt:**
+- **Test-Pyramide:** viele Unit, einige Integration, wenige E2E
+- **Vitest** als modernes Test-Runner-Setup
+- **AAA-Pattern** + Matchers + Lifecycle-Hooks
+- **TDD-Cycle** Red → Green → Refactor
+- **Supertest** für API-Integration-Tests
+- **Playwright** für E2E mit rollenbasierten Locators
+- **Coverage** als Werkzeug, nicht als Ziel
+- **CI** mit GitHub-Actions
+
+**Nächste Stunde:** TypeScript — Typen über JavaScript.
diff --git a/slides/dhbw/06_typescript.md b/slides/dhbw/06_typescript.md
index 303cab9..b32ee22 100644
--- a/slides/dhbw/06_typescript.md
+++ b/slides/dhbw/06_typescript.md
@@ -9,423 +9,352 @@ title: TypeScript
 ---
 
 <style>
-:root {
-  --color-foreground: #1a1a2e;
-  --color-highlight: #d63384;
-  --color-dimmed: #4a4a6a;
-}
-section.invert {
-  --color-foreground: #fff;
-}
-section {
-  font-size: 1.4rem;
-}
-h1 {
-  color: #a02060;
-}
-section.invert h1 {
-  color: #fff;
-}
-h2 {
-  color: #1f2937;
-}
-section.invert h2 {
-  color: #f48fb1;
-}
-pre {
-  background: #0f0f23;
-  color: #f48fb1;
-  border-radius: 8px;
-  border-left: 3px solid #d63384;
-}
-pre code {
-  background: transparent;
-  color: inherit;
-}
-code {
-  background: #1a1a2e;
-  color: #f48fb1;
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-a {
-  color: var(--color-highlight);
-}
+:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; }
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.4rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
+pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
+pre code { background: transparent; color: inherit; }
+code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
+a { color: var(--color-highlight); }
 </style>
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# Web Engineering
-
-**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
-**Sommersemester 2026** · Sitzung 8 — TypeScript
+# Kapitel 6 — TypeScript
+## Typen über JavaScript
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
+# Was ist TypeScript?
 
-# TypeScript
+**Microsoft, 2012.** Aufsatz auf JavaScript mit **statischer Typprüfung.**
 
-## JavaScript on Steroids
+- Schreibst TypeScript (`.ts`)
+- Compiler (`tsc`) prüft Typen + erzeugt JavaScript (`.js`)
+- Browser/Node führt das JS aus
+
+**Heute:** Standard für mittlere + große JS-Projekte. ~95 % der React-Repos.
 
 ---
 
-# Inhalt
+# Warum TypeScript?
 
-1. TypeScript: was und warum
-2. `tsc` + `ts-node`
-3. `tsconfig.json`
-4. Type Primitives
-5. Union Types, Type Alias, Interface
-6. Enum, Generics, Type Casting
-7. Compilation: types stripped
-8. Decorators + reflect-metadata
+| Vorteil | Was bedeutet das |
+|---------|------------------|
+| **Fehler vor Laufzeit** | Compiler fängt typos, falsche Aufrufe |
+| **Bessere IDE** | Autocompletion, Refactoring, Jump-to-Definition |
+| **Selbst-Doku** | Typ-Signaturen sind ausführbare Doku |
+| **Refactoring sicher** | Compiler findet alle Auswirkungen |
+
+**Nachteil:** Build-Step + Lernkurve.
 
 ---
 
-# TypeScript – Was?
+# Setup
 
-- **Superset von JavaScript** (Microsoft, 2012)
-- Jede `.js` lässt sich zu `.ts` umbenennen
-- **Type Errors zur Compile-/Transpile-Zeit**
-- Neuere ECMAScript-Features verfügbar
-- **Im Browser:** läuft nicht direkt – wird zu JS kompiliert
-
----
-
-# Setup: tsc + ts-node
-
-```bash
-npm i -D typescript ts-node @types/node
-npx tsc --init             # erzeugt tsconfig.json
+```sh
+npm install -D typescript @types/node tsx
+npx tsc --init                  # tsconfig.json erzeugen
 ```
 
-**Run:**
-```bash
-npx ts-node index.ts       # statt: node index.js
-```
+`tsx` = TypeScript direkt ausführen ohne Compile-Step (Dev).
 
-**Build:**
-```bash
-npx tsc                    # kompiliert nach ./dist
-node dist/index.js
+```json
+// package.json
+{
+  "scripts": {
+    "dev": "tsx --watch src/server.ts",
+    "build": "tsc",
+    "start": "node dist/server.js"
+  }
+}
 ```
 
 ---
 
-# tsconfig.json
+# tsconfig.json — Wichtigste
 
 ```json
 {
   "compilerOptions": {
-    "target": "es2022",
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "outDir": "./dist",
-    "rootDir": "./src",
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
     "strict": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  }
 }
 ```
 
+**`strict: true`** = alle strengen Checks an. **Pflicht** für neue Projekte.
+
 ---
 
-# Type Primitives
+# Basis-Typen
 
 ```typescript
-let loading: boolean = false;
-let count: number = 42;
-let pi: number = 3.14;
-let name: string = "DHBW ist fetzig!";
-let empty: null = null;
-let missing: undefined = undefined;
+let name: string = "Ada";
+let age: number = 56;
+let admin: boolean = true;
+let nothing: null = null;
+let unset: undefined = undefined;
 
-function log(msg: string): void {
-  console.log(msg);
+let hobbies: string[] = ["math", "chess"];
+let tuple: [string, number] = ["Ada", 56];
+
+let anyValue: any = "vermeiden";        // KEIN typ-check
+let unknownValue: unknown = await fetch(); // sicherer als any
+```
+
+`any` deaktiviert TS-Schutz — vermeiden.
+
+---
+
+# Object-Typen + Interfaces
+
+```typescript
+// inline
+function greet(user: { name: string; age?: number }) {
+  return `Hallo ${user.name}`;
 }
-```
 
-`any`, `unknown`, `never`, `void` sind weitere TS-Spezialtypen.
-
----
-
-# Union Types
-
-```typescript
-let id: number | string;
-
-id = 101;       // ok
-id = "101";     // ok
-id = true;      // TypeError (nicht erlaubt)
-```
-
----
-
-# Type Alias
-
-```typescript
-type NumOrString = number | string;
-
-let id: NumOrString;
-id = 101;
-id = "abc";
-
-type UserId = string;
-type Status = "active" | "inactive" | "pending";
-```
-
----
-
-# Interface
-
-```typescript
+// Interface
 interface User {
+  name: string;
+  age?: number;            // optional
+  readonly id: number;     // schreibgeschützt
+}
+
+const ada: User = { id: 1, name: "Ada", age: 56 };
+
+// Type-Alias (Interface mit anderem Namen, mehr Flexibilität)
+type Status = "pending" | "active" | "deleted";
+```
+
+---
+
+# Function-Typen
+
+```typescript
+// Argument + Return
+function add(a: number, b: number): number {
+  return a + b;
+}
+
+// Arrow + ausgeschrieben
+const multiply: (a: number, b: number) => number = (a, b) => a * b;
+
+// async-Funktionen geben Promise zurück
+async function fetchUser(id: number): Promise<User> {
+  const res = await fetch(`/users/${id}`);
+  return res.json();
+}
+```
+
+---
+
+# Union + Intersection
+
+```typescript
+// Union — "ODER"
+type Id = string | number;
+function lookup(id: string | number) { /* ... */ }
+
+// Discriminated Union
+type Shape =
+  | { kind: "circle"; radius: number }
+  | { kind: "square"; size: number };
+
+function area(s: Shape) {
+  if (s.kind === "circle") return Math.PI * s.radius ** 2;
+  return s.size ** 2;       // TS weiß: hier ist's square
+}
+
+// Intersection — "UND"
+type Admin = User & { permissions: string[] };
+```
+
+---
+
+# Generics — typ-flexible Funktionen
+
+```typescript
+// T ist ein Platzhalter
+function first<T>(arr: T[]): T | undefined {
+  return arr[0];
+}
+
+first([1, 2, 3]);      // T = number
+first(["a", "b"]);     // T = string
+
+// Generic-Constraints
+function longest<T extends { length: number }>(a: T, b: T): T {
+  return a.length >= b.length ? a : b;
+}
+
+longest("hello", "hi");     // OK
+longest([1, 2], [3, 4, 5]); // OK
+longest(5, 10);             // FEHLER: number hat kein length
+```
+
+---
+
+# Built-in Generic-Typen
+
+```typescript
+// Array<T> = T[]
+const nums: Array<number> = [1, 2, 3];
+
+// Promise<T>
+async function getUser(): Promise<User> { /* ... */ }
+
+// Partial<T> — alle Properties optional
+type UserUpdate = Partial<User>;
+
+// Required<T> — alle Pflicht
+// Pick<T, K> — nur ausgewählte
+// Omit<T, K> — ohne ausgewählte
+type PublicUser = Omit<User, "password">;
+
+// Record<K, V> — Dictionary
+const config: Record<string, string> = { host: "...", port: "8080" };
+```
+
+---
+
+# Typ-Inference
+
+TS errät den Typ oft selbst — **nicht überall annotieren.**
+
+```typescript
+let name = "Ada";              // automatisch: string
+const numbers = [1, 2, 3];     // automatisch: number[]
+
+function double(n: number) {   // Return-Typ inferiert: number
+  return n * 2;
+}
+
+// Wann annotieren?
+// - Funktion-Args (immer)
+// - Public-API Return-Typen (Pflicht für Library)
+// - wenn Inference falsch oder unklar
+```
+
+---
+
+# Typen für REST-API
+
+```typescript
+// Schema einmal definieren
+interface CreateUserBody {
+  name: string;
+  email: string;
+}
+
+interface UserResponse {
   id: number;
   name: string;
-  email?: string;          // optional
-  readonly createdAt: Date; // schreibgeschützt
-  greet(msg: string): void;
+  email: string;
+  createdAt: string;
 }
 
-const u: User = {
-  id: 1,
-  name: "Lisa",
-  createdAt: new Date(),
-  greet(msg) { console.log(msg); }
-};
+// Express-Route typisiert
+import type { Request, Response } from 'express';
+
+app.post('/users', (req: Request<{}, {}, CreateUserBody>, res: Response<UserResponse>) => {
+  const { name, email } = req.body;  // typsicher
+  // ...
+});
 ```
 
 ---
 
-# Interface vs Type
+# Zod — Runtime-Validation
 
-**Interface**
-- nur Objektformen
-- kann mehrfach deklariert (Merging)
-- bei perf-kritischen Checks oft schneller
-
-**Type Alias**
-- alles: Primitive, Union, Tuple, Function-Signaturen
-- nicht erweiterbar nach Definition
-
-→ Faustregel: **Interfaces für API-Shapes, Types für alles andere.**
-
----
-
-# Enum
+TypeScript prüft zur Compile-Time. **Was kommt aus dem Netz?**
 
 ```typescript
-enum Direction {
-  Up = 1,
-  Down,    // 2
-  Left,    // 3
-  Right    // 4
-}
+import { z } from 'zod';
 
-function walk(d: Direction): string {
-  switch (d) {
-    case Direction.Up:    return "bow";
-    case Direction.Down:  return "stern";
-    case Direction.Left:  return "windward";
-    case Direction.Right: return "leeward";
-  }
-}
+const UserSchema = z.object({
+  name: z.string().min(2),
+  email: z.string().email(),
+  age: z.number().int().positive().optional(),
+});
 
-walk(Direction.Up); // "bow"
+type User = z.infer<typeof UserSchema>;  // Typ aus Schema
+
+app.post('/users', (req, res) => {
+  const result = UserSchema.safeParse(req.body);
+  if (!result.success) return res.status(400).json(result.error);
+  
+  const user = result.data;  // typsicher + validated
+});
 ```
 
 ---
 
-# Generics
+# `any` vs `unknown` vs `never`
 
 ```typescript
-class GenericContainer<T> {
-  private readonly value: T;
+let a: any = "test";
+a.toFixed();         // OK — TS prüft NICHTS
 
-  constructor(value: T) {
-    this.value = value;
-  }
+let u: unknown = "test";
+u.toFixed();         // FEHLER — erst type-narrow
+if (typeof u === 'number') u.toFixed();  // OK
 
-  getValue(): T {
-    return this.value;
-  }
-}
-
-const numbers = new GenericContainer<number>(10);
-const strings = new GenericContainer<string>("Hello");
-
-console.log(numbers.getValue()); // 10
-console.log(strings.getValue()); // "Hello"
-```
-
----
-
-# Type Casting
-
-```typescript
-let someValue: any = "this is a string";
-
-let len: number = (someValue as string).length;
-console.log(len); // 16
-
-// Alt-Syntax (nicht in TSX):
-let len2: number = (<string>someValue).length;
-```
-
-`as unknown as T` für "double cast" – nur Notbehelf!
-
----
-
-# Compilation: Types werden gestripped
-
-**TypeScript:**
-```typescript
-type Result = "pass" | "fail";
-
-function verify(result: Result) {
-  if (result === "pass") console.log("Passed");
-  else console.log("Failed");
+function fail(msg: string): never {
+  throw new Error(msg);  // kommt nie zurück
 }
 ```
 
-**JavaScript (nach `tsc`):**
-```javascript
-function verify(result) {
-  if (result === "pass") console.log("Passed");
-  else console.log("Failed");
-}
-```
-
-**Types existieren nur zur Compile-Zeit.** Kein Runtime-Check.
+**`unknown` statt `any`** — sicherer Default für fremde Daten.
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
+# Best Practices
 
-# Decorators
-
-## Meta-Programmierung mit TypeScript
+- **`strict: true`** in tsconfig — keine Diskussion
+- **Argument-Typen** annotieren, Return-Typen nur public-API
+- **Interfaces** für Objekt-Strukturen, **Type-Aliases** für Unions
+- **`unknown`** statt `any`
+- **Zod / Valibot** für Runtime-Validation
+- **Typen nicht doppelt:** ein Schema, davon Typ ableiten (`z.infer`)
+- **CI-Step:** `tsc --noEmit` muss grün sein
 
 ---
 
-# TypeScript: Decorators
+<!-- _class: aufgabe -->
 
-Vier Typen:
+# Selbstlernen — eure API zu TS migrieren
 
-- **Class Decorators** – auf ganze Klasse
-- **Property Decorators** – auf Felder
-- **Method Decorators** – auf Methoden
-- **Parameter Decorators** – auf Methoden-Parameter
+1. **TypeScript installieren:** `npm install -D typescript @types/node @types/express tsx`
+2. **tsconfig.json** mit `strict: true`
+3. **`.js` → `.ts`** umbenennen, fehlende Typen ergänzen
+4. **Zod-Schema** für POST-Bodies
+5. **CI-Step:** `tsc --noEmit` in Tests
 
-Genutzt von: Angular, NestJS, TypeORM, class-validator.
+**Bonus:** Drizzle-ORM verwenden (TypeScript-first).
 
 ---
 
-# Decorators aktivieren
+# Zusammenfassung
 
-**`tsconfig.json`:**
-```json
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
-  }
-}
-```
-
-**Root-File:**
-```typescript
-import "reflect-metadata";
-```
-
----
-
-# Decorator-Signaturen
-
-```typescript
-type ClassDecorator = <T extends Function>(target: T) => T | void;
-
-type PropertyDecorator = (
-  target: Object,
-  propertyKey: string | symbol
-) => void;
-
-type MethodDecorator = <T>(
-  target: Object,
-  propertyKey: string | symbol,
-  descriptor: TypedPropertyDescriptor<T>
-) => TypedPropertyDescriptor<T> | void;
-
-type ParameterDecorator = (
-  target: Object,
-  propertyKey: string | symbol | undefined,
-  parameterIndex: number
-) => void;
-```
-
----
-
-# Decorator – Beispiel
-
-```typescript
-function Log(target: any, key: string, desc: PropertyDescriptor) {
-  const original = desc.value;
-  desc.value = function (...args: any[]) {
-    console.log(`→ ${key}(${JSON.stringify(args)})`);
-    return original.apply(this, args);
-  };
-}
-
-class Calculator {
-  @Log
-  add(a: number, b: number) {
-    return a + b;
-  }
-}
-
-new Calculator().add(2, 3); // logs: → add([2,3])
-```
-
----
-
-# Reflect: Meta-Daten lesen
-
-```typescript
-import "reflect-metadata";
-
-Reflect.defineMetadata("role", "admin", target);
-Reflect.hasMetadata("role", target);    // true
-Reflect.getMetadata("role", target);    // "admin"
-```
-
-Frameworks (NestJS, TypeORM) nutzen das, um zur **Runtime** Type-Informationen zu rekonstruieren – z. B. für DI, ORM-Mapping, Validierung.
-
----
-
-# Anwendung: NestJS-Beispiel
-
-```typescript
-@Controller("users")
-export class UsersController {
-  constructor(private users: UsersService) {}
-
-  @Get(":id")
-  findOne(@Param("id") id: string) {
-    return this.users.find(+id);
-  }
-}
-```
-
-`@Controller`, `@Get`, `@Param` sind Decorators – Metadaten ⇒ Routing.
+**Heute gelernt:**
+- TS als statischer Typ-Aufsatz auf JS
+- **`strict: true`** als Baseline
+- Basis-Typen, Interfaces, Type-Aliases
+- **Union** + **Generics** als zentrale Konzepte
+- Built-in Generics (Partial, Omit, Record)
+- **Typ-Inference** nutzen — nicht über-annotieren
+- **Zod** für Runtime-Validation
+- `unknown` statt `any`
 
+**Nächste Stunde:** Docker — Container für reproducible Setups.
diff --git a/slides/dhbw/07_docker.md b/slides/dhbw/07_docker.md
index 168d0b1..cf0cc47 100644
--- a/slides/dhbw/07_docker.md
+++ b/slides/dhbw/07_docker.md
@@ -9,339 +9,375 @@ title: Docker und Service Orchestration
 ---
 
 <style>
-:root {
-  --color-foreground: #1a1a2e;
-  --color-highlight: #d63384;
-  --color-dimmed: #4a4a6a;
-}
-section.invert {
-  --color-foreground: #fff;
-}
-section {
-  font-size: 1.4rem;
-}
-h1 {
-  color: #a02060;
-}
-section.invert h1 {
-  color: #fff;
-}
-h2 {
-  color: #1f2937;
-}
-section.invert h2 {
-  color: #f48fb1;
-}
-pre {
-  background: #0f0f23;
-  color: #f48fb1;
-  border-radius: 8px;
-  border-left: 3px solid #d63384;
-}
-pre code {
-  background: transparent;
-  color: inherit;
-}
-code {
-  background: #1a1a2e;
-  color: #f48fb1;
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-a {
-  color: var(--color-highlight);
-}
+:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; }
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.4rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
+pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
+pre code { background: transparent; color: inherit; }
+code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
+a { color: var(--color-highlight); }
 </style>
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# Web Engineering
-
-**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
-**Sommersemester 2026** · Sitzung 9 — Docker, Proxies and DBs
+# Kapitel 7 — Docker
+## Container für reproducible Setups
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
+# „Auf meinem Rechner läuft's"
 
-# Docker
+Das klassische Software-Problem:
 
-## Service Orchestration
+- Entwickler: Node 22 + Postgres 16 lokal
+- Server: Node 18 + Postgres 14
+- → bricht beim Deploy
+
+**Lösung:** App + Abhängigkeiten als **Container** verpacken.
 
 ---
 
-# Inhalt
+# Container vs. VM
 
-1. Architektur: Reverse Proxy + API + DB
-2. Container vs VM
-3. `Dockerfile`
-4. `compose.yml`
-5. Docker CLI / Compose Befehle
-6. Live Demo: `dhbw-docker`
+| | Container | Virtual Machine |
+|--|-----------|-----------------|
+| Startzeit | ms | min |
+| Größe | MB | GB |
+| Kernel | shared (Host-Linux) | eigener |
+| Isolation | Prozess-Level | Hardware-Level |
+| Overhead | minimal | hoch |
+
+Container = leichtgewichtige Prozess-Isolation.
 
 ---
 
-# Architektur
+# Docker — die Idee
 
-```
-            Browser (localhost:10007)
-                    │
-                    ▼
-         ┌──────────────────┐
-         │  Reverse Proxy   │  (nginx / traefik)
-         └─────────┬────────┘
-              ┌────┴────┐
-              ▼         ▼
-        ┌─────────┐  ┌────────┐
-        │  Web    │  │  API   │
-        │  App    │  │ (Node) │
-        └────┬────┘  └────┬───┘
-             └─────┬──────┘
-                   ▼
-              ┌────────┐
-              │   DB   │ (Postgres)
-              └────────┘
+- **Image** = Schnappschuss (App + Files + OS-Layer)
+- **Container** = laufende Instanz eines Images
+- **Dockerfile** = Anleitung zum Image-Bauen
+- **Registry** = Image-Speicher (Docker Hub, GHCR)
+
+```sh
+docker pull node:24
+docker run node:24 node --version
 ```
 
 ---
 
-# Container vs VM
-
-| | VM | Container |
-|---|----|-----------|
-| Kernel | eigener | Host-Kernel |
-| Boot | Minuten | Sekunden |
-| Größe | GB | MB |
-| Isolation | stark | namespaces, cgroups |
-| Image | komplett | Layer (diff) |
-
-→ **Docker** = Container-Engine + Image-Format + Registry.
-
----
-
-# Dockerfile – Express API
+# Dockerfile — Hallo Welt
 
 ```dockerfile
-FROM node:lts-slim AS builder
+FROM node:24-alpine
 
 WORKDIR /app
 
-COPY ./package*.json ./
-RUN npm ci --no-audit --no-fund --no-progress --loglevel=error
+COPY package*.json ./
+RUN npm ci
 
-COPY ./ ./
+COPY . .
 
-ENV NODE_ENV="production"
-
-EXPOSE 8080
-
-CMD ["npm", "start"]
+EXPOSE 3000
+CMD ["node", "src/server.js"]
 ```
 
-**`npm ci`** statt `npm i` für reproduzierbare Builds.
+```sh
+docker build -t mein-app .
+docker run -p 3000:3000 mein-app
+```
+
+---
+
+# Dockerfile-Schichten verstehen
+
+Jedes `RUN`/`COPY`/`ADD` = neue Schicht.
+
+```dockerfile
+# Schlecht — npm install nach JEDER Code-Änderung
+COPY . .
+RUN npm ci
+
+# Gut — package.json zuerst, npm install gecached
+COPY package*.json ./
+RUN npm ci
+COPY . .
+```
+
+**Build-Cache** spart Minuten.
 
 ---
 
 # Multi-Stage Build
 
 ```dockerfile
-FROM node:lts-slim AS builder
+# Stage 1: Build mit allem
+FROM node:24-alpine AS builder
 WORKDIR /app
-COPY package*.json ./
-RUN npm ci
 COPY . .
-RUN npm run build
+RUN npm ci && npm run build
 
-FROM node:lts-slim AS runtime
+# Stage 2: nur Runtime
+FROM node:24-alpine
 WORKDIR /app
 COPY --from=builder /app/dist ./dist
 COPY --from=builder /app/node_modules ./node_modules
 COPY package*.json ./
-EXPOSE 8080
-CMD ["node", "dist/index.js"]
+EXPOSE 3000
+CMD ["node", "dist/server.js"]
 ```
 
-→ kleines Final-Image, keine Build-Tools im Runtime.
+Finales Image: kleiner, sicherer (kein Build-Tools drin).
+
+---
+
+# Image-Größen reduzieren
+
+| Base | Größe |
+|------|------:|
+| `node:24` | ~1.1 GB |
+| `node:24-slim` | ~280 MB |
+| `node:24-alpine` | **~180 MB** |
+| Distroless | ~150 MB |
+
+**`alpine`** = Alpine Linux, sehr klein. **Distroless** = nur Runtime, kein Shell.
 
 ---
 
 # .dockerignore
 
+Verhindert dass Müll ins Image kommt:
+
 ```
 node_modules
-dist
 .git
 .env
 *.log
-coverage
+build/
+dist/
+.DS_Store
+README.md
+.github/
 ```
 
-Spart Build-Kontext und verhindert Geheimnis-Leaks.
+Schneller Build, kleineres Image, weniger Secrets im Image.
 
 ---
 
-# compose.yml – Services
+<!-- _class: lead -->
+
+# docker compose
+
+---
+
+# Multi-Container — die Realität
+
+Eine App braucht oft:
+- App-Server
+- Datenbank
+- Cache (Redis)
+- Reverse Proxy
+
+**docker compose** orchestriert das.
+
+---
+
+# compose.yml — Beispiel
 
 ```yaml
-name: dhbw-docker-app
-
 services:
-  api:
-    build: ./api
-    container_name: dhbw-api
-    environment:
-      DATABASE_USERNAME: ${DATABASE_USERNAME}
-      DATABASE_PASSWORD: ${DATABASE_PASSWORD}
-      DATABASE_NAME: ${DATABASE_NAME}
-      DATABASE_HOST: db
-      DATABASE_PORT: 5432
+  app:
+    build: .
     ports:
-      - "10000:8080"
-    networks: [net, data]
+      - "3000:3000"
+    environment:
+      DATABASE_URL: postgres://user:pass@db:5432/app
     depends_on:
-      db:
-        condition: service_healthy
-```
+      - db
 
----
-
-# compose.yml – Datenbank + Proxy
-
-```yaml
   db:
     image: postgres:16-alpine
     environment:
-      POSTGRES_USER: ${DATABASE_USERNAME}
-      POSTGRES_PASSWORD: ${DATABASE_PASSWORD}
-      POSTGRES_DB: ${DATABASE_NAME}
+      POSTGRES_USER: user
+      POSTGRES_PASSWORD: pass
+      POSTGRES_DB: app
     volumes:
-      - dbdata:/var/lib/postgresql/data
-    networks: [data]
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U $$DATABASE_USERNAME"]
-      interval: 5s
-      retries: 5
-
-  proxy:
-    image: nginx:alpine
-    ports: ["10007:80"]
-    volumes: ["./nginx.conf:/etc/nginx/nginx.conf:ro"]
-    networks: [net]
-    depends_on: [api]
+      - db-data:/var/lib/postgresql/data
 
 volumes:
-  dbdata:
-
-networks:
-  net:
-  data:
+  db-data:
 ```
 
 ---
 
-# Docker Compose – Befehle
+# compose-Commands
 
-```bash
-docker compose -p "dhbw-docker-app" \
-  -f compose.yml \
-  --env-file .env \
-  up \
-  --build \
-  --remove-orphans \
-  --force-recreate
-```
+```sh
+docker compose up              # alles starten (Foreground)
+docker compose up -d           # detached (background)
+docker compose down            # alles stoppen + entfernen
+docker compose down -v         # ... und Volumes löschen
 
-| Flag | Bedeutung |
-|------|-----------|
-| `-p` | Projektname |
-| `-f` | mehrere Compose-Files möglich |
-| `--env-file` | `.env` einlesen |
-| `--build` | Images neu bauen |
-| `--remove-orphans` | verwaiste Container weg |
-| `--force-recreate` | Container neu starten |
-
----
-
-# Compose – Alltag
-
-```bash
-docker compose up -d              # detached starten
-docker compose ps                 # Status
-docker compose logs -f api        # Logs streamen
-docker compose exec api sh        # Shell im Container
-docker compose down -v            # Stop + Volumes löschen
-docker compose restart api        # Neustart einzelner Service
+docker compose logs -f app     # Logs streamen
+docker compose exec app sh     # Shell im laufenden Container
+docker compose ps              # Status sehen
 ```
 
 ---
 
-# Health Checks
+# Networking in compose
+
+Standard: alle Services im selben `default`-Netzwerk.
 
 ```yaml
-api:
-  healthcheck:
-    test: ["CMD", "curl", "-f", "http://localhost:8080/health"]
-    interval: 10s
-    timeout: 3s
-    retries: 3
-    start_period: 5s
+services:
+  app:
+    environment:
+      # `db` ist der Service-Name → DNS-Hostname
+      DATABASE_URL: postgres://...@db:5432/app
 ```
 
-`depends_on: { condition: service_healthy }` wartet, bis Health passt.
+**Service-Namen werden zu Hostnamen.** Kein localhost zwischen Containern.
 
 ---
 
-# Networks: Segmentierung
-
-- **`net`** – öffentlich erreichbar (Proxy — App)
-- **`data`** – nur intern (App — DB)
-- DB ist **nicht** vom Internet erreichbar
-- Service-DNS: `api`, `db`, `proxy` (Container-Name = Hostname)
-
-→ Defense in Depth.
-
----
-
-# Volumes – Daten persistent
+# Volumes — Daten überleben
 
 ```yaml
 volumes:
-  dbdata:               # benannt
-  - ./code:/app         # bind mount (dev)
-  - /app/node_modules   # anonymous (überschreibt bind)
+  db-data:           # named volume (managed by Docker)
+
+services:
+  db:
+    volumes:
+      - db-data:/var/lib/postgresql/data    # named
+      - ./backups:/backups                  # bind mount
 ```
 
-`docker compose down` ohne `-v` lässt Volumes leben.
+**Named Volumes** für DB-Daten. **Bind Mounts** für lokale Config.
 
 ---
 
-# Live Demo
+# Environment + Secrets
 
-Repo: https://github.com/nextlevelshit/dhbw-docker
-
-```bash
-git clone https://github.com/nextlevelshit/dhbw-docker
-cd dhbw-docker
-cp .env.example .env
-docker compose up --build
+```yaml
+services:
+  app:
+    env_file: .env              # ganze .env-Datei laden
+    environment:
+      NODE_ENV: production       # einzeln setzen
+      DATABASE_URL: ${DATABASE_URL}  # vom Host
 ```
 
-→ http://localhost:10007
+**Secrets nicht ins compose.yml.** Lieber `.env` (gitignored) oder Docker Secrets.
 
 ---
 
-# 100 Concepts of Docker (Exkurs)
+<!-- _class: lead -->
 
-- Image · Container · Volume · Network
-- Dockerfile · Layer Cache · BuildKit
-- Compose · Stack · Swarm · Kubernetes
-- Registry · Tag · Digest
-- Dev/Prod-Parity (12-Factor)
-- Secrets · Configs
-- Logging Drivers
-- Health Checks · Restart Policies
+# CI/CD
 
+---
+
+# Docker in GitHub Actions
+
+```yaml
+name: Build + Push
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: docker/setup-buildx-action@v3
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+      - uses: docker/build-push-action@v5
+        with:
+          push: true
+          tags: user/app:latest
+```
+
+---
+
+# Container-Registry
+
+| Registry | Stärke |
+|----------|--------|
+| **Docker Hub** | Standard, kostenlos für Public |
+| **GHCR** (GitHub) | mit Repo verbunden |
+| **GitLab Registry** | mit Repo verbunden |
+| **AWS ECR** | für AWS-Hosting |
+
+```sh
+# Tag + Push
+docker tag mein-app ghcr.io/user/mein-app:v1.0.0
+docker push ghcr.io/user/mein-app:v1.0.0
+```
+
+---
+
+# Health-Checks
+
+```dockerfile
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s \
+  CMD wget --no-verbose --tries=1 --spider http://localhost:3000/health || exit 1
+```
+
+```javascript
+// In Express
+app.get('/health', (req, res) => res.json({ ok: true }));
+```
+
+Orchestrators (k8s, ECS, Coolify) entscheiden via HealthCheck, ob neu starten.
+
+---
+
+# Best Practices
+
+- **`alpine`** oder **distroless** als Base
+- **Multi-stage builds** für kleinere Images
+- **`.dockerignore`** anlegen
+- **Non-root user** im Container (`USER node`)
+- **`COPY` nach `RUN npm ci`** für Cache-Hit
+- **Tags statt `latest`** für Reproducibility
+- **Health-Checks** für Orchestration
+- **Secrets via env, niemals im Image**
+
+---
+
+<!-- _class: aufgabe -->
+
+# Selbstlernen — App dockerizen
+
+1. **Dockerfile** für eure Node-API (multi-stage)
+2. **.dockerignore** mit node_modules, .env, .git
+3. **compose.yml** mit App + Postgres
+4. **`docker compose up`** lokal starten
+5. **Health-Check** auf `/health`-Endpoint
+
+**Bonus:** GitHub-Actions-Workflow, der Image bei jedem Push baut.
+
+---
+
+# Zusammenfassung
+
+**Heute gelernt:**
+- Container vs. VM — Prozess-Isolation, leicht + schnell
+- **Dockerfile** mit `FROM`, `COPY`, `RUN`, `CMD`
+- **Multi-stage Builds** für kleine Production-Images
+- **alpine** + Distroless als Base
+- **docker compose** für Multi-Container-Setups
+- **Volumes** für persistente Daten
+- **Service-Namen als Hostnamen** im compose-Netzwerk
+- **CI/CD** mit GitHub Actions + Registry
+
+**Nächste Stunde:** Best Practices — Git, README, SOLID, 12-Factor.
diff --git a/slides/dhbw/08_best_practices.md b/slides/dhbw/08_best_practices.md
index 64934c4..ca64cad 100644
--- a/slides/dhbw/08_best_practices.md
+++ b/slides/dhbw/08_best_practices.md
@@ -9,353 +9,477 @@ title: Best Practices
 ---
 
 <style>
-:root {
-  --color-foreground: #1a1a2e;
-  --color-highlight: #d63384;
-  --color-dimmed: #4a4a6a;
-}
-section.invert {
-  --color-foreground: #fff;
-}
-section {
-  font-size: 1.4rem;
-}
-h1 {
-  color: #a02060;
-}
-section.invert h1 {
-  color: #fff;
-}
-h2 {
-  color: #1f2937;
-}
-section.invert h2 {
-  color: #f48fb1;
-}
-pre {
-  background: #0f0f23;
-  color: #f48fb1;
-  border-radius: 8px;
-  border-left: 3px solid #d63384;
-}
-pre code {
-  background: transparent;
-  color: inherit;
-}
-code {
-  background: #1a1a2e;
-  color: #f48fb1;
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-a {
-  color: var(--color-highlight);
-}
+:root { --color-foreground: #1a1a2e; --color-highlight: #d63384; }
+section.invert { --color-foreground: #fff; }
+section { font-size: 1.4rem; }
+h1 { color: #a02060; }
+section.invert h1 { color: #fff; }
+h2 { color: #1f2937; }
+pre { background: #0f0f23; color: #f48fb1; border-radius: 8px; border-left: 3px solid #d63384; }
+pre code { background: transparent; color: inherit; }
+code { background: #1a1a2e; color: #f48fb1; padding: 0.15em 0.4em; border-radius: 4px; }
+a { color: var(--color-highlight); }
 </style>
 
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# Web Engineering
-
-**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
-**Sommersemester 2026** · Sitzung 10 — Wrap-up & Projektsupport
+# Kapitel 8 — Best Practices
+## Git · README · SOLID · 12-Factor · SemVer
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
+<!-- _class: lead -->
 
-# Best Practices
-
-## Wrap-up & Projektsupport
+# Git-Hygiene
 
 ---
 
-# Inhalt
-
-1. Semantic Versioning
-2. Git Commit Messages (Udacity Style)
-3. 12 Factor App
-4. Make it Work · Make it Right · Make it Fast
-5. Präsentations-Tipps
-6. Feedback (Sandwich-Methode)
-7. Prüfungsleistung Recap
-
----
-
-# Semantic Versioning (SemVer 2.0.0)
-
-```
-MAJOR.MINOR.PATCH
-  │     │     └─ Bugfix, abwärtskompatibel
-  │     └────── Neue Funktion, abwärtskompatibel
-  └──────────── Breaking Change
-```
-
-**Beispiele:**
-- `1.4.2` → `1.4.3` Bugfix
-- `1.4.3` → `1.5.0` neues Feature
-- `1.5.0` → `2.0.0` Breaking Change
-
-Pre-Release: `1.0.0-alpha.1`, `1.0.0-rc.2`
-
-→ https://semver.org/
-
----
-
-# package.json: Versionsranges
-
-```json
-{
-  "dependencies": {
-    "express": "^4.19.2",   // ≥4.19.2 < 5.0.0  (gleiche MAJOR)
-    "lodash":  "~4.17.21",  // ≥4.17.21 < 4.18.0 (gleiche MINOR)
-    "react":   "19.0.0"     // exakt
-  }
-}
-```
-
-`package-lock.json` pinnt die **tatsächlich installierten** Versionen.
-
----
-
-# Git Commit Messages – Udacity Style
-
-```
-<type>: <Subject>
-<blank>
-<Body>
-<blank>
-<Footer>
-```
-
-**Type:** `feat`, `fix`, `docs`, `style`, `refactor`, `test`, `chore`
-
-**Subject:** Imperativ, ≤50 Zeichen, klein, kein Punkt
-**Body:** **Was** und **Warum** – nicht **Wie**
-**Footer:** Issue-Refs, Breaking Changes
-
----
-
-# Commit-Beispiele
-
-**Gut:**
-```
-feat: add user logout endpoint
-
-Allows authenticated clients to invalidate their session token
-on the server side instead of only deleting the cookie.
-
-Closes #142
-```
+# Sinnvolle Commits
 
 **Schlecht:**
 ```
-fixed stuff
-WIP
-update
+fix
+wip
 asdf
+final
+final2
+final-final
 ```
 
-→ https://udacity.github.io/git-styleguide/
+**Gut:**
+```
+fix(auth): handle expired JWT correctly
+feat(api): add /users/:id/posts endpoint
+docs(readme): update Docker setup instructions
+test(utils): cover edge cases in greet()
+```
+
+**Eine Commit-Message = Was + Warum, nicht Wie.**
 
 ---
 
 # Conventional Commits
 
 ```
-feat(auth): add OAuth2 login
-fix(api): return 404 instead of 500 on missing user
-docs: update README install steps
-chore(deps): bump express from 4.18 to 4.19
-BREAKING CHANGE: drop Node 16 support
+<type>(<scope>): <subject>
+
+[optional body]
+
+[optional footer]
 ```
 
-Vorteile: automatische Changelogs, automatische Version-Bumps (`semantic-release`).
+**Types:**
+- `feat:` neue Funktion
+- `fix:` Bugfix
+- `docs:` Doku
+- `refactor:` Code-Restrukturierung
+- `test:` Tests
+- `chore:` Build/Tools
+- `perf:` Performance
+- `style:` Formatierung
+
+Automatisches Changelog + SemVer-Bump möglich.
 
 ---
 
-# 12 Factor App
+# .gitignore — was nie rein gehört
 
-Methodik für moderne, skalierbare SaaS-Apps – https://12factor.net/
+```
+# Dependencies
+node_modules/
+.pnpm-store/
 
-| # | Faktor |
-|---|--------|
-| 1 | Codebase – ein Repo, viele Deploys |
-| 2 | Dependencies – explizit deklariert (`package.json`) |
-| 3 | Config – via Environment-Variablen |
-| 4 | Backing Services – als Attached Resources |
-| 5 | Build, Release, Run – getrennt |
-| 6 | Processes – stateless |
+# Build outputs
+dist/
+build/
+.next/
+.cache/
+
+# Secrets
+.env
+.env.local
+*.pem
+*.key
+
+# Editor + OS
+.vscode/
+.idea/
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+```
+
+Vorlagen: github.com/github/gitignore
 
 ---
 
-# 12 Factor (2/2)
+# Branches + PRs
 
-| # | Faktor |
-|---|--------|
-| 7  | Port Binding – self-contained, exportiert HTTP |
-| 8  | Concurrency – horizontal skalieren via Prozesse |
-| 9  | Disposability – schneller Start, Graceful Shutdown |
-| 10 | Dev/Prod Parity – möglichst gleiche Umgebung |
-| 11 | Logs – als Event-Streams (`stdout`) |
-| 12 | Admin Processes – als One-Off |
+```sh
+# Neuer Feature-Branch
+git checkout -b feat/user-profile
+
+# Arbeit, Commits
+git add .
+git commit -m "feat(profile): add avatar upload"
+
+# Push + PR
+git push -u origin feat/user-profile
+# → PR via GitHub/Gitea-UI
+
+# Nach Merge: aufräumen
+git checkout main
+git pull
+git branch -d feat/user-profile
+```
+
+**Faustregel:** kurzlebige Branches (Tage, nicht Monate).
 
 ---
 
-# Config via ENV
+<!-- _class: lead -->
+
+# README
+
+---
+
+# README — das Visitenkarten-Dokument
+
+Wenn jemand euer Projekt im Browser sieht: **die README ist die erste und oft einzige Berührung.**
+
+Schlechte README = Repo nicht verwendet.
+
+**Eine gute README beantwortet:**
+1. Was tut das Projekt?
+2. Wie installiere ich es?
+3. Wie starte ich es?
+4. Wie teste ich es?
+5. Wie deploye ich es?
+6. Lizenz?
+
+---
+
+# README-Template
+
+```markdown
+# Mein Projekt
+
+> Eine Zeile Beschreibung.
+
+## Features
+
+- ✓ etwas
+- ✓ etwas anderes
+
+## Setup
+
+```sh
+git clone https://...
+cd projekt
+cp .env.example .env
+npm install
+npm run dev
+```
+
+## Tests
+
+```sh
+npm test
+npm run test:e2e
+```
+
+## Stack
+
+Node 24, Express, SQLite, Vitest.
+
+## License
+
+MIT
+```
+
+---
+
+<!-- _class: lead -->
+
+# SOLID — OO-Prinzipien
+
+---
+
+# SOLID — die fünf
+
+| | Prinzip | Bedeutung |
+|--|---------|-----------|
+| **S** | Single Responsibility | jede Klasse/Modul = eine Verantwortung |
+| **O** | Open / Closed | offen für Erweiterung, geschlossen für Änderung |
+| **L** | Liskov Substitution | Subtyp ersetzbar durch Basistyp |
+| **I** | Interface Segregation | kleine, fokussierte Interfaces |
+| **D** | Dependency Inversion | abhängig von Abstraktionen |
+
+Robert C. Martin („Uncle Bob"), 2000er.
+
+---
+
+# S — Single Responsibility
 
 ```javascript
-// schlecht
-const db = "postgres://user:secret@prod-db:5432/app";
+// Schlecht — alles in einer Klasse
+class UserManager {
+  validate() { /* ... */ }
+  saveToDb() { /* ... */ }
+  sendEmail() { /* ... */ }
+  generateReport() { /* ... */ }
+}
 
-// gut
-const db = process.env.DATABASE_URL;
+// Besser — getrennte Verantwortlichkeiten
+class UserValidator { /* ... */ }
+class UserRepository { /* ... */ }
+class EmailService { /* ... */ }
+class ReportGenerator { /* ... */ }
 ```
 
-```bash
-# .env (NICHT committen!)
-DATABASE_URL=postgres://user:secret@db:5432/app
-NODE_ENV=production
-PORT=8080
+---
+
+# D — Dependency Inversion
+
+```javascript
+// Schlecht — direkt von konkreter Klasse
+class OrderService {
+  charge(order) {
+    const stripe = new StripeClient();
+    stripe.charge(order.amount);
+  }
+}
+
+// Besser — Abhängigkeit injizieren
+class OrderService {
+  constructor(paymentProvider) {
+    this.payment = paymentProvider;
+  }
+  charge(order) {
+    this.payment.charge(order.amount);
+  }
+}
+
+new OrderService(new StripeClient());   // im Production
+new OrderService(new MockClient());     // im Test
 ```
 
-`.env.example` mit Dummy-Werten committen.
+---
+
+<!-- _class: lead -->
+
+# 12-Factor App
 
 ---
 
-# Make It Work · Right · Fast
+# 12-Factor — die wichtigsten
 
-```
-1. Make It Work    → MVP, hässlich aber funktional
-2. Make It Right   → Refactor, Tests, Clean Code
-3. Make It Fast    → Profiling, Optimierung
+| # | Faktor | Was |
+|---|--------|-----|
+| 1 | Codebase | ein Repo pro App, mehrere Deploys |
+| 2 | Dependencies | explizit deklariert (package.json) |
+| 3 | **Config** | über Environment Variables, nicht im Code |
+| 4 | Backing Services | als Resources behandeln (z.B. DB-URL) |
+| 6 | **Processes** | stateless |
+| 9 | Disposability | schnell startbar + stoppbar |
+| 12 | Admin Processes | als One-Off im selben Stack |
+
+Heroku, 2011. Heute Industrie-Standard für Cloud-Apps.
+
+---
+
+# Factor 3 — Config in env
+
+```javascript
+// SCHLECHT — Hardcoded
+const db = new Pool({ host: 'localhost', user: 'dev' });
+
+// GUT — aus env
+const db = new Pool({
+  connectionString: process.env.DATABASE_URL,
+});
 ```
 
-Don't optimize what doesn't work.
-Don't refactor what isn't working yet.
-
-→ https://wiki.c2.com/?MakeItWorkMakeItRightMakeItFast
+`.env` lokal, **Environment-Variablen** auf Server. Gleicher Code überall.
 
 ---
 
-# KISS · DRY · YAGNI · SOLID
+# Factor 6 — Stateless Processes
 
-- **KISS** – Keep It Simple, Stupid
-- **DRY** – Don't Repeat Yourself
-- **YAGNI** – You Aren't Gonna Need It
-- **SOLID**:
-  - **S**ingle Responsibility
-  - **O**pen/Closed
-  - **L**iskov Substitution
-  - **I**nterface Segregation
-  - **D**ependency Inversion
+**Schlecht:** Session-State im RAM.
+```javascript
+const sessions = new Map();  // pro Server-Instanz!
+```
+→ Load-Balancer mit 2 Servern: User-Session geht verloren beim 2. Request.
 
-→ Faustregeln, keine Dogmen.
+**Gut:** State in DB / Redis.
+```javascript
+await redis.set(`session:${id}`, JSON.stringify(data));
+```
+
+Server-Restart → kein Datenverlust. Horizontale Skalierung möglich.
 
 ---
 
-# Präsentation – Aufbau
+<!-- _class: lead -->
 
-- **Einstieg** mit aktuellem Bezug (optional)
-- **Problemdefinition**: welches Bedürfnis / welches Problem?
-- Was hat **blockiert**, wie gelöst?
-- **Geschichte mit Spannungsbogen**
-- Vorher klären: Fragen während oder nach der Präsentation?
+# SemVer — semantisches Versioning
 
 ---
 
-# Präsentation – Pitfalls
+# SemVer — Format
 
-- Am Thema vorbeireden
-- Folien vorlesen
-- Live-Demo ohne Backup-Video
-- "Sieht man hier nicht so gut, aber..."
-- Zu viel Text pro Folie
-- Keine klare Botschaft pro Slide
+```
+MAJOR.MINOR.PATCH
+   1   .  4  .  3
+```
 
-→ **1 Folie = 1 Aussage.**
+| Teil | Bump bei |
+|------|----------|
+| **MAJOR** | breaking change (API-incompatible) |
+| **MINOR** | neues Feature (rückwärts-kompatibel) |
+| **PATCH** | Bugfix (rückwärts-kompatibel) |
+
+**Pre-Release:** `1.0.0-beta.1`, `1.0.0-rc.2`.
 
 ---
 
-# Feedback – Sandwich-Methode
+# SemVer in package.json
 
-1. **Eröffnung** — Lob / positive Beobachtungen
-2. **Kern** — Kritik + konkreter Verbesserungsvorschlag
-3. **Abschluss** — Lob / wertschätzender Ausklang
+```json
+{
+  "dependencies": {
+    "express": "^5.0.0",     // ≥ 5.0.0, < 6.0.0
+    "lodash": "~4.17.0",     // ≥ 4.17.0, < 4.18.0
+    "react": "5.2.1",        // exakt
+    "vite": "*"              // jede (vermeiden)
+  }
+}
+```
 
-**Pitfalls:**
-- Am Thema vorbeireden
-- Bei Unklarheiten keine Fragen stellen
-- Subjektives Feedback ("Farbe gefällt mir nicht")
-
-→ **Konkret, sachlich, umsetzbar.**
+**Faustregel:** `^` (Caret) ist Default — major-version-lock.
 
 ---
 
-# Prüfungsleistung – Recap
+<!-- _class: lead -->
 
-**Grundanforderungen (75 Punkte):**
-
-| Punkte | Kriterium |
-|--------|-----------|
-| 20 | Idee, Konzeption, Planung |
-|  5 | Plattformunabhängigkeit |
-| 25 | Clean Code (KISS, SOLID, DI, Testing, Error Handling) |
-| 15 | Präsentation |
-| 10 | Dokumentation (README, etc.) |
-
-**Zusatzpunkte (max. 10):** TypeScript, Docker, Dev/Prod-Parity, `.env`, npm-Publish, Domain, HTTPS, Responsive Design.
-
-→ https://librete.ch/DHBW/pruefungsleistung
+# Code-Reviews
 
 ---
 
-# Abgabe + Termine
+# Constructive Code-Reviews
 
-- **Code-Upload:** bis 27.07.
-- **Präsentation:** 17.07. (in Gruppen, ~10 Min)
-  - Pitch (~1 Min)
-  - Agenda
-  - Idee / Problem
-  - Learnings & Pitfalls
-  - "It is what it is" – Doku
+**Geben:**
+- Konkret: Zeilennummern + Beispiel
+- Wertschätzend: gut gemachte Stellen erwähnen
+- Fragend statt fordernd: „Wäre `X` hier robuster?"
+- Klar zwischen MUST/SHOULD/CONSIDER unterscheiden
+
+**Nehmen:**
+- Egoless: Code ≠ Person
+- Frage zurück bei Unklarheit
+- Bedanken für detaillierte Feedback
 
 ---
 
-# 70 Things I Regret as a Developer (Auswahl)
+# Code-Review-Checkliste
 
-- Nicht früher Tests geschrieben zu haben
-- Zu viel Zeit mit "perfektem" Setup statt Code
-- Nicht öfter `git commit`
-- Nicht früher in Pull Requests reviewt
-- Keine Doku gepflegt
-- Eigene Lösungen für Standard-Probleme
-- Frameworks gehyped, Grundlagen vernachlässigt
-- "Funktioniert bei mir" akzeptiert
-
-→ Lehre: **Disziplin > Talent.**
+| Bereich | Was prüfen |
+|---------|------------|
+| **Correctness** | macht's, was es soll? Edge-cases? |
+| **Readability** | Namen, Struktur, Kommentare? |
+| **Tests** | abgedeckt? Sinnvolle Assertions? |
+| **Security** | Input-Validation, Secrets, Auth |
+| **Performance** | N+1, Sync-IO, Memory-Leak |
+| **A11y** (Frontend) | Semantik, Kontrast, Keyboard |
+| **Doku** | README aktualisiert? CHANGELOG? |
 
 ---
 
-# Weiterlesen
+<!-- _class: lead -->
 
-- https://12factor.net/
-- https://semver.org/
-- https://udacity.github.io/git-styleguide/
-- https://www.conventionalcommits.org/
-- https://refactoring.guru/
-- https://martinfowler.com/
-- MDN Web Docs · web.dev · web.dev/learn
+# Doku lesen lernen
 
 ---
 
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
+# Wo finde ich was?
 
-# Viel Erfolg mit den Projekten!
+| Ziel | Quelle |
+|------|--------|
+| Web-APIs (HTML, CSS, JS) | **MDN** — developer.mozilla.org |
+| Node-APIs | **nodejs.org/docs** |
+| npm-Package | `npmjs.com/package/<name>` + GitHub README |
+| Sprach-Standards (ES) | **tc39.es** |
+| Browser-Kompatibilität | **caniuse.com** |
+| Fehler-Suche | Stack Overflow + GitHub Issues |
 
-Fragen? Probleme? → Telegram, Mail, Sprechstunde.
+**Faustregel:** offizielle Doku zuerst, dann Stack Overflow.
+
+---
+
+# Stack Overflow gut nutzen
+
+**Bevor du fragst:**
+- Existiert die Frage schon? (Suche oben)
+- Gibt es ein Minimal-Reproduction-Beispiel?
+- Welche Versionen (Node, OS, Library)?
+- Was hast du schon versucht?
+
+**Bei der Frage:**
+- Konkreter Titel (nicht "JavaScript Hilfe")
+- Code-Block für Code
+- Was war erwartet, was passiert
+- Error-Message als Text (nicht Screenshot)
+
+---
+
+# AI-Assistenten (ChatGPT, Claude, Copilot)
+
+**Pro:**
+- Schneller Antworten zu allgemeinen Fragen
+- Boilerplate-Code in Sekunden
+- Erklärung fremden Codes
+
+**Contra:**
+- Halluziniert APIs, die nicht existieren
+- Verstärkt Anti-Patterns aus dem Training
+- Lernkurve geht zurück, wenn nur kopiert wird
+
+**Faustregel:** als Sparring-Partner, nicht als Wahrheitsquelle. **Verstehen, nicht kopieren.**
+
+---
+
+<!-- _class: aufgabe -->
+
+# Selbstlernen — Projekt-Hygiene-Check
+
+Geht euer Projekt durch:
+
+1. **README:** hat alle 6 Sektionen?
+2. **.gitignore:** komplett, keine Secrets im Repo?
+3. **Conventional Commits:** letzte 10 Commits durchgehen
+4. **package.json:** `version`, `description`, `scripts`?
+5. **Tests:** Coverage > 70 %?
+6. **Dockerfile + compose.yml:** funktionieren?
+7. **Environment:** `.env.example` vorhanden, `.env` gitignored?
+
+**Bonus:** GitHub-Actions-Workflow für Tests + Build.
+
+---
+
+# Abschluss
+
+**Über 8 Termine gelernt:**
+1. Web Engineering — Foundation
+2. CSS Extended — Layout + Animation
+3. Node.js Basics — Runtime + REST
+4. Node.js Advanced — async + DB + Auth
+5. Testing — Unit + Integration + E2E
+6. TypeScript — Typen + Schemas
+7. Docker — Container + compose
+8. Best Practices — Git + README + SOLID + 12-Factor
+
+**Nächste Schritte:** eigenes Projekt für die Prüfungsleistung. Code-Abgabe + Präsentation.