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

@@ -12,6 +12,7 @@ This project builds presentation decks for Marp, supporting multiple courses.
 - Agent NEVER runs commands outside this folder
 - Agent NEVER runs build/deploy commands without explicit user request
 - Agent NEVER runs deploy commands (make deploy, scp, etc.) without explicit user permission
+- Agent NEVER runs `git checkout --` or `git restore` on files with uncommitted work. To undo specific changes, use targeted Edit operations instead.
 
 ## Critical File Protection
 
@@ -34,8 +35,9 @@ build/                  # Generated output (gitignored)
 ## Build Commands
 
 ```bash
-make dev-b          # Dev server 223015b (port 1311)
-make dev-c          # Dev server 223015c (port 1312)
+make dev            # Marp live server all courses (port 1312, HMR)
+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
@@ -48,10 +50,7 @@ make deploy         # Deploy all (ASK FIRST!)
 ## Nix Flake Commands
 
 ```bash
-nix develop                           # Dev shell with all tools
-nix run .#qr -- "https://example.com" # Generate QR code
-nix run .#qr-slides -- 223015b        # QR for course
-nix run .#optimize-img -- <path>      # Optimize images
+nix develop                           # Dev shell with all tools (node 22, npm, make)
 ```
 
 ## Code Style Guidelines

Makefile

@@ -1,7 +1,7 @@
 # HdM Slides - Unified Makefile
 # Supports multiple courses: 223015b (Dateiformate) and 223015c (Internettechnik)
 
-.PHONY: help dev dev-b dev-c build build-b build-c pdf html klausur clean install deploy qr optimize-images klausurfragen build-klausurfragen deploy-klausurfragen
+.PHONY: help dev dev-b dev-c build build-b build-c pdf html klausur clean install deploy qr optimize-images
 
 # Course configuration
 COURSES = 223015b 223015c
@@ -9,11 +9,11 @@ SLIDES_DIR = slides
 
 # Course-specific settings
 223015b_NAME = Dateiformate, Schnittstellen, Speichermedien
-223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen klausurfolien
+223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen klausurfolien klausurfragen
 223015b_DEPLOY_PATH = /home/tengo/html/hdm/223015b
 
 223015c_NAME = Internettechnologien
-223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausurfolien
+223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausurfolien klausurfragen
 223015c_DEPLOY_PATH = /home/tengo/html/hdm/223015c
 
 DEPLOY_HOST = tengo@tuttle.uberspace.de
@@ -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
-	@sleep 0.5
+	@-fuser -k 1312/tcp 2>/dev/null || true
+	@-fuser -k 1313/tcp 2>/dev/null || true
+	@-fuser -k 1314/tcp 2>/dev/null || true
 
 # Build functions
 define build_course
@@ -85,18 +94,7 @@ build-b: build/.exists
 build-c: build/.exists
 	$(call build_course,223015c)
 
-build-klausurfragen: build/.exists
-	@echo "Building klausurfragen..."
-	@mkdir -p build
-	@if [ -f "$(SLIDES_DIR)/klausurfragen.md" ]; then \
-		echo "  Building klausurfragen.md..."; \
-		npx @marp-team/marp-cli "$(SLIDES_DIR)/klausurfragen.md" -o build/klausurfragen.html; \
-		npx @marp-team/marp-cli "$(SLIDES_DIR)/klausurfragen.md" --pdf --allow-local-files -o build/klausurfragen.pdf; \
-	else \
-		echo "  Skipping: $(SLIDES_DIR)/klausurfragen.md not found"; \
-	fi
-
-build: build-b build-c build-klausurfragen
+build: build-b build-c
 	@echo "All courses built!"
 
 # HTML only builds
@@ -210,20 +208,13 @@ deploy-b: build-b
 deploy-c: build-c
 	$(call deploy_course,223015c)
 
-# Deploy klausurfragen (root-level page)
-deploy-klausurfragen: build-klausurfragen
-	@echo "Deploying klausurfragen..."
-	@scp build/klausurfragen.html $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ 2>/dev/null || true
-	@scp build/klausurfragen.pdf $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ 2>/dev/null || true
-	@echo "klausurfragen deployed!"
-
 deploy-index: build-index
 	@echo "Deploying root index..."
 	scp build/index.html $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/
 	scp build/qr-root.svg $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ 2>/dev/null || true
 	@echo "Root index deployed!"
 
-deploy: build-index deploy-b deploy-c deploy-klausurfragen deploy-index
+deploy: build-index deploy-b deploy-c deploy-index
 	@echo "All courses deployed!"
 
 # Clean

flake.nix

@@ -1,5 +1,5 @@
 {
-  description = "HdM Slides - Marp presentation builder with tools";
+  description = "HdM Slides - Marp presentation builder";
 
   inputs = {
     nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
@@ -9,116 +9,19 @@
   outputs = { self, nixpkgs, flake-utils }:
     flake-utils.lib.eachDefaultSystem (system:
       let
-        pkgs = import nixpkgs { inherit system; config.allowUnfree = true; };
-
-
-        # QR code generator script
-        qr-gen = pkgs.writeShellScriptBin "qr" ''
-          if [ -z "$1" ]; then
-            echo "Usage: qr <url> [output.png]"
-            echo ""
-            echo "Examples:"
-            echo "  qr https://example.com"
-            echo "  qr https://example.com my-qr.png"
-            echo "  qr 'https://librete.ch/hdm/223015b/' slides-qr.png"
-            exit 1
-          fi
-
-          URL="$1"
-          OUTPUT="''${2:-qr-code.png}"
-
-          ${pkgs.qrencode}/bin/qrencode -o "$OUTPUT" -s 10 -m 2 "$URL"
-          echo "Generated: $OUTPUT"
-        '';
-
-        # QR code for course slides
-        qr-slides = pkgs.writeShellScriptBin "qr-slides" ''
-          COURSE="''${1:-223015b}"
-          OUTPUT="''${2:-build/$COURSE/qr-$COURSE.png}"
-
-          mkdir -p "$(dirname "$OUTPUT")"
-          ${pkgs.qrencode}/bin/qrencode -o "$OUTPUT" -s 10 -m 2 "https://librete.ch/hdm/$COURSE/"
-          echo "Generated QR for $COURSE: $OUTPUT"
-        '';
-
-        # Image optimizer script
-        optimize-img = pkgs.writeShellScriptBin "optimize-img" ''
-          if [ -z "$1" ]; then
-            echo "Usage: optimize-img <image-or-directory> [max-width]"
-            echo ""
-            echo "Resizes images to max width (default: 1920px)"
-            exit 1
-          fi
-
-          TARGET="$1"
-          MAX_WIDTH="''${2:-1920}"
-
-          if [ -d "$TARGET" ]; then
-            for img in "$TARGET"/*.{png,jpg,jpeg,webp} 2>/dev/null; do
-              [ -f "$img" ] || continue
-              echo "Optimizing: $(basename "$img")"
-              ${pkgs.imagemagick}/bin/magick "$img" -resize "''${MAX_WIDTH}x>" -quality 85 "$img"
-            done
-          elif [ -f "$TARGET" ]; then
-            echo "Optimizing: $TARGET"
-            ${pkgs.imagemagick}/bin/magick "$TARGET" -resize "''${MAX_WIDTH}x>" -quality 85 "$TARGET"
-          else
-            echo "Error: $TARGET not found"
-            exit 1
-          fi
-          echo "Done!"
-        '';
-
+        pkgs = import nixpkgs { inherit system; };
       in {
-        # Development shell with all tools
         devShells.default = pkgs.mkShell {
           buildInputs = with pkgs; [
-            nodejs_20
+            nodejs_22
             nodePackages.npm
-            qrencode
-            imagemagick
             gnumake
-            claude-code
           ];
 
           shellHook = ''
-            echo "HdM Slides Development Environment"
-            echo ""
-            echo "Available commands:"
-            echo "  make dev-b     - Start 223015b dev server (port 1312)"
-            echo "  make dev-c     - Start 223015c dev server (port 1313)"
-            echo "  make build     - Build all courses"
-            echo "  qr <url>       - Generate QR code"
-            echo "  qr-slides 223015b - Generate QR for course"
-            echo "  optimize-img <dir> - Optimize images"
-            echo ""
+            echo "HdM Slides - run 'make' for available commands"
           '';
         };
-
-        # Standalone apps
-        packages = {
-          qr = qr-gen;
-          qr-slides = qr-slides;
-          optimize-img = optimize-img;
-          default = qr-gen;
-        };
-
-        # Direct runnable apps
-        apps = {
-          qr = {
-            type = "app";
-            program = "${qr-gen}/bin/qr";
-          };
-          qr-slides = {
-            type = "app";
-            program = "${qr-slides}/bin/qr-slides";
-          };
-          optimize-img = {
-            type = "app";
-            program = "${optimize-img}/bin/optimize-img";
-          };
-          default = self.apps.${system}.qr;
-        };
       }
     );
 }

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
-# Starts single Marp server for all courses
+# Development server for HdM slides
+# 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
-cleanup() {
-    echo -e "\n${RED}Shutting down dev server...${NC}"
-    pkill -f "marp-cli.*--server" 2>/dev/null || true
-    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
+# Kill existing process on our port only
+kill_port() {
+    fuser -k "$DEV_PORT/tcp" 2>/dev/null || true
+    sleep 0.5
 }
 
 # 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}"
-echo ""
-echo -e "  Server:   ${BLUE}http://localhost:$DEV_PORT${NC}"
-echo -e "  Slides:   ${BLUE}$SLIDES_DIR/${NC}"
-echo ""
-echo -e "Available courses:"
-echo -e "  223015b: ${BLUE}http://localhost:$DEV_PORT/223015b/${NC}"
-echo -e "  223015c: ${BLUE}http://localhost:$DEV_PORT/223015c/${NC}"
-echo ""
-echo -e "Press ${RED}Ctrl+C${NC} to stop the server"
+if [ -n "$COURSE" ]; then
+    SERVE_DIR="$SLIDES_DIR/$COURSE"
+    echo -e "${GREEN}Marp dev server${NC} · ${BLUE}$COURSE${NC}"
+else
+    SERVE_DIR="$SLIDES_DIR"
+    echo -e "${GREEN}Marp dev server${NC} · ${BLUE}all courses${NC}"
+fi
+
+echo -e "  ${BLUE}http://localhost:$DEV_PORT${NC}"
+echo -e "  ${BLUE}$SERVE_DIR/${NC}"
 echo ""
 
-# Start single Marp server for all slides
-PORT=$DEV_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/"
-
-# Wait for process to exit
-wait
+PORT=$DEV_PORT exec npx @marp-team/marp-cli -c marp.config.js --server "$SERVE_DIR/"

scripts/generate-index.sh

@@ -230,7 +230,7 @@ cat > "$BUILD_DIR/index.html" << HEADER
     <h1>HdM Vorlesungen</h1>
     <h2 class="course-heading">$TITLE</h2>
     <p class="subtitle">$SUBTITLE</p>
-    <p class="meta">HdM Stuttgart · Wintersemester 2025/26 · Michael Czechowski</p>
+    <p class="meta">HdM Stuttgart · Sommersemester 2026 · Michael Czechowski</p>
   </header>
   <div class="termine">
 HEADER
@@ -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;">
-      <a href="klausurfolien.html" class="kapitel-link">
+    <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
+      <div class="kapitel-link">
         <div class="kapitel-label">Prüfung</div>
         <div class="kapitel-title">Klausurrelevante Folien</div>
-      </a>
-      <a href="klausurfolien.html" class="btn btn-slides">Folien</a>
-      $pdf_link
+      </div>
+      <span class="btn btn-slides btn-disabled">Folien</span>
+      $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;">
-      <a href="klausurfragen.html" class="kapitel-link">
+    <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
+      <div class="kapitel-link">
         <div class="kapitel-label">Prüfung</div>
         <div class="kapitel-title">Klausurfragen</div>
-      </a>
-      $slides_link
-      $pdf_link
+      </div>
+      $slides_disabled
+      $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

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   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);
 }
@@ -82,173 +84,109 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
 ---
 
+<!-- _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
-  - Wirtschafts-Informatik (Leibniz-FH) -> B.Sc.
+  - Philosophie (Uni Stuttgart)
+  - 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
-Praxisbezug betonen
-Fragen jederzeit willkommen
+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
+
+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?
-2) Wer kennte die 3-2-1 Regel?
-3) Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
-4) Wer hat schon mal mit APIs gearbeitet?
-5) Wer weiß, was UTF-8 bedeutet?
-6) Wer hat schon mal mit einem CLI gearbeitet?
-6) **Wer hat schon mal etwas mit HTML oder CSS gemacht?** (Hex-Farben wie `#FF0000`?)
+* Wer kennt den Unterschied zwischen analog und digital?
+* Wer hat schon mal eine Datei von einem Format in ein anderes konvertiert?
+* Wer hat schon mal Metadaten aus einem Foto entfernt?
+* Wer hat schon mal ein Backup verloren?
+* Wer hat schon mal ein Backup wiederhergestellt?
 
 <!--
 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 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
