uni/slides/223015b/assets/demos/usb-c-drei-achsen.html

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>USB-C — drei Achsen, eine Verwirrung</title>
<style>
  :root {
    --dark: #1a1a2e;
    --muted: #6b7280;
    --soft: #f8fafc;
    --border: #cbd5e1;
    --hl: #d63384;
    --stecker: #2563eb;
    --kabel: #ea580c;
    --protokoll: #7c3aed;
  }
  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: 22px; font-size: 1.05rem; }
  .sub strong { color: var(--dark); }

  .axes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .axis {
    border: 2px solid;
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .axis.stecker    { border-color: var(--stecker); }
  .axis.kabel      { border-color: var(--kabel); }
  .axis.protokoll  { border-color: var(--protokoll); }

  .axis-head { display: flex; justify-content: space-between; align-items: baseline; }
  .axis-num {
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--muted);
  }
  .axis-name { font-size: 1.15rem; font-weight: 700; }
  .axis.stecker .axis-name   { color: var(--stecker); }
  .axis.kabel .axis-name     { color: var(--kabel); }
  .axis.protokoll .axis-name { color: var(--protokoll); }
  .axis-tagline {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.4;
  }
  .axis-tagline strong { color: var(--dark); }

  .icon {
    background: var(--soft);
    border-radius: 6px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .icon svg { display: block; }

  .options {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--dark);
    background: var(--soft);
    border-radius: 6px;
    padding: 10px 14px;
  }
  .options strong {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid var(--border);
  }
  .axis.stecker .options strong   { color: var(--stecker); }
  .axis.kabel .options strong     { color: var(--kabel); }
  .axis.protokoll .options strong { color: var(--protokoll); }

  .scenario {
    margin-top: 22px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    background: var(--soft);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 14px 22px;
  }
  .scenario-head {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 6px;
  }
  .scenario-body {
    font-size: 0.92rem;
    line-height: 1.5;
  }
  .scenario-body code {
    font-family: ui-monospace, monospace;
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
  }

  .verdict {
    margin-top: 16px;
    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.05rem; font-weight: 700; color: var(--hl); }
  .verdict-a { font-size: 0.92rem; color: var(--dark); margin-top: 4px; }
  .verdict-a strong { color: var(--hl); }
</style>
</head>
<body>
  <h1>USB-C — drei Achsen, eine Verwirrung</h1>
  <div class="sub">Derselbe Stecker. <strong>Aber Kabel ≠ Kabel.</strong> <strong>Protokoll ≠ Protokoll.</strong></div>

  <div class="axes">

    <div class="axis stecker">
      <div class="axis-head">
        <span class="axis-name">Stecker</span>
        <span class="axis-num">1 · MECHANIK</span>
      </div>
      <div class="axis-tagline">Die <strong>Form</strong>. Was reinsteckt, oval, beidseitig.</div>
      <div class="icon">
        <svg viewBox="0 0 120 30" width="140" height="40">
          <rect x="6" y="9" width="108" height="12" rx="6" fill="#2563eb" opacity="0.18" stroke="#2563eb" stroke-width="2"/>
          <rect x="22" y="13" width="76" height="4" rx="2" fill="#2563eb"/>
        </svg>
      </div>
      <div class="options">
        Nur eine Sorte: <strong>USB-C</strong> (auch USB Type-C). 24 Pins. Beidseitig steckbar. Andere Stecker-Typen: USB-A, USB-B, Micro-USB — nicht mit C kompatibel.
      </div>
    </div>

    <div class="axis kabel">
      <div class="axis-head">
        <span class="axis-name">Kabel</span>
        <span class="axis-num">2 · WAS DURCH-PASST</span>
      </div>
      <div class="axis-tagline">Die <strong>Adern</strong>. Was elektrisch transportiert werden kann.</div>
      <div class="icon">
        <svg viewBox="0 0 160 30" width="180" height="40">
          <path d="M10,15 L150,15" stroke="#ea580c" stroke-width="3"/>
          <rect x="2" y="8" width="14" height="14" rx="3" fill="#ea580c" opacity="0.4" stroke="#ea580c"/>
          <rect x="144" y="8" width="14" height="14" rx="3" fill="#ea580c" opacity="0.4" stroke="#ea580c"/>
        </svg>
      </div>
      <div class="options">
        <strong>Charge-only</strong> · billig, nur Strom · 5 W<br>
        <strong>USB 2.0</strong> · 480 Mbit/s · 60 W (3 A)<br>
        <strong>USB 3.2 Gen 2</strong> · 10 Gbit/s · 100 W<br>
        <strong>Thunderbolt 4</strong> · 40 Gbit/s · 240 W
      </div>
    </div>

    <div class="axis protokoll">
      <div class="axis-head">
        <span class="axis-name">Protokoll</span>
        <span class="axis-num">3 · WAS LÄUFT</span>
      </div>
      <div class="axis-tagline">Die <strong>Sprache</strong>. Was die zwei Geräte miteinander reden.</div>
      <div class="icon">
        <svg viewBox="0 0 160 30" width="180" height="40">
          <circle cx="20" cy="15" r="6" fill="#7c3aed"/>
          <path d="M30,15 L130,15" stroke="#7c3aed" stroke-width="2" stroke-dasharray="6,4"/>
          <circle cx="140" cy="15" r="6" fill="#7c3aed"/>
        </svg>
      </div>
      <div class="options">
        <strong>USB-PD</strong> · Power Delivery (Laden)<br>
        <strong>USB 2/3/4</strong> · Datenübertragung<br>
        <strong>Thunderbolt 3/4</strong> · Daten + Display<br>
        <strong>DisplayPort Alt</strong> · Monitor anschließen<br>
        <strong>HDMI Alt</strong> · weiter HDMI rausführen
      </div>
    </div>

  </div>

  <div class="scenario">
    <div class="scenario-head">Konkret: warum lädt der Laptop nicht?</div>
    <div class="scenario-body">
      USB-C-Port am Laptop ist da (<strong>Stecker</strong> stimmt). Aber der Aldi-Kabel ist <code>Charge-only</code> mit <code>5 W</code> (<strong>Kabel</strong> kann nicht genug Strom liefern). Oder der Port am Laptop unterstützt nur <code>USB-PD</code> mit 100 W, das Netzteil meldet aber nur 65 W (<strong>Protokoll</strong>-Handshake scheitert). <em>Eine der drei Achsen passt nicht.</em>
    </div>
  </div>

  <div class="verdict">
    <div class="verdict-q">Drei Achsen. Drei unabhängige Fragen. Drei Gründe, warum's nicht funktioniert.</div>
    <div class="verdict-a">Beim nächsten „USB-C-Kabel funktioniert nicht": <strong>Stecker passt → Kabel-Spec checken → Protokoll-Support prüfen.</strong> In dieser Reihenfolge.</div>
  </div>
</body>
</html>