a11y werkzeuge-folie überarbeitet: screenreader tabelle, orca/talkback, wcag-formulierungen

a11y folien feinschliff, input-date demo, tag-attribut demo update, synonyme
a11y vertiefung: keyboard-demo, input-devices, mdn-links vereinheitlicht
2026-04-21 23:38:06 +02:00 · 2026-04-21 23:32:30 +02:00 · 2026-04-21 20:58:52 +02:00 · 2026-04-21 19:43:11 +02:00 · 2026-04-21 19:35:19 +02:00 · 2026-04-20 18:26:50 +02:00
211 changed files with 6379 additions and 1285 deletions
@@ -2,6 +2,7 @@
 build/
 *.pdf
 *.html
+!slides/*/assets/demos/**/*.html
 .dev-index/

 # Dependencies
@@ -35,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
@@ -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
@@ -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 --server "$SERVE_DIR/"
@@ -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
@@ -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"
@@ -88,167 +88,103 @@ Hochschule der Medien Stuttgart

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg fit](./assets/qrcode-0.svg)

 ---

 <!-- _class: lead -->

-# Willkommen!
+# Herzlich willkommen!
 ## Einführung

 ---

 # Über mich

-**Michael Czechowski**
+**Michael Werner Czechowski**

- Irgendwas mit IT, Cloud und AI
+- Systems and Platform Engineer
 - Schwerpunkte:
  - Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source
 - Hintergrund:
-  - Philosophie (Uni Stuttgart) -> NO degree
-  - 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
@@ -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>
@@ -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>
@@ -112,7 +112,7 @@ Hochschule der Medien Stuttgart
 | **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |

 **Faustregel:**
- Medien für Endnutzer → Lossy oft akzeptabel
+- Medien für EndnutzerInnen → Lossy oft akzeptabel
 - Quellmaterial, Code, Archive → Lossless nötig

 <!--
