diff --git a/slides/223015b/assets/demos/jpeg-pipeline.html b/slides/223015b/assets/demos/jpeg-pipeline.html
new file mode 100644
index 0000000..404fe72
--- /dev/null
+++ b/slides/223015b/assets/demos/jpeg-pipeline.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --lossless-step: #2563eb;
+    --lossy-step: #ea580c;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 28px 40px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.75rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
+  .sub strong { color: var(--dark); }
+
+  .pipeline {
+    display: grid;
+    grid-template-columns: 110px repeat(6, 1fr) 110px;
+    gap: 4px;
+    max-width: 1200px;
+    margin: 0 auto;
+    align-items: stretch;
+  }
+
+  .endpoint {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    text-align: center;
+  }
+  .endpoint-art { width: 88px; height: 60px; display: block; }
+  .endpoint-label {
+    font-size: 0.92rem;
+    font-weight: 700;
+    color: var(--dark);
+  }
+  .endpoint-size {
+    font-family: ui-monospace, monospace;
+    font-size: 0.82rem;
+    color: var(--muted);
+  }
+
+  .step {
+    border: 2px solid;
+    border-radius: 8px;
+    padding: 8px 6px;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    text-align: center;
+  }
+  .step.lossless { border-color: var(--lossless-step); }
+  .step.lossy    { border-color: var(--lossy-step); }
+  .step-num {
+    font-family: ui-monospace, monospace;
+    font-size: 0.72rem;
+    font-weight: 700;
+    color: var(--muted);
+  }
+  .step-name {
+    font-size: 0.78rem;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+  .step.lossless .step-name { color: var(--lossless-step); }
+  .step.lossy    .step-name { color: var(--lossy-step); }
+  .step-desc {
+    font-size: 0.66rem;
+    color: var(--muted);
+    line-height: 1.3;
+  }
+
+  .arrow {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted);
+    font-family: ui-monospace, monospace;
+    font-size: 1rem;
+  }
+
+  .legend {
+    margin-top: 16px;
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    font-size: 0.84rem;
+    color: var(--dark);
+  }
+  .legend-item { display: flex; align-items: center; gap: 6px; }
+  .legend-swatch {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    display: inline-block;
+  }
+  .legend-swatch.lossless { background: var(--lossless-step); }
+  .legend-swatch.lossy    { background: var(--lossy-step); }
+
+  .verdict {
+    margin-top: 22px;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+    border: 2px solid var(--hl);
+    border-radius: 12px;
+    padding: 14px 22px;
+  }
+  .verdict-q { font-size: 1.1rem; font-weight: 700; color: var(--hl); }
+  .verdict-a { font-size: 0.93rem; color: var(--dark); margin-top: 4px; }
+  .verdict-a strong { color: var(--hl); }
+</style>
+</head>
+<body>
+  <h1>JPEG-Pipeline — 6 Schritte vom Foto zur Datei</h1>
+  <div class="sub">Nur <strong>einer</strong> dieser Schritte verliert Information. Die anderen fünf sind verlustfrei.</div>
+
+  <div class="pipeline">
+
+    <div class="endpoint">
+      <svg class="endpoint-art" viewBox="0 0 88 60">
+        <defs>
+          <linearGradient id="photo-grad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#fde68a"/>
+            <stop offset="55%" stop-color="#fb923c"/>
+            <stop offset="100%" stop-color="#7c3aed"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
+        <circle cx="66" cy="22" r="9" fill="#fef3c7"/>
+        <path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
+      </svg>
+      <div class="endpoint-label">Foto (Roh)</div>
+      <div class="endpoint-size">~36 MB</div>
+    </div>
+
+    <div class="step lossless">
+      <div class="step-num">1</div>
+      <div class="step-name">Farbraum</div>
+      <div class="step-desc">RGB → Y'CbCr<br>Helligkeit von Farbe trennen</div>
+    </div>
+
+    <div class="step lossy">
+      <div class="step-num">2</div>
+      <div class="step-name">Chroma-Subsampling</div>
+      <div class="step-desc">Cb &amp; Cr auf <strong>¼</strong><br>Auge sieht Farbe grob</div>
+    </div>
+
+    <div class="step lossless">
+      <div class="step-num">3</div>
+      <div class="step-name">8×8 Blöcke</div>
+      <div class="step-desc">Bild in Kacheln<br>jeder Block einzeln</div>
+    </div>
+
+    <div class="step lossless">
+      <div class="step-num">4</div>
+      <div class="step-name">DCT</div>
+      <div class="step-desc">Frequenz-Zerlegung<br>häufige Muster</div>
+    </div>
+
+    <div class="step lossy">
+      <div class="step-num">5</div>
+      <div class="step-name">Quantisierung</div>
+      <div class="step-desc"><strong>Hier</strong> wird weggeworfen<br>hohe Frequenzen raus</div>
+    </div>
+
+    <div class="step lossless">
+      <div class="step-num">6</div>
+      <div class="step-name">Huffman</div>
+      <div class="step-desc">Verlustfrei kürzen<br>häufig → kurz</div>
+    </div>
+
+    <div class="endpoint">
+      <svg class="endpoint-art" viewBox="0 0 88 60">
+        <rect x="0" y="0" width="88" height="60" rx="3" fill="url(#photo-grad)"/>
+        <circle cx="66" cy="22" r="9" fill="#fef3c7"/>
+        <path d="M0,42 L18,34 L40,40 L60,30 L80,38 L88,33 L88,60 L0,60 Z" fill="#1e1b4b"/>
+      </svg>
+      <div class="endpoint-label">JPEG</div>
+      <div class="endpoint-size">~3,5 MB</div>
+    </div>
+
+  </div>
+
+  <div class="legend">
+    <span class="legend-item"><span class="legend-swatch lossless"></span>verlustfrei (umkehrbar)</span>
+    <span class="legend-item"><span class="legend-swatch lossy"></span>verlustbehaftet (Information weg)</span>
+  </div>
+
+  <div class="verdict">
+    <div class="verdict-q">Der <strong>Quanten-Schritt</strong> ist das ganze Geheimnis von JPEG.</div>
+    <div class="verdict-a">Schritte 1, 3, 4, 6 verlieren nichts. Schritt 2 wirft Farb-Detail weg (Auge merkt nicht). Schritt 5 entscheidet — je nach Qualitäts-Stufe — wie viel <strong>Frequenz-Detail</strong> verloren geht. Niedrige Quality = aggressivere Schritt-5-Quantisierung.</div>
+  </div>
+</body>
+</html>
diff --git a/slides/223015b/assets/demos/jpeg-pipeline.png b/slides/223015b/assets/demos/jpeg-pipeline.png
new file mode 100644
index 0000000..4795fad
Binary files /dev/null and b/slides/223015b/assets/demos/jpeg-pipeline.png differ