223015b klausurfragen: auf sie umgestellt + emojis raus, fragen-set kuratiert (j/l/m/n/o aktiviert bzw. ausgegraut), l1 auf vorwiegend verlustbehaftet präzisiert, bandbreite-fragen ergänzt, stand 24.06

- 18 demos aus refactor/didaktik-rewrite-2026 cherry-picked (aliasing-paar, byte-fuer-byte, container-vs-codec, drei-dateien, jpeg-pipeline, kap02-05-eroeffner, kb-vs-kib, nyquist-diagram, pivot-signal-zu-byte, psychoakustik/psychovisualitaet-grafik, raster-vs-vektor, summary-kap02, summary-organizer, usb-c-drei-achsen)
- barn-rgb.png + barn-cmyk.png neu generiert (analog zu ybcbr.webp, kanaltrennung mit korrekter k-extraktion)
- lv-original-vs-fake.jpg + 02-bild-audio-video.md slides wired up

Makefile

@@ -22,8 +22,8 @@ DEPLOY_HOST = tengo@tuttle.uberspace.de
 223015c_DEPLOY  = /home/tengo/html/hdm/223015c
 223015c_KLAUSUR = 1
 
-dhbw_NAME    = Technik I – Grundlagen IT
-dhbw_KAPITEL = 01_web_eng 02_css_extended 03_nodejs_basics 04_nodejs_advanced 05_testing 06_typescript 07_docker 08_best_practices
+dhbw_NAME    = Web Engineering
+dhbw_KAPITEL = 01-intro 02-html-css 03-js-frameworks 04-nodejs-basics 05-express 06-testing 07-typescript 08-docker 09-best-practices
 dhbw_DEPLOY  = /home/tengo/html/dhbw
 dhbw_KLAUSUR =
 

scripts/generate-index.sh

@@ -13,6 +13,15 @@ case "$COURSE" in
     SLIDES_URL="https://librete.ch/hdm/223015b"
     ACCENT_COLOR="#1e5f8a"
     ACCENT_LIGHT="#e8f4fc"
+    INSTITUTION="HdM Stuttgart"
+    HEADLINE="HdM Vorlesungen"
+    KAPITEL_TERM="Kapitel"
+    BREADCRUMB_URL="../"
+    EXAM_URL=""
+    EXAM_LABEL=""
+    KONTAKT_URL="mailto:mail@librete.ch"
+    KONTAKT_LABEL="Kontakt"
+    QR_IMG="qr-index.svg"
     ;;
   223015c)
     TITLE="Grundlagen IT- und Internettechnik"
@@ -20,16 +29,72 @@ case "$COURSE" in
     SLIDES_URL="https://librete.ch/hdm/223015c"
     ACCENT_COLOR="#d63384"
     ACCENT_LIGHT="#fce4ec"
+    INSTITUTION="HdM Stuttgart"
+    HEADLINE="HdM Vorlesungen"
+    KAPITEL_TERM="Kapitel"
+    BREADCRUMB_URL="../"
+    EXAM_URL=""
+    EXAM_LABEL=""
+    KONTAKT_URL="mailto:mail@librete.ch"
+    KONTAKT_LABEL="Kontakt"
+    QR_IMG="qr-index.svg"
+    ;;
+  dhbw)
+    TITLE="Web Engineering"
+    SUBTITLE="Informatik / Wirtschaftsinformatik"
+    SLIDES_URL="https://librete.ch/dhbw"
+    ACCENT_COLOR="#a02060"
+    ACCENT_LIGHT="#fce4ec"
+    INSTITUTION="DHBW Stuttgart"
+    HEADLINE="DHBW Vorlesungen"
+    KAPITEL_TERM="Sitzung"
+    BREADCRUMB_URL=""
+    EXAM_URL="https://git.librete.ch/DHBW/pruefungsleistung"
+    EXAM_LABEL="Prüfungsleistung"
+    KONTAKT_URL="mailto:michael.czechowski@lehre.dhbw-stuttgart.de"
+    KONTAKT_LABEL="Kontakt"
+    QR_IMG="assets/slides-dhbw.png"
     ;;
   *)
-    TITLE="$COURSE - HdM Slides"
+    TITLE="$COURSE - Slides"
     SUBTITLE="Lecture Slides"
-    SLIDES_URL="https://librete.ch/hdm/$COURSE"
+    SLIDES_URL="https://librete.ch/$COURSE"
     ACCENT_COLOR="#0066cc"
     ACCENT_LIGHT="#e8f4fc"
+    INSTITUTION="Stuttgart"
+    HEADLINE="Vorlesungen"
+    KAPITEL_TERM="Kapitel"
+    BREADCRUMB_URL=""
+    EXAM_URL=""
+    EXAM_LABEL=""
+    KONTAKT_URL="mailto:mail@librete.ch"
+    KONTAKT_LABEL="Kontakt"
+    QR_IMG="qr-index.svg"
     ;;
 esac
 
+# Optional breadcrumb HTML (empty if no parent overview)
+if [[ -n "$BREADCRUMB_URL" ]]; then
+  BREADCRUMB_HTML="<p class=\"breadcrumb\"><a href=\"$BREADCRUMB_URL\">← Kursübersicht</a></p>"
+else
+  BREADCRUMB_HTML=""
+fi
+
+# Optional exam-link HTML
+if [[ -n "$EXAM_URL" ]]; then
+  EXAM_HTML="<p class=\"exam-link\"><a href=\"$EXAM_URL\">$EXAM_LABEL →</a></p>"
+else
+  EXAM_HTML=""
+fi
+
+# Footer kursübersicht link only when breadcrumb parent exists
+if [[ -n "$BREADCRUMB_URL" ]]; then
+  FOOTER_KURS_HTML=" ·
+    <a href=\"$BREADCRUMB_URL\">Kursübersicht</a>"
+else
+  FOOTER_KURS_HTML=""
+fi
+
 # Topic mappings for nice German titles
 declare -A TOPIC_MAP
 TOPIC_MAP["intro"]="Einführung"
@@ -41,6 +106,14 @@ TOPIC_MAP["vertiefung-offene-fragen"]="Vertiefung & Offene Fragen"
 TOPIC_MAP["geschichte-grundlagen-html"]="Geschichte, Grundlagen & HTML"
 TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS"
 TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript"
+TOPIC_MAP["html-css"]="HTML & CSS"
+TOPIC_MAP["js-frameworks"]="JS, Frameworks & Build Tools"
+TOPIC_MAP["nodejs-basics"]="Node.js: Scripting, Running & Building"
+TOPIC_MAP["express"]="Express API, CRUD & Middlewares"
+TOPIC_MAP["testing"]="Testing"
+TOPIC_MAP["typescript"]="TypeScript"
+TOPIC_MAP["docker"]="Docker, Proxies & DBs"
+TOPIC_MAP["best-practices"]="Wrap-up & Best Practices"
 
 # Configure which topics should appear disabled per course
 # Two modes: fully disabled (non-clickable card) and buttons-disabled (link remains clickable, buttons are disabled)
@@ -48,8 +121,17 @@ declare -A DISABLED_FULL
 declare -A DISABLED_BUTTONS
 # For course B: chapters 3,4,5 should be fully disabled
 DISABLED_FULL["223015b"]="speichermedien-schnittstellen distribution-apis-zukunft vertiefung-offene-fragen"
-# For course C: chapter 3 should keep link clickable but buttons disabled
-DISABLED_BUTTONS["223015c"]="interaktivitaet-javascript"
+# For course C: all chapters fully active
+DISABLED_BUTTONS["223015c"]=""
+
+# Courses where the "Klausurrelevante Folien" card should be active (clickable)
+declare -A KLAUSURFOLIEN_ACTIVE
+KLAUSURFOLIEN_ACTIVE["223015b"]=1
+
+# Courses where the "Klausurfragen" card should be active (clickable)
+declare -A KLAUSURFRAGEN_ACTIVE
+KLAUSURFRAGEN_ACTIVE["223015b"]=1
+KLAUSURFRAGEN_ACTIVE["223015c"]=1
 
 cat > "$BUILD_DIR/index.html" << HEADER
 <!DOCTYPE html>
@@ -101,6 +183,16 @@ cat > "$BUILD_DIR/index.html" << HEADER
       font-size: 0.875rem;
       margin-top: 0.25rem;
     }
+    .exam-link {
+      margin-top: 1rem;
+      font-size: 0.95rem;
+    }
+    .exam-link a {
+      color: $ACCENT_COLOR;
+      text-decoration: none;
+      font-weight: 500;
+    }
+    .exam-link a:hover { text-decoration: underline; }
     /* Use the .termine wrapper and add a gap between cards */
     .termine {
       margin-top: 1.5rem;
@@ -226,11 +318,12 @@ cat > "$BUILD_DIR/index.html" << HEADER
 </head>
 <body>
   <header>
-    <p class="breadcrumb"><a href="../">← Kursübersicht</a></p>
-    <h1>HdM Vorlesungen</h1>
+    $BREADCRUMB_HTML
+    <h1>$HEADLINE</h1>
     <h2 class="course-heading">$TITLE</h2>
     <p class="subtitle">$SUBTITLE</p>
-    <p class="meta">HdM Stuttgart · Sommersemester 2026 · Michael Czechowski</p>
+    <p class="meta">$INSTITUTION · Sommersemester 2026 · Michael Czechowski</p>
+    $EXAM_HTML
   </header>
   <div class="termine">
 HEADER
@@ -253,7 +346,7 @@ for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do
   if [[ "$kapitel_num" == "0" ]] || [[ -z "$kapitel_num" ]]; then
     kapitel_label="Einführung"
   else
-    kapitel_label="Kapitel $kapitel_num"
+    kapitel_label="$KAPITEL_TERM $kapitel_num"
   fi
 
   pdf_filename="${filename%.html}.pdf"
@@ -320,13 +413,29 @@ LINK
 
 done
 
-# Add klausurfolien entry if it exists (disabled — wird noch überarbeitet)
+# Add klausurfolien entry if it exists (active per KLAUSURFOLIEN_ACTIVE, else disabled)
 if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
-  pdf_disabled=""
-  if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
-    pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
-  fi
-  cat >> "$BUILD_DIR/index.html" << KLAUSUR
+  if [[ "${KLAUSURFOLIEN_ACTIVE[$COURSE]}" == "1" ]]; then
+    pdf_active=""
+    if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
+      pdf_active="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
+    fi
+    cat >> "$BUILD_DIR/index.html" << KLAUSUR
+    <div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
+      <a href="klausurfolien.html" class="kapitel-link">
+        <div class="kapitel-label">Prüfung</div>
+        <div class="kapitel-title">Klausurrelevante Folien</div>
+      </a>
+      <a href="klausurfolien.html" class="btn btn-slides">Folien</a>
+      $pdf_active
+    </div>
+KLAUSUR
+  else
+    pdf_disabled=""
+    if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
+      pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
+    fi
+    cat >> "$BUILD_DIR/index.html" << KLAUSUROFF
     <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
       <div class="kapitel-link">
         <div class="kapitel-label">Prüfung</div>
@@ -335,20 +444,41 @@ if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
       <span class="btn btn-slides btn-disabled">Folien</span>
       $pdf_disabled
     </div>
-KLAUSUR
+KLAUSUROFF
+  fi
 fi
 
-# Add klausurfragen entry if it exists (disabled — wird noch überarbeitet)
+# Add klausurfragen entry if it exists (active per KLAUSURFRAGEN_ACTIVE, else disabled)
 if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
-  pdf_disabled=""
-  if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
-    pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
-  fi
-  slides_disabled=""
-  if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
-    slides_disabled="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
-  fi
-  cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
+  if [[ "${KLAUSURFRAGEN_ACTIVE[$COURSE]}" == "1" ]]; then
+    pdf_active=""
+    if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
+      pdf_active="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
+    fi
+    slides_active=""
+    if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
+      slides_active="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
+    fi
+    cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
+    <div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
+      <a href="klausurfragen.html" class="kapitel-link">
+        <div class="kapitel-label">Prüfung</div>
+        <div class="kapitel-title">Klausurfragen</div>
+      </a>
+      $slides_active
+      $pdf_active
+    </div>
+KLAUSURFRAGEN
+  else
+    pdf_disabled=""
+    if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
+      pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
+    fi
+    slides_disabled=""
+    if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
+      slides_disabled="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
+    fi
+    cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGENOFF
     <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
       <div class="kapitel-link">
         <div class="kapitel-label">Prüfung</div>
@@ -357,18 +487,18 @@ if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.p
       $slides_disabled
       $pdf_disabled
     </div>
-KLAUSURFRAGEN
+KLAUSURFRAGENOFF
+  fi
 fi
 
 cat >> "$BUILD_DIR/index.html" << FOOTER
   </div>
   <div class="qr-section">
-    <img src="qr-index.svg" alt="QR Code" class="qr-code">
+    <img src="$QR_IMG" alt="QR Code" class="qr-code">
     <p class="qr-url">$SLIDES_URL</p>
   </div>
   <footer>
-    <a href="mailto:mail@librete.ch">Kontakt</a> ·
-    <a href="../">Kursübersicht</a>
+    <a href="$KONTAKT_URL">$KONTAKT_LABEL</a>$FOOTER_KURS_HTML
   </footer>
 </body>
 </html>

slides/223015b/01-grundlagen-text-audio.md

@@ -9,6 +9,7 @@ title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
 <style>
+
 :root {
   --color-foreground: #1a1a2e;
   --color-highlight: #1e5f8a;
@@ -1191,33 +1192,6 @@ Sog. RGB Tuple (geordnete endliche Liste)
 
 ---
 
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/byte-nibble-hex.png)
-
-<!--
-Kernidee: jedes Byte lässt sich sauber in zwei 4-Bit-Hälften (Nibbles) zerlegen. Jede Hälfte hat 2⁴ = 16 Zustände – und genau 16 Symbole hat Hex (0-F). Deshalb passt Hex perfekt: 1 Nibble = 1 Hex-Ziffer, 1 Byte = 2 Hex-Ziffern. Keine krumme Umrechnung.
--->
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/why-8-bit.png)
-
-<!--
-Warum gerade 8 Bit?
-- CPU adressiert byteweise — kleinste adressierbare Einheit
-- Halbe Byte (z.B. 0x0000.5) existieren nicht
-- Speichercontroller, Bus, CPU-Register alle auf 8-Bit-Häppchen ausgelegt
-- Einzelne Bit lesen: erst Byte holen, dann mit Bitmaske isolieren (byte & 0b1000_0000)
-- Hardware-Geschichte: IBM System/360 (1964) setzte 8-Bit-Standard, 7-Bit-ASCII + 1 Paritätsbit
--->
-
----
-
 <!-- _class: lead -->
 
 # Hexadezimal
@@ -1249,50 +1223,6 @@ Warum gerade 8 Bit?
 
 ---
 
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/hex-dec-table.png)
-
-<!--
-Hex ↔ Dezimal Lookup-Tabelle: 0–F = 0–15
-A=10, B=11, C=12, D=13, E=14, F=15
--->
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/byte-flow.png)
-
-<!--
-1 Byte = 8 Bit = 2 Hex-Ziffern = 1 ASCII-Zeichen
-- Dieselbe Datei, drei Schreibweisen
-- Jeder Rahmen = ein Byte
-- Byte ändern sich nicht, nur unsere Anzeige
-- ↵ (0x0A) = nicht druckbar → Hex-Editoren zeigen . als Platzhalter
--->
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/demos/three-views.png)
-
-<!--
-Dieselben 8 Byte (PNG-Dateianfang: 89 50 4E 47 0D 0A 1A 0A) — drei Perspektiven:
-1. Bitstream — was wirklich gespeichert wird (unleserlich)
-2. Hex — gruppiert in 8-Bit-Häppchen (kompakt)
-3. Bedeutung — was die Byte signalisieren:
-   - 89: Magic Byte (>127 → "ich bin Binärdatei")
-   - 50 4E 47: P N G (ASCII-Format-Kürzel)
-   - 0D 0A 1A 0A: CR LF EOF LF (erkennt kaputte Übertragung)
--->
-
----
-
 # Wo begegnet Ihnen Hex-Code?
 
 | Kontext | Beispiel |
@@ -2143,4 +2073,4 @@ Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
 - hex5: ZIP (50 4B 03 04)
 - Gruppenarbeit: 3-4 Personen
 - Ziel: Hex-Dump lesen lernen, Dateiformate verstehen
--->
+-->

slides/223015b/02-bild-audio-video.md

@@ -220,7 +220,7 @@ Jeder Pixel speichert einen RGB-Farbwert (3 Bytes).
 **Aufbau:** Liste von Pixeln mit Farbwerten (2D-Array)
 
 **Speicherbedarf (unkomprimiert):**
-Breite × Höhe × Farbtiefe (in Bytes)
+Breite × Höhe × Farbtiefe (in Byte)
 
 **Beispiele:** JPEG, PNG, WebP
 
@@ -361,6 +361,15 @@ Vektorgrafiken speichern keine Pixel, sondern mathematische Beschreibungen: Koor
 - Frage: "Warum verschickt euch der Grafiker das Logo als .ai oder .svg?"
 -->
 
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/raster-vs-vektor.png)
+
+
 ---
 
 <!-- _class: lead -->
@@ -374,6 +383,14 @@ Vektorgrafiken speichern keine Pixel, sondern mathematische Beschreibungen: Koor
 - Wir nutzen seine Schwächen aus
 -->
 
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/lv-original-vs-fake.jpg)
+
 ---
 
 <!-- _class: klausur -->
@@ -498,6 +515,16 @@ Das Auge ist ein Tiefpassfilter: Hohe Frequenzen (feine Details) werden schwäch
 - Interaktive Demo: https://claude.ai/public/artifacts/452e62f1-8525-442d-aa88-bf3795cab2c5
 -->
 
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/jpeg-pipeline.png)
+
+
+
 ---
 
 <!-- _class: klausur -->
@@ -507,7 +534,7 @@ Das Auge ist ein Tiefpassfilter: Hohe Frequenzen (feine Details) werden schwäch
 
 ![bg right:20%](./assets/Barn-yuv.png)
 
-# JPEG Schritt 1: Farbraumkonversion
+# JPEG Schritt 1: Farbraumkonvertierung
 
 **RGB → Y'CbCr**
 
@@ -530,11 +557,33 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/ybcbr.webp)
+
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/Barn-rgb.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/Barn-cmyk.png)
+
+---
+
 <!-- _class: erklaerung -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Farbraumkonversion – Vertiefung
+# Farbraumkonvertierung – Vertiefung
 
 RGB→YCbCr nutzt die Biologie des menschlichen Auges: 120 Mio. Stäbchen (Helligkeit) vs. nur 6 Mio. Zapfen (Farbe) – ein 20:1-Verhältnis. Die Transformation erfolgt über eine lineare Matrix:
 
@@ -546,7 +595,7 @@ Cr =  0.500·R − 0.419·G − 0.081·B + 128
 
 Die Gewichtung (G dominiert mit 59%) entspricht der spektralen Empfindlichkeit des Auges bei Tageslicht. Y enthält alle Schärfeinformation; Cb/Cr können reduziert werden.
 
-**Chroma Subsampling – Notation J:a:b** (bezogen auf 4×2 Pixel):
+**Chroma Subsampling – Notation `J:a:b`** (bezogen auf 4×2 Pixel):
 
 | Schema | Farbdaten | Einsatz |
 |--------|-----------|---------|
@@ -713,11 +762,6 @@ KLAUSURRELEVANT:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-<!-- _backgroundColor: #e3f2fd -->
-
 # JPEG Schritt 6: Huffman-Coding
 
 **Verlustfreie Kompression der Restwerte**
@@ -770,37 +814,10 @@ JPEG verwendet zwei Huffman-Tabellen: eine für DC-Koeffizienten (Durchschnittsw
 
 ---
 
-<!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
-<!-- _backgroundColor: #e3f2fd -->
-<!--
-# Huffman-Coding: Beispiel
 
-**Originaltext:** `ABRACADABRA` (11 Zeichen × 8 Bit = 88 Bit)
-
-**Häufigkeitsanalyse:**
-A=5, B=2, R=2, C=1, D=1
-
-**Huffman-Baum → Codes:**
-| Zeichen | Häufigkeit | Code |
-|---------|------------|------|
-| A | 5 | `0` |
-| B | 2 | `10` |
-| R | 2 | `110` |
-| C | 1 | `1110` |
-| D | 1 | `1111` |
-
-**Codiert:** `0 10 110 0 1110 0 1111 0 10 110 0` = **23 Bit**
-**Kompression:** 88 → 23 Bit = **74% gespart**
-
-
-- Beispiel Schritt für Schritt durchrechnen
-- Warum funktioniert's? A kommt 5× vor, bekommt kürzesten Code
-- Präfix-Eigenschaft: Kein Code ist Anfang eines anderen → eindeutig dekodierbar
-- Frage: "Was passiert, wenn alle Zeichen gleich häufig sind?" → Keine Ersparnis
-- In JPEG: Nicht Buchstaben, sondern DCT-Koeffizienten werden so codiert
--->
+![bg](./assets/demos/summary-kap02.png)
 
 ---
 
@@ -824,8 +841,6 @@ A=5, B=2, R=2, C=1, D=1
 # Andere Bildformate
 ## PNG, GIF, WebP, AVIF
 
-15:33 Uhr weiter
-
 <!--
 - JPEG ist nicht für alles geeignet
 - Jetzt: Alternativen und ihre Stärken
@@ -1117,29 +1132,10 @@ KLAUSURRELEVANT:
 
 ---
 
-# Container + Codec = Video
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
-```
-┌─────────────────────────────┐
-│  Container (z.B. MP4)       │
-│  ┌────────────────────────┐ │
-│  │ Video-Stream (H.264)   │ │
-│  ├────────────────────────┤ │
-│  │ Audio-Stream (AAC)     │ │
-│  ├────────────────────────┤ │
-│  │ Untertitel (SRT)       │ │
-│  ├────────────────────────┤ │
-│  │ Metadaten              │ │
-│  └────────────────────────┘ │
-└─────────────────────────────┘
-```
-
-<!--
-- Container = Verpackung
-- Codec = wie der Inhalt komprimiert ist
-- Ein MP4 mit H.264 und ein MP4 mit H.265 haben dieselbe Endung
-- Wichtig für Kompatibilität: Player muss Codec unterstützen
--->
+![bg fit](./assets/demos/container-vs-codec.png)
 
 ---
 

slides/223015b/03-speichermedien-schnittstellen.md

@@ -119,7 +119,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Kapitel 3 – 23.01.2026
+# Kapitel 3
 ## Speichermedien & Schnittstellen
 
 ---
@@ -369,8 +369,7 @@ Seitdem native Linux-Unterstützung.
 **Features:**
 - Journaling (Crash-Sicherheit)
 - Dateirechte (ACLs)
-- Kompression, Verschlüsselung
-- Große Dateien und Volumes
+- Kompression, Verschlüsselung, große Dateien und Volumes
 
 **Nachteile:**
 - Nur Windows schreibt nativ
@@ -629,11 +628,6 @@ Millionen von Websites und Spielen verloren.
 - 30 Jahre Haltbarkeit
 - Für Cold Storage ideal
 
-**M-DISC:**
-- Spezielle DVD/Blu-ray
-- 1.000+ Jahre Haltbarkeit (Herstellerangabe)
-- Für kleine, wichtige Daten
-
 **Cloud:**
 - Glacier, Backblaze B2
 - Günstig für Langzeit

slides/223015b/assets/demos/aliasing-paar.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Aliasing — derselbe Fehler in zwei Sinnen</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --audio: #ea580c;
+    --bild: #2563eb;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 30px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .pair {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .modality {
+    border: 2px solid;
+    border-radius: 12px;
+    padding: 16px 18px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .modality.audio { border-color: var(--audio); }
+  .modality.bild  { border-color: var(--bild); }
+
+  .mod-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .mod-name { font-size: 1.25rem; font-weight: 700; }
+  .modality.audio .mod-name { color: var(--audio); }
+  .modality.bild  .mod-name { color: var(--bild); }
+  .mod-tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
+
+  .canvas {
+    background: var(--soft);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+  .canvas svg { display: block; }
+
+  .scene-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .scene { display: flex; flex-direction: column; gap: 4px; }
+  .scene-label {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted);
+  }
+  .scene-cap {
+    font-size: 0.78rem;
+    color: var(--muted);
+    line-height: 1.4;
+    font-family: ui-monospace, monospace;
+  }
+  .scene-cap strong { color: var(--dark); }
+
+  .ear-eye {
+    font-size: 0.86rem;
+    line-height: 1.5;
+    color: var(--dark);
+  }
+  .ear-eye .arrow { color: var(--hl); font-weight: 700; }
+  .ear-eye-headline {
+    font-size: 0.9rem;
+    font-weight: 700;
+  }
+  .modality.audio .ear-eye-headline { color: var(--audio); }
+  .modality.bild  .ear-eye-headline { color: var(--bild); }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Aliasing — derselbe Fehler in zwei Sinnen</h1>
+  <div class="sub">Was im Ohr <strong>Brummen</strong> macht, macht im Auge <strong>Moiré</strong>. Wurzel: Sampling zu grob.</div>
+
+  <div class="pair">
+
+    <div class="modality audio">
+      <div class="mod-head">
+        <span class="mod-name">Audio</span>
+        <span class="mod-tag">Unterabtastung</span>
+      </div>
+
+      <div class="scene-pair">
+        <div class="scene">
+          <div class="scene-label">Original (18 kHz)</div>
+          <div class="canvas">
+            <svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
+              <line x1="0" y1="40" x2="280" y2="40" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
+              <path d="M0,40 Q7,5 14,40 T28,40 T42,40 T56,40 T70,40 T84,40 T98,40 T112,40 T126,40 T140,40 T154,40 T168,40 T182,40 T196,40 T210,40 T224,40 T238,40 T252,40 T266,40 T280,40"
+                    stroke="#ea580c" stroke-width="2" fill="none"/>
+            </svg>
+          </div>
+          <div class="scene-cap">20 Schwingungen<br>schnelle Welle</div>
+        </div>
+        <div class="scene">
+          <div class="scene-label">Bei 22 kHz gesampelt</div>
+          <div class="canvas">
+            <svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
+              <line x1="0" y1="40" x2="280" y2="40" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
+              <path d="M0,40 Q7,5 14,40 T28,40 T42,40 T56,40 T70,40 T84,40 T98,40 T112,40 T126,40 T140,40 T154,40 T168,40 T182,40 T196,40 T210,40 T224,40 T238,40 T252,40 T266,40 T280,40"
+                    stroke="#fed7aa" stroke-width="1.2" fill="none"/>
+              <path d="M0,40 Q70,10 140,40 T280,40"
+                    stroke="#ea580c" stroke-width="2.5" fill="none"/>
+            </svg>
+          </div>
+          <div class="scene-cap"><strong>2 Schwingungen</strong><br>Brumm-Frequenz</div>
+        </div>
+      </div>
+
+      <div class="ear-eye">
+        <div class="ear-eye-headline">Was das Ohr hört</div>
+        Ein schriller 18-kHz-Ton wird zu einem dumpfen 4-kHz-Brumm. Das hohe ist <strong>nicht leiser</strong> — es ist <strong>verloren und falsch ersetzt</strong>.
+      </div>
+    </div>
+
+    <div class="modality bild">
+      <div class="mod-head">
+        <span class="mod-name">Bild</span>
+        <span class="mod-tag">Moiré-Effekt</span>
+      </div>
+
+      <div class="scene-pair">
+        <div class="scene">
+          <div class="scene-label">Original (feine Streifen)</div>
+          <div class="canvas">
+            <svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
+              <defs>
+                <pattern id="fine-real" x="0" y="0" width="3" height="80" patternUnits="userSpaceOnUse">
+                  <rect x="0" y="0" width="1.5" height="80" fill="#1e3a8a"/>
+                </pattern>
+              </defs>
+              <rect x="0" y="0" width="280" height="80" fill="url(#fine-real)"/>
+            </svg>
+          </div>
+          <div class="scene-cap">93 Linien<br>volle Auflösung</div>
+        </div>
+        <div class="scene">
+          <div class="scene-label">In niedriger DPI gerendert</div>
+          <div class="canvas">
+            <svg viewBox="0 0 280 80" width="100%" height="80" preserveAspectRatio="none">
+              <defs>
+                <linearGradient id="moire-bands" x1="0" y1="0" x2="1" y2="0">
+                  <stop offset="0%"  stop-color="#1e3a8a"/>
+                  <stop offset="10%" stop-color="#bfdbfe"/>
+                  <stop offset="20%" stop-color="#1e3a8a"/>
+                  <stop offset="30%" stop-color="#bfdbfe"/>
+                  <stop offset="40%" stop-color="#1e3a8a"/>
+                  <stop offset="50%" stop-color="#bfdbfe"/>
+                  <stop offset="60%" stop-color="#1e3a8a"/>
+                  <stop offset="70%" stop-color="#bfdbfe"/>
+                  <stop offset="80%" stop-color="#1e3a8a"/>
+                  <stop offset="90%" stop-color="#bfdbfe"/>
+                  <stop offset="100%" stop-color="#1e3a8a"/>
+                </linearGradient>
+              </defs>
+              <rect x="0" y="0" width="280" height="80" fill="url(#moire-bands)"/>
+            </svg>
+          </div>
+          <div class="scene-cap"><strong>5 breite Bänder</strong><br>Moiré-Frequenz</div>
+        </div>
+      </div>
+
+      <div class="ear-eye">
+        <div class="ear-eye-headline">Was das Auge sieht</div>
+        Feine Linien sind weg, dafür <strong>breite Streifen</strong>, die nie da waren. Aus 93 Linien werden 5 Bänder — das Bild lügt.
+      </div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Aliasing kennt keine Modalität. Es ist ein <strong>mathematischer</strong> Fehler — kein technischer.</div>
+    <div class="verdict-a">Egal ob Ton, Bild, Video, Radar, GPS — Sampling muss immer mindestens <strong>doppelt</strong> so dicht sein wie das Signal. Sonst tauscht die Realität Frequenzen aus.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/byte-fuer-byte.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte für Byte — drei Brillen</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --bin-bg: #0f0f23;
+    --bin-fg: #e5e7eb;
+    --binary-mark: #ef4444;
+    --ascii-ok: #16a34a;
+    --ctrl: #9ca3af;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 32px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1rem; }
+  .sub code { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
+
+  .windows { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; max-width: 1180px; margin: 0 auto; }
+
+  .window { border: 2px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
+  .window-header { background: var(--bg-soft); padding: 10px 14px; border-bottom: 2px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
+  .window-title { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
+  .window-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); }
+
+  .window-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
+
+  .window.bin .window-body { background: var(--bin-bg); }
+  .window.bin .row { color: var(--bin-fg); font-size: 1.05rem; letter-spacing: 0.04em; }
+
+  .window.hex .row { color: var(--dark); font-size: 1.4rem; font-weight: 700; letter-spacing: 0.06em; }
+
+  .window.text .row { font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
+  .window.text .glyph.printable { color: var(--ascii-ok); }
+  .window.text .glyph.ctrl { color: var(--ctrl); font-size: 1.1rem; }
+  .window.text .glyph.binary { color: var(--binary-mark); }
+  .window.text .note { font-size: 0.78rem; font-weight: 400; color: var(--muted); margin-left: auto; }
+
+  .footnote { margin-top: 24px; max-width: 1100px; margin-left: auto; margin-right: auto; display: flex; gap: 32px; justify-content: center; font-size: 0.95rem; }
+  .legend { display: flex; align-items: center; gap: 8px; }
+  .swatch { display: inline-block; width: 16px; height: 16px; border-radius: 3px; }
+  .swatch.binary { background: #fee2e2; border: 2px solid var(--binary-mark); }
+  .swatch.ascii { background: #dcfce7; border: 2px solid var(--ascii-ok); }
+  .verdict { margin-top: 14px; text-align: center; font-size: 1.05rem; color: var(--dark); }
+  .verdict strong { color: var(--binary-mark); }
+</style>
+</head>
+<body>
+  <h1>Byte für Byte</h1>
+  <div class="sub">Eine Datei — drei Brillen. Beispiel: erste 8 Byte einer PNG-Datei.</div>
+
+  <div class="windows">
+
+    <div class="window bin">
+      <div class="window-header">
+        <div class="window-title">Fenster 1</div>
+        <div class="window-name">Bin · rohe 0 und 1</div>
+      </div>
+      <div class="window-body">
+        <div class="row">10001001</div>
+        <div class="row">01010000</div>
+        <div class="row">01001110</div>
+        <div class="row">01000111</div>
+        <div class="row">00001101</div>
+        <div class="row">00001010</div>
+        <div class="row">00011010</div>
+        <div class="row">00001010</div>
+      </div>
+    </div>
+
+    <div class="window hex">
+      <div class="window-header">
+        <div class="window-title">Fenster 2</div>
+        <div class="window-name">Hex · 2 Ziffern pro Byte</div>
+      </div>
+      <div class="window-body">
+        <div class="row">89</div>
+        <div class="row">50</div>
+        <div class="row">4E</div>
+        <div class="row">47</div>
+        <div class="row">0D</div>
+        <div class="row">0A</div>
+        <div class="row">1A</div>
+        <div class="row">0A</div>
+      </div>
+    </div>
+
+    <div class="window text">
+      <div class="window-header">
+        <div class="window-title">Fenster 3</div>
+        <div class="window-name">Text · ASCII oder ✗ (> 126)</div>
+      </div>
+      <div class="window-body">
+        <div class="row"><span class="glyph binary">✗</span><span class="note">137 &gt; 126</span></div>
+        <div class="row"><span class="glyph printable">P</span><span class="note">80</span></div>
+        <div class="row"><span class="glyph printable">N</span><span class="note">78</span></div>
+        <div class="row"><span class="glyph printable">G</span><span class="note">71</span></div>
+        <div class="row"><span class="glyph ctrl">CR</span><span class="note">13 · Steuerz.</span></div>
+        <div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
+        <div class="row"><span class="glyph ctrl">SUB</span><span class="note">26 · Steuerz.</span></div>
+        <div class="row"><span class="glyph ctrl">LF</span><span class="note">10 · Steuerz.</span></div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    Mindestens ein Byte mit Wert &gt; 126 → <strong>Binärdatei</strong>. Sonst: reine Textdatei.
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/container-vs-codec.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Container ≠ Codec</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --container: #2563eb;
+    --video: #7c3aed;
+    --audio: #ea580c;
+    --subs: #16a34a;
+    --meta: #94a3b8;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .scene {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .container-box {
+    border: 3px dashed var(--container);
+    border-radius: 14px;
+    padding: 14px 16px 18px;
+    background: #fff;
+    position: relative;
+  }
+  .container-tag {
+    position: absolute;
+    top: -12px;
+    left: 18px;
+    background: #fff;
+    padding: 0 10px;
+    font-family: ui-monospace, monospace;
+    font-size: 0.78rem;
+    font-weight: 700;
+    color: var(--container);
+  }
+  .container-label {
+    text-align: center;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+    margin-bottom: 10px;
+  }
+
+  .track {
+    display: grid;
+    grid-template-columns: 90px 1fr;
+    gap: 12px;
+    align-items: center;
+    background: var(--soft);
+    border-left: 4px solid;
+    border-radius: 6px;
+    padding: 9px 14px;
+    margin-bottom: 6px;
+  }
+  .track.video { border-left-color: var(--video); }
+  .track.audio { border-left-color: var(--audio); }
+  .track.subs  { border-left-color: var(--subs); }
+  .track.meta  { border-left-color: var(--meta); }
+
+  .track-label {
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+  .track.video .track-label { color: var(--video); }
+  .track.audio .track-label { color: var(--audio); }
+  .track.subs  .track-label { color: var(--subs); }
+  .track.meta  .track-label { color: var(--meta); }
+
+  .codec-pill {
+    display: inline-block;
+    font-family: ui-monospace, monospace;
+    font-size: 0.82rem;
+    background: #fff;
+    border: 1px solid var(--border);
+    padding: 2px 9px;
+    border-radius: 4px;
+    color: var(--dark);
+  }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+  .verdict-a code { font-family: ui-monospace, monospace; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
+</style>
+</head>
+<body>
+  <h1>Container ≠ Codec</h1>
+  <div class="sub">Die <strong>Hülle</strong> sagt nichts darüber, <strong>wie</strong> der Inhalt komprimiert wurde.</div>
+
+  <div class="scene">
+
+    <div class="container-box">
+      <span class="container-tag">.mp4</span>
+      <div class="container-label">Datei A — älterer Stand</div>
+
+      <div class="track video">
+        <span class="track-label">Video</span>
+        <span><span class="codec-pill">H.264 / AVC</span> · 1080p · 8 Mbit/s</span>
+      </div>
+      <div class="track audio">
+        <span class="track-label">Audio</span>
+        <span><span class="codec-pill">AAC</span> · 192 kbit/s · Stereo</span>
+      </div>
+      <div class="track subs">
+        <span class="track-label">Untertitel</span>
+        <span><span class="codec-pill">TTML</span> · de + en</span>
+      </div>
+      <div class="track meta">
+        <span class="track-label">Metadaten</span>
+        <span>Titel · Dauer · Datum · Bitrate</span>
+      </div>
+    </div>
+
+    <div class="container-box">
+      <span class="container-tag">.mp4</span>
+      <div class="container-label">Datei B — modern</div>
+
+      <div class="track video">
+        <span class="track-label">Video</span>
+        <span><span class="codec-pill">AV1</span> · 4K · 25 Mbit/s</span>
+      </div>
+      <div class="track audio">
+        <span class="track-label">Audio</span>
+        <span><span class="codec-pill">Opus</span> · 128 kbit/s · 5.1 Surround</span>
+      </div>
+      <div class="track subs">
+        <span class="track-label">Untertitel</span>
+        <span><span class="codec-pill">WebVTT</span> · de + en + ja</span>
+      </div>
+      <div class="track meta">
+        <span class="track-label">Metadaten</span>
+        <span>Titel · Dauer · Datum · HDR-Info</span>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Gleiche Endung. Anderes Innenleben.</div>
+    <div class="verdict-a"><strong>Container</strong> = Verpackung (<code>.mp4</code>, <code>.mkv</code>, <code>.webm</code>). <strong>Codec</strong> = Komprimierer (H.264 / AV1 / AAC / Opus). <strong>Tool:</strong> <code>mediainfo &lt;datei&gt;</code> zeigt beides.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/drei-dateien.html

@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Drei Dateien — dasselbe Innenleben</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --foto: #2563eb;
+    --audio: #ea580c;
+    --pdf: #7c3aed;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 32px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .files {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 22px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .file {
+    border: 2px solid;
+    border-radius: 12px;
+    padding: 16px 18px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .file.foto  { border-color: var(--foto); }
+  .file.audio { border-color: var(--audio); }
+  .file.pdf   { border-color: var(--pdf); }
+
+  .file-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .file-name { font-size: 1.2rem; font-weight: 700; }
+  .file.foto  .file-name { color: var(--foto); }
+  .file.audio .file-name { color: var(--audio); }
+  .file.pdf   .file-name { color: var(--pdf); }
+  .file-ext { font-family: ui-monospace, monospace; font-size: 0.78rem; color: var(--muted); }
+
+  .preview {
+    border-radius: 8px;
+    border: 1px solid var(--border);
+    overflow: hidden;
+    display: block;
+    height: 130px;
+    background: var(--soft);
+  }
+
+  .hex-strip {
+    background: #0f0f23;
+    border-radius: 6px;
+    padding: 8px 10px;
+    font-family: ui-monospace, monospace;
+    font-size: 0.78rem;
+    line-height: 1.6;
+    color: #cbd5e1;
+    overflow: hidden;
+  }
+  .hex-strip .magic { color: #fff; font-weight: 700; padding: 0 2px; border-radius: 2px; }
+  .hex-strip.foto-magic .magic  { background: var(--foto); }
+  .hex-strip.audio-magic .magic { background: var(--audio); }
+  .hex-strip.pdf-magic .magic   { background: var(--pdf); }
+  .hex-label {
+    font-size: 0.68rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted);
+    font-weight: 700;
+    margin-bottom: 2px;
+  }
+  .magic-caption {
+    font-size: 0.78rem;
+    color: var(--muted);
+    text-align: center;
+    font-family: ui-monospace, monospace;
+  }
+  .magic-caption .magic-word {
+    color: var(--dark);
+    font-weight: 700;
+  }
+
+  .verdict {
+    margin-top: 26px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.15rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Drei Dateien — dasselbe Innenleben</h1>
+  <div class="sub">Außen <strong>völlig verschieden</strong>. Innen reden alle dieselbe Sprache: <strong>Byte für Byte</strong>.</div>
+
+  <div class="files">
+
+    <div class="file foto">
+      <div class="file-head">
+        <span class="file-name">Foto</span>
+        <span class="file-ext">.png</span>
+      </div>
+      <svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="xMidYMid slice">
+        <defs>
+          <linearGradient id="sky-f" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#fde68a"/>
+            <stop offset="60%" stop-color="#fb923c"/>
+            <stop offset="100%" stop-color="#7c3aed"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="220" height="130" fill="url(#sky-f)"/>
+        <circle cx="160" cy="50" r="18" fill="#fef3c7" opacity="0.95"/>
+        <path d="M0,95 L40,80 L80,90 L120,72 L160,86 L220,75 L220,130 L0,130 Z" fill="#1e1b4b"/>
+        <path d="M0,110 L60,100 L120,108 L180,98 L220,105 L220,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
+      </svg>
+      <div>
+        <div class="hex-label">Erste Bytes der Datei</div>
+        <div class="hex-strip foto-magic">
+<span class="magic">89 50 4E 47</span> 0D 0A 1A 0A 00 00 00 0D 49 48 44 52
+        </div>
+      </div>
+      <div class="magic-caption"><span class="magic-word">50 4E 47</span> = <span class="magic-word">"PNG"</span></div>
+    </div>
+
+    <div class="file audio">
+      <div class="file-head">
+        <span class="file-name">Sprachnachricht</span>
+        <span class="file-ext">.mp3</span>
+      </div>
+      <svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="none">
+        <rect x="0" y="0" width="220" height="130" fill="#0f0f23"/>
+        <line x1="0" y1="65" x2="220" y2="65" stroke="#374151" stroke-width="1"/>
+        <path d="M0,65 L8,65 L12,55 L16,75 L20,40 L24,90 L28,30 L32,95 L36,35 L40,90
+          L48,45 L56,82 L64,50 L72,78 L80,52 L88,75 L96,55 L104,72
+          L116,58 L128,72 L140,60 L152,70 L168,62 L184,68 L200,64 L220,65
+          L220,130 L0,130 Z" fill="#fb923c" stroke="#ea580c" stroke-width="1"/>
+      </svg>
+      <div>
+        <div class="hex-label">Erste Bytes der Datei</div>
+        <div class="hex-strip audio-magic">
+<span class="magic">49 44 33</span> 03 00 00 00 00 03 76 54 49 54 32 00 00
+        </div>
+      </div>
+      <div class="magic-caption"><span class="magic-word">49 44 33</span> = <span class="magic-word">"ID3"</span></div>
+    </div>
+
+    <div class="file pdf">
+      <div class="file-head">
+        <span class="file-name">PDF-Dokument</span>
+        <span class="file-ext">.pdf</span>
+      </div>
+      <svg class="preview" viewBox="0 0 220 130" preserveAspectRatio="xMidYMid meet">
+        <rect x="0" y="0" width="220" height="130" fill="#f8fafc"/>
+        <rect x="50" y="14" width="120" height="102" rx="4" fill="#fff" stroke="#cbd5e1" stroke-width="1"/>
+        <rect x="58" y="24" width="80" height="4" rx="1" fill="#7c3aed"/>
+        <rect x="58" y="34" width="104" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="40" width="98" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="46" width="92" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="52" width="100" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="62" width="80" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="68" width="96" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="74" width="88" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="84" width="40" height="3" rx="1" fill="#7c3aed" opacity="0.7"/>
+        <rect x="58" y="92" width="92" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="98" width="86" height="2" fill="#cbd5e1"/>
+        <rect x="58" y="104" width="78" height="2" fill="#cbd5e1"/>
+      </svg>
+      <div>
+        <div class="hex-label">Erste Bytes der Datei</div>
+        <div class="hex-strip pdf-magic">
+<span class="magic">25 50 44 46</span> 2D 31 2E 37 0A 25 E2 E3 CF D3 0A 0A
+        </div>
+      </div>
+      <div class="magic-caption"><span class="magic-word">25 50 44 46</span> = <span class="magic-word">"%PDF"</span></div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Drei verschiedene Dinge — eine Sprache.</div>
+    <div class="verdict-a">Jede Datei beginnt mit ihrer <strong>Visitenkarte</strong> (Magic Number) und besteht ab da aus nichts als Byte. Foto, Audio, PDF — alle dieselben Bauteile, nur anders zusammengesetzt.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/jpeg-pipeline.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --lossless-step: #2563eb;
+    --lossy-step: #ea580c;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .pipeline {
+    display: grid;
+    grid-template-columns: 110px repeat(6, 1fr) 110px;
+    gap: 4px;
+    max-width: 1200px;
+    margin: 0 auto;
+    align-items: stretch;
+  }
+
+  .endpoint {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    text-align: center;
+  }
+  .endpoint-art { width: 88px; height: 60px; display: block; }
+  .endpoint-label {
+    font-size: 0.92rem;
+    font-weight: 700;
+    color: var(--dark);
+  }
+  .endpoint-size {
+    font-family: ui-monospace, monospace;
+    font-size: 0.82rem;
+    color: var(--muted);
+  }
+
+  .step {
+    border: 2px solid;
+    border-radius: 8px;
+    padding: 8px 6px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    text-align: center;
+  }
+  .step.lossless { border-color: var(--lossless-step); }
+  .step.lossy    { border-color: var(--lossy-step); }
+  .step-num {
+    font-family: ui-monospace, monospace;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--muted);
+  }
+  .step-name {
+    font-size: 0.78rem;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+  .step.lossless .step-name { color: var(--lossless-step); }
+  .step.lossy    .step-name { color: var(--lossy-step); }
+  .step-desc {
+    font-size: 0.66rem;
+    color: var(--muted);
+    line-height: 1.3;
+  }
+
+  .arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
+    font-family: ui-monospace, monospace;
+    font-size: 1rem;
+  }
+
+  .legend {
+    margin-top: 16px;
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    font-size: 0.84rem;
+    color: var(--dark);
+  }
+  .legend-item { display: flex; align-items: center; gap: 6px; }
+  .legend-swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    display: inline-block;
+  }
+  .legend-swatch.lossless { background: var(--lossless-step); }
+  .legend-swatch.lossy    { background: var(--lossy-step); }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</h1>
+  <div class="sub">Nur <strong>einer</strong> dieser Schritte verliert Information. Die anderen fünf sind verlustfrei.</div>
+
+  <div class="pipeline">
+
+    <div class="endpoint">
+      <svg class="endpoint-art" viewBox="0 0 88 60">
+        <defs>
+          <linearGradient id="photo-grad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#fde68a"/>
+            <stop offset="55%" stop-color="#fb923c"/>
+            <stop offset="100%" stop-color="#7c3aed"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
+        <circle cx="66" cy="22" r="9" fill="#fef3c7"/>
+        <path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
+      </svg>
+      <div class="endpoint-label">Foto (Roh)</div>
+      <div class="endpoint-size">~36 MB</div>
+    </div>
+
+    <div class="step lossless">
+      <div class="step-num">1</div>
+      <div class="step-name">Farbraum</div>
+      <div class="step-desc">RGB → Y'CbCr<br>Helligkeit von Farbe trennen</div>
+    </div>
+
+    <div class="step lossy">
+      <div class="step-num">2</div>
+      <div class="step-name">Chroma-Subsampling</div>
+      <div class="step-desc">Cb &amp; Cr auf <strong>¼</strong><br>Auge sieht Farbe grob</div>
+    </div>
+
+    <div class="step lossless">
+      <div class="step-num">3</div>
+      <div class="step-name">8×8 Blöcke</div>
+      <div class="step-desc">Bild in Kacheln<br>jeder Block einzeln</div>
+    </div>
+
+    <div class="step lossless">
+      <div class="step-num">4</div>
+      <div class="step-name">DCT</div>
+      <div class="step-desc">Frequenz-Zerlegung<br>häufige Muster</div>
+    </div>
+
+    <div class="step lossy">
+      <div class="step-num">5</div>
+      <div class="step-name">Quantisierung</div>
+      <div class="step-desc"><strong>Hier</strong> wird weggeworfen<br>hohe Frequenzen raus</div>
+    </div>
+
+    <div class="step lossless">
+      <div class="step-num">6</div>
+      <div class="step-name">Huffman</div>
+      <div class="step-desc">Verlustfrei kürzen<br>häufig → kurz</div>
+    </div>
+
+    <div class="endpoint">
+      <svg class="endpoint-art" viewBox="0 0 88 60">
+        <rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
+        <circle cx="66" cy="22" r="9" fill="#fef3c7"/>
+        <path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
+      </svg>
+      <div class="endpoint-label">JPEG</div>
+      <div class="endpoint-size">~3,5 MB</div>
+    </div>
+
+  </div>
+
+  <div class="legend">
+    <span class="legend-item"><span class="legend-swatch lossless"></span>verlustfrei (umkehrbar)</span>
+    <span class="legend-item"><span class="legend-swatch lossy"></span>verlustbehaftet (Information weg)</span>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Der <strong>Quanten-Schritt</strong> ist das ganze Geheimnis von JPEG.</div>
+    <div class="verdict-a">Schritte 1, 3, 4, 6 verlieren nichts. Schritt 2 wirft Farb-Detail weg (Auge merkt nicht). Schritt 5 entscheidet — je nach Qualitäts-Stufe — wie viel <strong>Frequenz-Detail</strong> verloren geht. Niedrige Quality = aggressivere Schritt-5-Quantisierung.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/kap02-eroeffner.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Dieselbe Aufnahme, zwei Formate</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --lossless: #16a34a;
+    --lossy: #ef4444;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 36px 48px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
+
+  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1200px; margin: 0 auto; }
+  .panel { border: 2px solid var(--border); border-radius: 12px; padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; background: #fff; }
+  .panel.left  { border-color: var(--lossless); }
+  .panel.right { border-color: var(--lossy); }
+
+  .panel-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .panel-tag {
+    font-size: 0.74rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .panel-name { font-size: 1.5rem; font-weight: 700; }
+  .panel.left .panel-name { color: var(--lossless); }
+  .panel.right .panel-name { color: var(--lossy); }
+  .panel-format {
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 0.85rem;
+    color: var(--muted);
+  }
+
+  .waveform {
+    background: #0f0f23;
+    border-radius: 8px;
+    padding: 6px;
+    display: block;
+  }
+
+  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+  .stat { background: var(--soft); border: 1px solid var(--border); border-radius: 7px; padding: 8px 12px; }
+  .stat .label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; }
+  .stat .value { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); margin-top: 2px; }
+
+  .verdict {
+    margin-top: 26px;
+    border: 2px solid var(--hl);
+    background: #fff;
+    border-radius: 12px;
+    padding: 16px 22px;
+    text-align: center;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .verdict-q { font-size: 1.2rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 1rem; color: var(--dark); margin-top: 6px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Dieselbe Aufnahme, zwei Formate</h1>
+  <div class="sub">3 Sekunden Snare-Hit mit Cymbal-Tail · 44,1 kHz Sample-Rate · Stereo</div>
+
+  <div class="grid">
+
+    <div class="panel left">
+      <div class="panel-head">
+        <span class="panel-name">Lossless</span>
+        <span class="panel-tag">FLAC</span>
+      </div>
+      <div class="panel-format">verlustfrei · alle Frequenzen 0–22 kHz erhalten</div>
+
+      <svg class="waveform" viewBox="0 0 800 160" preserveAspectRatio="none">
+        <defs>
+          <linearGradient id="green-grad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#34d399"/>
+            <stop offset="100%" stop-color="#16a34a"/>
+          </linearGradient>
+        </defs>
+        <line x1="0" y1="80" x2="800" y2="80" stroke="#374151" stroke-width="1"/>
+        <!-- detailed waveform: transient peak + cymbal decay with high-freq noise -->
+        <path d="M0,80
+          L40,80 L42,78 L44,82 L46,74 L48,88
+          L60,30 L62,135 L64,18 L66,142 L68,28 L70,128 L72,38 L74,118 L76,48 L78,108
+          L90,55 L92,108 L94,52 L96,112 L98,58 L100,105 L102,62 L104,98 L106,68 L108,92
+          L130,72 L132,92 L134,68 L136,94 L138,72 L140,90 L142,74 L144,88
+          L170,76 L172,86 L174,74 L176,87 L178,76 L180,85
+          L220,77 L222,84 L224,76 L226,85 L228,77 L230,83
+          L280,78 L282,83 L284,77 L286,84 L288,78 L290,82
+          L340,79 L342,82 L344,78 L346,82 L348,79 L350,81
+          L400,79 L402,81 L404,79 L406,81 L408,79 L410,81
+          L460,80 L462,81 L464,79 L466,81 L468,80 L470,80
+          L520,80 L522,81 L524,79 L526,80
+          L580,80 L582,80 L584,80
+          L640,80 L700,80 L800,80 Z"
+          fill="url(#green-grad)" stroke="#16a34a" stroke-width="1" opacity="0.95"/>
+      </svg>
+
+      <div class="stats">
+        <div class="stat"><div class="label">Dateigröße</div><div class="value">5,3 MB</div></div>
+        <div class="stat"><div class="label">Bitrate</div><div class="value">1.411 kbit/s</div></div>
+      </div>
+    </div>
+
+    <div class="panel right">
+      <div class="panel-head">
+        <span class="panel-name">Lossy</span>
+        <span class="panel-tag">MP3 128 kbit/s</span>
+      </div>
+      <div class="panel-format">verlustbehaftet · hohe Frequenzen weggeworfen, Transienten geglättet</div>
+
+      <svg class="waveform" viewBox="0 0 800 160" preserveAspectRatio="none">
+        <defs>
+          <linearGradient id="red-grad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#fca5a5"/>
+            <stop offset="100%" stop-color="#ef4444"/>
+          </linearGradient>
+        </defs>
+        <line x1="0" y1="80" x2="800" y2="80" stroke="#374151" stroke-width="1"/>
+        <!-- smoothed waveform: same overall shape, no fine detail in transient peak -->
+        <path d="M0,80
+          L40,80 L48,80
+          L60,48 L65,120 L70,52 L75,115 L80,58 L85,108
+          L100,68 L108,92 L114,70 L120,90
+          L150,75 L160,86 L168,76 L174,85
+          L200,77 L210,84 L220,77 L230,83
+          L260,78 L280,82 L300,78 L320,82
+          L360,79 L380,81 L400,79 L420,81
+          L460,80 L480,80 L520,80
+          L580,80 L640,80 L700,80 L800,80 Z"
+          fill="url(#red-grad)" stroke="#ef4444" stroke-width="1" opacity="0.95"/>
+      </svg>
+
+      <div class="stats">
+        <div class="stat"><div class="label">Dateigröße</div><div class="value">0,48 MB</div></div>
+        <div class="stat"><div class="label">Bitrate</div><div class="value">128 kbit/s</div></div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Hört man den Unterschied?</div>
+    <div class="verdict-a">Auf dem Smartphone-Lautsprecher: meist nicht. Im Studio-Monitor mit Kopfhörer: oft schon. — MP3 wirft <strong>91 % der Daten weg</strong>, die der Mensch im Alltag nicht vermisst.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/kap03-eroeffner.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Drei Modalitäten, ein Hebel</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --bild: #2563eb;
+    --audio: #ea580c;
+    --video: #7c3aed;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 32px 48px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
+
+  .table { display: grid; grid-template-columns: 140px 1fr 1fr 1fr; gap: 12px; max-width: 1180px; margin: 0 auto; align-items: stretch; }
+  .col-head { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); padding: 0 8px 4px; }
+
+  .row-label { font-size: 1.15rem; font-weight: 700; padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; justify-content: center; border-radius: 10px; }
+  .row-label.bild { background: #dbeafe; color: var(--bild); }
+  .row-label.audio { background: #ffedd5; color: var(--audio); }
+  .row-label.video { background: #ede9fe; color: var(--video); }
+  .row-label small { font-size: 0.78rem; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
+
+  .cell { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
+  .cell-format { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--muted); }
+  .cell-size { font-size: 1.7rem; font-weight: 700; color: var(--dark); font-family: ui-monospace, monospace; }
+  .cell-bar { height: 8px; border-radius: 4px; background: var(--soft); position: relative; overflow: hidden; }
+  .cell-bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1180px;
+    margin-left: auto;
+    margin-right: auto;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+    text-align: center;
+  }
+  .verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Drei Modalitäten — derselbe Hebel</h1>
+  <div class="sub">Bild, Audio, Video schrumpfen alle dramatisch. Warum? Weil Wahrnehmung Lücken hat.</div>
+
+  <div class="table">
+    <div></div>
+    <div class="col-head">Roh</div>
+    <div class="col-head">Lossy (modern)</div>
+    <div class="col-head">Lossy (aggressiv)</div>
+
+    <div class="row-label bild">Bild<small>12-MP-Foto</small></div>
+    <div class="cell">
+      <div class="cell-format">RAW</div>
+      <div class="cell-size">36 MB</div>
+      <div class="cell-bar"><div class="fill" style="width:100%;background:#2563eb"></div></div>
+    </div>
+    <div class="cell">
+      <div class="cell-format">JPEG · Q 90</div>
+      <div class="cell-size">4 MB</div>
+      <div class="cell-bar"><div class="fill" style="width:11%;background:#2563eb"></div></div>
+    </div>
+    <div class="cell">
+      <div class="cell-format">JPEG · Q 50</div>
+      <div class="cell-size">800 KB</div>
+      <div class="cell-bar"><div class="fill" style="width:2.2%;background:#2563eb"></div></div>
+    </div>
+
+    <div class="row-label audio">Audio<small>30 s Stereo</small></div>
+    <div class="cell">
+      <div class="cell-format">WAV · 44,1 kHz · 16 bit</div>
+      <div class="cell-size">5,3 MB</div>
+      <div class="cell-bar"><div class="fill" style="width:100%;background:#ea580c"></div></div>
+    </div>
+    <div class="cell">
+      <div class="cell-format">MP3 · 192 kbit/s</div>
+      <div class="cell-size">720 KB</div>
+      <div class="cell-bar"><div class="fill" style="width:14%;background:#ea580c"></div></div>
+    </div>
+    <div class="cell">
+      <div class="cell-format">MP3 · 64 kbit/s</div>
+      <div class="cell-size">240 KB</div>
+      <div class="cell-bar"><div class="fill" style="width:4.5%;background:#ea580c"></div></div>
+    </div>
+
+    <div class="row-label video">Video<small>30 s · 4K · 30 fps</small></div>
+    <div class="cell">
+      <div class="cell-format">Roh · 8 bit</div>
+      <div class="cell-size">12 GB</div>
+      <div class="cell-bar"><div class="fill" style="width:100%;background:#7c3aed"></div></div>
+    </div>
+    <div class="cell">
+      <div class="cell-format">H.264 · 25 Mbit/s</div>
+      <div class="cell-size">94 MB</div>
+      <div class="cell-bar"><div class="fill" style="width:0.8%;background:#7c3aed"></div></div>
+    </div>
+    <div class="cell">
+      <div class="cell-format">H.265 · 12 Mbit/s</div>
+      <div class="cell-size">45 MB</div>
+      <div class="cell-bar"><div class="fill" style="width:0.4%;background:#7c3aed"></div></div>
+    </div>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Bilder schrumpfen ×45. Audio ×22. Video ×270.</div>
+    <div class="verdict-a">Jede Reduktion nutzt eine andere Wahrnehmungs-Lücke: <strong>Bild</strong> die geringere Farbschärfe, <strong>Audio</strong> die Maskierung, <strong>Video</strong> die Frame-zu-Frame-Ähnlichkeit.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/kap04-eroeffner.html

@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Die Reise einer Datei</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --slot1: #0891b2;
+    --slot2: #2563eb;
+    --slot3: #7c3aed;
+    --slot4: #be185d;
+    --slot5: #ea580c;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 32px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 30px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .journey {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
+    gap: 6px;
+    align-items: stretch;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .station {
+    border: 2px solid;
+    border-radius: 10px;
+    padding: 14px 12px 12px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+  .station.s1 { border-color: var(--slot1); }
+  .station.s2 { border-color: var(--slot2); }
+  .station.s3 { border-color: var(--slot3); }
+  .station.s4 { border-color: var(--slot4); }
+  .station.s5 { border-color: var(--slot5); }
+
+  .station-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
+  .station-name { font-size: 1.05rem; font-weight: 700; text-align: center; line-height: 1.2; }
+  .station.s1 .station-name { color: var(--slot1); }
+  .station.s2 .station-name { color: var(--slot2); }
+  .station.s3 .station-name { color: var(--slot3); }
+  .station.s4 .station-name { color: var(--slot4); }
+  .station.s5 .station-name { color: var(--slot5); }
+  .station-detail { font-size: 0.78rem; color: var(--muted); text-align: center; }
+
+  .link {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 0 4px;
+    justify-content: center;
+  }
+  .link-rate {
+    font-family: ui-monospace, monospace;
+    font-size: 0.88rem;
+    font-weight: 700;
+    color: var(--dark);
+    white-space: nowrap;
+  }
+  .link-protocol {
+    font-size: 0.7rem;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .link-arrow svg { width: 32px; height: 14px; }
+
+  .scenario {
+    margin-top: 28px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    background: var(--soft);
+    border: 1.5px solid var(--border);
+    border-radius: 10px;
+    padding: 16px 22px;
+  }
+  .scenario-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
+  .scenario-body { font-size: 0.98rem; line-height: 1.55; }
+  .scenario-body code { font-family: ui-monospace, monospace; background: #fff; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); }
+
+  .verdict {
+    margin-top: 18px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
+</style>
+</head>
+<body>
+  <h1>Die Reise einer Datei</h1>
+  <div class="sub">Ein 4K-Trailer (<strong>1,2 GB</strong>) reist von der externen SSD auf den Monitor — jede Etappe ist ein eigener Engpass.</div>
+
+  <div class="journey">
+    <div class="station s1">
+      <div class="station-tag">Quelle</div>
+      <div class="station-name">SSD<br>extern</div>
+      <div class="station-detail">NVMe-Stick</div>
+    </div>
+
+    <div class="link">
+      <div class="link-rate">3 200 MB/s</div>
+      <svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
+      <div class="link-protocol">USB 4 / TB4</div>
+    </div>
+
+    <div class="station s2">
+      <div class="station-tag">Aufnahme</div>
+      <div class="station-name">Laptop</div>
+      <div class="station-detail">RAM &amp; CPU</div>
+    </div>
+
+    <div class="link">
+      <div class="link-rate">~7 000 MB/s</div>
+      <svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
+      <div class="link-protocol">PCIe 4.0</div>
+    </div>
+
+    <div class="station s3">
+      <div class="station-tag">Decoder</div>
+      <div class="station-name">GPU</div>
+      <div class="station-detail">H.264-Hardware</div>
+    </div>
+
+    <div class="link">
+      <div class="link-rate">2 200 MB/s</div>
+      <svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
+      <div class="link-protocol">HDMI 2.1</div>
+    </div>
+
+    <div class="station s4">
+      <div class="station-tag">Display</div>
+      <div class="station-name">4K-Monitor</div>
+      <div class="station-detail">3840 × 2160</div>
+    </div>
+
+    <div class="link">
+      <div class="link-rate">visuell</div>
+      <svg class="link-arrow" viewBox="0 0 32 14"><path d="M2,7 L26,7 M22,2 L28,7 L22,12" stroke="#d63384" stroke-width="2" fill="none"/></svg>
+      <div class="link-protocol">Licht</div>
+    </div>
+
+    <div class="station s5">
+      <div class="station-tag">Ziel</div>
+      <div class="station-name">Auge</div>
+      <div class="station-detail">Bewusstsein</div>
+    </div>
+  </div>
+
+  <div class="scenario">
+    <div class="scenario-head">Was hier passiert</div>
+    <div class="scenario-body">
+      Die <code>1,2 GB</code> liegen verschlüsselt komprimiert auf dem Stick. Sie reisen über <strong>USB-C</strong> in den RAM, werden vom GPU <strong>dekodiert</strong> (H.264 → roher RGB-Strom), und über <strong>HDMI</strong> als unkomprimiertes Bild an den Monitor geschickt. Dort entstehen pro Sekunde 60 Bilder mit je rund <code>24 MB</code> — also <strong>1,4 GB/s an rohem Pixelstrom</strong>, der niemals als Datei vorliegt.
+    </div>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Speicher und Schnittstelle sind keine zwei Themen — sie sind die zwei Seiten desselben Engpasses.</div>
+    <div class="verdict-a">Wo Bytes wohnen entscheidet, wie schnell sie reisen können. Wo sie reisen entscheidet, wo sie wohnen müssen.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/kap05-eroeffner.html

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Eine Datei reist — und erzählt</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --visible: #2563eb;
+    --hidden: #7c3aed;
+    --transit: #ea580c;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .scene {
+    display: grid;
+    grid-template-columns: 1fr 1.2fr;
+    gap: 22px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .panel {
+    border: 2px solid;
+    border-radius: 12px;
+    padding: 16px 18px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .panel.visible { border-color: var(--visible); }
+  .panel.hidden  { border-color: var(--hidden); }
+
+  .panel-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .panel-tag {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--muted);
+  }
+  .panel-name { font-size: 1.25rem; font-weight: 700; }
+  .panel.visible .panel-name { color: var(--visible); }
+  .panel.hidden  .panel-name { color: var(--hidden); }
+
+  .photo {
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    display: block;
+  }
+
+  .photo-meta {
+    display: flex;
+    justify-content: space-between;
+    font-family: ui-monospace, monospace;
+    font-size: 0.78rem;
+    color: var(--muted);
+    padding: 0 2px;
+  }
+
+  .exif-list {
+    display: grid;
+    grid-template-columns: 130px 1fr;
+    gap: 4px 12px;
+    font-size: 0.86rem;
+    line-height: 1.4;
+  }
+  .exif-key {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    padding-top: 3px;
+  }
+  .exif-val { font-family: ui-monospace, monospace; color: var(--dark); }
+  .exif-val.gps { color: var(--hl); font-weight: 700; }
+
+  .transit-strip {
+    max-width: 1200px;
+    margin: 18px auto 0;
+    border: 2px solid var(--transit);
+    border-radius: 12px;
+    padding: 14px 18px;
+    background: #fff;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 16px;
+    align-items: center;
+  }
+  .transit-tag {
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--transit);
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    text-align: center;
+  }
+  .transit-body { display: flex; flex-direction: column; gap: 8px; }
+  .transit-route {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.92rem;
+    font-weight: 700;
+    flex-wrap: wrap;
+  }
+  .hop {
+    background: var(--soft);
+    border: 1.5px solid var(--border);
+    padding: 4px 10px;
+    border-radius: 6px;
+    font-family: ui-monospace, monospace;
+    font-size: 0.82rem;
+    color: var(--dark);
+  }
+  .hop.origin { border-color: var(--visible); color: var(--visible); }
+  .hop.dest   { border-color: var(--visible); color: var(--visible); }
+  .hop.edge   { border-color: var(--transit); color: var(--transit); }
+  .arrow { color: var(--muted); font-family: ui-monospace, monospace; }
+  .transit-headers {
+    font-family: ui-monospace, monospace;
+    font-size: 0.78rem;
+    color: var(--muted);
+    line-height: 1.5;
+  }
+  .transit-headers strong { color: var(--dark); }
+
+  .verdict {
+    margin-top: 18px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Eine Datei reist — und erzählt</h1>
+  <div class="sub">Ein Smartphone-Foto geht von <strong>Stuttgart</strong> nach <strong>Tokyo</strong>. Was sieht der Empfänger — und was bekommt er noch dazu?</div>
+
+  <div class="scene">
+
+    <div class="panel visible">
+      <div class="panel-head">
+        <span class="panel-name">Inhalt</span>
+        <span class="panel-tag">Was du siehst</span>
+      </div>
+
+      <svg class="photo" viewBox="0 0 420 280" preserveAspectRatio="xMidYMid slice">
+        <defs>
+          <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#fde68a"/>
+            <stop offset="55%" stop-color="#fda4af"/>
+            <stop offset="100%" stop-color="#9333ea"/>
+          </linearGradient>
+          <linearGradient id="hills" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#312e81"/>
+            <stop offset="100%" stop-color="#0f172a"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="420" height="280" fill="url(#sky)"/>
+        <circle cx="320" cy="105" r="32" fill="#fff7ed" opacity="0.95"/>
+        <path d="M0,200 L60,170 L110,185 L160,160 L210,178 L260,150 L310,172 L360,148 L420,168 L420,280 L0,280 Z" fill="url(#hills)"/>
+        <path d="M0,225 L50,210 L100,222 L150,205 L200,220 L250,202 L300,218 L350,200 L420,215 L420,280 L0,280 Z" fill="#1e1b4b" opacity="0.7"/>
+        <rect x="80" y="225" width="14" height="42" fill="#0f172a"/>
+        <rect x="180" y="232" width="10" height="35" fill="#0f172a"/>
+        <rect x="240" y="220" width="18" height="48" fill="#0f172a"/>
+        <rect x="300" y="234" width="11" height="34" fill="#0f172a"/>
+        <rect x="86" y="232" width="3" height="3" fill="#fbbf24"/>
+        <rect x="188" y="240" width="2" height="2" fill="#fbbf24"/>
+        <rect x="248" y="228" width="3" height="3" fill="#fbbf24"/>
+        <rect x="307" y="240" width="2" height="2" fill="#fbbf24"/>
+      </svg>
+
+      <div class="photo-meta">
+        <span>HEIC · 4032 × 3024</span>
+        <span>3,2 MB</span>
+      </div>
+    </div>
+
+    <div class="panel hidden">
+      <div class="panel-head">
+        <span class="panel-name">Gepäck</span>
+        <span class="panel-tag">Was die Datei über sich weiß</span>
+      </div>
+
+      <div class="exif-list">
+        <div class="exif-key">Kamera</div>
+        <div class="exif-val">Apple iPhone 15 Pro · 24 mm · ƒ/1.78</div>
+
+        <div class="exif-key">Belichtung</div>
+        <div class="exif-val">1/250 s · ISO 100 · EV 0</div>
+
+        <div class="exif-key">Aufgenommen</div>
+        <div class="exif-val">2026-04-12 · 18:47:12 · +02:00</div>
+
+        <div class="exif-key">GPS</div>
+        <div class="exif-val gps">48.7847° N · 9.1825° E · 248 m<br><span style="font-weight:400">(Stuttgart, Königstraße 28)</span></div>
+
+        <div class="exif-key">Software</div>
+        <div class="exif-val">iOS 18.4.1 · HDR · Live Photo</div>
+
+        <div class="exif-key">Farbprofil</div>
+        <div class="exif-val">Display P3</div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="transit-strip">
+    <div class="transit-tag">Weg</div>
+    <div class="transit-body">
+      <div class="transit-route">
+        <span class="hop origin">Stuttgart</span>
+        <span class="arrow">→</span>
+        <span class="hop">DNS</span>
+        <span class="arrow">→</span>
+        <span class="hop">TLS 1.3</span>
+        <span class="arrow">→</span>
+        <span class="hop edge">CDN-Edge Tokyo</span>
+        <span class="arrow">→</span>
+        <span class="hop dest">Tokyo</span>
+      </div>
+      <div class="transit-headers">
+        <strong>HTTP/3 200 OK</strong> · content-type: image/heic · content-length: 3 220 480 · <strong>RTT 47 ms</strong> · cache: HIT (Edge tok-7) · age: 312 s
+      </div>
+    </div>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Eine Datei = Inhalt + Gepäck + Weg.</div>
+    <div class="verdict-a"><strong>Inhalt</strong> sieht der Empfänger. <strong>Gepäck</strong> verrät, wer sie gemacht hat — und wo. <strong>Weg</strong> entscheidet, wie schnell sie ankommt. Drei Schichten, eine Datei.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/kb-vs-kib.html

@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>1 TB verkauft, 931 GB angezeigt — wo gehen die 69 GB hin?</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --marketing: #2563eb;
+    --os: #ea580c;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 32px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .compare {
+    display: grid;
+    grid-template-columns: 1fr 80px 1fr;
+    gap: 18px;
+    max-width: 1100px;
+    margin: 0 auto;
+    align-items: stretch;
+  }
+
+  .side {
+    border: 2px solid;
+    border-radius: 12px;
+    padding: 18px 22px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+  .side.marketing { border-color: var(--marketing); }
+  .side.os        { border-color: var(--os); }
+
+  .side-tag {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+  }
+  .side.marketing .side-name { color: var(--marketing); }
+  .side.os .side-name { color: var(--os); }
+  .side-name { font-size: 1.15rem; font-weight: 700; }
+
+  .label-mock {
+    background: var(--soft);
+    border: 1.5px solid var(--border);
+    border-radius: 8px;
+    padding: 14px 22px;
+    min-width: 240px;
+    text-align: center;
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+    color: var(--muted);
+    line-height: 1.5;
+  }
+  .label-mock .big {
+    font-family: system-ui, sans-serif;
+    font-size: 2.2rem;
+    font-weight: 900;
+    display: block;
+    color: var(--dark);
+    line-height: 1.05;
+  }
+  .side.marketing .label-mock .big { color: var(--marketing); }
+  .side.os        .label-mock .big { color: var(--os); }
+  .label-mock .small-line { font-size: 0.78rem; }
+
+  .formel {
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+    color: var(--muted);
+    text-align: center;
+    line-height: 1.6;
+  }
+  .formel strong { color: var(--dark); }
+
+  .arrow-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: var(--muted);
+  }
+  .arrow-col svg { display: block; }
+  .arrow-col .why {
+    font-size: 0.78rem;
+    font-weight: 700;
+    color: var(--hl);
+    text-align: center;
+    line-height: 1.25;
+  }
+
+  .math-box {
+    margin-top: 22px;
+    max-width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+    background: var(--soft);
+    border: 1.5px solid var(--border);
+    border-radius: 10px;
+    padding: 16px 22px;
+  }
+  .math-box-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 8px; }
+  .math-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; font-family: ui-monospace, monospace; font-size: 0.9rem; line-height: 1.6; }
+  .math-grid .key { color: var(--muted); }
+  .math-grid .val { color: var(--dark); font-weight: 700; }
+  .math-grid .val.hl { color: var(--hl); }
+
+  .verdict {
+    margin-top: 18px;
+    max-width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a code { font-family: ui-monospace, monospace; background: #fff; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); }
+</style>
+</head>
+<body>
+  <h1>„1 TB" gekauft — 931 GB im Finder. Wo sind die 69 GB hin?</h1>
+  <div class="sub">Nirgendwo. Es sind <strong>dieselben Byte</strong>. Nur zwei Welten zählen anders.</div>
+
+  <div class="compare">
+
+    <div class="side marketing">
+      <div class="side-tag">Auf der Verpackung</div>
+      <div class="side-name">Marketing</div>
+      <div class="label-mock">
+        <span class="big">1 TB</span>
+        <span class="small-line">externe SSD</span>
+      </div>
+      <div class="formel">
+        1 TB = <strong>10<sup>12</sup></strong> Byte<br>
+        = 1 000 000 000 000
+      </div>
+    </div>
+
+    <div class="arrow-col">
+      <svg viewBox="0 0 60 30" width="56" height="30"><path d="M5,15 L48,15 M42,7 L52,15 L42,23" stroke="#d63384" stroke-width="2.5" fill="none"/></svg>
+      <div class="why">geteilt durch<br>2<sup>30</sup></div>
+    </div>
+
+    <div class="side os">
+      <div class="side-tag">Im Finder · Explorer</div>
+      <div class="side-name">Betriebssystem</div>
+      <div class="label-mock">
+        <span class="big">931 GB</span>
+        <span class="small-line">eigentlich: 931 GiB</span>
+      </div>
+      <div class="formel">
+        1 GiB = <strong>2<sup>30</sup></strong> Byte<br>
+        = 1 073 741 824
+      </div>
+    </div>
+
+  </div>
+
+  <div class="math-box">
+    <div class="math-box-head">Die Rechnung</div>
+    <div class="math-grid">
+      <span class="key">Marketing schreibt</span>
+      <span class="val">1 TB = 1 000 000 000 000 Byte (Basis 10)</span>
+      <span class="key">Betriebssystem rechnet</span>
+      <span class="val">1 TiB = 1 099 511 627 776 Byte (Basis 2)</span>
+      <span class="key">1 TB in GiB umrechnen</span>
+      <span class="val hl">10<sup>12</sup> ÷ 2<sup>30</sup> ≈ 931,3 GiB — der Finder zeigt also „931 GB"</span>
+      <span class="key">Was die Studis sehen</span>
+      <span class="val">Etikett: GB · Anzeige: GB · Bedeutung: zwei verschiedene Dinge</span>
+    </div>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Es fehlt nichts. Es wird nur in zwei Sprachen gezählt.</div>
+    <div class="verdict-a">Korrekt wären <code>GiB</code> (binär, 1024) und <code>GB</code> (dezimal, 1000). In der Realität verwenden beide Welten <code>GB</code> und meinen verschiedene Zahlen.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/nyquist-diagram.html

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Nyquist-Shannon — wie oft muss man messen?</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --bad: #ef4444;
+    --warn: #f59e0b;
+    --good: #16a34a;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .cases {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+
+  .case {
+    display: grid;
+    grid-template-columns: 200px 1fr;
+    gap: 18px;
+    align-items: center;
+    border: 2px solid;
+    border-radius: 10px;
+    padding: 10px 14px;
+    background: #fff;
+  }
+  .case.bad  { border-color: var(--bad); }
+  .case.warn { border-color: var(--warn); }
+  .case.good { border-color: var(--good); }
+
+  .case-meta { display: flex; flex-direction: column; gap: 4px; }
+  .case-tag {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+  }
+  .case-name { font-size: 1.05rem; font-weight: 700; }
+  .case.bad  .case-name { color: var(--bad); }
+  .case.warn .case-name { color: var(--warn); }
+  .case.good .case-name { color: var(--good); }
+  .case-rate { font-family: ui-monospace, monospace; font-size: 0.82rem; color: var(--dark); }
+  .case-note { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
+
+  .plot { background: var(--soft); border-radius: 8px; }
+  .plot svg { display: block; }
+
+  .verdict {
+    margin-top: 20px;
+    max-width: 1180px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+  .verdict-a code { font-family: ui-monospace, monospace; background: var(--soft); padding: 1px 5px; border-radius: 4px; }
+</style>
+</head>
+<body>
+  <h1>Nyquist-Shannon — wie oft müssen wir messen?</h1>
+  <div class="sub">Dieselbe Welle, drei Sample-Raten. Eine fällt durch, eine reicht knapp, eine ist sicher.</div>
+
+  <div class="cases">
+
+    <div class="case bad">
+      <div class="case-meta">
+        <div class="case-tag">Zu wenig</div>
+        <div class="case-name">Aliasing</div>
+        <div class="case-rate">f<sub>s</sub> = 0,9 · f</div>
+        <div class="case-note">Die Sample-Punkte sitzen auf der Welle — aber verbunden sehen sie aus wie eine <strong>ganz andere, langsamere</strong> Welle.</div>
+      </div>
+      <div class="plot">
+        <svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
+          <line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
+          <path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
+                stroke="#cbd5e1" stroke-width="1.5" fill="none"/>
+          <polyline points="20,70 136.7,41 253.4,25.7 370.1,31.2 486.8,54.9 603.5,85.8 720.2,109.2 836.9,114.2"
+                    stroke="#ef4444" stroke-width="2.5" fill="none"/>
+          <circle cx="20"    cy="70"    r="5" fill="#ef4444"/>
+          <circle cx="136.7" cy="41"    r="5" fill="#ef4444"/>
+          <circle cx="253.4" cy="25.7"  r="5" fill="#ef4444"/>
+          <circle cx="370.1" cy="31.2"  r="5" fill="#ef4444"/>
+          <circle cx="486.8" cy="54.9"  r="5" fill="#ef4444"/>
+          <circle cx="603.5" cy="85.8"  r="5" fill="#ef4444"/>
+          <circle cx="720.2" cy="109.2" r="5" fill="#ef4444"/>
+          <circle cx="836.9" cy="114.2" r="5" fill="#ef4444"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="case warn">
+      <div class="case-meta">
+        <div class="case-tag">Genau</div>
+        <div class="case-name">Nyquist-Grenze</div>
+        <div class="case-rate">f<sub>s</sub> = 2 · f</div>
+        <div class="case-note">Sample exakt auf <strong>Peak und Tal</strong>. Mathematisch reicht das — visuell sieht es kaputt aus.</div>
+      </div>
+      <div class="plot">
+        <svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
+          <line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
+          <path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
+                stroke="#cbd5e1" stroke-width="1.5" fill="none"/>
+          <polyline points="46.25,25 98.75,115 151.25,25 203.75,115 256.25,25 308.75,115 361.25,25 413.75,115 466.25,25 518.75,115 571.25,25 623.75,115 676.25,25 728.75,115 781.25,25 833.75,115"
+                    stroke="#f59e0b" stroke-width="2" fill="none" opacity="0.5"/>
+          <circle cx="46.25"  cy="25"  r="5" fill="#f59e0b"/>
+          <circle cx="98.75"  cy="115" r="5" fill="#f59e0b"/>
+          <circle cx="151.25" cy="25"  r="5" fill="#f59e0b"/>
+          <circle cx="203.75" cy="115" r="5" fill="#f59e0b"/>
+          <circle cx="256.25" cy="25"  r="5" fill="#f59e0b"/>
+          <circle cx="308.75" cy="115" r="5" fill="#f59e0b"/>
+          <circle cx="361.25" cy="25"  r="5" fill="#f59e0b"/>
+          <circle cx="413.75" cy="115" r="5" fill="#f59e0b"/>
+          <circle cx="466.25" cy="25"  r="5" fill="#f59e0b"/>
+          <circle cx="518.75" cy="115" r="5" fill="#f59e0b"/>
+          <circle cx="571.25" cy="25"  r="5" fill="#f59e0b"/>
+          <circle cx="623.75" cy="115" r="5" fill="#f59e0b"/>
+          <circle cx="676.25" cy="25"  r="5" fill="#f59e0b"/>
+          <circle cx="728.75" cy="115" r="5" fill="#f59e0b"/>
+          <circle cx="781.25" cy="25"  r="5" fill="#f59e0b"/>
+          <circle cx="833.75" cy="115" r="5" fill="#f59e0b"/>
+        </svg>
+      </div>
+    </div>
+
+    <div class="case good">
+      <div class="case-meta">
+        <div class="case-tag">Sicher</div>
+        <div class="case-name">Überabtastung</div>
+        <div class="case-rate">f<sub>s</sub> = 8 · f</div>
+        <div class="case-note">Genug Punkte — die Welle wird Punkt für Punkt nachgezeichnet. So macht es eine CD.</div>
+      </div>
+      <div class="plot">
+        <svg viewBox="0 0 880 140" width="100%" height="140" preserveAspectRatio="none">
+          <line x1="20" y1="70" x2="860" y2="70" stroke="#cbd5e1" stroke-width="1" stroke-dasharray="3,4"/>
+          <path d="M 20,70 Q 46.25,-20 72.5,70 T 125,70 T 177.5,70 T 230,70 T 282.5,70 T 335,70 T 387.5,70 T 440,70 T 492.5,70 T 545,70 T 597.5,70 T 650,70 T 702.5,70 T 755,70 T 807.5,70 T 860,70"
+                stroke="#16a34a" stroke-width="2.5" fill="none" opacity="0.9"/>
+          <circle cx="20" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="33.1" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="46.2" cy="25" r="2.5" fill="#16a34a"/>
+          <circle cx="59.4" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="72.5" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="85.6" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="98.8" cy="115" r="2.5" fill="#16a34a"/>
+          <circle cx="111.9" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="125" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="138.1" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="151.2" cy="25" r="2.5" fill="#16a34a"/>
+          <circle cx="164.4" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="177.5" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="190.6" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="203.8" cy="115" r="2.5" fill="#16a34a"/>
+          <circle cx="216.9" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="230" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="243.1" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="256.2" cy="25" r="2.5" fill="#16a34a"/>
+          <circle cx="269.4" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="282.5" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="295.6" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="308.8" cy="115" r="2.5" fill="#16a34a"/>
+          <circle cx="321.9" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="335" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="348.1" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="361.2" cy="25" r="2.5" fill="#16a34a"/>
+          <circle cx="374.4" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="387.5" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="400.6" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="413.8" cy="115" r="2.5" fill="#16a34a"/>
+          <circle cx="426.9" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="440" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="453.1" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="466.2" cy="25" r="2.5" fill="#16a34a"/>
+          <circle cx="479.4" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="492.5" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="505.6" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="518.8" cy="115" r="2.5" fill="#16a34a"/>
+          <circle cx="531.9" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="545" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="558.1" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="571.2" cy="25" r="2.5" fill="#16a34a"/>
+          <circle cx="584.4" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="597.5" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="610.6" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="623.8" cy="115" r="2.5" fill="#16a34a"/>
+          <circle cx="636.9" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="650" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="663.1" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="676.2" cy="25" r="2.5" fill="#16a34a"/>
+          <circle cx="689.4" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="702.5" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="715.6" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="728.8" cy="115" r="2.5" fill="#16a34a"/>
+          <circle cx="741.9" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="755" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="768.1" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="781.2" cy="25" r="2.5" fill="#16a34a"/>
+          <circle cx="794.4" cy="38.2" r="2.5" fill="#16a34a"/>
+          <circle cx="807.5" cy="70" r="2.5" fill="#16a34a"/>
+          <circle cx="820.6" cy="101.8" r="2.5" fill="#16a34a"/>
+          <circle cx="833.8" cy="115" r="2.5" fill="#16a34a"/>
+          <circle cx="846.9" cy="101.8" r="2.5" fill="#16a34a"/>
+        </svg>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">f<sub>s</sub> ≥ 2 · f<sub>max</sub>. So einfach. So endgültig.</div>
+    <div class="verdict-a">Das Ohr hört bis <strong>20 kHz</strong>. 2 × 20 = 40 kHz. Die CD nimmt <code>44,1 kHz</code> — die 4,1 sind Sicherheits-Marge.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/pivot-signal-zu-byte.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Wir haben gelernt zu lesen — jetzt: wie kommt es rein?</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --done: #94a3b8;
+    --next: #d63384;
+    --bytes: #0891b2;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 32px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.7rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 36px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .pivot {
+    display: grid;
+    grid-template-columns: 200px 1fr 240px 1fr 200px;
+    gap: 8px;
+    max-width: 1200px;
+    margin: 0 auto;
+    align-items: center;
+  }
+
+  .station {
+    border: 2px solid var(--border);
+    border-radius: 12px;
+    padding: 18px 14px;
+    background: #fff;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+  .station.bytes { border-color: var(--bytes); background: #0f0f23; color: #fff; }
+  .station-tag {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+  }
+  .station.bytes .station-tag { color: #94a3b8; }
+  .station-name { font-size: 1.3rem; font-weight: 700; }
+  .station.bytes .station-name { color: #67e8f9; }
+  .station-detail { font-size: 0.85rem; color: var(--muted); }
+  .station.bytes .station-detail { color: #94a3b8; font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.4; }
+
+  .station-art { display: flex; align-items: center; justify-content: center; height: 70px; }
+  .station-art svg { width: 80%; height: 100%; }
+
+  .strang {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding: 0 6px;
+  }
+  .strang-arrow svg { display: block; width: 100%; height: 28px; }
+  .strang-label {
+    font-size: 0.95rem;
+    font-weight: 700;
+    text-align: center;
+    line-height: 1.3;
+  }
+  .strang.next .strang-label  { color: var(--next); }
+  .strang.done .strang-label  { color: var(--done); text-decoration: line-through; text-decoration-color: var(--done); text-decoration-thickness: 1.5px; }
+  .strang-tag {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    text-align: center;
+  }
+  .strang.next .strang-tag { color: var(--next); }
+  .strang.done .strang-tag { color: var(--done); }
+
+  .verdict {
+    margin-top: 28px;
+    max-width: 1100px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Wir haben gelernt zu <strong>lesen</strong>. Jetzt: wie kommt es <strong>rein</strong>?</h1>
+  <div class="sub">Die rechte Seite haben wir abgearbeitet. Die linke ist die nächste Stunde.</div>
+
+  <div class="pivot">
+
+    <div class="station">
+      <div class="station-tag">Quelle</div>
+      <div class="station-name">Welt</div>
+      <div class="station-art">
+        <svg viewBox="0 0 120 70" preserveAspectRatio="xMidYMid meet">
+          <path d="M5,35 Q15,10 25,35 T45,35 T65,35 T85,35 T105,35 T115,35"
+                stroke="#d63384" stroke-width="2.5" fill="none"/>
+          <circle cx="115" cy="35" r="3" fill="#d63384"/>
+        </svg>
+      </div>
+      <div class="station-detail">Schallwelle · Lichtwelle<br>kontinuierlich · analog</div>
+    </div>
+
+    <div class="strang next">
+      <div class="strang-tag">jetzt dran</div>
+      <div class="strang-arrow">
+        <svg viewBox="0 0 220 28" preserveAspectRatio="none">
+          <line x1="6" y1="14" x2="200" y2="14" stroke="#d63384" stroke-width="2.5"/>
+          <path d="M195,7 L208,14 L195,21" stroke="#d63384" stroke-width="2.5" fill="none"/>
+        </svg>
+      </div>
+      <div class="strang-label">Sampling + Quantisierung</div>
+    </div>
+
+    <div class="station bytes">
+      <div class="station-tag">Mitte</div>
+      <div class="station-name">Datei</div>
+      <div class="station-detail">
+        89 50 4E 47<br>
+        0D 0A 1A 0A<br>
+        00 00 00 0D
+      </div>
+    </div>
+
+    <div class="strang done">
+      <div class="strang-tag">schon durch</div>
+      <div class="strang-arrow">
+        <svg viewBox="0 0 220 28" preserveAspectRatio="none">
+          <line x1="6" y1="14" x2="200" y2="14" stroke="#94a3b8" stroke-width="2"/>
+          <path d="M195,7 L208,14 L195,21" stroke="#94a3b8" stroke-width="2" fill="none"/>
+        </svg>
+      </div>
+      <div class="strang-label">Notation · Encoding · Format</div>
+    </div>
+
+    <div class="station">
+      <div class="station-tag">Ziel</div>
+      <div class="station-name">Mensch</div>
+      <div class="station-art">
+        <svg viewBox="0 0 120 70" preserveAspectRatio="xMidYMid meet">
+          <rect x="14" y="14" width="92" height="14" rx="2" fill="#1a1a2e"/>
+          <rect x="14" y="34" width="68" height="6" rx="1" fill="#cbd5e1"/>
+          <rect x="14" y="44" width="78" height="6" rx="1" fill="#cbd5e1"/>
+          <rect x="14" y="54" width="56" height="6" rx="1" fill="#cbd5e1"/>
+        </svg>
+      </div>
+      <div class="station-detail">Text · Bild · Klang<br>Bedeutung</div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Die Datei ist die Mitte. Beide Wege führen durch sie hindurch.</div>
+    <div class="verdict-a"><strong>Rechts:</strong> aus Byte wird Bedeutung — gerade gelernt. &nbsp;&nbsp; <strong>Links:</strong> aus Welt wird Byte — jetzt.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/psychoakustik-grafik.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Psychoakustik — was MP3 weglässt</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --kept: #16a34a;
+    --tossed: #94a3b8;
+    --masker: #2563eb;
+    --threshold: #ea580c;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 30px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .chart-wrap {
+    max-width: 1180px;
+    margin: 0 auto;
+    background: #fff;
+    border: 1.5px solid var(--border);
+    border-radius: 12px;
+    padding: 16px 20px;
+  }
+  .chart-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 8px;
+  }
+  .chart-title { font-size: 1rem; font-weight: 700; }
+  .legend {
+    display: flex;
+    gap: 16px;
+    font-size: 0.78rem;
+    color: var(--muted);
+  }
+  .legend-item { display: flex; align-items: center; gap: 4px; }
+  .legend-swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    display: inline-block;
+  }
+  .legend-swatch.kept    { background: var(--kept); }
+  .legend-swatch.tossed  { background: var(--tossed); }
+  .legend-swatch.masker  { background: var(--masker); }
+  .legend-swatch.threshold {
+    background: transparent;
+    border-top: 2px dashed var(--threshold);
+    height: 8px;
+    margin-top: 5px;
+  }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1180px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Psychoakustik — was MP3 wegwirft</h1>
+  <div class="sub">Ein lauter Ton macht leise Nachbarn <strong>unhörbar</strong>. Was nicht hörbar ist, muss man nicht speichern.</div>
+
+  <div class="chart-wrap">
+    <div class="chart-head">
+      <div class="chart-title">Lautstärke (dB SPL) über Frequenz (Hz, logarithmisch)</div>
+      <div class="legend">
+        <span class="legend-item"><span class="legend-swatch masker"></span>lauter Ton (Masker)</span>
+        <span class="legend-item"><span class="legend-swatch kept"></span>hörbar · bleibt</span>
+        <span class="legend-item"><span class="legend-swatch tossed"></span>maskiert · raus</span>
+        <span class="legend-item"><span class="legend-swatch threshold"></span>Hörschwelle</span>
+      </div>
+    </div>
+
+    <svg viewBox="0 0 1100 380" width="100%" height="380">
+      <line x1="80" y1="340" x2="1060" y2="340" stroke="#1a1a2e" stroke-width="1.5"/>
+      <line x1="80" y1="20"  x2="80"   y2="340" stroke="#1a1a2e" stroke-width="1.5"/>
+
+      <text x="20" y="30"  font-size="11" fill="#6b7280">dB</text>
+      <text x="40" y="50"  font-size="10" fill="#6b7280" text-anchor="end">100</text>
+      <text x="40" y="125" font-size="10" fill="#6b7280" text-anchor="end">75</text>
+      <text x="40" y="200" font-size="10" fill="#6b7280" text-anchor="end">50</text>
+      <text x="40" y="275" font-size="10" fill="#6b7280" text-anchor="end">25</text>
+      <text x="40" y="345" font-size="10" fill="#6b7280" text-anchor="end">0</text>
+
+      <line x1="75" y1="50"  x2="80" y2="50"  stroke="#1a1a2e"/>
+      <line x1="75" y1="125" x2="80" y2="125" stroke="#1a1a2e"/>
+      <line x1="75" y1="200" x2="80" y2="200" stroke="#1a1a2e"/>
+      <line x1="75" y1="275" x2="80" y2="275" stroke="#1a1a2e"/>
+
+      <text x="100"  y="360" font-size="10" fill="#6b7280">20</text>
+      <text x="260"  y="360" font-size="10" fill="#6b7280">100</text>
+      <text x="420"  y="360" font-size="10" fill="#6b7280">500</text>
+      <text x="580"  y="360" font-size="10" fill="#6b7280">1k</text>
+      <text x="740"  y="360" font-size="10" fill="#6b7280">5k</text>
+      <text x="900"  y="360" font-size="10" fill="#6b7280">10k</text>
+      <text x="1040" y="360" font-size="10" fill="#6b7280">20k</text>
+      <text x="540" y="378" font-size="11" fill="#6b7280" text-anchor="middle">Frequenz [Hz]</text>
+
+      <path d="M100,80 Q170,130 260,200 Q350,290 420,310 Q500,335 580,330 Q670,310 740,295 Q820,280 900,250 Q970,200 1040,80"
+            stroke="#ea580c" stroke-width="2" stroke-dasharray="5,5" fill="none"/>
+
+      <path d="M460,340 L460,210 Q480,165 580,80 Q680,165 700,210 L700,340 Z"
+            fill="#2563eb" opacity="0.15"/>
+      <path d="M460,340 L460,210 Q480,165 580,80 Q680,165 700,210 L700,340"
+            stroke="#2563eb" stroke-width="2" fill="none" stroke-dasharray="2,3"/>
+
+      <rect x="572" y="80"  width="16" height="260" fill="#2563eb"/>
+
+      <circle cx="240" cy="270" r="6" fill="#16a34a"/>
+      <text x="240" y="260" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
+
+      <circle cx="420" cy="240" r="6" fill="#16a34a"/>
+      <text x="420" y="230" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
+
+      <circle cx="510" cy="180" r="6" fill="#94a3b8"/>
+      <text x="510" y="170" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
+
+      <circle cx="660" cy="200" r="6" fill="#94a3b8"/>
+      <text x="660" y="190" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
+
+      <circle cx="640" cy="155" r="6" fill="#94a3b8"/>
+      <text x="640" y="145" font-size="10" fill="#94a3b8" text-anchor="middle">raus</text>
+
+      <circle cx="860" cy="220" r="6" fill="#16a34a"/>
+      <text x="860" y="210" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
+
+      <circle cx="960" cy="170" r="6" fill="#16a34a"/>
+      <text x="960" y="160" font-size="10" fill="#16a34a" text-anchor="middle" font-weight="700">bleibt</text>
+
+      <text x="595" y="76" font-size="11" fill="#2563eb" font-weight="700">1 kHz · 90 dB · "Masker"</text>
+      <text x="780" y="105" font-size="11" fill="#ea580c" font-weight="700">Hörschwelle (in Ruhe)</text>
+      <text x="540" y="160" font-size="11" fill="#2563eb" font-weight="700" text-anchor="middle">Maskierungs-Bereich</text>
+    </svg>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">MP3 kodiert nur, was über der <strong>kombinierten Schwelle</strong> liegt.</div>
+    <div class="verdict-a">Alles unterhalb wird weggeworfen — das Ohr hört es ohnehin nicht. So spart MP3 typischerweise <strong>~90 % der Daten</strong>, ohne dass der Mensch im Alltag etwas vermisst.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/psychovisualitaet-grafik.html

@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Psychovisualität — Luminanz vor Chrominanz</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --full: #2563eb;
+    --reduced: #7c3aed;
+    --y: #1a1a2e;
+    --cb: #2563eb;
+    --cr: #ef4444;
+    --bar-bg: #e2e8f0;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 30px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .compare {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+
+  .col {
+    border: 2px solid;
+    border-radius: 12px;
+    padding: 16px 20px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .col.full    { border-color: var(--full); }
+  .col.reduced { border-color: var(--reduced); }
+
+  .col-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .col-tag {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+  }
+  .col-name { font-size: 1.25rem; font-weight: 700; }
+  .col.full .col-name    { color: var(--full); }
+  .col.reduced .col-name { color: var(--reduced); }
+  .col-format {
+    font-family: ui-monospace, monospace;
+    font-size: 0.82rem;
+    color: var(--muted);
+  }
+
+  .preview {
+    border-radius: 8px;
+    overflow: hidden;
+    border: 1px solid var(--border);
+  }
+  .preview svg { display: block; }
+
+  .channels {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .channel { display: grid; grid-template-columns: 90px 1fr 60px; gap: 8px; align-items: center; font-size: 0.85rem; }
+  .channel-label {
+    font-family: ui-monospace, monospace;
+    font-weight: 700;
+  }
+  .channel-bar { height: 14px; background: var(--bar-bg); border-radius: 3px; overflow: hidden; }
+  .channel-bar .fill { height: 100%; border-radius: 3px; }
+  .channel-bar .fill.y  { background: var(--y); }
+  .channel-bar .fill.cb { background: var(--cb); }
+  .channel-bar .fill.cr { background: var(--cr); }
+  .channel-pct {
+    font-family: ui-monospace, monospace;
+    font-size: 0.78rem;
+    color: var(--muted);
+    text-align: right;
+  }
+
+  .summary-line {
+    display: flex;
+    justify-content: space-between;
+    background: var(--soft);
+    border-radius: 6px;
+    padding: 6px 12px;
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+    color: var(--dark);
+  }
+  .summary-line strong { color: var(--hl); }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1180px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Psychovisualität — Luminanz vor Chrominanz</h1>
+  <div class="sub">Das Auge sieht <strong>Helligkeit</strong> scharf. <strong>Farbe</strong> darf grob bleiben — und das Bild sieht trotzdem identisch aus.</div>
+
+  <div class="compare">
+
+    <div class="col full">
+      <div class="col-head">
+        <span class="col-name">Ohne Subsampling</span>
+        <span class="col-tag">4:4:4</span>
+      </div>
+      <div class="col-format">jedes Pixel speichert Y · Cb · Cr in voller Auflösung</div>
+
+      <svg class="preview" viewBox="0 0 320 130" preserveAspectRatio="xMidYMid slice">
+        <defs>
+          <linearGradient id="full-sky" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#fde68a"/>
+            <stop offset="55%" stop-color="#fb923c"/>
+            <stop offset="100%" stop-color="#7c3aed"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="320" height="130" fill="url(#full-sky)"/>
+        <circle cx="230" cy="50" r="22" fill="#fef3c7"/>
+        <path d="M0,90 L40,75 L90,87 L140,68 L190,82 L240,66 L290,80 L320,72 L320,130 L0,130 Z" fill="#1e1b4b"/>
+        <path d="M0,108 L60,100 L120,108 L180,98 L240,106 L300,98 L320,103 L320,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
+      </svg>
+
+      <div class="channels">
+        <div class="channel">
+          <span class="channel-label">Y</span>
+          <div class="channel-bar"><div class="fill y" style="width:100%"></div></div>
+          <span class="channel-pct">100 %</span>
+        </div>
+        <div class="channel">
+          <span class="channel-label">Cb</span>
+          <div class="channel-bar"><div class="fill cb" style="width:100%"></div></div>
+          <span class="channel-pct">100 %</span>
+        </div>
+        <div class="channel">
+          <span class="channel-label">Cr</span>
+          <div class="channel-bar"><div class="fill cr" style="width:100%"></div></div>
+          <span class="channel-pct">100 %</span>
+        </div>
+      </div>
+
+      <div class="summary-line">
+        <span>Datenmenge:</span>
+        <span><strong>100 %</strong></span>
+      </div>
+    </div>
+
+    <div class="col reduced">
+      <div class="col-head">
+        <span class="col-name">JPEG · H.264 Standard</span>
+        <span class="col-tag">4:2:0</span>
+      </div>
+      <div class="col-format">Y voll · Cb &amp; Cr nur in 2×2-Pixel-Blöcken</div>
+
+      <svg class="preview" viewBox="0 0 320 130" preserveAspectRatio="xMidYMid slice">
+        <defs>
+          <linearGradient id="red-sky" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#fde68a"/>
+            <stop offset="55%" stop-color="#fb923c"/>
+            <stop offset="100%" stop-color="#7c3aed"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="320" height="130" fill="url(#red-sky)"/>
+        <circle cx="230" cy="50" r="22" fill="#fef3c7"/>
+        <path d="M0,90 L40,75 L90,87 L140,68 L190,82 L240,66 L290,80 L320,72 L320,130 L0,130 Z" fill="#1e1b4b"/>
+        <path d="M0,108 L60,100 L120,108 L180,98 L240,106 L300,98 L320,103 L320,130 L0,130 Z" fill="#0f172a" opacity="0.7"/>
+      </svg>
+
+      <div class="channels">
+        <div class="channel">
+          <span class="channel-label">Y</span>
+          <div class="channel-bar"><div class="fill y" style="width:100%"></div></div>
+          <span class="channel-pct">100 %</span>
+        </div>
+        <div class="channel">
+          <span class="channel-label">Cb</span>
+          <div class="channel-bar"><div class="fill cb" style="width:25%"></div></div>
+          <span class="channel-pct">25 %</span>
+        </div>
+        <div class="channel">
+          <span class="channel-label">Cr</span>
+          <div class="channel-bar"><div class="fill cr" style="width:25%"></div></div>
+          <span class="channel-pct">25 %</span>
+        </div>
+      </div>
+
+      <div class="summary-line">
+        <span>Datenmenge:</span>
+        <span><strong>50 %</strong></span>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Halbe Datenmenge. Identisches Bild — für dein Auge.</div>
+    <div class="verdict-a">JPEG, H.264, H.265, WebP — alle reduzieren die Farb-Auflösung auf <strong>ein Viertel</strong>. Das ist Psychovisualität: was wir nicht scharf sehen, muss man nicht scharf speichern.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/raster-vs-vektor.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Raster vs. Vektor — Pixel oder Anweisung?</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --raster: #ea580c;
+    --vektor: #2563eb;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 30px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .pair {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+
+  .col {
+    border: 2px solid;
+    border-radius: 12px;
+    padding: 16px 18px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .col.raster { border-color: var(--raster); }
+  .col.vektor { border-color: var(--vektor); }
+
+  .col-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .col-name { font-size: 1.3rem; font-weight: 700; }
+  .col.raster .col-name { color: var(--raster); }
+  .col.vektor .col-name { color: var(--vektor); }
+  .col-tag {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+  }
+  .col-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
+
+  .views {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+  .view { display: flex; flex-direction: column; gap: 4px; }
+  .view-label {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted);
+    text-align: center;
+  }
+  .view-canvas {
+    background: var(--soft);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    aspect-ratio: 1.4;
+    overflow: hidden;
+  }
+  .view-canvas svg { display: block; width: 100%; height: 100%; }
+
+  .stats {
+    background: var(--soft);
+    border-radius: 6px;
+    padding: 8px 12px;
+    font-family: ui-monospace, monospace;
+    font-size: 0.82rem;
+    color: var(--dark);
+    line-height: 1.5;
+  }
+  .stats .key { color: var(--muted); }
+  .stats .val { font-weight: 700; }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1180px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Raster vs. Vektor — Pixel oder Anweisung?</h1>
+  <div class="sub">Beide zeigen ein Häkchen. Wenn man <strong>reinzoomt</strong>, kommt die Wahrheit raus.</div>
+
+  <div class="pair">
+
+    <div class="col raster">
+      <div class="col-head">
+        <span class="col-name">Raster</span>
+        <span class="col-tag">PNG · JPEG · GIF</span>
+      </div>
+      <div class="col-desc">Ein Gitter aus Pixel-Farbwerten. Jede Position ist festgelegt.</div>
+
+      <div class="views">
+        <div class="view">
+          <div class="view-label">Original (32 × 22 px)</div>
+          <div class="view-canvas">
+            <svg viewBox="0 0 320 220" preserveAspectRatio="xMidYMid meet">
+              <rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
+              <g shape-rendering="crispEdges">
+                <rect x="20"  y="120" width="20" height="20" fill="#ea580c"/>
+                <rect x="40"  y="140" width="20" height="20" fill="#ea580c"/>
+                <rect x="60"  y="160" width="20" height="20" fill="#ea580c"/>
+                <rect x="80"  y="180" width="20" height="20" fill="#ea580c"/>
+                <rect x="100" y="160" width="20" height="20" fill="#ea580c"/>
+                <rect x="120" y="140" width="20" height="20" fill="#ea580c"/>
+                <rect x="140" y="120" width="20" height="20" fill="#ea580c"/>
+                <rect x="160" y="100" width="20" height="20" fill="#ea580c"/>
+                <rect x="180" y="80"  width="20" height="20" fill="#ea580c"/>
+                <rect x="200" y="60"  width="20" height="20" fill="#ea580c"/>
+                <rect x="220" y="40"  width="20" height="20" fill="#ea580c"/>
+                <rect x="240" y="20"  width="20" height="20" fill="#ea580c"/>
+              </g>
+            </svg>
+          </div>
+        </div>
+        <div class="view">
+          <div class="view-label">4× Zoom</div>
+          <div class="view-canvas">
+            <svg viewBox="80 60 160 160" preserveAspectRatio="xMidYMid meet">
+              <rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
+              <g shape-rendering="crispEdges">
+                <rect x="20"  y="120" width="20" height="20" fill="#ea580c"/>
+                <rect x="40"  y="140" width="20" height="20" fill="#ea580c"/>
+                <rect x="60"  y="160" width="20" height="20" fill="#ea580c"/>
+                <rect x="80"  y="180" width="20" height="20" fill="#ea580c"/>
+                <rect x="100" y="160" width="20" height="20" fill="#ea580c"/>
+                <rect x="120" y="140" width="20" height="20" fill="#ea580c"/>
+                <rect x="140" y="120" width="20" height="20" fill="#ea580c"/>
+                <rect x="160" y="100" width="20" height="20" fill="#ea580c"/>
+                <rect x="180" y="80"  width="20" height="20" fill="#ea580c"/>
+                <rect x="200" y="60"  width="20" height="20" fill="#ea580c"/>
+                <rect x="220" y="40"  width="20" height="20" fill="#ea580c"/>
+                <rect x="240" y="20"  width="20" height="20" fill="#ea580c"/>
+              </g>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="stats">
+        <div><span class="key">Speicher:</span> <span class="val">32 × 22 × 3 Byte = 2 112 Byte</span></div>
+        <div><span class="key">Beim Zoom:</span> <span class="val">pixelig — Information ist erschöpft</span></div>
+      </div>
+    </div>
+
+    <div class="col vektor">
+      <div class="col-head">
+        <span class="col-name">Vektor</span>
+        <span class="col-tag">SVG · PDF · Schriftarten</span>
+      </div>
+      <div class="col-desc">Mathematische Anweisungen: <code style="background:#0f0f23;color:#5fb3e4;padding:0 4px;border-radius:3px;">polyline 30,110 → 90,170 → 250,30</code></div>
+
+      <div class="views">
+        <div class="view">
+          <div class="view-label">Original</div>
+          <div class="view-canvas">
+            <svg viewBox="0 0 320 220" preserveAspectRatio="xMidYMid meet">
+              <rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
+              <polyline points="30,130 90,190 270,30" stroke="#2563eb" stroke-width="14" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        </div>
+        <div class="view">
+          <div class="view-label">4× Zoom</div>
+          <div class="view-canvas">
+            <svg viewBox="80 60 160 160" preserveAspectRatio="xMidYMid meet">
+              <rect x="0" y="0" width="320" height="220" fill="#f8fafc"/>
+              <polyline points="30,130 90,190 270,30" stroke="#2563eb" stroke-width="14" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="stats">
+        <div><span class="key">Speicher:</span> <span class="val">3 Punkte + Strichbreite = ~80 Byte</span></div>
+        <div><span class="key">Beim Zoom:</span> <span class="val">scharf — wird neu berechnet</span></div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Pixel sind festgenagelt. Vektoren werden bei jedem Zoom <strong>neu berechnet</strong>.</div>
+    <div class="verdict-a">Faustregel: <strong>Foto → Raster</strong> (kann nicht „neu berechnet" werden). <strong>Logo, Icon, Schrift → Vektor</strong> (skalierbar ohne Verlust).</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/summary-kap02.html

@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Was wir über Kompression gelernt haben</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --lossless: #16a34a;
+    --lossy: #ef4444;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 30px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .compare {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 22px;
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+
+  .col {
+    border: 2px solid;
+    border-radius: 12px;
+    padding: 18px 22px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .col.lossless { border-color: var(--lossless); }
+  .col.lossy    { border-color: var(--lossy); }
+
+  .col-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .col-name { font-size: 1.4rem; font-weight: 700; }
+  .col.lossless .col-name { color: var(--lossless); }
+  .col.lossy    .col-name { color: var(--lossy); }
+  .col-tag {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+  }
+
+  .row { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; }
+  .row-key {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    padding-top: 3px;
+  }
+  .row-val { font-size: 0.92rem; line-height: 1.5; color: var(--dark); }
+  .row-val strong {
+    font-family: ui-monospace, monospace;
+    background: var(--soft);
+    padding: 1px 6px;
+    border-radius: 4px;
+  }
+
+  .matrix {
+    margin-top: 22px;
+    max-width: 1180px;
+    margin-left: auto;
+    margin-right: auto;
+    background: var(--soft);
+    border: 1.5px solid var(--border);
+    border-radius: 10px;
+    padding: 14px 22px;
+  }
+  .matrix-head {
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted);
+    margin-bottom: 8px;
+  }
+  .matrix-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 8px 16px;
+    font-size: 0.88rem;
+  }
+  .matrix-grid .scenario { font-weight: 700; color: var(--dark); }
+  .matrix-grid .answer {
+    font-family: ui-monospace, monospace;
+    color: var(--dark);
+  }
+  .matrix-grid .answer.lossless { color: var(--lossless); font-weight: 700; }
+  .matrix-grid .answer.lossy    { color: var(--lossy);    font-weight: 700; }
+
+  .verdict {
+    margin-top: 18px;
+    max-width: 1180px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Was wir über Kompression gelernt haben</h1>
+  <div class="sub">Zwei fundamental verschiedene Wege, dasselbe Ziel: <strong>Daten kleiner machen.</strong></div>
+
+  <div class="compare">
+
+    <div class="col lossless">
+      <div class="col-head">
+        <span class="col-name">Verlustfrei</span>
+        <span class="col-tag">Lossless</span>
+      </div>
+      <div class="row">
+        <div class="row-key">Was passiert</div>
+        <div class="row-val">Redundanz raus — Wiederholungen kürzer schreiben</div>
+        <div class="row-key">Umkehrbar</div>
+        <div class="row-val">Ja. Aus der komprimierten Datei wird das <strong>exakte</strong> Original wieder.</div>
+        <div class="row-key">Verfahren</div>
+        <div class="row-val">RLE, Huffman, Deflate, LZ77/LZ78</div>
+        <div class="row-key">Formate</div>
+        <div class="row-val">ZIP · PNG · FLAC · TIFF · RAW</div>
+        <div class="row-key">Faktor</div>
+        <div class="row-val">2× – 5× (typisch)</div>
+      </div>
+    </div>
+
+    <div class="col lossy">
+      <div class="col-head">
+        <span class="col-name">Verlustbehaftet</span>
+        <span class="col-tag">Lossy</span>
+      </div>
+      <div class="row">
+        <div class="row-key">Was passiert</div>
+        <div class="row-val">Irrelevanz raus — was Mensch nicht wahrnimmt, wird weggeworfen</div>
+        <div class="row-key">Umkehrbar</div>
+        <div class="row-val">Nein. Einmal weg, für immer weg.</div>
+        <div class="row-key">Trick</div>
+        <div class="row-val">Psychoakustik (MP3) · Psychovisualität (JPEG)</div>
+        <div class="row-key">Formate</div>
+        <div class="row-val">MP3 · AAC · JPEG · WebP · H.264 · H.265</div>
+        <div class="row-key">Faktor</div>
+        <div class="row-val">10× – 100× (typisch)</div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="matrix">
+    <div class="matrix-head">Entscheidungsmatrix — wann nehme ich welches?</div>
+    <div class="matrix-grid">
+      <div class="scenario">Foto-Archiv (RAW)</div>
+      <div class="answer lossless">Lossless</div>
+      <div class="scenario">Spotify-Stream</div>
+      <div class="answer lossy">Lossy</div>
+
+      <div class="scenario">Code-Repository</div>
+      <div class="answer lossless">Lossless (ZIP)</div>
+      <div class="scenario">Instagram-Foto</div>
+      <div class="answer lossy">Lossy (JPEG)</div>
+
+      <div class="scenario">Studio-Master-Track</div>
+      <div class="answer lossless">Lossless (FLAC)</div>
+      <div class="scenario">YouTube-Video</div>
+      <div class="answer lossy">Lossy (H.264)</div>
+    </div>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Lossless für Archiv und Code. Lossy für Streaming und Anzeige.</div>
+    <div class="verdict-a">Faustregel: <strong>Werkzeug</strong> (du arbeitest noch dran) → Lossless. <strong>Konsum</strong> (du schaust/hörst nur) → Lossy.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/summary-organizer.html

@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Was wir in 90 Minuten gelernt haben</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --left: #d63384;
+    --right: #0891b2;
+    --bytes: #0891b2;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 30px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 28px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .recap {
+    display: grid;
+    grid-template-columns: 160px 1fr 200px 1fr 160px;
+    gap: 10px;
+    max-width: 1200px;
+    margin: 0 auto;
+    align-items: center;
+  }
+
+  .station {
+    border: 2px solid var(--border);
+    border-radius: 10px;
+    padding: 18px 12px;
+    background: #fff;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+  }
+  .station.bytes { border-color: var(--bytes); background: #0f0f23; color: #fff; }
+  .station-tag {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--muted);
+  }
+  .station.bytes .station-tag { color: #94a3b8; }
+  .station-name { font-size: 1.3rem; font-weight: 700; }
+  .station.bytes .station-name { color: #67e8f9; }
+  .station-detail { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
+  .station.bytes .station-detail { color: #94a3b8; font-family: ui-monospace, monospace; font-size: 0.76rem; line-height: 1.35; }
+
+  .strang {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    padding: 0 6px;
+  }
+  .strang-arrow { text-align: center; }
+  .strang-arrow svg { width: 100%; height: 18px; }
+  .strang-title {
+    font-size: 0.92rem;
+    font-weight: 700;
+    text-align: center;
+    line-height: 1.3;
+  }
+  .strang.left  .strang-title { color: var(--left); }
+  .strang.right .strang-title { color: var(--right); }
+  .strang-list {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    background: var(--soft);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 8px 12px;
+  }
+  .strang-list li {
+    font-size: 0.82rem;
+    color: var(--dark);
+    padding-left: 12px;
+    position: relative;
+    line-height: 1.4;
+  }
+  .strang-list li::before {
+    content: "·";
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-weight: 700;
+  }
+  .strang.left .strang-list li::before  { color: var(--left); }
+  .strang.right .strang-list li::before { color: var(--right); }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.95rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>Was wir in 90 Minuten gelernt haben</h1>
+  <div class="sub">Beide Wege gehen durch <strong>dieselbe Mitte</strong>. Du kennst jetzt alle Stationen.</div>
+
+  <div class="recap">
+
+    <div class="station">
+      <div class="station-tag">Quelle</div>
+      <div class="station-name">Welt</div>
+      <div class="station-detail">Schallwelle<br>Lichtwelle<br>kontinuierlich · analog</div>
+    </div>
+
+    <div class="strang left">
+      <div class="strang-arrow">
+        <svg viewBox="0 0 200 18" preserveAspectRatio="none">
+          <line x1="6" y1="9" x2="180" y2="9" stroke="#d63384" stroke-width="2"/>
+          <path d="M174,3 L188,9 L174,15" stroke="#d63384" stroke-width="2" fill="none"/>
+        </svg>
+      </div>
+      <div class="strang-title">Welt → Byte</div>
+      <ul class="strang-list">
+        <li>Sampling-Rate</li>
+        <li>Bittiefe · Quantisierung</li>
+        <li>Datenrate-Formel</li>
+        <li>Nyquist · 2·f<sub>max</sub></li>
+        <li>Aliasing &amp; Moiré</li>
+        <li>44,1 kHz = 2·20 kHz + Marge</li>
+      </ul>
+    </div>
+
+    <div class="station bytes">
+      <div class="station-tag">Mitte</div>
+      <div class="station-name">Datei</div>
+      <div class="station-detail">
+        Byte-Strom<br>
+        89 50 4E 47<br>
+        nichts als Zahlen
+      </div>
+    </div>
+
+    <div class="strang right">
+      <div class="strang-arrow">
+        <svg viewBox="0 0 200 18" preserveAspectRatio="none">
+          <line x1="6" y1="9" x2="180" y2="9" stroke="#0891b2" stroke-width="2"/>
+          <path d="M174,3 L188,9 L174,15" stroke="#0891b2" stroke-width="2" fill="none"/>
+        </svg>
+      </div>
+      <div class="strang-title">Byte → Bedeutung</div>
+      <ul class="strang-list">
+        <li>Bit · Byte · Hex</li>
+        <li>8 Bit = 256 Zustände</li>
+        <li>ASCII · UTF-8</li>
+        <li>Magic Number</li>
+        <li>KB vs KiB</li>
+        <li>Hex im Alltag (CSS, MAC)</li>
+      </ul>
+    </div>
+
+    <div class="station">
+      <div class="station-tag">Ziel</div>
+      <div class="station-name">Mensch</div>
+      <div class="station-detail">Text · Bild · Klang<br>Bedeutung<br>verstehen</div>
+    </div>
+
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Eine Datei ist kein Mysterium. Es ist eine <strong>Reihe von Zahlen</strong> mit zwei Geschichten dran.</div>
+    <div class="verdict-a">Eine Geschichte erzählt, <strong>woher</strong> die Zahlen kommen. Die andere, <strong>was</strong> sie bedeuten. Beide kennst du jetzt.</div>
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/usb-c-drei-achsen.html

@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>USB-C — drei Achsen, eine Verwirrung</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --stecker: #2563eb;
+    --kabel: #ea580c;
+    --protokoll: #7c3aed;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .axes {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 18px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .axis {
+    border: 2px solid;
+    border-radius: 12px;
+    padding: 14px 16px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .axis.stecker    { border-color: var(--stecker); }
+  .axis.kabel      { border-color: var(--kabel); }
+  .axis.protokoll  { border-color: var(--protokoll); }
+
+  .axis-head { display: flex; justify-content: space-between; align-items: baseline; }
+  .axis-num {
+    font-family: ui-monospace, monospace;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--muted);
+  }
+  .axis-name { font-size: 1.15rem; font-weight: 700; }
+  .axis.stecker .axis-name   { color: var(--stecker); }
+  .axis.kabel .axis-name     { color: var(--kabel); }
+  .axis.protokoll .axis-name { color: var(--protokoll); }
+  .axis-tagline {
+    font-size: 0.82rem;
+    color: var(--muted);
+    line-height: 1.4;
+  }
+  .axis-tagline strong { color: var(--dark); }
+
+  .icon {
+    background: var(--soft);
+    border-radius: 6px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .icon svg { display: block; }
+
+  .options {
+    font-size: 0.82rem;
+    line-height: 1.6;
+    color: var(--dark);
+    background: var(--soft);
+    border-radius: 6px;
+    padding: 10px 14px;
+  }
+  .options strong {
+    font-family: ui-monospace, monospace;
+    font-size: 0.78rem;
+    padding: 1px 5px;
+    border-radius: 3px;
+    background: #fff;
+    border: 1px solid var(--border);
+  }
+  .axis.stecker .options strong   { color: var(--stecker); }
+  .axis.kabel .options strong     { color: var(--kabel); }
+  .axis.protokoll .options strong { color: var(--protokoll); }
+
+  .scenario {
+    margin-top: 22px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    background: var(--soft);
+    border: 1.5px solid var(--border);
+    border-radius: 10px;
+    padding: 14px 22px;
+  }
+  .scenario-head {
+    font-size: 0.74rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--muted);
+    margin-bottom: 6px;
+  }
+  .scenario-body {
+    font-size: 0.92rem;
+    line-height: 1.5;
+  }
+  .scenario-body code {
+    font-family: ui-monospace, monospace;
+    background: #fff;
+    padding: 1px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--border);
+  }
+
+  .verdict {
+    margin-top: 16px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.05rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>USB-C — drei Achsen, eine Verwirrung</h1>
+  <div class="sub">Derselbe Stecker. <strong>Aber Kabel ≠ Kabel.</strong> <strong>Protokoll ≠ Protokoll.</strong></div>
+
+  <div class="axes">
+
+    <div class="axis stecker">
+      <div class="axis-head">
+        <span class="axis-name">Stecker</span>
+        <span class="axis-num">1 · MECHANIK</span>
+      </div>
+      <div class="axis-tagline">Die <strong>Form</strong>. Was reinsteckt, oval, beidseitig.</div>
+      <div class="icon">
+        <svg viewBox="0 0 120 30" width="140" height="40">
+          <rect x="6" y="9" width="108" height="12" rx="6" fill="#2563eb" opacity="0.18" stroke="#2563eb" stroke-width="2"/>
+          <rect x="22" y="13" width="76" height="4" rx="2" fill="#2563eb"/>
+        </svg>
+      </div>
+      <div class="options">
+        Nur eine Sorte: <strong>USB-C</strong> (auch USB Type-C). 24 Pins. Beidseitig steckbar. Andere Stecker-Typen: USB-A, USB-B, Micro-USB — nicht mit C kompatibel.
+      </div>
+    </div>
+
+    <div class="axis kabel">
+      <div class="axis-head">
+        <span class="axis-name">Kabel</span>
+        <span class="axis-num">2 · WAS DURCH-PASST</span>
+      </div>
+      <div class="axis-tagline">Die <strong>Adern</strong>. Was elektrisch transportiert werden kann.</div>
+      <div class="icon">
+        <svg viewBox="0 0 160 30" width="180" height="40">
+          <path d="M10,15 L150,15" stroke="#ea580c" stroke-width="3"/>
+          <rect x="2" y="8" width="14" height="14" rx="3" fill="#ea580c" opacity="0.4" stroke="#ea580c"/>
+          <rect x="144" y="8" width="14" height="14" rx="3" fill="#ea580c" opacity="0.4" stroke="#ea580c"/>
+        </svg>
+      </div>
+      <div class="options">
+        <strong>Charge-only</strong> · billig, nur Strom · 5 W<br>
+        <strong>USB 2.0</strong> · 480 Mbit/s · 60 W (3 A)<br>
+        <strong>USB 3.2 Gen 2</strong> · 10 Gbit/s · 100 W<br>
+        <strong>Thunderbolt 4</strong> · 40 Gbit/s · 240 W
+      </div>
+    </div>
+
+    <div class="axis protokoll">
+      <div class="axis-head">
+        <span class="axis-name">Protokoll</span>
+        <span class="axis-num">3 · WAS LÄUFT</span>
+      </div>
+      <div class="axis-tagline">Die <strong>Sprache</strong>. Was die zwei Geräte miteinander reden.</div>
+      <div class="icon">
+        <svg viewBox="0 0 160 30" width="180" height="40">
+          <circle cx="20" cy="15" r="6" fill="#7c3aed"/>
+          <path d="M30,15 L130,15" stroke="#7c3aed" stroke-width="2" stroke-dasharray="6,4"/>
+          <circle cx="140" cy="15" r="6" fill="#7c3aed"/>
+        </svg>
+      </div>
+      <div class="options">
+        <strong>USB-PD</strong> · Power Delivery (Laden)<br>
+        <strong>USB 2/3/4</strong> · Datenübertragung<br>
+        <strong>Thunderbolt 3/4</strong> · Daten + Display<br>
+        <strong>DisplayPort Alt</strong> · Monitor anschließen<br>
+        <strong>HDMI Alt</strong> · weiter HDMI rausführen
+      </div>
+    </div>
+
+  </div>
+
+  <div class="scenario">
+    <div class="scenario-head">Konkret: warum lädt der Laptop nicht?</div>
+    <div class="scenario-body">
+      USB-C-Port am Laptop ist da (<strong>Stecker</strong> stimmt). Aber der Aldi-Kabel ist <code>Charge-only</code> mit <code>5 W</code> (<strong>Kabel</strong> kann nicht genug Strom liefern). Oder der Port am Laptop unterstützt nur <code>USB-PD</code> mit 100 W, das Netzteil meldet aber nur 65 W (<strong>Protokoll</strong>-Handshake scheitert). <em>Eine der drei Achsen passt nicht.</em>
+    </div>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Drei Achsen. Drei unabhängige Fragen. Drei Gründe, warum's nicht funktioniert.</div>
+    <div class="verdict-a">Beim nächsten „USB-C-Kabel funktioniert nicht": <strong>Stecker passt → Kabel-Spec checken → Protokoll-Support prüfen.</strong> In dieser Reihenfolge.</div>
+  </div>
+</body>
+</html>

slides/223015b/klausurfragen.md

@@ -57,7 +57,7 @@ section.disable {
 # Klausurfragen – 223015b
 **Dateiformate, Schnittstellen, Speichermedien · HdM Stuttgart · M. Czechowski**
 
-<small>Stand: 01.02.2026</small>
+<small>Stand: 24.06.2026</small>
 
 ---
 
@@ -79,8 +79,6 @@ section.disable {
 
 ---
 
-<!-- _class: disable -->
-
 ### J1 – Was bedeutet „komprimieren"?
 **Thema:** Grundbegriffe – Kompression
 **Punkte:** 1
@@ -89,7 +87,7 @@ section.disable {
 Was bedeutet es, eine Datei zu komprimieren?
 
 - [ ] Die Datei wird auf einem anderen Speichermedium gesichert.
-- [x] **Die Dateigröße wird durch Entfernung oder Vereinfachung von Daten reduziert.** ✅
+- [x] **Die Dateigröße wird durch Entfernung oder Vereinfachung von Daten reduziert.**
 - [ ] Die Datei wird verschlüsselt, damit sie kleiner aussieht.
 - [ ] Die Datei wird in ein anderen Format umgewandelt, ohne dass sich die Größe ändert.
 
@@ -102,7 +100,7 @@ Was bedeutet es, eine Datei zu komprimieren?
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Format zu, ob es verlustfrei oder verlustbehaftet komprimiert.
+Ordnen Sie jedem Format zu, ob es verlustfrei oder verlustbehaftet komprimiert.
 
 | Format | Kompressions-Typ |
 |---|---|
@@ -117,19 +115,17 @@ Ordne jedem Format zu, ob es verlustfrei oder verlustbehaftet komprimiert.
 
 ---
 
-### J3 – Verlustfrei vs. verlustbehaftet: Erkläre
+### J3 – Verlustfrei vs. verlustbehaftet: Erklären Sie
 **Thema:** Grundbegriffe – Konzept
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre den Unterschied zwischen verlustfreier und verlustbehafteter Kompression. Nenne je ein konkretes Beispiel und erkläre, warum man in unterschiedlichen Situationen unterschiedliche Kompressionstypen wählt.
+Erklären Sie den Unterschied zwischen verlustfreier und verlustbehafteter Kompression. Nennen Sie je ein konkretes Beispiel und erklären Sie, warum man in unterschiedlichen Situationen unterschiedliche Kompressionstypen wählt.
 
 > **Musterlösung:** Verlustfrei: Alle Originaldaten bleiben erhalten – die Datei kann perfekt rekonstruiert werden (z. B. ZIP, PNG). Verlustbehaftet: Daten werden dauerhaft weggeworfen – die Datei kann nicht mehr perfekt hergestellt werden (z. B. JPEG, MP3). Wahl: Fotos fürs Web → JPEG (verlustbehaftet), weil der Unterschied kaum sichtbar ist und die Datei deutlich kleiner wird. Archivierung oder Grafiken → PNG (verlustfrei), weil Qualitätsverlust inakzeptabel wäre.
 
 ---
 
-<!-- _class: disable -->
-
 ### J4 – Was bedeutet „skalieren"?
 **Thema:** Grundbegriffe – Skalierung
 **Punkte:** 1
@@ -138,7 +134,7 @@ Erkläre den Unterschied zwischen verlustfreier und verlustbehafteter Kompressio
 Was passiert, wenn ein Rasterbild vergrößert wird?
 
 - [ ] Neue Pixel werden aus dem Dateiformat automatisch geladen.
-- [x] **Fehlende Pixel müssen durch Interpolation „erfunden" werden – es entsteht keine neue Information.** ✅
+- [x] **Fehlende Pixel müssen durch Interpolation „erfunden" werden – es entsteht keine neue Information.**
 - [ ] Das Bild wird verlustfrei größer, weil Pixel automatisch duplifiziert werden.
 - [ ] Die Dateigröße bleibt gleich, nur der Zoom im Betrachter ändert sich.
 
@@ -146,8 +142,6 @@ Was passiert, wenn ein Rasterbild vergrößert wird?
 
 ---
 
-<!-- _class: disable -->
-
 ### J5 – Was bedeutet „konvertieren"?
 **Thema:** Grundbegriffe – Konvertierung
 **Punkte:** 1
@@ -156,7 +150,7 @@ Was passiert, wenn ein Rasterbild vergrößert wird?
 Was bedeutet es, eine Datei zu konvertieren?
 
 - [ ] Die Datei wird komprimiert und umbenannt.
-- [x] **Die Daten werden von einem Format in ein anderes umgewandelt (z. B. JPEG → PNG, MP4 → WebM).** ✅
+- [x] **Die Daten werden von einem Format in ein anderes umgewandelt (z. B. JPEG → PNG, MP4 → WebM).**
 - [ ] Die Datei wird verschlüsselt und in ein neues Format gepackt.
 - [ ] Die Dateiendung wird umbenannt, ohne dass sich der Inhalt ändert.
 
@@ -164,14 +158,12 @@ Was bedeutet es, eine Datei zu konvertieren?
 
 ---
 
-<!-- _class: disable -->
-
 ### J6 – Was bedeutet „codieren" und „decodieren"?
 **Thema:** Grundbegriffe – Codec-Konzept
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre, was „codieren" und „decodieren" bedeuten. Erkläre anschließend, warum der Begriff „Codec" aus beiden Wörtern zusammengesetzt ist, und nenne ein konkretes Beispiel.
+Erklären Sie, was „codieren" und „decodieren" bedeuten. Erklären Sie anschließend, warum der Begriff „Codec" aus beiden Wörtern zusammengesetzt ist, und nennen Sie ein konkretes Beispiel.
 
 > **Musterlösung:** Codieren = Daten in ein bestimmtes Format umwandeln (z. B. Rohvideodaten → H.264-komprimiertes Video). Decodieren = das Gegenteil: komprimierte Daten wieder in abspielbare Form zurückwandeln (z. B. H.264 → Pixeldaten für den Bildschirm). Codec = Co(der) + Dec(oder) – ein Algorithmus, der beides kann. Beispiel: H.264 ist ein Video-Codec: Der Encoder erzeugt die komprimierte Datei, der Decoder im Player spielt sie wieder ab.
 
@@ -185,7 +177,7 @@ Erkläre, was „codieren" und „decodieren" bedeuten. Erkläre anschließend,
 Was ist der Unterschied zwischen einem Container und einem Codec bei Videodateien?
 
 - [ ] Container und Codec sind synonyme Begriffe für das gleiche Konzept.
-- [x] **Der Container (z. B. MP4) ist die „Verpackung", die verschiedene Streams zusammenpackt. Der Codec (z. B. H.264) bestimmt, wie der Video-Stream komprimiert wird.** ✅
+- [x] **Der Container (z. B. MP4) ist die „Verpackung", die verschiedene Streams zusammenpackt. Der Codec (z. B. H.264) bestimmt, wie der Video-Stream komprimiert wird.**
 - [ ] Der Codec ist die Dateiendung, der Container der Kompressionsalgorithmus.
 - [ ] Ein Container enthält immer genau einen Codec – es kann keine Kombination geben.
 
@@ -198,7 +190,7 @@ Was ist der Unterschied zwischen einem Container und einem Codec bei Videodateie
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne zu: Container oder Codec?
+Ordnen Sie zu: Container oder Codec?
 
 | Name | Typ |
 |---|---|
@@ -210,14 +202,12 @@ Ordne zu: Container oder Codec?
 
 ---
 
-<!-- _class: disable -->
-
 ### J9 – Redundanz vs. Irrelevanz
 **Thema:** Grundbegriffe – Kompressionsprinzipien
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Verlustfreie und verlustbehaftete Kompression arbeiten nach unterschiedlichen Prinzipien. Ordne zu.
+Verlustfreie und verlustbehaftete Kompression arbeiten nach unterschiedlichen Prinzipien. Ordnen Sie zu.
 
 | Prinzip | Kompressionstyp |
 |---|---|
@@ -246,8 +236,6 @@ Sortiere die Dateneinheiten von kleinster zu größter:
 
 ---
 
-<!-- _class: disable -->
-
 ### J11 – Bit und Byte: Umrechnung
 **Thema:** Grundbegriffe – Bit/Byte-Verhältnis
 **Punkte:** 1
@@ -261,7 +249,34 @@ Ein Bit ist die kleinste Informationseinheit. Ein Byte besteht aus wie vielen Bi
 
 ---
 
-<!-- _class: disable -->
+### J11a – Bandbreite: Mbit/s in MB/s umrechnen
+**Thema:** Bandbreite – Mbit/s vs. MB/s
+**Punkte:** 1
+**Typ:** `[NUMERIC]`
+
+Ihr Internetanschluss bietet **150 Mbit/s**. Wie viele Megabyte pro Sekunde (MB/s) können Sie damit höchstens herunterladen?
+
+**Lösung:** **18,75** (±0,1)
+
+> **Feedback:** Provider werben in Mbit/s, Dateigrößen stehen in MByte. Umrechnung: Mbit/s ÷ 8 = MB/s. Also 150 ÷ 8 = 18,75 MB/s. Eine 1-GB-Datei lädt damit in ca. 54 Sekunden.
+
+---
+
+### J11b – Warum werben Provider in Mbit/s?
+**Thema:** Bandbreite – Mbit/s vs. MB/s
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Ihr Tarif verspricht „250 Mbit/s", die Datei wird aber mit „~31 MB/s" heruntergeladen. Warum die unterschiedlichen Zahlen?
+
+- [x] **Mbit/s misst Bit, MB/s misst Byte. 1 Byte = 8 Bit, also Mbit/s ÷ 8 = MB/s (250 ÷ 8 ≈ 31). Die größere Bit-Zahl wirkt im Marketing attraktiver.**
+- [ ] Der Download ist langsamer, weil die Leitung defekt ist.
+- [ ] Mbit/s und MB/s sind dasselbe – einer der Werte ist ein Tippfehler.
+- [ ] MB/s ist immer achtmal größer als Mbit/s.
+
+> **Feedback:** Bandbreite wird in Mbit/s (Bit) angegeben, Dateien in MByte. Faktor 8 zwischen beiden. 250 Mbit/s ÷ 8 ≈ 31,25 MB/s. Die Bit-Angabe liefert die größere, werbewirksamere Zahl.
+
+---
 
 ### J12 – 7-Bit ASCII: Wie viele Zeichen?
 **Thema:** Grundbegriffe – ASCII-Zeichenkodierung
@@ -276,8 +291,6 @@ Der ASCII-Standard verwendet 7 Bit pro Zeichen. Wie viele verschiedene Zeichen k
 
 ---
 
-<!-- _class: disable -->
-
 ### J13 – Hexadezimalzahlen: Zwei 4-Bit-Werte
 **Thema:** Grundbegriffe – Hexadezimal
 **Punkte:** 2
@@ -291,8 +304,6 @@ Zwei Hexadezimalzahlen werden jeweils durch 4 Bit dargestellt. Wie viele verschi
 
 ---
 
-<!-- _class: disable -->
-
 ### J14 – Ein Pixel, drei Kanäle, 8 Bit
 **Thema:** Grundbegriffe – Speicherbedarf eines Pixels
 **Punkte:** 1
@@ -311,7 +322,7 @@ Ein einzelner Pixel wird durch drei Farbkanäle (R, G, B) mit jeweils 8 Bit Farb
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Medientyp ein typisches analoges Format zu.
+Ordnen Sie jedem Medientyp ein typisches analoges Format zu.
 
 | Medientyp | Analoges Format |
 |---|---|
@@ -332,7 +343,7 @@ Ordne jedem Medientyp ein typisches analoges Format zu.
 Was passiert, wenn eine VHS-Kassette auf eine andere VHS-Kassette kopiert wird?
 
 - [ ] Die Kopie ist bit-identisch mit dem Original – kein Unterschied erkennbar.
-- [x] **Jede Kopie verschlechtert die Qualität – Rauschen nimmt zu, Schärfe ab.** ✅
+- [x] **Jede Kopie verschlechtert die Qualität – Rauschen nimmt zu, Schärfe ab.**
 - [ ] Die Kopie wird besser, weil das Kopiergerät Rauschen herausfiltert.
 - [ ] Die Qualität bleibt exakt gleich, nur das Medium wechselt.
 
@@ -345,7 +356,7 @@ Was passiert, wenn eine VHS-Kassette auf eine andere VHS-Kassette kopiert wird?
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Medientyp typische digitale Formate zu.
+Ordnen Sie jedem Medientyp typische digitale Formate zu.
 
 | Medientyp | Digitale Formate |
 |---|---|
@@ -367,7 +378,7 @@ Was ist der fundamentale Unterschied zwischen analoger und digitaler Speicherung
 
 - [ ] Analog speichert in diskreten Stufen, digital als kontinuierliches Signal.
 - [ ] Analog nutzt Elektrizität, digital nutzt Magnetismus zur Speicherung.
-- [x] **Analog speichert kontinuierlich (z.B. Rillentiefe), digital in diskreten Bits.** ✅
+- [x] **Analog speichert kontinuierlich (z.B. Rillentiefe), digital in diskreten Bits.**
 - [ ] Analog ist für Audio, digital ist ausschließlich für Text geeignet.
 
 > **Feedback:** Analog = kontinuierlich (Rillentiefe, Magnetfeldstärke). Digital = diskret (0 und 1). Die Quantisierung ist der „Preis" der Digitalisierung, aber danach bleibt die Information exakt – perfekte Kopien möglich.
@@ -385,19 +396,21 @@ Wie wurden analoge Medien typischerweise verbreitet?
 
 - [ ] Per Download aus dem Internet auf den heimischen Computer.
 - [ ] Über Streaming-Dienste wie Spotify oder Apple Music.
-- [x] **Physisch: Kauf im Laden, Verleih, Kopie auf Kassette.** ✅
+- [x] **Physisch: Kauf im Laden, Verleih, Kopie auf Kassette.**
 - [ ] Über dezentrale Peer-to-Peer-Netzwerke zwischen Nutzern.
 
 > **Feedback:** Analoge Distribution war immer physisch gebunden: Man musste das Medium besitzen oder ausleihen. Kopieren war möglich (Kassette), aber mit Qualitätsverlust verbunden.
 
 ---
 
+<!-- _class: disable -->
+
 ### J20 – Digitale Distribution: Die vier Wege
 **Thema:** Distribution – Digital
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jeder Distributionsform ein Beispiel zu.
+Ordnen Sie jeder Distributionsform ein Beispiel zu.
 
 | Distributionsform | Beispiel |
 |---|---|
@@ -410,6 +423,8 @@ Ordne jeder Distributionsform ein Beispiel zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### J21 – Streaming vs. Download: Was ist der Unterschied?
 **Thema:** Distribution – Streaming
 **Punkte:** 1
@@ -419,7 +434,7 @@ Was unterscheidet Streaming von einem Download?
 
 - [ ] Streaming speichert die Datei dauerhaft, Download nur temporär.
 - [ ] Streaming ist immer kostenlos, Download immer kostenpflichtig.
-- [x] **Streaming überträgt während des Abspielens, ohne dauerhafte Kopie.** ✅
+- [x] **Streaming überträgt während des Abspielens, ohne dauerhafte Kopie.**
 - [ ] Streaming funktioniert offline, Download braucht ständig Internet.
 
 > **Feedback:** Streaming = „Wasserhahn" (Daten fließen, solange man zuschaut/hört). Download = „Flasche füllen" (Datei bleibt). Streaming braucht ständige Internetverbindung; Downloads funktionieren offline.
@@ -431,7 +446,7 @@ Was unterscheidet Streaming von einem Download?
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
+Ordnen Sie jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
 
 | Eigenschaft | Vorteil von |
 |---|---|
@@ -446,6 +461,8 @@ Ordne jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
 
 ---
 
+<!-- _class: disable -->
+
 ### J23 – Distribution vergleichen: Download, Streaming, P2P
 **Thema:** Distribution – Vergleich
 **Punkte:** 3
@@ -495,7 +512,7 @@ Verlustfreie und verlustbehaftete Kompression nutzen unterschiedliche Prinzipien
 Was ist ein Pixel in einem digitalen Bild?
 
 - [ ] Ein winziges physisches Kameraobjektiv.
-- [x] **Ein einzelner Farbpunkt in einem Rasterbild – der kleinste Baustein.** ✅
+- [x] **Ein einzelner Farbpunkt in einem Rasterbild – der kleinste Baustein.**
 - [ ] Eine Einheit zur Messung der Dateigröße.
 - [ ] Ein Synonym für eine Farbe im RGB-Farbraum.
 
@@ -523,7 +540,7 @@ Ein Bild ist 1920 × 1080 Pixel groß und nutzt 24-Bit-Farbtiefe (True Color). W
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jeder Farbtiefe ihre Bedeutung zu.
+Ordnen Sie jeder Farbtiefe ihre Bedeutung zu.
 
 | Farbtiefe | Bedeutung |
 |---|---|
@@ -544,7 +561,7 @@ Ordne jeder Farbtiefe ihre Bedeutung zu.
 Was bedeutet ein 32-Bit-Bild gegenüber einem 24-Bit-Bild?
 
 - [ ] Es hat doppelt so viele Pixel.
-- [x] **Es hat einen zusätzlichen Alpha-Kanal (8 Bit), der die Transparenz jedes Pixels speichert.** ✅
+- [x] **Es hat einen zusätzlichen Alpha-Kanal (8 Bit), der die Transparenz jedes Pixels speichert.**
 - [ ] Es nutzt eine höhere Auflösung.
 - [ ] Es kann mehr Dateiformate speichern.
 
@@ -560,7 +577,7 @@ Was bedeutet ein 32-Bit-Bild gegenüber einem 24-Bit-Bild?
 Was ist der fundamentale Unterschied zwischen Raster- und Vektorgrafiken?
 
 - [ ] Vektorgrafiken sind immer farbiger als Rastergrafiken.
-- [x] **Rastergrafiken speichern einzelne Pixel; Vektorgrafiken speichern geometrische Beschreibungen (Pfade, Formen), die beliebig skaliert werden können.** ✅
+- [x] **Rastergrafiken speichern einzelne Pixel; Vektorgrafiken speichern geometrische Beschreibungen (Pfade, Formen), die beliebig skaliert werden können.**
 - [ ] Rastergrafiken können keine Farben darstellen, Vektorgrafiken schon.
 - [ ] Der Unterschied liegt nur in der Dateiendung, nicht im Inhalt.
 
@@ -573,7 +590,7 @@ Was ist der fundamentale Unterschied zwischen Raster- und Vektorgrafiken?
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jeder Eigenschaft zu: Raster oder Vektor?
+Ordnen Sie jeder Eigenschaft zu: Raster oder Vektor?
 
 | Eigenschaft | Typ |
 |---|---|
@@ -593,7 +610,7 @@ Ordne jeder Eigenschaft zu: Raster oder Vektor?
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre, warum ein Rasterbild beim Vergrößern unscharf wird, während ein Vektorbild bei beliebiger Größe scharf bleibt. Nenne einen konkreten Anwendungsfall, in dem diese Eigenschaft ausschlaggebend ist.
+Erklären Sie, warum ein Rasterbild beim Vergrößern unscharf wird, während ein Vektorbild bei beliebiger Größe scharf bleibt. Nennen Sie einen konkreten Anwendungsfall, in dem diese Eigenschaft ausschlaggebend ist.
 
 > **Musterlösung:** Ein Rasterbild hat eine feste Auflösung (eine bestimmte Anzahl von Pixeln). Beim Vergrößern müssen neue Pixel „erfunden" werden (Interpolation) – es gibt keine echten Daten für die fehlenden Stellen → Unschärfe. Ein Vektorbild speichert nur Beschreibungen (Pfade, Formen). Beim Vergrößern werden einfach die Koordinaten skaliert – keine Information geht verloren → immer scharf. Anwendungsfall: Ein Logo auf einer Visitenkarte UND auf einem Plakat → SVG nutzen, damit es bei beliebiger Größe scharf bleibt.
 
@@ -609,7 +626,7 @@ Erkläre, warum ein Rasterbild beim Vergrößern unscharf wird, während ein Vek
 Wie heißt der Prozess, bei dem eine Vektorgrafik in eine Rastergrafik umgewandelt wird?
 
 - [ ] Vektorisierung
-- [x] **Rasterisierung** ✅
+- [x] **Rasterisierung**
 - [ ] Pixelierung
 - [ ] Komprimierung
 
@@ -624,7 +641,7 @@ Wie heißt der Prozess, bei dem eine Vektorgrafik in eine Rastergrafik umgewande
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Interpolationsverfahren seine Eigenschaft zu.
+Ordnen Sie jedem Interpolationsverfahren seine Eigenschaft zu.
 
 | Verfahren | Eigenschaft |
 |---|---|
@@ -680,8 +697,6 @@ Erklären Sie die beiden Konvertierungsprozesse **Rasterisierung** und **Vektori
 
 ---
 
-<!-- _class: disable -->
-
 ### L1 – JPEG: Verlustfrei oder verlustbehaftet?
 **Thema:** JPEG – Grundeigenschaft
 **Punkte:** 1
@@ -689,12 +704,12 @@ Erklären Sie die beiden Konvertierungsprozesse **Rasterisierung** und **Vektori
 
 JPEG ist ein …
 
-- [x] **…verlustbehaftetes Bildformat. Beim Speichern werden Daten dauerhaft weggeworfen.** ✅
-- [ ] …verlustfreies Bildformat wie PNG.
+- [x] **…vorwiegend verlustbehaftetes Bildformat. Die meisten Schritte verwerfen Daten dauerhaft, einzelne Schritte sind aber verlustfrei.**
+- [ ] …vollständig verlustfreies Bildformat wie PNG.
 - [ ] …Videoformat für Streaming.
 - [ ] …Vektorgrafik-Format.
 
-> **Feedback:** JPEG = Joint Photographic Experts Group. Verlustbehaftet: Beim Speichern werden Daten dauerhaft weggeworfen – eine gespeicherte JPEG kann nicht perfekt zum Original zurückgeführt werden. Quality 100 ≠ verlustfrei, nur „wenig wegwerfen".
+> **Feedback:** JPEG = Joint Photographic Experts Group. Vorwiegend verlustbehaftet: Chroma-Subsampling und Quantisierung werfen Daten dauerhaft weg – eine gespeicherte JPEG kann nicht perfekt zum Original zurückgeführt werden. Einzelne Schritte wie das Huffman-Coding am Ende sind jedoch verlustfrei. Quality 100 ≠ verlustfrei, nur „wenig wegwerfen".
 
 ---
 
@@ -706,7 +721,7 @@ JPEG ist ein …
 Wie nutzt JPEG die Schwächen des menschlichen Auges aus?
 
 - [ ] Das Auge kann keine Farben wahrnehmen – daher werden Farben komplett entfernt.
-- [x] **Das Auge sieht Helligkeit besser als Farbe. JPEG behält die Helligkeit (Y) nahezu vollständig, reduziert aber die Farbauflösung (Cb, Cr) – der Verlust wird kaum wahrgenommen.** ✅
+- [x] **Das Auge sieht Helligkeit besser als Farbe. JPEG behält die Helligkeit (Y) nahezu vollständig, reduziert aber die Farbauflösung (Cb, Cr) – der Verlust wird kaum wahrgenommen.**
 - [ ] Das Auge kann keine Details sehen – daher werden alle Details entfernt.
 - [ ] JPEG nutzt keine Wahrnehmungsforschung, komprimiert rein mathematisch.
 
@@ -722,7 +737,7 @@ Wie nutzt JPEG die Schwächen des menschlichen Auges aus?
 Warum wird bei JPEG von RGB in YCbCr konvertiert?
 
 - [ ] YCbCr nutzt weniger Speicher pro Pixel als RGB.
-- [x] **In YCbCr sind Helligkeit (Y) und Farbe (Cb, Cr) getrennt – die Farbauflösung kann unabhängig von der Helligkeit reduziert werden.** ✅
+- [x] **In YCbCr sind Helligkeit (Y) und Farbe (Cb, Cr) getrennt – die Farbauflösung kann unabhängig von der Helligkeit reduziert werden.**
 - [ ] RGB kann keine Transparenz darstellen, YCbCr schon.
 - [ ] Die Konvertierung ist ein verlustfreier Schritt, der die Dateigröße halbiert.
 
@@ -740,7 +755,7 @@ Warum wird bei JPEG von RGB in YCbCr konvertiert?
 Was bedeutet das Subsampling-Schema 4:2:0?
 
 - [ ] 4 Pixel teilen sich eine Helligkeit, aber jeder hat eigene Farbe.
-- [x] **4 Pixel teilen sich einen Farbwert (Chrominanz), aber jeder hat eine eigene Helligkeit (Luminanz). Die Farbauflösung wird auf 25% reduziert.** ✅
+- [x] **4 Pixel teilen sich einen Farbwert (Chrominanz), aber jeder hat eine eigene Helligkeit (Luminanz). Die Farbauflösung wird auf 25% reduziert.**
 - [ ] 4:2:0 bedeutet, dass keine Farbe gespeichert wird – nur Graustufen.
 - [ ] Die Notation beschreibt die Blockgröße, nicht die Farbauflösung.
 
@@ -779,7 +794,7 @@ Bei welchem Schritt der JPEG-Kompression werden Daten dauerhaft weggeworfen?
 
 - [ ] Farbraumkonversion (RGB → YCbCr)
 - [ ] DCT (Discrete Cosine Transform)
-- [x] **Quantisierung – hier werden unwichtige Frequenzkoeffizienten auf Null gesetzt oder vergröbert.** ✅
+- [x] **Quantisierung – hier werden unwichtige Frequenzkoeffizienten auf Null gesetzt oder vergröbert.**
 - [ ] Huffman-Coding
 
 > **Feedback:** DCT selbst ist verlustfrei und reversibel – es sortiert nur die Daten nach Wichtigkeit. Die Quantisierung ist der einzige verlustbehaftete Schritt: Sie wirft hohe Frequenzen (feine Details) weg. Huffman-Coding danach ist wieder verlustfrei.
@@ -796,7 +811,7 @@ Bei welchem Schritt der JPEG-Kompression werden Daten dauerhaft weggeworfen?
 Was leitet die DCT (Discrete Cosine Transform) bei JPEG?
 
 - [ ] Sie komprimiert die Daten verlustbehaftet.
-- [x] **Sie wandelt 64 Pixelwerte eines 8×8-Blocks in 64 Frequenzkoeffizienten um – sortiert die Information nach Wichtigkeit (niedrige Frequenz = wichtig, hohe Frequenz = Details).** ✅
+- [x] **Sie wandelt 64 Pixelwerte eines 8×8-Blocks in 64 Frequenzkoeffizienten um – sortiert die Information nach Wichtigkeit (niedrige Frequenz = wichtig, hohe Frequenz = Details).**
 - [ ] Sie verschlüsselt die Daten für sichere Übertragung.
 - [ ] Sie reduziert die Farbauflösung des Bildes.
 
@@ -804,6 +819,8 @@ Was leitet die DCT (Discrete Cosine Transform) bei JPEG?
 
 ---
 
+<!-- _class: disable -->
+
 ### L8 – Huffman-Coding: Prinzip
 **Thema:** JPEG – Huffman
 **Punkte:** 2
@@ -812,7 +829,7 @@ Was leitet die DCT (Discrete Cosine Transform) bei JPEG?
 Wie funktioniert Huffman-Coding?
 
 - [ ] Alle Zeichen bekommen gleich lange Codes – einfach und effizient.
-- [x] **Häufige Werte bekommen kurze Codes, selten vorkommende lange Codes – variable Bitlänge statt fester 8 Bit.** ✅
+- [x] **Häufige Werte bekommen kurze Codes, selten vorkommende lange Codes – variable Bitlänge statt fester 8 Bit.**
 - [ ] Huffman-Coding verschlüsselt die Daten zusätzlich.
 - [ ] Es funktioniert nur für Texte, nicht für Bilddaten.
 
@@ -827,7 +844,7 @@ Wie funktioniert Huffman-Coding?
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem JPEG-Artefakt seine Beschreibung zu.
+Ordnen Sie jedem JPEG-Artefakt seine Beschreibung zu.
 
 | Artefakt | Beschreibung |
 |---|---|
@@ -839,6 +856,8 @@ Ordne jedem JPEG-Artefakt seine Beschreibung zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### L10 – JPEG-Kompression erklären: RGB, YCbCr, DCT
 **Thema:** JPEG – Pipeline verstehen
 **Punkte:** 3
@@ -882,8 +901,6 @@ JPEG teilt Bilder in 8×8-Pixel-Blöcke auf. Erklären Sie: (1) warum überhaupt
 
 ---
 
-<!-- _class: disable -->
-
 ### M1 – PNG: Verlustfrei oder verlustbehaftet?
 **Thema:** PNG – Grundeigenschaft
 **Punkte:** 1
@@ -892,7 +909,7 @@ JPEG teilt Bilder in 8×8-Pixel-Blöcke auf. Erklären Sie: (1) warum überhaupt
 Wie komprimiert PNG?
 
 - [ ] Verlustbehaftet – wie JPEG, aber mit besserer Qualität.
-- [x] **Verlustfrei – die Originaldaten können perfekt rekonstruiert werden.** ✅
+- [x] **Verlustfrei – die Originaldaten können perfekt rekonstruiert werden.**
 - [ ] Gar nicht – PNG speichert Daten unkomprimiert.
 - [ ] PNG nutzt eine Kombination aus verlustfrei und verlustbehaftet.
 
@@ -900,21 +917,17 @@ Wie komprimiert PNG?
 
 ---
 
-<!-- _class: disable -->
-
 ### M2 – PNG vs. JPEG: Wann was?
 **Thema:** Bildformate – Formatwahl
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erklären Sie, wann Sie PNG und wann JPEG wählen würden. Nenne je zwei konkrete Anwendungsfälle und begründen Sie Ihre Wahl.
+Erklären Sie, wann Sie PNG und wann JPEG wählen würden. Nennen Sie je zwei konkrete Anwendungsfälle und begründen Sie Ihre Wahl.
 
 > **Musterlösung:** PNG: (1) Screenshots – Texte und Linien bleiben scharf, keine Artefakte. (2) Logos mit Transparenz – PNG unterstützt Alpha-Transparenz, JPEG nicht. JPEG: (1) Fotos fürs Web – deutlich kleiner bei kaum sichtbarem Qualitätsverlust. (2) Social Media – Plattformen re-komprimieren sowieso, PNG würde nur unnötig groß sein.
 
 ---
 
-<!-- _class: disable -->
-
 ### M3 – GIF: Wie viele Farben?
 **Thema:** GIF – Eigenschaften
 **Punkte:** 1
@@ -924,13 +937,15 @@ Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen?
 
 - [ ] 16 Farben
 - [ ] 16,7 Millionen Farben
-- [x] **256 Farben (8-Bit-Palette)** ✅
+- [x] **256 Farben (8-Bit-Palette)**
 - [ ] Unbegrenzt – GIF unterstützt alle Farben.
 
 > **Feedback:** GIF = 8-Bit-Palette = 256 Farben maximal. Deshalb sehen GIF-Bilder bei Fotos oft banding/posterisiert aus. GIF überlebt heute wegen Animationen.
 
 ---
 
+<!-- _class: disable -->
+
 ### M4 – WebP vs. JPEG: Vorteil?
 **Thema:** Bildformate – WebP
 **Punkte:** 1
@@ -939,7 +954,7 @@ Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen?
 Was ist der hauptsächliche Vorteil von WebP gegenüber JPEG?
 
 - [ ] WebP unterstützt Videos, JPEG nicht.
-- [x] **WebP erzeugt bei gleicher Qualität 25–35% kleinere Dateien als JPEG.** ✅
+- [x] **WebP erzeugt bei gleicher Qualität 25–35% kleinere Dateien als JPEG.**
 - [ ] WebP ist verlustfrei, JPEG nicht.
 - [ ] WebP kann keine Fotos speichern, nur Grafiken.
 
@@ -947,8 +962,6 @@ Was ist der hauptsächliche Vorteil von WebP gegenüber JPEG?
 
 ---
 
-<!-- _class: disable -->
-
 ### M5 – SVG: Was ist es?
 **Thema:** SVG – Grundbegriff
 **Punkte:** 1
@@ -957,7 +970,7 @@ Was ist der hauptsächliche Vorteil von WebP gegenüber JPEG?
 Was ist SVG?
 
 - [ ] Ein verlustbehaftetes Rasterbild-Format wie JPEG.
-- [x] **Ein Vektorgrafik-Format, das Bilder als geometrische Beschreibungen (XML) speichert – beliebig skalierbar ohne Qualitätsverlust.** ✅
+- [x] **Ein Vektorgrafik-Format, das Bilder als geometrische Beschreibungen (XML) speichert – beliebig skalierbar ohne Qualitätsverlust.**
 - [ ] Ein Video-Container wie MP4.
 - [ ] Ein komprimiertes Archivformat wie ZIP.
 
@@ -965,14 +978,12 @@ Was ist SVG?
 
 ---
 
-<!-- _class: disable -->
-
 ### M6 – Formatwahl: Szenario zuordnen
 **Thema:** Bildformate – Formatwahl Transfer
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Szenario das optimale Bildformat zu.
+Ordnen Sie jedem Szenario das optimale Bildformat zu.
 
 | Szenario | Format |
 |---|---|
@@ -985,6 +996,8 @@ Ordne jedem Szenario das optimale Bildformat zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### M7 – Bildformate vergleichen: JPEG, PNG, WebP
 **Thema:** Bildformate – Vergleich
 **Punkte:** 3
@@ -1022,7 +1035,7 @@ GIF ist ein altes Format (1987), wird aber noch für Animationen verwendet. Erkl
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Prinzip seine Beschreibung zu.
+Ordnen Sie jedem Prinzip seine Beschreibung zu.
 
 | Prinzip | Beschreibung |
 |---|---|
@@ -1041,7 +1054,7 @@ Ordne jedem Prinzip seine Beschreibung zu.
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Frame-Typ seine Beschreibung zu.
+Ordnen Sie jedem Frame-Typ seine Beschreibung zu.
 
 | Frame-Typ | Beschreibung |
 |---|---|
@@ -1060,7 +1073,7 @@ Ordne jedem Frame-Typ seine Beschreibung zu.
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre, warum ein I-Frame bei der Videokompression so wichtig ist. Was passiert, wenn ein einzelner I-Frame in einem Videostream beschädigt wird?
+Erklären Sie, warum ein I-Frame bei der Videokompression so wichtig ist. Was passiert, wenn ein einzelner I-Frame in einem Videostream beschädigt wird?
 
 > **Musterlösung:** Ein I-Frame ist ein vollständiges, unabhängig dekodierbare Bild. Alle nachfolgenden P- und B-Frames referenzieren auf vorherige Frames – letztlich auf das letzte I-Frame. Wenn ein I-Frame beschädigt wird, können alle abhängigen P- und B-Frames bis zum nächsten intakten I-Frame nicht mehr korrekt rekonstruiert werden → Videofehler sichtbar bis zum nächsten Keyframe. Deshalb werden typischerweise alle 1–2 Sekunden neue I-Frames eingefügt.
 
@@ -1076,7 +1089,7 @@ Erkläre, warum ein I-Frame bei der Videokompression so wichtig ist. Was passier
 Was beschreibt ein Motion Vector bei der Videokompression?
 
 - [ ] Die Helligkeit eines einzelnen Pixels.
-- [x] **Die Verschiebung eines Bildblocks zwischen zwei Frames (z. B. „verschiebe um +20 Pixel nach rechts").** ✅
+- [x] **Die Verschiebung eines Bildblocks zwischen zwei Frames (z. B. „verschiebe um +20 Pixel nach rechts").**
 - [ ] Die Kompressionsrate des gesamten Videos.
 - [ ] Die Anzahl der Farben in einem Frame.
 
@@ -1102,17 +1115,21 @@ Sortiere die Video-Codecs nach Veröffentlichungsjahr (alt → neu):
 
 ---
 
+<!-- _class: disable -->
+
 ### N6 – AV1: Warum die Zukunft?
 **Thema:** Video – AV1 Transfer
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre, warum AV1 als „die Zukunft" der Videokompression gilt. Nenne mindestens zwei konkrete Eigenschaften und erkläre, warum H.265 trotz besserer technischer Kompression nicht die gleiche Dominanz erreicht hat.
+Erklären Sie, warum AV1 als „die Zukunft" der Videokompression gilt. Nennen Sie mindestens zwei konkrete Eigenschaften und erklären Sie, warum H.265 trotz besserer technischer Kompression nicht die gleiche Dominanz erreicht hat.
 
 > **Musterlösung:** AV1 (2018) ist royalty-free und open source – die Alliance for Open Media vereint Google, Netflix, Amazon, Apple, Mozilla. Es liefert 30% bessere Kompression als H.265 und unterstützt 8K, HDR, hohe Frame-Rates. H.265 scheitert vor allem am Patent-Chaos: Drei konkurrierende Patent-Pools (MPEG-LA, HEVC Advance, Velos Media) erzeugen rechtliche Unsicherheit und unklare Kosten → viele Unternehmen bleiben bei H.264 oder wechseln direkt zu AV1.
 
 ---
 
+<!-- _class: disable -->
+
 ### N7 – Frame-Typen erklären: I-Frame, P-Frame, B-Frame
 **Thema:** Video – Frame-Typen verstehen
 **Punkte:** 3
@@ -1166,7 +1183,7 @@ Eine Datei heißt `video.mp4`. Erklären Sie: (1) Was sagt die Endung `.mp4` üb
 Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an. Warum?
 
 - [ ] Windows zeigt falsche Werte an – das ist ein Bug.
-- [x] **Hersteller nutzen dezimale Einheiten (1 TB = 1.000 GB), Windows nutzt binäre Einheiten (1 TiB = 1.024 GiB). Bei TB-Größen entsteht eine ~7% Diskrepanz.** ✅
+- [x] **Hersteller nutzen dezimale Einheiten (1 TB = 1.000 GB), Windows nutzt binäre Einheiten (1 TiB = 1.024 GiB). Bei TB-Größen entsteht eine ~7% Diskrepanz.**
 - [ ] Die Festplatte verliert beim Formatieren fast 10% ihrer Kapazität.
 - [ ] Windows reserviert automatisch 10% als Sicherheitspuffer.
 
@@ -1174,6 +1191,8 @@ Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an.
 
 ---
 
+<!-- _class: disable -->
+
 ### O2 – HDD vs. SSD: Kern-Unterschied
 **Thema:** Speichermedien – HDD vs. SSD
 **Punkte:** 1
@@ -1182,7 +1201,7 @@ Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an.
 Was ist der fundamentale technische Unterschied zwischen HDD und SSD?
 
 - [ ] HDDs sind elektronisch, SSDs mechanisch.
-- [x] **HDDs speichern Daten magnetisch auf sich drehenden Plattern (mechanisch). SSDs nutzen Flash-Speicher (elektronisch, keine beweglichen Teile).** ✅
+- [x] **HDDs speichern Daten magnetisch auf sich drehenden Plattern (mechanisch). SSDs nutzen Flash-Speicher (elektronisch, keine beweglichen Teile).**
 - [ ] Beide Technologien funktionieren identisch, der Unterschied liegt nur im Gehäuse.
 - [ ] HDDs nutzen Flash-Speicher, SSDs magnetische Platten.
 
@@ -1190,12 +1209,14 @@ Was ist der fundamentale technische Unterschied zwischen HDD und SSD?
 
 ---
 
+<!-- _class: disable -->
+
 ### O3 – HDD vs. SSD: Eigenschaften zuordnen
 **Thema:** Speichermedien – Vergleich
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jeder Eigenschaft zu: HDD oder SSD?
+Ordnen Sie jeder Eigenschaft zu: HDD oder SSD?
 
 | Eigenschaft | Typ |
 |---|---|
@@ -1220,7 +1241,7 @@ Ordne jeder Eigenschaft zu: HDD oder SSD?
 Ein USB-C-Kabel kann langsam sein, obwohl es wie ein „modernes" Kabel aussieht. Warum?
 
 - [ ] USB-C-Kabel sind immer gleich schnell – die Geschwindigkeit liegt am Gerät.
-- [x] **USB-C ist nur ein Steckertyp, kein Protokoll. Ein USB-C-Kabel kann USB 2.0 (480 Mbit/s) bis USB4 (40 Gbit/s) sein – am Stecker nicht erkennbar.** ✅
+- [x] **USB-C ist nur ein Steckertyp, kein Protokoll. Ein USB-C-Kabel kann USB 2.0 (480 Mbit/s) bis USB4 (40 Gbit/s) sein – am Stecker nicht erkennbar.**
 - [ ] USB-C-Kabel werden nach einem Jahr automatisch langsamer.
 - [ ] Die Geschwindigkeit hängt nur vom Betriebssystem ab.
 
@@ -1235,7 +1256,7 @@ Ein USB-C-Kabel kann langsam sein, obwohl es wie ein „modernes" Kabel aussieht
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Dateisystem seine ideale Anwendung zu.
+Ordnen Sie jedem Dateisystem seine ideale Anwendung zu.
 
 | Dateisystem | Ideal für |
 |---|---|
@@ -1259,7 +1280,7 @@ Ordne jedem Dateisystem seine ideale Anwendung zu.
 Sie versuchen, eine 5-GB-Videodatei auf einen FAT32-formatierten USB-Stick zu kopieren. Was passiert?
 
 - [ ] Die Datei wird automatisch aufgeteilt in kleinere Teile.
-- [x] **Der Vorgang fehlschlägt – FAT32 unterstützt keine einzelnen Dateien größer als 4 GB.** ✅
+- [x] **Der Vorgang fehlschlägt – FAT32 unterstützt keine einzelnen Dateien größer als 4 GB.**
 - [ ] Die Datei wird automatisch komprimiert, bis sie unter 4 GB ist.
 - [ ] FAT32 hat keine Dateigrößenbeschränkung.
 
@@ -1272,7 +1293,7 @@ Sie versuchen, eine 5-GB-Videodatei auf einen FAT32-formatierten USB-Stick zu ko
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre die 3-2-1-Regel für Backups. Begründe, warum jede der drei Ziffern wichtig ist.
+Erklären Sie die 3-2-1-Regel für Backups. Begründen Sie, warum jede der drei Ziffern wichtig ist.
 
 > **Musterlösung:** 3 Kopien: Original + 2 Backups. Warum? Das Original kann kaputt gehen, das erste Backup auch – das zweite ist der Sicherheitspuffer. 2 verschiedene Medientypen (z. B. SSD + HDD, oder lokal + Cloud). Warum? Gleiche Medien haben gleiche Schwachstellen (z. B. Batch-Fehler bei HDDs derselben Charge). 1 Kopie an einem anderen Ort (Cloud, anderes Gebäude). Warum? Brand oder Wasserschaden zerstört alles vor Ort; Ransomware verschlüsselt alle angeschlossenen Laufwerke gleichzeitig.
 
@@ -1285,7 +1306,7 @@ Erkläre die 3-2-1-Regel für Backups. Begründe, warum jede der drei Ziffern wi
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Backup-Typ seine Beschreibung zu.
+Ordnen Sie jedem Backup-Typ seine Beschreibung zu.
 
 | Backup-Typ | Beschreibung |
 |---|---|
@@ -1297,12 +1318,14 @@ Ordne jedem Backup-Typ seine Beschreibung zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### O9 – Digitale Speichermedien: Kategorien
 **Thema:** Speichermedien – Übersicht
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedes Speichermedium seiner technischen Kategorie zu.
+Ordnen Sie jedes Speichermedium seiner technischen Kategorie zu.
 
 | Medium | Kategorie |
 |---|---|
@@ -1315,12 +1338,14 @@ Ordne jedes Speichermedium seiner technischen Kategorie zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### O10 – Speichermedien: Wann welches?
 **Thema:** Speichermedien – Anwendungsfall
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Szenario das empfohlene Speichermedium zu.
+Ordnen Sie jedem Szenario das empfohlene Speichermedium zu.
 
 | Szenario | Empfohlenes Medium |
 |---|---|
@@ -1350,6 +1375,8 @@ Sortiere die optischen Speichermedien nach Kapazität (kleinste zuerst):
 
 ---
 
+<!-- _class: disable -->
+
 ### O12 – Cloud-Speicher: Was ist das eigentlich?
 **Thema:** Speichermedien – Cloud
 **Punkte:** 1
@@ -1359,7 +1386,7 @@ Was ist „Cloud-Speicher" technisch gesehen?
 
 - [ ] Eine neue Speichertechnologie, die Daten in Funkwellen speichert.
 - [ ] Virtuelle Speicher ohne jegliche physische Hardware-Komponenten.
-- [x] **HDDs/SSDs in Rechenzentren – „Cloud" beschreibt den Internet-Zugriff.** ✅
+- [x] **HDDs/SSDs in Rechenzentren – „Cloud" beschreibt den Internet-Zugriff.**
 - [ ] Lokale Festplatten, die automatisch mit dem Himmel synchronisieren.
 
 > **Feedback:** „Cloud" ist Marketing für „fremder Computer". Dropbox, Google Drive, iCloud – alle speichern physisch auf Servern in Rechenzentren. Vorteil: Zugriff von überall. Nachteil: Abhängigkeit von Internet und Anbieter.
@@ -1378,12 +1405,14 @@ Warum verwenden große Unternehmen noch heute Magnetbänder (LTO)?
 - [ ] Magnetbänder sind schneller als SSDs beim wahlfreien Zugriff.
 - [ ] Magnetbänder werden nur aus nostalgischen Gründen eingesetzt.
 - [ ] Magnetbänder sind die einzige Technologie für Videospeicherung.
-- [x] **Extrem günstig pro TB, langlebig, ideal für selten abgerufene Daten.** ✅
+- [x] **Extrem günstig pro TB, langlebig, ideal für selten abgerufene Daten.**
 
 > **Feedback:** LTO = Linear Tape-Open. Aktuell LTO-9: 18 TB pro Band, ~2€/TB. Nachteil: sequentieller Zugriff (kein Random Access). Perfekt für Archivierung, wo Daten selten gelesen werden. Google, Facebook, Banken – alle nutzen LTO.
 
 ---
 
+<!-- _class: disable -->
+
 ### O14 – Speichertechnologien vergleichen: Optisch, Magnetisch, Flash
 **Thema:** Speichermedien – Technologievergleich
 **Punkte:** 3

slides/223015c/00-intro.md

@@ -97,7 +97,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Herzlich willkommen!
+# Herzlich willkommen
 ## Einführung
 
 ---
@@ -116,13 +116,13 @@ Hochschule der Medien Stuttgart
 
 ---
 
-# Warum dieses Modul?
+# Motivation für dieses Modul
 
 **Das Internet ist überall** – aber was steckt dahinter?
 
 * Warum sehen Webseiten auf dem Handy anders aus?
 * Wie funktioniert eigentlich das Internet?
-* Wie erkennen Sie, ob eine Werbeagentur gute Arbeit leistet?
+* Wie erkennt ihr, ob eine Werbeagentur gute Arbeit leistet?
 * Was hat ein Unterseekabel mit meiner E-Mail zu tun?
 * **→ Die Technik dahinter verstehen und fundierte Entscheidungen treffen**
 
@@ -136,13 +136,13 @@ Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fr
 * Wie baue ich eine barrierearme Webseite?
 * Welches Protokoll für welchen Zweck?
 * Wie funktioniert das Web hinter den Kulissen?
-* **→ Mitreden können – und selbst Webseiten bauen!**
+* **→ Mitreden können – und selbst Webseiten bauen**
 
 ---
 
-# Was Sie hier lernen werden
+# Lernziele
 
-**In dieser Veranstaltung erwerben Sie folgende Kompetenzen:**
+**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
 
 * Geschichte des Computers und Internets
 * HTML-Grundlagen und semantisches Markup
@@ -172,7 +172,7 @@ Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fr
 2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
 3. Interaktivität, Animationen & **JavaScript**
 
-**Ziel:** "Gelernte Hilflosigkeit" ablegen
+**Ziel:** Technische Scheu abbauen und Web-Grundlagen selbst beherrschen
 
 ---
 

slides/223015c/01-geschichte-grundlagen-html.md

@@ -126,7 +126,7 @@ Hochschule der Medien Stuttgart
 2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
 3. Interaktivität, Animationen & **JavaScript**
 
-**Ziel:** "Gelernte Hilflosigkeit" ablegen
+**Ziel:** Technische Scheu abbauen und Web-Grundlagen selbst beherrschen
 
 ---
 
@@ -403,10 +403,10 @@ Der Turing-Test (1950): Ein Interrogator kommuniziert per Text mit einem Mensche
 - Implosions-Simulationen
 - Nuklearphysik-Gleichungen
 
-**Lösung 1943:** Menschliche "Computer"
+**Lösung 1943:** Die Berechnungen übernehmen menschliche "Computer"
 → Mathematikerinnen mit Taschenrechnern & IBM-Lochkarten
 
-**Zu langsam** → Bedarf an automatischer Berechnung
+**Das ist zu langsam** → es entsteht der Bedarf an automatischer Berechnung
 
 **Schlüsselfigur:** John von Neumann (Mathematik & Stoßwellen)
 
@@ -427,7 +427,7 @@ Das ENIAC-Projekt in Philadelphia sollte die Berechnungen beschleunigen.
 # John von Neumann (1903–1957)
 
 - Geboren in Budapest, Österreich-Ungarn
-- Mit 8: Konnte Telefonbücher auswendig
+- Mit 8: Konnte ganze Telefonbücher auswendig aufsagen
 - Mit 22: Doktor in Mathematik
 
 **Beiträge:**
@@ -623,7 +623,7 @@ COBOL läuft heute noch auf Bankensystemen
 - Jeder Befehl entspricht direkt einer CPU-Instruktion
 - Hardwarenah, aber für Menschen lesbar
 
-**Fun Fact:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
+**Kuriosum:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
 
 <!--
 KATHLEEN BOOTH (1922–2022):
@@ -893,7 +893,7 @@ Geprägt 1948 von Claude Shannon
 
 <!--
 Alles Digitale basiert darauf
-Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde
+Transistoren in CPUs: Milliarden Bit schalten Millionen Mal pro Sekunde
 Shannon: Begründer der Informationstheorie
 -->
 
@@ -940,19 +940,19 @@ binary 00101010 = decimal 42
 - ASCII (1963) brauchte 7 Bit für 128 Zeichen
 - 8 Bit = praktisch für Hardware (Zweierpotenz: 2³ = 8)
 - 8 Bit = 2 Hexadezimalziffern (elegante Darstellung)
-- Kleinste adressierbare Einheit im Speicher: Prozessor kann nicht einzelne Bits direkt ansprechen, immer Bytes
+- Kleinste adressierbare Einheit im Speicher: Prozessor kann nicht einzelne Bit direkt ansprechen, immer Byte
 -->
 
 ---
 
-# Was kann man mit 256 Zuständen machen?
+# 256 Zustände – was sich damit darstellen lässt
 
 - **256 Zeichen** (Buchstaben, Zahlen, Symbole)
 - **256 Graustufen** (0 = Schwarz, 255 = Weiß)
 - **256 Lautstärkestufen**
 - **Zahlen 0-255**
 
-**Für Farbe:** 3 Bytes pro Pixel (RGB)
+**Für Farbe:** 3 Byte pro Pixel (RGB)
 R=0-255, G=0-255, B=0-255 → **16,7 Millionen Farben**
 
 <!--
@@ -1004,7 +1004,7 @@ Warum gerade 8 Bit?
 <!--
 Dezimal = was wir im Alltag nutzen (10 Finger → 10 Ziffern)
 Binär = was Computer nutzen (Strom an/aus → 2 Zustände)
-Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Bytes (2 Hex-Ziffern = 1 Byte = 8 Bit)
+Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Byte (2 Hex-Ziffern = 1 Byte = 8 Bit)
 Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
 - Dezimal: 10 (0–9)
 - Binär: 2 (0, 1)
@@ -1021,7 +1021,7 @@ Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
 **Hexadezimal (Base 16):**
 `4D 50 33` (= "MP3" in ASCII)
 
-**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
+**Jede Hex-Ziffer = 4 Bit (ein "Nibble")**
 0-9, A-F (A=10, B=11, ..., F=15)
 
 `4 = 0100` `D = 1101`
@@ -1031,7 +1031,7 @@ Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
 <!--
 Hex = Shortcut für Menschen
 1 Byte = 2 Hex-Ziffern (00-FF)
-"Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
+"Nibble" = 4 Bit = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
 CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
 -->
 
@@ -1076,7 +1076,7 @@ Dieselben 8 Byte (PNG-Dateianfang: 89 50 4E 47 0D 0A 1A 0A) — drei Perspektive
 
 ---
 
-# Wo begegnet Ihnen Hex-Code?
+# Wo euch Hex-Code begegnet
 
 | Kontext | Beispiel |
 |---------|----------|
@@ -1112,7 +1112,7 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
 
 ---
 
-# Bit vs. Byte: Die Verwirrung
+# Bit vs. Byte: der Unterschied
 
 **1 Byte = 8 Bit** → Bit ÷ 8 = Byte
 
@@ -1126,7 +1126,7 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
 
 
 <!--
-Bits = kleines b, Bytes = großes B
+Bit = kleines b, Byte = großes B
 Internetanbieter: Mbit/s (klingt größer!)
 100 Mbit/s ÷ 8 = 12,5 MB/s
 Warum? Marketing - 100 klingt besser als 12,5
@@ -1146,7 +1146,7 @@ Warum? Marketing - 100 klingt besser als 12,5
 **H**yper**T**ext **M**arkup **L**anguage
 
 * **Keine** Programmiersprache
-* Am ehesten eine Formattierungssprache
+* Am ehesten eine Auszeichnungssprache (Markup)
 * Beschreibt **Struktur und Aufbau** einer Webseite
   * ```html
     <p>Das ist ein Absatz.</p>
@@ -1167,8 +1167,8 @@ Aktuelle Version: HTML5 (seit 2014)
 # Was ist HTML? (2/2)
 
 * Mit HTML werden **HTML-Dokumente** beschrieben (bspw. `index.html`)
-* Ein HTML-Dokument beschreibt das/den `Document Object Model (DOM)` 
-* Der DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
+* Ein HTML-Dokument beschreibt das **Document Object Model (DOM)** 
+* Das DOM ist eine **hierarchische Baumstruktur** (Kind- und Elternelemente)
   * *parent nodes / elements*
   * *child nodes / elements*
   * *sibling nodes / elements*
@@ -1178,12 +1178,12 @@ Aktuelle Version: HTML5 (seit 2014)
 
 # HTML-Anatomie (1/2)
 
-Formattierungssprache
+HTML ist eine Auszeichnungssprache (Markup).
 
-* HTML folgt einer strengen **Syntax** zur Formattieren von digitalen Inhalten 
+* HTML folgt einer strengen **Syntax** zum Auszeichnen digitaler Inhalte
   * Syntax: `<element attribute="value"> ... </element>` 
   * Öffnende und schließende HTML-Tags müssen identisch sein
-  * Das schließende Tag muss ein `/` nach der Spitzenklammer haben
+  * Das schließende Tag hat ein `/` direkt nach der öffnenden spitzen Klammer (`</p>`)
     
 ---
 
@@ -1199,7 +1199,7 @@ Formattierungssprache
     * `<b> ... </b>` fett-gedruckter Text (inline)
     * `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
     * `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
-    * `<details> ... </details>` Collapsable / Akkordion / Aufklapp-Text
+    * `<details> ... </details>` Aufklapp-Text (Akkordion)
   * **Selbst-schließend**
     * `<img />` Bild, Vektorgrafik etc.
     * `<input />` Eingabefeld
@@ -1385,7 +1385,7 @@ a = anchor (Anker)
 
 # Natives HTML
 
-Was noch üblicherweise mit Skriptsprachen wie JavaScript und anderen umgesetzt werden musste, kann nun HTML selber. Wer dieses dennoch verwendet, hat das einen sog. *"Code smell"*. 
+Vieles, was früher JavaScript erforderte, beherrscht HTML inzwischen selbst. Wer es dennoch per Skript löst, produziert einen sogenannten *"Code Smell"*.
 
 | Funktion | HTML-Element |
 |----------|--------------|
@@ -1510,7 +1510,7 @@ Accessibility ist eingebaut
 
 <!-- _class: lead -->
 
-# Wie nutzen Menschen das Web?
+# Wie Menschen das Web nutzen
 
 ---
 
@@ -1554,7 +1554,7 @@ Accessibility ist eingebaut
 
 ---
 
-# Wie nutzen Menschen das Web?
+# Wie Menschen das Web nutzen
 
 | Eingabe | Nutzungsweise |
 |---------|---------------|
@@ -1613,10 +1613,10 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,
 
 ---
 
-# Warum "Barrierefreiheit"?
+# Bedeutung von "Barrierefreiheit"
 
 **Rechtlich:**
-- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
+- EU: European Accessibility Act (seit Juni 2025 in Kraft)
 - DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
 
 **Ethisch:**

slides/223015c/02-netzwerke-protokolle-css.md

@@ -91,6 +91,9 @@ section.erklaerung p {
 section.erklaerung table {
   font-size: 0.9rem;
 }
+section.dimmed {
+  opacity: 0.2;
+}
 </style>
 
 <!-- _class: invert -->
@@ -197,26 +200,14 @@ SPEAKER NOTES:
 
 Das Web folgt dem **Client-Server-Modell**: Ein Client (Browser) sendet einen **Request**, ein Server liefert eine **Response** – nach den Regeln eines **Protokolls**.
 
-| Begriff | Was ist das? | Analogie |
-|---------|--------------|----------|
-| **Host** | Ein Rechner im Netz | Ein Haus mit Adresse |
-| **Client** | Der, der fragt (Browser) | Gast im Restaurant |
-| **Server** | Der, der antwortet | Küche im Restaurant |
-| **Request** | Die Anfrage | Bestellung |
-| **Response** | Die Antwort | Das Essen |
-| **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP) | Speisekarte + Bestellablauf |
-
-<!--
-SPEAKER NOTES:
-- 6 Grundbegriffe – tauchen überall auf
-- Client/Server = Grundstruktur des Webs
-  - Browser = Client
-  - Google/HdM/Netflix = Server
-- Request/Response = Kommunikationsmuster
-- Protokoll = Regelwerk
-  - Analogie: Restaurant in Japan ohne Regeln zu kennen
-- Host = Rechner mit Adresse im Netz
--->
+| Begriff       | Was ist das?                                                             |
+|---------------|--------------------------------------------------------------------------|
+| **Host**      | Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in S-Bahn etc.) |
+| **Client**    | Host bzw. Anwendung mit einer Anfrage (bspw. Browser)                    |
+| **Server**    | Host bzw. Anwendung mit der Antwort (bspw. Webserver)                    |
+| **Request**   | Die Anfrage des Clients                                                  |
+| **Response**  | Die Antwort des Servers                                                  |
+| **Protokoll** | Regeln für Kommunikation (z. B. TCP, HTTP)                               |
 
 ---
 
@@ -224,13 +215,13 @@ SPEAKER NOTES:
 
 # Glossar: Adressen & Identitäten
 
-Jedes Gerät im Netz braucht Adressen: eine **IP** für das globale Routing, eine **MAC** für das lokale Netz und einen **Port** für das richtige Programm.
+Jedes Gerät im Netz braucht Adressen: eine **IP** (Internet Protocol) für das globale Routing, eine **MAC** (Media Access Control) für das lokale Netz und einen **Port** für das richtige Programm.
 
 | Begriff | Was ist das? | Beispiel |
 |---------|--------------|----------|
 | **IP-Adresse** | Globale Adresse im Internet | `212.132.79.37` |
 | **MAC-Adresse** | Hardware-Adresse der Netzwerkkarte | `aa:bb:cc:dd:ee:ff` |
-| **Port** | "Türnummer" auf einem Rechner | `80`, `443`, `22` |
+| **Port** | Nummer eines Programms bzw. Dienstes | `80`, `443`, `22` |
 | **DNS** | Telefonbuch: Name → IP | hdm-stuttgart.de → IP |
 | **Domain** | Menschenlesbarer Name | `hdm-stuttgart.de` |
 
@@ -253,13 +244,15 @@ SPEAKER NOTES:
 
 Daten werden Schicht für Schicht verpackt — jede Schicht fügt einen eigenen **Header** hinzu und erzeugt so eine neue Dateneinheit.
 
-| Begriff | Was ist das? | Schicht |
-|---------|--------------|---------|
-| **Paket** | Daten + IP-Header | Internet (Layer 3) |
-| **Segment** | Daten + TCP-Header | Transport (Layer 4) |
-| **Frame** | Daten + MAC-Header | Netzzugang (Layer 2) |
-| **Header** | Metadaten am Anfang | Jede Schicht |
-| **Payload** | Die eigentlichen Nutzdaten | Der Inhalt |
+| Begriff     | Was ist das?                                          | Schicht                  |
+|-------------|-------------------------------------------------------|--------------------------|
+| **Payload** | Die eigentlichen Nutzdaten (bspw. Request, Response)  | Anwendung                |
+| **Header**  | Metadaten vor und nach dem Payload                    | Jedes Layer              |
+| **Segment** | Payload + TCP-Header (Anwendungsport)                 | Transport (Layer 3)      |
+| **Paket**   | Payload + IP-Header (WLAN-Router)                     | Internet (Layer 2)       |
+| **Frame**   | Payload + MAC-Header (Netzwerkkarte)                  | Netzzugang (Layer 1)     |
+| **Bit**     | Abfolge von Signalen (Licht, Strom, Kabel, Mobilfunk) | Netzzugang (Layer 1)     |
+
 
 <!--
 SPEAKER NOTES:
@@ -268,7 +261,6 @@ SPEAKER NOTES:
 - Header = Metadaten (wer, wohin, wie groß)
 - Paket/Segment/Frame = gleiche Daten, verschiedene Verpackung
   - Wie Matroschka: Schicht packt Schicht ein
-- Wird klarer beim Schichtenmodell gleich
 -->
 
 ---
@@ -279,13 +271,13 @@ SPEAKER NOTES:
 
 **Latenz** und **Bandbreite** bestimmen, wie schnell Daten ankommen — Latenz misst die Verzögerung, Bandbreite die Kapazität.
 
-| Begriff | Was ist das? | Einheit |
-|---------|--------------|---------|
-| **Latenz** | Verzögerung (hin + zurück) | Millisekunden |
-| **Bandbreite** | Datenmenge pro Zeiteinheit | Mbit/s |
-| **Hop** | Ein Sprung zum nächsten Router | – |
-| **Round-Trip** | Hin- und Rückweg | – |
-| **Ping** | "Bist du da?" + Antwort | ms |
+| Begriff        | Was ist das?                                    | Einheit            |
+|----------------|-------------------------------------------------|--------------------|
+| **Latenz**     | Verzögerung (hin + zurück)                      | Millisekunden (ms) |
+| **Bandbreite** | Datenmenge pro Zeiteinheit                      | Mbit/s             |
+| **Hop**        | Ein Sprung zum nächsten Router (im Internet)    | –                  |
+| **Round-Trip** | Hin- und Rückweg                                | –                  |
+| **Ping**       | Client sendet "ping", bekommt von Server "pong" | ms                 |
 
 <!--
 SPEAKER NOTES:
@@ -309,14 +301,17 @@ SPEAKER NOTES:
 
 Protokolle regeln die Kommunikation auf jeder Schicht — von der Anwendung (HTTP) über den Transport (TCP/UDP) bis zum Routing (IP).
 
-| Protokoll | Wofür? | Port | Schicht |
-|-----------|--------|------|---------|
-| **HTTP** | Webseiten übertragen | 80 | Anwendung |
-| **HTTPS** | HTTP + Verschlüsselung | 443 | Anwendung |
-| **TCP** | Zuverlässige Übertragung | – | Transport |
-| **UDP** | Schnelle Übertragung | – | Transport |
-| **IP** | Routing durchs Internet | – | Internet |
-| **DNS** | Namen → IP-Adressen | 53 | Anwendung |
+| Protokoll | Wofür?                         | Port | Schicht             |
+|-----------|--------------------------------|------|---------------------|
+| **HTTP** | Webseiten + Inhalte übertragen | 80 | Anwendung (Layer 4) |
+| **HTTPS** | HTTP + Verschlüsselung         | 443 | Anwendung (Layer 4) |
+| **DNS** | Namen → IP-Adressen            | 53 | Anwendung (Layer 4) |
+| **TCP** | Zuverlässige Übertragung       | – | Transport (Layer 3) |
+| **UDP** | Schnelle Übertragung           | – | Transport (Layer 3) |
+| **IP** | Routing durchs Internet        | – | Internet (Layer 2)  |
+
+<i><small>HTTP(S) = Hypertext Transfer Protocol (Secure)</small> · <small>DNS = Domain Name System</small> · <small>TCP = Transmission Control Protocol</small> · <small>UDP = User Datagram Protocol</small> · <small>IP = Internet Protocol</small>
+</i>
 
 <!--
 SPEAKER NOTES:
@@ -350,23 +345,23 @@ SPEAKER NOTES:
 
 ![bg right:40% fit](./assets/demos/network-chain.png)
 
-Zwischen Ihnen und einer Webseite liegen viele Stationen.
+Zwischen Klick und fertiger Webseite liegen viele Stationen.
 
-Jede Komponente "spricht" anders:
+Jede Schicht spricht eine andere Sprache:
 
 - Browser → **HTTP**
-- Netzwerkkarte → **Bits / Signale**
+- Netzwerkkarte → **Bit und Signale**
 - Router → **IP-Pakete**
 - Provider → **Routing**
 
-Wie zusammenbringen?
+Diese Sprachen müssen zusammenspielen.
 
 <!--
 SPEAKER NOTES:
 - Browser→Server: min. 7-8 Stationen
 - Jede Station: andere Aufgabe
 - Browser versteht HTTP
-- Netzwerkkarte versteht nur Bits (Strom an/aus)
+- Netzwerkkarte versteht nur Bit (Strom an/aus)
 - Router versteht IP
 - Wie zusammenbringen?
 -->
@@ -375,11 +370,11 @@ SPEAKER NOTES:
 
 # Die Lösung: Arbeitsteilung
 
-Statt dass jedes Programm alles können muss: **Aufgaben aufteilen.**
+Statt dass jedes Programm alles können muss, teilen sich mehrere Schichten die Aufgaben.
 
 | Wer? | Aufgabe | Typische Geräte |
 |------|---------|-----------------|
-| **Browser/App** | Was will ich? | Laptop, Handy, Server |
+| **Browser/Anwendung** | Was will ich? | Laptop, Handy, Server |
 | **TCP/UDP** | Kommt alles an? | – (Software) |
 | **IP** | Welcher Rechner? | Router, Firewall |
 | **Ethernet/WLAN** | Nächstes Gerät? | Switch, Access Point |
@@ -402,15 +397,19 @@ SPEAKER NOTES:
 
 # Das TCP/IP-Modell
 
-| Schicht | Name | Aufgabe | Protokolle |
-|---------|------|---------|------------|
-| **4** | Anwendung | Was? Welcher Dienst? | HTTP, DNS, SMTP |
-| **3** | Transport | Zuverlässigkeit, Ports | TCP, UDP |
-| **2** | Internet | Routing, globale Adressen | IP |
-| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
+| Schicht | Name | Aufgabe                                  | Protokolle        |
+|---------|------|------------------------------------------|-------------------|
+| **4** | Anwendung | Dienste steuern, Daten austauschen etc.  | HTTP, DNS, SMTP   |
+| **3** | Transport | Zuverlässige Verbindung aufbauen (Ports) | TCP, UDP          |
+| **2** | Internet | Routing, global eindeutige Adressen      | IP                |
+| **1** | Netzzugang | Lokale Übertragung                       | Ethernet, WLAN    |
 
 Jede Schicht hat genau eine Aufgabe und nutzt nur die Schicht direkt darunter.
 
+Die oberste Schicht ist die **Anwendungsschicht** — die Ebene eurer Programme (Browser, Mail). Sie nutzt die unteren Schichten, ohne deren Details zu kennen: genau die Abstraktion, die ihr bereits kennt.
+
+<small>SMTP = Simple Mail Transfer Protocol</small>
+
 <!--
 SPEAKER NOTES:
 - TCP/IP = das echte Internet
@@ -419,18 +418,17 @@ SPEAKER NOTES:
   - Transport: Kommt an? Welches Programm? (TCP, UDP)
   - Internet: Wie zum Zielrechner? (IP)
   - Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN)
-- KLAUSUR: Welches Protokoll → welche Schicht
 -->
 
 ---
 
-<!-- _class: erklaerung -->
+<!-- _class: "erklaerung dimmed" -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
 # TCP/IP-Modell – Vertiefung
 
-Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
+Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (Open Systems Interconnection, 7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
 
 **Schicht-Aufgaben im Detail:**
 
@@ -447,15 +445,17 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
 
 **Warum Schichten?** Abstraktion. HTTP muss nicht wissen, ob Ethernet oder WLAN verwendet wird. Änderungen in einer Schicht betreffen andere nicht.
 
+<small>FTP = File Transfer Protocol · ICMP = Internet Control Message Protocol · PPP = Point-to-Point Protocol</small>
+
 ---
 
 # Schichten verpacken Daten
 
 ![bg right:52% fit](./assets/demos/encap-layers.png)
 
-**Encapsulation:** Jede Schicht packt ein.
+**Encapsulation:** Jede Schicht verpackt die Daten der darüberliegenden Schicht.
 
-**Decapsulation:** Beim Empfang wird ausgepackt.
+**Decapsulation:** Beim Empfang packt jede Schicht ihren Teil wieder aus.
 
 <!--
 SPEAKER NOTES:
@@ -464,7 +464,7 @@ SPEAKER NOTES:
 - TCP: eigener Header dazu (Ports, Seq-Nr) → weiter
 - IP: eigener Header dazu (IPs) → weiter
 - Ethernet: Header + Trailer (MACs, Prüfsumme)
-- Am Ende: Bits → elektrische Signale / Funk
+- Am Ende: Bit → elektrische Signale / Funk
 - Empfang: Rückwärts auspacken
 -->
 
@@ -507,32 +507,31 @@ SPEAKER NOTES:
 | Schicht | Einheit | Header-Inhalte |
 |---------|---------|----------------|
 | Anwendung | Daten | HTTP-Header, Cookies, Content-Type |
-| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN, ACK) |
-| Internet | Paket | Quell-/Ziel-IP, TTL, Protokoll (TCP=6, UDP=17) |
-| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme |
+| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN = Synchronize, ACK = Acknowledge) |
+| Internet | Paket | Quell-/Ziel-IP, TTL (Time To Live), Protokoll (TCP=6, UDP=17) |
+| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme (Cyclic Redundancy Check) |
 
 **Overhead-Rechnung (1 Byte HTTP-Body):**
-- Ethernet: 14 + 4 Bytes (Header + Trailer)
-- IP: 20 Bytes (ohne Optionen)
-- TCP: 20 Bytes (ohne Optionen)
-- **Minimum: 58 Bytes für 1 Byte Nutzlast**
+- Ethernet: 14 + 4 Byte (Header + Trailer)
+- IP: 20 Byte (ohne Optionen)
+- TCP: 20 Byte (ohne Optionen)
+- **Minimum: 58 Byte für 1 Byte Nutzlast**
 
 **Decapsulation:** Empfänger packt in umgekehrter Reihenfolge aus. Jede Schicht prüft ihren Header (z.B. CRC) und reicht Nutzdaten nach oben.
 
 ---
 
-# Warum ist das clever?
+# Vorteile der Schichtung
 
 **Ohne Schichten:**
-Jede App müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert, wie Router Pakete weiterleiten...
+Jede Anwendung müsste wissen, wie Ethernet-Frames gebaut werden, wie WLAN funktioniert und wie Router Pakete weiterleiten.
 
 **Mit Schichten:**
-Der Browser sagt: "Ich will diese Seite."
-Alles andere übernehmen die Schichten darunter.
+Die Anwendungsschicht (z.B. der Browser) fordert nur die Seite an. Alles Weitere übernehmen die Schichten darunter.
 
 **Austauschbarkeit:**
-WLAN statt Ethernet? Nur Schicht 1 ändert sich.
-HTTP/2 statt HTTP/1? Nur Schicht 4 ändert sich.
+Wechselt WLAN zu Ethernet, ändert sich nur Schicht 1.
+Löst HTTP/2 die Version HTTP/1 ab, ändert sich nur Schicht 4.
 
 <!--
 SPEAKER NOTES:
@@ -545,9 +544,9 @@ SPEAKER NOTES:
 
 ---
 
-# Exkurs: OSI vs. TCP/IP
+# OSI vs. TCP/IP
 
-![bg right:50% fit](./assets/demos/osi-tcpip-diagram.png)
+![bg right:48% fit](./assets/demos/osi-tcpip-diagram.png)
 
 OSI (7 Schichten) ist ein theoretisches Referenzmodell — TCP/IP (4 Schichten) beschreibt das reale Internet.
 
@@ -565,7 +564,7 @@ SPEAKER NOTES:
 <!-- _class: lead -->
 
 # Die drei Adressen
-## IP, MAC und Port – wer braucht was?
+## IP, MAC und Port im Zusammenspiel
 
 <!--
 SPEAKER NOTES:
@@ -584,10 +583,8 @@ SPEAKER NOTES:
 - **Global eindeutig** (im gesamten Internet)
 - Identifiziert einen **Rechner**
 - **Bleibt gleich** auf dem gesamten Weg
-- Analogie: **Empfänger auf einem Brief**
 
-Router lesen die IP und entscheiden:
-"Ist das für mich? Nein → in welche Richtung weiterleiten?"
+Router lesen die Ziel-IP und leiten das Paket in die passende Richtung weiter.
 
 <!--
 SPEAKER NOTES:
@@ -608,9 +605,8 @@ aa:bb:cc:dd:ee:ff
 - **Lokal eindeutig** (nur im lokalen Netzwerk relevant)
 - Identifiziert eine **Netzwerkkarte**
 - **Ändert sich bei jedem Hop**
-- Analogie: **"Nächstes Postamt: XY"**
 
-Funktioniert nur innerhalb eines Netzwerksegments.
+Sie funktioniert nur innerhalb eines Netzwerksegments.
 
 <!--
 SPEAKER NOTES:
@@ -629,11 +625,11 @@ SPEAKER NOTES:
 
 ![bg right:35% fit](./assets/demos/port-highlight.png)
 
-Ein Port identifiziert ein **Programm** auf einem Rechner — wie eine **Wohnungstür im Mehrfamilienhaus**.
+Ein Port identifiziert ein bestimmtes **Programm** (bzw. einen Dienst) auf einem Rechner.
 
 - **80** → HTTP
 - **443** → HTTPS
-- **22** → SSH
+- **22** → SSH (Secure Shell)
 - **53** → DNS
 
 <!--
@@ -682,6 +678,11 @@ SPEAKER NOTES:
 
 Drei Adressebenen lösen drei verschiedene Probleme:
 
+**Port (Schicht 3 – Transport):**
+- 16 Bit → 65.535 mögliche Ports
+- Well-Known Ports (0–1023): HTTP=80, HTTPS=443, SSH=22
+- Ephemeral Ports (49152–65535): Dynamisch für Client-Verbindungen
+
 **IP-Adresse (Schicht 2 – Internet):**
 - Hierarchisch aufgebaut: Netzwerk-Teil + Host-Teil
 - Router lesen nur den Netzwerk-Teil für Routing-Entscheidungen
@@ -693,19 +694,14 @@ Drei Adressebenen lösen drei verschiedene Probleme:
 - Nur relevant für den **nächsten Hop** – wird bei jedem Router ersetzt
 - ARP (Address Resolution Protocol) übersetzt IP → MAC
 
-**Port (Schicht 3 – Transport):**
-- 16 Bit → 65.535 mögliche Ports
-- Well-Known Ports (0–1023): HTTP=80, HTTPS=443, SSH=22
-- Ephemeral Ports (49152–65535): Dynamisch für Client-Verbindungen
-
-**Warum ändert sich nur MAC?** IP ist das Endziel (Brief-Adresse), MAC ist der aktuelle Bote (wer trägt den Brief gerade?).
+**Nur die MAC-Adresse ändert sich unterwegs:** Die IP bezeichnet das Endziel und bleibt konstant, die MAC nur den jeweils nächsten Hop und wird an jedem Router ersetzt.
 
 ---
 
 <!-- _class: lead -->
 
 # Die Reise eines Klicks
-## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?
+## Was passiert, wenn ihr `www.hdm-stuttgart.de` aufruft?
 
 <!--
 SPEAKER NOTES:
@@ -719,13 +715,13 @@ SPEAKER NOTES:
 
 # Das Szenario
 
-Sie sind im WLAN der HdM und rufen auf:
+Ihr seid im WLAN der HdM und ruft auf:
 
 ```
 https://www.hdm-stuttgart.de
 ```
 
-**Zwischen Enter und fertiger Seite:** ~200 Millisekunden.
+Zwischen Enter und fertiger Seite vergehen rund 200 Millisekunden.
 
 In dieser Zeit passieren hunderte Operationen.
 
@@ -781,11 +777,11 @@ SPEAKER NOTES:
 www.hdm-stuttgart.de  →  212.132.79.37
 ```
 
-Ihr Laptop fragt sich durch:
+Euer Laptop arbeitet die Quellen der Reihe nach ab:
 
-1. **Browser-Cache:** "War ich da kürzlich?" → Nein
-2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
-3. **Router/Provider:** DNS-Server wird gefragt
+1. **Browser-Cache** prüfen → kein Eintrag
+2. **OS-Cache** prüfen → kein Eintrag
+3. **Router/Provider:** DNS-Server anfragen
 
 <!--
 SPEAKER NOTES:
@@ -802,12 +798,12 @@ SPEAKER NOTES:
 
 ![bg right:45% fit](./assets/demos/dns-tree.png)
 
-**Dezentral:** Niemand kennt alles.
+DNS ist **dezentral** organisiert: Kein Server kennt alle Namen.
 
-Jede Ebene kennt nur die nächste:
+Jede Ebene verweist nur auf die Ebene darunter:
 
-- Root → .de, .com, .org
-- .de → alle .de-Domains
+- Root → TLDs (Top-Level-Domains: .de, .com, .org)
+- .de → autoritative Server jeder .de-Domain
 - hdm-stuttgart.de → www, mail, …
 
 <!--
@@ -842,7 +838,7 @@ SPEAKER NOTES:
 
 # DNS ist selbst Netzwerk
 
-Die DNS-Anfrage ist ein ganz normales Paket:
+Die DNS-Anfrage ist ein gewöhnliches Paket:
 
 | Eigenschaft | Wert |
 |-------------|------|
@@ -858,7 +854,7 @@ SPEAKER NOTES:
 - DNS = normales Netzwerk-Protokoll
 - Nutzt UDP (schneller, kleine Anfragen)
 - Port 53
-- Wird auch verpackt: UDP→IP→Ethernet→Bits
+- Wird auch verpackt: UDP→IP→Ethernet→Bit
 -->
 
 ---
@@ -873,7 +869,7 @@ www.hdm-stuttgart.de = 212.132.79.37
 
 Diese Information wird gecached (für Minuten bis Stunden).
 
-**Nächster Schritt:** Verbindung aufbauen.
+Der nächste Schritt ist der Verbindungsaufbau.
 
 <!--
 SPEAKER NOTES:
@@ -900,7 +896,7 @@ SPEAKER NOTES:
 
 ---
 
-# Warum ein Handshake?
+# Zweck des Handshakes
 
 TCP ist **verbindungsorientiert**:
 
@@ -909,9 +905,7 @@ TCP ist **verbindungsorientiert**:
 - Verlorene Pakete können erkannt und neu angefordert werden
 
 **Analogie:**
-Telefonat: Klingeln → Abheben → "Hallo?" → Gespräch beginnt
-
-Nicht: Einfach losreden und hoffen, dass jemand zuhört.
+Telefonat: Klingeln → Abheben → Gespräch beginnt
 
 <!--
 SPEAKER NOTES:
@@ -971,7 +965,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
 - SYN-Flood-Attacke: Millionen SYNs ohne ACK → Server-Ressourcen erschöpft
 - Schutz: SYN-Cookies (Server speichert keinen State bis ACK kommt)
 
-**Verbindungsabbau:** 4-Way-Handshake (FIN → ACK → FIN → ACK) oder RST für sofortigen Abbruch.
+**Verbindungsabbau:** 4-Way-Handshake (FIN = Finish → ACK → FIN → ACK) oder RST (Reset) für sofortigen Abbruch.
 
 ---
 
@@ -981,7 +975,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
 
 ![bg right:42% fit](./assets/demos/client-server-ports.png)
 
-**Jetzt erst** kann HTTP gesprochen werden.
+Erst jetzt kann HTTP übertragen werden.
 
 <!--
 SPEAKER NOTES:
@@ -1006,10 +1000,10 @@ SPEAKER NOTES:
 
 ---
 
-# Was Ihr Browser sendet
+# Was euer Browser sendet
 
 ```http
-GET / HTTP/1.1
+GET / HTTP/2.0
 Host: www.hdm-stuttgart.de
 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
 Accept: text/html
@@ -1017,19 +1011,19 @@ Accept-Language: de-DE
 Connection: keep-alive
 ```
 
-~200 Bytes Text.
+Der Request umfasst rund 200 Byte Text.
 
-**GET** = "Gib mir" (im Gegensatz zu POST = "Nimm das")
-**/** = "Die Startseite"
+**GET** ruft Daten ab (im Gegensatz zu **POST**, das Daten sendet).
+**/** bezeichnet die Startseite.
 
 <!--
 SPEAKER NOTES:
 - HTTP-Request: lesbar, menschlich verständlich
-- GET = "hol mir was" (POST = "hier Daten für Sie")
+- GET = "hol mir was" (POST = "hier Daten für euch")
 - "/" = Wurzel = Startseite
-- HTTP/1.1 = Protokollversion
+- HTTP/2.0 = Protokollversion
 - Header: Kontext (Host, Browser, Sprache)
-- ~200 Bytes Text → müssen durchs Internet
+- ~200 Byte Text → müssen durchs Internet
 -->
 
 ---
@@ -1041,7 +1035,7 @@ SPEAKER NOTES:
 
 <!--
 SPEAKER NOTES:
-- 200 Bytes Request → was passiert damit?
+- 200 Byte Request → was passiert damit?
 - Schicht für Schicht verpacken
 -->
 
@@ -1109,13 +1103,16 @@ SPEAKER NOTES:
 
 ---
 
-# Woher kennt Ihr Laptop die Router-MAC?
+
+<!-- _class: dimmed -->
+
+# Router-MAC per ARP ermitteln
 
 **ARP** – Address Resolution Protocol
 
 ![w:900 center](./assets/demos/arp-lookup.png)
 
-Das passiert automatisch. Die Info wird gecached.
+Das geschieht automatisch. Die Information wird gecached.
 
 <!--
 SPEAKER NOTES:
@@ -1130,7 +1127,7 @@ SPEAKER NOTES:
 
 # Layer 1: Physical
 
-Frame wird zu **Bits** – Bits werden zu Signalen:
+Frame wird zu **Bit** – Bit werden zu Signalen:
 
 | Medium | Signal |
 |--------|--------|
@@ -1142,12 +1139,12 @@ Frame wird zu **Bits** – Bits werden zu Signalen:
 01001000 01010100 01010100 01010000 ...
 ```
 
-Ab hier übernimmt die Physik.
+Ab Schicht 1 erfolgt die Übertragung physikalisch.
 
 <!--
 SPEAKER NOTES:
 - Ganz unten: Physik
-- Frame → Bits → Signale
+- Frame → Bit → Signale
 - Je nach Medium:
   - Kupfer: Spannung High/Low
   - Glasfaser: Licht an/aus
@@ -1170,22 +1167,22 @@ SPEAKER NOTES:
 
 ---
 
-# Der erste Hop: Ihr Router
+# Der erste Hop: Euer Router
 
 **Laptop** → [Frame] → **Router**
 
-Der Router empfängt:
+Der Router verarbeitet das Frame in drei Schritten:
 
-1. **Layer 1:** Signale → Bits
-2. **Layer 2:** Frame prüfen. MAC okay? → Auspacken
-3. **Layer 3:** IP lesen. "212.132.79.37 – nicht mein Netz"
+1. **Layer 1:** Signale werden zu Bit.
+2. **Layer 2:** Frame und MAC-Adresse werden geprüft, dann ausgepackt.
+3. **Layer 3:** Die Ziel-IP liegt außerhalb des lokalen Netzes.
 
-**Routing-Entscheidung:** "Ich schicke es Richtung Internet."
+**Routing-Entscheidung:** Das Paket geht Richtung Internet weiter.
 
 <!--
 SPEAKER NOTES:
 - Router empfängt Frame
-- Physik: Signale → Bits
+- Physik: Signale → Bit
 - Ethernet: MAC okay? Prüfsumme okay? → auspacken
 - IP: Ziel-IP lesen → 212.132.79.37 → nicht mein Netz
 - Routing-Tabelle: In welche Richtung?
@@ -1193,7 +1190,7 @@ SPEAKER NOTES:
 
 ---
 
-# Der Router verpackt NEU
+# Der Router verpackt neu
 
 ![w:900 center](./assets/demos/ethernet-rehop.png)
 
@@ -1216,7 +1213,7 @@ SPEAKER NOTES:
 
 ![bg right:35% fit](./assets/demos/hop-chain.png)
 
-Bei jedem Hop:
+Bei jedem Hop laufen drei Schritte ab:
 
 1. Auspacken bis Layer 3 (IP)
 2. Routing-Entscheidung
@@ -1252,14 +1249,14 @@ SPEAKER NOTES:
 
 ![bg right:42% fit](./assets/demos/server-decap.png)
 
-Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+Jede Schicht prüft, ob das Paket für sie bestimmt ist, und packt dann die nächste aus.
 
-Am Ende versteht der Webserver: "Jemand will die Startseite."
+Am Ende erkennt der Webserver die Anfrage nach der Startseite.
 
 <!--
 SPEAKER NOTES:
 - Schicht für Schicht auspacken:
-  - Physik → Bits
+  - Physik → Bit
   - Ethernet → Frame prüfen → auspacken
   - IP → Ziel-IP = meine? Ja → auspacken
   - TCP → Port 443 = Webserver-Prozess → auspacken
@@ -1272,7 +1269,7 @@ SPEAKER NOTES:
 # Der Server antwortet
 
 ```http
-HTTP/1.1 200 OK
+HTTP/2.0 200 OK
 Content-Type: text/html; charset=UTF-8
 Content-Length: 45231
 
@@ -1283,13 +1280,13 @@ Content-Length: 45231
 ...
 ```
 
-~45 KB HTML müssen jetzt zu Ihnen.
+Rund 45 KB HTML müssen nun zu euch übertragen werden.
 
 <!--
 SPEAKER NOTES:
 - Antwort: 200 OK = alles gut
 - Content-Type: HTML
-- Content-Length: 45231 Bytes
+- Content-Length: 45231 Byte
 - Dann: eigentlicher HTML-Code
 -->
 
@@ -1297,7 +1294,7 @@ SPEAKER NOTES:
 
 # Encapsulation beim Server
 
-Der Server macht **dasselbe** – nur in die andere Richtung:
+Der Server durchläuft dieselben Schritte – nur in umgekehrter Richtung:
 
 ![bg right:40% fit](./assets/demos/encap-stack.png)
 
@@ -1316,7 +1313,7 @@ SPEAKER NOTES:
 
 ![bg right:38% fit](./assets/demos/response-hops.png)
 
-Gleiches Spiel wie der Hinweg:
+Der Rückweg funktioniert wie der Hinweg:
 
 - Hop für Hop durchs Internet
 - **IP bleibt gleich** (Start/Ziel)
@@ -1331,13 +1328,13 @@ SPEAKER NOTES:
 
 ---
 
-# Decapsulation bei Ihnen
+# Decapsulation bei euch
 
 ![bg right:42% fit](./assets/demos/decap-stack.png)
 
-Rückweg = Encapsulation umgekehrt.
+Der Rückweg ist die umgekehrte Encapsulation.
 
-Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+Jede Schicht prüft, ob das Paket für sie bestimmt ist, und packt dann die nächste aus.
 
 <!--
 SPEAKER NOTES:
@@ -1406,7 +1403,7 @@ Beide sind Transport-Protokolle (Schicht 3), aber mit fundamental unterschiedlic
 **UDP (User Datagram Protocol):**
 - Verbindungslos (Fire-and-Forget)
 - Keine Sequenznummern, keine ACKs
-- Header nur 8 Bytes (TCP: 20+ Bytes)
+- Header nur 8 Byte (TCP: 20+ Byte)
 - Anwendung muss selbst für Zuverlässigkeit sorgen
 
 | Anwendung | Protokoll | Grund |
@@ -1420,7 +1417,7 @@ Beide sind Transport-Protokolle (Schicht 3), aber mit fundamental unterschiedlic
 
 ---
 
-# Warum UDP bei Video-Calls?
+# UDP bei Video-Calls
 
 **Szenario:** Ein Paket geht verloren.
 
@@ -1441,13 +1438,15 @@ SPEAKER NOTES:
 
 ---
 
+<!-- _class: dimmed -->
+
 # MTU & Fragmentierung
 
 **MTU** = Maximum Transmission Unit
 
-Ethernet-Frame kann maximal **1500 Bytes** Nutzdaten transportieren.
+Ein Ethernet-Frame kann maximal **1500 Byte** Nutzdaten transportieren.
 
-**Problem:** Ein Foto hat 3.000.000 Bytes.
+**Problem:** Ein Foto hat 3.000.000 Byte.
 
 **Lösung:** TCP zerschneidet die Daten in ~2000 Segmente.
 Jedes Segment hat eine Sequenznummer.
@@ -1456,7 +1455,7 @@ Der Empfänger setzt sie zusammen.
 <!--
 SPEAKER NOTES:
 - MTU = physikalisches Limit
-- Ethernet-Frame: max 1500 Bytes Nutzdaten
+- Ethernet-Frame: max 1500 Byte Nutzdaten
 - Webseite 100KB, Video Gigabytes?
 - TCP zerschneidet in passende Stücke
   - Jedes mit Sequenznummer
@@ -1465,21 +1464,24 @@ SPEAKER NOTES:
 
 ---
 
+
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 # HTTP-Methoden
 
 HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
 
-| Methode | Bedeutung | Beispiel |
-|---------|-----------|----------|
-| **GET** | Daten abrufen | Seite laden |
-| **POST** | Daten senden | Formular absenden |
-| **PUT** | Daten ersetzen | Profil aktualisieren |
-| **DELETE** | Daten löschen | Account löschen |
+| Methode | Bedeutung | Beispiel                                      |
+|---------|-----------|-----------------------------------------------|
+| **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0`        |
+| **POST** | Daten senden | Formular absenden `POST /login HTTP/2.0`      |
+| **PUT** | Daten ersetzen | Profil aktualisieren `PUT /users/42 HTTP/2.0` |
+| **DELETE** | Daten löschen | Account löschen `DELETE /users/42 HTTP/2.0`                               |
+
+<small>CRUD = Create, Read, Update, Delete</small>
 
-```http
-GET /index.html HTTP/1.1
-POST /login HTTP/1.1
-```
 
 <!--
 SPEAKER NOTES:
@@ -1518,7 +1520,7 @@ HTTP-Methoden definieren die **Semantik** der Anfrage – was der Client vom Ser
 **Idempotent:** Mehrfaches Ausführen hat denselben Effekt wie einmaliges (GET, PUT, DELETE).
 **Safe:** Ändert nichts am Server (nur GET, HEAD, OPTIONS).
 
-**REST-Prinzip:** URLs identifizieren Ressourcen, Methoden definieren Aktionen.
+**REST-Prinzip** (Representational State Transfer): URLs identifizieren Ressourcen, Methoden definieren Aktionen.
 ```
 GET /users/42        → Benutzer 42 abrufen
 PUT /users/42        → Benutzer 42 vollständig ersetzen
@@ -1528,14 +1530,18 @@ POST /users          → Neuen Benutzer erstellen
 
 ---
 
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 # HTTP Status-Codes
 
 Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
 
 ```http
-HTTP/1.1 200 OK
-HTTP/1.1 404 Not Found
-HTTP/1.1 500 Internal Server Error
+HTTP/2.0 200 OK
+HTTP/2.0 404 Not Found
+HTTP/2.0 500 Internal Server Error
 ```
 
 | Code-Bereich | Bedeutung |
@@ -1582,10 +1588,13 @@ Die erste Ziffer kategorisiert die Antwort:
 - **301 vs. 302:** 301 = permanent umgezogen (Cache-fähig), 302 = temporär (nicht cachen)
 - **304 Not Modified:** Browser hat Cache, Server bestätigt: noch aktuell → spart Bandbreite
 
-**API-Design:** Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
+**API-Design** (Application Programming Interface): Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
 
 ---
 
+
+<!-- _class: dimmed -->
+
 # Zusammenfassung Teil 1
 
 **Der Ablauf:**
@@ -1632,11 +1641,11 @@ Die vier Kernkonzepte für Web-Entwickelnde:
 - Caching auf jeder Ebene (TTL = Time To Live)
 
 **2. TCP-Verbindungsaufbau:**
-- 3-Way-Handshake vor jeder HTTP-Anfrage (HTTP/1.1)
+- 3-Way-Handshake vor jeder HTTP(S)-Anfrage (HTTP/2.0)
 - Keep-Alive: Verbindung bleibt offen für mehrere Requests
 - HTTP/2: Multiplexing – viele Requests über eine Verbindung
 
-**3. HTTP Request/Response:**
+**3. HTTP(S) Request/Response:**
 ```
 Request:  Methode + URL + Header + (Body)
 Response: Status + Header + Body
@@ -1696,7 +1705,7 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
 
 ---
 
-# Was ist CSS?
+# CSS im Überblick
 
 ![bg right:35%](./assets/demos/css-anatomie.png)
 
@@ -1709,7 +1718,7 @@ p {
 }
 ```
 
-- Trennt **Inhalt** (HTML) von **Darstellung** (CSS)
+- Trennt **Inhalt** (HTML – Hypertext Markup Language) von **Darstellung** (CSS)
 - "Cascading" = Regeln können überschrieben werden
 - Eine CSS-Datei kann viele HTML-Seiten stylen
 
@@ -1729,7 +1738,7 @@ Vorteil: Ihr könnt das Design der ganzen Website ändern, indem ihr eine Datei
 
 # CSS einbinden
 
-**Option 1: Externe Datei** ✓
+**Option 1: Externe Datei** (empfohlen)
 ```html
 <link rel="stylesheet" href="style.css">
 ```
@@ -1739,7 +1748,7 @@ Vorteil: Ihr könnt das Design der ganzen Website ändern, indem ihr eine Datei
 <style>p { color: blue; }</style>
 ```
 
-**Option 3: Inline** ✗
+**Option 3: Inline** (vermeiden)
 ```html
 <p style="color: blue;">...</p>
 ```
@@ -1875,7 +1884,7 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
 
 **Raute** vor dem Namen = ID
 
-⚠️ IDs sollten **einmalig** pro Seite sein.
+**Achtung:** IDs sollten **einmalig** pro Seite sein.
 
 <!--
 SPEAKER NOTES:
@@ -1923,7 +1932,7 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
 
 ---
 
-# Spezifität: Welche Regel gewinnt?
+# Spezifität von Selektoren
 
 ![bg right:35%](./assets/demos/css-specificity.png)
 
@@ -1979,7 +1988,7 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
 - Eine ID schlägt jede Anzahl von Klassen
 - `!important` bricht alles → vermeiden, da schwer zu überschreiben
 
-**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (`.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
+**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (Block Element Modifier, `.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
 
 ---
 
@@ -2059,22 +2068,19 @@ Best Practice: Setzt das global für alle Elemente.
 
 ![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 kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
 
 ```css
 /* Keyword */
 color: red;
 color: rebeccapurple;
-
 /* Hex */
 color: #FF0000;
 color: #F00;
-
-/* RGB / RGBA */
+/* RGB = Red Green Blue, RGBA mit Alpha */
 color: rgb(255, 0, 0);
 color: rgba(255, 0, 0, 0.5);
-
-/* HSL */
+/* HSL = Hue, Saturation, Lightness */
 color: hsl(0, 100%, 50%);
 ```
 
@@ -2307,7 +2313,7 @@ Einheiten: rem für Schrift, relative Einheiten für Layout.
 
 # Fragen & Diskussion
 
-**Nächster Termin:** 24.01.2026 – JavaScript
+**Nächstes Thema:** JavaScript
 
 **Kontakt:** lb-czechowski@hdm-stuttgart.de
 

slides/223015c/03-interaktivitaet-javascript.md

@@ -98,7 +98,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Kapitel 3 – 24.01.2026
+# Kapitel 3
 ## Interaktivität & JavaScript
 
 ---
@@ -119,16 +119,15 @@ Hochschule der Medien Stuttgart
 
 ---
 
-# Was ist JavaScript?
+# JavaScript im Überblick
 
-**Die einzige Programmiersprache, die im Browser läuft!**
+JavaScript ist die einzige Programmiersprache, die nativ im Browser läuft.
 
 - **1995:** In 10 Tagen entwickelt (Brendan Eich, Netscape)
 - **Heute:** Überall – Browser, Server, Apps, IoT
 
 **Nicht verwechseln:**
-- Java ≠ JavaScript (komplett unterschiedlich!)
-- "JavaScript ist zu Java wie Carpet zu Car"
+- Java und JavaScript sind zwei völlig verschiedene Sprachen.
 
 <!--
 Ursprünglich "Mocha", dann "LiveScript", dann "JavaScript" (Marketing!)
@@ -159,7 +158,7 @@ ES6 = großes Update mit vielen Features
 
 # JavaScript einbinden
 
-**Option 1: Externe Datei (empfohlen!)**
+**Option 1: Externe Datei (empfohlen)**
 ```html
 <body>
     <!-- Inhalt -->
@@ -174,7 +173,7 @@ ES6 = großes Update mit vielen Features
 </script>
 ```
 
-⚠️ Script am **Ende** des `<body>` – damit HTML zuerst lädt!
+**Wichtig:** Das Script gehört ans **Ende** des `<body>`, damit das HTML zuerst lädt.
 
 <!--
 Externe Datei = wiederverwendbar, cachebar
@@ -184,7 +183,7 @@ Oder: defer-Attribut
 
 ---
 
-# Die Konsole: Euer bester Freund
+# Die JavaScript-Konsole
 
 **Browser DevTools → Console**
 - Windows/Linux: `F12` oder `Strg+Shift+I`
@@ -196,7 +195,7 @@ console.log(42);
 console.log("Die Antwort ist:", 42);
 ```
 
-**Direkt in der Konsole tippen und Enter!**
+Befehle lassen sich direkt in der Konsole eingeben und mit Enter ausführen.
 
 <!--
 Console = REPL (Read-Eval-Print-Loop)
@@ -348,20 +347,20 @@ true || false  // true (ODER)
 
 **In der Browser-Konsole:**
 
-1. Erstellen Sie Variablen für sich:
+1. Erstellt Variablen für euch:
    ```javascript
    const name = "Your Name";
    let age = 20;
    const hobbies = ["Hobby1", "Hobby2"];
    ```
 
-2. Gib sie aus:
+2. Gebt sie aus:
    ```javascript
    console.log(`I am ${name}, ${age} years old.`);
    console.log("My hobbies:", hobbies);
    ```
 
-3. Erstelle ein `person`-Objekt und greife auf Properties zu
+3. Erstellt ein `person`-Objekt und greift auf Properties zu
 
 ---
 
@@ -491,7 +490,7 @@ Funktionale Programmierung, Original-Array bleibt unverändert
 
 ---
 
-# Was ist das DOM?
+# Das DOM im Überblick
 
 **D**ocument **O**bject **M**odel
 
@@ -512,7 +511,7 @@ Jedes Element ist ein Objekt
 # Elemente finden
 
 ```javascript
-// Einzelnes Element (erstes gefundene)
+// Einzelnes Element (erstes gefundenes)
 document.getElementById("meinId");
 document.querySelector(".meineKlasse");
 document.querySelector("nav > a");
@@ -632,10 +631,10 @@ remove = aus DOM entfernen
 
 **Aufgaben (in script.js):**
 
-1. Ändere den Text von `#output`
-2. Füge 5 `<li>`-Elemente zur Liste hinzu (mit Schleife!)
-3. Gib jedem geraden Element eine Klasse `highlight`
-4. Style `.highlight` in CSS (z.B. andere Farbe)
+1. Ändert den Text von `#output`
+2. Fügt 5 `<li>`-Elemente zur Liste hinzu (mit Schleife)
+3. Gebt jedem geraden Element eine Klasse `highlight`
+4. Gestaltet `.highlight` in CSS (z. B. andere Farbe)
 
 ---
 
@@ -646,7 +645,7 @@ remove = aus DOM entfernen
 
 ---
 
-# Was sind Events?
+# Events im Überblick
 
 **NutzerInnen interagieren mit der Seite:**
 - Klicken
@@ -654,7 +653,7 @@ remove = aus DOM entfernen
 - Scrollen
 - Formulare absenden
 
-**JavaScript kann darauf reagieren!**
+JavaScript kann auf diese Ereignisse reagieren.
 
 <!--
 Event = Ereignis
@@ -784,9 +783,9 @@ toggleButton.addEventListener("click", () => {
     
     // Button-Text ändern
     if (body.classList.contains("dark-mode")) {
-        toggleButton.textContent = "☀️ Light Mode";
+        toggleButton.textContent = "Light Mode";
     } else {
-        toggleButton.textContent = "🌙 Dark Mode";
+        toggleButton.textContent = "Dark Mode";
     }
 });
 ```
@@ -1002,21 +1001,21 @@ Frameworks für größere Apps, Komponenten-basiert
 
 ---
 
-# Ihr könnt jetzt...
+# Das könnt ihr jetzt
 
 - Den historischen Kontext von IT verstehen
 - Erklären wie das Internet funktioniert
 - HTML-Seiten strukturieren
 - CSS für Layout und Design nutzen
 - JavaScript für Interaktivität einsetzen
-- **Mit EntwicklerInnen auf Augenhöhe sprechen!**
+- **Mit EntwicklerInnen auf Augenhöhe sprechen**
 
 ---
 
-# Feedback – Eure Meinung zählt!
+# Feedback
 
 Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
-**Es gibt keine falschen Antworten!**
+Es gibt keine falschen Antworten.
 
 - Was hat gut funktioniert?
 - Was könnte besser sein?
@@ -1028,7 +1027,7 @@ Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
 
 <!-- _class: lead -->
 
-# Danke!
+# Danke
 
 **Kontakt:** lb-czechowski@hdm-stuttgart.de
 

slides/223015c/assets/demos/osi-tcpip-diagram.html

@@ -6,47 +6,70 @@
   <style>
     html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
     body { padding: 30px 40px; display: inline-block; }
-    .wrap { display: flex; gap: 36px; align-items: flex-start; }
-    .col { display: flex; flex-direction: column; gap: 4px; }
-    h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
+    .headers {
+      display: grid;
+      grid-template-columns: 240px 240px;
+      column-gap: 36px;
+      margin-bottom: 10px;
+    }
+    .headers h3 { margin: 0; font-size: 1.1rem; color: #1a1a2e; text-align: center; }
+    .grid {
+      display: grid;
+      grid-template-columns: 240px 240px;
+      grid-template-rows: repeat(7, 48px);
+      column-gap: 36px;
+      row-gap: 6px;
+    }
     .box {
       border: 2px solid #4a4a6a;
-      padding: 10px 20px;
-      min-width: 230px;
-      font-size: 0.95rem;
-      background: #f3f4f6;
+      border-radius: 4px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 4px;
+      font-size: 0.95rem;
+      text-align: center;
+      padding: 0 12px;
     }
-    .osi .box { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
-    .tcpip .box { background: #fce7d6; border-color: #c2410c; color: #7c2d12; font-weight: 600; }
-    .tcpip .app { min-height: 126px; }
-    .tcpip .trans { min-height: 40px; }
-    .tcpip .net { min-height: 40px; }
-    .tcpip .link { min-height: 82px; }
+    .osi {
+      background: #dbeafe;
+      border-color: #1e40af;
+      color: #1e3a8a;
+    }
+    .tcpip {
+      background: #fce7d6;
+      border-color: #c2410c;
+      color: #7c2d12;
+      font-weight: 600;
+    }
+    /* OSI: column 1, one box per row */
+    .o7 { grid-area: 1 / 1; } .o6 { grid-area: 2 / 1; } .o5 { grid-area: 3 / 1; }
+    .o4 { grid-area: 4 / 1; } .o3 { grid-area: 5 / 1; } .o2 { grid-area: 6 / 1; }
+    .o1 { grid-area: 7 / 1; }
+    /* TCP/IP: column 2, each block spans its OSI equivalents */
+    .t-app  { grid-area: 1 / 2 / 4 / 2; }  /* OSI 5-7 */
+    .t-tra  { grid-area: 4 / 2 / 5 / 2; }  /* OSI 4   */
+    .t-net  { grid-area: 5 / 2 / 6 / 2; }  /* OSI 3   */
+    .t-link { grid-area: 6 / 2 / 8 / 2; }  /* OSI 1-2 */
   </style>
 </head>
 <body>
-  <div class="wrap">
-    <div class="col osi">
-      <h3>OSI (7 Schichten)</h3>
-      <div class="box">7. Anwendung</div>
-      <div class="box">6. Darstellung</div>
-      <div class="box">5. Sitzung</div>
-      <div class="box">4. Transport</div>
-      <div class="box">3. Vermittlung</div>
-      <div class="box">2. Sicherung</div>
-      <div class="box">1. Bitübertragung</div>
-    </div>
-    <div class="col tcpip">
-      <h3>TCP/IP (4 Schichten)</h3>
-      <div class="box app">Anwendung</div>
-      <div class="box trans">Transport</div>
-      <div class="box net">Internet</div>
-      <div class="box link">Netzzugang</div>
-    </div>
+  <div class="headers">
+    <h3>OSI (7 Schichten)</h3>
+    <h3>TCP/IP (4 Schichten)</h3>
+  </div>
+  <div class="grid">
+    <div class="box osi o7">7. Anwendung</div>
+    <div class="box osi o6">6. Darstellung</div>
+    <div class="box osi o5">5. Sitzung</div>
+    <div class="box osi o4">4. Transport</div>
+    <div class="box osi o3">3. Vermittlung</div>
+    <div class="box osi o2">2. Sicherung</div>
+    <div class="box osi o1">1. Bitübertragung</div>
+
+    <div class="box tcpip t-app">Anwendung</div>
+    <div class="box tcpip t-tra">Transport</div>
+    <div class="box tcpip t-net">Internet</div>
+    <div class="box tcpip t-link">Netzzugang</div>
   </div>
 </body>
 </html>

slides/223015c/assets/demos/port-highlight.html

@@ -5,18 +5,17 @@
   <title>Port-Highlight</title>
   <style>
     html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
-    body { padding: 28px 40px; display: inline-block; }
+    body { padding: 28px 40px 110px; display: inline-block; }
     .line {
       font-family: ui-monospace, "SF Mono", monospace;
       font-size: 2.2rem;
       color: #1a1a2e;
       display: flex;
-      align-items: center;
+      align-items: baseline;
     }
     .port-wrap {
-      display: inline-flex;
-      flex-direction: column;
-      align-items: center;
+      position: relative;
+      display: inline-block;
       margin-left: 4px;
     }
     .port {
@@ -26,11 +25,20 @@
       border-radius: 4px;
       font-weight: 700;
     }
+    .below {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 4px;
+    }
     .connector {
       width: 2px;
       height: 18px;
       background: #c2410c;
-      margin-top: 4px;
     }
     .caption-text {
       background: #fed7aa;
@@ -42,16 +50,13 @@
       font-size: 1rem;
       font-family: system-ui, sans-serif;
       margin-top: 2px;
+      white-space: nowrap;
     }
   </style>
 </head>
 <body>
   <div class="line">
-    212.132.79.37:<div class="port-wrap">
-      <span class="port">443</span>
-      <div class="connector"></div>
-      <div class="caption-text">Port 443 = HTTPS</div>
-    </div>
+    212.132.79.37:<span class="port-wrap"><span class="port">443</span><span class="below"><span class="connector"></span><span class="caption-text">Port 443 = HTTPS</span></span></span>
   </div>
 </body>
 </html>

slides/223015c/assets/demos/tcp-handshake.html

@@ -104,7 +104,7 @@
     <!-- SYN-ACK -->
     <div class="msg arrow-left msg-reverse" style="left: 83px; right: 80px; top: 180px;">
       <div class="label reply" style="left: 50%; transform: translateX(-50%);">SYN-ACK · Seq=5000, Ack=1001</div>
-      <div class="quote" style="left: 50%; transform: translateX(-50%);">"OK, ich starte bei 5000"</div>
+      <div class="quote" style="left: 50%; transform: translateX(-50%);">"OK, ich starte bei 5000 und erwarte 1001"</div>
     </div>
 
     <!-- ACK -->
@@ -113,7 +113,7 @@
       <div class="quote" style="left: 50%; transform: translateX(-50%);">"Verstanden, los geht's"</div>
     </div>
 
-    <div class="final">✓ Verbindung steht</div>
+    <div class="final">Verbindung steht</div>
   </div>
 </body>
 </html>

slides/223015c/klausurfolien.md

@@ -5,7 +5,7 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik (223015c)"
 footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
-title: "Kapitel 1: Geschichte, Grundlagen & HTML"
+title: Grundlagen IT- und Internettechnik
 ---
 <style>
 :root {
@@ -20,13 +20,13 @@ section {
   font-size: 1.7rem;
 }
 h1 {
-  color: #a02060;  /* darker raspberry */
+  color: #a02060;
 }
 section.invert h1 {
   color: #fff;
 }
 h2 {
-  color: #1f2937;  /* dark gray, almost black */
+  color: #1f2937;
 }
 pre {
   background: #0f0f23;
@@ -82,10 +82,9 @@ section.aufgabe footer {
 
 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _footer: '' -->
-<!-- _backgroundColor: black -->
+<!-- _backgroundColor: #000 -->
 
-![bg fit opacity:0.2](./assets/background-termin-2.png)
+![bg cover opacity:0.2](./assets/background-termin-1.png)
 
 # Grundlagen IT- und Internettechnik
 
@@ -103,39 +102,6 @@ Hochschule der Medien Stuttgart
 <!-- _footer: "" -->
 
 
-# Die 5 Komponenten
-
-| Komponente | Funktion |
-|------------|----------|
-| **Rechenwerk (ALU)** | Führt Berechnungen durch |
-| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf |
-| **Speicherwerk** | Speichert Programme UND Daten |
-| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk |
-| **Bus-System** | Verbindet alle Komponenten |
-
-**Wichtig:** Programme und Daten **gemeinsam** im Speicher!
-
-<!--
-VON-NEUMANN-ARCHITEKTUR (1945): Grundlage aller modernen Computer
-5 KOMPONENTEN:
-- ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =)
-- Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute)
-- Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten
-- Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren
-- Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie)
-KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten
-VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit
-NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich
-PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
 # Von-Neumann-Architektur: Bedeutung
 
 **Ohne Von-Neumann-Architektur:**
@@ -173,117 +139,18 @@ PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beis
 <!-- _footer: "" -->
 
 
-# HTML Metadaten
-
-```html
-<html>
-  <head>
-    <title>Im Browsertab als Überschrift sichtbar</title>
-
-    <meta name="description" content="" />
-
-    <meta name="og:image" content="https://...." />
-  </head>
-
-  ...
-
-</html>
-```
-
-- <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
-- <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
-
-<!--
-HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
-WICHTIGE META-TAGS:
-- <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel
-- <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen)
-- <meta name="viewport">: Mobile Darstellung (width=device-width)
-- <meta charset="UTF-8">: Zeichenkodierung (Umlaute!)
-OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp)
-- og:title, og:description, og:image, og:url
-TWITTER CARDS: twitter:card, twitter:title, twitter:image
-SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet
-ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache
-PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Wie nutzen Menschen das Web?
-
-| Eingabe | Nutzungsweise |
-|---------|---------------|
-| **Maus** | Klicken, Scrollen |
-| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
-| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
-| **Sprachsteuerung** | "Klicke auf Anmelden" |
-| **Augensteuerung** | Eye-Tracking |
-| **Switch-Geräte** | Ein-/Aus-Schalter |
-
-→ **Nicht alle nutzen Maus + Bildschirm!**
-
-<!--
-ACCESSIBILITY (a11y): a + 11 Buchstaben + y
-STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
-ARTEN VON EINSCHRÄNKUNGEN:
-- Permanent: Blindheit, Taubheit, motorische Einschränkungen
-- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
-- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
-ASSISTIVE TECHNOLOGIEN:
-- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
-- Braillezeilen: Taktile Ausgabe für Blinde
-- Switch-Geräte: Für motorische Einschränkungen
-- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
-WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
-EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
-PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Warum "Barrierefreiheit"?
-
-**Rechtlich:**
-- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
-- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
-
-**Ethisch:**
-- Teilhabe für alle Menschen
-- Digitale Inklusion
-
-**Praktisch:**
-- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
-- Größerer Markt (~15% der Bevölkerung)
-
-<!--
-RECHTLICHER RAHMEN:
-- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
-- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
-- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
-- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
-- Strafen: Bis zu 100.000€ Bußgeld möglich
-CURB-CUT-EFFEKT:
-- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
-- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
-- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
-BUSINESS CASE:
-- 15% Zielgruppe (Menschen mit Behinderung)
-- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
-- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
-PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
--->
+# HTML-Anatomie (2/2)
 
+- Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
+  - **Umschließend**
+    - `<b> ... </b>` fett-gedruckter Text (inline)
+    - `<a> ... </a>` Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
+    - `<body> ... </body>` Sichtbarer Teil eines HTML-Dokuments
+    - `<details> ... </details>` Aufklapp-Text (Akkordion)
+  - **Selbst-schließend**
+    - `<img />` Bild, Vektorgrafik etc.
+    - `<input />` Eingabefeld
+    - `<meta />` Metadaten
 
 ---
 
@@ -294,17 +161,16 @@ PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
 # Barrieren im Netz vermeiden (a11y)
 
 **Tastatur-Test:**
-- Alle Funktionen nur mit Tab + Enter nutzbar?
-- Fokus immer sichtbar?
-- Logische Tab-Reihenfolge?
+- Alle Funktionen sind nur mit Tab + Enter nutzbar
+- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
+- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
 
 **Screenreader-Test:**
 - VoiceOver (Mac): `Cmd + F5`
 - NVDA (Windows): Gratis-Download
 
-**Tools:**
-- axe DevTools, WAVE (Browser-Extensions)
-- Lighthouse (in Chrome DevTools)
+**Tools/Browser-Extensions:**
+- [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
 
 <!--
 Automatische Tests finden ~30% der Probleme
@@ -319,168 +185,19 @@ Echte NutzerInnen einbeziehen = Gold-Standard
 <!-- _footer: "" -->
 
 
-# Das TCP/IP-Modell
-
-| Schicht | Name | Aufgabe | Protokolle |
-|---------|------|---------|------------|
-| **4** | Anwendung | Was? Welcher Dienst? | HTTP, DNS, SMTP |
-| **3** | Transport | Zuverlässigkeit, Ports | TCP, UDP |
-| **2** | Internet | Routing, globale Adressen | IP |
-| **1** | Netzzugang | Lokale Übertragung | Ethernet, WLAN |
-
-**4 Schichten. Das reicht, um das Internet zu verstehen.**
-
-<!--
-SPEAKER NOTES:
-- TCP/IP = das echte Internet
-- 4 Schichten:
-  - Anwendung: Was will ich? (HTTP, DNS, Mail)
-  - Transport: Kommt an? Welches Programm? (TCP, UDP)
-  - Internet: Wie zum Zielrechner? (IP)
-  - Netzzugang: Wie zum nächsten Gerät? (Ethernet, WLAN)
-- KLAUSUR: Welches Protokoll → welche Schicht
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Dateneinheiten pro Schicht
-
-| Schicht | Name | Dateneinheit | Was kommt hinzu? |
-|---------|------|--------------|------------------|
-| Anwendung | HTTP, DNS | **Daten** | – |
-| Transport | TCP, UDP | **Segment** | Ports, Sequenznummern |
-| Internet | IP | **Paket** | IP-Adressen |
-| Netzzugang | Ethernet | **Frame** | MAC-Adressen, Prüfsumme |
-
-Merkhilfe: **D**aten → **S**egment → **P**aket → **F**rame
-(„**D**er **S**ache **P**raktischer **F**olgen")
-
-<!--
-SPEAKER NOTES:
-- Glossar-Begriffe jetzt eingeordnet:
-  - Anwendung: Daten/Message
-  - Transport: Segment
-  - Internet: Paket
-  - Netzzugang: Frame
-- Merkhilfe: D-S-P-F (eigene erfinden!)
-- KLAUSUR: Begriff → Schicht
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# IP vs. MAC vs. Port
-
-| | IP-Adresse | MAC-Adresse | Port |
-|---|-----------|-------------|------|
-| **Frage** | Welcher Rechner? | Welches Gerät nebenan? | Welches Programm? |
-| **Reichweite** | Global | Lokal (1 Hop) | Auf einem Rechner |
-| **Ändert sich?** | Nein | Ja, bei jedem Hop | Nein |
-| **Schicht** | Internet (IP) | Netzzugang (Ethernet) | Transport (TCP/UDP) |
-| **Beispiel** | 212.132.79.37 | aa:bb:cc:dd:ee | 443 |
-
-<!--
-SPEAKER NOTES:
-- KLAUSUR: Diese Tabelle
-- IP: Welcher Rechner? Global. Bleibt gleich.
-- MAC: Welcher Nachbar? Lokal. Ändert sich.
-- Port: Welches Programm? Bleibt gleich.
-- Merken: NUR MAC ändert sich unterwegs
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Der 3-Way-Handshake
-
-```
-Client (dein Laptop)                      Server
-    |                                        |
-    |-------- SYN (Seq=1000) --------------->|
-    |         "Ich will reden"               |
-    |                                        |
-    |<--- SYN-ACK (Seq=5000, Ack=1001) ------|
-    |     "OK, ich auch. Ich starte bei 5000"|
-    |                                        |
-    |-------- ACK (Ack=5001) --------------->|
-    |         "Verstanden, los geht's"       |
-    |                                        |
-    |        [ Verbindung steht ]            |
-```
-
-**SYN** = Synchronize · **ACK** = Acknowledge
-
-<!--
-SPEAKER NOTES:
-- 3 Pakete → Verbindung steht
-- 1. Client SYN: "Will Verbindung, starte bei 1000"
-- 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"
-- 3. Client ACK: "Verstanden, erwarte 5001"
-- Seq-Nr wichtig: Beide wissen nächstes erwartetes Byte
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# TCP vs. UDP
-
-| | TCP | UDP |
-|---|-----|-----|
-| **Verbindung** | Ja (Handshake) | Nein |
-| **Reihenfolge** | Garantiert | Nicht garantiert |
-| **Verlorene Pakete** | Werden nachgefordert | Gehen verloren |
-| **Overhead** | Höher | Niedriger |
-| **Use Cases** | Web, Email, Downloads | Video-Calls, Gaming, DNS |
-
-<!--
-SPEAKER NOTES:
-- Zwei Transport-Protokolle
-- TCP: zuverlässig
-  - Handshake, Seq-Nr, Bestätigungen, Neuübertragung
-  - Perfekt für Web, Downloads (nichts darf fehlen)
-- UDP: schneller
-  - Kein Handshake, keine Bestätigungen
-  - Verloren = weg
-  - Perfekt für Video-Calls (Verzögerung schlimmer als Verlust)
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
 # HTTP-Methoden
 
-| Methode | Bedeutung | Beispiel |
-|---------|-----------|----------|
-| **GET** | Daten abrufen | Seite laden |
-| **POST** | Daten senden | Formular absenden |
-| **PUT** | Daten ersetzen | Profil aktualisieren |
-| **DELETE** | Daten löschen | Account löschen |
+HTTP-Methoden beschreiben, **was** der Client mit einer Ressource tun will.
+
+| Methode | Bedeutung | Beispiel                                      |
+|---------|-----------|-----------------------------------------------|
+| **GET** | Daten abrufen | Seite laden `GET /index.html HTTP/2.0`        |
+| **POST** | Daten senden | Formular absenden `POST /login HTTP/2.0`      |
+| **PUT** | Daten ersetzen | Profil aktualisieren `PUT /users/42 HTTP/2.0` |
+| **DELETE** | Daten löschen | Account löschen `DELETE /users/42 HTTP/2.0`                               |
+
+<small>CRUD = Create, Read, Update, Delete</small>
 
-```http
-GET /index.html HTTP/1.1
-POST /login HTTP/1.1
-```
 
 <!--
 SPEAKER NOTES:
@@ -505,10 +222,12 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
 
 # HTTP Status-Codes
 
+Jede HTTP-Response enthält einen dreistelligen Status-Code — die erste Ziffer verrät die Kategorie.
+
 ```http
-HTTP/1.1 200 OK
-HTTP/1.1 404 Not Found
-HTTP/1.1 500 Internal Server Error
+HTTP/2.0 200 OK
+HTTP/2.0 404 Not Found
+HTTP/2.0 500 Internal Server Error
 ```
 
 | Code-Bereich | Bedeutung |
@@ -539,112 +258,76 @@ Status-Codes sagen euch, was passiert ist.
 <!-- _footer: "" -->
 
 
-# Zusammenfassung Teil 1
+# Selektoren: ID
 
-**Der Ablauf:**
-1. DNS (UDP:53) → Name zu IP
-2. TCP-Handshake (SYN → SYN-ACK → ACK)
-3. HTTP-Request (GET /...)
-4. HTTP-Response (200 OK + HTML)
+![bg right:35%](./assets/demos/css-selector-id.png)
 
-**Die Konzepte:**
-- 4 Schichten: Anwendung → Transport → Internet → Netzzugang
-- IP bleibt gleich, MAC ändert sich pro Hop
-- Ports identifizieren Programme
-- Encapsulation: Jede Schicht verpackt die darüberliegende
-
-<!--
-SPEAKER NOTES:
-
-Das ist die Zusammenfassung für Teil 1. Das solltet ihr können:
-
-Den Ablauf: DNS, TCP-Handshake, HTTP-Request, HTTP-Response.
-
-Die Schichten und ihre Protokolle.
-
-Den Unterschied zwischen IP und MAC – was bleibt gleich, was ändert sich.
-
-Was Ports tun.
-
-Wie Encapsulation funktioniert.
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Spezifität: Welche Regel gewinnt?
-
-| 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 */
+```html
+<nav id="hauptnavigation">...</nav>
 ```
 
-<!--
-SPEAKER NOTES:
-
-Wenn mehrere Regeln auf ein Element zutreffen, gewinnt die spezifischere.
-
-Spezifität wird in vier Zahlen gemessen. Von links nach rechts: Inline, IDs, Klassen, Elemente.
-
-Ein Element-Selektor hat 0,0,0,1. Eine Klasse hat 0,0,1,0. Eine ID hat 0,1,0,0.
-
-0,0,1,0 schlägt 0,0,0,99 – auch hundert Element-Selektoren schlagen keine Klasse.
-
-Inline-Styles schlagen alles – außer !important, was ihr vermeiden solltet.
--->
-
-
----
-
-<!-- _header: "" -->
-<!-- _footer: "" -->
-
-
-# Responsive Design
-
 ```css
-/* Mobile First: Basis-Styles */
-.container {
+#hauptnavigation {
+    background: #333;
     padding: 1rem;
-    background: white;
-}
-
-/* Ab 768px (Tablet): Anpassungen */
-@media (min-width: 768px) {
-    .container {
-        padding: 2rem;
-        background: red;
-    }
-}
-
-/* Ab 1024px (Desktop): Weitere Anpassungen */
-@media (min-width: 1024px) {
-    .container {
-        background: green;
-    }
 }
 ```
 
+**Raute** vor dem Namen = ID
+
+**Achtung:** IDs sollten **einmalig** pro Seite sein.
+
 <!--
 SPEAKER NOTES:
 
-Responsive Design: Die Seite passt sich der Bildschirmgröße an.
+ID-Selektoren sind noch spezifischer. Raute vor dem Namen.
 
-Mobile First: Ihr schreibt zuerst die Styles für kleine Screens. Dann fügt ihr mit @media-Queries Anpassungen für größere Screens hinzu.
+IDs sollten auf einer Seite nur einmal vorkommen. Für Navigation, Header, Footer, Main – einmalige Elemente.
 
-min-width heißt: "ab dieser Breite". Also: Basis gilt für alle. Ab 768px gelten zusätzliche Regeln. Ab 1024px noch mehr.
-
-Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute Standard.
+In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind unflexibel.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Farben
+
+![bg right:35%](./assets/demos/css-colors.png)
+
+CSS kennt fünf Farb-Notationen: **Keyword**, **Hex**, **RGB**, **RGBA** und **HSL**.
+
+```css
+/* Keyword */
+color: red;
+color: rebeccapurple;
+/* Hex */
+color: #FF0000;
+color: #F00;
+/* RGB = Red Green Blue, RGBA mit Alpha */
+color: rgb(255, 0, 0);
+color: rgba(255, 0, 0, 0.5);
+/* HSL = Hue, Saturation, Lightness */
+color: hsl(0, 100%, 50%);
+```
+
+MDN-Referenz: [CSS `<color>`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Values/color_value)
+
+<!--
+SPEAKER NOTES:
+
+Farben können auf verschiedene Arten angegeben werden.
+
+Keywords: red, blue, rebeccapurple. Begrenzte Auswahl, aber lesbar.
+
+Hex: Sechs Zeichen, je zwei für Rot, Grün, Blau. #FF0000 ist reines Rot.
+
+RGB: Gleiche Idee, aber dezimal. rgb(255, 0, 0).
+
+RGBA: Mit Alpha-Kanal für Transparenz. 0 ist unsichtbar, 1 ist voll sichtbar.
+
+HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
 -->

slides/223015c/klausurfragen.md

@@ -57,7 +57,7 @@ section.disable {
 # Klausurfragen – 223015c
 **IT-Grundlagen · HdM Stuttgart · M. Czechowski**
 
-<small>Stand: 01.02.2026</small>
+<small>Stand: 24.06.2026</small>
 
 ---
 
@@ -79,12 +79,14 @@ section.disable {
 
 ---
 
+<!-- _class: disable -->
+
 ### A1 – Komponenten zuordnen
 **Thema:** Von-Neumann Grundstruktur
 **Punkte:** 3
 **Typ:** `[MATCH]`
 
-Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.
+Ordnen Sie jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.
 
 | Komponente | Funktion |
 |---|---|
@@ -108,7 +110,7 @@ Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.
 Ein Programm besteht aus einer Folge von Befehlen. Eine Komponente der Von-Neumann-Architektur ist für das Abrufen, Dekodieren und Ausführen dieser Befehle zuständig. Welche?
 
 - [ ] Rechenwerk (ALU)
-- [x] **Steuerwerk** ✅
+- [x] **Steuerwerk**
 - [ ] Speicherwerk
 - [ ] Ein-/Ausgabe
 
@@ -123,12 +125,12 @@ Ein Programm besteht aus einer Folge von Befehlen. Eine Komponente der Von-Neuma
 
 Welche der folgenden Aussagen werden durch die Von-Neumann-Architektur ermöglicht? (Mehrere Antworten möglich)
 
-- [x] **Betriebssysteme können verschiedene Programme aus dem Speicher laden.** ✅
-- [x] **Apps können ohne Hardwareänderung installiert werden.** ✅
+- [x] **Betriebssysteme können verschiedene Programme aus dem Speicher laden.**
+- [x] **Apps können ohne Hardwareänderung installiert werden.**
 - [ ] Der Computer kann nur ein einziges Programm gleichzeitig ausführen.
-- [x] **Multitasking wird möglich.** ✅
+- [x] **Multitasking wird möglich.**
 - [ ] Die Hardware muss für jedes neue Programm physisch umgebaut werden.
-- [x] **Software kann aktualisiert werden, ohne die Hardware zu ändern.** ✅
+- [x] **Software kann aktualisiert werden, ohne die Hardware zu ändern.**
 
 > **Feedback:** Kern der Von-Neumann-Architektur: Programme und Daten teilen denselben Speicher → Programme sind austauschbare Daten. Ohne das: kein Betriebssystem, keine Apps, kein Multitasking, keine Updates.
 
@@ -147,18 +149,83 @@ Erklären Sie die fünf Komponenten der Von-Neumann-Architektur: **Rechenwerk (A
 
 ---
 
-<!-- _class: lead -->
+### A5 – Von-Neumann vs. Harvard-Architektur
+**Thema:** Von-Neumann – Abgrenzung
+**Punkte:** 2
+**Typ:** `[MC]`
 
-## BLOCK B – Netzwerk-Grundlagen (TCP/IP)
+Was unterscheidet die Von-Neumann-Architektur von der Harvard-Architektur?
+
+- [ ] Von-Neumann nutzt mehrere CPUs, Harvard nur eine.
+- [x] **Bei Von-Neumann liegen Programme und Daten im selben Speicher; die Harvard-Architektur trennt Befehls- und Datenspeicher physisch.**
+- [ ] Die Harvard-Architektur kann keine Schleifen ausführen.
+- [ ] Es gibt keinen Unterschied – beide Begriffe meinen dasselbe.
+
+> **Feedback:** Kernunterschied: gemeinsamer Speicher (Von-Neumann) gegenüber getrennten Speichern für Befehle und Daten (Harvard). Der gemeinsame Speicher macht Programme zu austauschbaren Daten – die Grundlage für ladbare Software.
 
 ---
 
+<!-- _class: lead -->
+
+## BLOCK B – Netzwerk-Grundlagen (Client-Server & TCP/IP)
+
+---
+
+### B0 – Client-Server: Begriffe zuordnen
+**Thema:** Client-Server-Modell – Grundbegriffe
+**Punkte:** 3
+**Typ:** `[MATCH]`
+
+Ordnen Sie jedem Begriff des Client-Server-Modells seine Beschreibung zu.
+
+| Begriff | Beschreibung |
+|---|---|
+| Host | Ein netzwerkfähiger Rechner (Laptop, Smartphone, Display in der S-Bahn) |
+| Client | Host bzw. Anwendung mit einer Anfrage (z. B. Browser) |
+| Server | Host bzw. Anwendung mit der Antwort (z. B. Webserver) |
+| Request | Die Anfrage des Clients |
+| Response | Die Antwort des Servers |
+| Protokoll | Regeln für die Kommunikation (z. B. TCP, HTTP) |
+
+> **Feedback:** Das Web folgt dem Client-Server-Modell: Ein Client sendet einen Request, ein Server liefert eine Response – nach den Regeln eines Protokolls. Host = der Rechner, Client/Server = die Rollen, die er dabei einnimmt.
+
+---
+
+### B0a – Was ist das Client-Server-Modell?
+**Thema:** Client-Server-Modell – Grundprinzip
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Ein Browser fordert eine Webseite an, ein Webserver liefert sie aus. Wie heißt dieses Grundmodell des Web?
+
+- [x] **Client-Server-Modell: Ein Client stellt eine Anfrage (Request), ein Server antwortet (Response).**
+- [ ] Peer-to-Peer-Modell: Alle Geräte sind gleichberechtigt und tauschen direkt Daten aus.
+- [ ] Broadcast-Modell: Ein Server sendet ununterbrochen an alle Geräte im Netz.
+- [ ] Master-Slave-Modell: Der Browser steuert den Server fern.
+
+> **Feedback:** Im Client-Server-Modell hat jede Seite eine feste Rolle: Der Client fragt an (Request), der Server antwortet (Response). Derselbe Host kann je nach Situation Client oder Server sein.
+
+---
+
+### B0b – Client-Server: Lückentext
+**Thema:** Client-Server-Modell – Terminologie
+**Punkte:** 2
+**Typ:** `[CLOZE]`
+
+Das Web folgt dem Client-Server-Modell: Ein [[1:Client]] sendet einen [[2:Request]], ein [[3:Server]] liefert eine [[4:Response]] – nach den Regeln eines [[5:Protokolls]] (z. B. HTTP).
+
+> **Feedback:** Client = fragt an, Server = antwortet, Request = Anfrage, Response = Antwort, Protokoll = die Regeln, nach denen beide kommunizieren.
+
+---
+
+<!-- _class: disable -->
+
 ### B1 – Protokoll → TCP/IP-Schicht zuordnen
 **Thema:** TCP/IP-Schichtmodell – Zuordnung
 **Punkte:** 3
 **Typ:** `[MATCH]`
 
-Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.
+Ordnen Sie jedem Protokoll die richtige TCP/IP-Schicht zu.
 
 | Protokoll | Schicht |
 |----------|---|
@@ -174,6 +241,8 @@ Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### B2 – Welche Schicht ist das? (einzeln)
 **Thema:** TCP/IP – einzelne Schicht identifizieren
 **Punkte:** 1
@@ -183,7 +252,7 @@ Das Protokoll IP arbeitet auf welcher TCP/IP-Schicht?
 
 - [ ] Anwendung
 - [ ] Transport
-- [x] **Internet** ✅
+- [x] **Internet**
 - [ ] Netzzugang
 
 > **Feedback:** IP (Internet Protocol) arbeitet auf der Internet-Schicht – dort werden Pakete adressiert und geroutet.
@@ -197,7 +266,7 @@ Das Protokoll IP arbeitet auf welcher TCP/IP-Schicht?
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Beschreibe in einem Satz pro Schicht die Hauptfunktion jeder der vier TCP/IP-Schichten (Anwendung, Transport, Internet, Netzzugang).
+Beschreiben Sie in einem Satz pro Schicht die Hauptfunktion jeder der vier TCP/IP-Schichten (Anwendung, Transport, Internet, Netzzugang).
 
 > **Musterlösung:** Anwendung: Stellt Protokolle für spezifische Dienste bereit (HTTP für Web, SMTP für Mail). Transport: Sorgt für zuverlässige (TCP) oder schnelle (UDP) Übertragung zwischen zwei Endpunkten. Internet: Adressiert und routet Pakete über Netzwerkgrenzen hinweg mittels IP. Netzzugang: Übertragen von Frames auf einem physischen Übertragungsweg (Ethernet, WLAN).
 
@@ -212,7 +281,7 @@ Was identifiziert eine MAC-Adresse?
 
 - [ ] Den konkreten Dienst (z. B. Webserver) auf einem Computer.
 - [ ] Den Computer im globalen Internet über Netzwerkgrenzen hinweg.
-- [x] **Die Netzwerkkarte eines Geräts auf einem lokalen Netzwerksegment.** ✅
+- [x] **Die Netzwerkkarte eines Geräts auf einem lokalen Netzwerksegment.**
 - [ ] Die Routen, die ein Paket durch das Internet nimmt.
 
 > **Feedback:** MAC = Media Access Control. Sie ist eine 48-Bit-Adresse, die einer Netzwerkkarte ab Werk zugewiesen wird – lokal, ein Hop.
@@ -227,7 +296,7 @@ Was identifiziert eine MAC-Adresse?
 Was identifiziert eine IP-Adresse?
 
 - [ ] Die Netzwerkkarte eines Geräts auf einem lokalen Segment.
-- [x] **Ein Gerät (Host) im globalen Internet – sie ermöglicht das Routing über Netzwerkgrenzen.** ✅
+- [x] **Ein Gerät (Host) im globalen Internet – sie ermöglicht das Routing über Netzwerkgrenzen.**
 - [ ] Den Dienst, der auf einem bestimmten Port läuft.
 - [ ] Die physische Leitung zwischen zwei Computern.
 
@@ -244,7 +313,7 @@ Wozu dient eine Port-Nummer auf dem Zielrechner?
 
 - [ ] Sie bestimmt die Geschwindigkeit der Verbindung.
 - [ ] Sie identifiziert das Gerät im Netzwerk.
-- [x] **Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver auf 80, HTTPS auf 443).** ✅
+- [x] **Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver auf 80, HTTPS auf 443).**
 - [ ] Sie zeigt an, ob das Gerät per WLAN oder Kabel verbunden ist.
 
 > **Feedback:** IP = „Welches Gebäude?", Port = „Welche Tür im Gebäude?" (welcher Dienst soll die Anfrage empfangen).
@@ -256,7 +325,7 @@ Wozu dient eine Port-Nummer auf dem Zielrechner?
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jeder Adresse ihre Beschreibung zu.
+Ordnen Sie jeder Adresse ihre Beschreibung zu.
 
 | Adresse | Beschreibung |
 |---|---|
@@ -279,6 +348,76 @@ Erklären Sie die drei Adressierungsebenen **IP-Adresse**, **MAC-Adresse** und *
 
 ---
 
+### B7b – Adressen & Identitäten: Begriffe zuordnen
+**Thema:** Adressierung – Glossar (IP, MAC, Port, DNS, Domain)
+**Punkte:** 3
+**Typ:** `[MATCH]`
+
+Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu.
+
+| Begriff | Was ist das? / Beispiel |
+|---|---|
+| IP-Adresse | Globale Adresse im Internet – z. B. `212.132.79.37` |
+| MAC-Adresse | Hardware-Adresse der Netzwerkkarte – z. B. `aa:bb:cc:dd:ee:ff` |
+| Port | Nummer eines Programms bzw. Dienstes – z. B. `80`, `443`, `22` |
+| DNS | „Telefonbuch": übersetzt einen Namen in eine IP |
+| Domain | Menschenlesbarer Name – z. B. `hdm-stuttgart.de` |
+| Host | Ein netzwerkfähiger Rechner (Laptop, Smartphone) |
+
+> **Feedback:** IP = global, MAC = lokal (Hardware), Port = Programm auf dem Host, DNS = Name→IP, Domain = der lesbare Name, Host = der Rechner selbst.
+
+---
+
+### B5a – IP-Adresse: Beispiel erkennen
+**Thema:** IP-Adresse – Format/Beispiel
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Welche der folgenden Angaben ist eine IP-Adresse (IPv4)?
+
+- [x] **`212.132.79.37`**
+- [ ] `aa:bb:cc:dd:ee:ff`
+- [ ] `hdm-stuttgart.de`
+- [ ] `443`
+
+> **Feedback:** IPv4 = vier durch Punkte getrennte Zahlen (0–255). `aa:bb:cc:dd:ee:ff` ist eine MAC, `hdm-stuttgart.de` eine Domain, `443` ein Port.
+
+---
+
+### B4a – MAC-Adresse: Eigenschaften
+**Thema:** MAC-Adresse – Format/Eigenschaften
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Welche Aussage über die MAC-Adresse `aa:bb:cc:dd:ee:ff` ist korrekt?
+
+- [x] **Sie ist die Hardware-Adresse der Netzwerkkarte, ab Werk vergeben und nur im lokalen Netz relevant.**
+- [ ] Sie wird vom Internet-Provider zugewiesen und ermöglicht globales Routing.
+- [ ] Sie identifiziert ein bestimmtes Programm auf dem Rechner.
+- [ ] Sie ändert sich, sobald der Rechner eine neue Webseite aufruft.
+
+> **Feedback:** MAC = Media Access Control. 48 Bit, in Hex notiert (`aa:bb:cc:dd:ee:ff`), ab Werk in die Netzwerkkarte eingebrannt, nur lokal (ein Hop) gültig. Globales Routing macht die IP, das Programm adressiert der Port.
+
+---
+
+### B6a – Port: Well-Known Ports zuordnen
+**Thema:** Port – bekannte Portnummern
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordnen Sie jeder Portnummer den passenden Dienst zu.
+
+| Port | Dienst |
+|---|---|
+| 80 | HTTP (Web, unverschlüsselt) |
+| 443 | HTTPS (Web, verschlüsselt) |
+| 22 | SSH (verschlüsselte Fernwartung) |
+| 53 | DNS (Namensauflösung) |
+
+> **Feedback:** Well-Known Ports (0–1023) sind festen Diensten zugeordnet. 80 = HTTP, 443 = HTTPS, 22 = SSH, 53 = DNS. Der Port sagt dem Host, welches Programm die Anfrage bekommt.
+
+---
+
 <!-- _class: disable -->
 
 ### B8 – MAC ändert sich, IP nicht: Warum?
@@ -286,18 +425,20 @@ Erklären Sie die drei Adressierungsebenen **IP-Adresse**, **MAC-Adresse** und *
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Ein Paket reist von Ihrem Laptop zu einem Webserver über mehrere Router. Erkläre in 2–3 Sätzen, warum die MAC-Adresse an jedem Router neu gesetzt wird, während die IP-Adresse des Ziel-Servers konstant bleibt.
+Ein Paket reist von Ihrem Laptop zu einem Webserver über mehrere Router. Erklären Sie in 2–3 Sätzen, warum die MAC-Adresse an jedem Router neu gesetzt wird, während die IP-Adresse des Ziel-Servers konstant bleibt.
 
 > **Musterlösung:** Die IP-Adresse des Ziel-Servers bleibt konstant, weil sie das globale Routingziel identifiziert – jeder Router nutzt sie, um das nächste Hop zu bestimmen. Die MAC-Adresse hingegen gilt nur für ein einzelnes Netzwerksegment (einen „Hop"). An jedem Router wird ein neuer Frame erstellt mit der MAC des nächsten Hops als Ziel – die alte MAC wird verworfen.
 
 ---
 
+<!-- _class: disable -->
+
 ### B9 – Encapsulation: Dateneinheit → Schicht
 **Thema:** Encapsulation – Zuordnung
 **Punkte:** 3
 **Typ:** `[MATCH]`
 
-Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Ordne jeder Dateneinheit die zugehörige Schicht und was hinzugefügt wird.
+Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Ordnen Sie jeder Dateneinheit die zugehörige Schicht und was hinzugefügt wird.
 
 | Dateneinheit | Schicht + Was wird ergänzt |
 |---|---|
@@ -315,7 +456,7 @@ Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Ordne
 **Punkte:** 2
 **Typ:** `[ORDER]`
 
-Sortiere die Dateneinheiten in der Reihenfolge, wie sie beim Senden entstehen (von innen nach außen):
+Sortieren Sie die Dateneinheiten in der Reihenfolge, wie sie beim Senden entstehen (von innen nach außen):
 
 1. Daten
 2. Segment
@@ -326,6 +467,8 @@ Sortiere die Dateneinheiten in der Reihenfolge, wie sie beim Senden entstehen (v
 
 ---
 
+<!-- _class: disable -->
+
 ### B11 – Decapsulation: Umgekehrte Reihenfolge
 **Thema:** Decapsulation – Empfänger-Seite
 **Punkte:** 2
@@ -335,13 +478,15 @@ Wenn der Server das Signal empfängt, passiert Decapsulation. In welcher Reihenf
 
 - [ ] Anwendung → Transport → Internet → Netzzugang
 - [ ] Alle Header werden gleichzeitig entfernt, sobald die Daten im RAM liegen.
-- [x] **Netzzugang (Ethernet-Header weg) → Internet (IP-Header weg) → Transport (TCP-Header weg) → Daten.** ✅
+- [x] **Netzzugang (Ethernet-Header weg) → Internet (IP-Header weg) → Transport (TCP-Header weg) → Daten.**
 - [ ] Internet → Netzzugang → Transport → Anwendung
 
 > **Feedback:** Das Auspacken erfolgt in umgekehrter Reihenfolge wie das Einpacken – der äußerste Header (Frame) wird zuerst entfernt.
 
 ---
 
+<!-- _class: disable -->
+
 ### B12 – Encapsulation: Lückentext
 **Thema:** Encapsulation – Terminologie
 **Punkte:** 2
@@ -353,6 +498,8 @@ Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Die Tr
 
 ---
 
+<!-- _class: disable -->
+
 ### B13 – TCP vs. UDP: Videostreaming
 **Thema:** TCP vs. UDP – Echtzeit-Szenario
 **Punkte:** 2
@@ -361,7 +508,7 @@ Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt. Die Tr
 Ein Videostreaming-Dienst sendet Daten an Ihren Browser. Ein einzelnes Paket geht verloren. Warum wählt der Dienst UDP statt TCP?
 
 - [ ] UDP sendet jedes Paket doppelt, daher geht statistisch nie etwas verloren.
-- [x] **Bei Echtzeit ist Verzögerung schlimmer als Verlust. TCP würde das Paket erneut anfordern → Video friert ein. UDP ignoriert es → kurzer Glitch, Video läuft weiter.** ✅
+- [x] **Bei Echtzeit ist Verzögerung schlimmer als Verlust. TCP würde das Paket erneut anfordern → Video friert ein. UDP ignoriert es → kurzer Glitch, Video läuft weiter.**
 - [ ] TCP kann bei Videostreaming nicht verwendet werden, da es zu langsam für Multimedia ist.
 - [ ] UDP ist immer schneller als TCP – deshalb nutzt jeder Streaming-Dienst UDP.
 
@@ -369,6 +516,8 @@ Ein Videostreaming-Dienst sendet Daten an Ihren Browser. Ein einzelnes Paket geh
 
 ---
 
+<!-- _class: disable -->
+
 ### B13a – TCP vs. UDP: Eigenschaften vergleichen
 **Thema:** TCP vs. UDP – Vergleich
 **Punkte:** 3
@@ -380,17 +529,21 @@ Vergleichen Sie **TCP** und **UDP**. Beschreiben Sie für jedes Protokoll: (1) o
 
 ---
 
+<!-- _class: disable -->
+
 ### B14 – TCP vs. UDP: Unterschiede beschreiben
 **Thema:** TCP vs. UDP – Konzept-Vergleich
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Nenne zwei wesentliche Unterschiede zwischen TCP und UDP und gib für jeden einen konkreten Anwendungsfall an, in dem genau dieses Eigenschaftspaar ausschlaggebend ist.
+Nennen Sie zwei wesentliche Unterschiede zwischen TCP und UDP und geben Sie für jeden einen konkreten Anwendungsfall an, in dem genau dieses Eigenschaftspaar ausschlaggebend ist.
 
 > **Musterlösung:** (1) TCP ist verbindungsorientiert und zuverlässig (Handshake, Sequenznummern, ACK) → ideal für Dateiübertragung, wo jedes Byte zählt. (2) UDP ist verbindungslos und schneller, aber ohne Garantie für Lieferung oder Reihenfolge → ideal für Echtzeit-Anwendungen wie Videostreaming oder Online-Gaming, wo Latenz wichtiger als Vollständigkeit ist.
 
 ---
 
+<!-- _class: disable -->
+
 ### B15 – TCP vs. UDP: Richtig oder Falsch?
 **Thema:** TCP vs. UDP – Aussagen prüfen
 **Punkte:** 1
@@ -401,7 +554,7 @@ Nenne zwei wesentliche Unterschiede zwischen TCP und UDP und gib für jeden eine
 Diese Aussage ist …
 
 - [ ] …korrekt – UDP nutzt Sequenznummern wie TCP.
-- [x] **…falsch – UDP bietet keine Garantie für Reihenfolge noch für Lieferung.** ✅
+- [x] **…falsch – UDP bietet keine Garantie für Reihenfolge noch für Lieferung.**
 - [ ] …korrekt – UDP ist sogar zuverlässiger als TCP.
 - [ ] …falsch – UDP existiert gar nicht mehr in modernen Netzwerken.
 
@@ -409,6 +562,8 @@ Diese Aussage ist …
 
 ---
 
+<!-- _class: disable -->
+
 ### B16 – TCP 3-Way-Handshake: SYN geht verloren
 **Thema:** TCP-Verbindungsaufbau – Störfall
 **Punkte:** 2
@@ -417,7 +572,7 @@ Diese Aussage ist …
 Der Client sendet ein SYN zum Server. Das SYN-Paket geht verloren – es erreicht den Server nie. Was passiert als nächstes?
 
 - [ ] Der Server sendet trotzdem ein SYN-ACK, da die IP-Adresse bekannt ist.
-- [x] **Der Server kennt die Anfrage nicht → sendet kein SYN-ACK → der Client erhält keine Antwort → keine Verbindung. Der Client sendet das SYN nach einem Timeout erneut.** ✅
+- [x] **Der Server kennt die Anfrage nicht → sendet kein SYN-ACK → der Client erhält keine Antwort → keine Verbindung. Der Client sendet das SYN nach einem Timeout erneut.**
 - [ ] Der Client sendet direkt ein ACK als Fallback – Verbindung mit zwei Paketen.
 - [ ] Das verloren gegangene SYN wird vom Netzwerk automatisch rekonstruiert.
 
@@ -425,12 +580,14 @@ Der Client sendet ein SYN zum Server. Das SYN-Paket geht verloren – es erreich
 
 ---
 
+<!-- _class: disable -->
+
 ### B17 – TCP 3-Way-Handshake: Ablauf beschreiben
 **Thema:** TCP-Verbindungsaufbau – Konzept
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Beschreibe die drei Schritte des TCP 3-Way-Handshakes. Erkläre, warum alle drei Schritte nötig sind, bevor Daten gesendet werden.
+Beschreiben Sie die drei Schritte des TCP 3-Way-Handshakes. Erklären Sie, warum alle drei Schritte nötig sind, bevor Daten gesendet werden.
 
 > **Musterlösung:** (1) Client → Server: SYN („Ich will eine Verbindung aufbauen"). (2) Server → Client: SYN-ACK (「Ich bestätige das und will auch eine Verbindung"). (3) Client → Server: ACK ("Bestätigt"). Alle drei Schritte sind nötig, damit beide Seiten wissen, dass die andere die Verbindung akzeptiert hat – erst dann kann zuverlässiger Datenaustausch beginnen.
 
@@ -446,7 +603,7 @@ Beschreibe die drei Schritte des TCP 3-Way-Handshakes. Erkläre, warum alle drei
 Welches Problem lösen Sequenznummern im TCP-Header konkret?
 
 - [ ] Sie verhindern, dass Hacker die Verbindung abhören können.
-- [x] **Pakete können in falscher Reihenfolge ankommen. Sequenznummern erlauben das korrekte Sortieren beim Empfänger.** ✅
+- [x] **Pakete können in falscher Reihenfolge ankommen. Sequenznummern erlauben das korrekte Sortieren beim Empfänger.**
 - [ ] Sie zählen, wie viele Benutzende gleichzeitig auf dem Server sind.
 - [ ] Sie bestimmen die maximale Größe einer Datei.
 
@@ -465,7 +622,7 @@ Welches Problem lösen Sequenznummern im TCP-Header konkret?
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jeder HTTP-Methode ihre Hauptfunktion zu.
+Ordnen Sie jeder HTTP-Methode ihre Hauptfunktion zu.
 
 | Methode | Hauptfunktion |
 |---|---|
@@ -485,7 +642,7 @@ Ordne jeder HTTP-Methode ihre Hauptfunktion zu.
 
 Eine Person erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet?
 
-- [x] **POST – eine neue Ressource wird erstellt.** ✅
+- [x] **POST – eine neue Ressource wird erstellt.**
 - [ ] PUT – PUT wird immer verwendet, wenn Daten gesendet werden.
 - [ ] GET – GET kann auch Daten senden mit URL-Parametern.
 - [ ] DELETE – DELETE erstellt und löscht gleichzeitig.
@@ -502,7 +659,7 @@ Eine Person erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Me
 Eine Person aktualisiert ihr Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode?
 
 - [ ] GET – GET kann auch Daten senden.
-- [x] **PUT – ersetzt eine existierende Ressource.** ✅
+- [x] **PUT – ersetzt eine existierende Ressource.**
 - [ ] POST – POST ist immer für das Ersetzen zuständig.
 - [ ] DELETE – DELETE sendet das neue Foto und löscht das alte.
 
@@ -520,7 +677,7 @@ Eine Person löscht einen von ihr erstellten Kommentar auf einer Webseite. Welch
 - [ ] GET – GET kann auch Löschvorgänge auslösen.
 - [ ] POST – POST ist die Standardmethode für alle Änderungen.
 - [ ] PUT – PUT löscht und ersetzt gleichzeitig.
-- [x] **DELETE – der Kommentar wird vom Server entfernt.** ✅
+- [x] **DELETE – der Kommentar wird vom Server entfernt.**
 
 > **Feedback:** DELETE = „Entferne diese Ressource vom Server." Konkret: der Kommentar wird anhand seiner URL/ID identifiziert und gelöscht.
 
@@ -536,7 +693,7 @@ Eine Person löscht einen von ihr erstellten Kommentar auf einer Webseite. Welch
 Warum sollte man niemals GET verwenden, um sensible Daten (z. B. ein Passwort) an den Server zu senden?
 
 - [ ] GET ist langsamer als POST – Passwörter müssen schnell übertragen werden.
-- [x] **Bei GET stehen die Daten sichtbar in der URL (Browser-Verlauf, Server-Logs, Proxy-Server). Bei POST sind sie im Body versteckt.** ✅
+- [x] **Bei GET stehen die Daten sichtbar in der URL (Browser-Verlauf, Server-Logs, Proxy-Server). Bei POST sind sie im Body versteckt.**
 - [ ] GET erlaubt nur Zahlen, keine Buchstaben.
 - [ ] GET wird vom Server nie verschlüsselt, POST immer.
 
@@ -549,7 +706,7 @@ Warum sollte man niemals GET verwenden, um sensible Daten (z. B. ein Passwort) a
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
+Ordnen Sie jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
 
 | Erste Ziffer | Bedeutung |
 |---|---|
@@ -571,7 +728,7 @@ Sie rufen eine Webseite auf und erhalten `HTTP/2 503 Service Unavailable`. Was b
 
 - [ ] Sie haben die falsche URL eingegeben.
 - [ ] Der Server hat die Anfrage erfolgreich umgeleitet.
-- [x] **Der Server ist überlastet oder temporär nicht verfügbar – Verantwortung liegt beim Betreiber.** ✅
+- [x] **Der Server ist überlastet oder temporär nicht verfügbar – Verantwortung liegt beim Betreiber.**
 - [ ] Der Server hat die Seite dauerhaft verschoben.
 
 > **Feedback:** 5xx = Server-Problem. Sie als Client können nur später erneut versuchen. Der Betreiber muss das lösen.
@@ -587,7 +744,7 @@ Sie erhalten einen 404-Fehler. Wer ist für die Ursache verantwortlich?
 
 - [ ] Der Server ist abgestürzt.
 - [ ] Das Internet ist ausgefallen.
-- [x] **Der Client (Anfragende) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).** ✅
+- [x] **Der Client (Anfragende) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).**
 - [ ] Der DNS-Server konnte den Namen nicht auflösen.
 
 > **Feedback:** 4xx = Client-Fehler. Der Server funktioniert perfekt, er sagt nur: „Das, was Sie anfragen, habe ich nicht."
@@ -599,7 +756,7 @@ Sie erhalten einen 404-Fehler. Wer ist für die Ursache verantwortlich?
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Szenario den passenden HTTP-Status-Code zu.
+Ordnen Sie jedem Szenario den passenden HTTP-Status-Code zu.
 
 | Szenario | Status-Code |
 |---|---|
@@ -636,17 +793,55 @@ Erklären Sie die vier HTTP-Methoden **GET**, **POST**, **PUT** und **DELETE**.
 
 ---
 
+<!-- _class: disable -->
+
 ### C10 – Status-Codes: Freitext
 **Thema:** HTTP Status-Codes – Konzept zusammenfassen
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre, warum HTTP-Status-Codes aus einer dreistelligen Zahl bestehen und was die erste Ziffer konkret bedeutet. Nenne je einen Beispiel-Code für 2xx, 4xx und 5xx.
+Erklären Sie, warum HTTP-Status-Codes aus einer dreistelligen Zahl bestehen und was die erste Ziffer konkret bedeutet. Nennen Sie je einen Beispiel-Code für 2xx, 4xx und 5xx.
 
 > **Musterlösung:** Die erste Ziffer kategorisiert die Antwort: 2xx = Erfolg, 3xx = Weiterleitung, 4xx = Client-Fehler, 5xx = Server-Fehler. Die restlichen zwei Ziffern spezifizieren den genauen Fall. Beispiele: 200 OK (Erfolg), 404 Not Found (Client-Fehler), 500 Internal Server Error (Server-Fehler). Diese Struktur ermöglicht es, allein aus dem Code zu verstehen, ob und wo ein Problem liegt – ohne die Antwort ganz lesen zu müssen.
 
 ---
 
+<!-- _class: disable -->
+
+### C11 – 401 vs. 403: Wo liegt der Unterschied?
+**Thema:** HTTP Status-Codes – 401 vs. 403
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Eine Person ruft eine geschützte Seite auf. Worin unterscheiden sich 401 und 403?
+
+- [x] **401 Unauthorized: nicht angemeldet („Wer sind Sie?"). 403 Forbidden: angemeldet, aber ohne Berechtigung („Zugriff verweigert").**
+- [ ] 401 ist ein Server-Fehler, 403 ein Client-Fehler.
+- [ ] 401 bedeutet „dauerhaft verschoben", 403 „temporär nicht verfügbar".
+- [ ] Beide bedeuten dasselbe und sind austauschbar.
+
+> **Feedback:** 401 = Authentifizierung fehlt (nicht eingeloggt). 403 = Authentifizierung vorhanden, aber Autorisierung fehlt (keine Rechte). Beide gehören zu 4xx (Client-Seite).
+
+---
+
+<!-- _class: disable -->
+
+### C12 – 301 vs. 302: Weiterleitung
+**Thema:** HTTP Status-Codes – 301 vs. 302
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Eine Ressource wurde verschoben. Wann sendet der Server 301 statt 302?
+
+- [x] **301 bei dauerhafter Verschiebung (Browser und Suchmaschinen merken sich die neue URL). 302 bei temporärer Verschiebung (die alte URL bleibt maßgeblich).**
+- [ ] 301 ist ein Fehlercode, 302 ein Erfolgscode.
+- [ ] 301 wird nur bei HTTPS verwendet, 302 nur bei HTTP.
+- [ ] Es gibt keinen Unterschied in der Wirkung.
+
+> **Feedback:** 301 Moved Permanently ist cachebar und SEO-relevant (die Linkkraft wandert mit). 302 Found signalisiert eine temporäre Verschiebung – die ursprüngliche URL bleibt gültig.
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK D – DNS
@@ -661,7 +856,7 @@ Erkläre, warum HTTP-Status-Codes aus einer dreistelligen Zahl bestehen und was
 Was ist die Hauptfunktion eines DNS-Servers?
 
 - [ ] Er verschlüsselt die Verbindung zwischen Client und Server.
-- [x] **Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse.** ✅
+- [x] **Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse.**
 - [ ] Er routet Pakete durch das Internet.
 - [ ] Er weist jedem Computer eine MAC-Adresse zu.
 
@@ -677,7 +872,7 @@ Was ist die Hauptfunktion eines DNS-Servers?
 Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor** dem TCP-Handshake?
 
 - [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach benötigt.
-- [x] **DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen.** ✅
+- [x] **DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen.**
 - [ ] DNS passiert nach dem TCP-Handshake.
 - [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.
 
@@ -695,7 +890,7 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor*
 Was ist die Hauptfunktion eines DNS-Servers?
 
 - [ ] Er verschlüsselt die Verbindung zwischen Client und Server.
-- [x] **Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse.** ✅
+- [x] **Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse.**
 - [ ] Er routet Pakete durch das Internet.
 - [ ] Er weist jedem Computer eine MAC-Adresse zu.
 
@@ -713,7 +908,7 @@ Was ist die Hauptfunktion eines DNS-Servers?
 Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert vor dem TCP-Handshake?
 
 - [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach benötigt.
-- [x] **DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen.** ✅
+- [x] **DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen.**
 - [ ] DNS passiert nach dem TCP-Handshake.
 - [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.
 
@@ -728,7 +923,7 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert vor de
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre in 2–3 Sätzen, warum der DNS-Schritt zwingend vor dem TCP-Handshake stehen muss. Was würde passieren, wenn der Browser den Domain-Namen direkt an den Netzwerk-Stack übergeben würde?
+Erklären Sie in 2–3 Sätzen, warum der DNS-Schritt zwingend vor dem TCP-Handshake stehen muss. Was würde passieren, wenn der Browser den Domain-Namen direkt an den Netzwerk-Stack übergeben würde?
 
 > **Musterlösung:** TCP arbeitet nur mit IP-Adressen – ein Domain-Name wie `hdm-stuttgart.de` ist für TCP-/IP-Stack sinnlos. Ohne vorherige DNS-Auflösung würde der Browser nicht wissen, an welche IP er das SYN senden soll. Der DNS-Schritt konvertiert den human-readable-Namen in eine maschinenlesbare IP, erst danach kann der Verbindungsaufbau beginnen.
 
@@ -766,12 +961,14 @@ Erklären Sie den Encapsulation-Prozess beim Senden einer Nachricht. Beschreiben
 
 ---
 
+<!-- _class: disable -->
+
 ### E1 – Reihenfolge eines HTTPS-Aufrufs
 **Thema:** Gesamtablauf – Sortierung
 **Punkte:** 2
 **Typ:** `[ORDER]`
 
-Sortiere die Schritte eines HTTPS-Aufrufs in der richtigen Reihenfolge:
+Sortieren Sie die Schritte eines HTTPS-Aufrufs in der richtigen Reihenfolge:
 
 1. DNS-Auflösung (Name → IP)
 2. TCP 3-Way-Handshake (Verbindung aufbauen)
@@ -783,6 +980,8 @@ Sortiere die Schritte eines HTTPS-Aufrufs in der richtigen Reihenfolge:
 
 ---
 
+<!-- _class: disable -->
+
 ### E2 – Reihenfolge: Welche Folge ist korrekt?
 **Thema:** Gesamtablauf – Multiple Choice
 **Punkte:** 1
@@ -791,7 +990,7 @@ Sortiere die Schritte eines HTTPS-Aufrufs in der richtigen Reihenfolge:
 Sie geben eine URL ein. Welche Reihenfolge ist korrekt?
 
 - [ ] (1) TCP-Handshake → (2) DNS → (3) HTTP GET → (4) HTTP 200 OK
-- [x] **(1) DNS → (2) TCP-Handshake → (3) HTTP GET → (4) HTTP 200 OK** ✅
+- [x] **(1) DNS → (2) TCP-Handshake → (3) HTTP GET → (4) HTTP 200 OK**
 - [ ] (1) HTTP GET → (2) DNS → (3) TCP-Handshake → (4) HTTP 200 OK
 - [ ] (1) DNS → (2) HTTP GET → (3) TCP-Handshake → (4) HTTP 200 OK
 
@@ -823,7 +1022,7 @@ Erklären Sie die drei Hauptphasen beim Aufruf einer Webseite: **DNS-Auflösung*
 Eine studierende Person platziert den `<title>` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das?
 
 - [ ] Kein Problem – Browser ignorieren die Unterscheidung.
-- [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen.** ✅
+- [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen.**
 - [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet.
 - [ ] Nur das Fehlen von `<meta charset>` ist ein Problem.
 
@@ -836,7 +1035,7 @@ Eine studierende Person platziert den `<title>` und `<meta name="description">`
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Element zu, ob es in `<head>` oder `<body>` gehört.
+Ordnen Sie jedem Element zu, ob es in `<head>` oder `<body>` gehört.
 
 | Element | Wohin? |
 |---|---|
@@ -861,7 +1060,7 @@ Ordne jedem Element zu, ob es in `<head>` oder `<body>` gehört.
 Was ist die konkrete Konsequenz, wenn `<meta charset="UTF-8">` fehlt oder falsch gesetzt ist?
 
 - [ ] Die Webseite lädt gar nicht.
-- [x] **Sonderzeichen (Umlaute, Emojis) werden als kryptische Symbole dargestellt, weil der Browser die falsche Zeichenkodierung rät.** ✅
+- [x] **Sonderzeichen (Umlaute, Emojis) werden als kryptische Symbole dargestellt, weil der Browser die falsche Zeichenkodierung rät.**
 - [ ] Die Seite wird langsamer, da der Browser alle Sprachen durchprobieren muss.
 - [ ] Das CSS wird nicht geladen.
 
@@ -869,12 +1068,33 @@ Was ist die konkrete Konsequenz, wenn `<meta charset="UTF-8">` fehlt oder falsch
 
 ---
 
+### F4 – Umschließende vs. selbst-schließende Tags
+**Thema:** HTML-Anatomie – Tag-Typen
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordnen Sie jedes HTML-Element seinem Tag-Typ zu.
+
+| Element | Tag-Typ |
+|---|---|
+| `<a>` | Umschließend (Start- und End-Tag) |
+| `<body>` | Umschließend (Start- und End-Tag) |
+| `<img>` | Selbst-schließend (kein End-Tag) |
+| `<input>` | Selbst-schließend (kein End-Tag) |
+| `<meta>` | Selbst-schließend (kein End-Tag) |
+
+> **Feedback:** Umschließende Tags haben Inhalt zwischen Start und Ende (`<a>…</a>`). Selbst-schließende Tags stehen allein, weil sie keinen Inhalt umschließen (`<img>`, `<input>`, `<meta>`).
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK G – CSS
 
 ---
 
+<!-- _class: disable -->
+
 ### G1 – Spezifität: ID vs. Klasse vs. Element
 **Thema:** CSS Spezifität – Grundregel
 **Punkte:** 2
@@ -890,7 +1110,7 @@ Ein Element `<p class="highlight" id="main">` wird angezeigt. Welche Farbe?
 
 - [ ] Blau – die Element-Regel steht zuerst im Code.
 - [ ] Grün – Klassen haben immer Vorrang vor IDs.
-- [x] **Rot – die ID `#main` hat die höchste Spezifität (0,1,0,0).** ✅
+- [x] **Rot – die ID `#main` hat die höchste Spezifität (0,1,0,0).**
 - [ ] Rot – die letzte Regel im Code gewinnt immer.
 
 > **Feedback:** Spezifität: ID (0,1,0,0) > Klasse (0,0,1,0) > Element (0,0,0,1). Reihenfolge im Code ist nur relevant bei gleicher Spezifität.
@@ -898,6 +1118,8 @@ Ein Element `<p class="highlight" id="main">` wird angezeigt. Welche Farbe?
 ---
 
 
+<!-- _class: disable -->
+
 ### G2 – Responsive Design: Mobile First – Welche Farbe?
 **Thema:** CSS Media Queries – Mobile First
 **Punkte:** 2
@@ -912,7 +1134,7 @@ Welche Farbe bei 900 px Breite?
 
 - [ ] Weiß – Media-Queries gelten nur ab 1024 px.
 - [ ] Grün – die letzte Media-Query überschreibt immer.
-- [x] **Blau – bei 900 px greift `min-width: 768px` (900 ≥ 768), aber `min-width: 1024px` nicht (900 < 1024).** ✅
+- [x] **Blau – bei 900 px greift `min-width: 768px` (900 ≥ 768), aber `min-width: 1024px` nicht (900 < 1024).**
 - [ ] Weiß – keine Media-Query greift zwischen den Breakpoints.
 
 > **Feedback:** Mobile First: Basis = white. Bei 900px: 768px-Query greift ✓, 1024px-Query greift ✗ → blau.
@@ -930,24 +1152,63 @@ Wie würde eine Media Query für „Desktop First" aussehen (Standard ist Deskto
 
 - [ ] `@media (device-width: small) { ... }`
 - [ ] `@media (min-width: ...)` – bleibt gleich, nur die Reihenfolge ändert sich.
-- [x] **`@media (max-width: ...)` – Stile für Bildschirme, die kleiner als eine bestimmte Breite sind.** ✅
+- [x] **`@media (max-width: ...)` – Stile für Bildschirme, die kleiner als eine bestimmte Breite sind.**
 - [ ] `@media (mobile: true) { ... }`
 
 > **Feedback:** Desktop First: Basis-CSS für große Schirme. `max-width` = „Wenn der Bildschirm schmäler ist als X, dann…" – Ausnahmen für Tablets/Handys.
 
 ---
 
+<!-- _class: disable -->
+
 ### G4 – Mobile First vs. Desktop First: Vergleich
 **Thema:** CSS Media Queries – Konzept-Vergleich
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre den Unterschied zwischen „Mobile First" und „Desktop First" beim Responsive Design. Welche Media-Query-Eigenschaft nutzt jeder Ansatz, und warum?
+Erklären Sie den Unterschied zwischen „Mobile First" und „Desktop First" beim Responsive Design. Welche Media-Query-Eigenschaft nutzt jeder Ansatz, und warum?
 
 > **Musterlösung:** Mobile First: Das Basis-CSS ist für kleine Bildschirme (Handy). Mit `min-width` werden schrittweise Anpassungen für größere Bildschirme hinzugefügt („ab dieser Breite"). Desktop First: Das Basis-CSS ist für große Bildschirme. Mit `max-width` werden Ausnahmen für kleinere Geräte definiert (「bis zu dieser Breite"). Mobile First wird bevorzugt, weil die Mehrheit der Benutzenden mobil zugrifft und forced-mobile-first die Grundlage für progressive Enhancement bietet.
 
 ---
 
+<!-- _class: disable -->
+
+### G5 – box-sizing: border-box
+**Thema:** CSS Box-Modell – box-sizing
+**Punkte:** 2
+**Typ:** `[MC]`
+
+Ein Element hat `width: 200px`, `padding: 20px` und `border: 5px`. Welche sichtbare Gesamtbreite ergibt sich mit `box-sizing: border-box`?
+
+- [x] **200 px – Padding und Border werden in die angegebene Breite eingerechnet.**
+- [ ] 250 px – Padding und Border werden zur Breite addiert.
+- [ ] 245 px – nur das Padding zählt, die Border nicht.
+- [ ] 200 px, aber nur, wenn kein Margin gesetzt ist.
+
+> **Feedback:** `border-box`: die `width` umfasst Content + Padding + Border (hier 200 px gesamt). Der Standard `content-box` würde addieren (200 + 2×20 + 2×5 = 250 px). Deshalb gilt `box-sizing: border-box` als Best Practice.
+
+---
+
+### G6 – CSS-Farbnotationen zuordnen
+**Thema:** CSS Farben – Notationen
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu.
+
+| Schreibweise | Notation |
+|---|---|
+| `red` | Schlüsselwort |
+| `#FF0000` | Hexadezimal |
+| `rgb(255, 0, 0)` | RGB (Red Green Blue) |
+| `rgba(255, 0, 0, 0.5)` | RGBA (RGB + Alpha/Transparenz) |
+| `hsl(0, 100%, 50%)` | HSL (Hue, Saturation, Lightness) |
+
+> **Feedback:** Fünf Wege, dieselbe Farbe anzugeben. RGBA ergänzt RGB um einen Alpha-Kanal (Transparenz). HSL beschreibt Farbton, Sättigung und Helligkeit – intuitiver beim manuellen Anpassen.
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK H – Barrierefreiheit
@@ -959,7 +1220,7 @@ Erkläre den Unterschied zwischen „Mobile First" und „Desktop First" beim Re
 **Punkte:** 2
 **Typ:** `[MATCH]`
 
-Ordne jedem Eingabegerät seine Nutzungsweise zu.
+Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu.
 
 | Eingabe | Nutzungsweise |
 |---|---|
@@ -985,13 +1246,15 @@ Eine Person kann aktuell nur mit einer Hand ihr Handy bedienen, weil sie das Bab
 
 - [ ] Permanent – das ist eine bleibende körperliche Behinderung.
 - [ ] Temporär – die Person ist verletzt und braucht Zeit zum Heilen.
-- [x] **Situativ – die Einschränkung entsteht durch die aktuelle Umgebung/Situation, nicht durch eine Behinderung.** ✅
+- [x] **Situativ – die Einschränkung entsteht durch die aktuelle Umgebung/Situation, nicht durch eine Behinderung.**
 - [ ] Diese Art von Einschränkung existiert nicht – Barrierefreiheit betrifft nur Menschen mit Behinderung.
 
 > **Feedback:** Drei Typen: Permanent (z. B. Blindheit), Temporär (z. B. gebrochener Arm, Augen-OP), Situativ (z. B. helle Sonne, laute Umgebung, Baby auf dem Arm). Barrierefreie Gestaltung hilft bei allen drei.
 
 ---
 
+<!-- _class: disable -->
+
 ### H2a – Einschränkungen: Permanent, Temporär, Situativ
 **Thema:** Barrierefreiheit – Einschränkungstypen erklären
 **Punkte:** 3
@@ -1013,7 +1276,7 @@ Erklären Sie die drei Typen von Einschränkungen: **permanent**, **temporär**
 Welches Beispiel demonstriert den Curb-Cut-Effekt?
 
 - [ ] Barrierefreie Webseiten laden langsamer.
-- [x] **Untertitel: gedacht für Gehörlose, helfen aber auch in lauter Umgebung oder beim Sprachlernen.** ✅
+- [x] **Untertitel: gedacht für Gehörlose, helfen aber auch in lauter Umgebung oder beim Sprachlernen.**
 - [ ] Der Curb-Cut-Effekt bedeutet, dass barrierefreie Seiten nur für Menschen mit Behinderung nützlich sind.
 - [ ] Alt-Texte verlängern die Ladezeit einer Webseite.
 
@@ -1028,12 +1291,15 @@ Welches Beispiel demonstriert den Curb-Cut-Effekt?
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre das Konzept des Curb-Cut-Effekts. Nenne zwei konkrete Web-Beispiele und erkläre jeweils, wer die ursprüngliche Zielgruppe war und wer sonst davon profitiert.
+Erklären Sie das Konzept des Curb-Cut-Effekts. Nennen Sie zwei konkrete Web-Beispiele und erklären Sie jeweils, wer die ursprüngliche Zielgruppe war und wer sonst davon profitiert.
 
 > **Musterlösung:** Der Curb-Cut-Effekt beschreibt, wie eine Maßnahme für Menschen mit Behinderung am Ende allen zugute kommt – wie die Bordsteinabsenkung, die für Rollstuhlfahrer gedacht war, aber auch Kinderwagen, Rollkoffer und Fahrrädern helfen. Web-Beispiele: (1) Untertitel – primär für Gehörlose, helfen auch in lauter Umgebung oder beim Sprachlernen. (2) Alt-Texte – primär für Screen-Reader-Benutzende, helfen auch Suchmaschinen (SEO).
 
 ---
 
+
+<!-- _class: disable -->
+
 ### H5 – EAA: Was ist das?
 **Thema:** Barrierefreiheit – Rechtlicher Rahmen
 **Punkte:** 1
@@ -1042,7 +1308,7 @@ Erkläre das Konzept des Curb-Cut-Effekts. Nenne zwei konkrete Web-Beispiele und
 Was ist der European Accessibility Act (EAA)?
 
 - [ ] Ein freiwilliges EU-Programm zur Förderung barrierefreier Websites.
-- [x] **Eine EU-Richtlinie, die seit Juni 2025 in Kraft ist und Barrierefreiheit in bestimmten digitalen Bereichen verpflichtend macht.** ✅
+- [x] **Eine EU-Richtlinie, die seit Juni 2025 in Kraft ist und Barrierefreiheit in bestimmten digitalen Bereichen verpflichtend macht.**
 - [ ] Ein deutsches Gesetz, das nur öffentliche Behörden betrifft.
 - [ ] Ein technisches Standard wie HTML oder CSS.
 
@@ -1055,7 +1321,7 @@ Was ist der European Accessibility Act (EAA)?
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat. Nenne mindestens zwei konkrete Beispiele.
+Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat. Nennen Sie mindestens zwei konkrete Beispiele.
 
 > **Musterlösung:** Barrierefreiheit verbessert die UX für alle: (1) SEO – Alt-Texte und semantisches HTML helfen Suchmaschinen, die Seite besser zu verstehen → besseres Ranking. (2) Mobile – viele barrierefreie Prinzipien (z. B. große Tippflächen, guter Kontrast) sind auch für Mobilgeräte im Sonnenlicht wichtig. (3) Ältere Menschen – Sehschwäche, motorische Einschränkungen betreffen einen großen Anteil der Bevölkerung. Der Markt: ~15% Menschen mit Behinderung + ~20% ältere Menschen.
 
@@ -1069,7 +1335,7 @@ Erkläre, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung
 Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie?
 
 - [ ] Sie scrollen durch die Seite und schauen, ob sie schön aussieht.
-- [x] **Sie navigieren nur mit Tab + Enter durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?** ✅
+- [x] **Sie navigieren nur mit Tab + Enter durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?**
 - [ ] Sie installieren einen Screenreader und lassen die Seite vorlesen.
 - [ ] Sie öffnen den Quellcode und zählen die barrierefreien Tags.
 
@@ -1090,7 +1356,7 @@ Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technolog
 **Punkte:** 3
 **Typ:** `[ESSAY]`
 
-Eine Person klickt auf einen „Neuen Eintrag erstellen"-Button einer Webanwendung. Beschreibe vom Klick bis zur Antwort des Servers, welche Protokolle beteiligt sind und welche HTTP-Methode verwendet wird.
+Eine Person klickt auf einen „Neuen Eintrag erstellen"-Button einer Webanwendung. Beschreiben Sie vom Klick bis zur Antwort des Servers, welche Protokolle beteiligt sind und welche HTTP-Methode verwendet wird.
 
 > **Musterlösung:** (1) Der Browser sendet eine HTTP-Anfrage. Da es sich um eine neue Ressource handelt, nutzt er POST. (2) Vorher: DNS löst den Domain-Namen auf. (3) TCP-Handshake stellt die Verbindung her. (4) POST-Anfrage wird gesendet (Daten im Body). (5) Server verarbeitet, erstellt den Eintrag, antwortet mit 201 Created.
 

slides/dhbw/01-intro.md

@@ -0,0 +1,666 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Web Engineering – DHBW Stuttgart"
+footer: "Michael Czechowski – SoSe 2026"
+title: Intro
+---
+
+<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);
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg cover opacity:0.2](./assets/background.png)
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026**
+
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
+---
+
+# Ressourcen zum Selbstlernen
+
+- **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/)
+
+---
+
+<!-- _class: lead -->
+
+# Herzlich Willkommen!
+
+## 1. Sitzung: 08.05.2026
+
+---
+
+# Über mich
+
+![bg right:33% fit](./assets/logos/collage.png)
+
+**Michael Werner 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
+
+---
+
+# Vorstellungsrunde
+
+## Wer bist du, was machst du?
+
+> Ich bin \_\_\_, mache bei \_\_\_ \_\_\_ und ein Fun Fact über mich ist, dass ich ...
+
+- ... sämtliche One Piece Bände gelesen habe.
+- ... alle XKCD Comics mit Titel kenne.
+- ... irgendwann bei \_\_\_ arbeiten möchte.
+- ... Paulaner Spezi im Blindtest herausschmecken kann.
+
+---
+
+# Vorlesungsplan
+
+<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>
+
+---
+
+# Erwartungen und Wünsche
+
+- Was haben wir bisher gelernt?
+- Was kennen wir bereits aus dem Arbeitskontext?
+- Welche Technologien nutzen wir bereits?
+- Was möchte ich hier lernen: Frontend, Backend, DevOps?
+- Eigene FOSS entwickeln?
+- CLI-Skills verbessern?
+- Cloud, Cloud, Cloud?
+
+---
+
+# Prüfungsleistung – Übersicht
+
+Eigenes Projekt: **Web-Applikation** XOR **Backend** (API/CLI).
+
+| Punkte | Bereich |
+|--------|---------|
+| 30 | Grundanforderungen (Projektgrundlagen + Präsentation) |
+| 25 | Clean Code Prinzipien |
+| 25 | Accessibility & UX |
+| 20 | Technische Umsetzung |
+| **100** | **Basispunkte** |
+| +15 | Bonuspunkte (max. 3 Features a 5 P.) |
+
+---
+
+# Prüfungsleistung – Grundanforderungen (30 P.)
+
+**Projektgrundlagen (15 P.)**
+- Funktionsfähige Anwendung (8 P.)
+- Repository mit Versionskontrolle (4 P.)
+- Projektdokumentation / README (3 P.)
+
+**Präsentation (15 P.)**
+- Elevator Pitch (5 P.)
+- Technische Präsentation (5 P.)
+- Projektevolution: wie hat sich das Projekt vs. Ursprungsidee verändert? (5 P.)
+
+---
+
+# Prüfungsleistung – Clean Code (25 P.)
+
+**Projektstruktur (10 P.)**
+- Ordnerstruktur (5 P.)
+- Datei-Organisation (5 P.)
+
+**Code-Qualität (10 P.)**
+- KISS – Keep It Simple, Stupid (3 P.)
+- Beschreibende Namen (3 P.)
+- Funktionsverantwortlichkeiten (4 P.)
+
+**Kommentierung & Dokumentation (5 P.)**
+
+---
+
+# Prüfungsleistung – Accessibility & UX (25 P.)
+
+**Web Accessibility (15 P.)**
+- Semantisches HTML (5 P.)
+- ARIA Labels & Alt-Texte (5 P.)
+- Tastaturnavigation (5 P.)
+
+**Responsive Design (10 P.)**
+- Mobile First Approach (5 P.)
+- Flexbox/Grid Layout (5 P.)
+
+---
+
+# Prüfungsleistung – Technische Umsetzung (20 P.)
+
+- Plattformunabhängigkeit (5 P.)
+- Package Management (5 P.)
+- Build Tools & Optimierung (5 P.)
+- Live-Demo (5 P.)
+
+---
+
+# Prüfungsleistung – Bonuspunkte (max. 15 P.)
+
+Mindestens 2 Bereiche wählen, je 5 Punkte:
+
+- API Integration
+- Local Storage / State Management
+- Progressive Web App Features
+- Testing
+- Erweiterte Responsive Features (3+ Breakpoints)
+- Security Features
+
+---
+
+# Prüfungsleistung – Abgabe & Termine
+
+- **Code-Upload:** bis 27.07.
+- **Präsentation:** 17.07. (Gruppen, ~10 Min.)
+
+Details: https://git.librete.ch/DHBW/pruefungsleistung
+
+---
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+# Was ist (k)eine Web Applikation?
+## Exkurs
+
+---
+
+# Was ist (k)eine Web Applikation?
+
+**Keine Web Applikation ist:**
+* Betriebssystem (GNU/Linux, Windows, macOS, iOS, Android)
+* Desktop-Applikation
+* Mobile-Applikation
+* Embedded System (Microcontroller, IoT)
+
+**Eine Web Applikation ist:**
+* plattformunabhängig (läuft im Browser)
+* nutzt in der Regel HTTP-Requests
+* keine Installation nötig — serverseitig aktualisiert
+* gebaut in Web-Technologien (HTML, CSS, JS/TS)
+* skalierbar durch verteilte Architektur
+
+---
+
+# 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)
+
+---
+
+# Das WWW (1989)
+
+**Tim Berners-Lee** am **CERN** (Genf)
+
+**Problem:** Wissenschaftler:innen können Forschungsdokumente nicht verlinken — Inkompatible Systeme, kein gemeinsames Format.
+
+**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.
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/mosaic.jpg)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
+
+---
+
+# Heute: Physische Infrastruktur
+
+- **5,5 Milliarden** Menschen online
+- **> 400 Unterseekabel**, ca. **1,3 Mio. km** Glasfaser
+- Daten reisen mit **Lichtgeschwindigkeit**
+- Latenz Frankfurt — New York: ~80 ms
+
+→ 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
+
+[{"id": 1, "name": "Produkt A"}, ...]
+```
+
+---
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+# Onboarding
+## Tools, Runtimes, Workflows
+
+---
+
+# 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 |
+
+---
+
+# Node.js installieren – macOS
+
+Empfohlen: **LTS** (aktuell **Node.js 24** — Stand 2026).
+
+Paketmanager: **[Homebrew](https://brew.sh)**
+
+```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)
+
+---
+
+# Node.js installieren – Linux
+
+Empfohlen: **LTS** (aktuell **Node.js 24**).
+
+**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
+```
+
+---
+
+# 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 |
+
+```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 (IDE)
+
+- **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
+
+---
+
+# Browser DevTools
+
+Chromium / Firefox / Safari — `F12` oder `Cmd+Opt+I`
+
+<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
+
+---
+
+# 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)
+
+---
+
+# Git Setup & Workflow
+
+**Einmalige Konfiguration:**
+```bash
+git config --global user.name "Vorname Nachname"
+git config --global user.email "vorname.nachname@example.com"
+git config --global init.defaultBranch main
+git config --global pull.rebase 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
+```
+
+---
+
+# 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"
+  }
+}
+```
+
+`.env` für Secrets (nie committen!), `.env.example` mit Dummy-Werten committen.
+
+---

slides/dhbw/02_css_extended.md

@@ -1,292 +0,0 @@
----
-marp: true
-theme: gaia
-paginate: true
-backgroundColor: #fff
-header: "Web Engineering – DHBW Stuttgart"
-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);
-}
-</style>
-
-<!-- _class: invert -->
-<!-- _header: '' -->
-<!-- _backgroundColor: #000 -->
-
-# Web Engineering
-
-**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
-
-**Sommersemester 2026** · Sitzung 2 — HTML & CSS (Frameworks)
-
----
-
-# Ressourcen zum Selbstlernen
-
-- **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/)
-
----
-
-# Inhalt
-
-Aufbauend auf den Grundlagen aus Sitzung 1.
-
-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.)
-
----
-
-<!-- _class: invert -->
-<!-- _backgroundColor: #000 -->
-
-# CSS: Extended
-
----
-
-# CSS Selectors – Attribut-Selektoren
-
-```css
-/* presence */
-[disabled] { opacity: 0.5; }
-
-/* exact value */
-[type="email"] { border-color: blue; }
-
-/* contains word */
-[class~="btn"] { cursor: pointer; }
-
-/* starts with */
-[href^="https"] { color: green; }
-
-/* ends with */
-[src$=".png"] { border: 1px solid #ccc; }
-
-/* contains substring */
-[class*="icon"] { padding-left: 20px; }
-```
-
----
-
-# CSS Combinators
-
-```css
-/* Child (direkt) */
-div > p { margin: 0; }
-
-/* Descendant (Nachkomme) */
-div p { margin: 0; }
-
-/* Next Sibling */
-h1 + p { font-size: 1.2em; }
-
-/* Subsequent Sibling */
-h1 ~ p { color: #666; }
-
-/* Selector List */
-h1, h2, h3 { font-weight: bold; }
-```
-
----
-
-# Pseudo Classes – Erweitert
-
-```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; }
-```
-
----
-
-# Shorthand Properties
-
-```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;
-```
-
----
-
-# Flexbox Shorthands
-
-```css
-/* flex: grow shrink basis */
-flex: 1 0 auto;
-
-/* 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;
-```
-
----
-
-# CSS Custom Properties (Variables)
-
-```css
-:root {
-  --primary-color: #d63384;
-  --spacing: 20px;
-  --radius: 8px;
-}
-
-.button {
-  background: var(--primary-color);
-  padding: var(--spacing);
-  border-radius: var(--radius);
-}
-```
-
----
-
-# 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;
-}
-```
-
----
-
-# 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
-
-```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
-</button>
-```
-
-- Keine eigenen CSS-Klassen mehr
-- JIT-Compiler erzeugt nur genutzte Klassen
-- Design-System via `tailwind.config.js`
-

slides/dhbw/03-js-frameworks.md

@@ -0,0 +1,412 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Web Engineering – DHBW Stuttgart"
+footer: "Michael Czechowski – SoSe 2026"
+title: JavaScript & Frameworks
+---
+
+<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);
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg cover opacity:0.2](./assets/background.png)
+
+# Web Engineering
+
+**DHBW Stuttgart** · Informatik / Wirtschaftsinformatik
+
+**Sommersemester 2026** · Sitzung 3 — JS, Frameworks & Build Tools
+
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
+---
+
+# Ressourcen zum Selbstlernen
+
+- **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/)
+
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+# JavaScript
+
+---
+
+# 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
+
+**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/)
+
+---
+
+# JavaScript Grundlagen
+
+```javascript
+// Variablen
+let name = "Welt";
+const alter = 25;
+
+// Funktionen
+function gruss(name) {
+  return `Hallo, ${name}!`;
+}
+
+// Arrow Functions
+const add = (a, b) => a + b;
+
+// Arrays
+const arr = [1, 2, 3];
+arr.map(x => x * 2); // [2, 4, 6]
+```
+
+---
+
+# DOM Manipulation
+
+```javascript
+// Element auswählen
+const title = document.querySelector('h1');
+
+// Inhalt ändern
+title.textContent = 'Neue Überschrift';
+
+// Event Listener
+button.addEventListener('click', () => {
+  alert('Geklickt!');
+});
+```
+
+---
+
+# Fetch API
+
+```javascript
+fetch('/api/products')
+  .then(res => res.json())
+  .then(data => {
+    console.log(data);
+  })
+  .catch(err => console.error(err));
+```
+
+---
+
+# 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)
+
+```jsx
+import { useState } from "react";
+
+function MyButton() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      Clicked {count} times
+    </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
+<script setup>
+import { ref } from "vue";
+const count = ref(0);
+</script>
+
+<template>
+  <button @click="count++">
+    Clicked {{ count }} times
+  </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
+<script>
+  let count = 0;
+</script>
+
+<button on:click={() => count += 1}>
+  Clicked {count} {count === 1 ? 'time' : 'times'}
+</button>
+```
+
+- **Compiler-Based** – kein Runtime-Framework
+- Reactive Assignments (`let`)
+- Built-in Animationen
+
+---
+
+# Astro – Content-First
+
+![bg right:25% fit](./assets/logos/frameworks/astro.svg)
+
+```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`)
+
+---
+
+# Rendering Frameworks
+
+| | 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 |
+
+---
+
+# Build Tools – Webpack
+
+![bg right:25% fit](./assets/logos/frameworks/webpack.svg)
+
+- 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)
+

slides/dhbw/04-nodejs-basics.md

@@ -62,6 +62,15 @@ a {
 
 **Sommersemester 2026** · Sitzung 4 — Node.js: Scripting, Running and Building
 
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
 ---
 
 # Ressourcen zum Selbstlernen

slides/dhbw/05-express.md

@@ -62,6 +62,15 @@ a {
 
 **Sommersemester 2026** · Sitzung 5 — Express API, CRUD und Middlewares
 
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
 ---
 
 # Ressourcen zum Selbstlernen

slides/dhbw/06-testing.md

@@ -63,6 +63,15 @@ a {
 
 **Sommersemester 2026** · Sitzung 7 — Testing
 
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
 ---
 
 # Ressourcen zum Selbstlernen

slides/dhbw/07-typescript.md

@@ -63,6 +63,15 @@ a {
 
 **Sommersemester 2026** · Sitzung 8 — TypeScript
 
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
 ---
 
 <!-- _class: invert -->

slides/dhbw/08-docker.md

@@ -63,6 +63,15 @@ a {
 
 **Sommersemester 2026** · Sitzung 9 — Docker, Proxies and DBs
 
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
 ---
 
 <!-- _class: invert -->

slides/dhbw/09-best-practices.md

@@ -63,6 +63,15 @@ a {
 
 **Sommersemester 2026** · Sitzung 10 — Wrap-up & Projektsupport
 
+[https://librete.ch/dhbw/](https://librete.ch/dhbw/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-dhbw.png)
+
 ---
 
 <!-- _class: invert -->

slides/dhbw/assets/logos/bosch.svg

@@ -0,0 +1,15 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" width="433" height="97" viewBox="0 0 433 97">
+  <g>
+    <g id="logotype">
+      <path id="logotype-b-47" d="M185.2,46.88a13.77,13.77,0,0,0,8.8-13c0-11.7-8.3-17.5-19.7-17.5H144.4V80h32.5c10,0,19.8-7,19.8-17.7C196.7,49.58,185.2,47,185.2,46.88ZM160,29.58h11.6a5.66,5.66,0,0,1,6,5.31q0,.34,0,.69a5.93,5.93,0,0,1-6,5.81H159.9Zm11.7,37.1H160.1V54.18h11.3c5.7,0,8.4,2.5,8.4,6.2C179.8,65,176.4,66.68,171.7,66.68Z" style="fill: #ed0007;fill-rule: evenodd"/>
+      <path id="logotype-o-47" d="M231.1,14.78c-18.4,0-29.2,14.7-29.2,33.3s10.8,33.3,29.2,33.3,29.2-14.6,29.2-33.3S249.6,14.78,231.1,14.78Zm0,51.4c-9,0-13.5-8.1-13.5-18.1s4.5-18,13.5-18,13.6,8.1,13.6,18C244.7,58.18,240.1,66.18,231.1,66.18Z" style="fill: #ed0007;fill-rule: evenodd"/>
+      <path id="logotype-s-47" d="M294.2,41.38l-2.2-.5c-5.4-1.1-9.7-2.5-9.7-6.4,0-4.2,4.1-5.9,7.7-5.9a17.86,17.86,0,0,1,13,5.9l9.9-9.8c-4.5-5.1-11.8-10-23.2-10-13.4,0-23.6,7.5-23.6,20,0,11.4,8.2,17,18.2,19.1l2.2.5c8.3,1.7,11.4,3,11.4,7,0,3.8-3.4,6.3-8.6,6.3-6.2,0-11.8-2.7-16.1-8.2l-10.1,10c5.6,6.7,12.7,11.9,26.4,11.9,11.9,0,24.6-6.8,24.6-20.7C314.3,46.08,303.3,43.28,294.2,41.38Z" style="fill: #ed0007;fill-rule: evenodd"/>
+      <path id="logotype-c-47" d="M349.7,66.18c-7,0-14.3-5.8-14.3-18.5,0-11.3,6.8-17.6,13.9-17.6,5.6,0,8.9,2.6,11.5,7.1l12.8-8.5c-6.4-9.7-14-13.8-24.5-13.8-19.2,0-29.6,14.9-29.6,32.9,0,18.9,11.5,33.7,29.4,33.7,12.6,0,18.6-4.4,25.1-13.8L361.1,59C358.5,63.18,355.7,66.18,349.7,66.18Z" style="fill: #ed0007;fill-rule: evenodd"/>
+      <polygon id="logotype-h-47" points="416.3 16.38 416.3 39.78 397 39.78 397 16.38 380.3 16.38 380.3 79.98 397 79.98 397 54.88 416.3 54.88 416.3 79.98 433 79.98 433 16.38 416.3 16.38" style="fill: #ed0007;fill-rule: evenodd"/>
+    </g>
+    <g id="symbol">
+      <path d="M48.2.18a48.2,48.2,0,1,0,48.2,48.2A48.2,48.2,0,0,0,48.2.18Zm0,91.9a43.7,43.7,0,1,1,43.7-43.7,43.71,43.71,0,0,1-43.7,43.7Z"/>
+      <path d="M68.1,18.28H64.8v16.5H31.7V18.28H28.3a36.06,36.06,0,0,0,0,60.2h3.4V62H64.8v16.5h3.3a36.05,36.05,0,0,0,0-60.2ZM27.1,72A31.59,31.59,0,0,1,24.47,27.4a32.51,32.51,0,0,1,2.63-2.62Zm37.7-14.6H31.7V39.28H64.8Zm4.5,14.5v-10h0V34.78h0v-10a31.65,31.65,0,0,1,2.39,44.71A33.68,33.68,0,0,1,69.3,71.88Z"/>
+    </g>
+  </g>
+</svg>

slides/dhbw/assets/logos/leibniz-fh.svg

@@ -0,0 +1 @@
+<svg width="189" height="45" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-46-32h1440V68H-46z"/><g fill-rule="nonzero"><g fill="#0E1111"><path d="M133.298 34.907v-1.509L142.48 20.1h-8.71v-1.982h11.44v1.513l-9.183 13.296h9.494v1.981h-12.222M129.365 35.163c-2.235 0-2.145-.927-2.145-3.611V18.117h2.132V31.82l.013 3.343M120.61 34.907v-12.19c0-2.181-1.192-2.854-3.135-2.854-2.037 0-3.071.371-4.23 1.075v13.97h-2.194v-16.79h1.223l.471 1.41c1.472-1.175 3.07-1.746 4.73-1.746 3.728 0 5.327 1.812 5.327 5.039v12.086h-2.193M100.87 33.163c-2.038 0-3.168-.37-4.389-1.075v-11.15c1.221-.704 2.351-1.075 4.388-1.075 3.76 0 4.229 3.325 4.229 6.65s-.47 6.65-4.229 6.65zm0-15.381a7.795 7.795 0 00-4.389 1.376V9.723h-2.193v25.184h1.221l.47-1.377c1.63 1.109 3.196 1.714 4.89 1.714 5.045 0 6.422-3.896 6.422-8.731s-1.377-8.731-6.422-8.731zM89.417 35.24c-2.256 0-2.148-1.004-2.148-3.688V18.117h2.13V31.82l.018 3.42M72.667 25.674c.092-3.023.751-5.811 4.387-5.811 3.603 0 3.76 2.822 3.76 5.81h-8.147zm10.34.839c0-4.835-.627-8.731-5.953-8.731-5.297 0-6.581 3.896-6.581 8.73 0 4.836 1.284 8.732 6.581 8.732 1.534 0 3.413-.168 5.17-1.008v-2.013c-1.535.704-2.914.94-5.17.94-3.542 0-4.263-2.653-4.387-5.574h10.34v-1.076zM54.492 34.907V9.723h2.131v23.07h10.874v2.114H54.492M188.975 34.9V9.723h-2.12v11.011h-11.658V9.724h-2.119V34.9h2.12V22.848h11.657V34.9h2.12M158.053 11.837h11.128V9.723h-13.248V34.9h2.12V22.848h10.037v-2.114h-10.037v-8.897M87.261 15.025h2.142v-2.24h-2.142zM127.222 15.025h2.142v-2.24h-2.142z"/></g><path d="M.195 1.476l9.617-.42v43.75L.2 42.284C.2 23.158.197 8.006.195 1.476M39.777 43.49l-9.655.422V.162l9.65 2.953c0 19.392.002 34.192.005 40.375" fill="#0288d1"/><path fill="#74BEE6" d="M9.812 34.613v10.193l15.285-.67V33.888l-15.285.725M15.11.837v10.285l15.012-.724V.161L15.11.837"/></g></g></svg>

slides/dhbw/assets/logos/pons.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="123.1184" height="38" id="svg2">
+  <defs id="defs4"/>
+  <g transform="translate(-4.113659e-8,-8.1875909)" id="g2881">
+    <g transform="matrix(0.8227318,0,0,0.8227318,0,8.1875911)" id="g3725">
+      <path d="m 5.9058686,3.5864545 c 0,1.6289778 -1.3205475,2.9495254 -2.9495254,2.9495254 -1.628978,0 -2.9495254,-1.3205476 -2.9495254,-2.9495254 0,-1.6289779 1.3205474,-2.94952547 2.9495254,-2.94952547 1.6289779,0 2.9495254,1.32054757 2.9495254,2.94952547 l 0,0 z" id="path2492" style="fill:#022d6f;fill-opacity:1;fill-rule:nonzero;stroke:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"/>
+      <use transform="translate(123.33173,0.52756266)" id="use2494" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(12.995121,0.24968358)" id="use3266" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(-0.0021669,6.4942292)" id="use3268" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(-0.00100324,13.007016)" id="use3270" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(1.6068057e-4,19.515151)" id="use3272" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(5.6386012,22.744639)" id="use3274" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(-0.00681775,26.008952)" id="use3276" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(12.102606,22.633932)" id="use3278" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(19.117759,2.4186714)" id="use3280" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(22.403372,8.0486075)" id="use3282" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(18.008113,19.840656)" id="use3284" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(21.756631,14.51843)" id="use3286" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(-0.00100325,32.490405)" id="use3290" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(0.00132398,38.988066)" id="use3292" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(37.905739,3.6984537)" id="use3294" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(65.078186,33.204228)" id="use3296" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(33.398214,8.5473695)" id="use3298" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(30.724945,14.638897)" id="use3300" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(30.159334,21.213576)" id="use3302" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(31.812768,27.679762)" id="use3304" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(35.421974,33.202782)" id="use3306" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(40.652784,37.299478)" id="use3308" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(43.733988,0.5434759)" id="use3310" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(50.271054,-0.58340514)" id="use3312" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(56.815356,0.50441766)" id="use3314" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(46.959848,39.447642)" id="use3316" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(62.637816,3.6608425)" id="use3318" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(53.579391,39.44039)" id="use3320" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(67.139555,8.5531567)" id="use3322" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(69.779551,14.64179)" id="use3324" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(70.340823,21.210681)" id="use3326" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(79.933056,19.51385)" id="use3328" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(59.8575,37.257529)" id="use3330" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(68.722105,27.673974)" id="use3332" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(6.4702426,5.7452075e-4)" id="use3334" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(79.938844,13.014391)" id="use3336" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(79.933047,0.00245617)" id="use3338" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(79.934503,6.494682)" id="use3340" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(85.563127,3.2586948)" id="use3342" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(89.846429,8.1177379)" id="use3344" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(94.152881,13.004267)" id="use3346" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(79.938841,26.013309)" id="use3348" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(98.462222,17.886454)" id="use3350" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(102.76578,22.745497)" id="use3352" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(79.930164,32.496854)" id="use3354" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(108.40887,26.016202)" id="use3356" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(108.40597,0.00390394)" id="use3358" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(108.40887,6.4888947)" id="use3360" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(108.40742,13.012946)" id="use3362" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(108.41031,19.509501)" id="use3364" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(79.933058,38.984738)" id="use3366" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(108.40308,32.498301)" id="use3368" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(108.40308,38.98329)" id="use3370" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(118.86037,5.2694337)" id="use3372" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(118.33815,11.771784)" id="use3374" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(122.73574,16.555607)" id="use3376" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(129.72991,-0.63692924)" id="use3378" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(136.11652,0.46102075)" id="use3380" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(128.89236,18.606849)" id="use3382" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(135.21099,20.106946)" id="use3384" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(142.06329,3.0879996)" id="use3386" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(141.06815,22.998648)" id="use3388" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(118.41627,34.426578)" id="use3390" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(143.73998,28.915145)" id="use3392" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(123.96821,37.788408)" id="use3394" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(130.21596,39.651611)" id="use3396" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(136.68652,38.987622)" id="use3398" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+      <use transform="translate(141.93608,35.149863)" id="use3400" style="fill:#022d6f;fill-opacity:1" x="0" y="0" width="117" height="36" xlink:href="#path2492"/>
+    </g>
+  </g>
+</svg>