diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md
index b490b19..74f0ff7 100644
--- a/slides/223015c/01-geschichte-grundlagen-html.md
+++ b/slides/223015c/01-geschichte-grundlagen-html.md
@@ -948,13 +948,15 @@ Farbbild: Rot + Grün + Blau
 
 ---
 
-2⁸
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
-2⁴  2⁴
+![bg fit](./assets/demos/byte-nibble-hex.png)
 
-16  16
+<!--
+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.
+-->
 
-0-F 0-F
 <!--
 # Zahlensysteme
 
diff --git a/slides/223015c/assets/demos/byte-nibble-hex.html b/slides/223015c/assets/demos/byte-nibble-hex.html
new file mode 100644
index 0000000..c7e6b58
--- /dev/null
+++ b/slides/223015c/assets/demos/byte-nibble-hex.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Byte → Nibble → Hex</title>
+<style>
+  :root {
+    --hl: #d63384;
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --border: #cbd5e1;
+    --bg-soft: #f8fafc;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 32px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
+
+  .stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
+
+  .level { display: flex; flex-direction: column; align-items: center; }
+  .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
+
+  /* Level 1: whole byte */
+  .byte {
+    display: flex;
+    gap: 4px;
+    padding: 8px 14px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--bg-soft);
+  }
+  .byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
+  .byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
+
+  /* Split arrows */
+  .split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
+  .split .arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+  }
+
+  /* Level 2: two nibbles */
+  .nibbles { display: flex; gap: 80px; }
+  .nibble {
+    display: flex; flex-direction: column; align-items: center; gap: 6px;
+    padding: 10px 14px;
+    border: 2px solid var(--hl);
+    border-radius: 8px;
+    background: #fff;
+  }
+  .nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
+  .nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
+  .nibble .meta { font-size: 0.78rem; color: var(--muted); }
+
+  .single-arrow {
+    width: 0; height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    border-top: 12px solid var(--hl);
+    margin: 2px 0;
+  }
+
+  /* Level 3: hex digits */
+  .hex-digits { display: flex; gap: 80px; }
+  .hex-digit {
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    padding: 8px 22px;
+    border: 2px solid var(--dark);
+    border-radius: 8px;
+    background: var(--dark);
+    color: var(--hl);
+  }
+  .hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
+  .hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
+
+  /* Merge down to byte */
+  .merge {
+    display: flex; justify-content: center; margin-top: 2px;
+  }
+  .merge-v {
+    display: grid;
+    grid-template-columns: 60px 60px;
+    justify-content: center;
+    align-items: center;
+  }
+  .merge-v .line {
+    height: 20px;
+    border-right: 2px solid var(--hl);
+  }
+  .merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
+  .bottom-bar { height: 2px; background: var(--hl); width: 120px; }
+
+  /* Final result */
+  .result {
+    margin-top: 14px;
+    padding: 14px 22px;
+    background: #fef3f8;
+    border-left: 4px solid var(--hl);
+    border-radius: 4px;
+    font-size: 1.05rem;
+    text-align: center;
+    max-width: 640px;
+  }
+  .result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
+  .result strong { color: var(--hl); }
+
+  .math {
+    margin-top: 10px;
+    font-size: 0.95rem;
+    color: var(--dark);
+    text-align: center;
+  }
+  .math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
+  <div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
+
+  <div class="stage">
+    <!-- Level 1 -->
+    <div class="level">
+      <div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
+      <div class="byte">
+        <span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
+        <span class="sep"></span>
+        <span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 2 -->
+    <div class="level">
+      <div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
+      <div class="nibbles">
+        <div class="nibble">
+          <div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
+          <div class="meta">= 4 (dez)</div>
+        </div>
+        <div class="nibble">
+          <div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
+          <div class="meta">= 13 (dez)</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="split">
+      <div class="arrow"></div>
+      <div class="arrow"></div>
+    </div>
+
+    <!-- Level 3 -->
+    <div class="level">
+      <div class="label">2 Hex-Ziffern · Symbole 0–F</div>
+      <div class="hex-digits">
+        <div class="hex-digit">
+          <div class="digit">4</div>
+          <div class="meta">Nibble → 1 Ziffer</div>
+        </div>
+        <div class="hex-digit">
+          <div class="digit">D</div>
+          <div class="meta">13 → D</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="result">
+      <code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
+    </div>
+
+    <div class="math">
+      <span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
+    </div>
+  </div>
+</body>
+</html>
+</content>
+</invoke>
\ No newline at end of file
diff --git a/slides/223015c/assets/demos/byte-nibble-hex.png b/slides/223015c/assets/demos/byte-nibble-hex.png
new file mode 100644
index 0000000..7d02f1f
Binary files /dev/null and b/slides/223015c/assets/demos/byte-nibble-hex.png differ
