gendering: fehlende person-substantive in beiden kursen

- Nutzer/User -> Nutzende
- Endnutzer -> Endnutzende
- Teilnehmer -> Teilnehmende
- Programmierer/Entwickler -> Programmierende/Entwickelnde
- Web-Entwickler -> Web-Entwickelnde
- Tastatur-Nutzer -> Tastatur-Nutzende
- Benutzer -> Nutzende
- Konsumenten -> KonsumentInnen
- Künstler -> KünstlerInnen
- Autor -> AutorIn
- Fotografen -> FotografInnen
- Kunde -> KundIn

ausgenommen: code-identifiers (User, type User, /users/),
Sender/Empfänger (network protocol), Sawyer (konkrete person),
Hersteller/Betreiber (organisations-rolle).

.gitignore

@@ -2,6 +2,7 @@
 build/
 *.pdf
 *.html
+!slides/*/assets/demos/**/*.html
 .dev-index/
 
 # Dependencies

CLAUDE.md

@@ -35,8 +35,9 @@ build/                  # Generated output (gitignored)
 ## Build Commands
 
 ```bash
-make dev-b          # Dev server 223015b (port 1311)
+make dev            # Marp live server all courses (port 1312, HMR)
-make dev-c          # Dev server 223015c (port 1312)
+make dev-b          # Marp live server 223015b (port 1313, HMR)
+make dev-c          # Marp live server 223015c (port 1314, HMR)
 make build          # Build all courses
 make build-b        # Build 223015b only
 make build-c        # Build 223015c only

Makefile

@@ -27,7 +27,9 @@ help:
 	@echo "  223015c - Internettechnologien"
 	@echo ""
 	@echo "Development:"
-	@echo "  make dev         - Start development server (port 3000)"
+	@echo "  make dev         - Marp live server all courses (port 1312, HMR)"
+	@echo "  make dev-b       - Marp live server 223015b (port 1313, HMR)"
+	@echo "  make dev-c       - Marp live server 223015c (port 1314, HMR)"
 	@echo ""
 	@echo "Build:"
 	@echo "  make build       - Build all courses"
@@ -55,13 +57,20 @@ build/.exists:
 	@mkdir -p build/223015b build/223015c
 	@touch $@
 
-# Development server
+# Development server (Marp live server with HMR)
 dev:
 	@./scripts/dev-server.sh
 
+dev-b:
+	@./scripts/dev-server.sh 223015b 1313
+
+dev-c:
+	@./scripts/dev-server.sh 223015c 1314
+
 dev-kill:
-	@-pkill -f "marp-cli.*--server" 2>/dev/null || true
+	@-fuser -k 1312/tcp 2>/dev/null || true
-	@sleep 0.5
+	@-fuser -k 1313/tcp 2>/dev/null || true
+	@-fuser -k 1314/tcp 2>/dev/null || true
 
 # Build functions
 define build_course

marp.config.js

@@ -0,0 +1,21 @@
+const { Marp } = require('@marp-team/marp-core');
+const hljs = require('highlight.js');
+
+module.exports = {
+  engine: (opts) => {
+    const marp = new Marp(opts);
+    const md = marp.markdown;
+    const defaultInline = md.renderer.rules.code_inline
+      || ((tokens, idx, options, env, self) => `<code>${md.utils.escapeHtml(tokens[idx].content)}</code>`);
+    md.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
+      const content = tokens[idx].content;
+      try {
+        const highlighted = hljs.highlight(content, { language: 'html', ignoreIllegals: true }).value;
+        return `<code class="hljs language-html">${highlighted}</code>`;
+      } catch (e) {
+        return defaultInline(tokens, idx, options, env, self);
+      }
+    };
+    return marp;
+  }
+};

package.json

@@ -13,11 +13,18 @@
     "deploy": "make deploy",
     "test": "echo \"No tests specified\" && exit 0"
   },
-  "keywords": ["marp", "slides", "hdm", "lectures"],
+  "keywords": [
+    "marp",
+    "slides",
+    "hdm",
+    "lectures"
+  ],
   "author": "Michael Czechowski <mail@librete.ch>",
   "license": "CC-BY-SA-4.0",
   "type": "commonjs",
   "devDependencies": {
-    "@marp-team/marp-cli": "^4.2.3"
+    "@marp-team/marp-cli": "^4.2.3",
+    "@marp-team/marp-core": "^4.3.0",
+    "highlight.js": "^11.11.1"
   }
 }

scripts/dev-server.sh

@@ -1,12 +1,16 @@
 #!/usr/bin/env bash
-# Simplified development server for HdM slides
+# Development server for HdM slides
-# Starts single Marp server for all courses
+# Usage:
+#   ./dev-server.sh              - Marp live server for all courses (port 1312)
+#   ./dev-server.sh 223015b 1313 - Marp live server for single course
+#   ./dev-server.sh 223015c 1314 - Marp live server for single course
 
 set -e
 
 # Configuration
 SLIDES_DIR="slides"
-DEV_PORT=3000
+COURSE="${1:-}"
+DEV_PORT="${2:-1312}"
 
 # Colors
 GREEN='\033[0;32m'
@@ -14,40 +18,27 @@ BLUE='\033[0;34m'
 RED='\033[0;31m'
 NC='\033[0m' # No Color
 
-# Cleanup function
+# Kill existing process on our port only
-cleanup() {
+kill_port() {
-    echo -e "\n${RED}Shutting down dev server...${NC}"
+    fuser -k "$DEV_PORT/tcp" 2>/dev/null || true
-    pkill -f "marp-cli.*--server" 2>/dev/null || true
+    sleep 0.5
-    exit 0
-}
-
-# Kill existing processes on our port
-kill_existing() {
-    echo -e "${BLUE}Cleaning up existing processes...${NC}"
-    pkill -9 -f "marp-cli" 2>/dev/null || true
-    fuser -k $DEV_PORT/tcp 2>/dev/null || true
-    sleep 1
 }
 
 # Main
-trap cleanup SIGINT SIGTERM
+trap 'echo -e "\n${RED}Shutting down...${NC}"; kill 0; exit 0' SIGINT SIGTERM
 
-kill_existing
+kill_port
 
-echo -e "${GREEN}Starting development server...${NC}"
+if [ -n "$COURSE" ]; then
-echo ""
+    SERVE_DIR="$SLIDES_DIR/$COURSE"
-echo -e "  Server:   ${BLUE}http://localhost:$DEV_PORT${NC}"
+    echo -e "${GREEN}Marp dev server${NC} · ${BLUE}$COURSE${NC}"
-echo -e "  Slides:   ${BLUE}$SLIDES_DIR/${NC}"
+else
-echo ""
+    SERVE_DIR="$SLIDES_DIR"
-echo -e "Available courses:"
+    echo -e "${GREEN}Marp dev server${NC} · ${BLUE}all courses${NC}"
-echo -e "  223015b: ${BLUE}http://localhost:$DEV_PORT/223015b/${NC}"
+fi
-echo -e "  223015c: ${BLUE}http://localhost:$DEV_PORT/223015c/${NC}"
+
-echo ""
+echo -e "  ${BLUE}http://localhost:$DEV_PORT${NC}"
-echo -e "Press ${RED}Ctrl+C${NC} to stop the server"
+echo -e "  ${BLUE}$SERVE_DIR/${NC}"
 echo ""
 
-# Start single Marp server for all slides
+PORT=$DEV_PORT exec npx @marp-team/marp-cli -c marp.config.js --server "$SERVE_DIR/"
-PORT=$DEV_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/"
-
-# Wait for process to exit
-wait

scripts/generate-index.sh

@@ -320,42 +320,42 @@ LINK
 
 done
 
-# Add klausurfolien entry if it exists
+# Add klausurfolien entry if it exists (disabled — wird noch überarbeitet)
 if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
-  pdf_link=""
+  pdf_disabled=""
   if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
-    pdf_link="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
+    pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
   fi
   cat >> "$BUILD_DIR/index.html" << KLAUSUR
-    <div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
+    <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
-      <a href="klausurfolien.html" class="kapitel-link">
+      <div class="kapitel-link">
         <div class="kapitel-label">Prüfung</div>
         <div class="kapitel-title">Klausurrelevante Folien</div>
-      </a>
+      </div>
-      <a href="klausurfolien.html" class="btn btn-slides">Folien</a>
+      <span class="btn btn-slides btn-disabled">Folien</span>
-      $pdf_link
+      $pdf_disabled
     </div>
 KLAUSUR
 fi
 
-# Add klausurfragen entry if it exists (HTML and/or PDF)
+# Add klausurfragen entry if it exists (disabled — wird noch überarbeitet)
 if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
-  pdf_link=""
+  pdf_disabled=""
   if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
-    pdf_link="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
+    pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
   fi
-  slides_link=""
+  slides_disabled=""
   if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
-    slides_link="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
+    slides_disabled="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
   fi
   cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
-    <div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
+    <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
-      <a href="klausurfragen.html" class="kapitel-link">
+      <div class="kapitel-link">
         <div class="kapitel-label">Prüfung</div>
         <div class="kapitel-title">Klausurfragen</div>
-      </a>
+      </div>
-      $slides_link
+      $slides_disabled
-      $pdf_link
+      $pdf_disabled
     </div>
 KLAUSURFRAGEN
 fi

scripts/generate-root-index.sh

@@ -0,0 +1,158 @@
+#!/usr/bin/env bash
+# Generate root index.html for HdM slides overview
+# Usage: ./generate-root-index.sh
+
+BUILD_DIR="${1:-build}"
+
+cat > "$BUILD_DIR/index.html" << 'HEADER'
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HdM Vorlesungen</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
+      max-width: 720px;
+      margin: 0 auto;
+      padding: 3rem 1.5rem;
+      background: #fafafa;
+      color: #1d1d1f;
+      line-height: 1.5;
+    }
+    h1 {
+      font-size: 2rem;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.5rem;
+    }
+    .subtitle { color: #86868b; font-size: 1rem; }
+    .courses {
+      margin-top: 2rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    .course-card {
+      position: relative;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+      transition: all 0.2s ease;
+      display: grid;
+      grid-template-columns: 1fr auto auto;
+      align-items: center;
+      gap: 1rem;
+    }
+    .course-card:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+    }
+    .course-link {
+      display: block;
+      padding: 1.25rem 1.5rem;
+      text-decoration: none;
+      color: inherit;
+      grid-column: 1;
+    }
+    .course-link::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 12px;
+    }
+    .course-label {
+      font-size: 0.7rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .course-b .course-label { color: #1e5f8a; }
+    .course-c .course-label { color: #d63384; }
+    .course-title {
+      font-size: 1.15rem;
+      font-weight: 500;
+      color: #1d1d1f;
+      margin: 0.25rem 0;
+    }
+    .course-info { font-size: 0.85rem; color: #86868b; }
+    .section-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: #86868b;
+      margin-top: 2.5rem;
+      margin-bottom: 0.75rem;
+    }
+    .references {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+    footer {
+      margin-top: 2.5rem;
+      padding-top: 1.5rem;
+      border-top: 1px solid #e5e5e7;
+      color: #86868b;
+      font-size: 0.85rem;
+    }
+    footer a { color: #1d1d1f; text-decoration: none; }
+    footer a:hover { text-decoration: underline; }
+    .qr-section {
+      margin-top: 2.5rem;
+      padding: 1.5rem;
+      background: #fff;
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+      text-align: center;
+    }
+    .qr-code { width: 100%; height: auto; }
+    .qr-url { margin-top: 0.75rem; font-size: 0.85rem; color: #86868b; }
+    @media (max-width: 600px) {
+      .course-card { grid-template-columns: 1fr; }
+      .course-link { padding-bottom: 0.75rem; }
+    }
+  </style>
+</head>
+<body>
+  <h1>HdM Vorlesungen</h1>
+  <p class="subtitle">Sommersemester 2026 · Michael Czechowski</p>
+  <div class="courses">
+    <div class="course-card course-b">
+      <a href="223015b/" class="course-link">
+        <span class="course-label">223015b</span>
+        <div class="course-title">Dateiformate, Schnittstellen, Speichermedien &amp; Distributionswege</div>
+        <span class="course-info">6 Kapitel · Modul &quot;Technik 1&quot;</span>
+      </a>
+    </div>
+    <div class="course-card course-c">
+      <a href="223015c/" class="course-link">
+        <span class="course-label">223015c</span>
+        <div class="course-title">Grundlagen IT- und Internettechnik</div>
+        <span class="course-info">3 Kapitel · Modul &quot;Technik 1&quot;</span>
+      </a>
+    </div>
+  </div>
+  <h2 class="section-title">Referenzen</h2>
+  <div class="references">
+    <div class="course-card">
+      <a href="https://codecrispi.es/" class="course-link">
+        <span class="course-label">Plattform</span>
+        <div class="course-title">Code Crispies</div>
+        <span class="course-info">Selbstlernplattform</span>
+      </a>
+    </div>
+  </div>
+  <div class="qr-section">
+    <img src="qr-root.svg" alt="QR Code" class="qr-code">
+    <p class="qr-url">https://librete.ch/hdm/</p>
+  </div>
+  <footer>
+    <a href="mailto:mail@librete.ch">Kontakt</a>
+  </footer>
+</body>
+</html>
+HEADER
+
+echo "Generated $BUILD_DIR/index.html"

slides/223015b/00-intro.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
+  background: #0f0f23;
-  color: #5fb3e4;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }
@@ -88,167 +90,103 @@ Hochschule der Medien Stuttgart
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg fit](./assets/qrcode-0.svg)
 
 ---
 
 <!-- _class: lead -->
 
-# Willkommen!
+# Herzlich willkommen!
 ## Einführung
 
 ---
 
 # Über mich
 
-**Michael Czechowski**
+**Michael Werner Czechowski**
 
-- Irgendwas mit IT, Cloud und AI
+- Systems and Platform Engineer
 - Schwerpunkte:
   - Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source
 - Hintergrund:
-  - Philosophie (Uni Stuttgart) -> NO degree
+  - Philosophie (Uni Stuttgart)
-  - Wirtschafts-Informatik (Leibniz-FH) -> B.Sc.
+  - Wirtschaftsinformatik (Leibniz-FH Hannover)
 - Kontakt: lb-czechowski@hdm-stuttgart.de
 
+---
+
+# Warum dieses Modul?
+
+**Digitale Medien sind überall.**
+
+* Warum enthalten Fotos oft Informationen über den Aufnahmeort?
+* Warum lassen sich gelöschte Dateien wiederherstellen?
+* Warum benötigt eine Minute 4K-Video unkomprimiert 45 GB Speicher?
+* Warum zeigt eine "1 TB"-Festplatte nur 931 GB an?
+* Warum ist USB-C nicht gleich USB-C?
+* Ziel: **→ Mitreden können!**
+
 <!--
-Kurze Vorstellung
+1. EXIF (Exchangeable Image File Format)-Metadaten speichern GPS-Koordinaten, Kameramodell und Zeitstempel automatisch. Die meisten wissen nicht, dass diese Daten beim Versenden mitgeschickt werden. → Kapitel 4: Metadaten
-Praxisbezug betonen
+
-Fragen jederzeit willkommen
+2. Beim Löschen wird nur der Verzeichniseintrag im Dateisystem entfernt, nicht die Daten selbst. Die Bits bleiben auf dem Datenträger, bis sie überschrieben werden. → Kapitel 3: Dateisysteme
+
+3. 3840 × 2160 Pixel × 3 Byte (RGB) × 30 Bilder/Sek × 60 Sek = ~45 GB. Codecs wie H.264/H.265 komprimieren um Faktor 100+. → Kapitel 1+2: Kompression
+
+4. Hersteller rechnen dezimal (1 TB = 10¹² Bytes), Betriebssysteme binär (1 TiB = 2⁴⁰ Bytes). Die Differenz beträgt bei Terabyte bereits ~10%. → Kapitel 1: Dateneinheiten
+
+5. USB-C ist nur die Steckerform. Dahinter können USB 2.0 (480 Mbit/s), USB 3.2 (20 Gbit/s) oder Thunderbolt 4 (40 Gbit/s) laufen — gleiches Kabel, völlig unterschiedliche Leistung. → Kapitel 3: Schnittstellen
 -->
 
 ---
 
-<!-- _footer: '' -->
-
-![bg fit](./assets/jung-naiv.png)
-
----
-
-# AMA (Ask my anything)
-
-*Nur ein Vorschlag ...*
-
-* Hast du alle Bände von AoT daheim?
-* Hast du eine Studierenden-Kneipe mal geleitet?
-* Hast du wirklich 17 Semester Philosophie ohne Abschluss studiert?
-
----
-
 # Kurze Umfrage
 
 **Bitte Hand heben:**
 
-1) Wer hat schon mal ein Video komprimiert/konvertiert?
+* Wer kennt den Unterschied zwischen analog und digital?
-2) Wer kennte die 3-2-1 Regel?
+* Wer hat schon mal eine Datei von einem Format in ein anderes konvertiert?
-3) Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
+* Wer hat schon mal Metadaten aus einem Foto entfernt?
-4) Wer hat schon mal mit APIs gearbeitet?
+* Wer hat schon mal ein Backup verloren?
-5) Wer weiß, was UTF-8 bedeutet?
+* Wer hat schon mal ein Backup wiederhergestellt?
-6) Wer hat schon mal mit einem CLI gearbeitet?
-6) **Wer hat schon mal etwas mit HTML oder CSS gemacht?** (Hex-Farben wie `#FF0000`?)
 
 <!--
 Niveau der Gruppe einschätzen
 Keine falschen Antworten
 Zeigt, wo wir starten
-HTML/CSS-Frage: Viele kennen Hex-Codes aus Webdesign
 API = Application Programming Interface
 -->
 
 ---
 
-# Warum dieses Modul?
-
-**Digitale Medien sind überall** – aber was steckt dahinter?
-
-* Warum ist ein JPEG kleiner als ein PNG?
-* Warum klingt MP3 anders als FLAC?
-* Warum zeigt meine 1 TB Festplatte nur 931 GB?
-* Warum ist USB-C so verwirrend?
-* Wie funktioniert eigentlich Streaming?
-* **→ Die Technik dahinter verstehen!**
-
-<!--
-Praxisnahe Fragen aus dem Alltag
-Nicht nur "was", sondern "warum"
-Verständnis für technische Entscheidungen
--->
-
----
-
-# Das Ziel
-
-**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
-
-Als Digital- und Medienwirtschaftler:innen werdet ihr täglich mit technischen Fragen konfrontiert:
-* Welches Format für welchen Zweck?
-* Welche Schnittstelle für welches Gerät?
-* Wie funktioniert die Distribution digitaler Inhalte?
-* **→ Mitreden können – nicht (zwingend) programmieren!**
-
-<!--
-Nicht: Ihr sollt Programmierer werden
-Sondern: Ihr sollt technische Entscheidungen verstehen
-Praxisbezug: Medienproduktion, Marketing, Projektmanagement
--->
-
----
-
-# Was ihr lernt
-
-**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
-
-* Fundiertes Grundwissen über Daten und Informationen
-* Dateiformate analysieren und verstehen
-* Grundlagen von Kompression (Audio, Bild, Video)
-* Speichermedien unterscheiden
-* Programmier-Schnittstellen kennenlernen
-* APIs und Distributionswege verstehen
-
-<!--
-Fokus auf Verständnis, nicht auf Programmierung
-Hands-On jede Woche: Selbst ausprobieren
-Ziel: Einblick in die Denkweise von Software-Entwicklern
--->
-
----
-
 # Kursübersicht
 
