223015b phase 3a: 5 advance organizers gebaut (eröffnungs-folie pro kapitel) — kap01 welt→datei→mensch mit signal-rein/bedeutung-raus split, kap02 lossless vs lossy mit konvergenz zu wann-was, kap03 drei modalitäten (bild/audio/video) unter wahrnehmungs-lücken mit patent-politik-fußnote, kap04 wohnen-vs-reisen (speicher/schnittstellen) mit anwendungs-wahl, kap05 weg-vs-gepäck (distribution/metadaten) mit 'aufmerksamkeit für das was wir nicht sehen' als roter faden. stil-vorlage three-views.html + byte-fuer-byte.html (light-bg, colored-poles, pink-konvergenz, mono-code-blöcke). pro html: chromium-headless render 1280x680-800px, png visuell inspiziert

slides/223015b/assets/demos/kap05-bogen.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Kapitel 5 — Roter Faden</title>
+<style>
+  :root {
+    --dark: #1a1a2e;
+    --muted: #6b7280;
+    --soft: #f8fafc;
+    --border: #cbd5e1;
+    --hl: #d63384;
+    --hl-soft: #fce7f3;
+    --weg: #059669;
+    --weg-soft: #d1fae5;
+    --gepaeck: #be185d;
+    --gepaeck-soft: #fce7f3;
+  }
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
+  body { padding: 36px 44px; }
+  h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
+  .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 1.05rem; }
+
+  .top {
+    text-align: center;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--hl);
+    margin-bottom: 6px;
+  }
+  .top-arrows { display: flex; justify-content: center; gap: 360px; margin-bottom: 14px; }
+  .top-arrows svg { width: 28px; height: 22px; }
+
+  .branches {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 28px;
+    max-width: 1180px;
+    margin: 0 auto;
+  }
+
+  .branch {
+    border: 2px solid;
+    border-radius: 14px;
+    padding: 22px 22px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .branch.weg { border-color: var(--weg); background: var(--weg-soft); }
+  .branch.gepaeck { border-color: var(--gepaeck); background: var(--gepaeck-soft); }
+
+  .branch-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
+  .branch-question { font-size: 1.5rem; font-weight: 700; }
+  .branch.weg .branch-question { color: var(--weg); }
+  .branch.gepaeck .branch-question { color: var(--gepaeck); }
+  .branch-name { font-size: 1.05rem; color: var(--dark); }
+
+  .branch-block {
+    background: #fff;
+    border: 1px solid currentColor;
+    border-radius: 8px;
+    padding: 10px 12px;
+    margin-top: 4px;
+  }
+  .branch-block .label {
+    font-size: 0.72rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--muted);
+    margin-bottom: 4px;
+  }
+  .branch-block .body {
+    font-family: ui-monospace, "SF Mono", Menlo, monospace;
+    font-size: 0.92rem;
+    color: var(--dark);
+  }
+
+  .conv-arrows { display: flex; justify-content: center; gap: 360px; margin: 18px 0 6px; }
+  .conv-arrows svg { width: 28px; height: 22px; }
+
+  .bottom {
+    max-width: 1180px;
+    margin: 0 auto;
+    border: 2px solid var(--hl);
+    background: var(--hl-soft);
+    border-radius: 14px;
+    padding: 18px 22px;
+    text-align: center;
+  }
+  .bottom-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
+  .bottom-text { font-size: 1.3rem; font-weight: 700; color: var(--hl); margin-top: 4px; }
+  .bottom-sub { font-size: 0.92rem; color: var(--muted); margin-top: 4px; }
+</style>
+</head>
+<body>
+  <h1>Eine Datei reist — und erzählt</h1>
+  <div class="sub">Was passiert auf dem Weg zur Endnutzerin, und was verrät die Datei dabei über sich?</div>
+
+  <div class="top">Datei in Bewegung</div>
+  <div class="top-arrows">
+    <svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
+    <svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
+  </div>
+
+  <div class="branches">
+    <div class="branch weg">
+      <div class="branch-tag">Frage A</div>
+      <div class="branch-question">Weg</div>
+      <div class="branch-name">Wie kommt der Inhalt zur Nutzerin?</div>
+      <div class="branch-block">
+        <div class="label">Verteilung</div>
+        <div class="body">CDN · PoP · Edge-Caching</div>
+      </div>
+      <div class="branch-block">
+        <div class="label">Schnittstelle</div>
+        <div class="body">REST-API · GET/POST/PUT/DELETE</div>
+      </div>
+      <div class="branch-block">
+        <div class="label">Format</div>
+        <div class="body">JSON</div>
+      </div>
+    </div>
+
+    <div class="branch gepaeck">
+      <div class="branch-tag">Frage B</div>
+      <div class="branch-question">Gepäck</div>
+      <div class="branch-name">Was trägt die Datei mit sich?</div>
+      <div class="branch-block">
+        <div class="label">Metadaten</div>
+        <div class="body">EXIF · ID3 · PDF-Properties</div>
+      </div>
+      <div class="branch-block">
+        <div class="label">Risiko</div>
+        <div class="body">Privacy-Leak (McAfee · Blair)</div>
+      </div>
+      <div class="branch-block">
+        <div class="label">Lockin</div>
+        <div class="body">Adobe PSD · Apple .pages</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="conv-arrows">
+    <svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
+    <svg viewBox="0 0 28 22"><polygon points="4,2 24,2 14,20" fill="#d63384"/></svg>
+  </div>
+
+  <div class="bottom">
+    <div class="bottom-label">Roter Faden</div>
+    <div class="bottom-text">Aufmerksamkeit für das, was wir nicht sehen</div>
+    <div class="bottom-sub">Latenz · Caching · Header · Metadaten · Lockin</div>
+  </div>
+</body>
+</html>