@@ -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)
+
@@ -70,13 +70,13 @@ section.aufgabe footer {
 }
 section.erklaerung {
  font-size: 1.1rem;
-  background: repeating-linear-gradient(
+  /**background: repeating-linear-gradient(
    135deg,
    #fce4ec,
    #fce4ec 40px,
    #fff 40px,
    #fff 80px
-  ) !important;
+  ) !important;**/
 }
@media print {
  section.erklaerung {
@@ -140,6 +140,38 @@ Hochschule der Medien Stuttgart

 ---

+# Ressourcen zum Selbstlernen
+
+* **CODE CRISPIES: https://codecrispi.es/**
+* Online Code-Editor: https://codepen.io/pen/
+* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
+* Flexbox-Spiel: https://flexboxfroggy.com/
+* Grid-Spiel: https://cssgridgarden.com/
+
+<!--
+SPEAKER NOTES:
+- Code Crispies = unser Material
+- Codepen = sofort CSS ausprobieren
+- MDN = DIE Referenz schlechthin
+- Spiele für Flexbox/Grid – später relevant
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg cover](./assets/diday.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/signal-2026-04-09-190024_002.jpeg)
+
+---
+
 <!-- _class: lead -->

 # Kapitel 1
@@ -596,6 +628,77 @@ COBOL läuft heute noch auf Bankensystemen

 ---

+# Assembler (1947)
+
+**Die erste Stufe über Maschinencode**
+
+- Erfunden von **Kathleen Booth** (Birkbeck College, London)
+- Mnemonische Befehle statt Binärzahlen (`MOV`, `ADD`, `JMP`)
+- Jeder Befehl entspricht direkt einer CPU-Instruktion
+- Hardwarenah, aber für Menschen lesbar
+
+**Fun Fact:** Chris Sawyer schrieb **RollerCoaster Tycoon** (1999) fast komplett in x86-Assembly
+
+<!--
+KATHLEEN BOOTH (1922–2022):
+Kathleen Hylda Valerie Booth (geb. Britten), BSc Mathematik (Royal Holloway, London), PhD Applied Mathematics (King's College London). Arbeitete ab 1946 mit Andrew Booth (später ihr Ehemann) am Birkbeck College – eines der kleinsten Computing-Teams Großbritanniens: nur Andrew, Kathleen und Xenia Sweeting.
+
+WAS SIE TAT:
+Kathleen baute die Hardware des ARC (Automatic Relay Calculator) mit auf und entwickelte dann die Programmierarchitektur. 1947 reiste sie mit Andrew nach Princeton, wo sie John von Neumann trafen und die Stored-Program-Architektur kennenlernten. Sie schrieb "Coding for A.R.C." – die erste veröffentlichte Beschreibung einer Assembly-Sprache. Statt roher Binärzahlen (z.B. 10011) konnten Programmierer nun mnemonische Kürzel verwenden (z.B. M -> cR). Ein konzeptioneller Sprung – die erste Abstraktionsschicht zwischen Mensch und Maschine.
+
+VOR ASSEMBLER:
+ENIAC (1943–46) wurde durch physisches Umstecken von Kabeln programmiert – Programmwechsel dauerten Tage. Danach kamen Stored-Program-Computer, aber Programme mussten als rohe Binärzahlen eingegeben werden. Jeder Tippfehler in einer 0/1-Folge konnte den Befehl komplett verfälschen.
+
+WEITERE LEISTUNGEN:
+- Mitentwicklung von Booth's Multiplication Algorithm (heute in Milliarden CPUs)
+- Pionierin der neuronalen Netze (1958/59 – nur ~4 Jahre nach den allerersten)
+- Erste öffentliche Demonstration maschineller Übersetzung (Französisch→Englisch, 1955)
+- Wurde 100 Jahre alt
+
+ROLLERCOASTER TYCOON:
+Chris Sawyer, schottischer Entwickler, schrieb RCT zu 99% in x86-Assembly (MASM), nur 1% C für Windows-Schnittstellen. Warum? Assembler war seine "Muttersprache" seit Kindheit, und Performance war kritisch: Tausende Besucher mit eigenem Verhalten, Fahrgeschäfte, Pathfinding – alles in Echtzeit. Das Spiel lief auf einem Pentium 90 MHz mit 16 MB RAM. Sawyer verdiente ca. 30 Mio. Dollar an Royalties und hat über 700 Achterbahnen weltweit selbst gefahren.
+-->
+
+---
+
+# Fortran (1957)
+
+**Die erste höhere Programmiersprache**
+
+- Entwickelt bei IBM unter **John Backus**
+- Im Team: **Lois Haibt** – verantwortlich für die Control-Flow-Analyse
+- Name: **For**mula **Tran**slator
+- Ziel: Mathematische Formeln direkt als Code schreiben
+- Revolutionär: ~**20 Assembler-Befehle → 1 Fortran-Zeile**
+- Noch heute genutzt in Wissenschaft und Hochleistungsrechnen
+
+<!--
+JOHN BACKUS (1924–2007):
+Unruhiger Werdegang – Chemiestudium abgebrochen, aus der Uni geflogen, Armee, Medizinstudium abgebrochen (Hirntumor, erfolgreich behandelt), dann Mathematik an der Columbia University. Bei IBM ab 1950. Seine Motivation war schlicht Faulheit: "Much of my work has come from being lazy. I didn't like writing programs." Er entwickelte erst Speedcoding (1953), dann leitete er das Fortran-Projekt. Später: Backus-Naur-Form (BNF), Turing Award 1977.
+
+LOIS HAIBT (*1934):
+Studierte Mathematik am Vassar College (Stipendium), jobbte in den Semesterferien bei Bell Labs. IBM bot ihr nach dem Abschluss 1955 $5.100/Jahr – fast doppelt so viel wie Bell Labs. Sie kam ohne jegliche Programmiererfahrung ins Team und war mit 21 Jahren die einzige Frau unter den 10 Kernentwicklern. Ihre Aufgabe (Section 4 des Compilers): Sie teilte Programme in "Basic Blocks" auf, erstellte einen Control-Flow-Graphen und simulierte per Monte-Carlo-Methode, welche Programmteile häufig durchlaufen werden ("Hot Paths"). Diese Info nutzte der Compiler für die Register-Optimierung. Ein für 1956 extrem fortschrittlicher Ansatz. Außerdem entwickelte sie den ersten syntaktischen Analysator für arithmetische Ausdrücke – ein Grundbaustein aller modernen Compiler. Ihre Tochter Carolyn studierte später in Princeton und promovierte am MIT in Mathematik.
+
+Haibt über die Teamkultur: "No one was worried about seeming stupid or possessive of his or her code. We were all just learning together."
+
+DAS TEAM:
+~10 Kernmitglieder, alle in ihren 20ern und 30ern, mit "varying academic degrees and unrelated areas of expertise". Harlan Herrick schrieb das erste jemals ausgeführte Fortran-Programm. Roy Nutt war von United Aircraft ausgeliehen. David Sayre war Kristallograph.
+
+ENTWICKLUNG:
+Sollte 6 Monate dauern, brauchte 3 Jahre (1954–1957). Das Team arbeitete nachts, weil sie nur dann Zugang zum IBM 704 hatten, und schlief tagsüber im Langdon Hotel an der 56th Street. Schneballschlachten lockerten die langen Winternächte auf.
+
+WARUM ES FUNKTIONIERTE:
+Das Killerkriterium war Performance: Frühere Compiler erzeugten Code, der 5–10× langsamer war als handgeschriebener Assembler. Fortran I war der erste Compiler, der annähernd gleich schnellen Code erzeugte. Dieser Rekord hielt 20 Jahre. Ken Thompson (Erfinder von Unix): "95% of the people who programmed in the early years would never have done it without Fortran."
+
+HEUTE:
+Fortran ist die "Muttersprache des Scientific Computing". Wettervorhersage (GFS, WRF), Klimamodelle (CESM für IPCC-Berichte), Kernphysik-Simulationen, LAPACK/BLAS (die linearen Algebra-Bibliotheken unter NumPy/SciPy) – alles Fortran. In numerischen Benchmarks 30–60× schneller als Python.
+
+PARALLELE ZU HEUTE:
+Assembly-Programmierer sahen Fortran als existenzielle Bedrohung ihrer Kunst – genau wie heute manche Programmierer KI fürchten. Das Ergebnis war dasselbe: Das Werkzeug erweiterte das Feld, statt es zu ersetzen.
+-->
+
+---
+
 <!-- _header: '' -->
 <!-- _footer: '' -->

@@ -739,11 +842,6 @@ ARPANET-Karte 1969

 ![bg](./assets/arpanet.jpg)

-<!--
-ARPANET-Karte 1969
-4 Knoten: UCLA, Stanford, UCSB, Utah
-->
-
 ---

 # Das WWW (1989)
@@ -771,7 +869,15 @@ Kostenlos freigegeben → darum existiert es
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg fit](./assets/img_633d7b91366e0-1025x538-768x403.jpg)
+![bg fit](./assets/mosaic.jpg)
+
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg cover](./assets/img_633d7b91366e0-1025x538-768x403.jpg)

 <!--
 Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente.
@@ -828,7 +934,7 @@ Demonstration: Glühbirne AN/AUS = 1 Bit

 # Das Bit

-**Kleinste Informationseinheit**
+### Kleinste *logische* Informationseinheit

 - **0 oder 1**
 - AN oder AUS
@@ -847,10 +953,10 @@ Shannon: Begründer der Informationstheorie

 # Das Byte

-**8 Bits = 1 Byte**
+**8 Bit = 1 Byte**

 ```
-0 1 0 0 1 0 0 1
+0 0 1 0 1 0 1 0
 ```

 **Wie viele Kombinationen?**
@@ -882,23 +988,50 @@ Farbbild: Rot + Grün + Blau

 ---

+# Zahlensysteme
+
+**Eine Ziffer — wie viele Werte?**
+
+| System | Basis | Ziffern | Beispiel |
+|--------|-------|---------|----------|
+| **Dezimal** | 10 | 0-9 | `42` = 4×10 + 2 |
+| **Binär** | 2 | 0-1 | `101010` = 42 |
+| **Hexadezimal** | 16 | 0-F | `2A` = 2×16 + 10 |
+
+→ Alle drei beschreiben dieselbe Zahl: **42**
+
+<!--
+Dezimal = was wir im Alltag nutzen (10 Finger → 10 Ziffern)
+Binär = was Computer nutzen (Strom an/aus → 2 Zustände)
+Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Bytes (2 Hex-Ziffern = 1 Byte = 8 Bit)
+Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen:
+- Dezimal: 10 (0–9)
+- Binär: 2 (0, 1)
+- Hex: 16 (0–9 + A–F, wobei A=10, B=11, ..., F=15)
+-->
+
+---
+
 # Hexadezimal: Lesbarkeit

-**Binär ist unleserlich:**
+**Für den Menschen ungeeignet:**
 `01001101 01010000 00110011`

 **Hexadezimal (Base 16):**
 `4D 50 33` (= "MP3" in ASCII)

-**Jede Hex-Ziffer = 4 Bits**
+**Jede Hex-Ziffer = 4 Bits (ein "Nibble")**
 0-9, A-F (A=10, B=11, ..., F=15)

-**Ihr kennt das:** `#FF0000` = Rot in CSS
+`4 = 0100` `D = 1101`
+`5 = 0101` `0 = 0000`
+`3 = 0011` `3 = 0011`

 <!--
 Hex = Shortcut für Menschen
 1 Byte = 2 Hex-Ziffern (00-FF)
-CSS-Farben nutzen Hex
+"Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen)
+CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
 -->

 ---
@@ -917,7 +1050,7 @@ CSS-Farben nutzen Hex

 ---

-# Wo begegnet euch Hex?
+# Wo begegnet Ihnen Hex-Code?

 | Kontext | Beispiel |
 |---------|----------|
@@ -927,13 +1060,17 @@ CSS-Farben nutzen Hex
 | Speicheradressen | `0xA04F20` |
 | Unicode | `U+00E4` (ä) |

-→ Hex ist überall in der Technik

 <!--
 Präfixe:
 - 0x = "das ist Hexadezimal" (C, JavaScript, Python)
 - U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
- # = CSS-Konvention für Farben
+- # = CSS (Cascading Style Sheets)-Konvention für Farben
+
+ABKÜRZUNGEN:
+- MAC = Media Access Control (eindeutige Hardware-Adresse einer Netzwerkkarte)
+- CSS = Cascading Style Sheets
+- Unicode = universeller Zeichensatz für alle Schriftsysteme

 Speicheradressen erklärt:
 - 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
@@ -949,9 +1086,9 @@ Fehlercodes: Windows zeigt diese bei Bluescreens

 ---

-# Bits vs. Bytes: Die Verwirrung
+# Bit vs. Byte: Die Verwirrung

-**1 Byte = 8 Bit** → Bits ÷ 8 = Bytes
+**1 Byte = 8 Bit** → Bit ÷ 8 = Byte

 | Einheit (Bit) | Einheit (Byte) |
 |---------------|----------------|
@@ -959,9 +1096,8 @@ Fehlercodes: Windows zeigt diese bei Bluescreens
 | 1 Mbit = 1.000.000 Bit | 1 MB = 1.000.000 Byte = 8 Mbit |
 | 1 Gbit = 1 Mrd. Bit | 1 GB = 1 Mrd. Byte = 8 Gbit |

-**Praxis:** 100 Mbit/s Internet = **12,5 MB/s** Download
+100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate

-**Aber:** Computer rechnen binär (Basis 2)!

 <!--
 Bits = kleines b, Bytes = großes B
@@ -1059,30 +1195,23 @@ Formattierungssprache
  
 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-<!-- _backgroundColor: #fce4ec -->
-
 # HTML Metadaten

+![bg right:40% fit](./assets/hdm-link-preview.png)
+
 ```html
 <html>
  <head>
-    <title>Im Browsertab als Überschrift sichtbar</title>
-
-    <meta name="description" content="" />
-
+    <title>HdM Webseite - Hochschule der Medien</title>
+    <meta name="description" content="Studieren. Wissen. Machen." />
    <meta name="og:image" content="https://...." />
+    ...
  </head>
-
  ...
-
 </html>
 ```

-* <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
-* <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
+<small>*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.*</small>

 <!--
 HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
@@ -1118,12 +1247,12 @@ Der `<head>`-Bereich enthält Informationen *über* das Dokument, nicht den sich
 | `<meta viewport>` | Mobile Darstellung | `width=device-width, initial-scale=1` |
 | `<meta description>` | Suchergebnis-Snippet (max 160 Zeichen) | SEO-kritisch |

-**Open Graph Protocol (Facebook, 2010):**
+**Open Graph Protocol (Ehemals Facebook, 2010):**
 ```html
 <meta property="og:title" content="Artikel-Titel">
 <meta property="og:image" content="https://example.com/preview.jpg">
 ```
-Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.
+Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack ...

 **SEO-Relevanz:** Google nutzt `<title>` und `<meta description>` für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.

@@ -1131,9 +1260,12 @@ Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.

 # HTML-Tags und Attribute

+![bg right:35%](./assets/demos/tag-attribut.png)
+
 ```html
 <body>
-  <p class="wichtig">Das ist ein Absatz.</p>
+  <p class="wichtig">Das ist ein wichtiger Absatz.</p>
+  <p>Das ist ein gewöhnlicher Absatz.</p>
 </body>
 ```

@@ -1141,12 +1273,14 @@ Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.
 |------|-------------|
 | `<p>` | Opening Tag (öffnendes Tag) |
 | `class="wichtig"` | Attribut |
-| `Das ist ein Absatz.` | Inhalt |
+| `Das ist ein wichtiger Absatz.` | Inhalt |
 | `</p>` | Closing Tag (schließendes Tag) |

 ---

-# HTML-Tags und Attribute (selbst-schließend) 
+# HTML-Tags und Attribute (selbst-schließend)
+
+![bg right:35%](./assets/demos/input-date.png)

 ```html
 <input type="" />
@@ -1162,6 +1296,8 @@ Steuert die Vorschau beim Teilen auf Facebook, LinkedIn, WhatsApp, Slack.

 # Vollständiges Grundgerüst

+![bg right:35%](./assets/demos/grundgeruest.png)
+
 ```html
 <!DOCTYPE html>
 <html lang="de">
@@ -1197,7 +1333,7 @@ Semantische Tags wichtig für Accessibility
 h1 sollte nur einmal pro Seite vorkommen
 a = anchor (Anker)
 -->
-
+<!--
 ---

 # Hands-On: Werkzeuge einrichten
@@ -1213,6 +1349,7 @@ a = anchor (Anker)
 **Option 3: Online-Editoren**
 - [https://codepen.io/pen/](https://codepen.io/pen/)

+-->
 ---

 # Natives HTML
@@ -1238,19 +1375,25 @@ Accessibility ist eingebaut

 # Beispiel: Details/Summary

+<small>*Akkordion · Accordion · Aufklappmenü · Collapsible · Collapsable · Expandible*</small>
+
+![bg right:35%](./assets/demos/details-closed.png)
+
 ```html
 <details>
  <summary>Klick mich!</summary>
-  <p>Dieser Text war versteckt.</p>
+  <p>Dieser Text ist versteckt.</p>
 </details>
 ```

-https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details)</small>

 ---

 # Beispiel: Details/Summary (geöffnet)

+![bg right:35%](./assets/demos/details-open.png)
+
 ```html
 <details open>
  <summary>Klick mich!</summary>
@@ -1258,23 +1401,27 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
 </details>
 ```

-https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box)</small>

 ---


 # Beispiel: Button

