replace ascii arrows: network chain, port highlight, client/server, encap/decap, response hops

slides/223015c/02-netzwerke-protokolle-css.md

@@ -347,25 +347,18 @@ SPEAKER NOTES:
 
 # Das Problem: Komplexität
 
-Zwischen dir und einer Webseite liegen:
+![bg right:40% fit](./assets/demos/network-chain.png)
 
-```
-Dein Browser
-    ↓
-Deine Netzwerkkarte (WLAN oder Ethernet)
-    ↓
-Router im Flur / zu Hause
-    ↓
-Netzwerk der HdM / deines Providers
-    ↓
-Das Internet (dutzende Router)
-    ↓
-Netzwerk des Ziel-Servers
-    ↓
-Der Webserver
-```
+Zwischen dir und einer Webseite liegen viele Stationen.
 
-Jede Komponente "spricht" anders.
+Jede Komponente "spricht" anders:
+
+- Browser → **HTTP**
+- Netzwerkkarte → **Bits / Signale**
+- Router → **IP-Pakete**
+- Provider → **Routing**
+
+Wie zusammenbringen?
 
 <!--
 SPEAKER NOTES:
@@ -651,10 +644,7 @@ SPEAKER NOTES:
 
 # Port: Das richtige Programm
 
-```
-212.132.79.37:443
-              └─── Port 443 = HTTPS
-```
+![bg right:38% fit](./assets/demos/port-highlight.png)
 
 - Identifiziert ein **Programm** auf einem Rechner
 - Ein Rechner, viele Dienste
@@ -1051,13 +1041,7 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
 
 **Status:** Die TCP-Verbindung steht.
 
-```
-Client:    141.62.xxx.xxx:52431
-                         └─── Zufälliger Port für diese Verbindung
-
-Server:    212.132.79.37:443
-                        └─── HTTPS-Port
-```
+![bg right:42% fit](./assets/demos/client-server-ports.png)
 
 **Jetzt erst** kann HTTP gesprochen werden.
 
@@ -1397,17 +1381,7 @@ SPEAKER NOTES:
 <!--
 SPEAKER NOTES:
 - Gleiches Spiel, andere Richtung
-IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
-    ↓
-Ethernet: Dest-MAC: Router des Server-Netzes
-    ↓
-Bits
-```
-
-<!--
-SPEAKER NOTES:
-- Gleiches Spiel, andere Richtung
-- TCP: Ziel-Port 52431 (Browser!)
+- TCP: Ziel-Port 52431 (Browser!)
 - IP: Ziel-IP = Laptop
 - Ethernet: Dest-MAC = nächster Router
 - Ab geht's – ganzer Weg zurück
@@ -1422,17 +1396,13 @@ SPEAKER NOTES:
 Gleiches Spiel wie der Hinweg:
 
 - Hop für Hop durchs Internet
-Router HdM
-    ↓
-Dein Laptop
-```
-
-Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
-
-<!--
-SPEAKER NOTES:
+- **IP bleibt gleich** (Start/Ziel)
 - **MAC ändert sich** bei jedem Router
-- Jeder Router: auspacken → routing → einpacken
+
+<!--
+SPEAKER NOTES:
+- Rückweg: gleiche Mechanik, andere Richtung
+- Jeder Router: auspacken → routing → einpacken
 - Bis Paket bei euch ankommt
 -->
 
@@ -1445,19 +1415,11 @@ SPEAKER NOTES:
 Rückweg = Encapsulation umgekehrt.
 
 Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
-IP: Ziel-IP = meine IP? → Auspacken
-    ↓
-TCP: Port 52431 = mein Browser → Auspacken
-    ↓
-HTTP: "HTTP/1.1 200 OK..."
-    ↓
-Browser rendert die Seite
-```
-
-<!--
-SPEAKER NOTES:
-- Laptop empfängt, auspackt: Frame → IP → TCP
-- TCP: Port 52431 = Browser-Prozess
+
+<!--
+SPEAKER NOTES:
+- Laptop empfängt, auspackt: Frame → IP → TCP
+- TCP: Port 52431 = Browser-Prozess
 - Browser bekommt HTTP-Response
 - Beginnt mit Rendern
 - 200ms vorbei → Webseite sichtbar