223015c phase 2: 3 bogen-docs (kap1 geschichte+HTML, kap2 netzwerke+CSS, kap3 JS)

kap1 (~32 slides, vs ist 100): bogen 'wie sind wir vom lochkarten-rechenwerk zum HTML-tag im browser gekommen'. struktur: pioniere-galerie reduziert auf 6 personen (lovelace/hollerith/turing/von-neumann/hopper/hamilton), 4 internet-milestones (1969/1971/1983/1989), HTML-anatomie + semantik. streichungen: pro-person-galerie, IBM/NS-vertiefung, framework-logos (gehört kap3), A11y (verschoben nach kap2). 4 NEU demos: kap-c-01-bogen, internet-timeline, dce-cix-karte, html-tags-cheatsheet.

kap2 (~50 slides, vs ist 91): bogen 'wie reisen bytes von frankfurt nach stuttgart und wie wird HTML hübsch'. sub-A netzwerk 25 slides (IP/MAC/port-tripel, 4 TCP/IP-schichten + encapsulation, DNS-hierarchie, HTTP-request/response, statuscodes 200/301/404/500, HTTP/1.1/2/3, TCP-handshake, 7-schritte-synthese), sub-B CSS+A11y 25 slides (anatomie/selektoren/spezifizität/box-model/flexbox/grid/responsive/farbe + BFSG-EAA-zeitleiste/POUR/semantik+ARIA/kontrast/keyboard/error-states). streichungen: encapsulation-doppelt, bittorrent/P2P, glossar-folien, IPv6-tiefen. 12 NEU demos (HTTP-anatomien, statuscodes, http-versionen, 7-schritte-master, flexbox/grid-axes, flexbox-vs-grid, bfsg-zeitleiste, pour-diagramm, summary).

kap3 (~30 slides, vs ist 49): bogen 'was passiert wenn HTML+CSS da sind und nichts reagiert? JS macht es interaktiv'. variablen/funktionen/schleifen/DOM/events/dark-mode-toggle/to-do/fetch/localStorage. frameworks-vorschau (react/vue/angular) als ÜBERSICHTS-folie statt logo-galerie. JS auf verstehen-niveau (nicht klausurrelevant per vorschlag). streichungen: framework-logo-galerie, doppelte 'was kann JS'-folien, lange hands-on-codes (code in assets/code/). 2 NEU demos: js-was-kann-es, library-vs-framework.

reuse-budget: ~150 von 164 vorhandenen demos werden genutzt (a11y/css-selektoren/network-chain/dns/tcp/encap/js-*).
NEU-budget: 18 demos total (4+12+2).

docs/223015c/01-geschichte-grundlagen-html-bogen.md