+![bg right:35%](./assets/demos/button.png)
+
 ```html
 <button>Add to favorites</button>
 ```

-https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button)</small>

 ---

 # Beispiel: Input/Eingabefeld

+![bg right:35%](./assets/demos/input.png)
+
 ```html
 <input
  type="text"
@@ -1282,12 +1429,16 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
  size="10" />
 ```

-https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input)</small>

 ---

 # Beispiel: Dialog

+<small>*Modal · Modales Fenster · Popup · Popup-Fenster · Overlay · Dialogfenster*</small>
+
+![bg right:35%](./assets/demos/dialog.png)
+
 ```html
 <dialog open>
  <p>Greetings, one and all!</p>
@@ -1297,7 +1448,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
 </dialog>
 ```

-https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog)</small>


 ---
@@ -1305,20 +1456,63 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
 <!-- _class: lead -->

 # "Barrierefreiheit"
-## a11y – Accessibility
+## Accessibility (a11y)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg fit](./assets/web-disability-simulator.png)

 ---

 <!-- _class: lead -->

-# Web Disability Simulator
+# Wie nutzen Menschen das Web?

 ---

-<!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
-<!-- _backgroundColor: #fce4ec -->
+<!-- _paginate: false -->
+
+![bg](./assets/mouse.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/keyboard.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/switch-microsoft.jpg)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/ps-controller.jpg)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/eye-tracking.png)
+
+---

 # Wie nutzen Menschen das Web?

@@ -1331,7 +1525,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
 | **Augensteuerung** | Eye-Tracking |
 | **Switch-Geräte** | Ein-/Aus-Schalter |

-→ **Nicht alle nutzen Maus + Bildschirm!**
+→ **Nicht alle Menschen nutzen Maus oder Touchscreens gleichermaßen.**

 <!--
 ACCESSIBILITY (a11y): a + 11 Buchstaben + y
@@ -1352,13 +1546,14 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG

 ---

-<!-- _class: erklaerung -->
+<!-- _class: "erklaerung klausur" -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
+<!-- _backgroundColor: #fce4ec -->

 # Web-Zugänglichkeit – Vertiefung

-**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle Nutzer.
+**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.

 **Arten von Einschränkungen:**

@@ -1379,11 +1574,6 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-<!-- _backgroundColor: #fce4ec -->
-
 # Warum "Barrierefreiheit"?

 **Rechtlich:**
@@ -1441,9 +1631,9 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
 | AA | Gesetzlicher Standard | Kontrast 4,5:1, Tastaturnavigation |
 | AAA | Optimal | Gebärdensprache für Videos |

-**Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.
+**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen

-**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen.
+> ***Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.*

 ---

@@ -1471,16 +1661,16 @@ Gesetzlich meist Level AA gefordert

 # Perceivable: Wahrnehmbar

+![bg right:35% fit](./assets/demos/contrast-levels.png)
+
 **Textalternativen für Nicht-Text:**
 ```html
 <img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
 ```

-**Kontrast:** Mindestens 4.5:1 für Text
-
-**Untertitel:** Videos brauchen Captions
-
-**Responsive:** Inhalte bei 200% Zoom nutzbar
+* **Kontrast:** Mindestens 4,5:1 für Text
+* **Untertitel:** Videos brauchen Captions
+* **Responsive:** Inhalte bei 200% Zoom nutzbar

 <!--
 Leeres alt="" für dekorative Bilder
@@ -1492,6 +1682,8 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)

 # Operable: Bedienbar

+![bg right:35%](./assets/demos/a11y-focus.png)
+
 **Tastaturzugänglich:**
 ```css
 /* Fokus-Indikator NIE entfernen! */
@@ -1506,9 +1698,9 @@ button:focus-visible {
 }
 ```

-**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
+**Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen

-**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
+**Kein Flackern:** max. 3×/Sekunde (schützt vor epileptischen Anfällen)

 <!--
 Tab-Reihenfolge = DOM-Reihenfolge
@@ -1520,6 +1712,8 @@ Skip-Links: "Zum Hauptinhalt springen"

 # Understandable: Verständlich

+![bg right:35%](./assets/demos/a11y-error.png)
+
 **Sprache angeben:**
 ```html
 <html lang="de">
@@ -1545,6 +1739,8 @@ Fehlermeldungen: konkret, hilfreich, am Feld

 # Robust: Technisch solide

+![bg right:35%](./assets/demos/a11y-semantic.png)
+
 **Semantisches HTML:**
 ```html
 <!-- Schlecht -->
