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/02-netzwerke-protokolle-css-bogen.md

@@ -0,0 +1,117 @@
+# Kap 2 — Netzwerke, Protokolle & CSS
+
+**Bedient Klausur-Blöcke:** C (TCP/IP-Schichten) + D (IP/MAC/Port) + E (DNS+HTTP) + F (Browser-Ablauf) + H (CSS) + I (A11y)
+**Slide-Budget:** ~50 (90-min, ggf. 2 Termine — größtes Kapitel)
+**Aktueller Stand:** 91 Slides → bleibt ungefähr gleich, aber strukturell aufgeräumt.
+
+## Bogen
+
+Eine Stunde, eine Frage: **„Wie reisen Bytes vom Server in Frankfurt zu deinem Browser in Stuttgart — und wie wird der ankommende HTML-Code zu einer hübschen Seite?"**
+
+1. **Eröffner:** der „URL bis Pixel"-Ablauf als Bogen-Anker. 7 Schritte, jeder kommt in diesem Kapitel dran.
+2. **Adress-Tripel:** IP, MAC, Port. Drei Schichten, drei Fragen.
+3. **TCP/IP-Schichten:** 4 Schichten + Encapsulation. Warum Schichten überhaupt?
+4. **DNS:** wie findet die Maschine die richtige IP zur URL?
+5. **HTTP:** wie sieht die Anfrage und Antwort aus?
+6. **Pivot zu Darstellung:** Browser hat HTML. Jetzt: wie wird das hübsch?
+7. **CSS-Anatomie:** Selektoren, Box-Model, Kaskade.
+8. **Layout:** Flexbox + Grid.
+9. **A11y:** BFSG/EAA + WCAG POUR + semantisch + ARIA.
+
+## Advance Organizer
+
+Bogen-konkret: „Pakete reisen → Browser rendert" als zwei-akt-pipeline. Wird in der Sub-Sektionen ausgepackt.
+
+→ Demo: `kap-c-02-bogen.html` (NEU)
+
+## Folien-Skelett (Vorschlag)
+
+### Sub-A: Netzwerk (25 Slides)
+
+| # | Typ | Titel/Kern | Lernziel | Visualisierung |
+|---|-----|-----------|---------|----------------|
+| 1 | Cover | Kapitel 2 | — | reuse |
+| 2 | Lead | Pakete reisen + Browser rendert | F.1 | NEU bogen |
+| 3 | Inhalt | URL→Pixel (Vorschau auf alle 7 Schritte) | F.1 | reuse |
+| 4 | Lead | Adressen | — | — |
+| 5 | Klausur | IP — Endgerät identifizieren | D.1 | reuse ip-packet |
+| 6 | Klausur | MAC — nächster physischer Hop | D.2 | reuse ethernet |
+| 7 | Klausur | Port — Ziel-Programm | D.3 | reuse client-server-ports |
+| 8 | Klausur | IP vs MAC vs Port — Vergleich | D.4 | reuse |
+| 9 | Lead | TCP/IP-Schichtenmodell | — | — |
+| 10 | Klausur | Die 4 Schichten | C.1 | reuse osi-tcpip-diagram |
+| 11 | Inhalt | Encapsulation Schritt für Schritt | C.2 | reuse encap-stack + decap-stack |
+| 12 | Klausur | Datenüberbringung: Bit→Frame→Packet→Segment | C.3 | reuse encap-layers |
+| 13 | Inhalt | OSI vs TCP/IP | C.4 | reuse osi-tcpip-diagram |
+| 14 | Lead | DNS | — | — |
+| 15 | Klausur | Was tut DNS? | E.1 | reuse dns-lookup |
+| 16 | Klausur | DNS-Hierarchie Root→TLD→Authoritative | E.1 | reuse dns-tree |
+| 17 | Demo | nslookup im Terminal | E.1 | — |
+| 18 | Lead | HTTP | — | — |
+| 19 | Klausur | HTTP-Request lesen (Method, Path, Header) | E.2 | NEU http-request-anatomie |
+| 20 | Klausur | HTTP-Response (Status, Header, Body) | E.2 | NEU http-response-anatomie |
+| 21 | Klausur | Statuscodes 200/301/404/500 | E.3 | NEU statuscodes-tabelle |
+| 22 | Inhalt | HTTP/1.1 → HTTP/2 → HTTP/3 | E.4 | NEU http-versionen |
+| 23 | Demo | DevTools Network-Tab | E.2 | — |
+| 24 | Inhalt | TCP-Handshake | C.1 | reuse tcp-handshake |
+| 25 | Klausur | Block F: Synthese URL→Pixel (7 Schritte) | F.1 | NEU 7-schritte-master |
+
+### Sub-B: CSS + A11y (25 Slides)
+
+| # | Typ | Titel/Kern | Lernziel | Visualisierung |
+|---|-----|-----------|---------|----------------|
+| 26 | Lead | Was tut CSS? | — | — |
+| 27 | Inhalt | CSS-Anatomie | H.1 | reuse css-anatomie |
+| 28 | Klausur | CSS-Selektoren-Übersicht | H.2 | reuse css-selector-* |
+| 29 | Inhalt | Kombinatoren | H.2 | reuse css-combinators |
+| 30 | Inhalt | Pseudo-Klassen + Pseudo-Elemente | H.2 | reuse |
+| 31 | Klausur | Spezifizität | H.3 | reuse css-specificity |
+| 32 | Klausur | Box-Model | H.1 | reuse css-box-model + box-model-diagram |
+| 33 | Inhalt | Display: block / inline / flex / grid | H.4 | — |
+| 34 | Inhalt | Flexbox-Anatomie | H.4 | NEU flexbox-axes |
+| 35 | Inhalt | Grid-Anatomie | H.4 | NEU grid-areas |
+| 36 | Klausur | Flexbox vs Grid — wann was | H.4 | NEU flexbox-vs-grid |
+| 37 | Inhalt | Responsive Design (media queries) | H.4 | reuse css-responsive |
+| 38 | Inhalt | Farbe + Kontrast | I.4 | reuse css-colors |
+| 39 | Lead | Barrierefreiheit | — | — |
+| 40 | Klausur | BFSG + EAA — was kommt 28.06.2025 | I.1 | NEU bfsg-zeitleiste |
+| 41 | Klausur | WCAG-POUR (4 Prinzipien) | I.2 | NEU pour-diagramm |
+| 42 | Klausur | Semantisches HTML als A11y-Foundation | I.3 | reuse a11y-semantic |
+| 43 | Inhalt | ARIA als Ergänzung | I.3 | — |
+| 44 | Inhalt | Alt-Text für Bilder | I.4 | — |
+| 45 | Klausur | Kontrast 4.5:1 für Text | I.4 | reuse contrast-levels |
+| 46 | Inhalt | Keyboard-Navigation | I.4 | reuse keyboard-a11y + a11y-focus |
+| 47 | Klausur | Error-States: visuell + textuell | I.4 | reuse a11y-error |
+| 48 | Demo | A11y-Audit mit DevTools | I.4 | — |
+| 49 | Selbstlernen | Eine eigene Seite auf WCAG prüfen | I.4 | — |
+| 50 | Zusammenfassung | Reise + Render | alle | NEU |
+
+## Streichungs-Liste
+
+Aus aktuellem 02-netzwerke-protokolle-css.md (91 Slides):
+- Doppelte Vertiefungs-Folien zu „Encapsulation" (3 → 1)
+- BitTorrent/P2P-Folien — gehört nicht hierhin, raus
+- Glossar-Folien — als Speaker-Notes
+- Diverse „Bei näherem Hinsehen"-Slides (Mayer-Redundancy)
+- ARP-Lookup-Detail — entfernen oder als Bonus
+- IPv6-Tiefen-Folien — auf eine Folie eindampfen
+
+## Visualisierungs-TODO
+
+| Demo | Neu/Reuse |
+|------|-----------|
+| kap-c-02-bogen | NEU |
+| http-request-anatomie | NEU |
+| http-response-anatomie | NEU |
+| statuscodes-tabelle | NEU |
+| http-versionen | NEU |
+| 7-schritte-master | NEU |
+| flexbox-axes | NEU |
+| grid-areas | NEU |
+| flexbox-vs-grid | NEU |
+| bfsg-zeitleiste | NEU |
+| pour-diagramm | NEU |
+| summary-c-02 | NEU |
+| Alle anderen | reuse aus 164 bestehenden |
+
+→ 12 neue Demos für Kap 2. Großes Demo-Investment, aber klausur-zentral.