-| 2 | 09.01.2026 | Bild- & Video-Kompression |
-| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
-| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
-| 5 | TBA | Vertiefung & offene Fragen |
+* 1. **Grundlagen**, Text & Audio (Bits, Bytes, Zeichenkodierung, MP3)
+* 2. Bild- & Video-**Kompression** (JPEG, PNG, H.264/H.265)
+* 3. **Speichermedien** & **Schnittstellen** (HDD, SSD, USB, Thunderbolt)
+* 4. **Distribution** und Verteilung (Streaming, REST, Cloud)
+* 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)
-* Schriftliche Klausur
+* 90 min insg. (Technik 1)
+* Schriftliche Klausur (digital)
 * Teils offene Fragen
-* Vermutlich digital
-* Kein Coding!
-* **Prüfungsrelevant:** Alles in den Folien/im Skript
-
-<!--
-Details können sich noch ändern
-Keine Programmieraufgaben
-Verständnisfragen, keine Auswendiglernerei
--->
-
+* Kein Coding/Programmieren
+* **Prüfungsrelevante Folien:**
+  - Gestreift oder Vollton (PDF) markiert

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

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   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);
 }
@@ -68,6 +70,26 @@ section.aufgabe {
 section.aufgabe footer {
   display: none;
 }
+section.erklaerung {
+  font-size: 1.1rem;
+}
+section.erklaerung h1 {
+  font-size: 1.5rem;
+  color: #1e5f8a;
+  margin-bottom: 0.3rem;
+}
+section.erklaerung ul,
+section.erklaerung ol {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung p {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung table {
+  font-size: 0.9rem;
+}
 </style>
 
 <!-- _class: invert -->
@@ -220,6 +242,26 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Rastergrafik – Vertiefung
+
+Ein Pixel ist die kleinste adressierbare Einheit. Bei 24-Bit-Farbtiefe speichert jeder Pixel drei 8-Bit-Werte (0–255) für Rot, Grün und Blau. Diese additive Farbmischung erzeugt 256³ = 16,7 Millionen mögliche Farbtöne.
+
+**Speicherberechnung:** `Breite × Höhe × Bytes pro Pixel`
+
+| Auflösung | Farbtiefe | Berechnung | Größe |
+|-----------|-----------|------------|-------|
+| 1920×1080 | 24 Bit (3 B) | 2.073.600 × 3 | 6,2 MB |
+| 4K (3840×2160) | 24 Bit | 8.294.400 × 3 | 24,9 MB |
+| 4K | 32 Bit (4 B) | 8.294.400 × 4 | 33,2 MB |
+
+Der Alpha-Kanal (32 Bit) speichert Transparenz als Wert von 0 (unsichtbar) bis 255 (vollständig sichtbar). PNG nutzt dies für weiche Kanten; JPEG unterstützt keinen Alpha-Kanal.
+
+---
+
 # Das Problem der Skalierung
 
 **Vergrößern:**
@@ -274,6 +316,30 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Vektorgrafik – Vertiefung
+
+Vektorgrafiken speichern keine Pixel, sondern mathematische Beschreibungen: Koordinaten, Kurvenparameter (Bézier-Kontrollpunkte), Füllfarben, Strichstärken. Der Renderer berechnet die Pixel erst bei der Ausgabe – daher beliebig skalierbar.
+
+**Bézier-Kurven** (Pierre Bézier, 1962, für Renault-Karosserien entwickelt):
+- Definiert durch Ankerpunkte und Kontrollpunkte
+- Kubische Bézier: 2 Anker + 2 Kontrollpunkte
+- Mathematisch exakt reproduzierbar
+
+| Aspekt | Raster | Vektor |
+|--------|--------|--------|
+| Skalierung 10× | Pixel sichtbar | Perfekt scharf |
+| Foto-Realismus | Gut geeignet | Unpraktikabel |
+| Dateigröße Logo | Wächst mit Auflösung | Konstant (~5 KB) |
+| Editierbarkeit | Destruktiv | Nicht-destruktiv |
+
+**Rasterisierung:** GPU wandelt Vektordaten in Pixel um. Geschieht bei jeder Darstellung neu – deshalb ist ein 4K-Monitor schärfer als ein 1080p-Monitor bei gleichem SVG.
+
+---
+
 # Raster- und Vektorgrafiken
 
 | | Raster | Vektor |
@@ -338,6 +404,28 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Psychovisuelle Wahrnehmung – Vertiefung
+
+Die Netzhaut enthält ~120 Mio. Stäbchen (Helligkeitswahrnehmung) aber nur ~6 Mio. Zapfen (Farbwahrnehmung). Dieses 20:1-Verhältnis erklärt, warum JPEG Farbinformationen stärker reduzieren kann als Helligkeitsinformationen.
+
+**Räumliche Frequenz** beschreibt, wie schnell sich die Helligkeit über eine Bildfläche ändert:
+- **Niedrig:** Himmel, Wand – große einheitliche Flächen
+- **Hoch:** Haare, Texturen, Schrift – schnelle Wechsel
+
+Das Auge ist ein Tiefpassfilter: Hohe Frequenzen (feine Details) werden schwächer wahrgenommen. JPEG verwirft daher zuerst die hohen Frequenzen – der Qualitätsverlust bleibt meist unsichtbar.
+
+| Biologisches Limit | Ausnutzung in JPEG |
+|-------------------|-------------------|
+| Farbauflösung ~20× geringer | Chroma Subsampling (4:2:0) |
+| Hohe Frequenzen unscharf | DCT + Quantisierung |
+| Kontrast-Maskierung | Artefakte in Texturen versteckt |
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
@@ -442,6 +530,34 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Farbraumkonversion – Vertiefung
+
+RGB→YCbCr nutzt die Biologie des menschlichen Auges: 120 Mio. Stäbchen (Helligkeit) vs. nur 6 Mio. Zapfen (Farbe) – ein 20:1-Verhältnis. Die Transformation erfolgt über eine lineare Matrix:
+
+```
+Y  =  0.299·R + 0.587·G + 0.114·B
+Cb = −0.169·R − 0.331·G + 0.500·B + 128
+Cr =  0.500·R − 0.419·G − 0.081·B + 128
+```
+
+Die Gewichtung (G dominiert mit 59%) entspricht der spektralen Empfindlichkeit des Auges bei Tageslicht. Y enthält alle Schärfeinformation; Cb/Cr können reduziert werden.
+
+**Chroma Subsampling – Notation J:a:b** (bezogen auf 4×2 Pixel):
+
+| Schema | Farbdaten | Einsatz |
+|--------|-----------|---------|
+| 4:4:4 | 100% | Postproduktion, Grafik |
+| 4:2:2 | 50% | Broadcast, Pro-Video |
+| 4:2:0 | 25% | JPEG, H.264, Streaming |
+
+Bei 4:2:0 teilen sich 4 Pixel einen Farbwert, behalten aber individuelle Helligkeit → 50% Dateneinsparung bei kaum sichtbarem Unterschied.
+
+---
+
 # JPEG Schritt 2: Chroma Subsampling
 
 **Notation `J:a:b`** (bezogen auf 4×2 Pixel-Block):
@@ -623,12 +739,36 @@ KLAUSURRELEVANT:
 - Präfix-frei: Kein Code ist Anfang eines anderen
 - Häufigstes Zeichen = kürzester Code
 - Auch in ZIP, PNG, MP3 verwendet
+-->
 
 ---
 
--->
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
+# Huffman-Coding – Vertiefung
 
+David Huffman entwickelte 1952 als Student am MIT einen optimalen Algorithmus für präfixfreie Codes – ursprünglich als Hausaufgabe, die zur Veröffentlichung führte.
+
+**Algorithmus (Bottom-Up-Baumkonstruktion):**
+1. Alle Symbole nach Häufigkeit sortieren
+2. Die zwei seltensten Symbole zu einem Knoten kombinieren
+3. Wiederholen bis nur noch die Wurzel übrig ist
+4. Codes ablesen: links = 0, rechts = 1
+
+**Präfixfreiheit:** Kein Code ist Anfang eines anderen → sofort dekodierbar ohne Trennzeichen.
+
+| Eigenschaft | Huffman | Arithmetisch |
+|-------------|---------|--------------|
+| Einheit | Ganze Bits | Fraktionale Bits |
+| Optimalität | Optimal für ganze Bits | Näher an Entropie |
+| Geschwindigkeit | Schneller | Langsamer |
+| JPEG-Einsatz | Standard (Baseline) | Optional (selten) |
+
+JPEG verwendet zwei Huffman-Tabellen: eine für DC-Koeffizienten (Durchschnittswerte), eine für AC-Koeffizienten (Frequenzen). Die Tabellen sind im JPEG-Header gespeichert.
+
+---
 
 <!-- _class: klausur -->
 <!-- _header: '' -->
@@ -772,6 +912,28 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# WebP & AVIF – Vertiefung
+
+**WebP** entstand 2010 aus Googles VP8-Videocodec (On2 Technologies, für $133M gekauft). Statt I-Frames für Video werden sie als Einzelbilder verwendet. WebP nutzt Intra-Frame-Prediction, die benachbarte Blöcke zur Vorhersage verwendet – effizienter als JPEGs blockweise DCT.
+
+**AVIF** basiert auf dem AV1-Videocodec, entwickelt 2015–2018 von der Alliance for Open Media (Google, Apple, Netflix, Amazon, Microsoft, Mozilla). Nach dem Patent-Chaos von H.265/HEVC vereinten sich die Konkurrenten für einen lizenzfreien Standard.
+
+| Aspekt | WebP | AVIF |
+|--------|------|------|
+| Basis-Codec | VP8/VP9 | AV1 |
+| Kompression vs. JPEG | 25–35% besser | 50% besser |
+| HDR/Wide Gamut | Nein | Ja (10/12 Bit) |
+| Encoding-Geschwindigkeit | Schnell | Sehr langsam |
+| Browser-Support 2025 | 97%+ | 93%+ |
+
+**Warum JPEG dominiert:** Kameras, Bildbearbeitungssoftware und Content-Management-Systeme sind auf JPEG optimiert. Der Wechsel erfordert Infrastruktur-Updates über die gesamte Pipeline.
+
+---
+
 # Formatwahl in der Praxis
 
 | Anwendung | Format |
@@ -786,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?"
 -->
 
@@ -822,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
-- Diskussion: Ist das fair? Trade-off Nutzer vs. Plattform
+- Tipp für FotografInnen: Portfolio auf eigener Website
+- Diskussion: Ist das fair? Trade-off Nutzende vs. Plattform
 -->
 
 ---
@@ -890,6 +1052,33 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Container vs. Codec – Vertiefung
+
+**Container** (Multiplexer-Format) organisiert mehrere Datenströme mit Timing-Informationen. Er enthält keine Kompressionslogik, sondern synchronisiert Video, Audio, Untertitel und Metadaten.
+
+**Codec** (Coder-Decoder) definiert den Kompressionsalgorithmus. Derselbe Container kann verschiedene Codecs enthalten – die Dateiendung verrät den Codec nicht.
+
+| 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 |
+| WebM | Google | VP9, AV1, Opus | HTML5-optimiert, lizenzfrei |
+| MOV | Apple | ProRes, H.264 | Professionelle Produktion |
+
+**Metadaten im Container:**
+- Timecodes für Frame-genaue Synchronisation
+- Kapitelmarken, Thumbnails
+- Sprach-Tags für Audio/Untertitel
+- HDR-Metadaten (MaxCLL, MaxFALL)
+
+**Praktisches Problem:** Eine `.mp4`-Datei mit AV1-Codec spielt auf älteren Geräten nicht ab, obwohl sie MP4 „unterstützen" – der Hardware-Decoder fehlt für AV1.
+
+---
+
 # Gängige Container
 
 | Container | Verwendung |
@@ -1115,6 +1304,32 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# H.264/AVC – Vertiefung
+
+H.264 (2003) ermöglichte erst YouTube (2005), Netflix-Streaming (2007) und Blu-ray. Vor H.264 war MPEG-2 Standard – H.264 erreichte bei gleicher Qualität die halbe Bitrate.
+
+**Technische Innovationen:**
+- **Variable Blockgrößen:** 16×16 bis 4×4 Macroblocks (MPEG-2: nur 16×16)
+- **Intra-Prediction:** Blöcke werden aus Nachbarn vorhergesagt
+- **In-Loop Deblocking:** Filter reduziert Blockartefakte vor der Referenzierung
+- **CABAC:** Arithmetic Coding ersetzt Huffman (10–15% effizienter)
+
+| Profile | Anwendung | Max. Auflösung |
+|---------|-----------|----------------|
+| Baseline | Videotelefonie, ältere Geräte | 480p |
+| Main | Broadcast, Streaming | 1080p |
+| High | Blu-ray, professionell | 4K |
+
+**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. Endnutzungs-Streaming ist lizenzfrei; Hardware-Hersteller zahlen ~$0,20/Gerät.
+
+---
+
 # Das Patent-Problem
 
 **H.264 ist nicht frei**
@@ -1132,7 +1347,7 @@ KLAUSURRELEVANT:
 <!--
 - 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?
 -->
 
@@ -1221,6 +1436,29 @@ KLAUSURRELEVANT:
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# AV1 – Vertiefung
+
+Die **Alliance for Open Media** (2015) vereinte Konkurrenten nach dem Patent-Chaos von H.265/HEVC. Drei separate Patent-Pools (MPEG-LA, HEVC Advance, Velos Media) machten H.265-Lizenzierung unberechenbar – die Industrie wollte einen garantiert lizenzfreien Standard.
+
+**Gründungsmitglieder:** Google, Mozilla, Cisco, Netflix, Amazon, Microsoft. Apple trat 2018 bei – historisch, da Apple sonst eigene Standards bevorzugt.
+
+| Technische Innovation | Beschreibung |
+|----------------------|--------------|
+| Superblocks | Bis 128×128 Pixel (H.264: max 16×16) |
+| Prediction Modes | 56 Intra-Modi (H.264: 9) |
+| Transform | 10 verschiedene Transformtypen |
+| Film Grain Synthesis | Filmkorn wird als Parameter übertragen |
+
+**Encoding-Performance:** Software-Encoding ist 50–200× langsamer als H.264. Erst Hardware-Encoder (Intel ab Gen 12, NVIDIA RTX 40, Apple M3) machen Echtzeit-Encoding praktikabel.
+
+**Adoption 2025:** YouTube und Netflix nutzen AV1 für 4K/8K-Streams. 2024 gewann AV1 einen Emmy für technische Innovation – offene Standards können Industriestandard werden.
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: 'https://blog.mozilla.org/en/mozilla/av1-video-codec-wins-emmy/' -->
 

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

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   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);
 }
@@ -68,6 +70,26 @@ section.aufgabe {
 section.aufgabe footer {
   display: none;
 }
+section.erklaerung {
+  font-size: 1.1rem;
+}
+section.erklaerung h1 {
+  font-size: 1.5rem;
+  color: #1e5f8a;
+  margin-bottom: 0.3rem;
+}
+section.erklaerung ul,
+section.erklaerung ol {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung p {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung table {
+  font-size: 0.9rem;
+}
 </style>
 
 <!-- _class: invert -->
@@ -82,7 +104,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
@@ -132,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)
 -->
 
@@ -235,6 +257,29 @@ Kleine SSD für System + große HDD für Archiv.
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# HDD vs. SSD – Vertiefung
+
+**HDD (Hard Disk Drive):** Magnetplatten rotieren mit 5.400–7.200 RPM; ein Schreib-/Lesekopf schwebt nanometerweit über der Oberfläche. Die Zugriffszeit setzt sich zusammen aus Seek Time (Kopf bewegen) + Rotational Latency (warten auf Sektor).
+
+**SSD (Solid State Drive):** NAND-Flash-Zellen speichern Bits als elektrische Ladung. Kein mechanischer Zugriff → konstant schnelle Latenz. Aber: Zellen haben begrenzte Schreibzyklen (P/E Cycles).
+
+| Aspekt | HDD | SATA SSD | NVMe SSD |
+|--------|-----|----------|----------|
+| Latenz | 5–10 ms | 0,1 ms | 0,02 ms |
+| Seq. Lesen | 150 MB/s | 550 MB/s | 7.000 MB/s |
+| IOPS (4K random) | 100 | 90.000 | 1.000.000 |
+| TBW (1 TB Modell) | ∞ | 600 TBW | 600 TBW |
+
+**Wear Leveling:** SSD-Controller verteilen Schreibvorgänge gleichmäßig, um einzelne Zellen nicht vorzeitig zu erschöpfen. TRIM informiert den Controller über gelöschte Blöcke.
+
+**Praxis:** System-SSD für OS/Anwendungen (Geschwindigkeit), HDD für Medienarchiv (Kapazität/Preis). RAID schützt vor Einzelausfällen bei beiden.
+
+---
+
 <!-- _class: lead -->
 
 # Dateisysteme
@@ -484,6 +529,30 @@ Warum 1 Offsite?
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 3-2-1-Backup-Regel – Vertiefung
+
+Peter Krogh formulierte die Regel 2005 in „The DAM Book" (Digital Asset Management). Sie schützt gegen unterschiedliche Verlustszenarien:
+
+| Bedrohung | Schutz durch | Beispiel |
+|-----------|--------------|----------|
+| Hardware-Defekt | 3 Kopien | SSD stirbt → HDD-Backup vorhanden |
+| Firmware-Bug/Ransomware | 2 Medientypen | Malware infiziert nur ein System |
+| Feuer/Diebstahl/Flut | 1 Offsite | Haus brennt → Cloud-Backup sicher |
+
+**Moderne Erweiterung 3-2-1-1-0:**
+- **+1** Air-Gapped (offline, nicht verbunden)
+- **+0** Verifizierte Backups (regelmäßig Restore testen)
+
+**Ransomware-Problem:** Vernetzte Backups werden oft mitverschlüsselt. Air-Gapped-Medien (externe HDD im Safe, LTO-Band) bleiben sicher, weil sie physisch getrennt sind.
+
+**Realitäts-Check:** Die meisten Datenverluste entstehen durch menschliche Fehler (versehentliches Löschen), nicht Hardware-Ausfälle. Versionierte Backups (Time Machine, Borg) schützen auch davor – die gelöschte Datei existiert noch in älteren Snapshots.
+
+---
+
 # Backup-Arten
 
 **Vollständig (Full):**
@@ -523,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

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   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);
 }
@@ -83,7 +85,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
@@ -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
-Je mehr User, desto schneller (umgekehrt zu Client-Server!)
+Last verteilt sich auf alle Teilnehmenden
+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
-- **PDF:** Autor, Datum, Software
+- **MP3:** KünstlerInnen, Album, Jahr, Genre, Cover
+- **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

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -40,11 +40,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   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);
 }
