gendering: fehlende person-substantive in beiden kursen

- Nutzer/User -> Nutzende - Endnutzer -> Endnutzende - Teilnehmer -> Teilnehmende - Programmierer/Entwickler -> Programmierende/Entwickelnde - Web-Entwickler -> Web-Entwickelnde - Tastatur-Nutzer -> Tastatur-Nutzende - Benutzer -> Nutzende - Konsumenten -> KonsumentInnen - Künstler -> KünstlerInnen - Autor -> AutorIn - Fotografen -> FotografInnen - Kunde -> KundIn ausgenommen: code-identifiers (User, type User, /users/), Sender/Empfänger (network protocol), Sawyer (konkrete person), Hersteller/Betreiber (organisations-rolle).
selbstlernen hex links: absolute urls fuer PDF-klick
2026-04-27 17:27:19 +02:00 · 2026-04-27 16:29:09 +02:00 · 2026-04-27 16:10:01 +02:00 · 2026-04-27 15:04:45 +02:00 · 2026-04-27 01:26:31 +02:00 · 2026-04-27 00:53:48 +02:00
107 changed files with 5646 additions and 307 deletions
@@ -0,0 +1,21 @@
+const { Marp } = require('@marp-team/marp-core');
+const hljs = require('highlight.js');
+
+module.exports = {
+  engine: (opts) => {
+    const marp = new Marp(opts);
+    const md = marp.markdown;
+    const defaultInline = md.renderer.rules.code_inline
+      || ((tokens, idx, options, env, self) => `<code>${md.utils.escapeHtml(tokens[idx].content)}</code>`);
+    md.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
+      const content = tokens[idx].content;
+      try {
+        const highlighted = hljs.highlight(content, { language: 'html', ignoreIllegals: true }).value;
+        return `<code class="hljs language-html">${highlighted}</code>`;
+      } catch (e) {
+        return defaultInline(tokens, idx, options, env, self);
+      }
+    };
+    return marp;
+  }
+};
@@ -13,11 +13,18 @@
    "deploy": "make deploy",
    "test": "echo \"No tests specified\" && exit 0"
  },
-  "keywords": ["marp", "slides", "hdm", "lectures"],
+  "keywords": [
+    "marp",
+    "slides",
+    "hdm",
+    "lectures"
+  ],
  "author": "Michael Czechowski <mail@librete.ch>",
  "license": "CC-BY-SA-4.0",
  "type": "commonjs",
  "devDependencies": {
-    "@marp-team/marp-cli": "^4.2.3"
+    "@marp-team/marp-cli": "^4.2.3",
+    "@marp-team/marp-core": "^4.3.0",
+    "highlight.js": "^11.11.1"
  }
 }
@@ -41,4 +41,4 @@ echo -e "  ${BLUE}http://localhost:$DEV_PORT${NC}"
 echo -e "  ${BLUE}$SERVE_DIR/${NC}"
 echo ""

-PORT=$DEV_PORT exec npx @marp-team/marp-cli --server "$SERVE_DIR/"
+PORT=$DEV_PORT exec npx @marp-team/marp-cli -c marp.config.js --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
@@ -40,11 +40,13 @@ pre code {
  color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
  padding: 0.15em 0.4em;
  border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -40,11 +40,13 @@ pre code {
  color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
  padding: 0.15em 0.4em;
  border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -73,11 +75,6 @@ section.erklaerung :not(footer)
 {
  font-size: 1.1rem;
 }
-@media print {
-  section.erklaerung {
-    background: #e3f2fd !important;
-  }
-}
 section.erklaerung h1 {
  font-size: 1.5rem;
  color: #1e5f8a;
@@ -351,7 +348,7 @@ dann **150 Mbit/s ÷ 8** = **18,75 MB/s**
 **50 MB Upload bei 10 Mbit/s = ~40 Sekunden**

 <!--
- ADSL (Asymmetric Digital Subscriber Line, ITU = International Telecommunication Union, Norm G.992.1, 1999): Upload bewusst begrenzt — Annahme war, Nutzer konsumieren mehr als sie produzieren
+- ADSL (Asymmetric Digital Subscriber Line, ITU = International Telecommunication Union, Norm G.992.1, 1999): Upload bewusst begrenzt — Annahme war, Nutzende konsumieren mehr als sie produzieren
 - FTTH = Fiber To The Home (Glasfaser bis in die Wohnung)
 - Glasfaser (FTTH) symmetrisch: Upload = Download
 - FTTH-Verfügbarkeit Deutschland Ende 2024: ~40% der Haushalte (Bundesnetzagentur, Breitbandatlas)
@@ -437,7 +434,7 @@ Jede Messung = ein Zahlenwert
 <!--
 - Dynamikumfang Formel: ~6 dB pro Bit
 - 16 Bit reicht für menschliches Hören unter realen Bedingungen (~80–90 dB)
- 24 Bit im Studio: mehr Headroom für Bearbeitung, kein perzipieller Mehrwert für Endnutzer (Meyer & Moran, JAES 2007)
+- 24 Bit im Studio: mehr Headroom für Bearbeitung, kein perzipieller Mehrwert für Endnutzende (Meyer & Moran, JAES 2007)
 - dB = Dezibel: logarithmische Einheit für Lautstärke
 -->

@@ -559,7 +556,7 @@ RECHNUNG:

 - CD (1982, Sony/Philips): erstes massenmarktfähiges digitales Distributionsmedium für unkomprimiertes PCM-Audio
 - PCM (Pulse-Code Modulation) existierte bereits vorher: NHK (Nippon Hōsō Kyōkai = japanische öffentlich-rechtliche Rundfunkanstalt)-Forschung ab 1960er, digitale Studiogeräte ab 1970er
- Die CD war nicht das erste digitale Audio — aber das erste das in Konsumentenhänden landete
+- Die CD war nicht das erste digitale Audio — aber das erste das in KonsumentInnen-Hand landete
 -->

 ---
@@ -598,11 +595,12 @@ RECHNUNG:

 ---

-<!-- _class: erklaerung 
+<!--
+_class: erklaerung

 # CD-Audio – Vertiefung

-Die CD (1982) war nicht das erste digitale Audiomedium — PCM-Aufnahmen existierten seit den späten 1960ern in Tonstudios (u.a. NHK, Nippon Columbia). Die CD war das erste **massenmarktfähige** digitale Distributionsmedium für unkomprimiertes Audio in Konsumentenhänden.
+Die CD (1982) war nicht das erste digitale Audiomedium — PCM-Aufnahmen existierten seit den späten 1960ern in Tonstudios (u.a. NHK, Nippon Columbia). Die CD war das erste **massenmarktfähige** digitale Distributionsmedium für unkomprimiertes Audio in KonsumentInnen-Hand.

 **Warum 44.100 Hz?**
 Kombination aus Nyquist-Limit (2× 20 kHz = 40 kHz Minimum) und Kompatibilität mit Videobandgeräten, die in frühen digitalen Tonstudios als Speichermedium genutzt wurden. NTSC: 3 Samples × 245 Zeilen × 60 Felder = 44.100. PAL: 3 Samples × 294 Zeilen × 50 Felder = 44.100.
@@ -845,7 +843,7 @@ KLAUSURRELEVANT:
 <!--
 ---

- _class: erklaerung 
+_class: erklaerung

 # Kompression – Vertiefung

@@ -1193,6 +1191,33 @@ Sog. RGB Tuple (geordnete endliche Liste)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/byte-nibble-hex.png)
+
+<!--
+Kernidee: jedes Byte lässt sich sauber in zwei 4-Bit-Hälften (Nibbles) zerlegen. Jede Hälfte hat 2⁴ = 16 Zustände – und genau 16 Symbole hat Hex (0-F). Deshalb passt Hex perfekt: 1 Nibble = 1 Hex-Ziffer, 1 Byte = 2 Hex-Ziffern. Keine krumme Umrechnung.
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/why-8-bit.png)
+
+<!--
+Warum gerade 8 Bit?
+- CPU adressiert byteweise — kleinste adressierbare Einheit
+- Halbe Byte (z.B. 0x0000.5) existieren nicht
+- Speichercontroller, Bus, CPU-Register alle auf 8-Bit-Häppchen ausgelegt
+- Einzelne Bit lesen: erst Byte holen, dann mit Bitmaske isolieren (byte & 0b1000_0000)
+- Hardware-Geschichte: IBM System/360 (1964) setzte 8-Bit-Standard, 7-Bit-ASCII + 1 Paritätsbit
+-->
+
+---
+
 <!-- _class: lead -->

 # Hexadezimal
@@ -1224,6 +1249,102 @@ Sog. RGB Tuple (geordnete endliche Liste)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/hex-dec-table.png)
+
+<!--
+Hex ↔ Dezimal Lookup-Tabelle: 0–F = 0–15
+A=10, B=11, C=12, D=13, E=14, F=15
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/byte-flow.png)
+
+<!--
+1 Byte = 8 Bit = 2 Hex-Ziffern = 1 ASCII-Zeichen
+- Dieselbe Datei, drei Schreibweisen
+- Jeder Rahmen = ein Byte
+- Byte ändern sich nicht, nur unsere Anzeige
+- ↵ (0x0A) = nicht druckbar → Hex-Editoren zeigen . als Platzhalter
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/three-views.png)
+
+<!--
+Dieselben 8 Byte (PNG-Dateianfang: 89 50 4E 47 0D 0A 1A 0A) — drei Perspektiven:
+1. Bitstream — was wirklich gespeichert wird (unleserlich)
+2. Hex — gruppiert in 8-Bit-Häppchen (kompakt)
+3. Bedeutung — was die Byte signalisieren:
+   - 89: Magic Byte (>127 → "ich bin Binärdatei")
+   - 50 4E 47: P N G (ASCII-Format-Kürzel)
+   - 0D 0A 1A 0A: CR LF EOF LF (erkennt kaputte Übertragung)
+-->
+
+---
+
+# Wo begegnet Ihnen Hex-Code?
+
+| Kontext | Beispiel |
+|---------|----------|
+| CSS-Farben | `#FF5733` |
+| MAC-Adressen | `00:1A:2B:3C:4D:5E` |
+| Fehlercodes | `0x80070005` |
+| Speicheradressen | `0xA04F20` |
+| Unicode | `U+00E4` (ä) |
+| Datei-Signaturen | `89 50 4E 47` (PNG) |
+
+<!--
+Präfixe:
+- 0x = "das ist Hexadezimal" (C, JavaScript, Python)
+- U+ = Unicode-Codepoint (Standard für Zeichenkodierung)
+- # = CSS-Konvention für Farben
+
+ABKÜRZUNGEN:
+- MAC = Media Access Control (eindeutige Hardware-Adresse einer Netzwerkkarte)
+- Unicode = universeller Zeichensatz für alle Schriftsysteme
+
+Speicheradressen erklärt:
+- 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern
+- Beispiel vollständig: 0x0000000000A04F20 (führende Nullen weggelassen)
+- "0x" = Präfix, sagt nur "jetzt kommt Hex"
+
+Fehlercodes: Windows zeigt diese bei Bluescreens
+-->
+
+---
+
+# Bit vs. Byte: Die Verwirrung
+
+**1 Byte = 8 Bit** → Bit ÷ 8 = Byte
+
+| Einheit (Bit) | Einheit (Byte) |
+|---------------|----------------|
+| 1 Kbit = 1.000 Bit | 1 KB = 1.000 Byte = 8.000 Bit |
+| 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 |
+
+100 Mbit/s Bandbreite = **12,5 MB/s** Downloadrate
+
+<!--
+Bits = kleines b, Bytes = großes B
+Internetanbieter: Mbit/s (klingt größer!)
+100 Mbit/s ÷ 8 = 12,5 MB/s
+Marketing - 100 klingt besser als 12,5
+-->
+
+---
+
 <!-- _class: lead -->

 # ASCII
@@ -1689,7 +1810,7 @@ Fangfrage: "Wie hoch ist die Sample Rate von Vinyls?" -> Vinyl has no sample rat
 <!--
 - Dynamikumfang Formel: ~6 dB pro Bit
 - 16 Bit reicht für menschliches Hören unter realen Bedingungen
- 24 Bit im Studio: mehr Headroom für Bearbeitung, kein perzipieller Mehrwert für Endnutzer (Meyer & Moran, JAES 2007)
+- 24 Bit im Studio: mehr Headroom für Bearbeitung, kein perzipieller Mehrwert für Endnutzende (Meyer & Moran, JAES 2007)
 -->

 ---
@@ -1894,7 +2015,7 @@ Ein Zusammenspiel aus vielen Faktoren:
 **P2P-Filesharing für MP3s**

 - Shawn Fanning, 19 Jahre alt
- 80 Millionen User in 2 Jahren
+- 80 Millionen Nutzende in 2 Jahren
 - Musikindustrie verklagt (2001)
 - Pandora's Box: Nicht mehr aufzuhalten

@@ -1911,7 +2032,7 @@ Ein Zusammenspiel aus vielen Faktoren:
 # Napster & Musikindustrie

 **1999:** Napster startet
-**2001:** 80 Millionen User
+**2001:** 80 Millionen Nutzende

 **Musikindustrie:**
 - CDs kosten $15–20
@@ -2005,19 +2126,21 @@ Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/

 # Selbstlernen: HEX Files