@@ -1572,6 +1768,77 @@ div-Button braucht JavaScript für Enter/Space

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Barrierefreiheit testen
+
+Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
+
+**Tastatur-Test** – Maus weglegen, nur diese Tasten nutzen:
+
+![w:1050 center](./assets/demos/keyboard-a11y.png)
+
+---
+
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Barrierefreiheit testen – Werkzeuge
+
+**Automatisierte Tools** (finden ~30% der Verstöße):
+
+| Tool | Typ | Findet |
+|------|-----|--------|
+| [WAVE](https://wave.webaim.org/) | Browser-Extension | Kontrast, Struktur, Tab-Reihenfolge |
+| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + A11y-Audit |
+| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
+| [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension (Pro · Profi-Tool) | Detailanalyse, Regel-Engine |
+
+**Screenreader** (OS-nativ oder OSS):
+
+| OS | Screenreader | Hinweis |
+|----|--------------|---------|
+| macOS / iOS | VoiceOver (`Cmd + F5`) | builtin |
+| Windows | [NVDA](https://www.nvaccess.org/) · Narrator | NVDA OSS, Narrator builtin |
+| Linux | [Orca](https://orca.gnome.org/) + espeak-ng | GNOME builtin |
+| Android | TalkBack | builtin |
+
+**Manueller Test:** SR aktivieren, Formular ausfüllen. Einarbeitung nötig – "Augen schließen" bildet echte SR-Nutzung nicht ab.
+
+**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/hdm-homepage-16x9.png)
+
+<!--
+Aufgabe: hdm-stuttgart.de öffnen, Maus/Touchpad weglegen.
+Nur mit Tab/Shift+Tab/Enter/Pfeiltasten navigieren.
+Fokus-Indikator immer sichtbar? Logische Reihenfolge? Alle Elemente erreichbar?
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/wave-tab-order-16x9.png)
+
+<!--
+WAVE Tab-Reihenfolge: visualisiert DOM-Reihenfolge als Tab-Pfad.
+Wenn Pfad kreuz und quer → schlechte Struktur für Tastatur-/Screenreader-Nutzer.
+-->
+
+---
+
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
@@ -1580,17 +1847,16 @@ div-Button braucht JavaScript für Enter/Space
 # Barrieren im Netz vermeiden (a11y)

 **Tastatur-Test:**
- Alle Funktionen nur mit Tab + Enter nutzbar?
- Fokus immer sichtbar?
- Logische Tab-Reihenfolge?
+- Alle Funktionen sind nur mit Tab + Enter nutzbar
+- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
+- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt

 **Screenreader-Test:**
 - VoiceOver (Mac): `Cmd + F5`
 - NVDA (Windows): Gratis-Download

-**Tools:**
- axe DevTools, WAVE (Browser-Extensions)
- Lighthouse (in Chrome DevTools)
+**Tools/Browser-Extensions:**
+- [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)

 <!--
 Automatische Tests finden ~30% der Probleme
@@ -1600,45 +1866,11 @@ Echte NutzerInnen einbeziehen = Gold-Standard

 ---

-<!-- _class: erklaerung -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-# Barrierefreiheit testen – Vertiefung
-
-Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte Nutzer mit Behinderungen.
-
-**Tastatur-Test (5 Minuten, jeder kann's):**
-1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
-2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
-3. Logische Reihenfolge? (nicht kreuz und quer)
-4. Alle interaktiven Elemente erreichbar?
-
-**Automatisierte Tools:**
-
-| Tool | Typ | Findet |
-|------|-----|--------|
-| axe DevTools | Browser-Extension | ~30% der WCAG-Verstöße |
-| WAVE | Browser-Extension | Struktur-Probleme, Kontrast |
-| Lighthouse | Chrome DevTools | Performance + Accessibility |
-| Pa11y | CLI | CI/CD-Integration |
-
-**Screenreader-Kurztest:**
- macOS: `Cmd + F5` (VoiceOver)
- Windows: NVDA installieren (kostenlos)
- Augen schließen, nur zuhören: Ist die Seite verständlich?
-
-**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.
-
---
-

 <!-- _class: lead -->

 # Fragen & Diskussion

-**Nächster Termin:** 10.01.2026 – CSS & Netzwerke
-
 **Kontakt:** lb-czechowski@hdm-stuttgart.de

 ---
@@ -1648,7 +1880,7 @@ Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erf
 Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**

 Basiert auf Material von:
- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)
 - Michael Czechowski
+- Markus Thamm / Wolfgang Gruel (HdM Stuttgart)

 Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
@@ -73,13 +73,13 @@ section.glossar {
 }
 section.erklaerung {
  font-size: 1.1rem;
-  background: repeating-linear-gradient(
+  /**background: repeating-linear-gradient(
    135deg,
    #fce4ec,
    #fce4ec 40px,
    #fff 40px,
    #fff 80px
-  ) !important;
+  ) !important;**/
 }
@media print {
  section.erklaerung {
@@ -347,25 +347,18 @@ SPEAKER NOTES:

 # Das Problem: Komplexität

-Zwischen dir und einer Webseite liegen:
+![bg right:40% fit](./assets/demos/network-chain.png)

-```
-Dein Browser
-    ↓
-Deine Netzwerkkarte (WLAN oder Ethernet)
-    ↓
-Router im Flur / zu Hause
-    ↓
-Netzwerk der HdM / deines Providers
-    ↓
-Das Internet (dutzende Router)
-    ↓
-Netzwerk des Ziel-Servers
-    ↓
-Der Webserver
-```
+Zwischen Ihnen und einer Webseite liegen viele Stationen.

-Jede Komponente "spricht" anders.
+Jede Komponente "spricht" anders:
+
+- Browser → **HTTP**
+- Netzwerkkarte → **Bits / Signale**
+- Router → **IP-Pakete**
+- Provider → **Routing**
+
+Wie zusammenbringen?

 <!--
 SPEAKER NOTES:
@@ -406,10 +399,6 @@ SPEAKER NOTES:

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Das TCP/IP-Modell

 | Schicht | Name | Aufgabe | Protokolle |
@@ -461,19 +450,10 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum

 # Schichten verpacken Daten

-```
-Anwendung:  [ HTTP-Request: "GET /index.html" ]
-                 ↓ verpackt in
-Transport:  [ TCP-Header | HTTP-Request ]
-                 ↓ verpackt in
-Internet:   [ IP-Header | TCP-Header | HTTP-Request ]
-                 ↓ verpackt in
-Netzzugang: [ Eth-Header | IP-Header | TCP | HTTP | Eth-Trailer ]
-                 ↓
-Physik:     01001000 01010100 01010100...
-```
+![bg right:52% fit](./assets/demos/encap-layers.png)

 **Encapsulation:** Jede Schicht packt ein.
+
 **Decapsulation:** Beim Empfang wird ausgepackt.

 <!--
@@ -489,10 +469,6 @@ SPEAKER NOTES:

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Dateneinheiten pro Schicht

 | Schicht | Name | Dateneinheit | Was kommt hinzu? |
@@ -571,24 +547,7 @@ SPEAKER NOTES:

 # Exkurs: OSI vs. TCP/IP

-```
-    OSI (7 Schichten)              TCP/IP (4 Schichten)
-┌─────────────────────┐        ┌─────────────────────┐
-│  7. Anwendung       │        │                     │
-├─────────────────────┤        │      Anwendung      │
-│  6. Darstellung     │        │                     │
-├─────────────────────┤        │                     │
-│  5. Sitzung         │        │                     │
-├─────────────────────┤        ├─────────────────────┤
-│  4. Transport       │        │      Transport      │
-├─────────────────────┤        ├─────────────────────┤
-│  3. Vermittlung     │        │      Internet       │
-├─────────────────────┤        ├─────────────────────┤
-│  2. Sicherung       │        │                     │
-├─────────────────────┤        │     Netzzugang      │
-│  1. Bitübertragung  │        │                     │
-└─────────────────────┘        └─────────────────────┘
-```
+![h:440 center](./assets/demos/osi-tcpip-diagram.png)

 OSI = Theorie. TCP/IP = Realität.

@@ -668,10 +627,7 @@ SPEAKER NOTES:

 # Port: Das richtige Programm

-```
-212.132.79.37:443
-              └─── Port 443 = HTTPS
-```
+![bg right:38% fit](./assets/demos/port-highlight.png)

 - Identifiziert ein **Programm** auf einem Rechner
 - Ein Rechner, viele Dienste
@@ -699,10 +655,6 @@ SPEAKER NOTES:

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # IP vs. MAC vs. Port

 | | IP-Adresse | MAC-Adresse | Port |
@@ -755,7 +707,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
 <!-- _class: lead -->

 # Die Reise eines Klicks
-## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
+## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?

 <!--
 SPEAKER NOTES:
@@ -769,7 +721,7 @@ SPEAKER NOTES:

 # Das Szenario

-Du bist im WLAN der HdM und rufst auf:
+Sie sind im WLAN der HdM und rufen auf:

 ```
 https://www.hdm-stuttgart.de
@@ -790,23 +742,13 @@ SPEAKER NOTES:

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # Die Zeitlinie

-```
-[0 ms]     DNS: "Welche IP hat www.hdm-stuttgart.de?"
-              ↓
-[~20 ms]   DNS-Antwort: "212.132.79.37"
-              ↓
-[~25 ms]   TCP-Handshake beginnt
-              ↓
-[~50 ms]   TCP-Verbindung steht
-              ↓
-[~55 ms]   HTTP-Request: "GET /index.html"
-              ↓
-[~150 ms]  HTTP-Response: HTML kommt zurück
-              ↓
-[~200 ms]  Browser rendert die Seite
-```
+![h:560 center](./assets/demos/timeline.png)

 <!--
 SPEAKER NOTES:
@@ -841,7 +783,7 @@ SPEAKER NOTES:
 www.hdm-stuttgart.de  →  212.132.79.37
 ```

-Dein Laptop fragt sich durch:
+Ihr Laptop fragt sich durch:

 1. **Browser-Cache:** "War ich da kürzlich?" → Nein
 2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
@@ -860,19 +802,15 @@ SPEAKER NOTES:

 # Die DNS-Hierarchie

-```
-                    . (Root)
-                   /|\
-                  / | \
-               .de .com .org ...
-               /
-        hdm-stuttgart
-             |
-            www
-```
+![bg right:45% fit](./assets/demos/dns-tree.png)

 **Dezentral:** Niemand kennt alles.
-Jede Ebene kennt nur die nächste.
+
+Jede Ebene kennt nur die nächste:
+
+- Root → .de, .com, .org
+- .de → alle .de-Domains
+- hdm-stuttgart.de → www, mail, …

 <!--
 SPEAKER NOTES:
@@ -885,25 +823,15 @@ SPEAKER NOTES:

 ---

-# Der DNS-Lookup
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->

-```
-Dein Laptop → Resolver:    "Wo ist www.hdm-stuttgart.de?"
-
-Resolver → Root (.):       "Wer verwaltet .de?"
-                           ← "Frag 194.0.0.53"
-
-Resolver → .de-Server:     "Wer verwaltet hdm-stuttgart.de?"
-                           ← "Frag den Nameserver der HdM"
-
-Resolver → HdM-NS:         "Welche IP hat www?"
-                           ← "212.132.79.37"
-
-Resolver → Dein Laptop:    "Die IP ist 212.132.79.37"
-```
+![bg fit](./assets/demos/dns-lookup.png)

 <!--
 SPEAKER NOTES:
+- Titel: Der DNS-Lookup
 - Kompletter Ablauf (wenn nichts gecached)
 - Resolver = typisch beim Provider, macht Arbeit
 - Root → .de-Server → HdM-NS → IP
@@ -1000,31 +928,16 @@ SPEAKER NOTES:

 ---

-<!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
+<!-- _paginate: false -->

-# Der 3-Way-Handshake
-
-```
-Client (dein Laptop)                      Server
-    |                                        |
-    |-------- SYN (Seq=1000) --------------->|
-    |         "Ich will reden"               |
-    |                                        |
-    |<--- SYN-ACK (Seq=5000, Ack=1001) ------|
-    |     "OK, ich auch. Ich starte bei 5000"|
-    |                                        |
-    |-------- ACK (Ack=5001) --------------->|
-    |         "Verstanden, los geht's"       |
-    |                                        |
-    |        [ Verbindung steht ]            |
-```
-
-**SYN** = Synchronize · **ACK** = Acknowledge
+![bg fit](./assets/demos/tcp-handshake.png)

 <!--
 SPEAKER NOTES:
+- Titel: Der 3-Way-Handshake
+- SYN = Synchronize, ACK = Acknowledge
 - 3 Pakete → Verbindung steht
 - 1. Client SYN: "Will Verbindung, starte bei 1000"
 - 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"
@@ -1068,13 +981,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl

 **Status:** Die TCP-Verbindung steht.

-```
-Client:    141.62.xxx.xxx:52431
-                         └─── Zufälliger Port für diese Verbindung
-
-Server:    212.132.79.37:443
-                        └─── HTTPS-Port
-```
+![bg right:42% fit](./assets/demos/client-server-ports.png)

 **Jetzt erst** kann HTTP gesprochen werden.

@@ -1101,7 +1008,7 @@ SPEAKER NOTES:

 ---

-# Was dein Browser sendet
+# Was Ihr Browser sendet

 ```http
 GET / HTTP/1.1
@@ -1120,7 +1027,7 @@ Connection: keep-alive
 <!--
 SPEAKER NOTES:
 - HTTP-Request: lesbar, menschlich verständlich
- GET = "hol mir was" (POST = "hier Daten für dich")
+- GET = "hol mir was" (POST = "hier Daten für Sie")
 - "/" = Wurzel = Startseite
 - HTTP/1.1 = Protokollversion
 - Header: Kontext (Host, Browser, Sprache)
@@ -1146,17 +1053,7 @@ SPEAKER NOTES:

 HTTP-Request wird zum **Segment**:

-```
-┌─────────────────────────────────────────────────┐
-│ TCP-Header                                      │
-│ ┌─────────────┬─────────────┬─────────────────┐ │
-│ │ Source Port │ Dest Port   │ Sequence Number │ │
-│ │ 52431       │ 443         │ 1001            │ │
-│ └─────────────┴─────────────┴─────────────────┘ │
-├─────────────────────────────────────────────────┤
-│ Payload: "GET / HTTP/1.1..."                    │
-└─────────────────────────────────────────────────┘
-```
+![w:900 center](./assets/demos/tcp-segment.png)

 **Neu:** Ports + Sequenznummer

@@ -1177,17 +1074,7 @@ SPEAKER NOTES:

 Segment wird zum **Paket**:

-```
-┌─────────────────────────────────────────────────┐
-│ IP-Header                                       │
-│ ┌─────────────────┬─────────────────┐           │
-│ │ Source IP       │ Destination IP  │           │
-│ │ 141.62.xxx.xxx  │ 212.132.79.37   │           │
-│ └─────────────────┴─────────────────┘           │
-├─────────────────────────────────────────────────┤
-│ TCP-Segment (unverändert)                       │
-└─────────────────────────────────────────────────┘
-```
+![w:900 center](./assets/demos/ip-packet.png)

 **Neu:** IP-Adressen

@@ -1207,19 +1094,7 @@ SPEAKER NOTES:

 Paket wird zum **Frame**:

-```
-┌─────────────────────────────────────────────────┐
-│ Ethernet-Header                                 │
-│ ┌─────────────────┬─────────────────┐           │
-│ │ Source MAC      │ Destination MAC │           │
-│ │ aa:bb:cc:dd:ee  │ 11:22:33:44:55  │           │
-│ └─────────────────┴─────────────────┘           │
-├─────────────────────────────────────────────────┤
-│ IP-Paket (unverändert)                          │
-├─────────────────────────────────────────────────┤
-│ FCS (Frame Check Sequence / Prüfsumme)          │
-└─────────────────────────────────────────────────┘
-```
+![w:900 center](./assets/demos/ethernet-frame.png)

 **Wichtig:** Destination MAC = **Router**, nicht Server!

@@ -1236,17 +1111,11 @@ SPEAKER NOTES:

 ---

-# Woher kennt dein Laptop die Router-MAC?
+# Woher kennt Ihr Laptop die Router-MAC?

 **ARP** – Address Resolution Protocol

-```
-Laptop (Broadcast):
-    "Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
-
-Router:
-    "Das bin ich! Meine MAC ist 11:22:33:44:55:66"
-```
+![w:900 center](./assets/demos/arp-lookup.png)

 Das passiert automatisch. Die Info wird gecached.

@@ -1303,11 +1172,9 @@ SPEAKER NOTES:

 ---

-# Der erste Hop: Dein Router
+# Der erste Hop: Ihr Router

-```
-Laptop → [Frame] → Router
-```
+**Laptop** → [Frame] → **Router**

 Der Router empfängt:

@@ -1330,19 +1197,7 @@ SPEAKER NOTES:

 # Der Router verpackt NEU

-```
-┌─────────────────────────────────────────────────┐
-│ Ethernet-Header (NEU!)                          │
-│ ┌─────────────────┬─────────────────┐           │
-│ │ Source MAC      │ Destination MAC │           │
-│ │ Router-MAC      │ Nächster-Router │           │
-│ └─────────────────┴─────────────────┘           │
-├─────────────────────────────────────────────────┤
-│ IP-Paket (UNVERÄNDERT)                          │
-│ Source: 141.62.xxx.xxx                          │
-│ Dest: 212.132.79.37                             │
-└─────────────────────────────────────────────────┘
-```
+![w:900 center](./assets/demos/ethernet-rehop.png)

 **IP bleibt gleich. MAC ändert sich.**

@@ -1361,19 +1216,15 @@ SPEAKER NOTES:

 # Mehrere Hops

-```
-Dein Laptop
-    ↓ [Frame an Router 1]
-Router HdM-Netz
-    ↓ [Frame an Router 2]
-Router BelWü
-    ↓ [Frame an Router 3]
-...
-    ↓ [Frame an Server]
-Webserver der HdM
-```
+![bg right:35% fit](./assets/demos/hop-chain.png)

-Bei jedem Hop: Auspacken bis Layer 3, Routing, neu verpacken.
+Bei jedem Hop:
+
+1. Auspacken bis Layer 3 (IP)
+2. Routing-Entscheidung
+3. Neu verpacken mit nächster MAC
+
+IP bleibt gleich · MAC ändert sich jedes Mal.

 <!--
 SPEAKER NOTES:
@@ -1401,19 +1252,11 @@ SPEAKER NOTES:

 # Decapsulation am Server

-```
-Bits empfangen (Layer 1)
-    ↓
-Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
-    ↓
-IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
-    ↓
-TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
-    ↓
-HTTP lesen: "GET / HTTP/1.1" (Layer 7)
-```
+![bg right:42% fit](./assets/demos/server-decap.png)

-Der Webserver versteht: "Jemand will die Startseite."
+Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+
+Am Ende versteht der Webserver: "Jemand will die Startseite."

 <!--
 SPEAKER NOTES:
@@ -1442,7 +1285,7 @@ Content-Length: 45231
 ...
 ```

-~45 KB HTML müssen jetzt zu dir.
+~45 KB HTML müssen jetzt zu Ihnen.

 <!--
 SPEAKER NOTES:
@@ -1458,17 +1301,7 @@ SPEAKER NOTES:

 Der Server macht **dasselbe** – nur in die andere Richtung:

-```
-HTTP-Response: "HTTP/1.1 200 OK..."
-    ↓
-TCP: Dest-Port: 52431 (dein Browser!)
-    ↓
-IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
-    ↓
-Ethernet: Dest-MAC: Router des Server-Netzes
-    ↓
-Bits
-```
+![bg right:40% fit](./assets/demos/encap-stack.png)

 <!--
 SPEAKER NOTES:
@@ -1483,17 +1316,13 @@ SPEAKER NOTES:

 # Die Antwort reist zurück

-```
-Server
-    ↓
-Router → Router → Router → ...
-    ↓
-Router HdM
-    ↓
-Dein Laptop
-```
+![bg right:38% fit](./assets/demos/response-hops.png)

-Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
+Gleiches Spiel wie der Hinweg:
+
+- Hop für Hop durchs Internet
+- **IP bleibt gleich** (Start/Ziel)
+- **MAC ändert sich** bei jedem Router

 <!--
 SPEAKER NOTES:
@@ -1504,21 +1333,13 @@ SPEAKER NOTES:

 ---

-# Decapsulation bei dir
+# Decapsulation bei Ihnen

-```
-Bits empfangen
-    ↓
-Frame: MAC = meine MAC? → Auspacken
-    ↓
-IP: Ziel-IP = meine IP? → Auspacken
-    ↓
-TCP: Port 52431 = mein Browser → Auspacken
-    ↓
-HTTP: "HTTP/1.1 200 OK..."
-    ↓
-Browser rendert die Seite
-```
+![bg right:42% fit](./assets/demos/decap-stack.png)
+
+Rückweg = Encapsulation umgekehrt.
+
+Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.

 <!--
 SPEAKER NOTES:
@@ -1543,10 +1364,6 @@ SPEAKER NOTES:

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # TCP vs. UDP

 | | TCP | UDP |
@@ -1648,10 +1465,6 @@ SPEAKER NOTES:

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # HTTP-Methoden

 | Methode | Bedeutung | Beispiel |
@@ -1713,10 +1526,6 @@ POST /users          → Neuen Benutzer erstellen

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # HTTP Status-Codes

 ```http
@@ -1773,10 +1582,6 @@ Die erste Ziffer kategorisiert die Antwort:

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Zusammenfassung Teil 1

 **Der Ablauf:**
@@ -1889,6 +1694,8 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe

 # Was ist CSS?

+![bg right:35%](./assets/demos/css-anatomie.png)
+
 **C**ascading **S**tyle **S**heets

 ```css
@@ -1984,6 +1791,8 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.

 # Selektoren: Element

+![bg right:35%](./assets/demos/css-selector-element.png)
+
 ```css
 /* Alle <p>-Elemente */
 p {
@@ -2012,6 +1821,8 @@ Komma bedeutet "oder" – h1 oder h2 oder h3.

 # Selektoren: Klasse

+![bg right:35%](./assets/demos/css-selector-class.png)
+
 ```html
 <p class="wichtig">Dieser Text ist wichtig.</p>
 <p>Dieser nicht.</p>
@@ -2040,6 +1851,8 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann

 # Selektoren: ID

+![bg right:35%](./assets/demos/css-selector-id.png)
+
 ```html
 <nav id="hauptnavigation">...</nav>
 ```
@@ -2069,6 +1882,8 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un

 # Selektoren: Kombinationen

+![bg right:35%](./assets/demos/css-combinators.png)
+
 ```css
 /* Nachfahre (beliebig tief verschachtelt) */
 article p { line-height: 1.6; }
@@ -2099,12 +1914,10 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Spezifität: Welche Regel gewinnt?

+![bg right:35%](./assets/demos/css-specificity.png)
+
 | Selektor | Spezifität |
 |----------|------------|
 | Element (`p`) | 0,0,0,1 |
@@ -2163,22 +1976,18 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen

 # Box-Modell

-```
-┌─────────────────────────────────────┐
-│              margin                 │
-│   ┌─────────────────────────────┐   │
-│   │          border             │   │
-│   │   ┌─────────────────────┐   │   │
-│   │   │       padding       │   │   │
-│   │   │   ┌─────────────┐   │   │   │
-│   │   │   │   content   │   │   │   │
-│   │   │   └─────────────┘   │   │   │
-│   │   └─────────────────────┘   │   │
-│   └─────────────────────────────┘   │
-└─────────────────────────────────────┘
-```
+![bg right:42% fit](./assets/demos/box-model-diagram.png)

-Jedes Element ist eine Box.
+Jedes HTML-Element ist eine rechteckige **Box**.
+
+**Schichten innen → außen:**
+
+- **content** – Inhalt (Text, Bild)
+- **padding** – Innenabstand
+- **border** – Rahmen
+- **margin** – Außenabstand
+
+<small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>

 <!--
 SPEAKER NOTES:
@@ -2200,6 +2009,8 @@ Margin: Außenabstand. Zwischen diesem Element und anderen.

 # Box-Modell: CSS

+![bg right:35%](./assets/demos/css-box-model.png)
+
 ```css
 .box {
    width: 200px;
@@ -2232,6 +2043,8 @@ Best Practice: Setzt das global für alle Elemente.

 # Farben

+![bg right:35%](./assets/demos/css-colors.png)
+
 ```css
 /* Keyword */
 color: red;
@@ -2300,6 +2113,8 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.

 # Pseudo-Klassen

+![bg right:35%](./assets/demos/css-pseudo-classes.png)
+
 ```css
 /* Hover – Maus drüber */
 a:hover { color: red; }
@@ -2335,6 +2150,8 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.

 # Pseudo-Elemente

+![bg right:35%](./assets/demos/css-pseudo-elements.png)
+
 ```css
 /* Vor dem Inhalt einfügen */
 .required::before {
@@ -2365,19 +2182,17 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->

 # Responsive Design

+![bg right:35%](./assets/demos/css-responsive.png)
+
 ```css
 /* Mobile First: Basis-Styles */
 .container {
    padding: 1rem;
    background: white;
 }
-
 /* Ab 768px (Tablet): Anpassungen */
@media (min-width: 768px) {
    .container {
@@ -2385,7 +2200,6 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
        background: red;
    }
 }
-
 /* Ab 1024px (Desktop): Weitere Anpassungen */
@media (min-width: 1024px) {
    .container {
@@ -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");
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Fokus-Indikator</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
+    :focus, .is-focused {
+      outline: 2px solid blue;
+      outline-offset: 2px;
+    }
+    button:focus-visible, button.is-focused {
+      box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+    }
+    button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
+  </style>
+</head>
+<body>
+  <p>Tab-Taste drücken:</p>
+  <button class="is-focused">Erster Button</button>
+  <button>Zweiter Button</button>
+  <button>Dritter Button</button>
+</body>
+</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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-selector-class</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/selector-class.html</span>
+    </div>
+    <iframe src="./css-selector-class.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Klassen-Selektor</title>
+  <style>
+    body { padding: 1.2rem; font-family: system-ui, sans-serif; }
+    .wichtig { color: red; font-weight: bold; }
+  </style>
+</head>
+<body>
+  <p class="wichtig">Dieser Text ist wichtig.</p>
+  <p>Dieser nicht.</p>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-selector-element</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/selector-element.html</span>
+    </div>
+    <iframe src="./css-selector-element.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Element-Selektor</title>
+  <style>
+    body { padding: 1.2rem; }
+    p { color: gray; font-family: Georgia, serif; }
+    h1, h2, h3 { font-family: sans-serif; }
+  </style>
+</head>
+<body>
+  <h1>Überschrift (sans-serif)</h1>
+  <p>Absatz: grau, Georgia (serif).</p>
+  <h2>Untertitel (sans-serif)</h2>
+  <p>Noch ein grauer Absatz.</p>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-selector-id</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/selector-id.html</span>
+    </div>
+    <iframe src="./css-selector-id.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>ID-Selektor</title>
+  <style>
+    body { padding: 0; margin: 0; font-family: system-ui, sans-serif; }
+    #hauptnavigation {
+      background: #333;
+      padding: 1rem;
+      color: white;
+    }
+    #hauptnavigation a { color: #fff; margin-right: 1rem; }
+  </style>
+</head>
+<body>
+  <nav id="hauptnavigation">
+    <a href="#">Home</a>
+    <a href="#">Kurse</a>
+    <a href="#">Kontakt</a>
+  </nav>
+  <p style="padding: 1rem;">Rest der Seite.</p>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: css-specificity</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/specificity.html</span>
+    </div>
+    <iframe src="./css-specificity.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Spezifität</title>
+  <style>
+    body { padding: 1.2rem; font-family: system-ui, sans-serif; }
+    p { color: blue; }          /* 0,0,0,1 */
+    .text { color: green; }     /* 0,0,1,0 */
+    #intro { color: red; }      /* 0,1,0,0 */
+    code { background: #f3f4f6; padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
+    .row { margin-bottom: 10px; }
+    .label { color: #6b7280; font-size: 0.85em; }
+  </style>
+</head>
+<body>
+  <div class="row">
+    <p>Nur <code>p</code>: <strong>blau</strong></p>
+    <span class="label">0,0,0,1</span>
+  </div>
+  <div class="row">
+    <p class="text">Nur <code>.text</code>: <strong>grün</strong> schlägt p</p>
+    <span class="label">0,0,1,0 &gt; 0,0,0,1</span>
+  </div>
+  <div class="row">
+    <p id="intro" class="text">ID <code>#intro</code>: <strong>rot</strong> schlägt alles</p>
+    <span class="label">0,1,0,0 &gt; 0,0,1,0</span>
+  </div>
+</body>
+</html>
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Decapsulation Stack</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 30px; display: inline-block; }
+    .stack { display: flex; flex-direction: column; gap: 0; }
+    .layer {
+      border: 2px solid;
+      border-radius: 6px;
+      padding: 10px 18px;
+      min-width: 540px;
+      font-size: 0.95rem;
+      margin-bottom: 4px;
+    }
+    .layer-name { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
+    .layer-desc { font-family: ui-monospace, monospace; margin-top: 3px; }
+    .check { margin-top: 3px; font-size: 0.85rem; font-style: italic; }
+    .http { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
+    .tcp { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
+    .ip { background: #dcfce7; border-color: #15803d; color: #14532d; }
+    .eth { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
+    .bit { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
+    .arrow {
+      align-self: center;
+      width: 0; height: 0;
+      border-left: 9px solid transparent;
+      border-right: 9px solid transparent;
+      border-top: 12px solid #d63384;
+      margin: 2px 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="stack">
+    <div class="layer bit">
+      <div class="layer-name">Physical</div>
+      <div class="layer-desc">Bits empfangen</div>
+    </div>
+    <div class="arrow"></div>
+    <div class="layer eth">
+      <div class="layer-name">Ethernet-Frame</div>
+      <div class="check">MAC = meine MAC? ✓ auspacken</div>
+    </div>
+    <div class="arrow"></div>
+    <div class="layer ip">
+      <div class="layer-name">IP-Paket</div>
+      <div class="check">Ziel-IP = meine IP? ✓ auspacken</div>
+    </div>
+    <div class="arrow"></div>
+    <div class="layer tcp">
+      <div class="layer-name">TCP-Segment</div>
+      <div class="check">Port 52431 = mein Browser? ✓ auspacken</div>
+    </div>
+    <div class="arrow"></div>
+    <div class="layer http">
+      <div class="layer-name">HTTP-Response</div>
+      <div class="layer-desc">"HTTP/1.1 200 OK ..."</div>
+      <div class="check">→ Browser rendert Seite</div>
+    </div>
+  </div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: details-closed</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/details.html</span>
+    </div>
+    <iframe src="./details-closed.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Details/Summary</title>
+</head>
+<body>
+  <details>
+    <summary>Klick mich!</summary>
+    <p>Dieser Text war versteckt.</p>
+  </details>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: details-open</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/details.html</span>
+    </div>
+    <iframe src="./details-open.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Details/Summary (offen)</title>
+</head>
+<body>
+  <details open>
+    <summary>Klick mich!</summary>
+    <p>Dieser Text war versteckt.</p>
+  </details>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: dialog</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/dialog.html</span>
+    </div>
+    <iframe src="./dialog.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Dialog</title>
+</head>
+<body>
+  <dialog open>
+    <p>Greetings, one and all!</p>
+    <form method="dialog">
+      <button>OK</button>
+    </form>
+  </dialog>
+</body>
+</html>
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>DNS-Lookup Sequence</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 30px; display: inline-block; }
+    .diagram { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; min-width: 900px; }
+    .actor {
+      background: #1a1a2e;
+      color: #fff;
+      padding: 10px;
+      text-align: center;
+      border-radius: 4px;
+      font-weight: 700;
+      font-size: 0.85rem;
+    }
+    .lifeline {
+      border-left: 2px dashed #9ca3af;
+      margin-left: 50%;
+      height: 480px;
+      position: relative;
+    }
+    .msg {
+      position: absolute;
+      padding: 6px 10px;
+      background: #f3f4f6;
+      border: 1px solid #4a4a6a;
+      border-radius: 4px;
+      font-size: 0.8rem;
+      white-space: nowrap;
+    }
+    .arrow-right {
+      position: absolute;
+      height: 2px;
+      background: #d63384;
+    }
+    .arrow-right::after {
+      content: "";
+      position: absolute;
+      right: -1px; top: -4px;
+      border-left: 8px solid #d63384;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+    }
+    .arrow-left {
+      position: absolute;
+      height: 2px;
+      background: #15803d;
+    }
+    .arrow-left::before {
+      content: "";
+      position: absolute;
+      left: -1px; top: -4px;
+      border-right: 8px solid #15803d;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+    }
+    .arrow-label {
+      position: absolute;
+      font-size: 0.75rem;
+      background: #fff;
+      padding: 1px 5px;
+      white-space: nowrap;
+    }
+    .ask { color: #7c2d12; }
+    .reply { color: #14532d; font-style: italic; }
+  </style>
+</head>
+<body>
+  <div class="diagram">
+    <div class="actor">Ihr Laptop</div>
+    <div class="actor">Resolver</div>
+    <div class="actor">Root (.)</div>
+    <div class="actor">.de-Server</div>
+    <div class="actor">HdM-NS</div>
+    <!-- lifelines (5 cols) -->
+    <div style="position: relative; grid-column: 1 / span 5; height: 520px;">
+      <!-- vertical dashed lines per actor at 10%, 30%, 50%, 70%, 90% -->
+      <div style="position: absolute; left: 10%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
+      <div style="position: absolute; left: 30%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
+      <div style="position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
+      <div style="position: absolute; left: 70%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
+      <div style="position: absolute; left: 90%; top: 0; bottom: 0; border-left: 2px dashed #9ca3af;"></div>
+
+      <!-- Laptop → Resolver at y=20 -->
+      <div style="position: absolute; left: 10%; top: 20px; width: 20%; height: 2px; background: #d63384;"></div>
+      <div style="position: absolute; left: 30%; top: 16px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
+      <div style="position: absolute; left: 12%; top: 0; font-size: 0.75rem; color: #7c2d12;">"Wo ist www.hdm-stuttgart.de?"</div>
+
+      <!-- Resolver → Root at y=90 -->
+      <div style="position: absolute; left: 30%; top: 90px; width: 20%; height: 2px; background: #d63384;"></div>
+      <div style="position: absolute; left: 50%; top: 86px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
+      <div style="position: absolute; left: 32%; top: 70px; font-size: 0.75rem; color: #7c2d12;">"Wer verwaltet .de?"</div>
+
+      <!-- Root → Resolver at y=150 -->
+      <div style="position: absolute; left: 30%; top: 150px; width: 20%; height: 2px; background: #15803d;"></div>
+      <div style="position: absolute; left: 30%; top: 146px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
+      <div style="position: absolute; left: 32%; top: 130px; font-size: 0.75rem; color: #14532d; font-style: italic;">"Frag 194.0.0.53"</div>
+
+      <!-- Resolver → .de at y=220 -->
+      <div style="position: absolute; left: 30%; top: 220px; width: 40%; height: 2px; background: #d63384;"></div>
+      <div style="position: absolute; left: 70%; top: 216px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
+      <div style="position: absolute; left: 32%; top: 200px; font-size: 0.75rem; color: #7c2d12;">"Wer verwaltet hdm-stuttgart.de?"</div>
+
+      <!-- .de → Resolver at y=280 -->
+      <div style="position: absolute; left: 30%; top: 280px; width: 40%; height: 2px; background: #15803d;"></div>
+      <div style="position: absolute; left: 30%; top: 276px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
+      <div style="position: absolute; left: 32%; top: 260px; font-size: 0.75rem; color: #14532d; font-style: italic;">"Frag Nameserver der HdM"</div>
+
+      <!-- Resolver → HdM at y=350 -->
+      <div style="position: absolute; left: 30%; top: 350px; width: 60%; height: 2px; background: #d63384;"></div>
+      <div style="position: absolute; left: 90%; top: 346px; transform: translateX(-100%);"><div style="border-left: 8px solid #d63384; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
+      <div style="position: absolute; left: 32%; top: 330px; font-size: 0.75rem; color: #7c2d12;">"Welche IP hat www?"</div>
+
+      <!-- HdM → Resolver at y=410 -->
+      <div style="position: absolute; left: 30%; top: 410px; width: 60%; height: 2px; background: #15803d;"></div>
+      <div style="position: absolute; left: 30%; top: 406px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
+      <div style="position: absolute; left: 32%; top: 390px; font-size: 0.75rem; color: #14532d; font-style: italic;">"212.132.79.37"</div>
+
+      <!-- Resolver → Laptop at y=480 -->
+      <div style="position: absolute; left: 10%; top: 480px; width: 20%; height: 2px; background: #15803d;"></div>
+      <div style="position: absolute; left: 10%; top: 476px;"><div style="border-right: 8px solid #15803d; border-top: 5px solid transparent; border-bottom: 5px solid transparent;"></div></div>
+      <div style="position: absolute; left: 12%; top: 460px; font-size: 0.75rem; color: #14532d; font-style: italic;">"IP ist 212.132.79.37"</div>
+    </div>
+  </div>
+</body>
+</html>
Author	SHA1	Message	Date
libretech	ec800d28ae	a11y werkzeuge-folie überarbeitet: screenreader tabelle, orca/talkback, wcag-formulierungen	2026-04-21 23:38:06 +02:00
libretech	80786cb040	a11y folien feinschliff, input-date demo, tag-attribut demo update, synonyme	2026-04-21 23:32:30 +02:00
libretech	67857b9bfd	a11y vertiefung: keyboard-demo, input-devices, mdn-links vereinheitlicht	2026-04-21 20:58:52 +02:00
libretech	cedda338df	double qr overlay size on wave slide	2026-04-21 19:43:11 +02:00
libretech	bfe7f3576a	add inverted wave qr overlay on tab-order slide	2026-04-21 19:35:19 +02:00
libretech	6b21b45e01	shrink mdn reference urls to compact text links	2026-04-20 18:26:50 +02:00
libretech	aeaeed6867	wave-tab-order as standalone full-bleed slide	2026-04-20 18:24:14 +02:00
libretech	72b7d51af9	add contrast-levels demo, wave-tab-order image, link a11y tools, mark axe as paid/pro	2026-04-20 18:22:42 +02:00
libretech	bd5d7f0028	disable klausurfolien and klausurfragen cards on index (still being reworked)	2026-04-20 13:35:08 +02:00
libretech	b6334035fc	add js basics demos: console, arrays, objects, loops	2026-04-20 13:25:09 +02:00
libretech	7626852ac1	add js demos for chapter 3: manipulate, classlist, create, events, preventdefault, todo, fetch, localstorage	2026-04-20 13:14:56 +02:00
libretech	754ff9436c	add dark mode js demo on chapter 3 slide	2026-04-20 12:54:52 +02:00
libretech	0367f07166	fix broken dns tree and port connector, full-bleed handshake and dns-lookup slides, siezen in all demos, first-letter sizing	2026-04-20 12:06:04 +02:00
libretech	c45ddc779c	replace arp dialog with visual, inline first-hop arrow	2026-04-20 11:52:13 +02:00
libretech	5b7170e5f4	remove stray handshake png from repo root	2026-04-20 11:48:06 +02:00
libretech	cbebc1a6f7	remove klausur class from chapter 2, siezen students, add server-decap demo, hide header/footer on oversized slides	2026-04-20 11:47:55 +02:00
libretech	8ed7796968	replace ascii trees: dns hierarchy, dom structure	2026-04-20 11:38:28 +02:00
libretech	5d4d167cbd	replace ascii: encap layers, timeline, dns lookup sequence, hop chain	2026-04-20 11:34:56 +02:00
libretech	6c8688c9f6	replace ascii arrows: network chain, port highlight, client/server, encap/decap, response hops	2026-04-20 11:27:28 +02:00
libretech	54ba08cdbc	mark css einheiten slide as klausur	2026-04-20 11:11:57 +02:00
libretech	777e0ffddb	replace ascii encapsulation diagrams: tcp, ip, ethernet, router re-hop	2026-04-20 11:10:47 +02:00
libretech	76f7ff3a46	replace ascii osi/tcpip layer diagram with rendered visual	2026-04-20 11:06:16 +02:00
libretech	b3c0994b7e	replace ascii box-model with diagram, expand explanation	2026-04-20 10:59:00 +02:00
libretech	fb361a2854	add css demos for 223015c chapter 2: selectors, specificity, box-model, colors, pseudo, responsive	2026-04-20 10:53:11 +02:00
libretech	a2934f1327	add html/css demos for 223015c chapter 1: html basics, widgets, a11y	2026-04-20 10:44:12 +02:00
libretech	558d0e5ecd	update 223015c chapter 1: wording, formatting, gendering	2026-04-20 10:27:06 +02:00
libretech	6aba40e128	rename materials wtf1-3 to hex1-3 and add hex4, hex5	2026-04-17 12:37:12 +02:00
libretech	f6d9992a2c	add grayscale gradient svg and zoom slide - replace grayscale-gradient.png with svg (256 discrete rects) - add grayscale-zoom.svg: 16 brightest shades with decimal + hex labels - add zoom slide after '256 shades of gray' - minor tweaks: Mbps capitalization, remove redundant '256' prefix in states list	2026-04-17 12:37:09 +02:00
libretech	3e7fdf5dfc	fix order	2026-04-17 03:34:01 +02:00
libretech	85ff73774c	fix questions	2026-04-17 02:57:54 +02:00
libretech	e5e7d80050	update 223015b chapter 1: step-by-step reveals, content tweaks - split 'ein konkretes beispiel' into 5 progressive reveal slides - add lead slide 'das problem der datengröße oder knappen speichers' - add samplerate.webp background to 'zurück zu analog' slides - rework bandbreite slide: klausur class, clearer mbit/s vs mb/s framing - update 'was sind daten': hausarbeit, 3d-rendering examples - add matrix red/blue pill to das bit slide - replace dvd.jpg with kubrick.jpg for video eskaliert slide - minor wording fixes (mögliche zustände, mbps notation)	2026-04-17 01:42:38 +02:00
libretech	8c2f388c7f	update 223015b chapter 1: remove unused slides, fix erklaerung comment, reorder hex slide content - remove placeholder todo slides and compression-types image slide - remove hex-dec-lookup-table slide - remove dateneinheiten-vertiefung erklaerung slide - fix broken erklaerung comment block in kompression-vertiefung - reorder hexadezimal slide: nibble definition before ascii table link	2026-04-17 00:44:29 +02:00
libretech	1bbe41b6fc	update 223015b chapter 1: new assets, slide edits, asset cleanup - add druckwelle.png, samplerate.webp, kubrick.jpg, morpheus.jpg - remove Red-Pill-Blue-Pill-in-Matrix.jpg - update slide content	2026-04-16 22:18:15 +02:00
libretech	fde51856ce	fix 223015b chapter 1: marp fragment pattern for druckwelle + zurück zu analog - split 'schall ist eine druckwelle' into two slides: * fragments then full reveal + vinyl line - split 'zurück zu analog' into two slides: * fragments for dac chain then full reveal + conclusion - apply duplicate-slide reveal pattern consistently	2026-04-16 21:55:00 +02:00
libretech	8935f31091	rework 223015b chapter 1: analog/digital narrative arc replace flat analog-vs-digital slide and sampling overview with four-slide narrative: schallwelle → abtastung → digitales ergebnis → zurück zu analog (dac). builds a causal chain from sound wave through digitization back to playback.	2026-04-16 18:29:41 +02:00
libretech	81156284ac	update 223015b chapter 1: new slides, speaker notes, abbreviation fixes - add download/upload speed slides with ADSL/FTTH context - add quiz slide (250 Mbit/s → MB/min) - add analog vs. digital and sampling slides - add cd-audio vertiefung (erklaerung slide) - expand "was sind daten?" with content - expand speaker notes with sources and terminology (DE/EN) - resolve all abbreviations in speaker notes: FTTH, ITU, NTSC, PAL, NHK, IEC - fix typo: "eie" → "eine" binärdatei - fix spelling: "spektrogram" → "spektrogramm" - update zettabyte example and 181 ZB as projection not fact	2026-04-16 18:10:00 +02:00
libretech	7dd46de5d9	WIP: dateiformate rework	2026-04-16 11:20:08 +02:00
libretech	7d8e9f596c	add diday and palantir slides to 223015c chapter 1	2026-04-10 09:18:58 +02:00
libretech	ef0a55db77	update 223015c chapter 1: new hex table, zahlensysteme slide, fix byte to 42	2026-04-10 09:18:44 +02:00
libretech	ceb5f89320	update 223015b chapter 1: add floridi source to speaker notes, fix artemis slide	2026-04-10 09:18:37 +02:00
libretech	a18afde2db	update 223015b intro: fix umfrage wording, remove suggestive question	2026-04-10 09:18:30 +02:00
libretech	38563e2142	fix growth-of-big-data image: rename to remove spaces, hide footer	2026-04-10 01:29:16 +02:00
libretech	aeb0adada9	update 223015b chapter 1: add images, artemis slide, fix hex table - add cd logo, cd player, dvd, artemis images - add artemis ii slide with apollo comparison and bandwidth calculation - regenerate hex-dec lookup table as 16x16 grid with ascii highlight - move hex-dec table next to hexadezimal slides - fix mp3 bitrate: 320 -> 128 kbps to match stated file size	2026-04-10 01:10:26 +02:00
libretech	e58dacd98c	rework 223015b intro: cleaner structure, new umfrage, consolidate slides - update über mich (full name, proper title) - remove ama/jung-naiv slides - new course-specific umfrage questions with speaker notes - consolidate warum/ziel/kompetenzen into two slides - chapter-based kursübersicht, klausur-styled prüfungsleistung	2026-04-10 01:10:17 +02:00
libretech	edc9225ccf	add assembler and fortran slides to 223015c chapter 1 - assembler (1947): kathleen booth, mnemonics, rollercoaster tycoon - fortran (1957): john backus, lois haibt, formula translator - detailed speaker notes with biographical and technical context	2026-04-09 22:11:11 +02:00
libretech	5b94593d94	update 223015b klausurfolien: endnutzer -> endnutzerInnen	2026-04-09 22:11:04 +02:00
libretech	3bd6d7b459	update 223015b chapter 1: content fixes, expand speaker notes with abbreviations - endnutzer -> endnutzerInnen, fix lossy reversibility wording - add tar to deflate examples, reword shannon-limit - expand kompression-vertiefung speaker notes: lz77/lz78/deflate/tar explained - resolve all abbreviations in speaker notes (cmyk, rgb, css, html, http, smtp, url, cjk, utf-8, si, iec, iot, lto, ssd, hdd, ecc, raid, vhs, fft, jpeg, aac, riaa, foss, iis, rle) - minor slide fixes: hex examples, byte value, wording improvements	2026-04-09 22:10:59 +02:00
libretech	c57db78c52	rework dev server: hmr for all courses, per-course targets, root index - make dev serves all courses on port 1312 with marp live reload - make dev-b/dev-c for single course on 1313/1314 - dev-kill only kills specific ports instead of all marp processes - add generate-root-index.sh for prod build overview page - cleanup function uses exec + trap instead of pid files	2026-04-09 22:10:48 +02:00
libretech	c1277cc737	update 223015c chapter 1: add mosaic browser image, remove duplicate speaker notes	2026-03-27 09:46:56 +01:00
libretech	fd8b107643	add 00-intro for 223015c, update chapter 1 speaker notes and five eyes - new intro deck for 223015c with adapted content, colors, and assets - chapter 1: expanded sputnik/kalter krieg speaker notes, five eyes on unterseekabel slide - bits/bytes table: added factor 8 conversion, removed 1tb slide	2026-03-27 09:41:29 +01:00