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

This commit is contained in:
2026-05-14 03:02:43 +02:00
parent bf2ca0bb87
commit ff21ce9d47
10 changed files with 771 additions and 0 deletions
@@ -0,0 +1,135 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kapitel 1 — Roter Faden</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--hl-soft: #fce7f3;
--in: #1e5f8a;
--in-soft: #e0f2fe;
--out: #16a34a;
--out-soft: #dcfce7;
--bin-bg: #0f0f23;
}
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: 30px; font-size: 1.05rem; }
.stage {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 22px;
align-items: stretch;
max-width: 1180px;
margin: 0 auto;
}
.pole {
border: 2px solid var(--border);
border-radius: 14px;
padding: 24px 22px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
background: var(--soft);
}
.pole.in { border-color: var(--in); background: var(--in-soft); }
.pole.center { border-color: var(--hl); background: var(--hl-soft); }
.pole.out { border-color: var(--out); background: var(--out-soft); }
.pole-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.pole-name { font-size: 1.35rem; font-weight: 700; color: var(--dark); }
.pole-icon { font-size: 2.4rem; }
.pole-detail { font-size: 0.88rem; color: var(--muted); text-align: center; line-height: 1.4; }
.arrows { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1180px; margin: 18px auto 0; }
.arrow-box {
border: 1px dashed var(--border);
border-radius: 10px;
padding: 16px 18px;
background: #fff;
display: flex;
flex-direction: column;
gap: 6px;
}
.arrow-label { font-size: 0.85rem; font-weight: 700; color: var(--hl); text-transform: uppercase; letter-spacing: 0.08em; }
.arrow-bullets { font-size: 0.95rem; color: var(--dark); margin: 0; padding-left: 18px; line-height: 1.5; }
.arrow-bullets li { margin: 2px 0; }
.byte-strip {
margin-top: 28px;
background: var(--bin-bg);
color: #e5e7eb;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
padding: 14px 20px;
border-radius: 8px;
text-align: center;
font-size: 1rem;
letter-spacing: 0.06em;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.byte-strip small { display: block; color: #9ca3af; font-family: system-ui; letter-spacing: 0; font-size: 0.78rem; margin-top: 6px; text-transform: uppercase; }
</style>
</head>
<body>
<h1>Was steckt in einer Datei — und wie kommt es da rein?</h1>
<div class="sub">Dieses Kapitel überbrückt zwei Richtungen, beide treffen sich am Byte.</div>
<div class="stage">
<div class="pole in">
<div class="pole-tag">Pol A</div>
<div class="pole-icon">🎙️</div>
<div class="pole-name">Welt</div>
<div class="pole-detail">analoge Signale<br>Druckwelle · Licht · Spannung</div>
</div>
<div class="pole center">
<div class="pole-tag">Treffpunkt</div>
<div class="pole-icon">📄</div>
<div class="pole-name">Datei</div>
<div class="pole-detail">Byte-Strom<br>Zahlen von 0 bis 255</div>
</div>
<div class="pole out">
<div class="pole-tag">Pol B</div>
<div class="pole-icon">👁️</div>
<div class="pole-name">Mensch</div>
<div class="pole-detail">Bedeutung<br>Text · Bild · Klang</div>
</div>
</div>
<div class="arrows">
<div class="arrow-box">
<div class="arrow-label">Welt → Datei: rein</div>
<ul class="arrow-bullets">
<li>Sampling (wie oft messen)</li>
<li>Quantisierung (wie genau)</li>
<li>Nyquist · Aliasing</li>
</ul>
</div>
<div class="arrow-box">
<div class="arrow-label">Datei → Mensch: raus</div>
<ul class="arrow-bullets">
<li>Notation (Bin · Dez · Hex)</li>
<li>Encoding (ASCII · UTF-8)</li>
<li>Format-Erkennung (Magic Numbers)</li>
</ul>
</div>
</div>
<div class="byte-strip">
01001000&nbsp;01100101&nbsp;01101100&nbsp;01101100&nbsp;01101111&nbsp;…
<small>der gemeinsame Treffpunkt</small>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kapitel 2 — Roter Faden</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--hl-soft: #fce7f3;
--lossless: #16a34a;
--lossless-soft: #dcfce7;
--lossy: #ef4444;
--lossy-soft: #fee2e2;
}
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: 30px; font-size: 1.05rem; }
.top {
text-align: center;
font-size: 1.4rem;
font-weight: 700;
color: var(--hl);
margin-bottom: 6px;
}
.top-arrow { display: flex; justify-content: center; margin-bottom: 14px; }
.top-arrow svg { width: 36px; height: 28px; }
.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.lossless { border-color: var(--lossless); background: var(--lossless-soft); }
.branch.lossy { border-color: var(--lossy); background: var(--lossy-soft); }
.branch-tag { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.branch-name { font-size: 1.4rem; font-weight: 700; }
.branch.lossless .branch-name { color: var(--lossless); }
.branch.lossy .branch-name { color: var(--lossy); }
.branch-principle { font-size: 1rem; color: var(--dark); }
.branch-principle strong { color: var(--dark); }
.branch-reverse { font-size: 0.92rem; color: var(--muted); font-style: italic; }
.branch-tech, .branch-where {
background: #fff;
border: 1px solid currentColor;
border-radius: 8px;
padding: 10px 12px;
margin-top: 6px;
}
.branch-tech .label, .branch-where .label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 4px;
}
.branch-tech .body, .branch-where .body {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.95rem;
color: var(--dark);
}
.bottom {
margin-top: 28px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
}
.conv-arrows { display: flex; justify-content: center; gap: 360px; margin-bottom: 8px; }
.conv-arrows svg { width: 28px; height: 20px; }
.bottom-box {
border: 2px solid var(--hl);
background: var(--hl-soft);
border-radius: 14px;
padding: 18px 22px;
text-align: center;
}
.bottom-q { font-size: 1.3rem; font-weight: 700; color: var(--hl); }
.bottom-d { font-size: 0.95rem; color: var(--muted); margin-top: 4px; }
</style>
</head>
<body>
<h1>Daten sind unhandlich — also was tun?</h1>
<div class="sub">Zwei fundamental verschiedene Wege. Die Wahl hängt vom Inhalt ab.</div>
<div class="top">Kompression</div>
<div class="top-arrow">
<svg viewBox="0 0 36 28"><polygon points="6,4 30,4 18,24" fill="#d63384"/></svg>
</div>
<div class="branches">
<div class="branch lossless">
<div class="branch-tag">Weg A</div>
<div class="branch-name">Verlustfrei (Lossless)</div>
<div class="branch-principle"><strong>Redundanz raus.</strong></div>
<div class="branch-reverse">→ vollständig umkehrbar</div>
<div class="branch-tech">
<div class="label">Techniken</div>
<div class="body">RLE · Huffman · LZ77</div>
</div>
<div class="branch-where">
<div class="label">Wo</div>
<div class="body">ZIP · PNG · FLAC · RAW</div>
</div>
</div>
<div class="branch lossy">
<div class="branch-tag">Weg B</div>
<div class="branch-name">Verlustbehaftet (Lossy)</div>
<div class="branch-principle"><strong>Irrelevanz raus.</strong></div>
<div class="branch-reverse">→ nicht umkehrbar</div>
<div class="branch-tech">
<div class="label">Grundlage</div>
<div class="body">Psychoakustik · Psychovisualität</div>
</div>
<div class="branch-where">
<div class="label">Wo</div>
<div class="body">MP3 · JPEG · H.264 · WebP</div>
</div>
</div>
</div>
<div class="bottom">
<div class="conv-arrows">
<svg viewBox="0 0 28 20"><polygon points="4,2 24,2 14,18" fill="#d63384"/></svg>
<svg viewBox="0 0 28 20"><polygon points="4,2 24,2 14,18" fill="#d63384"/></svg>
</div>
<div class="bottom-box">
<div class="bottom-q">Wann was?</div>
<div class="bottom-d">Entscheidungsmatrix — Foto · Stream · Code · Backup</div>
</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kapitel 3 — Roter Faden</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--hl-soft: #fce7f3;
--bild: #2563eb;
--bild-soft: #dbeafe;
--audio: #ea580c;
--audio-soft: #ffedd5;
--video: #7c3aed;
--video-soft: #ede9fe;
}
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
body { padding: 32px 44px; }
h1 { text-align: center; margin: 0 0 6px; font-size: 1.85rem; }
.sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 1.02rem; }
.top {
text-align: center;
padding: 12px 20px;
background: var(--hl-soft);
border: 2px solid var(--hl);
border-radius: 10px;
margin: 0 auto 12px;
max-width: 600px;
}
.top-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.top-text { font-size: 1.1rem; font-weight: 700; color: var(--hl); margin-top: 2px; }
.top-arrows { display: flex; justify-content: center; gap: 280px; margin: 4px 0 14px; }
.top-arrows svg { width: 24px; height: 18px; }
.modalities {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 22px;
max-width: 1180px;
margin: 0 auto;
}
.modality {
border: 2px solid;
border-radius: 14px;
padding: 20px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.modality.bild { border-color: var(--bild); background: var(--bild-soft); }
.modality.audio { border-color: var(--audio); background: var(--audio-soft); }
.modality.video { border-color: var(--video); background: var(--video-soft); }
.modality-icon { font-size: 2.2rem; }
.modality-name { font-size: 1.35rem; font-weight: 700; }
.modality.bild .modality-name { color: var(--bild); }
.modality.audio .modality-name { color: var(--audio); }
.modality.video .modality-name { color: var(--video); }
.modality-block {
background: #fff;
border: 1px solid currentColor;
border-radius: 8px;
padding: 9px 12px;
width: 100%;
box-sizing: border-box;
}
.modality-block .label {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 3px;
}
.modality-block .body {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.86rem;
color: var(--dark);
line-height: 1.4;
}
.conv-arrows { display: flex; justify-content: center; gap: 240px; margin: 16px 0 6px; }
.conv-arrows svg { width: 24px; height: 18px; }
.bottom {
max-width: 1180px;
margin: 0 auto;
border: 2px solid var(--hl);
background: var(--hl-soft);
border-radius: 14px;
padding: 16px 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.15rem; 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>Drei Modalitäten, ein Prinzip</h1>
<div class="sub">Bild · Audio · Video — alle drei nutzen Lossy. Möglich nur, weil Wahrnehmung Lücken hat.</div>
<div class="top">
<div class="top-label">Gemeinsamer Hebel (aus Kap 2)</div>
<div class="top-text">Wahrnehmungs-Lücken</div>
</div>
<div class="top-arrows">
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
</div>
<div class="modalities">
<div class="modality bild">
<div class="modality-icon">🖼️</div>
<div class="modality-name">Bild</div>
<div class="modality-block">
<div class="label">Pipeline</div>
<div class="body">RGB → YCbCr → DCT → Huffman</div>
</div>
<div class="modality-block">
<div class="label">Format-Wahl</div>
<div class="body">PNG · JPEG · WebP · AVIF · SVG</div>
</div>
</div>
<div class="modality audio">
<div class="modality-icon">🎵</div>
<div class="modality-name">Audio</div>
<div class="modality-block">
<div class="label">Trick</div>
<div class="body">Maskierung · Hörschwelle</div>
</div>
<div class="modality-block">
<div class="label">Format-Wahl</div>
<div class="body">MP3 · AAC · FLAC · Opus</div>
</div>
</div>
<div class="modality video">
<div class="modality-icon">🎬</div>
<div class="modality-name">Video</div>
<div class="modality-block">
<div class="label">Trennung</div>
<div class="body">Container ≠ Codec</div>
</div>
<div class="modality-block">
<div class="label">Codec-Welt</div>
<div class="body">H.264 · H.265 · VP9 · AV1</div>
</div>
</div>
</div>
<div class="conv-arrows">
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
<svg viewBox="0 0 24 18"><polygon points="2,2 22,2 12,16" fill="#d63384"/></svg>
</div>
<div class="bottom">
<div class="bottom-label">Was alle drei Pipelines am Ende prägt</div>
<div class="bottom-text">Patent-Politik · Industrie-Adoption</div>
<div class="bottom-sub">JPEG XL · WebP · AV1 — Technik allein entscheidet selten</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

@@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kapitel 4 — Roter Faden</title>
<style>
:root {
--dark: #1a1a2e;
--muted: #6b7280;
--soft: #f8fafc;
--border: #cbd5e1;
--hl: #d63384;
--hl-soft: #fce7f3;
--wohnen: #0891b2;
--wohnen-soft: #cffafe;
--reisen: #f59e0b;
--reisen-soft: #fef3c7;
}
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.3rem;
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.wohnen { border-color: var(--wohnen); background: var(--wohnen-soft); }
.branch.reisen { border-color: var(--reisen); background: var(--reisen-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.6rem; font-weight: 700; }
.branch.wohnen .branch-question { color: var(--wohnen); }
.branch.reisen .branch-question { color: var(--reisen); }
.branch-name { font-size: 1.1rem; 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.94rem;
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>Wo wohnen die Bytes — und wie reisen sie?</h1>
<div class="sub">Speicher und Schnittstellen — zwei Seiten desselben Alltagsproblems.</div>
<div class="top">Bytes wohnen + reisen</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 wohnen">
<div class="branch-tag">Frage A</div>
<div class="branch-question">Wo?</div>
<div class="branch-name">Speichermedien</div>
<div class="branch-block">
<div class="label">Medien</div>
<div class="body">HDD · SSD · Flash</div>
</div>
<div class="branch-block">
<div class="label">Organisation</div>
<div class="body">Filesystems (FAT32 · NTFS · APFS · ext4)</div>
</div>
<div class="branch-block">
<div class="label">Sicherung</div>
<div class="body">Backup nach 3-2-1-Regel</div>
</div>
</div>
<div class="branch reisen">
<div class="branch-tag">Frage B</div>
<div class="branch-question">Wie?</div>
<div class="branch-name">Schnittstellen</div>
<div class="branch-block">
<div class="label">Universalstecker</div>
<div class="body">USB-C (3 Achsen: Stecker · Kabel · Protokoll)</div>
</div>
<div class="branch-block">
<div class="label">Display</div>
<div class="body">HDMI · DisplayPort · Thunderbolt</div>
</div>
<div class="branch-block">
<div class="label">Netzwerk</div>
<div class="body">Ethernet · WiFi</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">In beiden Fällen</div>
<div class="bottom-text">Anwendungs-Wahl statt Auswendiglernen</div>
<div class="bottom-sub">Entscheidungsmatrizen pro Use Case</div>
</div>
</body>
</html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

@@ -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>
Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB