uni/slides/223015b/assets/demos/kap04-bogen.html

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