uni/slides/223015b/assets/demos/kap03-modalitäten-bogen.html

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