-1. Drei Dateien ohne Dateiendung:
-   <a href="../materials/wtf1"/>`hex1`</a>  <a href="../materials/wtf2"/>`hex2`</a>  <a href="../materials/wtf3"/>`hex3`</a>
-3. Lies erste 16 Bytes aus und identifiziere Dateiformat (Magic Number)
-5. *Optional: Datei umbenennen und korrekte Dateiendung anhängen (bspw. `.jpg`)*
+1. Fünf Dateien ohne Dateiendung:
+   <a href="https://librete.ch/hdm/223015b/materials/hex1">`hex1`</a> · <a href="https://librete.ch/hdm/223015b/materials/hex2">`hex2`</a> · <a href="https://librete.ch/hdm/223015b/materials/hex3">`hex3`</a> · <a href="https://librete.ch/hdm/223015b/materials/hex4">`hex4`</a> · <a href="https://librete.ch/hdm/223015b/materials/hex5">`hex5`</a>
+2. Lies erste 16 Byte aus und identifiziere Dateiformat (Magic Number)
+3. *Optional: Datei umbenennen und korrekte Dateiendung anhängen (bspw. `.jpg`)*

 **Tools:**
 - Hex-Editor: [hexed.it](https://hexed.it)
 - Magic Numbers: [en.wikipedia.org/wiki/List_of_file_signatures](https://en.wikipedia.org/wiki/List_of_file_signatures)

 <!--
- wtf1: Plaintext (keine Magic Number)
- wtf2: PNG (89 50 4E 47)
- wtf3: JPEG (FF D8 FF)
+- hex1: Plaintext (keine Magic Number)
+- hex2: PNG (89 50 4E 47)
+- hex3: JPEG (FF D8 FF)
+- hex4: DOCX (50 4B 03 04 — ZIP-Container)
+- hex5: ZIP (50 4B 03 04)
 - Gruppenarbeit: 3-4 Personen
 - Ziel: Hex-Dump lesen lernen, Dateiformate verstehen
 -->
@@ -40,11 +40,13 @@ pre code {
  color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
  padding: 0.15em 0.4em;
  border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -70,18 +72,6 @@ section.aufgabe footer {
 }
 section.erklaerung {
  font-size: 1.1rem;
-  background: repeating-linear-gradient(
-    135deg,
-    #e3f2fd,
-    #e3f2fd 40px,
-    #fff 40px,
-    #fff 80px
-  ) !important;
-}
-@media print {
-  section.erklaerung {
-    background: #e3f2fd !important;
-  }
 }
 section.erklaerung h1 {
  font-size: 1.5rem;
@@ -958,7 +948,7 @@ KLAUSURRELEVANT:
 <!--
 - Kompatibilität schlägt oft Effizienz
 - TIFF für Archivierung: Unkomprimiert oder verlustfrei
- RAW für Fotografen: Maximale Bearbeitungsfreiheit
+- RAW für FotografInnen: Maximale Bearbeitungsfreiheit
 - Frage: "Was passiert, wenn ihr ein PNG auf Instagram hochladet?"
 -->

@@ -994,8 +984,8 @@ KLAUSURRELEVANT:
 - Instagram ist keine Kunstgalerie, sondern Massenplattform
 - Optimiert für Geschwindigkeit, nicht Qualität
 - Facebook, Twitter, TikTok – alle machen das
- Tipp für Fotografen: Portfolio auf eigener Website
- Diskussion: Ist das fair? Trade-off Nutzer vs. Plattform
+- Tipp für FotografInnen: Portfolio auf eigener Website
+- Diskussion: Ist das fair? Trade-off Nutzende vs. Plattform
 -->

 ---
@@ -1072,7 +1062,7 @@ KLAUSURRELEVANT:

 **Codec** (Coder-Decoder) definiert den Kompressionsalgorithmus. Derselbe Container kann verschiedene Codecs enthalten – die Dateiendung verrät den Codec nicht.

-| Container | Entwickler | Typische Codecs | Besonderheit |
+| Container | Entwicklung | Typische Codecs | Besonderheit |
 |-----------|------------|-----------------|--------------|
 | MP4 | ISO/MPEG | H.264, H.265, AAC | Web-Standard, DRM-fähig |
 | MKV | Matroska | Alle | Beliebig viele Streams, Kapitel |
@@ -1336,7 +1326,7 @@ H.264 (2003) ermöglichte erst YouTube (2005), Netflix-Streaming (2007) und Blu-

 **Hardware-Ubiquität:** Seit 2010 hat jedes Smartphone, jede GPU, jeder Smart-TV einen H.264-Hardware-Decoder. Encoding in Echtzeit braucht keine CPU – das ermöglichte erst mobiles Video-Streaming und Videotelefonie.

-**Patent-Pool (MPEG-LA):** ~2.000 Patente von 30+ Unternehmen. Endnutzer-Streaming ist lizenzfrei; Hardware-Hersteller zahlen ~$0,20/Gerät.
+**Patent-Pool (MPEG-LA):** ~2.000 Patente von 30+ Unternehmen. Endnutzungs-Streaming ist lizenzfrei; Hardware-Hersteller zahlen ~$0,20/Gerät.

 ---

@@ -1357,7 +1347,7 @@ H.264 (2003) ermöglichte erst YouTube (2005), Netflix-Streaming (2007) und Blu-
 <!--
 - MPEG-LA = Licensing Authority
 - Firefox weigerte sich lange, H.264 zu unterstützen
- "Free to View" gilt nur für Endnutzer-Streaming
+- "Free to View" gilt nur für Endnutzungs-Streaming
 - Diskussion: Sollten Standards patent-frei sein?
 -->

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

@@ -602,7 +592,7 @@ Voll: Langsamstes Backup, schnellste Wiederherstellung

 <!--
 Time Machine: Stündliche Snapshots, APFS-Integration
-Veeam: Enterprise-Level, kostenlose Endnutzer-Version
+Veeam: Enterprise-Level, kostenlose Privatversion
 rsync: Unix-Klassiker, extrem effizient
 Borg: Deduplizierung + Verschlüsselung
 -->
@@ -40,11 +40,13 @@ pre code {
  color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
  padding: 0.15em 0.4em;
  border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -158,7 +160,7 @@ AWS Snowmobile: 45-Fuß-Container auf LKW

 **Prozess:**
 1. AWS schickt verschlüsseltes Gerät
-2. Kunde kopiert Daten lokal (schnell!)
+2. KundIn kopiert Daten lokal (schnell!)
 3. Gerät zurück an AWS
 4. AWS lädt in S3 hoch

@@ -218,7 +220,7 @@ Server unter Last (symbolisch)
 **Klassisches Modell:** Ein Server, viele Clients

 **Problem:**
-1 Million User wollen 1 GB-Datei
+1 Million Nutzende wollen 1 GB-Datei
 → Server braucht **1 PB Bandbreite!**
 → Server überlastet → **"Hug of Death"**

@@ -250,7 +252,7 @@ Globale Verteilung
 **Funktionsweise:**
 1. **Origin Server** (Hauptquelle)
 2. **Edge Servers** (geografisch verteilt)
-3. User → nächster Edge Server
+3. Nutzende → nächster Edge Server
 4. Erste Anfrage: Edge holt von Origin, cached
 5. Weitere Anfragen: Direkt vom Edge (schnell!)

@@ -275,7 +277,7 @@ Große CDN-Anbieter: Cloudflare, Akamai, Amazon CloudFront, Fastly
 - Lange Cache-Zeit (TTL: Tage/Wochen)

 **Dynamic Content:**
- User-spezifisch (Profil)
+- Nutzungs-spezifisch (Profil)
 - Kurze TTL oder nicht cachebar

 **Cache Invalidation:**
@@ -347,14 +349,14 @@ Dezentral, jeder ist Client & Server
 - IPFS (InterPlanetary File System)
 - Blockchain (Bitcoin, Ethereum)

-**Vorteil:** Skalierbar (mehr User = mehr Bandbreite!)
+**Vorteil:** Skalierbar (mehr Nutzende = mehr Bandbreite!)

 **Nachteil:** Langsam bei wenigen Peers, oft für Piraterie missbraucht

 <!-- 
 P2P vs. Client-Server: Kein zentraler Server
-Last verteilt sich auf alle Teilnehmer
-Je mehr User, desto schneller (umgekehrt zu Client-Server!)
+Last verteilt sich auf alle Teilnehmenden
+Je mehr Nutzende, desto schneller (umgekehrt zu Client-Server!)
 Zensur-resistent: Kein Single Point of Failure
 Rechtliche Grauzone: Technologie neutral, aber oft illegal genutzt
 -->
@@ -1021,8 +1023,8 @@ Privacy-Albtraum

 **Beispiele:**
 - **Foto:** Kamera, Datum, GPS, Belichtung
- **MP3:** Künstler, Album, Jahr, Genre, Cover
- **PDF:** Autor, Datum, Software
+- **MP3:** KünstlerInnen, Album, Jahr, Genre, Cover
+- **PDF:** AutorIn, Datum, Software
 - **E-Mail:** Absender, Empfänger, Zeitstempel

 **Warum wichtig?**
@@ -1178,7 +1180,7 @@ Wikipedia für Musik-Metadaten
 **Idee:** Wikipedia für Musik-Metadaten

 **Community-gepflegt:**
- Künstler, Alben, Tracks
+- KünstlerInnen, Alben, Tracks
 - Relationships (Band-Mitglieder, Label...)
 - Releases (verschiedene Editionen, Länder)

@@ -1237,7 +1239,7 @@ Versteckte Informationen sichtbar
 **PDF-Metadaten (XMP):**

 **Gespeichert:**
- Titel, Autor, Betreff, Keywords
+- Titel, AutorIn, Betreff, Keywords
 - Erstellungsdatum, Änderungsdatum
 - Software, **Company** (aus Office-Lizenz!)

@@ -1598,7 +1600,7 @@ QKD: Abhör-sichere Kommunikation (Quantenmechanik garantiert)

 **Filecoin (2017):**
 - Blockchain-basiert
- User vermieten Festplatten-Platz
+- Nutzende vermieten Festplatten-Platz
 - Bezahlung in FIL (Kryptowährung)

 **Arweave (2018):**
@@ -1636,7 +1638,7 @@ Legitime Use-Cases: NFT-Storage, Zensur-resistente Archivierung
 - 5G + Edge Computing nötig

 **Cloud Gaming:**
- Spiel im Rechenzentrum, Stream zu User
+- Spiel im Rechenzentrum, Stream zu Nutzenden
 - Input-Lag = Todfeind (<50ms)

 **Problem:** Physik (Lichtgeschwindigkeit!)
@@ -1645,7 +1647,7 @@ Legitime Use-Cases: NFT-Storage, Zensur-resistente Archivierung
 8K: YouTube unterstützt, aber wer hat 8K-Monitor?
 VR: Meta Quest, Apple Vision Pro
 Latenz: Lichtgeschwindigkeit ~300.000 km/s, aber Routing + Processing addiert sich
-Edge Computing: Server näher an User (5G-Masten)
+Edge Computing: Server näher an Nutzende (5G-Masten)
 Cloud Gaming: Stadia gescheitert (2023 †), GeForce Now, Xbox Cloud
 Input-Lag: Fiber ~5ms/1000km, aber Server-Processing + Encoding + Decoding
 -->
@@ -40,11 +40,13 @@ pre code {
  color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
  padding: 0.15em 0.4em;
  border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>ASCII-Tabelle</title>
+<style>
+  :root {
+    --hl: #1e5f8a;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --c-ctrl: #e5e7eb;     /* control */
+    --c-ctrl-text: #4b5563;
+    --c-space: #fef3c7;    /* space */
+    --c-punct: #ddd6fe;    /* punctuation */
+    --c-digit: #bfdbfe;    /* digits */
+    --c-upper: #bbf7d0;    /* uppercase */
+    --c-lower: #fed7aa;    /* lowercase */
+    --c-del:   #fecaca;    /* DEL */
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 18px 24px; }
+  h1 { text-align: center; margin: 0 0 2px; font-size: 1.5rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 14px; font-size: 0.9rem; }
+  .sub strong { color: var(--dark); }
+
+  .table-wrap { display: flex; justify-content: center; }
+
+  table.ascii {
+    border-collapse: separate;
+    border-spacing: 3px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  }
+  table.ascii th, table.ascii td {
+    width: 68px;
+    height: 60px;
+    padding: 0;
+    text-align: center;
+    vertical-align: middle;
+    border-radius: 5px;
+  }
+  table.ascii th {
+    background: var(--dark); color: #fff;
+    font-size: 0.78rem;
+    letter-spacing: 0.05em;
+    font-weight: 700;
+    width: 56px;
+    height: 36px;
+  }
+  table.ascii th.row { width: 64px; }
+  table.ascii th .b { display: block; font-size: 0.68rem; opacity: 0.7; font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; }
+
+  table.ascii td {
+    border: 1px solid var(--border);
+    position: relative;
+  }
+  td .hex { position: absolute; top: 3px; left: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 700; }
+  td .dec { position: absolute; bottom: 3px; right: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 400; }
+  td .ch { font-size: 1.45rem; font-weight: 700; line-height: 1; }
+  td.ctrl .ch { font-size: 0.82rem; font-weight: 700; }
+  td.ctrl .ch small { display: block; font-size: 0.6rem; font-weight: 400; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
+
+  td.ctrl  { background: var(--c-ctrl); color: var(--c-ctrl-text); }
+  td.space { background: var(--c-space); }
+  td.punct { background: var(--c-punct); }
+  td.digit { background: var(--c-digit); }
+  td.upper { background: var(--c-upper); }
+  td.lower { background: var(--c-lower); }
+  td.del   { background: var(--c-del); color: var(--c-ctrl-text); }
+
+  .legend {
+    margin: 14px auto 0;
+    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
+    font-size: 0.85rem;
+  }
+  .legend .item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); }
+  .legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
+  .legend .swatch.ctrl  { background: var(--c-ctrl); }
+  .legend .swatch.space { background: var(--c-space); }
+  .legend .swatch.punct { background: var(--c-punct); }
+  .legend .swatch.digit { background: var(--c-digit); }
+  .legend .swatch.upper { background: var(--c-upper); }
+  .legend .swatch.lower { background: var(--c-lower); }
+  .legend .swatch.del   { background: var(--c-del); }
+
+  .meta-row {
+    margin-top: 10px;
+    display: flex; gap: 18px; justify-content: center;
+    font-size: 0.85rem; color: var(--muted);
+  }
+  .meta-row strong { color: var(--dark); }
+  .meta-row code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>ASCII-Tabelle (1963) · 7 Bit · 128 Zeichen</h1>
+  <div class="sub">Spalte = High-Nibble (Hex 0–7) · Zeile = Low-Nibble (Hex 0–F) · <strong>Hex</strong> oben, <strong>Dezimal</strong> unten</div>
+
+  <div class="table-wrap">
+  <table class="ascii">
+    <thead>
+      <tr>
+        <th class="row">↓ Low<br>→ High</th>
+        <th>0<span class="b">0000</span></th>
+        <th>1<span class="b">0001</span></th>
+        <th>2<span class="b">0010</span></th>
+        <th>3<span class="b">0011</span></th>
+        <th>4<span class="b">0100</span></th>
+        <th>5<span class="b">0101</span></th>
+        <th>6<span class="b">0110</span></th>
+        <th>7<span class="b">0111</span></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th class="row">0<span class="b">0000</span></th>
+        <td class="ctrl"><span class="hex">00</span><span class="ch">NUL<small>null</small></span><span class="dec">0</span></td>
+        <td class="ctrl"><span class="hex">10</span><span class="ch">DLE<small>data link esc</small></span><span class="dec">16</span></td>
+        <td class="space"><span class="hex">20</span><span class="ch">SP<small>space</small></span><span class="dec">32</span></td>
+        <td class="digit"><span class="hex">30</span><span class="ch">0</span><span class="dec">48</span></td>
+        <td class="punct"><span class="hex">40</span><span class="ch">@</span><span class="dec">64</span></td>
+        <td class="upper"><span class="hex">50</span><span class="ch">P</span><span class="dec">80</span></td>
+        <td class="punct"><span class="hex">60</span><span class="ch">`</span><span class="dec">96</span></td>
+        <td class="lower"><span class="hex">70</span><span class="ch">p</span><span class="dec">112</span></td>
+      </tr>
+      <tr>
+        <th class="row">1<span class="b">0001</span></th>
+        <td class="ctrl"><span class="hex">01</span><span class="ch">SOH<small>start hdr</small></span><span class="dec">1</span></td>
+        <td class="ctrl"><span class="hex">11</span><span class="ch">DC1<small>XON</small></span><span class="dec">17</span></td>
+        <td class="punct"><span class="hex">21</span><span class="ch">!</span><span class="dec">33</span></td>
+        <td class="digit"><span class="hex">31</span><span class="ch">1</span><span class="dec">49</span></td>
+        <td class="upper"><span class="hex">41</span><span class="ch">A</span><span class="dec">65</span></td>
+        <td class="upper"><span class="hex">51</span><span class="ch">Q</span><span class="dec">81</span></td>
+        <td class="lower"><span class="hex">61</span><span class="ch">a</span><span class="dec">97</span></td>
+        <td class="lower"><span class="hex">71</span><span class="ch">q</span><span class="dec">113</span></td>
+      </tr>
+      <tr>
+        <th class="row">2<span class="b">0010</span></th>
+        <td class="ctrl"><span class="hex">02</span><span class="ch">STX<small>start txt</small></span><span class="dec">2</span></td>
+        <td class="ctrl"><span class="hex">12</span><span class="ch">DC2</span><span class="dec">18</span></td>
+        <td class="punct"><span class="hex">22</span><span class="ch">"</span><span class="dec">34</span></td>
+        <td class="digit"><span class="hex">32</span><span class="ch">2</span><span class="dec">50</span></td>
+        <td class="upper"><span class="hex">42</span><span class="ch">B</span><span class="dec">66</span></td>
+        <td class="upper"><span class="hex">52</span><span class="ch">R</span><span class="dec">82</span></td>
+        <td class="lower"><span class="hex">62</span><span class="ch">b</span><span class="dec">98</span></td>
+        <td class="lower"><span class="hex">72</span><span class="ch">r</span><span class="dec">114</span></td>
+      </tr>
+      <tr>
+        <th class="row">3<span class="b">0011</span></th>
+        <td class="ctrl"><span class="hex">03</span><span class="ch">ETX<small>end txt</small></span><span class="dec">3</span></td>
+        <td class="ctrl"><span class="hex">13</span><span class="ch">DC3<small>XOFF</small></span><span class="dec">19</span></td>
+        <td class="punct"><span class="hex">23</span><span class="ch">#</span><span class="dec">35</span></td>
+        <td class="digit"><span class="hex">33</span><span class="ch">3</span><span class="dec">51</span></td>
+        <td class="upper"><span class="hex">43</span><span class="ch">C</span><span class="dec">67</span></td>
+        <td class="upper"><span class="hex">53</span><span class="ch">S</span><span class="dec">83</span></td>
+        <td class="lower"><span class="hex">63</span><span class="ch">c</span><span class="dec">99</span></td>
+        <td class="lower"><span class="hex">73</span><span class="ch">s</span><span class="dec">115</span></td>
+      </tr>
+      <tr>
+        <th class="row">4<span class="b">0100</span></th>
+        <td class="ctrl"><span class="hex">04</span><span class="ch">EOT<small>end trans</small></span><span class="dec">4</span></td>
+        <td class="ctrl"><span class="hex">14</span><span class="ch">DC4</span><span class="dec">20</span></td>
+        <td class="punct"><span class="hex">24</span><span class="ch">$</span><span class="dec">36</span></td>
+        <td class="digit"><span class="hex">34</span><span class="ch">4</span><span class="dec">52</span></td>
+        <td class="upper"><span class="hex">44</span><span class="ch">D</span><span class="dec">68</span></td>
+        <td class="upper"><span class="hex">54</span><span class="ch">T</span><span class="dec">84</span></td>
+        <td class="lower"><span class="hex">64</span><span class="ch">d</span><span class="dec">100</span></td>
+        <td class="lower"><span class="hex">74</span><span class="ch">t</span><span class="dec">116</span></td>
+      </tr>
+      <tr>
+        <th class="row">5<span class="b">0101</span></th>
+        <td class="ctrl"><span class="hex">05</span><span class="ch">ENQ<small>enquiry</small></span><span class="dec">5</span></td>
+        <td class="ctrl"><span class="hex">15</span><span class="ch">NAK</span><span class="dec">21</span></td>
+        <td class="punct"><span class="hex">25</span><span class="ch">%</span><span class="dec">37</span></td>
+        <td class="digit"><span class="hex">35</span><span class="ch">5</span><span class="dec">53</span></td>
+        <td class="upper"><span class="hex">45</span><span class="ch">E</span><span class="dec">69</span></td>
+        <td class="upper"><span class="hex">55</span><span class="ch">U</span><span class="dec">85</span></td>
+        <td class="lower"><span class="hex">65</span><span class="ch">e</span><span class="dec">101</span></td>
+        <td class="lower"><span class="hex">75</span><span class="ch">u</span><span class="dec">117</span></td>
+      </tr>
+      <tr>
+        <th class="row">6<span class="b">0110</span></th>
+        <td class="ctrl"><span class="hex">06</span><span class="ch">ACK<small>ack</small></span><span class="dec">6</span></td>
+        <td class="ctrl"><span class="hex">16</span><span class="ch">SYN</span><span class="dec">22</span></td>
+        <td class="punct"><span class="hex">26</span><span class="ch">&amp;</span><span class="dec">38</span></td>
+        <td class="digit"><span class="hex">36</span><span class="ch">6</span><span class="dec">54</span></td>
+        <td class="upper"><span class="hex">46</span><span class="ch">F</span><span class="dec">70</span></td>
+        <td class="upper"><span class="hex">56</span><span class="ch">V</span><span class="dec">86</span></td>
+        <td class="lower"><span class="hex">66</span><span class="ch">f</span><span class="dec">102</span></td>
+        <td class="lower"><span class="hex">76</span><span class="ch">v</span><span class="dec">118</span></td>
+      </tr>
+      <tr>
+        <th class="row">7<span class="b">0111</span></th>
+        <td class="ctrl"><span class="hex">07</span><span class="ch">BEL<small>bell 🔔</small></span><span class="dec">7</span></td>
+        <td class="ctrl"><span class="hex">17</span><span class="ch">ETB</span><span class="dec">23</span></td>
+        <td class="punct"><span class="hex">27</span><span class="ch">'</span><span class="dec">39</span></td>
+        <td class="digit"><span class="hex">37</span><span class="ch">7</span><span class="dec">55</span></td>
+        <td class="upper"><span class="hex">47</span><span class="ch">G</span><span class="dec">71</span></td>
+        <td class="upper"><span class="hex">57</span><span class="ch">W</span><span class="dec">87</span></td>
+        <td class="lower"><span class="hex">67</span><span class="ch">g</span><span class="dec">103</span></td>
+        <td class="lower"><span class="hex">77</span><span class="ch">w</span><span class="dec">119</span></td>
+      </tr>
+      <tr>
+        <th class="row">8<span class="b">1000</span></th>
+        <td class="ctrl"><span class="hex">08</span><span class="ch">BS<small>backspace</small></span><span class="dec">8</span></td>
+        <td class="ctrl"><span class="hex">18</span><span class="ch">CAN</span><span class="dec">24</span></td>
+        <td class="punct"><span class="hex">28</span><span class="ch">(</span><span class="dec">40</span></td>
+        <td class="digit"><span class="hex">38</span><span class="ch">8</span><span class="dec">56</span></td>
+        <td class="upper"><span class="hex">48</span><span class="ch">H</span><span class="dec">72</span></td>
+        <td class="upper"><span class="hex">58</span><span class="ch">X</span><span class="dec">88</span></td>
+        <td class="lower"><span class="hex">68</span><span class="ch">h</span><span class="dec">104</span></td>
+        <td class="lower"><span class="hex">78</span><span class="ch">x</span><span class="dec">120</span></td>
+      </tr>
+      <tr>
+        <th class="row">9<span class="b">1001</span></th>
+        <td class="ctrl"><span class="hex">09</span><span class="ch">HT<small>tab ⇥</small></span><span class="dec">9</span></td>
+        <td class="ctrl"><span class="hex">19</span><span class="ch">EM</span><span class="dec">25</span></td>
+        <td class="punct"><span class="hex">29</span><span class="ch">)</span><span class="dec">41</span></td>
+        <td class="digit"><span class="hex">39</span><span class="ch">9</span><span class="dec">57</span></td>
+        <td class="upper"><span class="hex">49</span><span class="ch">I</span><span class="dec">73</span></td>
+        <td class="upper"><span class="hex">59</span><span class="ch">Y</span><span class="dec">89</span></td>
+        <td class="lower"><span class="hex">69</span><span class="ch">i</span><span class="dec">105</span></td>
+        <td class="lower"><span class="hex">79</span><span class="ch">y</span><span class="dec">121</span></td>
+      </tr>
+      <tr>
+        <th class="row">A<span class="b">1010</span></th>
+        <td class="ctrl"><span class="hex">0A</span><span class="ch">LF<small>↵ newline</small></span><span class="dec">10</span></td>
+        <td class="ctrl"><span class="hex">1A</span><span class="ch">SUB<small>EOF DOS</small></span><span class="dec">26</span></td>
+        <td class="punct"><span class="hex">2A</span><span class="ch">*</span><span class="dec">42</span></td>
+        <td class="punct"><span class="hex">3A</span><span class="ch">:</span><span class="dec">58</span></td>
+        <td class="upper"><span class="hex">4A</span><span class="ch">J</span><span class="dec">74</span></td>
+        <td class="upper"><span class="hex">5A</span><span class="ch">Z</span><span class="dec">90</span></td>
+        <td class="lower"><span class="hex">6A</span><span class="ch">j</span><span class="dec">106</span></td>
+        <td class="lower"><span class="hex">7A</span><span class="ch">z</span><span class="dec">122</span></td>
+      </tr>
+      <tr>
+        <th class="row">B<span class="b">1011</span></th>
+        <td class="ctrl"><span class="hex">0B</span><span class="ch">VT</span><span class="dec">11</span></td>
+        <td class="ctrl"><span class="hex">1B</span><span class="ch">ESC<small>escape</small></span><span class="dec">27</span></td>
+        <td class="punct"><span class="hex">2B</span><span class="ch">+</span><span class="dec">43</span></td>
+        <td class="punct"><span class="hex">3B</span><span class="ch">;</span><span class="dec">59</span></td>
+        <td class="upper"><span class="hex">4B</span><span class="ch">K</span><span class="dec">75</span></td>
+        <td class="punct"><span class="hex">5B</span><span class="ch">[</span><span class="dec">91</span></td>
+        <td class="lower"><span class="hex">6B</span><span class="ch">k</span><span class="dec">107</span></td>
+        <td class="punct"><span class="hex">7B</span><span class="ch">{</span><span class="dec">123</span></td>
+      </tr>
+      <tr>
+        <th class="row">C<span class="b">1100</span></th>
+        <td class="ctrl"><span class="hex">0C</span><span class="ch">FF<small>form feed</small></span><span class="dec">12</span></td>
+        <td class="ctrl"><span class="hex">1C</span><span class="ch">FS</span><span class="dec">28</span></td>
+        <td class="punct"><span class="hex">2C</span><span class="ch">,</span><span class="dec">44</span></td>
+        <td class="punct"><span class="hex">3C</span><span class="ch">&lt;</span><span class="dec">60</span></td>
+        <td class="upper"><span class="hex">4C</span><span class="ch">L</span><span class="dec">76</span></td>
+        <td class="punct"><span class="hex">5C</span><span class="ch">\</span><span class="dec">92</span></td>
+        <td class="lower"><span class="hex">6C</span><span class="ch">l</span><span class="dec">108</span></td>
+        <td class="punct"><span class="hex">7C</span><span class="ch">|</span><span class="dec">124</span></td>
+      </tr>
+      <tr>
+        <th class="row">D<span class="b">1101</span></th>
+        <td class="ctrl"><span class="hex">0D</span><span class="ch">CR<small>carriage</small></span><span class="dec">13</span></td>
+        <td class="ctrl"><span class="hex">1D</span><span class="ch">GS</span><span class="dec">29</span></td>
+        <td class="punct"><span class="hex">2D</span><span class="ch">-</span><span class="dec">45</span></td>
+        <td class="punct"><span class="hex">3D</span><span class="ch">=</span><span class="dec">61</span></td>
+        <td class="upper"><span class="hex">4D</span><span class="ch">M</span><span class="dec">77</span></td>
+        <td class="punct"><span class="hex">5D</span><span class="ch">]</span><span class="dec">93</span></td>
+        <td class="lower"><span class="hex">6D</span><span class="ch">m</span><span class="dec">109</span></td>
+        <td class="punct"><span class="hex">7D</span><span class="ch">}</span><span class="dec">125</span></td>
+      </tr>
+      <tr>
+        <th class="row">E<span class="b">1110</span></th>
+        <td class="ctrl"><span class="hex">0E</span><span class="ch">SO</span><span class="dec">14</span></td>
+        <td class="ctrl"><span class="hex">1E</span><span class="ch">RS</span><span class="dec">30</span></td>
+        <td class="punct"><span class="hex">2E</span><span class="ch">.</span><span class="dec">46</span></td>
+        <td class="punct"><span class="hex">3E</span><span class="ch">&gt;</span><span class="dec">62</span></td>
+        <td class="upper"><span class="hex">4E</span><span class="ch">N</span><span class="dec">78</span></td>
+        <td class="punct"><span class="hex">5E</span><span class="ch">^</span><span class="dec">94</span></td>
+        <td class="lower"><span class="hex">6E</span><span class="ch">n</span><span class="dec">110</span></td>
+        <td class="punct"><span class="hex">7E</span><span class="ch">~</span><span class="dec">126</span></td>
+      </tr>
+      <tr>
+        <th class="row">F<span class="b">1111</span></th>
+        <td class="ctrl"><span class="hex">0F</span><span class="ch">SI</span><span class="dec">15</span></td>
+        <td class="ctrl"><span class="hex">1F</span><span class="ch">US</span><span class="dec">31</span></td>
+        <td class="punct"><span class="hex">2F</span><span class="ch">/</span><span class="dec">47</span></td>
+        <td class="punct"><span class="hex">3F</span><span class="ch">?</span><span class="dec">63</span></td>
+        <td class="upper"><span class="hex">4F</span><span class="ch">O</span><span class="dec">79</span></td>
+        <td class="punct"><span class="hex">5F</span><span class="ch">_</span><span class="dec">95</span></td>
+        <td class="lower"><span class="hex">6F</span><span class="ch">o</span><span class="dec">111</span></td>
+        <td class="del"><span class="hex">7F</span><span class="ch">DEL</span><span class="dec">127</span></td>
+      </tr>
+    </tbody>
+  </table>
+  </div>
+
+  <div class="legend">
+    <div class="item"><span class="swatch ctrl"></span>Steuerzeichen (0–31)</div>
+    <div class="item"><span class="swatch space"></span>Leerzeichen (32)</div>
+    <div class="item"><span class="swatch punct"></span>Satzzeichen</div>
+    <div class="item"><span class="swatch digit"></span>Ziffern (48–57)</div>
+    <div class="item"><span class="swatch upper"></span>Großbuchstaben (65–90)</div>
+    <div class="item"><span class="swatch lower"></span>Kleinbuchstaben (97–122)</div>
+    <div class="item"><span class="swatch del"></span>DEL (127)</div>
+  </div>
+
+  <div class="meta-row">
+    <span><strong>Beispiel:</strong> <code>A</code> = Hex <code>41</code> = Dez <code>65</code> = Bin <code>0100&nbsp;0001</code></span>
+    <span><strong>Trick:</strong> Ziffern <code>0–9</code> liegen bei <code>30–39</code> · <code>'A'+1='B'</code> · Groß ↔ Klein: Bit 5 togglen</span>
+  </div>
+</body>
+</html>
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte-Fluss: Bit → Hex → ASCII</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --byte-border: #94a3b8;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 22px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
+
+  .file {
+    width: 100%; box-sizing: border-box;
+    border: 2px solid var(--dark);
+    border-radius: 10px;
+    background: var(--bg-soft);
+    overflow: hidden;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
+  }
+  .file .head {
+    background: var(--dark); color: #fff; padding: 8px 14px;
+    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .file .head .name { font-family: ui-monospace, monospace; }
+  .file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
+  .file .body { padding: 12px 14px; }
+
+  .row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
+  .row-bytes:last-child { margin-bottom: 0; }
+
+  .byte-bin {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 4px 7px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 0.92rem;
+    font-weight: 700;
+    background: #fff;
+    letter-spacing: 0.04em;
+  }
+  .byte-hex {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 6px 0;
+    font-family: ui-monospace, monospace;
+    font-size: 1.1rem;
+    font-weight: 700;
+    background: #fff;
+    min-width: 88px;
+    text-align: center;
+  }
+  .byte-ascii {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 6px 0;
+    font-family: ui-monospace, monospace;
+    font-size: 1.2rem;
+    font-weight: 700;
+    background: #fff;
+    min-width: 88px;
+    text-align: center;
+  }
+  .byte-ascii.np { color: var(--muted); font-style: italic; }
+
+  .truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
+
+  .arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
+  .arrow {
+    width: 0; height: 0;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    border-top: 14px solid var(--hl);
+  }
+  .arrow-label {
+    font-size: 0.78rem; color: var(--hl); font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.05em;
+  }
+
+  .legend {
+    margin-top: 12px;
+    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
+    font-size: 0.85rem; color: var(--muted);
+  }
+  .legend strong { color: var(--dark); }
+  .legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
+  <div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
+
+  <div class="stage">
+
+    <!-- Stage 1: Bitstream -->
+    <div class="file">
+      <div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-stack">
+      <div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Stage 2: Hex -->
+    <div class="file">
+      <div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-stack">
+      <div class="arrow-label">je 1 Byte → 1 Zeichen</div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Stage 3: ASCII -->
+    <div class="file">
+      <div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="legend">
+      <span><code>␣</code> = Leerzeichen (0x20)</span>
+      <span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
+      <span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
+    </div>
+
+  </div>
+</body>
+</html>
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte → Nibble → Hex</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 32px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+
+  .level { display: flex; flex-direction: column; align-items: center; }
+  .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
+
+  /* Level 1: whole byte */
+  .byte {
+    display: flex;
+    gap: 4px;
+    padding: 8px 14px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--bg-soft);
+  }
+  .byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
+  .byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
+
+  /* Split arrows */
+  .split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
+  .split .arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+  }
+
+  /* Level 2: two nibbles */
+  .nibbles { display: flex; gap: 80px; }
+  .nibble {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    padding: 10px 14px;
+    border: 2px solid var(--hl);
+    border-radius: 8px;
+    background: #fff;
+  }
+  .nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
+  .nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
+  .nibble .meta { font-size: 0.78rem; color: var(--muted); }
+
+  .single-arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+    margin: 2px 0;
+  }
+
+  /* Level 3: hex digits */
+  .hex-digits { display: flex; gap: 80px; }
+  .hex-digit {
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    padding: 8px 22px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--dark);
+    color: var(--hl);
+  }
+  .hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
+  .hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
+
+  /* Merge down to byte */
+  .merge {
+    display: flex; justify-content: center; margin-top: 2px;
+  }
+  .merge-v {
+    display: grid;
+    grid-template-columns: 60px 60px;
+    justify-content: center;
+    align-items: center;
+  }
+  .merge-v .line {
+    height: 20px;
+    border-right: 2px solid var(--hl);
+  }
+  .merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
+  .bottom-bar { height: 2px; background: var(--hl); width: 120px; }
+
+  /* Final result */
+  .result {
+    margin-top: 14px;
+    padding: 14px 22px;
+    background: #fef3f8;
+    border-left: 4px solid var(--hl);
+    border-radius: 4px;
+    font-size: 1.05rem;
+    text-align: center;
+    max-width: 640px;
+  }
+  .result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
+  .result strong { color: var(--hl); }
+
+  .math {
+    margin-top: 10px;
+    font-size: 0.95rem;
+    color: var(--dark);
+    text-align: center;
+  }
+  .math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
+  <div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
+
+  <div class="stage">
+    <!-- Level 1 -->
+    <div class="level">
+      <div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
+      <div class="byte">
+        <span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
+        <span class="sep"></span>
+        <span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 2 -->
+    <div class="level">
+      <div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
+      <div class="nibbles">
+        <div class="nibble">
+          <div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
+          <div class="meta">= 4 (dez)</div>
+        </div>
+        <div class="nibble">
+          <div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
+          <div class="meta">= 13 (dez)</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 3 -->
+    <div class="level">
+      <div class="label">2 Hex-Ziffern · Symbole 0–F</div>
+      <div class="hex-digits">
+        <div class="hex-digit">
+          <div class="digit">4</div>
+          <div class="meta">Nibble → 1 Ziffer</div>
+        </div>
+        <div class="hex-digit">
+          <div class="digit">D</div>
+          <div class="meta">13 → D</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="result">
+      <code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
+    </div>
+
+    <div class="math">
+      <span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
+    </div>
+  </div>
+</body>
+</html>
+</content>
+</invoke>
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Hex → Dezimal</title>
+<style>
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
+  body { padding: 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
+  .sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
+  table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
+  th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
+  thead th { background: #1a1a2e; color: #fff; }
+  tbody th { background: #334155; color: #fff; font-weight: 600; }
+  tbody td.ascii { background: #f3f4f6; }
+  tbody td.nonascii { background: #fff; color: #6b7280; }
+  .corner { background: #0f0f23; color: #d63384; }
+  .legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
+  .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
+  .example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
+  code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>Hex → Dezimal</h1>
+  <div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
+  <table>
+    <thead>
+      <tr>
+        <th class="corner">×16 / +</th>
+        <th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
+        <th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+
+  <div class="legend">
+    <span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
+    <span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
+  </div>
+
+  <div class="example">
+    <strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
+  </div>
+
+<script>
+  const rows = '0123456789ABCDEF';
+  const tb = document.querySelector('tbody');
+  for (let r = 0; r < 16; r++) {
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
+    tr.appendChild(th);
+    for (let c = 0; c < 16; c++) {
+      const td = document.createElement('td');
+      const v = r*16 + c;
+      td.textContent = v;
+      td.className = v <= 127 ? 'ascii' : 'nonascii';
+      tr.appendChild(td);
+    }
+    tb.appendChild(tr);
+  }
+</script>
+</body>
+</html>
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Dieselben Byte — drei Perspektiven</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --magic: #ef4444;
+    --format: #2563eb;
+    --transport: #16a34a;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 24px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
+
+  .row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; }
+  .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: right; white-space: nowrap; }
+  .label small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 2px; font-size: 0.8em; white-space: nowrap; }
+
+  .panel { padding: 14px 16px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
+  .panel.bin { background: #0f0f23; color: #fff; border-color: var(--dark); }
+  .panel.bin code { color: #e5e7eb; }
+  .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; word-break: break-all; line-height: 1.5; }
+
+  .hex-bytes { display: flex; flex-wrap: wrap; gap: 8px; }
+  .hex-byte { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
+
+  .semantic { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
+  .group { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; min-width: 70px; }
+  .group .bytes { display: flex; gap: 4px; }
+  .group .b { background: #fff; border: 1px solid currentColor; border-radius: 3px; padding: 3px 7px; font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); }
+  .group .tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+  .group .meaning { font-size: 0.78rem; line-height: 1.3; color: var(--dark); }
+  .group.magic { background: #fee2e2; color: var(--magic); }
+  .group.format { background: #dbeafe; color: var(--format); }
+  .group.transport { background: #dcfce7; color: var(--transport); }
+
+  .arrow-row { display: flex; justify-content: center; }
+  .arrow {
+    width: 0; height: 0;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    border-top: 14px solid var(--hl);
+  }
+
+  .footnote { margin-top: 16px; font-size: 0.88rem; color: var(--muted); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
+  .footnote strong { color: var(--dark); }
+</style>
+</head>
+<body>
+  <h1>Dieselben 8 Byte — drei Perspektiven</h1>
+  <div class="sub">PNG-Datei-Anfang: <code style="font-family:ui-monospace,monospace">89 50 4E 47 0D 0A 1A 0A</code></div>
+
+  <div class="stage">
+
+    <div class="row">
+      <div class="label">1 · Bitstream<small>was wirklich gespeichert wird</small></div>
+      <div class="panel bin">
+        <code class="mono">10001001&nbsp;01010000&nbsp;01001110&nbsp;01000111&nbsp;00001101&nbsp;00001010&nbsp;00011010&nbsp;00001010</code>
+      </div>
+    </div>
+
+    <div class="arrow-row"><div class="arrow"></div></div>
+
+    <div class="row">
+      <div class="label">2 · Hex<small>gruppiert in 8-Bit-Häppchen</small></div>
+      <div class="panel">
+        <div class="hex-bytes">
+          <span class="hex-byte">89</span>
+          <span class="hex-byte">50</span>
+          <span class="hex-byte">4E</span>
+          <span class="hex-byte">47</span>
+          <span class="hex-byte">0D</span>
+          <span class="hex-byte">0A</span>
+          <span class="hex-byte">1A</span>
+          <span class="hex-byte">0A</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-row"><div class="arrow"></div></div>
+
+    <div class="row">
+      <div class="label">3 · Bedeutung<small>was die Byte sagen</small></div>
+      <div class="panel">
+        <div class="semantic">
+          <div class="group magic">
+            <div class="bytes"><span class="b">89</span></div>
+            <div class="tag">Magic Byte</div>
+            <div class="meaning">&gt; 127 → "Ich bin Binär, kein Text"</div>
+          </div>
+          <div class="group format">
+            <div class="bytes"><span class="b">50</span><span class="b">4E</span><span class="b">47</span></div>
+            <div class="tag">Format-Kürzel</div>
+            <div class="meaning">P · N · G (ASCII) → "PNG-Datei"</div>
+          </div>
+          <div class="group transport">
+            <div class="bytes"><span class="b">0D</span><span class="b">0A</span><span class="b">1A</span><span class="b">0A</span></div>
+            <div class="tag">Transport-Schutz</div>
+            <div class="meaning">CR · LF · EOF · LF → erkennt kaputte Übertragung</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="footnote">
+    Byte ändern sich nicht — nur unsere <strong>Brille</strong>. Bitstream zeigt das <em>was</em>, Hex das <em>wie kompakt</em>, Bedeutung das <em>warum</em>.
+  </div>
+</body>
+</html>
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Warum 8 Bit? Adressierung im Speicher</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --bad: #ef4444;
+    --good: #16a34a;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 24px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; }
+
+  .ram-wrap { display: flex; gap: 18px; align-items: stretch; }
+
+  .ram {
+    display: grid;
+    grid-template-columns: 90px 90px 230px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--bg-soft);
+  }
+  .ram .head {
+    background: var(--dark); color: #fff; padding: 8px 10px;
+    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: center;
+  }
+  .ram .cell {
+    border-top: 1px solid var(--border); padding: 10px 12px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; font-weight: 700;
+    text-align: center; background: #fff;
+  }
+  .ram .cell.addr { color: var(--muted); background: var(--bg-soft); }
+  .ram .cell.bin  { font-size: 0.95rem; letter-spacing: 0.05em; }
+  .ram .row.cur .cell { background: #fef3f8; color: var(--hl); }
+
+  .pointer-side { display: flex; flex-direction: column; gap: 12px; padding-top: 36px; }
+  .ptr-block { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; }
+  .ptr-block.ok  { background: #dcfce7; color: var(--good); border: 2px solid var(--good); }
+  .ptr-block.bad { background: #fee2e2; color: var(--bad); border: 2px dashed var(--bad); }
+  .ptr-block.between {
+    background: #fff; color: var(--bad); border: 2px dashed var(--bad);
+    margin: -12px 0 -12px 0;
+    transform: translateX(-10px);
+  }
+  .ptr-block .ico { font-size: 1.3rem; line-height: 1; }
+
+  .legend {
+    display: flex; gap: 22px; padding: 12px 16px; border-top: 1px solid var(--border);
+    font-size: 0.9rem; color: var(--dark);
+  }
+  .legend .row { display: flex; align-items: center; gap: 6px; }
+  .legend .swatch { width: 14px; height: 14px; border-radius: 3px; }
+
+  .conclusion {
+    margin-top: 6px;
+    padding: 14px 22px;
+    background: #fef3f8;
+    border-left: 4px solid var(--hl);
+    border-radius: 4px;
+    font-size: 1rem;
+    text-align: center;
+    max-width: 760px;
+  }
+  .conclusion strong { color: var(--hl); }
+  .conclusion code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>Warum 8 Bit? Speicher-Adressierung</h1>
+  <div class="sub">CPU adressiert <strong>byteweise</strong> — halbe Byte existieren nicht.</div>
+
+  <div class="stage">
+
+    <div class="ram-wrap">
+
+      <div class="ram">
+        <div class="head">Adresse</div>
+        <div class="head">Hex</div>
+        <div class="head">Bit (was im Speicher steht)</div>
+
+        <div class="cell addr">0x0000</div>
+        <div class="cell">48</div>
+        <div class="cell bin">01001000</div>
+
+        <div class="cell addr">0x0001</div>
+        <div class="cell">65</div>
+        <div class="cell bin">01100101</div>
+
+        <div class="cell addr">0x0002</div>
+        <div class="cell">6C</div>
+        <div class="cell bin">01101100</div>
+
+        <div class="cell addr">0x0003</div>
+        <div class="cell">6C</div>
+        <div class="cell bin">01101100</div>
+
+        <div class="cell addr">0x0004</div>
+        <div class="cell">6F</div>
+        <div class="cell bin">01101111</div>
+
+        <div class="cell addr">0x0005</div>
+        <div class="cell">21</div>
+        <div class="cell bin">00100001</div>
+      </div>
+
+      <div class="pointer-side">
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0000 ✓</span></div>
+        <div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0000.5 — gibt's nicht</span></div>
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0001 ✓</span></div>
+        <div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0001.5 — gibt's nicht</span></div>
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0002 ✓</span></div>
+        <div class="ptr-block ok" style="opacity:0.4"><span class="ico">→</span><span>...</span></div>
+      </div>
+
+    </div>
+
+    <div class="conclusion">
+      <strong>Byte = kleinste adressierbare Einheit.</strong><br>
+      Speichercontroller, Bus und CPU sind alle auf 8-Bit-Häppchen ausgelegt.<br>
+      Einzelne Bit lesen → muss erst <code>byte = mem[addr]</code>, dann mit <code>byte &amp; 0b1000_0000</code> Bit isolieren.
+    </div>
+
+  </div>
+</body>
+</html>
@@ -39,11 +39,13 @@ pre code {
  color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #5fb3e4;
+  background: #0f0f23;
  padding: 0.15em 0.4em;
  border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -30,12 +30,21 @@ h2 {
 }
 pre {
  background: #0f0f23;
+  color: #f8f8f8;
  border-radius: 8px;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
+code {
+  background: #0f0f23;
+  color: #5fb3e4;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+section code:not(.hljs) { color: #5fb3e4 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -442,9 +451,9 @@ Ordne jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
 **Punkte:** 3
 **Typ:** `[ESSAY]`

-Erklären Sie die drei digitalen Distributionswege **Download**, **Streaming** und **Peer-to-Peer (P2P)**. Beschreiben Sie für jeden Weg: (1) wie die Daten zum Nutzer gelangen, (2) ob der Nutzer eine dauerhafte Kopie erhält, und (3) nennen Sie je ein Beispiel.
+Erklären Sie die drei digitalen Distributionswege **Download**, **Streaming** und **Peer-to-Peer (P2P)**. Beschreiben Sie für jeden Weg: (1) wie die Daten zu Nutzenden gelangen, (2) ob Nutzende eine dauerhafte Kopie erhalten, und (3) nennen Sie je ein Beispiel.

-> **Musterlösung:** **Download:** Datei wird vollständig vom Server heruntergeladen und lokal gespeichert. Nutzer erhält dauerhafte Kopie. Beispiel: iTunes Store, Steam. **Streaming:** Daten werden während des Abspielens übertragen, keine dauerhafte lokale Kopie. Beispiel: Netflix, Spotify. **P2P:** Nutzer laden Teile der Datei gleichzeitig von vielen anderen Nutzern herunter (dezentral). Dauerhafte Kopie möglich. Beispiel: BitTorrent.
+> **Musterlösung:** **Download:** Datei wird vollständig vom Server heruntergeladen und lokal gespeichert. Nutzende erhalten dauerhafte Kopie. Beispiel: iTunes Store, Steam. **Streaming:** Daten werden während des Abspielens übertragen, keine dauerhafte lokale Kopie. Beispiel: Netflix, Spotify. **P2P:** Nutzende laden Teile der Datei gleichzeitig von vielen anderen herunter (dezentral). Dauerhafte Kopie möglich. Beispiel: BitTorrent.

 ---

@@ -40,11 +40,13 @@ pre code {
  color: inherit;
 }
 code {
-  background: #1a1a2e;
-  color: #d63384;
+  background: #0f0f23;
  padding: 0.15em 0.4em;
  border-radius: 4px;
+  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
+section code:not(.hljs) { color: #d63384 !important; }
+section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -70,18 +72,6 @@ section.aufgabe footer {
 }
 section.erklaerung {
  font-size: 1.1rem;
-  background: repeating-linear-gradient(
-    135deg,
-    #fce4ec,
-    #fce4ec 40px,
-    #fff 40px,
-    #fff 80px
-  ) !important;
-}
-@media print {
-  section.erklaerung {
-    background: #fce4ec !important;
-  }
 }
 section.erklaerung h1 {
  font-size: 1.5rem;
@@ -165,12 +155,6 @@ SPEAKER NOTES:

 ---

-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/signal-2026-04-09-190024_002.jpeg)
-
---

 <!-- _class: lead -->

@@ -515,20 +499,20 @@ Der "Von-Neumann-Flaschenhals": CPU und Speicher teilen sich einen Bus – die B

 ---

-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-<!-- _backgroundColor: #fce4ec -->
-
 # Von-Neumann: 5 Komponenten

-| Komponente | Funktion |
-|------------|----------|
-| **Rechenwerk (ALU)** | Führt Berechnungen durch |
-| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf |
-| **Speicherwerk** | Speichert Programme UND Daten |
-| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk |
-| **Bus-System** | Verbindet alle Komponenten |
+| Komponente | Funktion | Heute |
+|------------|----------|-------|
+| **Rechenwerk (ALU)** | Führt Berechnungen durch | Teil der CPU |
+| **Steuerwerk** | Interpretiert Befehle, steuert Ablauf | Teil der CPU |
+| **Speicherwerk** | Speichert Programme UND Daten | RAM + SSD |
+| **Ein-/Ausgabe** | Tastatur, Bildschirm, Netzwerk | USB, WiFi, HDMI |
+| **Bus-System** | Verbindet alle Komponenten | PCIe, SATA, DDR |
+
+**Kernprinzip:** Programme und Daten teilen sich denselben Speicher.
+→ Computer wird **universell programmierbar** (nicht mehr für ein Problem verdrahtet)
+
+<small>Bus = Adressbus (wohin?) + Datenbus (was?) + Steuerbus (lesen/schreiben?)</small>

 <!--
 VON-NEUMANN-ARCHITEKTUR (1945): Grundlage aller modernen Computer
@@ -628,11 +612,13 @@ COBOL läuft heute noch auf Bankensystemen

 ---

-# Assembler (1947)
+![bg contain right:30%](./assets/Motorola_6800_Assembly_Language.png)
+
+# Kathleen Booth (1922–2022)

 **Die erste Stufe über Maschinencode**

- Erfunden von **Kathleen Booth** (Birkbeck College, London)
+- Entwickelt am **Birkbeck College, London**
 - Mnemonische Befehle statt Binärzahlen (`MOV`, `ADD`, `JMP`)
 - Jeder Befehl entspricht direkt einer CPU-Instruktion
 - Hardwarenah, aber für Menschen lesbar
@@ -644,7 +630,7 @@ 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.
+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 Programmierende 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.
@@ -661,44 +647,6 @@ Chris Sawyer, schottischer Entwickler, schrieb RCT zu 99% in x86-Assembly (MASM)

 ---

-# 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,10 +687,10 @@ Die Software priorisierte kritische Aufgaben automatisch

 - Big Data ermöglicht Massenüberwachung
 - KI-Systeme übernehmen Entscheidungen über Menschen
- Social Media schädigt die psychische Gesundheit Minderjähriger
+- Social Media schädigt nachweislich die psychische Gesundheit Minderjähriger
 - PimEyes: RAF-Terroristin in 30 Minuten gefunden – Polizei brauchte 30 Jahre

-→ Verantwortung liegt bei denen, die Technologie bauen und einsetzen
+→ Verantwortung liegt bei denen, die Technologie bauen, einsetzen und regulieren

 <!--
 Aktuelle Beispiele (in Reihenfolge der Folie):
@@ -766,7 +714,7 @@ Cambridge Analytica (2018): Facebook-Daten von 87 Mio. Nutzern wurden für polit

 China Social Credit System: Punktesystem für "gutes Verhalten". Wer zu oft bei Rot geht, bekommt keinen Kredit mehr.

-Die Frage: Wer entscheidet, was mit Technologie gemacht wird? Die Entwickler? Die Firmen? Die Politik? Wir alle?
+Die Frage: Wer entscheidet, was mit Technologie gemacht wird? Die Entwickelnden? Die Firmen? Die Politik? Wir alle?
 -->

 ---
@@ -915,7 +863,7 @@ Deutschland ist also kein Five-Eyes-Mitglied, aber Teil der Fourteen Eyes. Der B

 <!-- _class: lead -->

-# Bits & Bytes
+# Bit & Byte
 ## Die Sprache der Computer

 ---
@@ -953,19 +901,46 @@ Shannon: Begründer der Informationstheorie

 # Das Byte

-**8 Bit = 1 Byte**
+### Die kleinste *adressierbare* Informationseinheit
+
+### 8 bit = 1 Byte

 ```
-0 0 1 0 1 0 1 0
+0 0 1 0 1 0 1 0                                                                              = 42
 ```

-**Wie viele Kombinationen?**
-2⁸ = **256 Möglichkeiten** (0-255)
-
 <!--
-BYTE = Wortspiel aus "Bit" + "Bite" (Bissen)
-Warum 8 Bits? IBM System/360 (1964) setzte Standard
-2×2×2×2×2×2×2×2 = 256
+BYTE = Wortspiel aus "Bit" + "Bite" (Bissen) — Begriff geprägt von Werner Buchholz (IBM, 1956)
+Schreibweise mit "y" statt "i": bewusste Änderung zur Vermeidung von Verwechslung mit "Bit"
+binary 00101010 = decimal 42
+-->
+
+---
+
+# Das Byte
+
+### 8 bit = 1 Byte
+
+```
+0 0 0 0 0 0 0 0                                                                               = 0
+0 0 0 0 0 0 0 1                                                                               = 1
+0 0 0 0 0 0 1 0                                                                               = 2
+0 0 0 0 0 0 1 1                                                                               = 3
+0 0 0 0 0 1 0 0                                                                               = 4
+
+0 1 0 0 0 0 0 0                                                                               = 64
+0 1 1 1 1 1 1 1                                                                               = 127
+1 1 1 1 1 1 1 1                                                                               = ?
+```
+
+2 × 2 × 2 × 2 × 2 × 2 × 2 × 2 = 2⁸ = **256 mögliche Zustände**
+
+<!--
+- 1964: IBM System/360 setzte den 8-Bit-Byte-Standard — vorher 6-Bit/7-Bit-Systeme
+- ASCII (1963) brauchte 7 Bit für 128 Zeichen
+- 8 Bit = praktisch für Hardware (Zweierpotenz: 2³ = 8)
+- 8 Bit = 2 Hexadezimalziffern (elegante Darstellung)
+- Kleinste adressierbare Einheit im Speicher: Prozessor kann nicht einzelne Bits direkt ansprechen, immer Bytes
 -->

 ---
@@ -988,6 +963,32 @@ Farbbild: Rot + Grün + Blau

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/byte-nibble-hex.png)
+
+<!--
+Kernidee: jedes Byte lässt sich sauber in zwei 4-Bit-Hälften (Nibbles) zerlegen. Jede Hälfte hat 2⁴ = 16 Zustände – und genau 16 Symbole hat Hex (0-F). Deshalb passt Hex perfekt: 1 Nibble = 1 Hex-Ziffer, 1 Byte = 2 Hex-Ziffern. Keine krumme Umrechnung.
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/why-8-bit.png)
+
+<!--
+Warum gerade 8 Bit?
+- CPU adressiert byteweise — kleinste adressierbare Einheit
+- Halbe Byte (z.B. 0x0000.5) existieren nicht
+- Speichercontroller, Bus, CPU-Register sind alle auf 8-Bit-Häppchen ausgelegt
+- Einzelne Bit lesen: erst Byte holen, dann mit Bitmaske isolieren (byte & 0b1000_0000)
+- Hardware-Geschichte: IBM System/360 (1964) setzte 8-Bit-Standard, 7-Bit-ASCII + 1 Paritätsbit
+-->
+
+<!--
 # Zahlensysteme

 **Eine Ziffer — wie viele Werte?**
@@ -999,7 +1000,7 @@ Farbbild: Rot + Grün + Blau
 | **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)
@@ -1039,14 +1040,39 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
 <!-- _header: '' -->
 <!-- _footer: '' -->

-![bg fit](./assets/hex-dec-lookup-table.png)
+![bg fit](./assets/demos/hex-dec-table.png)

 ---

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

-![bg fit](./assets/8bit-P-character.png)
+![bg fit](./assets/demos/byte-flow.png)
+
+<!--
+1 Byte = 8 Bit = 2 Hex-Ziffern = 1 ASCII-Zeichen
+- Dieselbe Datei, drei Schreibweisen
+- Jeder Rahmen = ein Byte
+- Byte ändern sich nicht, nur unsere Anzeige
+- ↵ (0x0A) = nicht druckbar → Hex-Editoren zeigen . als Platzhalter
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/demos/three-views.png)
+
+<!--
+Dieselben 8 Byte (PNG-Dateianfang: 89 50 4E 47 0D 0A 1A 0A) — drei Perspektiven:
+1. Bitstream — was wirklich gespeichert wird (unleserlich)
+2. Hex — gruppiert in 8-Bit-Häppchen (kompakt)
+3. Bedeutung — was die Byte signalisieren:
+   - 89: Magic Byte (>127 → "ich bin Binärdatei")
+   - 50 4E 47: P N G (ASCII-Format-Kürzel)
+   - 0D 0A 1A 0A: CR LF EOF LF (erkennt kaputte Übertragung)
+-->

 ---

@@ -1161,6 +1187,11 @@ Formattierungssprache
    
 ---

+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #fce4ec -->
+
 # HTML-Anatomie (2/2)

 * Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
@@ -1195,30 +1226,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
@@ -1271,7 +1295,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack

 ```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>
 ```

@@ -1279,15 +1304,17 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, 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="" />
+Geburtsdatum <input type="date" />
 ```

 | Teil | Bezeichnung |
@@ -1379,16 +1406,20 @@ 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>
+
+<small>Code-Beispiel auf [codecrispi.es](https://codecrispi.es/#html-details-summary/0)</small>

 ---

@@ -1403,7 +1434,9 @@ 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>
+
+<small>Code-Beispiel auf [codecrispi.es](https://codecrispi.es/#html-details-summary/1)</small>

 ---

@@ -1416,7 +1449,9 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstel
 <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>
+
+<small>Code-Beispiel auf [codecrispi.es](https://codecrispi.es/#html-forms-basic/2)</small>

 ---

@@ -1431,12 +1466,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>
+
+<small>Code-Beispiel auf [codecrispi.es](https://codecrispi.es/#html-forms-basic/0)</small>

 ---

 # Beispiel: Dialog

+<small>*Modal · Modales Fenster · Popup · Popup-Fenster · Overlay · Dialogfenster*</small>
+
 ![bg right:35%](./assets/demos/dialog.png)

 ```html
@@ -1448,28 +1487,72 @@ 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>

+<small>Code-Beispiel auf [codecrispi.es](https://codecrispi.es/#html-dialog/0)</small>

 ---

 <!-- _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?

@@ -1477,12 +1560,12 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
 |---------|---------------|
 | **Maus** | Klicken, Scrollen |
 | **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
-| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
+| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, TalkBack, Orca) |
 | **Sprachsteuerung** | "Klicke auf Anmelden" |
 | **Augensteuerung** | Eye-Tracking |
 | **Switch-Geräte** | Ein-/Aus-Schalter |

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

 <!--
 ACCESSIBILITY (a11y): a + 11 Buchstaben + y
@@ -1509,7 +1592,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG

 # 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 NutzerInnen.
+Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.

 **Arten von Einschränkungen:**

@@ -1521,7 +1604,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
 | Kognitiv | Legasthenie | Müdigkeit | Ablenkung |

 **Assistive Technologien:**
- **Screenreader:** NVDA (Windows, kostenlos), VoiceOver (Apple, integriert), JAWS (kommerziell)
+- **Screenreader:** NVDA & Narrator (Windows), VoiceOver (macOS/iOS), TalkBack (Android), Orca (Linux) – überwiegend builtin oder Open Source; JAWS (Windows) kommerziell
 - **Braillezeilen:** Taktile Ausgabe, ~40–80 Zeichen
 - **Switch-Geräte:** Ein-Knopf-Steuerung für motorische Einschränkungen
 - **Eye-Tracking:** Blicksteuerung für Bewegungsunfähige
@@ -1530,11 +1613,6 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,

 ---

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

 **Rechtlich:**
@@ -1546,7 +1624,7 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,
 - Digitale Inklusion

 **Praktisch:**
- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
+- Bessere UX für **alle** (SEO, Mobile, ältere Menschen, temporäre Einschränkungen)
 - Größerer Markt (~15% der Bevölkerung)

 <!--
@@ -1592,15 +1670,19 @@ 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

+> ***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.*
+
 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # WCAG: Der Standard

-**W**eb **C**ontent **A**ccessibility **G**uidelines
+<small>**W**eb **C**ontent **A**ccessibility **G**uidelines · Herausgeber: **W3C** / WAI · **WCAG 2.2** (Okt. 2023) verbindlich · WCAG 3 Working Draft (März 2026)</small>

 **4 Prinzipien (POUR):**

@@ -1611,6 +1693,8 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
 | **Understandable** | Verständlich – Inhalte müssen klar sein |
 | **Robust** | Robust – Funktioniert mit verschiedenen Technologien |

+**Konformitätslevel:** A · AA (gesetzlicher Standard) · AAA  <small>· [w3.org/WAI/WCAG22/quickref](https://www.w3.org/WAI/WCAG22/quickref/)</small>
+
 <!--
 WCAG vom W3C (World Wide Web Consortium)
 Aktuelle Version: WCAG 2.2 (2023)
@@ -1622,15 +1706,23 @@ Gesetzlich meist Level AA gefordert

 # Perceivable: Wahrnehmbar

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

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

+
+### Textalternativen für **Nicht-Text**:
+```html
+<img src="tankman.jpg"
+     alt="Ein Mann mit Einkaufstüten steht
+          allein vor einer Reihe Panzer –
+          Tiananmen-Platz, Peking,
+          5. Juni 1989">
+```
+
 <!--
 Leeres alt="" für dekorative Bilder
 Contrast-Checker: WebAIM Contrast Checker
@@ -1639,27 +1731,30 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)

 ---

+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # Operable: Bedienbar

 ![bg right:35%](./assets/demos/a11y-focus.png)

 **Tastaturzugänglich:**
 ```css
-/* Fokus-Indikator NIE entfernen! */
-:focus {
-    outline: 2px solid blue;
-    outline-offset: 2px;
+/* Fokus-Ring nur bei Tastatur-Navigation */
+button:focus-visible {
+  outline: 3px solid #d63384;
+  outline-offset: 3px;
+  border-radius: 4px;
 }

-/* Wenn custom styling: */
-button:focus-visible {
-    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
-}
+/* Anti-Pattern: Tastatur-Nutzende sind "blind" */
+button:focus { outline: none; }
 ```

-**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
@@ -1727,6 +1822,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-Nutzende.
+-->
+
+---
+
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
@@ -1735,17 +1901,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
@@ -1755,38 +1920,6 @@ 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 NutzerInnen mit Behinderungen.
-
-**Tastatur-Test (5 Minuten):**
-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 -->

@@ -73,18 +73,6 @@ section.glossar {
 }
 section.erklaerung {
  font-size: 1.1rem;
-  /**background: repeating-linear-gradient(
-    135deg,
-    #fce4ec,
-    #fce4ec 40px,
-    #fff 40px,
-    #fff 80px
-  ) !important;**/
-}
-@media print {
-  section.erklaerung {
-    background: #fce4ec !important;
-  }
 }
 section.erklaerung h1 {
  font-size: 1.5rem;
@@ -1620,7 +1608,7 @@ Wie Encapsulation funktioniert.

 # Netzwerk-Grundlagen – Vertiefung

-Die vier Kernkonzepte für Web-Entwickler:
+Die vier Kernkonzepte für Web-Entwickelnde:

 **1. DNS-Auflösung:**
 - Browser fragt DNS-Resolver (z.B. 8.8.8.8)
@@ -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",
@@ -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++) {
@@ -528,6 +536,8 @@ querySelectorAll = alle Treffer

 # Elemente manipulieren

+![bg right:35%](./assets/demos/js-manipulate.png)
+
 ```javascript
 const element = document.querySelector("#meinElement");

@@ -556,6 +566,8 @@ style = Inline-Styles (camelCase!)

 # Klassen manipulieren

+![bg right:35%](./assets/demos/js-classlist.png)
+
 ```javascript
 const element = document.querySelector(".box");

@@ -584,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");
@@ -652,6 +666,8 @@ Interaktive Webseiten durch Events

 # Event Listener

+![bg right:35%](./assets/demos/js-event-listener.png)
+
 ```javascript
 const button = document.querySelector("#meinButton");

@@ -729,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");
@@ -755,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;
@@ -843,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");
@@ -885,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() {
@@ -906,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");
@@ -4,19 +4,17 @@
  <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;
-    }
+    body { font-family: system-ui, sans-serif; padding: 1.4rem; font-size: 1rem; }
+    button { font: inherit; padding: 10px 18px; margin: 8px 0; display: block; border: 1.5px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
    button:focus-visible, button.is-focused {
-      box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+      outline: 3px solid #d63384;
+      outline-offset: 3px;
+      border-radius: 4px;
    }
-    button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
  </style>
 </head>
 <body>
-  <p>Tab-Taste drücken:</p>
+  <p><strong>Tab-Taste drücken:</strong></p>
  <button class="is-focused">Erster Button</button>
  <button>Zweiter Button</button>
  <button>Dritter Button</button>
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte-Fluss: Bit → Hex → ASCII</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --byte-border: #94a3b8;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 22px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
+
+  .file {
+    width: 100%; box-sizing: border-box;
+    border: 2px solid var(--dark);
+    border-radius: 10px;
+    background: var(--bg-soft);
+    overflow: hidden;
+    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
+  }
+  .file .head {
+    background: var(--dark); color: #fff; padding: 8px 14px;
+    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .file .head .name { font-family: ui-monospace, monospace; }
+  .file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
+  .file .body { padding: 12px 14px; }
+
+  .row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
+  .row-bytes:last-child { margin-bottom: 0; }
+
+  .byte-bin {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 4px 7px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 0.92rem;
+    font-weight: 700;
+    background: #fff;
+    letter-spacing: 0.04em;
+  }
+  .byte-hex {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 6px 0;
+    font-family: ui-monospace, monospace;
+    font-size: 1.1rem;
+    font-weight: 700;
+    background: #fff;
+    min-width: 88px;
+    text-align: center;
+  }
+  .byte-ascii {
+    border: 1px solid var(--byte-border);
+    border-radius: 4px;
+    padding: 6px 0;
+    font-family: ui-monospace, monospace;
+    font-size: 1.2rem;
+    font-weight: 700;
+    background: #fff;
+    min-width: 88px;
+    text-align: center;
+  }
+  .byte-ascii.np { color: var(--muted); font-style: italic; }
+
+  .truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
+
+  .arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
+  .arrow {
+    width: 0; height: 0;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    border-top: 14px solid var(--hl);
+  }
+  .arrow-label {
+    font-size: 0.78rem; color: var(--hl); font-weight: 700;
+    text-transform: uppercase; letter-spacing: 0.05em;
+  }
+
+  .legend {
+    margin-top: 12px;
+    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
+    font-size: 0.85rem; color: var(--muted);
+  }
+  .legend strong { color: var(--dark); }
+  .legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
+  <div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
+
+  <div class="stage">
+
+    <!-- Stage 1: Bitstream -->
+    <div class="file">
+      <div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-stack">
+      <div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Stage 2: Hex -->
+    <div class="file">
+      <div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-stack">
+      <div class="arrow-label">je 1 Byte → 1 Zeichen</div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Stage 3: ASCII -->
+    <div class="file">
+      <div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
+      <div class="body">
+        <div class="row-bytes">
+          <span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
+        </div>
+        <div class="row-bytes">
+          <span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="legend">
+      <span><code>␣</code> = Leerzeichen (0x20)</span>
+      <span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
+      <span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
+    </div>
+
+  </div>
+</body>
+</html>
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte → Nibble → Hex</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 32px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+
+  .level { display: flex; flex-direction: column; align-items: center; }
+  .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
+
+  /* Level 1: whole byte */
+  .byte {
+    display: flex;
+    gap: 4px;
+    padding: 8px 14px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--bg-soft);
+  }
+  .byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
+  .byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
+
+  /* Split arrows */
+  .split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
+  .split .arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+  }
+
+  /* Level 2: two nibbles */
+  .nibbles { display: flex; gap: 80px; }
+  .nibble {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    padding: 10px 14px;
+    border: 2px solid var(--hl);
+    border-radius: 8px;
+    background: #fff;
+  }
+  .nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
+  .nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
+  .nibble .meta { font-size: 0.78rem; color: var(--muted); }
+
+  .single-arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+    margin: 2px 0;
+  }
+
+  /* Level 3: hex digits */
+  .hex-digits { display: flex; gap: 80px; }
+  .hex-digit {
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    padding: 8px 22px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--dark);
+    color: var(--hl);
+  }
+  .hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
+  .hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
+
+  /* Merge down to byte */
+  .merge {
+    display: flex; justify-content: center; margin-top: 2px;
+  }
+  .merge-v {
+    display: grid;
+    grid-template-columns: 60px 60px;
+    justify-content: center;
+    align-items: center;
+  }
+  .merge-v .line {
+    height: 20px;
+    border-right: 2px solid var(--hl);
+  }
+  .merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
+  .bottom-bar { height: 2px; background: var(--hl); width: 120px; }
+
+  /* Final result */
+  .result {
+    margin-top: 14px;
+    padding: 14px 22px;
+    background: #fef3f8;
+    border-left: 4px solid var(--hl);
+    border-radius: 4px;
+    font-size: 1.05rem;
+    text-align: center;
+    max-width: 640px;
+  }
+  .result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
+  .result strong { color: var(--hl); }
+
+  .math {
+    margin-top: 10px;
+    font-size: 0.95rem;
+    color: var(--dark);
+    text-align: center;
+  }
+  .math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
+  <div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
+
+  <div class="stage">
+    <!-- Level 1 -->
+    <div class="level">
+      <div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
+      <div class="byte">
+        <span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
+        <span class="sep"></span>
+        <span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 2 -->
+    <div class="level">
+      <div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
+      <div class="nibbles">
+        <div class="nibble">
+          <div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
+          <div class="meta">= 4 (dez)</div>
+        </div>
+        <div class="nibble">
+          <div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
+          <div class="meta">= 13 (dez)</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 3 -->
+    <div class="level">
+      <div class="label">2 Hex-Ziffern · Symbole 0–F</div>
+      <div class="hex-digits">
+        <div class="hex-digit">
+          <div class="digit">4</div>
+          <div class="meta">Nibble → 1 Ziffer</div>
+        </div>
+        <div class="hex-digit">
+          <div class="digit">D</div>
+          <div class="meta">13 → D</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="result">
+      <code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
+    </div>
+
+    <div class="math">
+      <span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
+    </div>
+  </div>
+</body>
+</html>
+</content>
+</invoke>
@@ -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,67 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Hex → Dezimal</title>
+<style>
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
+  body { padding: 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
+  .sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
+  table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
+  th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
+  thead th { background: #1a1a2e; color: #fff; }
+  tbody th { background: #334155; color: #fff; font-weight: 600; }
+  tbody td.ascii { background: #f3f4f6; }
+  tbody td.nonascii { background: #fff; color: #6b7280; }
+  .corner { background: #0f0f23; color: #d63384; }
+  .legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
+  .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
+  .example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
+  code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>Hex → Dezimal</h1>
+  <div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
+  <table>
+    <thead>
+      <tr>
+        <th class="corner">×16 / +</th>
+        <th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
+        <th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+
+  <div class="legend">
+    <span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
+    <span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
+  </div>
+
+  <div class="example">
+    <strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
+  </div>
+
+<script>
+  const rows = '0123456789ABCDEF';
+  const tb = document.querySelector('tbody');
+  for (let r = 0; r < 16; r++) {
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
+    tr.appendChild(th);
+    for (let c = 0; c < 16; c++) {
+      const td = document.createElement('td');
+      const v = r*16 + c;
+      td.textContent = v;
+      td.className = v <= 127 ? 'ascii' : 'nonascii';
+      tr.appendChild(td);
+    }
+    tb.appendChild(tr);
+  }
+</script>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: Input Date</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/input.html</span>
+    </div>
+    <iframe src="./input-date.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Input Date</title>
+  <style>
+    body { font-family: system-ui, -apple-system, sans-serif; padding: 1.4rem; margin: 0; background: #fff; }
+    label { display: block; font-size: 0.95rem; color: #374151; margin-bottom: 8px; font-weight: 600; }
+    input[type=date] {
+      font: 1.15rem system-ui, sans-serif;
+      padding: 10px 12px;
+      border: 1.5px solid #d1d5db;
+      border-radius: 6px;
+      background: #fff;
+      box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.15);
+      border-color: #d63384;
+      margin-bottom: 16px;
+    }
+    .picker {
+      width: 320px;
+      background: #fff;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+      overflow: hidden;
+      font-size: 0.9rem;
+    }
+    .picker-head {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 10px 14px;
+      border-bottom: 1px solid #e5e7eb;
+      font-weight: 600;
+    }
+    .picker-head button {
+      border: 0; background: transparent; font-size: 1rem; padding: 4px 8px; cursor: pointer; color: #6b7280;
+    }
+    .dow, .grid {
+      display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
+      padding: 6px 10px;
+    }
+    .dow { font-size: 0.75rem; color: #6b7280; font-weight: 600; text-align: center; padding-bottom: 2px; }
+    .grid { padding-top: 0; padding-bottom: 14px; }
+    .grid div {
+      aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
+      border-radius: 50%; font-variant-numeric: tabular-nums;
+    }
+    .grid .muted { color: #d1d5db; }
+    .grid .today { background: #fce7f3; color: #d63384; font-weight: 700; }
+    .grid .sel { background: #d63384; color: #fff; font-weight: 700; }
+    .grid div:hover:not(.muted):not(.sel) { background: #f3f4f6; }
+  </style>
+</head>
+<body>
+  <label for="d">Geburtsdatum</label>
+  <input type="date" id="d" value="2026-04-21" />
+
+  <div class="picker" aria-hidden="true">
+    <div class="picker-head">
+      <button>‹</button>
+      <span>April 2026</span>
+      <button>›</button>
+    </div>
+    <div class="dow"><div>Mo</div><div>Di</div><div>Mi</div><div>Do</div><div>Fr</div><div>Sa</div><div>So</div></div>
+    <div class="grid">
+      <div class="muted">30</div><div class="muted">31</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
+      <div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>
+      <div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
+      <div>20</div><div class="sel">21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div>
+      <div>27</div><div>28</div><div>29</div><div>30</div><div class="muted">1</div><div class="muted">2</div><div class="muted">3</div>
+    </div>
+  </div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-arrays</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/arrays.html</span>
+    </div>
+    <iframe src="./js-arrays.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Arrays</title>
+  <style>
+    body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.95rem; }
+    .row { padding: 4px 0; border-bottom: 1px solid #f3f4f6; display: flex; gap: 8px; }
+    .prompt { color: #9ca3af; }
+    .num { color: #1e40af; }
+    .str { color: #15803d; }
+    .out { color: #6b7280; font-style: italic; }
+    .arr { display: inline-flex; gap: 2px; }
+    .cell {
+      border: 1px solid #d1d5db;
+      padding: 2px 8px;
+      border-radius: 3px;
+      background: #f9fafb;
+    }
+    .idx { font-size: 0.65rem; color: #9ca3af; text-align: center; }
+  </style>
+</head>
+<body>
+  <div class="row"><span class="prompt">&gt;</span><span>const f = [<span class="str">"🍎"</span>, <span class="str">"🍌"</span>, <span class="str">"🍒"</span>];</span></div>
+  <div style="margin: 8px 0 10px;">
+    <div class="arr">
+      <div><div class="cell">🍎</div><div class="idx">0</div></div>
+      <div><div class="cell">🍌</div><div class="idx">1</div></div>
+      <div><div class="cell">🍒</div><div class="idx">2</div></div>
+    </div>
+  </div>
+  <div class="row"><span class="prompt">&gt;</span><span>f[<span class="num">0</span>];</span></div>
+  <div class="row"><span class="prompt">←</span><span class="out"><span class="str">"🍎"</span></span></div>
+  <div class="row"><span class="prompt">&gt;</span><span>f.length;</span></div>
+  <div class="row"><span class="prompt">←</span><span class="out"><span class="num">3</span></span></div>
+  <div class="row"><span class="prompt">&gt;</span><span>f.push(<span class="str">"🍇"</span>);</span></div>
+  <div class="row"><span class="prompt">←</span><span class="out"><span class="num">4</span></span></div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-classlist</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/classlist.html</span>
+    </div>
+    <iframe src="./js-classlist.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>classList</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    h3 { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
+    .box {
+      padding: 16px 20px;
+      border: 2px solid #9ca3af;
+      border-radius: 6px;
+      background: #f3f4f6;
+      margin-bottom: 14px;
+    }
+    .box.aktiv {
+      border-color: #16a34a;
+      background: #dcfce7;
+      color: #14532d;
+      font-weight: 600;
+      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
+    }
+    button {
+      font: inherit;
+      padding: 8px 14px;
+      border-radius: 6px;
+      border: 1px solid #9ca3af;
+      background: #fff;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <h3>.box ohne Klasse</h3>
+  <div class="box">inaktiv</div>
+
+  <h3>.box mit classList.add("aktiv")</h3>
+  <div class="box aktiv">aktiv ✓</div>
+
+  <button>classList.toggle("aktiv")</button>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-console</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/console.html</span>
+    </div>
+    <iframe src="./js-console.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>DevTools Console</title>
+  <style>
+    body { margin: 0; padding: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #fff; }
+    .console { padding: 14px 16px; font-size: 0.95rem; }
+    .row { display: flex; gap: 8px; padding: 5px 0; border-bottom: 1px solid #f3f4f6; }
+    .prompt { color: #9ca3af; user-select: none; }
+    .input { color: #1a1a2e; flex: 1; }
+    .output { color: #6b7280; font-style: italic; flex: 1; }
+    .num { color: #1e40af; }
+    .str { color: #15803d; }
+    .key { color: #7c2d12; }
+  </style>
+</head>
+<body>
+  <div class="console">
+    <div class="row"><span class="prompt">&gt;</span><span class="input">let alter = <span class="num">25</span>;</span></div>
+    <div class="row"><span class="prompt">&gt;</span><span class="input">const name = <span class="str">"Max"</span>;</span></div>
+    <div class="row"><span class="prompt">&gt;</span><span class="input">console.log(name, alter);</span></div>
+    <div class="row"><span class="prompt">←</span><span class="output"><span class="str">"Max"</span> <span class="num">25</span></span></div>
+    <div class="row"><span class="prompt">&gt;</span><span class="input">typeof alter;</span></div>
+    <div class="row"><span class="prompt">←</span><span class="output"><span class="str">"number"</span></span></div>
+  </div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-create</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/create.html</span>
+    </div>
+    <iframe src="./js-create.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>createElement</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    h3 { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
+    #container { border: 1px solid #e5e7eb; border-radius: 6px; padding: 14px; background: #f9fafb; }
+    p { margin: 6px 0; padding: 6px 10px; background: #fff; border-radius: 4px; border: 1px solid #e5e7eb; }
+    p.highlight {
+      background: #fef3c7;
+      border-color: #ca8a04;
+      color: #713f12;
+      font-weight: 600;
+      animation: pulse 1.2s ease-in-out infinite;
+    }
+    .badge {
+      display: inline-block;
+      background: #16a34a;
+      color: #fff;
+      padding: 2px 8px;
+      border-radius: 3px;
+      font-size: 0.7rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-left: 8px;
+      vertical-align: middle;
+    }
+  </style>
+</head>
+<body>
+  <h3>#container nach appendChild</h3>
+  <div id="container">
+    <p>Erster Absatz</p>
+    <p>Zweiter Absatz</p>
+    <p class="highlight">Ich bin neu!<span class="badge">createElement</span></p>
+  </div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: Dark Mode</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/darkmode.html</span>
+    </div>
+    <iframe src="./js-darkmode.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Dark Mode Toggle</title>
+  <style>
+    body {
+      font-family: system-ui, sans-serif;
+      padding: 1.5rem;
+      transition: background .2s, color .2s;
+    }
+    button {
+      font: inherit;
+      padding: 8px 16px;
+      border: 1px solid #9ca3af;
+      border-radius: 6px;
+      background: #f3f4f6;
+      cursor: pointer;
+    }
+    .dark-mode {
+      background: #1a1a1a;
+      color: #eee;
+    }
+    .dark-mode button {
+      background: #2a2a2a;
+      color: #eee;
+      border-color: #555;
+    }
+    h2 { margin-top: 0; }
+  </style>
+</head>
+<body class="dark-mode">
+  <h2>Hallo Welt!</h2>
+  <p>Diese Seite wechselt zwischen hellem und dunklem Modus.</p>
+  <button id="darkModeToggle">☀️ Light Mode</button>
+  <script>
+    const toggleButton = document.querySelector("#darkModeToggle");
+    const body = document.body;
+    toggleButton.addEventListener("click", () => {
+      body.classList.toggle("dark-mode");
+      if (body.classList.contains("dark-mode")) {
+        toggleButton.textContent = "☀️ Light Mode";
+      } else {
+        toggleButton.textContent = "🌙 Dark Mode";
+      }
+    });
+  </script>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-event-listener</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/event-listener.html</span>
+    </div>
+    <iframe src="./js-event-listener.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Event Listener</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; text-align: center; }
+    button {
+      font: inherit;
+      font-size: 1.2rem;
+      padding: 12px 24px;
+      border-radius: 8px;
+      border: 2px solid #1e40af;
+      background: #dbeafe;
+      color: #1e3a8a;
+      cursor: pointer;
+      font-weight: 600;
+    }
+    .count {
+      margin-top: 1.2rem;
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: #d63384;
+    }
+    .console {
+      margin-top: 1.2rem;
+      background: #0f0f23;
+      color: #d63384;
+      padding: 10px 14px;
+      border-radius: 6px;
+      font-family: ui-monospace, monospace;
+      font-size: 0.85rem;
+      text-align: left;
+    }
+    .console .prompt { color: #6b7280; }
+  </style>
+</head>
+<body>
+  <button id="meinButton">Klick mich!</button>
+  <div class="count">Klicks: 3</div>
+  <div class="console">
+    <div><span class="prompt">&gt;</span> Button wurde geklickt!</div>
+    <div><span class="prompt">&gt;</span> Button wurde geklickt!</div>
+    <div><span class="prompt">&gt;</span> Button wurde geklickt!</div>
+  </div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-fetch</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/fetch.html</span>
+    </div>
+    <iframe src="./js-fetch.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Fetch</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    .url {
+      font-family: ui-monospace, monospace;
+      background: #f3f4f6;
+      padding: 6px 10px;
+      border-radius: 4px;
+      font-size: 0.85rem;
+      color: #4a4a6a;
+      margin-bottom: 1rem;
+      display: inline-block;
+    }
+    .arrow {
+      margin: 0.6rem 0;
+      color: #d63384;
+      font-style: italic;
+      font-size: 0.85rem;
+    }
+    .json {
+      background: #0f0f23;
+      color: #d63384;
+      padding: 14px;
+      border-radius: 6px;
+      font-family: ui-monospace, monospace;
+      font-size: 0.82rem;
+      line-height: 1.5;
+      margin-bottom: 1rem;
+    }
+    .json .k { color: #86efac; }
+    .json .s { color: #fde68a; }
+    .json .n { color: #93c5fd; }
+    .rendered {
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      padding: 14px;
+      background: #f9fafb;
+    }
+    .rendered h3 { margin: 0 0 6px; }
+    .rendered p { margin: 3px 0; color: #4a4a6a; }
+  </style>
+</head>
+<body>
+  <div class="url">GET https://api.example.com/user/1</div>
+  <div class="json">{<br>
+  &nbsp;&nbsp;<span class="k">"id"</span>: <span class="n">1</span>,<br>
+  &nbsp;&nbsp;<span class="k">"name"</span>: <span class="s">"Max"</span>,<br>
+  &nbsp;&nbsp;<span class="k">"email"</span>: <span class="s">"max@hdm.de"</span><br>
+}</div>
+  <div class="arrow">↓ await response.json() → ins DOM rendern</div>
+  <div class="rendered">
+    <h3>Max</h3>
+    <p>max@hdm.de</p>
+  </div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-localstorage</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/localstorage.html</span>
+    </div>
+    <iframe src="./js-localstorage.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>LocalStorage</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    .card {
+      border: 1px solid #e5e7eb;
+      border-radius: 6px;
+      padding: 14px;
+      margin-bottom: 1rem;
+      background: #f9fafb;
+    }
+    h3 { margin: 0 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
+    .kv {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 6px 14px;
+      font-family: ui-monospace, monospace;
+      font-size: 0.9rem;
+    }
+    .k { color: #7c2d12; font-weight: 700; }
+    .v { color: #14532d; }
+    .reload {
+      background: #dcfce7;
+      border: 2px solid #16a34a;
+      padding: 10px 14px;
+      border-radius: 6px;
+      color: #14532d;
+      font-weight: 600;
+    }
+    .icon { font-size: 1.2em; margin-right: 6px; }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h3>localStorage</h3>
+    <div class="kv">
+      <div class="k">"name"</div><div class="v">"Max"</div>
+      <div class="k">"settings"</div><div class="v">{"darkMode":true}</div>
+    </div>
+  </div>
+  <div class="reload"><span class="icon">💾</span>Bleibt nach Reload / Browser-Neustart erhalten</div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-loops</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/loops.html</span>
+    </div>
+    <iframe src="./js-loops.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Schleifen</title>
+  <style>
+    body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.95rem; }
+    .row { padding: 4px 0; display: flex; gap: 8px; }
+    .prompt { color: #9ca3af; }
+    .out { color: #6b7280; font-style: italic; }
+    .num { color: #1e40af; }
+    .str { color: #15803d; }
+    .code { background: #0f0f23; color: #d63384; padding: 10px; border-radius: 4px; margin: 8px 0; }
+    .code pre { margin: 0; color: inherit; font-family: inherit; font-size: 0.85rem; }
+  </style>
+</head>
+<body>
+  <div class="code">
+    <pre>for (let i = 0; i < 3; i++) {
+  console.log("Runde", i);
+}</pre>
+  </div>
+  <div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">0</span></span></div>
+  <div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">1</span></span></div>
+  <div class="row"><span class="prompt">←</span><span class="out"><span class="str">"Runde"</span> <span class="num">2</span></span></div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-manipulate</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/manipulate.html</span>
+    </div>
+    <iframe src="./js-manipulate.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Element manipulieren</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    h3 { margin: 0.5rem 0 0.4rem; font-size: 0.85rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; }
+    .demo { border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; margin-bottom: 14px; background: #f9fafb; }
+    #meinElement { color: red; background: #fee2e2; padding: 8px 12px; border-radius: 4px; }
+  </style>
+</head>
+<body>
+  <h3>Vorher</h3>
+  <div class="demo"><p>Alter Text</p></div>
+
+  <h3>Nach JavaScript</h3>
+  <div class="demo">
+    <p id="meinElement">Neuer Text</p>
+  </div>
+
+  <script>
+    // element.textContent = "Neuer Text";
+    // element.style.color = "red";
+  </script>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-objects</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/objects.html</span>
+    </div>
+    <iframe src="./js-objects.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Objects</title>
+  <style>
+    body { margin: 0; padding: 14px 16px; font-family: ui-monospace, monospace; background: #fff; font-size: 0.9rem; }
+    .card {
+      border: 2px solid #4f46e5;
+      border-radius: 6px;
+      padding: 12px 14px;
+      background: #eef2ff;
+      margin: 10px 0;
+    }
+    .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
+    .k { color: #7c2d12; font-weight: 700; }
+    .v { color: #14532d; }
+    .row { padding: 4px 0; display: flex; gap: 8px; }
+    .prompt { color: #9ca3af; }
+    .out { color: #6b7280; font-style: italic; }
+    .str { color: #15803d; }
+    .num { color: #1e40af; }
+  </style>
+</head>
+<body>
+  <div class="row"><span class="prompt">&gt;</span><span>const user = { name: <span class="str">"Max"</span>, alter: <span class="num">25</span> };</span></div>
+  <div class="card">
+    <div class="kv">
+      <div class="k">name:</div><div class="v str">"Max"</div>
+      <div class="k">alter:</div><div class="v num">25</div>
+      <div class="k">studiert:</div><div class="v str">"DMW"</div>
+    </div>
+  </div>
+  <div class="row"><span class="prompt">&gt;</span><span>user.name;</span></div>
+  <div class="row"><span class="prompt">←</span><span class="out str">"Max"</span></div>
+  <div class="row"><span class="prompt">&gt;</span><span>user[<span class="str">"alter"</span>];</span></div>
+  <div class="row"><span class="prompt">←</span><span class="out num">25</span></div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-preventdefault</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/preventdefault.html</span>
+    </div>
+    <iframe src="./js-preventdefault.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>preventDefault</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
+    label { font-weight: 600; }
+    input {
+      font: inherit;
+      padding: 8px 12px;
+      border: 2px solid #d63384;
+      border-radius: 4px;
+    }
+    button {
+      font: inherit;
+      padding: 8px 16px;
+      border-radius: 6px;
+      border: 1px solid #1e40af;
+      background: #dbeafe;
+      color: #1e3a8a;
+      cursor: pointer;
+      font-weight: 600;
+      align-self: flex-start;
+    }
+    .status {
+      margin-top: 1rem;
+      padding: 10px 14px;
+      border-radius: 6px;
+      background: #dcfce7;
+      border: 2px solid #16a34a;
+      color: #14532d;
+      font-weight: 600;
+      max-width: 320px;
+    }
+    .no-reload {
+      font-size: 0.8rem;
+      color: #6b7280;
+      font-style: italic;
+      margin-top: 4px;
+    }
+  </style>
+</head>
+<body>
+  <form>
+    <label for="email">E-Mail</label>
+    <input id="email" type="email" value="test@hdm.de">
+    <button type="submit">Absenden</button>
+  </form>
+  <div class="status">✓ Formular verarbeitet (ohne Reload!)</div>
+  <div class="no-reload">event.preventDefault() verhindert Seiten-Neuladen</div>
+</body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Preview: js-todo</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/todo.html</span>
+    </div>
+    <iframe src="./js-todo.html"></iframe>
+  </div>
+</div>
+</body>
+</html>
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Todo-Liste</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.5rem; }
+    h2 { margin: 0 0 1rem; }
+    form { display: flex; gap: 8px; margin-bottom: 1rem; }
+    input {
+      flex: 1;
+      font: inherit;
+      padding: 8px 12px;
+      border: 1px solid #9ca3af;
+      border-radius: 4px;
+    }
+    button {
+      font: inherit;
+      padding: 8px 16px;
+      border-radius: 4px;
+      border: 1px solid #1e40af;
+      background: #1e40af;
+      color: #fff;
+      cursor: pointer;
+      font-weight: 600;
+    }
+    ul { list-style: none; padding: 0; margin: 0; }
+    li {
+      padding: 10px 14px;
+      background: #f3f4f6;
+      border: 1px solid #e5e7eb;
+      border-radius: 4px;
+      margin-bottom: 6px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    li::before {
+      content: "○";
+      color: #9ca3af;
+      font-size: 1.2rem;
+    }
+    .hint { font-size: 0.75rem; color: #6b7280; margin-top: 0.8rem; font-style: italic; }
+  </style>
+</head>
+<body>
+  <h2>Meine Todos</h2>
+  <form id="todoForm">
+    <input id="todoInput" placeholder="Neue Aufgabe...">
+    <button type="submit">+ Hinzufügen</button>
+  </form>
+  <ul id="todoList">
+    <li>Folien vorbereiten</li>
+    <li>Demo testen</li>
+    <li>Kaffee holen</li>
+  </ul>
+  <div class="hint">Klick auf ein Todo = entfernt es</div>
+</body>
+</html>
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Tastatur-Navigation</title>
+<style>
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
+  body { padding: 24px; display: inline-block; }
+
+  .kb {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 12px;
+    align-items: end;
+  }
+  .main { display: flex; flex-direction: column; gap: 4px; }
+  .row { display: flex; gap: 4px; }
+  .nav { display: grid; grid-template-columns: repeat(3, 42px); gap: 4px; }
+
+  .k {
+    height: 38px;
+    min-width: 38px;
+    padding: 0 8px;
+    border: 1.5px solid #d1d5db;
+    border-radius: 5px;
+    background: #f9fafb;
+    color: #cbd5e1;
+    font-size: 0.72rem;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.45;
+  }
+  .k.active {
+    background: #fce7f3;
+    border-color: #d63384;
+    color: #7c2d12;
+    opacity: 1;
+    box-shadow: 0 2px 0 #d63384, 0 3px 6px rgba(214,51,132,0.18);
+    font-size: 0.8rem;
+  }
+  .k.tab { min-width: 64px; }
+  .k.caps { min-width: 74px; }
+  .k.shift { min-width: 92px; }
+  .k.shift-r { min-width: 110px; }
+  .k.enter { min-width: 84px; }
+  .k.backspace { min-width: 78px; }
+  .k.space { flex: 1; min-width: 260px; height: 38px; }
+  .k.mod { min-width: 48px; }
+  .k.mod-space { min-width: 48px; }
+  .k.arrow { height: 38px; min-width: 38px; }
+
+  .legend {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding-left: 12px;
+    font-size: 0.9rem;
+    color: #1a1a2e;
+  }
+  .legend .item { display: flex; align-items: center; gap: 10px; }
+  .legend .mini {
+    display: inline-flex;
+    min-width: 32px;
+    height: 28px;
+    padding: 0 7px;
+    border-radius: 4px;
+    align-items: center;
+    justify-content: center;
+    background: #fce7f3;
+    border: 1.5px solid #d63384;
+    color: #7c2d12;
+    font-size: 0.8rem;
+    font-weight: 700;
+    box-shadow: 0 2px 0 #d63384;
+  }
+  .legend .text { font-size: 0.88rem; line-height: 1.2; }
+  .legend .text b { color: #d63384; }
+
+  .title {
+    font-weight: 700;
+    font-size: 1rem;
+    color: #1a1a2e;
+    margin-bottom: 10px;
+  }
+</style>
+</head>
+<body>
+<div class="kb">
+  <div class="main">
+    <!-- Row 1: Function/digit -->
+    <div class="row">
+      <div class="k">`</div>
+      <div class="k">1</div><div class="k">2</div><div class="k">3</div><div class="k">4</div>
+      <div class="k">5</div><div class="k">6</div><div class="k">7</div><div class="k">8</div>
+      <div class="k">9</div><div class="k">0</div>
+      <div class="k">-</div><div class="k">=</div>
+      <div class="k backspace">⌫</div>
+    </div>
+    <!-- Row 2: Tab QWERTY -->
+    <div class="row">
+      <div class="k tab active">⇥ Tab</div>
+      <div class="k">Q</div><div class="k">W</div><div class="k">E</div><div class="k">R</div>
+      <div class="k">T</div><div class="k">Y</div><div class="k">U</div><div class="k">I</div>
+      <div class="k">O</div><div class="k">P</div>
+      <div class="k">[</div><div class="k">]</div><div class="k">\</div>
+    </div>
+    <!-- Row 3: Caps ASDF Enter -->
+    <div class="row">
+      <div class="k caps">Caps</div>
+      <div class="k">A</div><div class="k">S</div><div class="k">D</div><div class="k">F</div>
+      <div class="k">G</div><div class="k">H</div><div class="k">J</div><div class="k">K</div>
+      <div class="k">L</div>
+      <div class="k">;</div><div class="k">'</div>
+      <div class="k enter active">↵ Enter</div>
+    </div>
+    <!-- Row 4: Shift ZXCV Shift -->
+    <div class="row">
+      <div class="k shift active">⇧ Shift</div>
+      <div class="k">Z</div><div class="k">X</div><div class="k">C</div><div class="k">V</div>
+      <div class="k">B</div><div class="k">N</div><div class="k">M</div>
+      <div class="k">,</div><div class="k">.</div><div class="k">/</div>
+      <div class="k shift-r active">⇧ Shift</div>
+    </div>
+    <!-- Row 5: Ctrl/Alt/Space -->
+    <div class="row">
+      <div class="k mod">Ctrl</div>
+      <div class="k mod">⌘</div>
+      <div class="k mod">Alt</div>
+      <div class="k space active">␣ Leertaste</div>
+      <div class="k mod">Alt</div>
+      <div class="k mod">⌘</div>
+      <div class="k mod">Ctrl</div>
+    </div>
+  </div>
+
+  <!-- Arrow cluster -->
+  <div class="nav">
+    <div></div>
+    <div class="k arrow active">↑</div>
+    <div></div>
+    <div class="k arrow active">←</div>
+    <div class="k arrow active">↓</div>
+    <div class="k arrow active">→</div>
+  </div>
+</div>
+
+<div style="display: flex; gap: 28px; margin-top: 26px;">
+  <div class="legend">
+    <div class="title">Navigation</div>
+    <div class="item">
+      <span class="mini">⇥</span>
+      <span class="text"><b>Tab</b> – zum nächsten fokussierbaren Element</span>
+    </div>
+    <div class="item">
+      <span class="mini">⇧⇥</span>
+      <span class="text"><b>Shift + Tab</b> – ein Element zurück</span>
+    </div>
+    <div class="item">
+      <span class="mini">↑↓←→</span>
+      <span class="text"><b>Pfeiltasten</b> – scrollen, innerhalb Listen/Menüs navigieren</span>
+    </div>
+  </div>
+  <div class="legend">
+    <div class="title">Aktion</div>
+    <div class="item">
+      <span class="mini">↵</span>
+      <span class="text"><b>Enter</b> – Link/Button aktivieren</span>
+    </div>
+    <div class="item">
+      <span class="mini">␣</span>
+      <span class="text"><b>Leertaste</b> – Checkbox toggle, Dropdown öffnen, scrollen</span>
+    </div>
+  </div>
+</div>
+</body>
+</html>
@@ -3,8 +3,14 @@
 <head>
  <meta charset="UTF-8">
  <title>Tag mit Attribut</title>
+  <style>
+    body { font-family: system-ui, sans-serif; padding: 1.2rem; margin: 0; font-size: 1.1rem; line-height: 1.5; }
+    .wichtig { color: #d63384; font-weight: 700; font-size: 1.3rem; background: #fce7f3; padding: 8px 12px; border-left: 4px solid #d63384; border-radius: 4px; }
+    p { margin: 0 0 16px 0; }
+  </style>
 </head>
 <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>
 </html>
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Dieselben Byte — drei Perspektiven</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --magic: #ef4444;
+    --format: #2563eb;
+    --transport: #16a34a;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 24px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
+
+  .row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; }
+  .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: right; white-space: nowrap; }
+  .label small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 2px; font-size: 0.8em; white-space: nowrap; }
+
+  .panel { padding: 14px 16px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
+  .panel.bin { background: #0f0f23; color: #fff; border-color: var(--dark); }
+  .panel.bin code { color: #e5e7eb; }
+  .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; word-break: break-all; line-height: 1.5; }
+
+  .hex-bytes { display: flex; flex-wrap: wrap; gap: 8px; }
+  .hex-byte { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
+
+  .semantic { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
+  .group { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; min-width: 70px; }
+  .group .bytes { display: flex; gap: 4px; }
+  .group .b { background: #fff; border: 1px solid currentColor; border-radius: 3px; padding: 3px 7px; font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); }
+  .group .tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+  .group .meaning { font-size: 0.78rem; line-height: 1.3; color: var(--dark); }
+  .group.magic { background: #fee2e2; color: var(--magic); }
+  .group.format { background: #dbeafe; color: var(--format); }
+  .group.transport { background: #dcfce7; color: var(--transport); }
+
+  .arrow-row { display: flex; justify-content: center; }
+  .arrow {
+    width: 0; height: 0;
+    border-left: 11px solid transparent;
+    border-right: 11px solid transparent;
+    border-top: 14px solid var(--hl);
+  }
+
+  .footnote { margin-top: 16px; font-size: 0.88rem; color: var(--muted); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
+  .footnote strong { color: var(--dark); }
+</style>
+</head>
+<body>
+  <h1>Dieselben 8 Byte — drei Perspektiven</h1>
+  <div class="sub">PNG-Datei-Anfang: <code style="font-family:ui-monospace,monospace">89 50 4E 47 0D 0A 1A 0A</code></div>
+
+  <div class="stage">
+
+    <div class="row">
+      <div class="label">1 · Bitstream<small>was wirklich gespeichert wird</small></div>
+      <div class="panel bin">
+        <code class="mono">10001001&nbsp;01010000&nbsp;01001110&nbsp;01000111&nbsp;00001101&nbsp;00001010&nbsp;00011010&nbsp;00001010</code>
+      </div>
+    </div>
+
+    <div class="arrow-row"><div class="arrow"></div></div>
+
+    <div class="row">
+      <div class="label">2 · Hex<small>gruppiert in 8-Bit-Häppchen</small></div>
+      <div class="panel">
+        <div class="hex-bytes">
+          <span class="hex-byte">89</span>
+          <span class="hex-byte">50</span>
+          <span class="hex-byte">4E</span>
+          <span class="hex-byte">47</span>
+          <span class="hex-byte">0D</span>
+          <span class="hex-byte">0A</span>
+          <span class="hex-byte">1A</span>
+          <span class="hex-byte">0A</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="arrow-row"><div class="arrow"></div></div>
+
+    <div class="row">
+      <div class="label">3 · Bedeutung<small>was die Byte sagen</small></div>
+      <div class="panel">
+        <div class="semantic">
+          <div class="group magic">
+            <div class="bytes"><span class="b">89</span></div>
+            <div class="tag">Magic Byte</div>
+            <div class="meaning">&gt; 127 → "Ich bin Binär, kein Text"</div>
+          </div>
+          <div class="group format">
+            <div class="bytes"><span class="b">50</span><span class="b">4E</span><span class="b">47</span></div>
+            <div class="tag">Format-Kürzel</div>
+            <div class="meaning">P · N · G (ASCII) → "PNG-Datei"</div>
+          </div>
+          <div class="group transport">
+            <div class="bytes"><span class="b">0D</span><span class="b">0A</span><span class="b">1A</span><span class="b">0A</span></div>
+            <div class="tag">Transport-Schutz</div>
+            <div class="meaning">CR · LF · EOF · LF → erkennt kaputte Übertragung</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
+  <div class="footnote">
+    Byte ändern sich nicht — nur unsere <strong>Brille</strong>. Bitstream zeigt das <em>was</em>, Hex das <em>wie kompakt</em>, Bedeutung das <em>warum</em>.
+  </div>
+</body>
+</html>
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Warum 8 Bit? Adressierung im Speicher</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+    --bad: #ef4444;
+    --good: #16a34a;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 24px 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; }
+
+  .ram-wrap { display: flex; gap: 18px; align-items: stretch; }
+
+  .ram {
+    display: grid;
+    grid-template-columns: 90px 90px 230px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--bg-soft);
+  }
+  .ram .head {
+    background: var(--dark); color: #fff; padding: 8px 10px;
+    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: center;
+  }
+  .ram .cell {
+    border-top: 1px solid var(--border); padding: 10px 12px;
+    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; font-weight: 700;
+    text-align: center; background: #fff;
+  }
+  .ram .cell.addr { color: var(--muted); background: var(--bg-soft); }
+  .ram .cell.bin  { font-size: 0.95rem; letter-spacing: 0.05em; }
+  .ram .row.cur .cell { background: #fef3f8; color: var(--hl); }
+
+  .pointer-side { display: flex; flex-direction: column; gap: 12px; padding-top: 36px; }
+  .ptr-block { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; }
+  .ptr-block.ok  { background: #dcfce7; color: var(--good); border: 2px solid var(--good); }
+  .ptr-block.bad { background: #fee2e2; color: var(--bad); border: 2px dashed var(--bad); }
+  .ptr-block.between {
+    background: #fff; color: var(--bad); border: 2px dashed var(--bad);
+    margin: -12px 0 -12px 0;
+    transform: translateX(-10px);
+  }
+  .ptr-block .ico { font-size: 1.3rem; line-height: 1; }
+
+  .legend {
+    display: flex; gap: 22px; padding: 12px 16px; border-top: 1px solid var(--border);
+    font-size: 0.9rem; color: var(--dark);
+  }
+  .legend .row { display: flex; align-items: center; gap: 6px; }
+  .legend .swatch { width: 14px; height: 14px; border-radius: 3px; }
+
+  .conclusion {
+    margin-top: 6px;
+    padding: 14px 22px;
+    background: #fef3f8;
+    border-left: 4px solid var(--hl);
+    border-radius: 4px;
+    font-size: 1rem;
+    text-align: center;
+    max-width: 760px;
+  }
+  .conclusion strong { color: var(--hl); }
+  .conclusion code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
+</style>
+</head>
+<body>
+  <h1>Warum 8 Bit? Speicher-Adressierung</h1>
+  <div class="sub">CPU adressiert <strong>byteweise</strong> — halbe Byte existieren nicht.</div>
+
+  <div class="stage">
+
+    <div class="ram-wrap">
+
+      <div class="ram">
+        <div class="head">Adresse</div>
+        <div class="head">Hex</div>
+        <div class="head">Bit (was im Speicher steht)</div>
+
+        <div class="cell addr">0x0000</div>
+        <div class="cell">48</div>
+        <div class="cell bin">01001000</div>
+
+        <div class="cell addr">0x0001</div>
+        <div class="cell">65</div>
+        <div class="cell bin">01100101</div>
+
+        <div class="cell addr">0x0002</div>
+        <div class="cell">6C</div>
+        <div class="cell bin">01101100</div>
+
+        <div class="cell addr">0x0003</div>
+        <div class="cell">6C</div>
+        <div class="cell bin">01101100</div>
+
+        <div class="cell addr">0x0004</div>
+        <div class="cell">6F</div>
+        <div class="cell bin">01101111</div>
+
+        <div class="cell addr">0x0005</div>
+        <div class="cell">21</div>
+        <div class="cell bin">00100001</div>
+      </div>
+
+      <div class="pointer-side">
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0000 ✓</span></div>
+        <div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0000.5 — gibt's nicht</span></div>
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0001 ✓</span></div>
+        <div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0001.5 — gibt's nicht</span></div>
+        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0002 ✓</span></div>
+        <div class="ptr-block ok" style="opacity:0.4"><span class="ico">→</span><span>...</span></div>
+      </div>
+
+    </div>
+
+    <div class="conclusion">
+      <strong>Byte = kleinste adressierbare Einheit.</strong><br>
+      Speichercontroller, Bus und CPU sind alle auf 8-Bit-Häppchen ausgelegt.<br>
+      Einzelne Bit lesen → muss erst <code>byte = mem[addr]</code>, dann mit <code>byte &amp; 0b1000_0000</code> Bit isolieren.
+    </div>
+
+  </div>
+</body>
+</html>
Author	SHA1	Message	Date
libretech	5c419c9ed1	gendering: fehlende person-substantive in beiden kursen - Nutzer/User -> Nutzende - Endnutzer -> Endnutzende - Teilnehmer -> Teilnehmende - Programmierer/Entwickler -> Programmierende/Entwickelnde - Web-Entwickler -> Web-Entwickelnde - Tastatur-Nutzer -> Tastatur-Nutzende - Benutzer -> Nutzende - Konsumenten -> KonsumentInnen - Künstler -> KünstlerInnen - Autor -> AutorIn - Fotografen -> FotografInnen - Kunde -> KundIn ausgenommen: code-identifiers (User, type User, /users/), Sender/Empfänger (network protocol), Sawyer (konkrete person), Hersteller/Betreiber (organisations-rolle).	2026-04-27 17:27:19 +02:00
libretech	a955a7636a	selbstlernen hex links: absolute urls fuer PDF-klick PDF rendert relative pfade als nicht-klickbar. absolute https-urls zu librete.ch/hdm/223015b/materials/hex1-5 funktionieren beide in HTML- und PDF-export.	2026-04-27 16:29:09 +02:00
libretech	c978842812	c01 Web-Zugänglichkeit Vertiefung: keine klausur, kein bg - _class: 'erklaerung klausur' -> _class: erklaerung - _backgroundColor: #fce4ec entfernt ist nur eine vertiefung, keine klausur-folie.	2026-04-27 16:10:01 +02:00
libretech	61468d2d3a	erklaerung: bg entfernen — soll vertiefung sein, nicht klausur bug: 'section.erklaerung' hatte '@media print { background }' rule (alle 5 files), was im PDF rosa/blau-klausur-bg setzte. HTML hatte (in c) keinen bg oder (in b) gradient bg. ergebnis: HTML zeigt erklaerung anders als PDF — PDF sah aus wie klausurfolie obwohl es nur eine vertiefung ist. fix: erklaerung behaelt nur 'font-size: 1.1rem' + h1 color/size + table font-size. KEIN background mehr — weder screen noch print. visuell unterschieden durch h1-color und font-size, nicht durch bg-farbe. betroffen: b01, b02, b03, c01, c02 (alle files mit section.erklaerung).	2026-04-27 15:04:45 +02:00
libretech	a3c3e259b4	b01: kaputte html-comments fixen (_class directive nicht im comment-prefix) L603/L850: '<!-- _class: erklaerung' ohne '-->' und ' _class:' ohne '<!--' in proper '<!--\n_class:\n-->' form gebracht. inhalt bleibt versteckt wie vorher beabsichtigt, syntax aber jetzt sauber.	2026-04-27 01:26:31 +02:00
libretech	ac39f2b746	klausurfragen pdf fix: pre blocks waren schwarz auf schwarz bug: 'pre code { color: inherit }' fiel auf section --color-foreground (#1a1a2e) zurueck weil 'pre' selbst keine 'color' hatte. multi-line code-bloecke unsichtbar (nur hljs-syntax-spans hatten farbe, rest = dark on dark). fix: 'pre { color: #f8f8f8 }' setzen + inline 'code' und hljs/non-hljs selectoren analog zu chapter-styles ergaenzt. verified: c klausurfragen page 60 (G2 mobile-first CSS pre-block) jetzt voll lesbar.	2026-04-27 00:53:48 +02:00
libretech	19ca5ad3e0	223015b selbstlernen hex files: 5 statt 3 dateien, link wtf->hex, pfad ./materials - referenzen wtf1/2/3 -> hex1/2/3 (dateinamen tatsächlich) - hex4 (DOCX) und hex5 (ZIP) ergänzt — alle 5 vorhandenen materialien sichtbar - pfad ../materials -> ./materials (build/223015b/materials struktur)	2026-04-26 22:05:48 +02:00
libretech	aea96edd09	bit/byte/hex folien sync beide kurse + neue viz embeds 223015c (internettechnik): - byte-aufbau ausgebaut (build-up tabelle 0..127..255 wie b) - neue slides: why-8-bit, byte-flow, three-views nach byte-nibble-hex/hex-dec-table 223015b (dateiformate): - byte-nibble-hex slide eingebaut - neue slides: why-8-bit (vor hex-lead), hex-dec-table, byte-flow, three-views - wo-begegnet-hex tabelle (CSS, MAC, fehlercodes, speicher, unicode) - bit-vs-byte verwirrung (Mbit/s vs MB/s) konvention: 'Byte' und 'Bit' invariant, kein plural-s	2026-04-26 22:05:32 +02:00
libretech	a000cdbc8d	223015b: neuauflage ascii-tabelle + sync byte-nibble-hex/hex-dec-table aus c - ascii-table.html: 16x8 grid, kategorie-gefärbt (ctrl/digit/upper/lower/punct/del) hex+dezimal pro zelle, legende, beispiel-zeile - byte-nibble-hex + hex-dec-table aus 223015c kopiert für slide-parität	2026-04-26 22:04:36 +02:00
libretech	1d29a9f03c	neue viz: three-views, why-8-bit, byte-flow (beide kurse) - three-views.html: bitstream/hex/bedeutung — gleiche bytes drei perspektiven (PNG-header) - why-8-bit.html: speicher-adressierung byteweise, halbe byte unmöglich - byte-flow.html: 1 byte = 8 bit = 2 hex = 1 ASCII (Hello, World!) jeder rahmen ein byte - screenshots in beide assets/demos ordner	2026-04-26 22:04:28 +02:00
libretech	24d7e5f660	byte-nibble-hex visualisierung: html-demo + slide #50 neue stufen-visualisierung (byte → 2 nibbles → 2 hex-ziffern → 4D/77/M) ersetzt ascii-platzhalter durch sauberes html/css-demo + bg-fit png	2026-04-24 09:44:59 +02:00
libretech	a941b81d37	add codecrispies links to html examples	2026-04-24 09:19:26 +02:00
libretech	7bbfa74f1b	geschichte-folien: kathleen booth titel, fortran raus, von-neumann ausgebaut - assembler-folie als kathleen booth (1922-2022) mit motorola-6800-asm bild - fortran-folie entfernt - von-neumann 5 komponenten: heute-spalte, kernprinzip, bus-details - palantir/signal-bild-folie raus - "bauen, einsetzen und regulieren" - "bit & byte" statt "bits & bytes", 2⁸ ausgeschrieben - perceivable-folie: texte/nicht-text umstrukturiert	2026-04-24 01:01:27 +02:00
libretech	7d0173f40e	223015b: inline code syntax highlighting style parity	2026-04-22 13:18:23 +02:00
libretech	2680a745cf	inline code syntax highlighting: marpit custom engine + css	2026-04-22 13:15:19 +02:00
libretech	79aaa14c29	a11y feinschliff, hex-dec-table neu, operable-folie verbessert, anatomie klausur	2026-04-22 11:54:51 +02:00
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