-**5 Termine:**
+**Kapitel:**
 
-| # | Datum | Thema |
+* 1. **Grundlagen**, Text & Audio (Bits, Bytes, Zeichenkodierung, MP3)
-|---|-------|-------|
+* 2. Bild- & Video-**Kompression** (JPEG, PNG, H.264/H.265)
-| 1 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
+* 3. **Speichermedien** & **Schnittstellen** (HDD, SSD, USB, Thunderbolt)
-| 2 | 09.01.2026 | Bild- & Video-Kompression |
+* 4. **Distribution** und Verteilung (Streaming, REST, Cloud)
-| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+* Vertiefung & offene Fragen
-| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
-| 5 | TBA | Vertiefung & offene Fragen |
 
-**Format:** Theorie + Hands-On (30-40 Min pro Termin)
-
-<!--
-Nicht nur theoretische Inhalte
-Praktische Übungen jede Woche
-Medienwissenschaftler:innen, nicht Informatiker:innen
--->
 
 ---
 
-# Prüfungsleistung 18.02.
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->
+
+# Prüfungsleistung
 
 **Nach aktuellem Kenntnisstand:**
 
-* 90 min (40% Grundlagen, 40% Dateiformate, 20% AV)
+* 90 min insg. (Technik 1)
-* Schriftliche Klausur
+* Schriftliche Klausur (digital)
 * Teils offene Fragen