@@ -0,0 +1,87 @@
+# Kap 1 — Geschichte, Grundlagen & HTML
+
+**Bedient Klausur-Blöcke:** A (Von-Neumann) + B (Internet-Entstehung) + G (HTML-Grundlagen)
+**Slide-Budget:** ~40 (90-min)
+**Aktueller Stand:** 100 Slides → 60% Reduktion nötig.
+
+## Bogen
+
+Eine Stunde, eine Frage: **„Wie sind wir vom Lochkarten-Rechenwerk zum HTML-Tag im Browser gekommen — und warum spielt das heute noch eine Rolle?"**
+
+1. **Eröffner:** „Du tippst `librete.ch` ein und schaust auf eine Seite. Was alles dahinter steht." → 7-Schritte-Diagramm (Vorschau auf Block F, wird in Kap 2 vertieft).
+2. **Pioniere:** Lovelace (algorithm) → Hollerith (Maschine zählt Daten) → Turing (universelle Maschine) → von Neumann (Architektur, die wir heute noch nutzen). 6 Personen, keine Galerie-Folie pro Person.
+3. **Von-Neumann-Architektur:** 5 Komponenten. Brücke zum Smartphone: „dein iPhone ist eine Von-Neumann-Maschine".
+4. **Pivot zu Netz:** „Eine Maschine ist eine Maschine. Was passiert, wenn wir zwei verbinden? ARPANET (1969)."
+5. **Internet-Timeline:** ARPANET (1969) → Email (1971) → TCP/IP (1983) → WWW (1989) → Mosaic (1993). Vier Milestones, nicht zwanzig.
+6. **Physik:** 1,3 Mio km Unterseekabel als Bodenfaktor, DE-CIX Frankfurt.
+7. **Pivot zu HTML:** „Du surfst auf der Website. Was bekommst du eigentlich vom Server geliefert?" → HTML.
+8. **HTML-Anatomie:** Tag-Struktur, DOCTYPE, head/body. Semantische Tags. Validität (warum kein div-Suppe).
+9. **Selbstlernen:** Im DevTools-Inspector eine Seite anschauen.
+
+## Advance Organizer
+
+Konkret-erkenntnisgewinnend (nicht Schablone): das **Welt-zu-Pixel-Diagramm** mit allen Stationen, die in diesem Kapitel angerissen werden — Rechenarchitektur, Internet-Layer, HTML-Render. Wird in Kap 2 (Netzwerk-Tiefe) und 3 (JS) vertieft.
+
+→ Demo-Datei: `kap-c-01-bogen.html` (NEU)
+
+## Folien-Skelett (Vorschlag)
+
+| # | Typ | Titel/Kern | Lernziel | Visualisierung |
+|---|-----|-----------|---------|----------------|
+| 1 | Cover | Kapitel 1 | — | reuse |
+| 2 | Lead | „Du tippst librete.ch ein..." | — | — |
+| 3 | Advance Organizer | Welt → Pixel (alle Stationen) | A.1+B.1+G.1 | NEU kap-c-01-bogen |
+| 4 | Lead | Pioniere | — | — |
+| 5 | Inhalt | Ada Lovelace + Hollerith | A.3 | reuse |
+| 6 | Inhalt | Turing + Manhattan-Projekt + ENIAC | A.3 | reuse |
+| 7 | Inhalt | von Neumann + die Architektur | A.1, A.2 | reuse |
+| 8 | Klausur | Die 5 Komponenten Von-Neumann | A.1 | reuse |
+| 9 | Inhalt | Hopper, Booth, Hamilton | A.3 | reuse |
+| 10 | Lead | Vom Militär zum Netz | — | — |
+| 11 | Inhalt | Kalter Krieg + ARPANET | B.1 | reuse |
+| 12 | Klausur | Internet-Timeline (4 Milestones) | B.1 | NEU timeline |
+| 13 | Inhalt | WWW 1989 Berners-Lee | B.1 | reuse |
+| 14 | Inhalt | Mosaic + die 90er | B.1 | reuse |
+| 15 | Inhalt | Unterseekabel | B.2 | reuse |
+| 16 | Inhalt | DE-CIX, Frankfurt | B.2 | NEU dce-cix-karte |
+| 17 | Lead | Was bekommt der Browser? | — | — |
+| 18 | Inhalt | Eine Webseite ist HTML | G.1 | reuse |
+| 19 | Klausur | HTML-Anatomie: Tag-Struktur | G.1 | reuse |
+| 20 | Demo | HTML-Grundgerüst | G.3 | reuse grundgeruest |
+| 21 | Klausur | DOCTYPE + head + body | G.3 | reuse |
+| 22 | Inhalt | Attribute (id, class, href, src) | G.1 | reuse tag-attribut |
+| 23 | Inhalt | Semantische HTML-Tags | G.2 | reuse |
+| 24 | Klausur | Header/nav/main/article/section/footer | G.2 | reuse |
+| 25 | Inhalt | Warum semantisch? (SEO, A11y) | G.4 | reuse |
+| 26 | Inhalt | Validität: kein div-Suppe | G.4 | — |
+| 27 | Demo | Inspector im Browser | G.1 | reuse dom-tree |
+| 28 | Inhalt | Häufige HTML-Tags-Übersicht | G.1, G.2 | NEU html-tags-cheatsheet |
+| 29 | Inhalt | Forms (input, label, button, textarea) | G.1 | reuse button + input |
+| 30 | Inhalt | Dialog + Details | G.2 | reuse dialog + details-open/closed |
+| 31 | Selbstlernen | DevTools-Inspector eigene Lieblings-Seite | G.4 | — |
+| 32 | Zusammenfassung | Pioniere → Internet → HTML | alle A+B+G | NEU |
+
+~32 statt 100 Slides. Drastische Reduktion durch Streichen der Vertiefungs-Folien und Galerie-Inflation.
+
+## Streichungs-Liste
+
+Aus aktuellem 01-geschichte-grundlagen-html.md (100 Slides):
+- Galerie-Folien pro Person (jede mit Bild + 5 Bullet Points): 12 Personen → 6 (Lovelace, Hollerith, Turing, von Neumann, Hopper, Hamilton)
+- Z3, Mark I, ENIAC als drei Einzelfolien → eine
+- IBM/NS-Vertiefung als zwei Folien → eine
+- HTML-Tag-Listen-Folien (jede mit 5-7 Tags) → eine Cheatsheet-Folie
+- Frameworks-Logos-Slides (React, Vue, Astro etc.) — gehört in JS-Kapitel (Block J)
+- A11y-Folien hier → verschieben nach Kap 2 (wo CSS/A11y kombiniert)
+- Diverse „Bei näherem Hinsehen"-Vertiefungen die Mayer-Redundancy verletzen
+
+## Visualisierungs-TODO
+
+| Demo | Neu/Reuse | Status |
+|------|-----------|--------|
+| kap-c-01-bogen | NEU | Phase 3 |
+| internet-timeline | NEU | Phase 3 |
+| dce-cix-karte | NEU | Phase 3 |
+| html-tags-cheatsheet | NEU | Phase 3 |
+| Alle anderen | reuse | bereits in 164 demos |
+
+→ 4 neue Demos für Kap 1.