@@ -83,7 +85,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 

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

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 <style>
@@ -39,11 +39,13 @@ pre code {
   color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
   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);
 }
@@ -92,7 +94,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
@@ -102,6 +104,166 @@ Hochschule der Medien Stuttgart
 <!-- _footer: "" -->
 
 
+# Verlustfrei vs. Verlustbehaftet
+
+| | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) |
+|---|---|---|
+| **Prinzip** | **Redundanz** entfernen | **Irrelevanz** entfernen |
+| **Reversibel** | Ja (Original wiederherstellbar) | Nein (Information unwiederbringlich weg) |
+| **Reduktion** | 30-50% | 80-99% |
+| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |
+
+**Faustregel:**
+- Medien für EndnutzerInnen → Lossy oft akzeptabel
+- Quellmaterial, Code, Archive → Lossless nötig
+
+<!--
+REDUNDANZ: Wiederholende Muster kompakter darstellen (z.B. "AAAA" → "4×A")
+IRRELEVANZ: Für Menschen nicht wahrnehmbar (Psychoakustik, Psychovisuell)
+
+KLAUSURRELEVANT:
+- Verlustfrei = Original 1:1 wiederherstellbar
+- Verlustbehaftet = Information geht verloren, aber kaum wahrnehmbar
+- Redundanz vs. Irrelevanz ist der Kernunterschied!
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Dateneinheiten
+
+| Einheit | Bytes | Potenz | Beispiel |
+|---------|------:|:------:|----------|
+| **Byte** | 1 | 10⁰ | Farbwerte eines Pixels |
+| **Kilobyte (KB)** | 1.000 | 10³ | Kleiner Programmcode |
+| **Megabyte (MB)** | 1 Million | 10⁶ | Textdokument |
+| **Gigabyte (GB)** | 1 Milliarde | 10⁹ | Kinofilm in FullHD |
+| **Terabyte (TB)** | 1 Billion | 10¹² | ~12h Video in 4K |
+| **Petabyte (PB)** | 1 Billiarde | 10¹⁵ | Netflix-Gesamtarchiv |
+| **Exabyte (EB)** | 1 Trillion | 10¹⁸ | Alle E-Mails weltweit/Tag |
+| **Zettabyte (ZB)** | 1 Trilliarde | 10²¹ | Internet-Traffic 2016 |
+
+<!--
+SI-Präfixe (Dezimal): 1 KB = 1.000 Bytes
+Binär (IEC): 1 KiB = 1.024 Bytes (Kibibyte)
+Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
+1 TB Festplatte = ~931 GiB nutzbar
+
+Eselsbrücke: "Kilo Mega Giga Tera Peta Exa Zetta Yotta"
+→ "Komm Mit Großem Tee, Peter Exte Zettelt Yachten"
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Der digitale Wendepunkt
+
+| Jahr | Analog | Digital | Digital-Anteil |
+|------|--------|---------|----------------|
+| **1986** | 2,6 EB | 0,02 EB | **1%** |
+| **2002** | — | — | **50%** (Wendepunkt) |
+| **2007** | 18 EB | 277 EB | **94%** |
+
+**Perspektive:**
+- 1986: "Petabyte" war ein theoretisches Konzept
+- 2025: ~181 Zettabyte jährlich produziert
+
+**Magnetband lebt:** LTO-Tapes bleiben günstigstes Archivmedium
+(AWS Glacier, Film-Archive, Rechenzentren)
+
+<!--
+PRÜFUNGSRELEVANT:
+ - Wendepunkt 2002
+ - Speichereinheiten (KB→MB→GB→TB→PB→EB→ZB)
+ - Magnetband als Archivmedium
+
+QUELLE: Hilbert & López (2011): "The World's Technological Capacity to Store, Communicate, and Compute Information", Science
+
+METHODIK: 60 analoge + digitale Technologien untersucht (1986-2007)
+
+WENDEPUNKT 2002: Erstmals mehr digital als analog gespeichert
+
+ANALOG damals: Bücher, Zeitungen, Vinyl, VHS, Filmrollen, Fotos
+
+DIGITAL damals: Festplatten, CDs, DVDs, frühe Flash-Speicher
+
+HEUTE: LTO-9 (2021) speichert 18 TB pro Band, ~$5/TB für Cold Storage
+
+VERGLEICH: SSD ~$50/TB, HDD ~$15/TB, LTO ~$5/TB
+
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Analoge Medien
+### Distribution: physisch (Kauf, Verleih, Kopie)
+
+- **Text**
+    - Bücher, Zeitungen, Zeitschriften, Lochkarten
+- **Bild**
+    - Fotografie (Negativ, Dia, Polaroid), Mikrofilm
+- **Audio:**
+    - Schallplatte (Vinyl, Schellack), Tonband, Musikkassette
+- **Video:**
+    - Film (35mm, Super 8), VHS, Betamax
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Digitale Medien
+### Distribution: Datenträger (CD, USB), Download, Streaming, P2P
+
+- **Text**
+    - E-Book (PDF, EPUB), Dokumente (TXT, DOCX)
+- **Bild**
+    - Digitalfoto (JPEG, PNG, RAW, WebP, GIF)
+- **Audio**
+    - Audiodatei (MP3, FLAC, WAV, AAC, OGG)
+- **Video**
+    - Videodatei (MP4, MKV, AVI, WebM)
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Digitale Speichermedien
+
+- **Optische Speicher**
+    - CD, DVD, Blu-ray
+- **Magnetische Speicher**
+    - Festplatte (HDD), Magnetband (LTO)
+- **Flash-Speicher**
+    - SSD, USB-Stick, SD-Karte
+- **Cloud-Speicher**
+    - Dropbox, Google Drive, iCloud, AWS S3
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
 # Rastergrafiken
 
 **Aufbau:** Liste von Pixeln mit Farbwerten (2D-Array)
@@ -243,6 +405,7 @@ KLAUSURRELEVANT:
 - Präfix-frei: Kein Code ist Anfang eines anderen
 - Häufigstes Zeichen = kürzester Code
 - Auch in ZIP, PNG, MP3 verwendet
+-->
 
 
 ---

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/03-interaktivitaet-javascript.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik (223015c)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: "Kapitel 3: Interaktivität & JavaScript"
 ---
 
@@ -83,7 +83,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
 
@@ -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"
 
-```
-document
-└── html
-    ├── head
-    │   └── title
-    └── body
-        ├── h1
-        └── p
-```
+![bg right:45% fit](./assets/demos/dom-tree.png)
 
 <!--
 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>