-* Vermutlich digital
+* Kein Coding/Programmieren
-* Kein Coding!
+* **Prüfungsrelevante Folien:**
-* **Prüfungsrelevant:** Alles in den Folien/im Skript
+  - Gestreift oder Vollton (PDF) markiert
-
-<!--
-Details können sich noch ändern
-Keine Programmieraufgaben
-Verständnisfragen, keine Auswendiglernerei
--->
-

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

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
+  background: #0f0f23;
-  color: #5fb3e4;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }
@@ -70,18 +72,6 @@ section.aufgabe footer {
 }
 section.erklaerung {
   font-size: 1.1rem;
-  background: repeating-linear-gradient(
-    135deg,
-    #e3f2fd,
-    #e3f2fd 40px,
-    #fff 40px,
-    #fff 80px
-  ) !important;
-}
-@media print {
-  section.erklaerung {
-    background: #e3f2fd !important;
-  }
 }
 section.erklaerung h1 {
   font-size: 1.5rem;
@@ -958,7 +948,7 @@ KLAUSURRELEVANT:
 <!--
 - Kompatibilität schlägt oft Effizienz
 - TIFF für Archivierung: Unkomprimiert oder verlustfrei
-- RAW für Fotografen: Maximale Bearbeitungsfreiheit
+- RAW für FotografInnen: Maximale Bearbeitungsfreiheit
 - Frage: "Was passiert, wenn ihr ein PNG auf Instagram hochladet?"
 -->
 
@@ -994,8 +984,8 @@ KLAUSURRELEVANT:
 - Instagram ist keine Kunstgalerie, sondern Massenplattform
 - Optimiert für Geschwindigkeit, nicht Qualität
 - Facebook, Twitter, TikTok – alle machen das
-- Tipp für Fotografen: Portfolio auf eigener Website
+- Tipp für FotografInnen: Portfolio auf eigener Website
-- Diskussion: Ist das fair? Trade-off Nutzer vs. Plattform
+- Diskussion: Ist das fair? Trade-off Nutzende vs. Plattform
 -->
 
 ---
@@ -1072,7 +1062,7 @@ KLAUSURRELEVANT:
 
 **Codec** (Coder-Decoder) definiert den Kompressionsalgorithmus. Derselbe Container kann verschiedene Codecs enthalten – die Dateiendung verrät den Codec nicht.
 
-| Container | Entwickler | Typische Codecs | Besonderheit |
+| Container | Entwicklung | Typische Codecs | Besonderheit |
 |-----------|------------|-----------------|--------------|
 | MP4 | ISO/MPEG | H.264, H.265, AAC | Web-Standard, DRM-fähig |
 | MKV | Matroska | Alle | Beliebig viele Streams, Kapitel |
@@ -1336,7 +1326,7 @@ H.264 (2003) ermöglichte erst YouTube (2005), Netflix-Streaming (2007) und Blu-
 
 **Hardware-Ubiquität:** Seit 2010 hat jedes Smartphone, jede GPU, jeder Smart-TV einen H.264-Hardware-Decoder. Encoding in Echtzeit braucht keine CPU – das ermöglichte erst mobiles Video-Streaming und Videotelefonie.
 
-**Patent-Pool (MPEG-LA):** ~2.000 Patente von 30+ Unternehmen. Endnutzer-Streaming ist lizenzfrei; Hardware-Hersteller zahlen ~$0,20/Gerät.
+**Patent-Pool (MPEG-LA):** ~2.000 Patente von 30+ Unternehmen. Endnutzungs-Streaming ist lizenzfrei; Hardware-Hersteller zahlen ~$0,20/Gerät.
 
 ---
 
@@ -1357,7 +1347,7 @@ H.264 (2003) ermöglichte erst YouTube (2005), Netflix-Streaming (2007) und Blu-
 <!--
 - MPEG-LA = Licensing Authority
 - Firefox weigerte sich lange, H.264 zu unterstützen
-- "Free to View" gilt nur für Endnutzer-Streaming
+- "Free to View" gilt nur für Endnutzungs-Streaming
 - Diskussion: Sollten Standards patent-frei sein?
 -->
 

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

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
+  background: #0f0f23;
-  color: #5fb3e4;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }
@@ -70,18 +72,6 @@ section.aufgabe footer {
 }
 section.erklaerung {
   font-size: 1.1rem;
-  background: repeating-linear-gradient(
-    135deg,
-    #e3f2fd,
-    #e3f2fd 40px,
-    #fff 40px,
-    #fff 80px
-  ) !important;
-}
-@media print {
-  section.erklaerung {
-    background: #e3f2fd !important;
-  }
 }
 section.erklaerung h1 {
   font-size: 1.5rem;
@@ -164,7 +154,7 @@ Hersteller: Dezimal (SI-Präfix) - klingt mehr!
 Betriebssysteme: Binär - aber zeigen "GB" statt "GiB"
 Diskrepanz bei 1 TB: 1.000.000.000.000 vs. 1.099.511.627.776 Bytes
 → 10% Unterschied bei TB-Größen
-Verwirrung für Konsumenten seit Jahrzehnten
+Verwirrung für KonsumentInnen seit Jahrzehnten
 ISO/IEC 80000-13: Definiert KiB, MiB, GiB, TiB (2008)
 -->
 
@@ -602,7 +592,7 @@ Voll: Langsamstes Backup, schnellste Wiederherstellung
 
 <!--
 Time Machine: Stündliche Snapshots, APFS-Integration
-Veeam: Enterprise-Level, kostenlose Endnutzer-Version
+Veeam: Enterprise-Level, kostenlose Privatversion
 rsync: Unix-Klassiker, extrem effizient
 Borg: Deduplizierung + Verschlüsselung
 -->

slides/223015b/04-distribution-apis-zukunft.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
+  background: #0f0f23;
-  color: #5fb3e4;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }
@@ -158,7 +160,7 @@ AWS Snowmobile: 45-Fuß-Container auf LKW
 
 **Prozess:**
 1. AWS schickt verschlüsseltes Gerät
-2. Kunde kopiert Daten lokal (schnell!)
+2. KundIn kopiert Daten lokal (schnell!)
 3. Gerät zurück an AWS
 4. AWS lädt in S3 hoch
 
@@ -218,7 +220,7 @@ Server unter Last (symbolisch)
 **Klassisches Modell:** Ein Server, viele Clients
 
 **Problem:**
-1 Million User wollen 1 GB-Datei
+1 Million Nutzende wollen 1 GB-Datei
 → Server braucht **1 PB Bandbreite!**
 → Server überlastet → **"Hug of Death"**
 
@@ -250,7 +252,7 @@ Globale Verteilung
 **Funktionsweise:**
 1. **Origin Server** (Hauptquelle)
 2. **Edge Servers** (geografisch verteilt)
-3. User → nächster Edge Server
+3. Nutzende → nächster Edge Server
 4. Erste Anfrage: Edge holt von Origin, cached
 5. Weitere Anfragen: Direkt vom Edge (schnell!)
 
@@ -275,7 +277,7 @@ Große CDN-Anbieter: Cloudflare, Akamai, Amazon CloudFront, Fastly
 - Lange Cache-Zeit (TTL: Tage/Wochen)
 
 **Dynamic Content:**
-- User-spezifisch (Profil)
+- Nutzungs-spezifisch (Profil)
 - Kurze TTL oder nicht cachebar
 
 **Cache Invalidation:**
@@ -347,14 +349,14 @@ Dezentral, jeder ist Client & Server
 - IPFS (InterPlanetary File System)
 - Blockchain (Bitcoin, Ethereum)
 
-**Vorteil:** Skalierbar (mehr User = mehr Bandbreite!)
+**Vorteil:** Skalierbar (mehr Nutzende = mehr Bandbreite!)
 
 **Nachteil:** Langsam bei wenigen Peers, oft für Piraterie missbraucht
 
 <!-- 
 P2P vs. Client-Server: Kein zentraler Server
-Last verteilt sich auf alle Teilnehmer
+Last verteilt sich auf alle Teilnehmenden
-Je mehr User, desto schneller (umgekehrt zu Client-Server!)
+Je mehr Nutzende, desto schneller (umgekehrt zu Client-Server!)
 Zensur-resistent: Kein Single Point of Failure
 Rechtliche Grauzone: Technologie neutral, aber oft illegal genutzt
 -->
@@ -1021,8 +1023,8 @@ Privacy-Albtraum
 
 **Beispiele:**
 - **Foto:** Kamera, Datum, GPS, Belichtung
-- **MP3:** Künstler, Album, Jahr, Genre, Cover
+- **MP3:** KünstlerInnen, Album, Jahr, Genre, Cover
-- **PDF:** Autor, Datum, Software
+- **PDF:** AutorIn, Datum, Software
 - **E-Mail:** Absender, Empfänger, Zeitstempel
 
 **Warum wichtig?**
@@ -1178,7 +1180,7 @@ Wikipedia für Musik-Metadaten
 **Idee:** Wikipedia für Musik-Metadaten
 
 **Community-gepflegt:**
-- Künstler, Alben, Tracks
+- KünstlerInnen, Alben, Tracks
 - Relationships (Band-Mitglieder, Label...)
 - Releases (verschiedene Editionen, Länder)
 
@@ -1237,7 +1239,7 @@ Versteckte Informationen sichtbar
 **PDF-Metadaten (XMP):**
 
 **Gespeichert:**
-- Titel, Autor, Betreff, Keywords
+- Titel, AutorIn, Betreff, Keywords
 - Erstellungsdatum, Änderungsdatum
 - Software, **Company** (aus Office-Lizenz!)
 
@@ -1598,7 +1600,7 @@ QKD: Abhör-sichere Kommunikation (Quantenmechanik garantiert)
 
 **Filecoin (2017):**
 - Blockchain-basiert
-- User vermieten Festplatten-Platz
+- Nutzende vermieten Festplatten-Platz
 - Bezahlung in FIL (Kryptowährung)
 
 **Arweave (2018):**
@@ -1636,7 +1638,7 @@ Legitime Use-Cases: NFT-Storage, Zensur-resistente Archivierung
 - 5G + Edge Computing nötig
 
 **Cloud Gaming:**
-- Spiel im Rechenzentrum, Stream zu User
+- Spiel im Rechenzentrum, Stream zu Nutzenden
 - Input-Lag = Todfeind (<50ms)
 
 **Problem:** Physik (Lichtgeschwindigkeit!)
@@ -1645,7 +1647,7 @@ Legitime Use-Cases: NFT-Storage, Zensur-resistente Archivierung
 8K: YouTube unterstützt, aber wer hat 8K-Monitor?
 VR: Meta Quest, Apple Vision Pro
 Latenz: Lichtgeschwindigkeit ~300.000 km/s, aber Routing + Processing addiert sich
-Edge Computing: Server näher an User (5G-Masten)
+Edge Computing: Server näher an Nutzende (5G-Masten)
 Cloud Gaming: Stadia gescheitert (2023 †), GeForce Now, Xbox Cloud
 Input-Lag: Fiber ~5ms/1000km, aber Server-Processing + Encoding + Decoding
 -->

slides/223015b/05-vertiefung-offene-fragen.md

@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
+  background: #0f0f23;
-  color: #5fb3e4;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }

slides/223015b/assets/demos/ascii-table.html

@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>ASCII-Tabelle</title>
+<style>
+  :root {
+    --hl: #1e5f8a;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --c-ctrl: #e5e7eb;     /* control */
+    --c-ctrl-text: #4b5563;
+    --c-space: #fef3c7;    /* space */
+    --c-punct: #ddd6fe;    /* punctuation */
+    --c-digit: #bfdbfe;    /* digits */
+    --c-upper: #bbf7d0;    /* uppercase */
+    --c-lower: #fed7aa;    /* lowercase */
+    --c-del:   #fecaca;    /* DEL */
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 18px 24px; }
+  h1 { text-align: center; margin: 0 0 2px; font-size: 1.5rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 14px; font-size: 0.9rem; }
+  .sub strong { color: var(--dark); }
+
+  .table-wrap { display: flex; justify-content: center; }
+
+  table.ascii {
+    border-collapse: separate;
+    border-spacing: 3px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  }
+  table.ascii th, table.ascii td {
+    width: 68px;
+    height: 60px;
+    padding: 0;
+    text-align: center;
+    vertical-align: middle;
+    border-radius: 5px;
+  }
+  table.ascii th {
+    background: var(--dark); color: #fff;
+    font-size: 0.78rem;
+    letter-spacing: 0.05em;
+    font-weight: 700;
+    width: 56px;
+    height: 36px;
+  }
+  table.ascii th.row { width: 64px; }
+  table.ascii th .b { display: block; font-size: 0.68rem; opacity: 0.7; font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; }
+
+  table.ascii td {
+    border: 1px solid var(--border);
+    position: relative;
+  }
+  td .hex { position: absolute; top: 3px; left: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 700; }
+  td .dec { position: absolute; bottom: 3px; right: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 400; }
+  td .ch { font-size: 1.45rem; font-weight: 700; line-height: 1; }
+  td.ctrl .ch { font-size: 0.82rem; font-weight: 700; }
+  td.ctrl .ch small { display: block; font-size: 0.6rem; font-weight: 400; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
+
+  td.ctrl  { background: var(--c-ctrl); color: var(--c-ctrl-text); }
+  td.space { background: var(--c-space); }
+  td.punct { background: var(--c-punct); }
+  td.digit { background: var(--c-digit); }
+  td.upper { background: var(--c-upper); }
+  td.lower { background: var(--c-lower); }
+  td.del   { background: var(--c-del); color: var(--c-ctrl-text); }
+
+  .legend {
+    margin: 14px auto 0;
+    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
+    font-size: 0.85rem;
+  }
+  .legend .item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); }
+  .legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
+  .legend .swatch.ctrl  { background: var(--c-ctrl); }
+  .legend .swatch.space { background: var(--c-space); }
+  .legend .swatch.punct { background: var(--c-punct); }
+  .legend .swatch.digit { background: var(--c-digit); }
+  .legend .swatch.upper { background: var(--c-upper); }
+  .legend .swatch.lower { background: var(--c-lower); }
+  .legend .swatch.del   { background: var(--c-del); }
+
+  .meta-row {
+    margin-top: 10px;
+    display: flex; gap: 18px; justify-content: center;
+    font-size: 0.85rem; color: var(--muted);
+  }
+  .meta-row strong { color: var(--dark); }
+  .meta-row code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>ASCII-Tabelle (1963) · 7 Bit · 128 Zeichen</h1>
+  <div class="sub">Spalte = High-Nibble (Hex 0–7) · Zeile = Low-Nibble (Hex 0–F) · <strong>Hex</strong> oben, <strong>Dezimal</strong> unten</div>
+
+  <div class="table-wrap">
+  <table class="ascii">
+    <thead>
+      <tr>
+        <th class="row">↓ Low<br>→ High</th>
+        <th>0<span class="b">0000</span></th>
+        <th>1<span class="b">0001</span></th>
+        <th>2<span class="b">0010</span></th>
+        <th>3<span class="b">0011</span></th>
+        <th>4<span class="b">0100</span></th>
+        <th>5<span class="b">0101</span></th>
+        <th>6<span class="b">0110</span></th>
+        <th>7<span class="b">0111</span></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th class="row">0<span class="b">0000</span></th>
+        <td class="ctrl"><span class="hex">00</span><span class="ch">NUL<small>null</small></span><span class="dec">0</span></td>
+        <td class="ctrl"><span class="hex">10</span><span class="ch">DLE<small>data link esc</small></span><span class="dec">16</span></td>
+        <td class="space"><span class="hex">20</span><span class="ch">SP<small>space</small></span><span class="dec">32</span></td>
+        <td class="digit"><span class="hex">30</span><span class="ch">0</span><span class="dec">48</span></td>
+        <td class="punct"><span class="hex">40</span><span class="ch">@</span><span class="dec">64</span></td>
+        <td class="upper"><span class="hex">50</span><span class="ch">P</span><span class="dec">80</span></td>
+        <td class="punct"><span class="hex">60</span><span class="ch">`</span><span class="dec">96</span></td>
+        <td class="lower"><span class="hex">70</span><span class="ch">p</span><span class="dec">112</span></td>
+      </tr>
+      <tr>
+        <th class="row">1<span class="b">0001</span></th>
+        <td class="ctrl"><span class="hex">01</span><span class="ch">SOH<small>start hdr</small></span><span class="dec">1</span></td>
+        <td class="ctrl"><span class="hex">11</span><span class="ch">DC1<small>XON</small></span><span class="dec">17</span></td>
+        <td class="punct"><span class="hex">21</span><span class="ch">!</span><span class="dec">33</span></td>
+        <td class="digit"><span class="hex">31</span><span class="ch">1</span><span class="dec">49</span></td>
+        <td class="upper"><span class="hex">41</span><span class="ch">A</span><span class="dec">65</span></td>
+        <td class="upper"><span class="hex">51</span><span class="ch">Q</span><span class="dec">81</span></td>
+        <td class="lower"><span class="hex">61</span><span class="ch">a</span><span class="dec">97</span></td>
+        <td class="lower"><span class="hex">71</span><span class="ch">q</span><span class="dec">113</span></td>
+      </tr>
+      <tr>
+        <th class="row">2<span class="b">0010</span></th>
+        <td class="ctrl"><span class="hex">02</span><span class="ch">STX<small>start txt</small></span><span class="dec">2</span></td>
+        <td class="ctrl"><span class="hex">12</span><span class="ch">DC2</span><span class="dec">18</span></td>
+        <td class="punct"><span class="hex">22</span><span class="ch">"</span><span class="dec">34</span></td>
+        <td class="digit"><span class="hex">32</span><span class="ch">2</span><span class="dec">50</span></td>
+        <td class="upper"><span class="hex">42</span><span class="ch">B</span><span class="dec">66</span></td>
+        <td class="upper"><span class="hex">52</span><span class="ch">R</span><span class="dec">82</span></td>
+        <td class="lower"><span class="hex">62</span><span class="ch">b</span><span class="dec">98</span></td>
+        <td class="lower"><span class="hex">72</span><span class="ch">r</span><span class="dec">114</span></td>
+      </tr>
+      <tr>
+        <th class="row">3<span class="b">0011</span></th>
+        <td class="ctrl"><span class="hex">03</span><span class="ch">ETX<small>end txt</small></span><span class="dec">3</span></td>
+        <td class="ctrl"><span class="hex">13</span><span class="ch">DC3<small>XOFF</small></span><span class="dec">19</span></td>
+        <td class="punct"><span class="hex">23</span><span class="ch">#</span><span class="dec">35</span></td>
+        <td class="digit"><span class="hex">33</span><span class="ch">3</span><span class="dec">51</span></td>
+        <td class="upper"><span class="hex">43</span><span class="ch">C</span><span class="dec">67</span></td>
+        <td class="upper"><span class="hex">53</span><span class="ch">S</span><span class="dec">83</span></td>
+        <td class="lower"><span class="hex">63</span><span class="ch">c</span><span class="dec">99</span></td>
+        <td class="lower"><span class="hex">73</span><span class="ch">s</span><span class="dec">115</span></td>
+      </tr>
+      <tr>
+        <th class="row">4<span class="b">0100</span></th>
+        <td class="ctrl"><span class="hex">04</span><span class="ch">EOT<small>end trans</small></span><span class="dec">4</span></td>
+        <td class="ctrl"><span class="hex">14</span><span class="ch">DC4</span><span class="dec">20</span></td>
+        <td class="punct"><span class="hex">24</span><span class="ch">$</span><span class="dec">36</span></td>
+        <td class="digit"><span class="hex">34</span><span class="ch">4</span><span class="dec">52</span></td>
+        <td class="upper"><span class="hex">44</span><span class="ch">D</span><span class="dec">68</span></td>
+        <td class="upper"><span class="hex">54</span><span class="ch">T</span><span class="dec">84</span></td>
+        <td class="lower"><span class="hex">64</span><span class="ch">d</span><span class="dec">100</span></td>
+        <td class="lower"><span class="hex">74</span><span class="ch">t</span><span class="dec">116</span></td>
+      </tr>
+      <tr>
+        <th class="row">5<span class="b">0101</span></th>
+        <td class="ctrl"><span class="hex">05</span><span class="ch">ENQ<small>enquiry</small></span><span class="dec">5</span></td>
+        <td class="ctrl"><span class="hex">15</span><span class="ch">NAK</span><span class="dec">21</span></td>
+        <td class="punct"><span class="hex">25</span><span class="ch">%</span><span class="dec">37</span></td>
+        <td class="digit"><span class="hex">35</span><span class="ch">5</span><span class="dec">53</span></td>
+        <td class="upper"><span class="hex">45</span><span class="ch">E</span><span class="dec">69</span></td>
+        <td class="upper"><span class="hex">55</span><span class="ch">U</span><span class="dec">85</span></td>
+        <td class="lower"><span class="hex">65</span><span class="ch">e</span><span class="dec">101</span></td>
+        <td class="lower"><span class="hex">75</span><span class="ch">u</span><span class="dec">117</span></td>
+      </tr>
+      <tr>
+        <th class="row">6<span class="b">0110</span></th>
+        <td class="ctrl"><span class="hex">06</span><span class="ch">ACK<small>ack</small></span><span class="dec">6</span></td>
+        <td class="ctrl"><span class="hex">16</span><span class="ch">SYN</span><span class="dec">22</span></td>
+        <td class="punct"><span class="hex">26</span><span class="ch">&amp;</span><span class="dec">38</span></td>
+        <td class="digit"><span class="hex">36</span><span class="ch">6</span><span class="dec">54</span></td>
+        <td class="upper"><span class="hex">46</span><span class="ch">F</span><span class="dec">70</span></td>
+        <td class="upper"><span class="hex">56</span><span class="ch">V</span><span class="dec">86</span></td>
+        <td class="lower"><span class="hex">66</span><span class="ch">f</span><span class="dec">102</span></td>
+        <td class="lower"><span class="hex">76</span><span class="ch">v</span><span class="dec">118</span></td>
+      </tr>
+      <tr>
+        <th class="row">7<span class="b">0111</span></th>
+        <td class="ctrl"><span class="hex">07</span><span class="ch">BEL<small>bell 🔔</small></span><span class="dec">7</span></td>
+        <td class="ctrl"><span class="hex">17</span><span class="ch">ETB</span><span class="dec">23</span></td>
+        <td class="punct"><span class="hex">27</span><span class="ch">'</span><span class="dec">39</span></td>
+        <td class="digit"><span class="hex">37</span><span class="ch">7</span><span class="dec">55</span></td>
+        <td class="upper"><span class="hex">47</span><span class="ch">G</span><span class="dec">71</span></td>
+        <td class="upper"><span class="hex">57</span><span class="ch">W</span><span class="dec">87</span></td>
+        <td class="lower"><span class="hex">67</span><span class="ch">g</span><span class="dec">103</span></td>
+        <td class="lower"><span class="hex">77</span><span class="ch">w</span><span class="dec">119</span></td>
+      </tr>
+      <tr>
+        <th class="row">8<span class="b">1000</span></th>
+        <td class="ctrl"><span class="hex">08</span><span class="ch">BS<small>backspace</small></span><span class="dec">8</span></td>
+        <td class="ctrl"><span class="hex">18</span><span class="ch">CAN</span><span class="dec">24</span></td>
+        <td class="punct"><span class="hex">28</span><span class="ch">(</span><span class="dec">40</span></td>
+        <td class="digit"><span class="hex">38</span><span class="ch">8</span><span class="dec">56</span></td>
+        <td class="upper"><span class="hex">48</span><span class="ch">H</span><span class="dec">72</span></td>
+        <td class="upper"><span class="hex">58</span><span class="ch">X</span><span class="dec">88</span></td>
+        <td class="lower"><span class="hex">68</span><span class="ch">h</span><span class="dec">104</span></td>
+        <td class="lower"><span class="hex">78</span><span class="ch">x</span><span class="dec">120</span></td>
+      </tr>
+      <tr>
+        <th class="row">9<span class="b">1001</span></th>
+        <td class="ctrl"><span class="hex">09</span><span class="ch">HT<small>tab ⇥</small></span><span class="dec">9</span></td>
+        <td class="ctrl"><span class="hex">19</span><span class="ch">EM</span><span class="dec">25</span></td>
+        <td class="punct"><span class="hex">29</span><span class="ch">)</span><span class="dec">41</span></td>
+        <td class="digit"><span class="hex">39</span><span class="ch">9</span><span class="dec">57</span></td>
+        <td class="upper"><span class="hex">49</span><span class="ch">I</span><span class="dec">73</span></td>
+        <td class="upper"><span class="hex">59</span><span class="ch">Y</span><span class="dec">89</span></td>
+        <td class="lower"><span class="hex">69</span><span class="ch">i</span><span class="dec">105</span></td>
+        <td class="lower"><span class="hex">79</span><span class="ch">y</span><span class="dec">121</span></td>
+      </tr>
+      <tr>
+        <th class="row">A<span class="b">1010</span></th>
+        <td class="ctrl"><span class="hex">0A</span><span class="ch">LF<small>↵ newline</small></span><span class="dec">10</span></td>
+        <td class="ctrl"><span class="hex">1A</span><span class="ch">SUB<small>EOF DOS</small></span><span class="dec">26</span></td>
+        <td class="punct"><span class="hex">2A</span><span class="ch">*</span><span class="dec">42</span></td>
+        <td class="punct"><span class="hex">3A</span><span class="ch">:</span><span class="dec">58</span></td>
+        <td class="upper"><span class="hex">4A</span><span class="ch">J</span><span class="dec">74</span></td>
+        <td class="upper"><span class="hex">5A</span><span class="ch">Z</span><span class="dec">90</span></td>
+        <td class="lower"><span class="hex">6A</span><span class="ch">j</span><span class="dec">106</span></td>
+        <td class="lower"><span class="hex">7A</span><span class="ch">z</span><span class="dec">122</span></td>
+      </tr>
+      <tr>
+        <th class="row">B<span class="b">1011</span></th>
+        <td class="ctrl"><span class="hex">0B</span><span class="ch">VT</span><span class="dec">11</span></td>
+        <td class="ctrl"><span class="hex">1B</span><span class="ch">ESC<small>escape</small></span><span class="dec">27</span></td>
+        <td class="punct"><span class="hex">2B</span><span class="ch">+</span><span class="dec">43</span></td>
+        <td class="punct"><span class="hex">3B</span><span class="ch">;</span><span class="dec">59</span></td>
+        <td class="upper"><span class="hex">4B</span><span class="ch">K</span><span class="dec">75</span></td>
+        <td class="punct"><span class="hex">5B</span><span class="ch">[</span><span class="dec">91</span></td>
+        <td class="lower"><span class="hex">6B</span><span class="ch">k</span><span class="dec">107</span></td>
+        <td class="punct"><span class="hex">7B</span><span class="ch">{</span><span class="dec">123</span></td>
+      </tr>
+      <tr>
+        <th class="row">C<span class="b">1100</span></th>
+        <td class="ctrl"><span class="hex">0C</span><span class="ch">FF<small>form feed</small></span><span class="dec">12</span></td>
+        <td class="ctrl"><span class="hex">1C</span><span class="ch">FS</span><span class="dec">28</span></td>
+        <td class="punct"><span class="hex">2C</span><span class="ch">,</span><span class="dec">44</span></td>
+        <td class="punct"><span class="hex">3C</span><span class="ch">&lt;</span><span class="dec">60</span></td>
+        <td class="upper"><span class="hex">4C</span><span class="ch">L</span><span class="dec">76</span></td>
+        <td class="punct"><span class="hex">5C</span><span class="ch">\</span><span class="dec">92</span></td>
+        <td class="lower"><span class="hex">6C</span><span class="ch">l</span><span class="dec">108</span></td>
+        <td class="punct"><span class="hex">7C</span><span class="ch">|</span><span class="dec">124</span></td>
+      </tr>
+      <tr>
+        <th class="row">D<span class="b">1101</span></th>
+        <td class="ctrl"><span class="hex">0D</span><span class="ch">CR<small>carriage</small></span><span class="dec">13</span></td>
+        <td class="ctrl"><span class="hex">1D</span><span class="ch">GS</span><span class="dec">29</span></td>
+        <td class="punct"><span class="hex">2D</span><span class="ch">-</span><span class="dec">45</span></td>
+        <td class="punct"><span class="hex">3D</span><span class="ch">=</span><span class="dec">61</span></td>
+        <td class="upper"><span class="hex">4D</span><span class="ch">M</span><span class="dec">77</span></td>
+        <td class="punct"><span class="hex">5D</span><span class="ch">]</span><span class="dec">93</span></td>
+        <td class="lower"><span class="hex">6D</span><span class="ch">m</span><span class="dec">109</span></td>
+        <td class="punct"><span class="hex">7D</span><span class="ch">}</span><span class="dec">125</span></td>
+      </tr>
+      <tr>
+        <th class="row">E<span class="b">1110</span></th>
+        <td class="ctrl"><span class="hex">0E</span><span class="ch">SO</span><span class="dec">14</span></td>
+        <td class="ctrl"><span class="hex">1E</span><span class="ch">RS</span><span class="dec">30</span></td>
+        <td class="punct"><span class="hex">2E</span><span class="ch">.</span><span class="dec">46</span></td>
+        <td class="punct"><span class="hex">3E</span><span class="ch">&gt;</span><span class="dec">62</span></td>
+        <td class="upper"><span class="hex">4E</span><span class="ch">N</span><span class="dec">78</span></td>
+        <td class="punct"><span class="hex">5E</span><span class="ch">^</span><span class="dec">94</span></td>
+        <td class="lower"><span class="hex">6E</span><span class="ch">n</span><span class="dec">110</span></td>
+        <td class="punct"><span class="hex">7E</span><span class="ch">~</span><span class="dec">126</span></td>
+      </tr>
+      <tr>
+        <th class="row">F<span class="b">1111</span></th>
+        <td class="ctrl"><span class="hex">0F</span><span class="ch">SI</span><span class="dec">15</span></td>
+        <td class="ctrl"><span class="hex">1F</span><span class="ch">US</span><span class="dec">31</span></td>
+        <td class="punct"><span class="hex">2F</span><span class="ch">/</span><span class="dec">47</span></td>
+        <td class="punct"><span class="hex">3F</span><span class="ch">?</span><span class="dec">63</span></td>
+        <td class="upper"><span class="hex">4F</span><span class="ch">O</span><span class="dec">79</span></td>
+        <td class="punct"><span class="hex">5F</span><span class="ch">_</span><span class="dec">95</span></td>
+        <td class="lower"><span class="hex">6F</span><span class="ch">o</span><span class="dec">111</span></td>
+        <td class="del"><span class="hex">7F</span><span class="ch">DEL</span><span class="dec">127</span></td>
+      </tr>
+    </tbody>
+  </table>
+  </div>
+
+  <div class="legend">
+    <div class="item"><span class="swatch ctrl"></span>Steuerzeichen (0–31)</div>
+    <div class="item"><span class="swatch space"></span>Leerzeichen (32)</div>
+    <div class="item"><span class="swatch punct"></span>Satzzeichen</div>
+    <div class="item"><span class="swatch digit"></span>Ziffern (48–57)</div>
+    <div class="item"><span class="swatch upper"></span>Großbuchstaben (65–90)</div>
+    <div class="item"><span class="swatch lower"></span>Kleinbuchstaben (97–122)</div>
+    <div class="item"><span class="swatch del"></span>DEL (127)</div>
+  </div>
+
+  <div class="meta-row">
+    <span><strong>Beispiel:</strong> <code>A</code> = Hex <code>41</code> = Dez <code>65</code> = Bin <code>0100&nbsp;0001</code></span>
+    <span><strong>Trick:</strong> Ziffern <code>0–9</code> liegen bei <code>30–39</code> · <code>'A'+1='B'</code> · Groß ↔ Klein: Bit 5 togglen</span>
+  </div>
+</body>
+</html>

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

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte-Fluss: Bit → Hex → ASCII</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --byte-border: #94a3b8;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 22px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
+
+  .file {
+    width: 100%; box-sizing: border-box;
+    border: 2px solid var(--dark);
+    border-radius: 10px;
+    background: var(--bg-soft);
+    overflow: hidden;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
+  }
+  .file .head {
+    background: var(--dark); color: #fff; padding: 8px 14px;
+    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .file .head .name { font-family: ui-monospace, monospace; }
+  .file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
+  .file .body { padding: 12px 14px; }
+
+  .row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
+  .row-bytes:last-child { margin-bottom: 0; }
+
+  .byte-bin {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 4px 7px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 0.92rem;
+    font-weight: 700;
+    background: #fff;
+    letter-spacing: 0.04em;
+  }
+  .byte-hex {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 6px 0;
+    font-family: ui-monospace, monospace;
+    font-size: 1.1rem;
+    font-weight: 700;
+    background: #fff;
+    min-width: 88px;
+    text-align: center;
+  }
+  .byte-ascii {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 6px 0;
+    font-family: ui-monospace, monospace;
+    font-size: 1.2rem;
+    font-weight: 700;
+    background: #fff;
+    min-width: 88px;
+    text-align: center;
+  }
+  .byte-ascii.np { color: var(--muted); font-style: italic; }
+
+  .truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
+
+  .arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
+  .arrow {
+    width: 0; height: 0;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    border-top: 14px solid var(--hl);
+  }
+  .arrow-label {
+    font-size: 0.78rem; color: var(--hl); font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.05em;
+  }
+
+  .legend {
+    margin-top: 12px;
+    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
+    font-size: 0.85rem; color: var(--muted);
+  }
+  .legend strong { color: var(--dark); }
+  .legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
+  <div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
+
+  <div class="stage">
+
+    <!-- Stage 1: Bitstream -->
+    <div class="file">
+      <div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-stack">
+      <div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Stage 2: Hex -->
+    <div class="file">
+      <div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-stack">
+      <div class="arrow-label">je 1 Byte → 1 Zeichen</div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Stage 3: ASCII -->
+    <div class="file">
+      <div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="legend">
+      <span><code>␣</code> = Leerzeichen (0x20)</span>
+      <span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
+      <span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
+    </div>
+
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/byte-nibble-hex.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte → Nibble → Hex</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+  }
+  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.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+
+  .level { display: flex; flex-direction: column; align-items: center; }
+  .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
+
+  /* Level 1: whole byte */
+  .byte {
+    display: flex;
+    gap: 4px;
+    padding: 8px 14px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--bg-soft);
+  }
+  .byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
+  .byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
+
+  /* Split arrows */
+  .split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
+  .split .arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+  }
+
+  /* Level 2: two nibbles */
+  .nibbles { display: flex; gap: 80px; }
+  .nibble {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    padding: 10px 14px;
+    border: 2px solid var(--hl);
+    border-radius: 8px;
+    background: #fff;
+  }
+  .nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
+  .nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
+  .nibble .meta { font-size: 0.78rem; color: var(--muted); }
+
+  .single-arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+    margin: 2px 0;
+  }
+
+  /* Level 3: hex digits */
+  .hex-digits { display: flex; gap: 80px; }
+  .hex-digit {
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    padding: 8px 22px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--dark);
+    color: var(--hl);
+  }
+  .hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
+  .hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
+
+  /* Merge down to byte */
+  .merge {
+    display: flex; justify-content: center; margin-top: 2px;
+  }
+  .merge-v {
+    display: grid;
+    grid-template-columns: 60px 60px;
+    justify-content: center;
+    align-items: center;
+  }
+  .merge-v .line {
+    height: 20px;
+    border-right: 2px solid var(--hl);
+  }
+  .merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
+  .bottom-bar { height: 2px; background: var(--hl); width: 120px; }
+
+  /* Final result */
+  .result {
+    margin-top: 14px;
+    padding: 14px 22px;
+    background: #fef3f8;
+    border-left: 4px solid var(--hl);
+    border-radius: 4px;
+    font-size: 1.05rem;
+    text-align: center;
+    max-width: 640px;
+  }
+  .result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
+  .result strong { color: var(--hl); }
+
+  .math {
+    margin-top: 10px;
+    font-size: 0.95rem;
+    color: var(--dark);
+    text-align: center;
+  }
+  .math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
+  <div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
+
+  <div class="stage">
+    <!-- Level 1 -->
+    <div class="level">
+      <div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
+      <div class="byte">
+        <span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
+        <span class="sep"></span>
+        <span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 2 -->
+    <div class="level">
+      <div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
+      <div class="nibbles">
+        <div class="nibble">
+          <div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
+          <div class="meta">= 4 (dez)</div>
+        </div>
+        <div class="nibble">
+          <div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
+          <div class="meta">= 13 (dez)</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 3 -->
+    <div class="level">
+      <div class="label">2 Hex-Ziffern · Symbole 0–F</div>
+      <div class="hex-digits">
+        <div class="hex-digit">
+          <div class="digit">4</div>
+          <div class="meta">Nibble → 1 Ziffer</div>
+        </div>
+        <div class="hex-digit">
+          <div class="digit">D</div>
+          <div class="meta">13 → D</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="result">
+      <code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
+    </div>
+
+    <div class="math">
+      <span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
+    </div>
+  </div>
+</body>
+</html>
+</content>
+</invoke>

slides/223015b/assets/demos/hex-dec-table.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Hex → Dezimal</title>
+<style>
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
+  body { padding: 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
+  .sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
+  table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
+  th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
+  thead th { background: #1a1a2e; color: #fff; }
+  tbody th { background: #334155; color: #fff; font-weight: 600; }
+  tbody td.ascii { background: #f3f4f6; }
+  tbody td.nonascii { background: #fff; color: #6b7280; }
+  .corner { background: #0f0f23; color: #d63384; }
+  .legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
+  .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
+  .example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
+  code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>Hex → Dezimal</h1>
+  <div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
+  <table>
+    <thead>
+      <tr>
+        <th class="corner">×16 / +</th>
+        <th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
+        <th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+
+  <div class="legend">
+    <span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
+    <span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
+  </div>
+
+  <div class="example">
+    <strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
+  </div>
+
+<script>
+  const rows = '0123456789ABCDEF';
+  const tb = document.querySelector('tbody');
+  for (let r = 0; r < 16; r++) {
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
+    tr.appendChild(th);
+    for (let c = 0; c < 16; c++) {
+      const td = document.createElement('td');
+      const v = r*16 + c;
+      td.textContent = v;
+      td.className = v <= 127 ? 'ascii' : 'nonascii';
+      tr.appendChild(td);
+    }
+    tb.appendChild(tr);
+  }
+</script>
+</body>
+</html>

slides/223015b/assets/demos/three-views.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Dieselben Byte — drei Perspektiven</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --magic: #ef4444;
+    --format: #2563eb;
+    --transport: #16a34a;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 24px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
+
+  .row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; }
+  .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: right; white-space: nowrap; }
+  .label small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 2px; font-size: 0.8em; white-space: nowrap; }
+
+  .panel { padding: 14px 16px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
+  .panel.bin { background: #0f0f23; color: #fff; border-color: var(--dark); }
+  .panel.bin code { color: #e5e7eb; }
+  .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; word-break: break-all; line-height: 1.5; }
+
+  .hex-bytes { display: flex; flex-wrap: wrap; gap: 8px; }
+  .hex-byte { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
+
+  .semantic { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
+  .group { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; min-width: 70px; }
+  .group .bytes { display: flex; gap: 4px; }
+  .group .b { background: #fff; border: 1px solid currentColor; border-radius: 3px; padding: 3px 7px; font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); }
+  .group .tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+  .group .meaning { font-size: 0.78rem; line-height: 1.3; color: var(--dark); }
+  .group.magic { background: #fee2e2; color: var(--magic); }
+  .group.format { background: #dbeafe; color: var(--format); }
+  .group.transport { background: #dcfce7; color: var(--transport); }
+
+  .arrow-row { display: flex; justify-content: center; }
+  .arrow {
+    width: 0; height: 0;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    border-top: 14px solid var(--hl);
+  }
+
+  .footnote { margin-top: 16px; font-size: 0.88rem; color: var(--muted); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
+  .footnote strong { color: var(--dark); }
+</style>
+</head>
+<body>
+  <h1>Dieselben 8 Byte — drei Perspektiven</h1>
+  <div class="sub">PNG-Datei-Anfang: <code style="font-family:ui-monospace,monospace">89 50 4E 47 0D 0A 1A 0A</code></div>
+
+  <div class="stage">
+
+    <div class="row">
+      <div class="label">1 · Bitstream<small>was wirklich gespeichert wird</small></div>
+      <div class="panel bin">
+        <code class="mono">10001001&nbsp;01010000&nbsp;01001110&nbsp;01000111&nbsp;00001101&nbsp;00001010&nbsp;00011010&nbsp;00001010</code>
+      </div>
+    </div>
+
+    <div class="arrow-row"><div class="arrow"></div></div>
+
+    <div class="row">
+      <div class="label">2 · Hex<small>gruppiert in 8-Bit-Häppchen</small></div>
+      <div class="panel">
+        <div class="hex-bytes">
+          <span class="hex-byte">89</span>
+          <span class="hex-byte">50</span>
+          <span class="hex-byte">4E</span>
+          <span class="hex-byte">47</span>
+          <span class="hex-byte">0D</span>
+          <span class="hex-byte">0A</span>
+          <span class="hex-byte">1A</span>
+          <span class="hex-byte">0A</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-row"><div class="arrow"></div></div>
+
+    <div class="row">
+      <div class="label">3 · Bedeutung<small>was die Byte sagen</small></div>
+      <div class="panel">
+        <div class="semantic">
+          <div class="group magic">
+            <div class="bytes"><span class="b">89</span></div>
+            <div class="tag">Magic Byte</div>
+            <div class="meaning">&gt; 127 → "Ich bin Binär, kein Text"</div>
+          </div>
+          <div class="group format">
+            <div class="bytes"><span class="b">50</span><span class="b">4E</span><span class="b">47</span></div>
+            <div class="tag">Format-Kürzel</div>
+            <div class="meaning">P · N · G (ASCII) → "PNG-Datei"</div>
+          </div>
+          <div class="group transport">
+            <div class="bytes"><span class="b">0D</span><span class="b">0A</span><span class="b">1A</span><span class="b">0A</span></div>
+            <div class="tag">Transport-Schutz</div>
+            <div class="meaning">CR · LF · EOF · LF → erkennt kaputte Übertragung</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="footnote">
+    Byte ändern sich nicht — nur unsere <strong>Brille</strong>. Bitstream zeigt das <em>was</em>, Hex das <em>wie kompakt</em>, Bedeutung das <em>warum</em>.
+  </div>
+</body>
+</html>

slides/223015b/assets/demos/why-8-bit.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Warum 8 Bit? Adressierung im Speicher</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --bad: #ef4444;
+    --good: #16a34a;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 24px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; }
+
+  .ram-wrap { display: flex; gap: 18px; align-items: stretch; }
+
+  .ram {
+    display: grid;
+    grid-template-columns: 90px 90px 230px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--bg-soft);
+  }
+  .ram .head {
+    background: var(--dark); color: #fff; padding: 8px 10px;
+    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: center;
+  }
+  .ram .cell {
+    border-top: 1px solid var(--border); padding: 10px 12px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; font-weight: 700;
+    text-align: center; background: #fff;
+  }
+  .ram .cell.addr { color: var(--muted); background: var(--bg-soft); }
+  .ram .cell.bin  { font-size: 0.95rem; letter-spacing: 0.05em; }
+  .ram .row.cur .cell { background: #fef3f8; color: var(--hl); }
+
+  .pointer-side { display: flex; flex-direction: column; gap: 12px; padding-top: 36px; }
+  .ptr-block { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; }
+  .ptr-block.ok  { background: #dcfce7; color: var(--good); border: 2px solid var(--good); }
+  .ptr-block.bad { background: #fee2e2; color: var(--bad); border: 2px dashed var(--bad); }
+  .ptr-block.between {
+    background: #fff; color: var(--bad); border: 2px dashed var(--bad);
+    margin: -12px 0 -12px 0;
+    transform: translateX(-10px);
+  }
+  .ptr-block .ico { font-size: 1.3rem; line-height: 1; }
+
+  .legend {
+    display: flex; gap: 22px; padding: 12px 16px; border-top: 1px solid var(--border);
+    font-size: 0.9rem; color: var(--dark);
+  }
+  .legend .row { display: flex; align-items: center; gap: 6px; }
+  .legend .swatch { width: 14px; height: 14px; border-radius: 3px; }
+
+  .conclusion {
+    margin-top: 6px;
+    padding: 14px 22px;
+    background: #fef3f8;
+    border-left: 4px solid var(--hl);
+    border-radius: 4px;
+    font-size: 1rem;
+    text-align: center;
+    max-width: 760px;
+  }
+  .conclusion strong { color: var(--hl); }
+  .conclusion code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>Warum 8 Bit? Speicher-Adressierung</h1>
+  <div class="sub">CPU adressiert <strong>byteweise</strong> — halbe Byte existieren nicht.</div>
+
+  <div class="stage">
+
+    <div class="ram-wrap">
+
+      <div class="ram">
+        <div class="head">Adresse</div>
+        <div class="head">Hex</div>
+        <div class="head">Bit (was im Speicher steht)</div>
+
+        <div class="cell addr">0x0000</div>
+        <div class="cell">48</div>
+        <div class="cell bin">01001000</div>
+
+        <div class="cell addr">0x0001</div>
+        <div class="cell">65</div>
+        <div class="cell bin">01100101</div>
+
+        <div class="cell addr">0x0002</div>
+        <div class="cell">6C</div>
+        <div class="cell bin">01101100</div>
+
+        <div class="cell addr">0x0003</div>
+        <div class="cell">6C</div>
+        <div class="cell bin">01101100</div>
+
+        <div class="cell addr">0x0004</div>
+        <div class="cell">6F</div>
+        <div class="cell bin">01101111</div>
+
+        <div class="cell addr">0x0005</div>
+        <div class="cell">21</div>
+        <div class="cell bin">00100001</div>
+      </div>
+
+      <div class="pointer-side">
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0000 ✓</span></div>
+        <div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0000.5 — gibt's nicht</span></div>
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0001 ✓</span></div>
+        <div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0001.5 — gibt's nicht</span></div>
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0002 ✓</span></div>
+        <div class="ptr-block ok" style="opacity:0.4"><span class="ico">→</span><span>...</span></div>
+      </div>
+
+    </div>
+
+    <div class="conclusion">
+      <strong>Byte = kleinste adressierbare Einheit.</strong><br>
+      Speichercontroller, Bus und CPU sind alle auf 8-Bit-Häppchen ausgelegt.<br>
+      Einzelne Bit lesen → muss erst <code>byte = mem[addr]</code>, dann mit <code>byte &amp; 0b1000_0000</code> Bit isolieren.
+    </div>
+
+  </div>
+</body>
+</html>

slides/223015b/assets/grayscale-gradient.svg

@@ -0,0 +1,258 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440" preserveAspectRatio="none" shape-rendering="crispEdges">
+<rect x="0" y="0" width="10" height="1440" fill="rgb(255,255,255)"/>
+<rect x="10" y="0" width="10" height="1440" fill="rgb(254,254,254)"/>
+<rect x="20" y="0" width="10" height="1440" fill="rgb(253,253,253)"/>
+<rect x="30" y="0" width="10" height="1440" fill="rgb(252,252,252)"/>
+<rect x="40" y="0" width="10" height="1440" fill="rgb(251,251,251)"/>
+<rect x="50" y="0" width="10" height="1440" fill="rgb(250,250,250)"/>
+<rect x="60" y="0" width="10" height="1440" fill="rgb(249,249,249)"/>
+<rect x="70" y="0" width="10" height="1440" fill="rgb(248,248,248)"/>
+<rect x="80" y="0" width="10" height="1440" fill="rgb(247,247,247)"/>
+<rect x="90" y="0" width="10" height="1440" fill="rgb(246,246,246)"/>
+<rect x="100" y="0" width="10" height="1440" fill="rgb(245,245,245)"/>
+<rect x="110" y="0" width="10" height="1440" fill="rgb(244,244,244)"/>
+<rect x="120" y="0" width="10" height="1440" fill="rgb(243,243,243)"/>
+<rect x="130" y="0" width="10" height="1440" fill="rgb(242,242,242)"/>
+<rect x="140" y="0" width="10" height="1440" fill="rgb(241,241,241)"/>
+<rect x="150" y="0" width="10" height="1440" fill="rgb(240,240,240)"/>
+<rect x="160" y="0" width="10" height="1440" fill="rgb(239,239,239)"/>
+<rect x="170" y="0" width="10" height="1440" fill="rgb(238,238,238)"/>
+<rect x="180" y="0" width="10" height="1440" fill="rgb(237,237,237)"/>
+<rect x="190" y="0" width="10" height="1440" fill="rgb(236,236,236)"/>
+<rect x="200" y="0" width="10" height="1440" fill="rgb(235,235,235)"/>
+<rect x="210" y="0" width="10" height="1440" fill="rgb(234,234,234)"/>
+<rect x="220" y="0" width="10" height="1440" fill="rgb(233,233,233)"/>
+<rect x="230" y="0" width="10" height="1440" fill="rgb(232,232,232)"/>
+<rect x="240" y="0" width="10" height="1440" fill="rgb(231,231,231)"/>
+<rect x="250" y="0" width="10" height="1440" fill="rgb(230,230,230)"/>
+<rect x="260" y="0" width="10" height="1440" fill="rgb(229,229,229)"/>
+<rect x="270" y="0" width="10" height="1440" fill="rgb(228,228,228)"/>
+<rect x="280" y="0" width="10" height="1440" fill="rgb(227,227,227)"/>
+<rect x="290" y="0" width="10" height="1440" fill="rgb(226,226,226)"/>
+<rect x="300" y="0" width="10" height="1440" fill="rgb(225,225,225)"/>
+<rect x="310" y="0" width="10" height="1440" fill="rgb(224,224,224)"/>
+<rect x="320" y="0" width="10" height="1440" fill="rgb(223,223,223)"/>
+<rect x="330" y="0" width="10" height="1440" fill="rgb(222,222,222)"/>
+<rect x="340" y="0" width="10" height="1440" fill="rgb(221,221,221)"/>
+<rect x="350" y="0" width="10" height="1440" fill="rgb(220,220,220)"/>
+<rect x="360" y="0" width="10" height="1440" fill="rgb(219,219,219)"/>
+<rect x="370" y="0" width="10" height="1440" fill="rgb(218,218,218)"/>
+<rect x="380" y="0" width="10" height="1440" fill="rgb(217,217,217)"/>
+<rect x="390" y="0" width="10" height="1440" fill="rgb(216,216,216)"/>
+<rect x="400" y="0" width="10" height="1440" fill="rgb(215,215,215)"/>
+<rect x="410" y="0" width="10" height="1440" fill="rgb(214,214,214)"/>
+<rect x="420" y="0" width="10" height="1440" fill="rgb(213,213,213)"/>
+<rect x="430" y="0" width="10" height="1440" fill="rgb(212,212,212)"/>
+<rect x="440" y="0" width="10" height="1440" fill="rgb(211,211,211)"/>
+<rect x="450" y="0" width="10" height="1440" fill="rgb(210,210,210)"/>
+<rect x="460" y="0" width="10" height="1440" fill="rgb(209,209,209)"/>
+<rect x="470" y="0" width="10" height="1440" fill="rgb(208,208,208)"/>
+<rect x="480" y="0" width="10" height="1440" fill="rgb(207,207,207)"/>
+<rect x="490" y="0" width="10" height="1440" fill="rgb(206,206,206)"/>
+<rect x="500" y="0" width="10" height="1440" fill="rgb(205,205,205)"/>
+<rect x="510" y="0" width="10" height="1440" fill="rgb(204,204,204)"/>
+<rect x="520" y="0" width="10" height="1440" fill="rgb(203,203,203)"/>
+<rect x="530" y="0" width="10" height="1440" fill="rgb(202,202,202)"/>
+<rect x="540" y="0" width="10" height="1440" fill="rgb(201,201,201)"/>
+<rect x="550" y="0" width="10" height="1440" fill="rgb(200,200,200)"/>
+<rect x="560" y="0" width="10" height="1440" fill="rgb(199,199,199)"/>
+<rect x="570" y="0" width="10" height="1440" fill="rgb(198,198,198)"/>
+<rect x="580" y="0" width="10" height="1440" fill="rgb(197,197,197)"/>
+<rect x="590" y="0" width="10" height="1440" fill="rgb(196,196,196)"/>
+<rect x="600" y="0" width="10" height="1440" fill="rgb(195,195,195)"/>
+<rect x="610" y="0" width="10" height="1440" fill="rgb(194,194,194)"/>
+<rect x="620" y="0" width="10" height="1440" fill="rgb(193,193,193)"/>
+<rect x="630" y="0" width="10" height="1440" fill="rgb(192,192,192)"/>
+<rect x="640" y="0" width="10" height="1440" fill="rgb(191,191,191)"/>
+<rect x="650" y="0" width="10" height="1440" fill="rgb(190,190,190)"/>
+<rect x="660" y="0" width="10" height="1440" fill="rgb(189,189,189)"/>
+<rect x="670" y="0" width="10" height="1440" fill="rgb(188,188,188)"/>
+<rect x="680" y="0" width="10" height="1440" fill="rgb(187,187,187)"/>
+<rect x="690" y="0" width="10" height="1440" fill="rgb(186,186,186)"/>
+<rect x="700" y="0" width="10" height="1440" fill="rgb(185,185,185)"/>
+<rect x="710" y="0" width="10" height="1440" fill="rgb(184,184,184)"/>
+<rect x="720" y="0" width="10" height="1440" fill="rgb(183,183,183)"/>
+<rect x="730" y="0" width="10" height="1440" fill="rgb(182,182,182)"/>
+<rect x="740" y="0" width="10" height="1440" fill="rgb(181,181,181)"/>
+<rect x="750" y="0" width="10" height="1440" fill="rgb(180,180,180)"/>
+<rect x="760" y="0" width="10" height="1440" fill="rgb(179,179,179)"/>
+<rect x="770" y="0" width="10" height="1440" fill="rgb(178,178,178)"/>
+<rect x="780" y="0" width="10" height="1440" fill="rgb(177,177,177)"/>
+<rect x="790" y="0" width="10" height="1440" fill="rgb(176,176,176)"/>
+<rect x="800" y="0" width="10" height="1440" fill="rgb(175,175,175)"/>
+<rect x="810" y="0" width="10" height="1440" fill="rgb(174,174,174)"/>
+<rect x="820" y="0" width="10" height="1440" fill="rgb(173,173,173)"/>
+<rect x="830" y="0" width="10" height="1440" fill="rgb(172,172,172)"/>
+<rect x="840" y="0" width="10" height="1440" fill="rgb(171,171,171)"/>
+<rect x="850" y="0" width="10" height="1440" fill="rgb(170,170,170)"/>
+<rect x="860" y="0" width="10" height="1440" fill="rgb(169,169,169)"/>
+<rect x="870" y="0" width="10" height="1440" fill="rgb(168,168,168)"/>
+<rect x="880" y="0" width="10" height="1440" fill="rgb(167,167,167)"/>
+<rect x="890" y="0" width="10" height="1440" fill="rgb(166,166,166)"/>
+<rect x="900" y="0" width="10" height="1440" fill="rgb(165,165,165)"/>
+<rect x="910" y="0" width="10" height="1440" fill="rgb(164,164,164)"/>
+<rect x="920" y="0" width="10" height="1440" fill="rgb(163,163,163)"/>
+<rect x="930" y="0" width="10" height="1440" fill="rgb(162,162,162)"/>
+<rect x="940" y="0" width="10" height="1440" fill="rgb(161,161,161)"/>
+<rect x="950" y="0" width="10" height="1440" fill="rgb(160,160,160)"/>
+<rect x="960" y="0" width="10" height="1440" fill="rgb(159,159,159)"/>
+<rect x="970" y="0" width="10" height="1440" fill="rgb(158,158,158)"/>
+<rect x="980" y="0" width="10" height="1440" fill="rgb(157,157,157)"/>
+<rect x="990" y="0" width="10" height="1440" fill="rgb(156,156,156)"/>
+<rect x="1000" y="0" width="10" height="1440" fill="rgb(155,155,155)"/>
+<rect x="1010" y="0" width="10" height="1440" fill="rgb(154,154,154)"/>
+<rect x="1020" y="0" width="10" height="1440" fill="rgb(153,153,153)"/>
+<rect x="1030" y="0" width="10" height="1440" fill="rgb(152,152,152)"/>
+<rect x="1040" y="0" width="10" height="1440" fill="rgb(151,151,151)"/>
+<rect x="1050" y="0" width="10" height="1440" fill="rgb(150,150,150)"/>
+<rect x="1060" y="0" width="10" height="1440" fill="rgb(149,149,149)"/>
+<rect x="1070" y="0" width="10" height="1440" fill="rgb(148,148,148)"/>
+<rect x="1080" y="0" width="10" height="1440" fill="rgb(147,147,147)"/>
+<rect x="1090" y="0" width="10" height="1440" fill="rgb(146,146,146)"/>
+<rect x="1100" y="0" width="10" height="1440" fill="rgb(145,145,145)"/>
+<rect x="1110" y="0" width="10" height="1440" fill="rgb(144,144,144)"/>
+<rect x="1120" y="0" width="10" height="1440" fill="rgb(143,143,143)"/>
+<rect x="1130" y="0" width="10" height="1440" fill="rgb(142,142,142)"/>
+<rect x="1140" y="0" width="10" height="1440" fill="rgb(141,141,141)"/>
+<rect x="1150" y="0" width="10" height="1440" fill="rgb(140,140,140)"/>
+<rect x="1160" y="0" width="10" height="1440" fill="rgb(139,139,139)"/>
+<rect x="1170" y="0" width="10" height="1440" fill="rgb(138,138,138)"/>
+<rect x="1180" y="0" width="10" height="1440" fill="rgb(137,137,137)"/>
+<rect x="1190" y="0" width="10" height="1440" fill="rgb(136,136,136)"/>
+<rect x="1200" y="0" width="10" height="1440" fill="rgb(135,135,135)"/>
+<rect x="1210" y="0" width="10" height="1440" fill="rgb(134,134,134)"/>
+<rect x="1220" y="0" width="10" height="1440" fill="rgb(133,133,133)"/>
+<rect x="1230" y="0" width="10" height="1440" fill="rgb(132,132,132)"/>
+<rect x="1240" y="0" width="10" height="1440" fill="rgb(131,131,131)"/>
+<rect x="1250" y="0" width="10" height="1440" fill="rgb(130,130,130)"/>
+<rect x="1260" y="0" width="10" height="1440" fill="rgb(129,129,129)"/>
+<rect x="1270" y="0" width="10" height="1440" fill="rgb(128,128,128)"/>
+<rect x="1280" y="0" width="10" height="1440" fill="rgb(127,127,127)"/>
+<rect x="1290" y="0" width="10" height="1440" fill="rgb(126,126,126)"/>
+<rect x="1300" y="0" width="10" height="1440" fill="rgb(125,125,125)"/>
+<rect x="1310" y="0" width="10" height="1440" fill="rgb(124,124,124)"/>
+<rect x="1320" y="0" width="10" height="1440" fill="rgb(123,123,123)"/>
+<rect x="1330" y="0" width="10" height="1440" fill="rgb(122,122,122)"/>
+<rect x="1340" y="0" width="10" height="1440" fill="rgb(121,121,121)"/>
+<rect x="1350" y="0" width="10" height="1440" fill="rgb(120,120,120)"/>
+<rect x="1360" y="0" width="10" height="1440" fill="rgb(119,119,119)"/>
+<rect x="1370" y="0" width="10" height="1440" fill="rgb(118,118,118)"/>
+<rect x="1380" y="0" width="10" height="1440" fill="rgb(117,117,117)"/>
+<rect x="1390" y="0" width="10" height="1440" fill="rgb(116,116,116)"/>
+<rect x="1400" y="0" width="10" height="1440" fill="rgb(115,115,115)"/>
+<rect x="1410" y="0" width="10" height="1440" fill="rgb(114,114,114)"/>
+<rect x="1420" y="0" width="10" height="1440" fill="rgb(113,113,113)"/>
+<rect x="1430" y="0" width="10" height="1440" fill="rgb(112,112,112)"/>
+<rect x="1440" y="0" width="10" height="1440" fill="rgb(111,111,111)"/>
+<rect x="1450" y="0" width="10" height="1440" fill="rgb(110,110,110)"/>
+<rect x="1460" y="0" width="10" height="1440" fill="rgb(109,109,109)"/>
+<rect x="1470" y="0" width="10" height="1440" fill="rgb(108,108,108)"/>
+<rect x="1480" y="0" width="10" height="1440" fill="rgb(107,107,107)"/>
+<rect x="1490" y="0" width="10" height="1440" fill="rgb(106,106,106)"/>
+<rect x="1500" y="0" width="10" height="1440" fill="rgb(105,105,105)"/>
+<rect x="1510" y="0" width="10" height="1440" fill="rgb(104,104,104)"/>
+<rect x="1520" y="0" width="10" height="1440" fill="rgb(103,103,103)"/>
+<rect x="1530" y="0" width="10" height="1440" fill="rgb(102,102,102)"/>
+<rect x="1540" y="0" width="10" height="1440" fill="rgb(101,101,101)"/>
+<rect x="1550" y="0" width="10" height="1440" fill="rgb(100,100,100)"/>
+<rect x="1560" y="0" width="10" height="1440" fill="rgb(99,99,99)"/>
+<rect x="1570" y="0" width="10" height="1440" fill="rgb(98,98,98)"/>
+<rect x="1580" y="0" width="10" height="1440" fill="rgb(97,97,97)"/>
+<rect x="1590" y="0" width="10" height="1440" fill="rgb(96,96,96)"/>
+<rect x="1600" y="0" width="10" height="1440" fill="rgb(95,95,95)"/>
+<rect x="1610" y="0" width="10" height="1440" fill="rgb(94,94,94)"/>
+<rect x="1620" y="0" width="10" height="1440" fill="rgb(93,93,93)"/>
+<rect x="1630" y="0" width="10" height="1440" fill="rgb(92,92,92)"/>
+<rect x="1640" y="0" width="10" height="1440" fill="rgb(91,91,91)"/>
+<rect x="1650" y="0" width="10" height="1440" fill="rgb(90,90,90)"/>
+<rect x="1660" y="0" width="10" height="1440" fill="rgb(89,89,89)"/>
+<rect x="1670" y="0" width="10" height="1440" fill="rgb(88,88,88)"/>
+<rect x="1680" y="0" width="10" height="1440" fill="rgb(87,87,87)"/>
+<rect x="1690" y="0" width="10" height="1440" fill="rgb(86,86,86)"/>
+<rect x="1700" y="0" width="10" height="1440" fill="rgb(85,85,85)"/>
+<rect x="1710" y="0" width="10" height="1440" fill="rgb(84,84,84)"/>
+<rect x="1720" y="0" width="10" height="1440" fill="rgb(83,83,83)"/>
+<rect x="1730" y="0" width="10" height="1440" fill="rgb(82,82,82)"/>
+<rect x="1740" y="0" width="10" height="1440" fill="rgb(81,81,81)"/>
+<rect x="1750" y="0" width="10" height="1440" fill="rgb(80,80,80)"/>
+<rect x="1760" y="0" width="10" height="1440" fill="rgb(79,79,79)"/>
+<rect x="1770" y="0" width="10" height="1440" fill="rgb(78,78,78)"/>
+<rect x="1780" y="0" width="10" height="1440" fill="rgb(77,77,77)"/>
+<rect x="1790" y="0" width="10" height="1440" fill="rgb(76,76,76)"/>
+<rect x="1800" y="0" width="10" height="1440" fill="rgb(75,75,75)"/>
+<rect x="1810" y="0" width="10" height="1440" fill="rgb(74,74,74)"/>
+<rect x="1820" y="0" width="10" height="1440" fill="rgb(73,73,73)"/>
+<rect x="1830" y="0" width="10" height="1440" fill="rgb(72,72,72)"/>
+<rect x="1840" y="0" width="10" height="1440" fill="rgb(71,71,71)"/>
+<rect x="1850" y="0" width="10" height="1440" fill="rgb(70,70,70)"/>
+<rect x="1860" y="0" width="10" height="1440" fill="rgb(69,69,69)"/>
+<rect x="1870" y="0" width="10" height="1440" fill="rgb(68,68,68)"/>
+<rect x="1880" y="0" width="10" height="1440" fill="rgb(67,67,67)"/>
+<rect x="1890" y="0" width="10" height="1440" fill="rgb(66,66,66)"/>
+<rect x="1900" y="0" width="10" height="1440" fill="rgb(65,65,65)"/>
+<rect x="1910" y="0" width="10" height="1440" fill="rgb(64,64,64)"/>
+<rect x="1920" y="0" width="10" height="1440" fill="rgb(63,63,63)"/>
+<rect x="1930" y="0" width="10" height="1440" fill="rgb(62,62,62)"/>
+<rect x="1940" y="0" width="10" height="1440" fill="rgb(61,61,61)"/>
+<rect x="1950" y="0" width="10" height="1440" fill="rgb(60,60,60)"/>
+<rect x="1960" y="0" width="10" height="1440" fill="rgb(59,59,59)"/>
+<rect x="1970" y="0" width="10" height="1440" fill="rgb(58,58,58)"/>
+<rect x="1980" y="0" width="10" height="1440" fill="rgb(57,57,57)"/>
+<rect x="1990" y="0" width="10" height="1440" fill="rgb(56,56,56)"/>
+<rect x="2000" y="0" width="10" height="1440" fill="rgb(55,55,55)"/>
+<rect x="2010" y="0" width="10" height="1440" fill="rgb(54,54,54)"/>
+<rect x="2020" y="0" width="10" height="1440" fill="rgb(53,53,53)"/>
+<rect x="2030" y="0" width="10" height="1440" fill="rgb(52,52,52)"/>
+<rect x="2040" y="0" width="10" height="1440" fill="rgb(51,51,51)"/>
+<rect x="2050" y="0" width="10" height="1440" fill="rgb(50,50,50)"/>
+<rect x="2060" y="0" width="10" height="1440" fill="rgb(49,49,49)"/>
+<rect x="2070" y="0" width="10" height="1440" fill="rgb(48,48,48)"/>
+<rect x="2080" y="0" width="10" height="1440" fill="rgb(47,47,47)"/>
+<rect x="2090" y="0" width="10" height="1440" fill="rgb(46,46,46)"/>
+<rect x="2100" y="0" width="10" height="1440" fill="rgb(45,45,45)"/>
+<rect x="2110" y="0" width="10" height="1440" fill="rgb(44,44,44)"/>
+<rect x="2120" y="0" width="10" height="1440" fill="rgb(43,43,43)"/>
+<rect x="2130" y="0" width="10" height="1440" fill="rgb(42,42,42)"/>
+<rect x="2140" y="0" width="10" height="1440" fill="rgb(41,41,41)"/>
+<rect x="2150" y="0" width="10" height="1440" fill="rgb(40,40,40)"/>
+<rect x="2160" y="0" width="10" height="1440" fill="rgb(39,39,39)"/>
+<rect x="2170" y="0" width="10" height="1440" fill="rgb(38,38,38)"/>
+<rect x="2180" y="0" width="10" height="1440" fill="rgb(37,37,37)"/>
+<rect x="2190" y="0" width="10" height="1440" fill="rgb(36,36,36)"/>
+<rect x="2200" y="0" width="10" height="1440" fill="rgb(35,35,35)"/>
+<rect x="2210" y="0" width="10" height="1440" fill="rgb(34,34,34)"/>
+<rect x="2220" y="0" width="10" height="1440" fill="rgb(33,33,33)"/>
+<rect x="2230" y="0" width="10" height="1440" fill="rgb(32,32,32)"/>
+<rect x="2240" y="0" width="10" height="1440" fill="rgb(31,31,31)"/>
+<rect x="2250" y="0" width="10" height="1440" fill="rgb(30,30,30)"/>
+<rect x="2260" y="0" width="10" height="1440" fill="rgb(29,29,29)"/>
+<rect x="2270" y="0" width="10" height="1440" fill="rgb(28,28,28)"/>
+<rect x="2280" y="0" width="10" height="1440" fill="rgb(27,27,27)"/>
+<rect x="2290" y="0" width="10" height="1440" fill="rgb(26,26,26)"/>
+<rect x="2300" y="0" width="10" height="1440" fill="rgb(25,25,25)"/>
+<rect x="2310" y="0" width="10" height="1440" fill="rgb(24,24,24)"/>
+<rect x="2320" y="0" width="10" height="1440" fill="rgb(23,23,23)"/>
+<rect x="2330" y="0" width="10" height="1440" fill="rgb(22,22,22)"/>
+<rect x="2340" y="0" width="10" height="1440" fill="rgb(21,21,21)"/>
+<rect x="2350" y="0" width="10" height="1440" fill="rgb(20,20,20)"/>
+<rect x="2360" y="0" width="10" height="1440" fill="rgb(19,19,19)"/>
+<rect x="2370" y="0" width="10" height="1440" fill="rgb(18,18,18)"/>
+<rect x="2380" y="0" width="10" height="1440" fill="rgb(17,17,17)"/>
+<rect x="2390" y="0" width="10" height="1440" fill="rgb(16,16,16)"/>
+<rect x="2400" y="0" width="10" height="1440" fill="rgb(15,15,15)"/>
+<rect x="2410" y="0" width="10" height="1440" fill="rgb(14,14,14)"/>
+<rect x="2420" y="0" width="10" height="1440" fill="rgb(13,13,13)"/>
+<rect x="2430" y="0" width="10" height="1440" fill="rgb(12,12,12)"/>
+<rect x="2440" y="0" width="10" height="1440" fill="rgb(11,11,11)"/>
+<rect x="2450" y="0" width="10" height="1440" fill="rgb(10,10,10)"/>
+<rect x="2460" y="0" width="10" height="1440" fill="rgb(9,9,9)"/>
+<rect x="2470" y="0" width="10" height="1440" fill="rgb(8,8,8)"/>
+<rect x="2480" y="0" width="10" height="1440" fill="rgb(7,7,7)"/>
+<rect x="2490" y="0" width="10" height="1440" fill="rgb(6,6,6)"/>
+<rect x="2500" y="0" width="10" height="1440" fill="rgb(5,5,5)"/>
+<rect x="2510" y="0" width="10" height="1440" fill="rgb(4,4,4)"/>
+<rect x="2520" y="0" width="10" height="1440" fill="rgb(3,3,3)"/>
+<rect x="2530" y="0" width="10" height="1440" fill="rgb(2,2,2)"/>
+<rect x="2540" y="0" width="10" height="1440" fill="rgb(1,1,1)"/>
+<rect x="2550" y="0" width="10" height="1440" fill="rgb(0,0,0)"/>
+</svg>

slides/223015b/assets/grayscale-zoom.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
+<rect width="1920" height="1080" fill="#ffffff"/>
+<text x="960.0" y="100" text-anchor="middle" font-family="sans-serif" font-size="54" fill="#1a1a2e" font-weight="bold">Zoom: die 16 hellsten Abstufungen</text>
+<rect x="60.00" y="220" width="101.25" height="500" fill="rgb(255,255,255)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="110.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">255</text>
+<text x="110.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFF</text>
+<rect x="173.25" y="220" width="101.25" height="500" fill="rgb(254,254,254)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="223.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">254</text>
+<text x="223.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFE</text>
+<rect x="286.50" y="220" width="101.25" height="500" fill="rgb(253,253,253)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="337.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">253</text>
+<text x="337.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFD</text>
+<rect x="399.75" y="220" width="101.25" height="500" fill="rgb(252,252,252)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="450.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">252</text>
+<text x="450.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFC</text>
+<rect x="513.00" y="220" width="101.25" height="500" fill="rgb(251,251,251)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="563.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">251</text>
+<text x="563.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFB</text>
+<rect x="626.25" y="220" width="101.25" height="500" fill="rgb(250,250,250)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="676.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">250</text>
+<text x="676.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFA</text>
+<rect x="739.50" y="220" width="101.25" height="500" fill="rgb(249,249,249)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="790.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">249</text>
+<text x="790.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF9</text>
+<rect x="852.75" y="220" width="101.25" height="500" fill="rgb(248,248,248)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="903.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">248</text>
+<text x="903.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF8</text>
+<rect x="966.00" y="220" width="101.25" height="500" fill="rgb(247,247,247)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1016.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">247</text>
+<text x="1016.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF7</text>
+<rect x="1079.25" y="220" width="101.25" height="500" fill="rgb(246,246,246)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1129.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">246</text>
+<text x="1129.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF6</text>
+<rect x="1192.50" y="220" width="101.25" height="500" fill="rgb(245,245,245)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1243.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">245</text>
+<text x="1243.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF5</text>
+<rect x="1305.75" y="220" width="101.25" height="500" fill="rgb(244,244,244)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1356.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">244</text>
+<text x="1356.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF4</text>
+<rect x="1419.00" y="220" width="101.25" height="500" fill="rgb(243,243,243)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1469.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">243</text>
+<text x="1469.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF3</text>
+<rect x="1532.25" y="220" width="101.25" height="500" fill="rgb(242,242,242)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1582.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">242</text>
+<text x="1582.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF2</text>
+<rect x="1645.50" y="220" width="101.25" height="500" fill="rgb(241,241,241)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1696.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">241</text>
+<text x="1696.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF1</text>
+<rect x="1758.75" y="220" width="101.25" height="500" fill="rgb(240,240,240)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1809.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">240</text>
+<text x="1809.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF0</text>
+<text x="960.0" y="1020" text-anchor="middle" font-family="sans-serif" font-size="28" fill="#4a4a6a" font-style="italic">jede Stufe = Unterschied von 1/255 ≈ 0,4% Helligkeit</text>
+</svg>

slides/223015b/klausurfolien.md

@@ -39,11 +39,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
+  background: #0f0f23;
-  color: #5fb3e4;
   padding: 0.15em 0.4em;
   border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }
@@ -112,7 +114,7 @@ Hochschule der Medien Stuttgart
 | **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |
 
 **Faustregel:**
-- Medien für Endnutzer → Lossy oft akzeptabel
+- Medien für EndnutzerInnen → Lossy oft akzeptabel
 - Quellmaterial, Code, Archive → Lossless nötig
 
 <!--

slides/223015b/klausurfragen.md

@@ -30,12 +30,21 @@ h2 {
 }
 pre {
   background: #0f0f23;
+  color: #f8f8f8;
   border-radius: 8px;
 }
 pre code {
   background: transparent;
   color: inherit;
 }
+code {
+  background: #0f0f23;
+  color: #5fb3e4;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
   color: var(--color-highlight);
 }
@@ -442,9 +451,9 @@ Ordne jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
 **Punkte:** 3
 **Typ:** `[ESSAY]`
 
-Erklären Sie die drei digitalen Distributionswege **Download**, **Streaming** und **Peer-to-Peer (P2P)**. Beschreiben Sie für jeden Weg: (1) wie die Daten zum Nutzer gelangen, (2) ob der Nutzer eine dauerhafte Kopie erhält, und (3) nennen Sie je ein Beispiel.
+Erklären Sie die drei digitalen Distributionswege **Download**, **Streaming** und **Peer-to-Peer (P2P)**. Beschreiben Sie für jeden Weg: (1) wie die Daten zu Nutzenden gelangen, (2) ob Nutzende eine dauerhafte Kopie erhalten, und (3) nennen Sie je ein Beispiel.
 
-> **Musterlösung:** **Download:** Datei wird vollständig vom Server heruntergeladen und lokal gespeichert. Nutzer erhält dauerhafte Kopie. Beispiel: iTunes Store, Steam. **Streaming:** Daten werden während des Abspielens übertragen, keine dauerhafte lokale Kopie. Beispiel: Netflix, Spotify. **P2P:** Nutzer laden Teile der Datei gleichzeitig von vielen anderen Nutzern herunter (dezentral). Dauerhafte Kopie möglich. Beispiel: BitTorrent.
+> **Musterlösung:** **Download:** Datei wird vollständig vom Server heruntergeladen und lokal gespeichert. Nutzende erhalten dauerhafte Kopie. Beispiel: iTunes Store, Steam. **Streaming:** Daten werden während des Abspielens übertragen, keine dauerhafte lokale Kopie. Beispiel: Netflix, Spotify. **P2P:** Nutzende laden Teile der Datei gleichzeitig von vielen anderen herunter (dezentral). Dauerhafte Kopie möglich. Beispiel: BitTorrent.
 
 ---
 

slides/223015c/00-intro.md

@@ -0,0 +1,228 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Grundlagen IT- und Internettechnik (223015c)"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
+title: Grundlagen IT- und Internettechnik
+---
+
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.7rem;
+}
+h1 {
+  color: #a02060;
+}
+section.invert h1 {
+  color: #fff;
+}
+h2 {
+  color: #1f2937;
+}
+pre {
+  background: #0f0f23;
+  color: #d63384;
+  border-radius: 8px;
+  border-left: 3px solid #d63384;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #d63384;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+section.klausur {
+  background: repeating-linear-gradient(
+    135deg,
+    #fce4ec,
+    #fce4ec 40px,
+    #fff 40px,
+    #fff 80px
+  ) !important;
+}
+@media print {
+  section.klausur {
+    background: #fce4ec !important;
+  }
+}
+section.aufgabe {
+  background: #fce4ec !important;
+}
+section.aufgabe footer {
+  display: none;
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg cover opacity:0.2](./assets/background-termin-1.png)
+
+# Grundlagen IT- und Internettechnik
+
+**223015c** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Sommersemester 2026**
+
+[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015c.png)
+
+---
+
+<!-- _class: lead -->
+
+# Herzlich willkommen!
+## Einführung
+
+---
+
+# Über mich
+
+**Michael Werner Czechowski**
+
+- Systems and Platform Engineer
+- Schwerpunkte:
+  - Web-Technologien, Barriere-Armut, Open Source
+- Hintergrund:
+  - Philosophie (Uni Stuttgart)
+  - Wirtschaftsinformatik (Leibniz-FH Hannover)
+- Kontakt: lb-czechowski@hdm-stuttgart.de
+
+---
+
+# Warum 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?
+* Was hat ein Unterseekabel mit meiner E-Mail zu tun?
+* **→ Die Technik dahinter verstehen und fundierte Entscheidungen treffen**
+
+---
+
+# Das Ziel
+
+**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
+
+Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fragen konfrontiert:
+* 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!**
+
+---
+
+# Was Sie hier lernen werden
+
+**In dieser Veranstaltung erwerben Sie folgende Kompetenzen:**
+
+* Geschichte des Computers und Internets
+* HTML-Grundlagen und semantisches Markup
+* CSS für Layout und Gestaltung
+* Netzwerke und Protokolle (TCP/IP, DNS, HTTP(S))
+* "Barrierefreiheit" im Web
+* Grundlagen von JavaScript und Interaktivität
+
+---
+
+# Kurze Umfrage
+
+**Bitte Hand heben:**
+* Wer hat schon mal eine Webseite gebaut?
+* Wer weiß, was HTML ist?
+* Wer hat schon mal CSS geschrieben? 
+* Wer kennt den Unterschied zwischen Internet und WWW? 
+* Wer hat schon mal mit JavaScript gearbeitet?
+
+---
+
+# Kursübersicht
+
+**Kapitel:**
+
+1. Geschichte, Grundlagen & **HTML**
+2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
+3. Interaktivität, Animationen & **JavaScript**
+
+**Ziel:** "Gelernte Hilflosigkeit" ablegen
+
+---
+
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #fce4ec -->
+
+# Prüfungsleistung
+
+**Nach aktuellem Kenntnisstand:**
+
+* 90 min insg. (Technik 1)
+* Schriftliche Klausur (digital)
+* Teils offene Fragen
+* So gut wie kein Coding/Programmieren
+* **Prüfungsrelevant:** Folien sind markiert mit anderem Hintergrund
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/klausur-01.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/klausur-02.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/klausur-03.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/splan.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/asta.png)
+

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

@@ -73,18 +73,6 @@ section.glossar {
 }
 section.erklaerung {
   font-size: 1.1rem;
-  background: repeating-linear-gradient(
-    135deg,
-    #fce4ec,
-    #fce4ec 40px,
-    #fff 40px,
-    #fff 80px
-  ) !important;
-}
-@media print {
-  section.erklaerung {
-    background: #fce4ec !important;
-  }
 }
 section.erklaerung h1 {
   font-size: 1.5rem;
@@ -347,25 +335,18 @@ SPEAKER NOTES:
 
 # Das Problem: Komplexität
 
-Zwischen dir und einer Webseite liegen:
+![bg right:40% fit](./assets/demos/network-chain.png)
 
-```
+Zwischen Ihnen und einer Webseite liegen viele Stationen.
-Dein Browser
-    ↓
-Deine Netzwerkkarte (WLAN oder Ethernet)
-    ↓
-Router im Flur / zu Hause
-    ↓
-Netzwerk der HdM / deines Providers
-    ↓
-Das Internet (dutzende Router)
-    ↓
-Netzwerk des Ziel-Servers
-    ↓
-Der Webserver
-```
 
-Jede Komponente "spricht" anders.
+Jede Komponente "spricht" anders:
+
+- Browser → **HTTP**
+- Netzwerkkarte → **Bits / Signale**
+- Router → **IP-Pakete**
+- Provider → **Routing**
+
+Wie zusammenbringen?
 
 <!--
 SPEAKER NOTES:
@@ -406,10 +387,6 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Das TCP/IP-Modell
 
 | Schicht | Name | Aufgabe | Protokolle |
@@ -461,19 +438,10 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
 
 # Schichten verpacken Daten
 
-```
+![bg right:52% fit](./assets/demos/encap-layers.png)
-Anwendung:  [ HTTP-Request: "GET /index.html" ]
-                 ↓ verpackt in
-Transport:  [ TCP-Header | HTTP-Request ]
-                 ↓ verpackt in
-Internet:   [ IP-Header | TCP-Header | HTTP-Request ]
-                 ↓ verpackt in
-Netzzugang: [ Eth-Header | IP-Header | TCP | HTTP | Eth-Trailer ]
-                 ↓
-Physik:     01001000 01010100 01010100...
-```
 
 **Encapsulation:** Jede Schicht packt ein.
+
 **Decapsulation:** Beim Empfang wird ausgepackt.
 
 <!--
@@ -489,10 +457,6 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Dateneinheiten pro Schicht
 
 | Schicht | Name | Dateneinheit | Was kommt hinzu? |
@@ -571,24 +535,7 @@ SPEAKER NOTES:
 
 # Exkurs: OSI vs. TCP/IP
 
-```
+![h:440 center](./assets/demos/osi-tcpip-diagram.png)
-    OSI (7 Schichten)              TCP/IP (4 Schichten)
-┌─────────────────────┐        ┌─────────────────────┐
-│  7. Anwendung       │        │                     │
-├─────────────────────┤        │      Anwendung      │
-│  6. Darstellung     │        │                     │
-├─────────────────────┤        │                     │
-│  5. Sitzung         │        │                     │
-├─────────────────────┤        ├─────────────────────┤
-│  4. Transport       │        │      Transport      │
-├─────────────────────┤        ├─────────────────────┤
-│  3. Vermittlung     │        │      Internet       │
-├─────────────────────┤        ├─────────────────────┤
-│  2. Sicherung       │        │                     │
-├─────────────────────┤        │     Netzzugang      │
-│  1. Bitübertragung  │        │                     │
-└─────────────────────┘        └─────────────────────┘
-```
 
 OSI = Theorie. TCP/IP = Realität.
 
@@ -668,10 +615,7 @@ SPEAKER NOTES:
 
 # Port: Das richtige Programm
 
-```
+![bg right:38% fit](./assets/demos/port-highlight.png)
-212.132.79.37:443
-              └─── Port 443 = HTTPS
-```
 
 - Identifiziert ein **Programm** auf einem Rechner
 - Ein Rechner, viele Dienste
@@ -699,10 +643,6 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # IP vs. MAC vs. Port
 
 | | IP-Adresse | MAC-Adresse | Port |
@@ -755,7 +695,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
 <!-- _class: lead -->
 
 # Die Reise eines Klicks
-## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
+## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?
 
 <!--
 SPEAKER NOTES:
@@ -769,7 +709,7 @@ SPEAKER NOTES:
 
 # Das Szenario
 
-Du bist im WLAN der HdM und rufst auf:
+Sie sind im WLAN der HdM und rufen auf:
 
 ```
 https://www.hdm-stuttgart.de
@@ -790,23 +730,13 @@ SPEAKER NOTES:
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # Die Zeitlinie
 
-```
+![h:560 center](./assets/demos/timeline.png)
-[0 ms]     DNS: "Welche IP hat www.hdm-stuttgart.de?"
-              ↓
-[~20 ms]   DNS-Antwort: "212.132.79.37"
-              ↓
-[~25 ms]   TCP-Handshake beginnt
-              ↓
-[~50 ms]   TCP-Verbindung steht
-              ↓
-[~55 ms]   HTTP-Request: "GET /index.html"
-              ↓
-[~150 ms]  HTTP-Response: HTML kommt zurück
-              ↓
-[~200 ms]  Browser rendert die Seite
-```
 
 <!--
 SPEAKER NOTES:
@@ -841,7 +771,7 @@ SPEAKER NOTES:
 www.hdm-stuttgart.de  →  212.132.79.37
 ```
 
-Dein Laptop fragt sich durch:
+Ihr Laptop fragt sich durch:
 
 1. **Browser-Cache:** "War ich da kürzlich?" → Nein
 2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
@@ -860,19 +790,15 @@ SPEAKER NOTES:
 
 # Die DNS-Hierarchie
 
-```
+![bg right:45% fit](./assets/demos/dns-tree.png)
-                    . (Root)
-                   /|\
-                  / | \
-               .de .com .org ...
-               /
-        hdm-stuttgart
-             |
-            www
-```
 
 **Dezentral:** Niemand kennt alles.
-Jede Ebene kennt nur die nächste.
+
+Jede Ebene kennt nur die nächste:
+
+- Root → .de, .com, .org
+- .de → alle .de-Domains
+- hdm-stuttgart.de → www, mail, …
 
 <!--
 SPEAKER NOTES:
@@ -885,25 +811,15 @@ SPEAKER NOTES:
 
 ---
 
-# Der DNS-Lookup
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
 
-```
+![bg fit](./assets/demos/dns-lookup.png)
-Dein Laptop → Resolver:    "Wo ist www.hdm-stuttgart.de?"
-
-Resolver → Root (.):       "Wer verwaltet .de?"
-                           ← "Frag 194.0.0.53"
-
-Resolver → .de-Server:     "Wer verwaltet hdm-stuttgart.de?"
-                           ← "Frag den Nameserver der HdM"
-
-Resolver → HdM-NS:         "Welche IP hat www?"
-                           ← "212.132.79.37"
-
-Resolver → Dein Laptop:    "Die IP ist 212.132.79.37"
-```
 
 <!--
 SPEAKER NOTES:
+- Titel: Der DNS-Lookup
 - Kompletter Ablauf (wenn nichts gecached)
 - Resolver = typisch beim Provider, macht Arbeit
 - Root → .de-Server → HdM-NS → IP
@@ -1000,31 +916,16 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
+<!-- _paginate: false -->
 
-# Der 3-Way-Handshake
+![bg fit](./assets/demos/tcp-handshake.png)
-
-```
-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:
+- Titel: Der 3-Way-Handshake
+- SYN = Synchronize, ACK = Acknowledge
 - 3 Pakete → Verbindung steht
 - 1. Client SYN: "Will Verbindung, starte bei 1000"
 - 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"
@@ -1068,13 +969,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
 
 **Status:** Die TCP-Verbindung steht.
 
-```
+![bg right:42% fit](./assets/demos/client-server-ports.png)
-Client:    141.62.xxx.xxx:52431
-                         └─── Zufälliger Port für diese Verbindung
-
-Server:    212.132.79.37:443
-                        └─── HTTPS-Port
-```
 
 **Jetzt erst** kann HTTP gesprochen werden.
 
@@ -1101,7 +996,7 @@ SPEAKER NOTES:
 
 ---
 
-# Was dein Browser sendet
+# Was Ihr Browser sendet
 
 ```http
 GET / HTTP/1.1
@@ -1120,7 +1015,7 @@ Connection: keep-alive
 <!--
 SPEAKER NOTES:
 - HTTP-Request: lesbar, menschlich verständlich
-- GET = "hol mir was" (POST = "hier Daten für dich")
+- GET = "hol mir was" (POST = "hier Daten für Sie")
 - "/" = Wurzel = Startseite
 - HTTP/1.1 = Protokollversion
 - Header: Kontext (Host, Browser, Sprache)
@@ -1146,17 +1041,7 @@ SPEAKER NOTES:
 
 HTTP-Request wird zum **Segment**:
 
-```
+![w:900 center](./assets/demos/tcp-segment.png)
-┌─────────────────────────────────────────────────┐
-│ TCP-Header                                      │
-│ ┌─────────────┬─────────────┬─────────────────┐ │
-│ │ Source Port │ Dest Port   │ Sequence Number │ │
-│ │ 52431       │ 443         │ 1001            │ │
-│ └─────────────┴─────────────┴─────────────────┘ │
-├─────────────────────────────────────────────────┤
-│ Payload: "GET / HTTP/1.1..."                    │
-└─────────────────────────────────────────────────┘
-```
 
 **Neu:** Ports + Sequenznummer
 
@@ -1177,17 +1062,7 @@ SPEAKER NOTES:
 
 Segment wird zum **Paket**:
 
-```
+![w:900 center](./assets/demos/ip-packet.png)
-┌─────────────────────────────────────────────────┐
-│ IP-Header                                       │
-│ ┌─────────────────┬─────────────────┐           │
-│ │ Source IP       │ Destination IP  │           │
-│ │ 141.62.xxx.xxx  │ 212.132.79.37   │           │
-│ └─────────────────┴─────────────────┘           │
-├─────────────────────────────────────────────────┤
-│ TCP-Segment (unverändert)                       │
-└─────────────────────────────────────────────────┘
-```
 
 **Neu:** IP-Adressen
 
@@ -1207,19 +1082,7 @@ SPEAKER NOTES:
 
 Paket wird zum **Frame**:
 
-```
+![w:900 center](./assets/demos/ethernet-frame.png)
-┌─────────────────────────────────────────────────┐
-│ Ethernet-Header                                 │
-│ ┌─────────────────┬─────────────────┐           │
-│ │ Source MAC      │ Destination MAC │           │
-│ │ aa:bb:cc:dd:ee  │ 11:22:33:44:55  │           │
-│ └─────────────────┴─────────────────┘           │
-├─────────────────────────────────────────────────┤
-│ IP-Paket (unverändert)                          │
-├─────────────────────────────────────────────────┤
-│ FCS (Frame Check Sequence / Prüfsumme)          │
-└─────────────────────────────────────────────────┘
-```
 
 **Wichtig:** Destination MAC = **Router**, nicht Server!
 
@@ -1236,17 +1099,11 @@ SPEAKER NOTES:
 
 ---
 
-# Woher kennt dein Laptop die Router-MAC?
+# Woher kennt Ihr Laptop die Router-MAC?
 
 **ARP** – Address Resolution Protocol
 
-```
+![w:900 center](./assets/demos/arp-lookup.png)
-Laptop (Broadcast):
-    "Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
-
-Router:
-    "Das bin ich! Meine MAC ist 11:22:33:44:55:66"
-```
 
 Das passiert automatisch. Die Info wird gecached.
 
@@ -1303,11 +1160,9 @@ SPEAKER NOTES:
 
 ---
 
-# Der erste Hop: Dein Router
+# Der erste Hop: Ihr Router
 
-```
+**Laptop** → [Frame] → **Router**
-Laptop → [Frame] → Router
-```
 
 Der Router empfängt:
 
@@ -1330,19 +1185,7 @@ SPEAKER NOTES:
 
 # Der Router verpackt NEU
 
-```
+![w:900 center](./assets/demos/ethernet-rehop.png)
-┌─────────────────────────────────────────────────┐
-│ Ethernet-Header (NEU!)                          │
-│ ┌─────────────────┬─────────────────┐           │
-│ │ Source MAC      │ Destination MAC │           │
-│ │ Router-MAC      │ Nächster-Router │           │
-│ └─────────────────┴─────────────────┘           │
-├─────────────────────────────────────────────────┤
-│ IP-Paket (UNVERÄNDERT)                          │
-│ Source: 141.62.xxx.xxx                          │
-│ Dest: 212.132.79.37                             │
-└─────────────────────────────────────────────────┘
-```
 
 **IP bleibt gleich. MAC ändert sich.**
 
@@ -1361,19 +1204,15 @@ SPEAKER NOTES:
 
 # Mehrere Hops
 
-```
+![bg right:35% fit](./assets/demos/hop-chain.png)
-Dein Laptop
-    ↓ [Frame an Router 1]
-Router HdM-Netz
-    ↓ [Frame an Router 2]
-Router BelWü
-    ↓ [Frame an Router 3]
-...
-    ↓ [Frame an Server]
-Webserver der HdM
-```
 
-Bei jedem Hop: Auspacken bis Layer 3, Routing, neu verpacken.
+Bei jedem Hop:
+
+1. Auspacken bis Layer 3 (IP)
+2. Routing-Entscheidung
+3. Neu verpacken mit nächster MAC
+
+IP bleibt gleich · MAC ändert sich jedes Mal.
 
 <!--
 SPEAKER NOTES:
@@ -1401,19 +1240,11 @@ SPEAKER NOTES:
 
 # Decapsulation am Server
 
-```
+![bg right:42% fit](./assets/demos/server-decap.png)
-Bits empfangen (Layer 1)
-    ↓
-Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
-    ↓
-IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
-    ↓
-TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
-    ↓
-HTTP lesen: "GET / HTTP/1.1" (Layer 7)
-```
 
-Der Webserver versteht: "Jemand will die Startseite."
+Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+
+Am Ende versteht der Webserver: "Jemand will die Startseite."
 
 <!--
 SPEAKER NOTES:
@@ -1442,7 +1273,7 @@ Content-Length: 45231
 ...
 ```
 
-~45 KB HTML müssen jetzt zu dir.
+~45 KB HTML müssen jetzt zu Ihnen.
 
 <!--
 SPEAKER NOTES:
@@ -1458,17 +1289,7 @@ SPEAKER NOTES:
 
 Der Server macht **dasselbe** – nur in die andere Richtung:
 
-```
+![bg right:40% fit](./assets/demos/encap-stack.png)
-HTTP-Response: "HTTP/1.1 200 OK..."
-    ↓
-TCP: Dest-Port: 52431 (dein Browser!)
-    ↓
-IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
-    ↓
-Ethernet: Dest-MAC: Router des Server-Netzes
-    ↓
-Bits
-```
 
 <!--
 SPEAKER NOTES:
@@ -1483,17 +1304,13 @@ SPEAKER NOTES:
 
 # Die Antwort reist zurück
 
-```
+![bg right:38% fit](./assets/demos/response-hops.png)
-Server
-    ↓
-Router → Router → Router → ...
-    ↓
-Router HdM
-    ↓
-Dein Laptop
-```
 
-Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
+Gleiches Spiel wie der Hinweg:
+
+- Hop für Hop durchs Internet
+- **IP bleibt gleich** (Start/Ziel)
+- **MAC ändert sich** bei jedem Router
 
 <!--
 SPEAKER NOTES:
@@ -1504,21 +1321,13 @@ SPEAKER NOTES:
 
 ---
 
-# Decapsulation bei dir
+# Decapsulation bei Ihnen
 
-```
+![bg right:42% fit](./assets/demos/decap-stack.png)
-Bits empfangen
+
-    ↓
+Rückweg = Encapsulation umgekehrt.
-Frame: MAC = meine MAC? → Auspacken
+
-    ↓
+Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
-IP: Ziel-IP = meine IP? → Auspacken
-    ↓
-TCP: Port 52431 = mein Browser → Auspacken
-    ↓
-HTTP: "HTTP/1.1 200 OK..."
-    ↓
-Browser rendert die Seite
-```
 
 <!--
 SPEAKER NOTES:
@@ -1543,10 +1352,6 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # TCP vs. UDP
 
 | | TCP | UDP |
@@ -1648,10 +1453,6 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # HTTP-Methoden
 
 | Methode | Bedeutung | Beispiel |
@@ -1713,10 +1514,6 @@ POST /users          → Neuen Benutzer erstellen
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # HTTP Status-Codes
 
 ```http
@@ -1773,10 +1570,6 @@ Die erste Ziffer kategorisiert die Antwort:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Zusammenfassung Teil 1
 
 **Der Ablauf:**
@@ -1815,7 +1608,7 @@ Wie Encapsulation funktioniert.
 
 # Netzwerk-Grundlagen – Vertiefung
 
-Die vier Kernkonzepte für Web-Entwickler:
+Die vier Kernkonzepte für Web-Entwickelnde:
 
 **1. DNS-Auflösung:**
 - Browser fragt DNS-Resolver (z.B. 8.8.8.8)
@@ -1889,6 +1682,8 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
 
 # Was ist CSS?
 
+![bg right:35%](./assets/demos/css-anatomie.png)
+
 **C**ascading **S**tyle **S**heets
 
 ```css
@@ -1984,6 +1779,8 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.
 
 # Selektoren: Element
 
+![bg right:35%](./assets/demos/css-selector-element.png)
+
 ```css
 /* Alle <p>-Elemente */
 p {
@@ -2012,6 +1809,8 @@ Komma bedeutet "oder" – h1 oder h2 oder h3.
 
 # Selektoren: Klasse
 
+![bg right:35%](./assets/demos/css-selector-class.png)
+
 ```html
 <p class="wichtig">Dieser Text ist wichtig.</p>
 <p>Dieser nicht.</p>
@@ -2040,6 +1839,8 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
 
 # Selektoren: ID
 
+![bg right:35%](./assets/demos/css-selector-id.png)
+
 ```html
 <nav id="hauptnavigation">...</nav>
 ```
@@ -2069,6 +1870,8 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un
 
 # Selektoren: Kombinationen
 
+![bg right:35%](./assets/demos/css-combinators.png)
+
 ```css
 /* Nachfahre (beliebig tief verschachtelt) */
 article p { line-height: 1.6; }
@@ -2099,12 +1902,10 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Spezifität: Welche Regel gewinnt?
 
+![bg right:35%](./assets/demos/css-specificity.png)
+
 | Selektor | Spezifität |
 |----------|------------|
 | Element (`p`) | 0,0,0,1 |
@@ -2163,22 +1964,18 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
 
 # Box-Modell
 
-```
+![bg right:42% fit](./assets/demos/box-model-diagram.png)
-┌─────────────────────────────────────┐
-│              margin                 │
-│   ┌─────────────────────────────┐   │
-│   │          border             │   │
-│   │   ┌─────────────────────┐   │   │
-│   │   │       padding       │   │   │
-│   │   │   ┌─────────────┐   │   │   │
-│   │   │   │   content   │   │   │   │
-│   │   │   └─────────────┘   │   │   │
-│   │   └─────────────────────┘   │   │
-│   └─────────────────────────────┘   │
-└─────────────────────────────────────┘
-```
 
-Jedes Element ist eine Box.
+Jedes HTML-Element ist eine rechteckige **Box**.
+
+**Schichten innen → außen:**
+
+- **content** – Inhalt (Text, Bild)
+- **padding** – Innenabstand
+- **border** – Rahmen
+- **margin** – Außenabstand
+
+<small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>
 
 <!--
 SPEAKER NOTES:
@@ -2200,6 +1997,8 @@ Margin: Außenabstand. Zwischen diesem Element und anderen.
 
 # Box-Modell: CSS
 
+![bg right:35%](./assets/demos/css-box-model.png)
+
 ```css
 .box {
     width: 200px;
@@ -2232,6 +2031,8 @@ Best Practice: Setzt das global für alle Elemente.
 
 # Farben
 
+![bg right:35%](./assets/demos/css-colors.png)
+
 ```css
 /* Keyword */
 color: red;
@@ -2300,6 +2101,8 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.
 
 # Pseudo-Klassen
 
+![bg right:35%](./assets/demos/css-pseudo-classes.png)
+
 ```css
 /* Hover – Maus drüber */
 a:hover { color: red; }
@@ -2335,6 +2138,8 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.
 
 # Pseudo-Elemente
 
+![bg right:35%](./assets/demos/css-pseudo-elements.png)
+
 ```css
 /* Vor dem Inhalt einfügen */
 .required::before {
@@ -2365,19 +2170,17 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
 
 # Responsive Design
 
+![bg right:35%](./assets/demos/css-responsive.png)
+
 ```css
 /* Mobile First: Basis-Styles */
 .container {
     padding: 1rem;
     background: white;
 }
-
 /* Ab 768px (Tablet): Anpassungen */
 @media (min-width: 768px) {
     .container {
@@ -2385,7 +2188,6 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
         background: red;
     }
 }
-
 /* Ab 1024px (Desktop): Weitere Anpassungen */
 @media (min-width: 1024px) {
     .container {

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

@@ -208,6 +208,8 @@ Fehler werden hier auch angezeigt
 
 # Variablen: Daten speichern
 
+![bg right:35%](./assets/demos/js-console.png)
+
 ```javascript
 // Modern (empfohlen)
 let age = 25;              // Kann geändert werden
@@ -260,6 +262,8 @@ Template Literals mit Backticks!
 
 # Arrays: Listen
 
+![bg right:35%](./assets/demos/js-arrays.png)
+
 ```javascript
 const colors = ["red", "green", "blue"];
 
@@ -284,6 +288,8 @@ Arrays sind veränderbar auch bei const
 
 # Objects: Strukturierte Daten
 
+![bg right:35%](./assets/demos/js-objects.png)
+
 ```javascript
 const person = {
     firstName: "Max",
@@ -342,7 +348,7 @@ true || false  // true (ODER)
 
 **In der Browser-Konsole:**
 
-1. Erstelle Variablen für dich:
+1. Erstellen Sie Variablen für sich:
    ```javascript
    const name = "Your Name";
    let age = 20;
@@ -413,6 +419,8 @@ Code-Block in geschweiften Klammern
 
 # Schleifen: Wiederholen
 
+![bg right:35%](./assets/demos/js-loops.png)
+
 ```javascript
 // for-Schleife
 for (let i = 0; i < 5; i++) {
@@ -491,15 +499,7 @@ Funktionale Programmierung, Original-Array bleibt unverändert
 - JavaScript kann diesen Baum **lesen und ändern**
 - Jedes HTML-Element = ein "Node"
 
-```
+![bg right:45% fit](./assets/demos/dom-tree.png)
-document
-└── html
-    ├── head
-    │   └── title
-    └── body
-        ├── h1
-        └── p
-```
 
 <!--
 DOM = Programmierschnittstelle für HTML
@@ -536,6 +536,8 @@ querySelectorAll = alle Treffer
 
 # Elemente manipulieren
 
+![bg right:35%](./assets/demos/js-manipulate.png)
+
 ```javascript
 const element = document.querySelector("#meinElement");
 
@@ -564,6 +566,8 @@ style = Inline-Styles (camelCase!)
 
 # Klassen manipulieren
 
+![bg right:35%](./assets/demos/js-classlist.png)
+
 ```javascript
 const element = document.querySelector(".box");
 
@@ -592,6 +596,8 @@ toggle schaltet hin und her
 
 # Elemente erstellen
 
+![bg right:35%](./assets/demos/js-create.png)
+
 ```javascript
 // Neues Element erstellen
 const neuerAbsatz = document.createElement("p");
@@ -660,6 +666,8 @@ Interaktive Webseiten durch Events
 
 # Event Listener
 
+![bg right:35%](./assets/demos/js-event-listener.png)
+
 ```javascript
 const button = document.querySelector("#meinButton");
 
@@ -737,6 +745,8 @@ target = auslösendes Element
 
 # Event.preventDefault()
 
+![bg right:35%](./assets/demos/js-preventdefault.png)
+
 ```javascript
 // Link ohne Navigation
 const link = document.querySelector("a");
@@ -763,6 +773,8 @@ Formular-Validierung ohne Reload
 
 # Beispiel: Toggle Dark Mode
 
+![bg right:35%](./assets/demos/js-darkmode.png)
+
 ```javascript
 const toggleButton = document.querySelector("#darkModeToggle");
 const body = document.body;
@@ -851,6 +863,8 @@ HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)
 
 # Beispiel: Todo-Liste
 
+![bg right:35%](./assets/demos/js-todo.png)
+
 ```javascript
 const form = document.querySelector("#todoForm");
 const input = document.querySelector("#todoInput");
@@ -893,6 +907,8 @@ Node.js für Backend
 
 # Fetch: Daten laden
 
+![bg right:35%](./assets/demos/js-fetch.png)
+
 ```javascript
 // Mit async/await (modern)
 async function loadData() {
@@ -914,6 +930,8 @@ APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
 
 # LocalStorage: Daten speichern
 
+![bg right:35%](./assets/demos/js-localstorage.png)
+
 ```javascript
 // Speichern
 localStorage.setItem("name", "Max");

slides/223015c/assets/demos/_frame-template.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: __TITLE__</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">__URL__</span>
+    </div>
+    <iframe src="__SRC__"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/a11y-error-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: a11y-error</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/email-form.html</span>
+    </div>
+    <iframe src="./a11y-error.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/a11y-error.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Fehlermeldung</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
+    label { display: block; margin-bottom: 4px; font-weight: 600; }
+    input {
+      font: inherit;
+      padding: 6px 10px;
+      width: 100%;
+      box-sizing: border-box;
+      border: 2px solid #d63384;
+      border-radius: 4px;
+    }
+    #email-error {
+      color: #d63384;
+      font-size: 0.9em;
+      margin-top: 6px;
+    }
+  </style>
+</head>
+<body>
+  <label for="email">E-Mail-Adresse</label>
+  <input id="email" type="email" aria-describedby="email-error" value="michael@">
+  <p id="email-error" role="alert">
+    Bitte geben Sie eine gültige E-Mail-Adresse ein.
+  </p>
+</body>
+</html>

slides/223015c/assets/demos/a11y-focus-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: a11y-focus</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/focus.html</span>
+    </div>
+    <iframe src="./a11y-focus.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/a11y-focus.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Fokus-Indikator</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.4rem; font-size: 1rem; }
+    button { font: inherit; padding: 10px 18px; margin: 8px 0; display: block; border: 1.5px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
+    button:focus-visible, button.is-focused {
+      outline: 3px solid #d63384;
+      outline-offset: 3px;
+      border-radius: 4px;
+    }
+  </style>
+</head>
+<body>
+  <p><strong>Tab-Taste drücken:</strong></p>
+  <button class="is-focused">Erster Button</button>
+  <button>Zweiter Button</button>
+  <button>Dritter Button</button>
+</body>
+</html>

slides/223015c/assets/demos/a11y-semantic-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: a11y-semantic</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/klick.html</span>
+    </div>
+    <iframe src="./a11y-semantic.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/a11y-semantic.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>div vs button</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
+    h3 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
+    .bad { color: #b91c1c; }
+    .good { color: #15803d; }
+    .button {
+      display: inline-block;
+      background: #e5e7eb;
+      border: 1px solid #9ca3af;
+      padding: 6px 14px;
+      cursor: pointer;
+      border-radius: 4px;
+    }
+    button { font: inherit; padding: 6px 14px; }
+  </style>
+</head>
+<body>
+  <h3 class="bad">Schlecht (div)</h3>
+  <div class="button" onclick="alert('!')">Klick mich</div>
+  <p><small>❌ Tab überspringt, kein Enter, kein Screenreader</small></p>
+
+  <h3 class="good">Gut (button)</h3>
+  <button type="button">Klick mich</button>
+  <p><small>✅ Tastatur + Screenreader eingebaut</small></p>
+</body>
+</html>

slides/223015c/assets/demos/arp-lookup.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>ARP</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 30px; display: inline-block; }
+    .row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
+    .actor {
+      background: #1a1a2e;
+      color: #fff;
+      padding: 10px 16px;
+      border-radius: 6px;
+      font-weight: 700;
+      min-width: 160px;
+      text-align: center;
+      font-size: 0.9rem;
+    }
+    .laptop { background: #1e40af; }
+    .router { background: #c2410c; }
+    .arrow-right, .arrow-left {
+      width: 0; height: 0;
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+    }
+    .arrow-right { border-left: 14px solid #d63384; }
+    .arrow-left { border-right: 14px solid #15803d; }
+    .bubble {
+      padding: 10px 14px;
+      border-radius: 8px;
+      font-size: 0.95rem;
+      max-width: 460px;
+    }
+    .ask { background: #fce7f3; border: 2px solid #d63384; color: #7c2d12; }
+    .reply { background: #dcfce7; border: 2px solid #15803d; color: #14532d; }
+    .meta {
+      font-size: 0.7rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      opacity: 0.7;
+      margin-bottom: 3px;
+    }
+  </style>
+</head>
+<body>
+  <div class="row">
+    <div class="actor laptop">Laptop</div>
+    <div class="arrow-right"></div>
+    <div class="bubble ask">
+      <div class="meta">Broadcast</div>
+      "Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
+    </div>
+  </div>
+  <div class="row">
+    <div class="bubble reply">
+      <div class="meta">Antwort</div>
+      "Das bin ich! Meine MAC ist 11:22:33:44:55:66"
+    </div>
+    <div class="arrow-left"></div>
+    <div class="actor router">Router</div>
+  </div>
+</body>
+</html>

slides/223015c/assets/demos/box-model-diagram.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Box-Modell Diagramm</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 40px; display: inline-block; box-sizing: border-box; }
+    .layer {
+      padding-top: 38px;
+      padding-bottom: 30px;
+      padding-left: 30px;
+      padding-right: 30px;
+      position: relative;
+      border-radius: 4px;
+    }
+    .layer::before {
+      position: absolute;
+      top: 8px; left: 14px;
+      font-size: 0.95rem;
+      font-weight: 700;
+      letter-spacing: 0.02em;
+    }
+    .margin { background: #fde68a; }
+    .margin::before { content: "margin"; color: #92400e; }
+    .border { background: #fca5a5; }
+    .border::before { content: "border"; color: #991b1b; }
+    .padding { background: #86efac; }
+    .padding::before { content: "padding"; color: #166534; }
+    .content {
+      background: #93c5fd;
+      width: 260px;
+      height: 110px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #1e3a8a;
+      font-weight: 700;
+      font-size: 1.2rem;
+      border-radius: 4px;
+    }
+  </style>
+</head>
+<body>
+  <div class="layer margin">
+    <div class="layer border">
+      <div class="layer padding">
+        <div class="content">content</div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>

slides/223015c/assets/demos/button-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: button</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/button.html</span>
+    </div>
+    <iframe src="./button.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/button.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Button</title>
+</head>
+<body>
+  <button>Add to favorites</button>
+</body>
+</html>

slides/223015c/assets/demos/byte-flow.html

@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte-Fluss: Bit → Hex → ASCII</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --byte-border: #94a3b8;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 22px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
+
+  .file {
+    width: 100%; box-sizing: border-box;
+    border: 2px solid var(--dark);
+    border-radius: 10px;
+    background: var(--bg-soft);
+    overflow: hidden;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
+  }
+  .file .head {
+    background: var(--dark); color: #fff; padding: 8px 14px;
+    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .file .head .name { font-family: ui-monospace, monospace; }
+  .file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
+  .file .body { padding: 12px 14px; }
+
+  .row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
+  .row-bytes:last-child { margin-bottom: 0; }
+
+  .byte-bin {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 4px 7px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 0.92rem;
+    font-weight: 700;
+    background: #fff;
+    letter-spacing: 0.04em;
+  }
+  .byte-hex {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 6px 0;
+    font-family: ui-monospace, monospace;
+    font-size: 1.1rem;
+    font-weight: 700;
+    background: #fff;
+    min-width: 88px;
+    text-align: center;
+  }
+  .byte-ascii {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 6px 0;
+    font-family: ui-monospace, monospace;
+    font-size: 1.2rem;
+    font-weight: 700;
+    background: #fff;
+    min-width: 88px;
+    text-align: center;
+  }
+  .byte-ascii.np { color: var(--muted); font-style: italic; }
+
+  .truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
+
+  .arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
+  .arrow {
+    width: 0; height: 0;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    border-top: 14px solid var(--hl);
+  }
+  .arrow-label {
+    font-size: 0.78rem; color: var(--hl); font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.05em;
+  }
+
+  .legend {
+    margin-top: 12px;
+    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
+    font-size: 0.85rem; color: var(--muted);
+  }
+  .legend strong { color: var(--dark); }
+  .legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
+  <div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
+
+  <div class="stage">
+
+    <!-- Stage 1: Bitstream -->
+    <div class="file">
+      <div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-stack">
+      <div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Stage 2: Hex -->
+    <div class="file">
+      <div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-stack">
+      <div class="arrow-label">je 1 Byte → 1 Zeichen</div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Stage 3: ASCII -->
+    <div class="file">
+      <div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="legend">
+      <span><code>␣</code> = Leerzeichen (0x20)</span>
+      <span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
+      <span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
+    </div>
+
+  </div>
+</body>
+</html>

slides/223015c/assets/demos/byte-nibble-hex.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte → Nibble → Hex</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+  }
+  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.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+
+  .level { display: flex; flex-direction: column; align-items: center; }
+  .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
+
+  /* Level 1: whole byte */
+  .byte {
+    display: flex;
+    gap: 4px;
+    padding: 8px 14px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--bg-soft);
+  }
+  .byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
+  .byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
+
+  /* Split arrows */
+  .split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
+  .split .arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+  }
+
+  /* Level 2: two nibbles */
+  .nibbles { display: flex; gap: 80px; }
+  .nibble {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    padding: 10px 14px;
+    border: 2px solid var(--hl);
+    border-radius: 8px;
+    background: #fff;
+  }
+  .nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
+  .nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
+  .nibble .meta { font-size: 0.78rem; color: var(--muted); }
+
+  .single-arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+    margin: 2px 0;
+  }
+
+  /* Level 3: hex digits */
+  .hex-digits { display: flex; gap: 80px; }
+  .hex-digit {
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    padding: 8px 22px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--dark);
+    color: var(--hl);
+  }
+  .hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
+  .hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
+
+  /* Merge down to byte */
+  .merge {
+    display: flex; justify-content: center; margin-top: 2px;
+  }
+  .merge-v {
+    display: grid;
+    grid-template-columns: 60px 60px;
+    justify-content: center;
+    align-items: center;
+  }
+  .merge-v .line {
+    height: 20px;
+    border-right: 2px solid var(--hl);
+  }
+  .merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
+  .bottom-bar { height: 2px; background: var(--hl); width: 120px; }
+
+  /* Final result */
+  .result {
+    margin-top: 14px;
+    padding: 14px 22px;
+    background: #fef3f8;
+    border-left: 4px solid var(--hl);
+    border-radius: 4px;
+    font-size: 1.05rem;
+    text-align: center;
+    max-width: 640px;
+  }
+  .result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
+  .result strong { color: var(--hl); }
+
+  .math {
+    margin-top: 10px;
+    font-size: 0.95rem;
+    color: var(--dark);
+    text-align: center;
+  }
+  .math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
+  <div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
+
+  <div class="stage">
+    <!-- Level 1 -->
+    <div class="level">
+      <div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
+      <div class="byte">
+        <span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
+        <span class="sep"></span>
+        <span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 2 -->
+    <div class="level">
+      <div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
+      <div class="nibbles">
+        <div class="nibble">
+          <div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
+          <div class="meta">= 4 (dez)</div>
+        </div>
+        <div class="nibble">
+          <div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
+          <div class="meta">= 13 (dez)</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 3 -->
+    <div class="level">
+      <div class="label">2 Hex-Ziffern · Symbole 0–F</div>
+      <div class="hex-digits">
+        <div class="hex-digit">
+          <div class="digit">4</div>
+          <div class="meta">Nibble → 1 Ziffer</div>
+        </div>
+        <div class="hex-digit">
+          <div class="digit">D</div>
+          <div class="meta">13 → D</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="result">
+      <code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
+    </div>
+
+    <div class="math">
+      <span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
+    </div>
+  </div>
+</body>
+</html>
+</content>
+</invoke>

slides/223015c/assets/demos/client-server-ports.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Client/Server Ports</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 30px; display: inline-block; }
+    .endpoint {
+      border: 2px solid #4a4a6a;
+      border-radius: 6px;
+      padding: 18px 24px;
+      margin-bottom: 24px;
+      min-width: 380px;
+      background: #f3f4f6;
+    }
+    .endpoint.client { background: #dbeafe; border-color: #1e40af; }
+    .endpoint.server { background: #fed7aa; border-color: #c2410c; }
+    .role {
+      font-weight: 700;
+      font-size: 1rem;
+      margin-bottom: 6px;
+    }
+    .client .role { color: #1e3a8a; }
+    .server .role { color: #7c2d12; }
+    .addr {
+      font-family: ui-monospace, monospace;
+      font-size: 1.4rem;
+      color: #0f172a;
+    }
+    .port {
+      background: #fde68a;
+      color: #7c2d12;
+      padding: 1px 8px;
+      border-radius: 4px;
+      font-weight: 700;
+    }
+    .label {
+      margin-top: 6px;
+      font-size: 0.85rem;
+      color: #4a4a6a;
+      font-style: italic;
+    }
+  </style>
+</head>
+<body>
+  <div class="endpoint client">
+    <div class="role">Client</div>
+    <div class="addr">141.62.xxx.xxx:<span class="port">52431</span></div>
+    <div class="label">↳ zufälliger Port vom OS</div>
+  </div>
+  <div class="endpoint server">
+    <div class="role">Server</div>
+    <div class="addr">212.132.79.37:<span class="port">443</span></div>
+    <div class="label">↳ HTTPS-Standardport</div>
+  </div>
+</body>
+</html>

slides/223015c/assets/demos/contrast-levels-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: Kontrast</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/contrast.html</span>
+    </div>
+    <iframe src="./contrast-levels.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/contrast-levels.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Kontrast-Stufen</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.6rem; margin: 0; }
+    .row {
+      background: #fff;
+      padding: 22px 20px;
+      margin-bottom: 14px;
+      border-radius: 6px;
+      border: 1px solid #e5e7eb;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+    }
+    .sample {
+      font-size: 1.5rem;
+      font-weight: 600;
+      flex: 1;
+    }
+    .meta {
+      text-align: right;
+      font-size: 0.85rem;
+      white-space: nowrap;
+    }
+    .ratio {
+      font-family: ui-monospace, monospace;
+      font-weight: 700;
+      font-size: 0.95rem;
+      color: #1a1a2e;
+    }
+    .badge {
+      display: inline-block;
+      padding: 2px 8px;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-top: 4px;
+    }
+    .fail { background: #fee2e2; color: #991b1b; }
+    .aa-large { background: #fed7aa; color: #7c2d12; }
+    .aa { background: #dcfce7; color: #166534; }
+    .aaa { background: #bbf7d0; color: #14532d; }
+    .hint {
+      margin-top: 14px;
+      font-size: 0.78rem;
+      color: #6b7280;
+      font-style: italic;
+      text-align: right;
+    }
+    .hint a { color: #d63384; }
+  </style>
+</head>
+<body>
+  <div class="row" style="background: #fff;">
+    <div class="sample" style="color: #aaaaaa;">Barrierefrei lesen</div>
+    <div class="meta">
+      <div class="ratio">2.3:1</div>
+      <span class="badge fail">✗ Fail</span>
+    </div>
+  </div>
+  <div class="row" style="background: #fff;">
+    <div class="sample" style="color: #949494;">Barrierefrei lesen</div>
+    <div class="meta">
+      <div class="ratio">3:1</div>
+      <span class="badge aa-large">AA Large</span>
+    </div>
+  </div>
+  <div class="row" style="background: #fff;">
+    <div class="sample" style="color: #767676;">Barrierefrei lesen</div>
+    <div class="meta">
+      <div class="ratio">4.5:1</div>
+      <span class="badge aa">✓ AA</span>
+    </div>
+  </div>
+  <div class="row" style="background: #fff;">
+    <div class="sample" style="color: #595959;">Barrierefrei lesen</div>
+    <div class="meta">
+      <div class="ratio">7:1</div>
+      <span class="badge aaa">✓ AAA</span>
+    </div>
+  </div>
+  <div class="row" style="background: #fff;">
+    <div class="sample" style="color: #1a1a1a;">Barrierefrei lesen</div>
+    <div class="meta">
+      <div class="ratio">16:1</div>
+      <span class="badge aaa">✓ AAA+</span>
+    </div>
+  </div>
+  <div class="hint">Check: webaim.org/resources/contrastchecker</div>
+</body>
+</html>

slides/223015c/assets/demos/css-anatomie-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-anatomie</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/anatomie.html</span>
+    </div>
+    <iframe src="./css-anatomie.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/css-anatomie.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>CSS Anatomie</title>
+  <style>
+    body { padding: 1.2rem; font-family: system-ui, sans-serif; }
+    p { color: blue; font-size: 16px; }
+  </style>
+</head>
+<body>
+  <p>Dieser Absatz ist blau und 16 Pixel groß.</p>
+  <p>Alle p-Elemente werden gleich gestylt.</p>
+</body>
+</html>

slides/223015c/assets/demos/css-box-model-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-box-model</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/box-model.html</span>
+    </div>
+    <iframe src="./css-box-model.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/css-box-model.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Box-Modell</title>
+  <style>
+    body { padding: 1.2rem; font-family: system-ui, sans-serif; background: #fff; }
+    .box { display: inline-block; }
+    .layer {
+      padding-top: 22px;
+      padding-bottom: 18px;
+      padding-left: 18px;
+      padding-right: 18px;
+      position: relative;
+    }
+    .layer::before {
+      position: absolute;
+      top: 4px; left: 8px;
+      font-size: 0.75em;
+      font-weight: 600;
+    }
+    .margin { background: #fde68a; }
+    .margin::before { content: "margin"; color: #92400e; }
+    .border { background: #fca5a5; }
+    .border::before { content: "border"; color: #991b1b; }
+    .padding { background: #86efac; }
+    .padding::before { content: "padding"; color: #166534; }
+    .content {
+      background: #93c5fd;
+      width: 140px;
+      height: 56px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #1e3a8a;
+      font-weight: 600;
+    }
+    pre { background: #f3f4f6; padding: 10px; border-radius: 4px; font-size: 0.85em; margin-top: 1rem; font-family: ui-monospace, monospace; }
+  </style>
+</head>
+<body>
+  <div class="box">
+    <div class="layer margin">
+      <div class="layer border">
+        <div class="layer padding">
+          <div class="content">content</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <pre>.box {
+  width: 140px;
+  padding: 18px;
+  border: 18px solid;
+  margin: 18px;
+}</pre>
+</body>
+</html>

slides/223015c/assets/demos/css-colors-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-colors</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/colors.html</span>
+    </div>
+    <iframe src="./css-colors.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/css-colors.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Farben</title>
+  <style>
+    body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
+    .swatch { display: flex; align-items: center; margin-bottom: 8px; }
+    .chip { width: 40px; height: 40px; border-radius: 4px; margin-right: 12px; border: 1px solid #e5e7eb; }
+    code { background: #f3f4f6; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.85em; }
+  </style>
+</head>
+<body>
+  <div class="swatch"><div class="chip" style="background: red;"></div><code>color: red;</code></div>
+  <div class="swatch"><div class="chip" style="background: rebeccapurple;"></div><code>color: rebeccapurple;</code></div>
+  <div class="swatch"><div class="chip" style="background: #FF0000;"></div><code>#FF0000</code></div>
+  <div class="swatch"><div class="chip" style="background: rgb(255, 0, 0);"></div><code>rgb(255, 0, 0)</code></div>
+  <div class="swatch"><div class="chip" style="background: rgba(255, 0, 0, 0.5);"></div><code>rgba(255, 0, 0, 0.5)</code></div>
+  <div class="swatch"><div class="chip" style="background: hsl(0, 100%, 50%);"></div><code>hsl(0, 100%, 50%)</code></div>
+</body>
+</html>

slides/223015c/assets/demos/css-combinators-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-combinators</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/combinators.html</span>
+    </div>
+    <iframe src="./css-combinators.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/css-combinators.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Kombinatoren</title>
+  <style>
+    body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
+    article p { line-height: 1.6; background: #fef3c7; padding: 4px; }
+    nav > a { text-decoration: none; color: #d63384; margin-right: 10px; font-weight: 600; }
+    h2 + p { font-size: 1.2em; color: #065f46; }
+    p.wichtig { color: red; }
+  </style>
+</head>
+<body>
+  <nav>
+    <a href="#">Link</a><a href="#">Link</a>
+  </nav>
+  <article>
+    <h2>Artikel-Überschrift</h2>
+    <p>Direkt nach h2 (größer, grün).</p>
+    <p>Normaler Absatz im article (gelb).</p>
+    <p class="wichtig">Wichtig (rot).</p>
+  </article>
+</body>
+</html>

slides/223015c/assets/demos/css-pseudo-classes-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-pseudo-classes</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/pseudo-classes.html</span>
+    </div>
+    <iframe src="./css-pseudo-classes.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/css-pseudo-classes.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Pseudo-Klassen</title>
+  <style>
+    body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
+    a { color: #2563eb; }
+    a:hover, a.is-hovered { color: red; text-decoration: underline; }
+    a:visited, a.is-visited { color: purple; }
+    input:focus, input.is-focused { border-color: blue; outline: 2px solid blue; }
+    input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; }
+    ul { list-style: none; padding: 0; }
+    li { padding: 6px 10px; }
+    li:first-child, li.is-first { font-weight: bold; }
+    li:nth-child(odd), li.is-odd { background: #eee; }
+    h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
+  </style>
+</head>
+<body>
+  <h3>:hover / :visited</h3>
+  <a href="#" class="is-hovered">Link mit Hover</a> &middot;
+  <a href="#" class="is-visited">Besuchter Link</a>
+
+  <h3>:focus</h3>
+  <input class="is-focused" value="fokussiert">
+
+  <h3>:first-child, :nth-child(odd)</h3>
+  <ul>
+    <li class="is-first is-odd">Erster (bold, zebra)</li>
+    <li>Zweiter</li>
+    <li class="is-odd">Dritter (zebra)</li>
+    <li>Vierter</li>
+    <li class="is-odd">Fünfter (zebra)</li>
+  </ul>
+</body>
+</html>

slides/223015c/assets/demos/css-pseudo-elements-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-pseudo-elements</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/pseudo-elements.html</span>
+    </div>
+    <iframe src="./css-pseudo-elements.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/css-pseudo-elements.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Pseudo-Elemente</title>
+  <style>
+    body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
+    .required::before {
+      content: "* ";
+      color: red;
+    }
+    p.drop { line-height: 1.5; }
+    p.drop::first-letter {
+      font-size: 3em;
+      font-weight: bold;
+      color: #d63384;
+      float: left;
+      line-height: 0.9;
+      padding-right: 6px;
+      padding-top: 2px;
+    }
+    label { display: block; margin-top: 10px; }
+    input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }
+    h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
+  </style>
+</head>
+<body>
+  <h3>::before (Pflichtfeld-Sternchen)</h3>
+  <label class="required">E-Mail-Adresse</label>
+  <input type="email">
+
+  <h3>::first-letter (Initial-Buchstabe)</h3>
+  <p class="drop">Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.</p>
+</body>
+</html>

slides/223015c/assets/demos/css-responsive-container.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Responsive Container</title>
+  <style>
+    body { padding: 0; margin: 0; font-family: system-ui, sans-serif; background: #fff; }
+    .container {
+      padding: 1rem;
+      background: white;
+      color: #111;
+      text-align: left;
+      font-weight: 600;
+      border: 1px solid #d1d5db;
+    }
+    .container::before { content: "< 768px — weiß, padding 1rem"; }
+    @media (min-width: 768px) {
+      .container { padding: 2rem; background: red; color: white; border: none; }
+      .container::before { content: "≥ 768px — rot, padding 2rem"; }
+    }
+    @media (min-width: 1024px) {
+      .container { background: green; }
+      .container::before { content: "≥ 1024px — grün"; }
+    }
+  </style>
+</head>
+<body>
+  <div class="container"></div>
+</body>
+</html>

slides/223015c/assets/demos/css-responsive-frame.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-responsive</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #0f0f23;
+    --chrome: #1a1a2e;
+    --muted: #4a4a6a;
+  }
+  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
+  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
+  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
+  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
+  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
+  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
+  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
+</style>
+</head>
+<body>
+<div class="browser">
+  <div class="window">
+    <div class="chrome">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="url">file:///beispiel/responsive.html</span>
+    </div>
+    <iframe src="./css-responsive.html"></iframe>
+  </div>
+</div>
+</body>
+</html>

slides/223015c/assets/demos/css-responsive.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Responsive Design – 3 Viewports</title>
+  <style>
+    html, body { margin: 0; padding: 0; font-family: system-ui, sans-serif; background: #fff; }
+    body { padding: 1rem; }
+    .viewport {
+      margin-bottom: 12px;
+      border: 1px solid #9ca3af;
+      border-radius: 4px;
+      overflow: hidden;
+    }
+    .bar {
+      background: #e5e7eb;
+      padding: 4px 10px;
+      font-size: 11px;
+      color: #374151;
+      font-family: ui-monospace, monospace;
+      border-bottom: 1px solid #9ca3af;
+    }
+    iframe { display: block; width: 100%; border: 0; }
+    .vp-mobile iframe { width: 360px; }
+    .vp-tablet iframe { width: 800px; }
+    .vp-desktop iframe { width: 1100px; }
+    .vp-mobile { width: 362px; }
+    .scroll { overflow: hidden; }
+  </style>
+</head>
+<body>
+  <div class="viewport vp-mobile">
+    <div class="bar">Mobile @ 360px</div>
+    <div class="scroll"><iframe src="./css-responsive-container.html" height="80"></iframe></div>
+  </div>
+  <div class="viewport vp-tablet">
+    <div class="bar">Tablet @ 800px</div>
+    <div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
+  </div>
+  <div class="viewport vp-desktop">
+    <div class="bar">Desktop @ 1100px</div>
+    <div class="scroll" style="overflow-x: auto;"><iframe src="./css-responsive-container.html" height="100"></iframe></div>
+  </div>
+</body>
+</html>