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:
 
 Der Server macht **dasselbe** – nur in die andere Richtung:
 
-```
-HTTP-Response: "HTTP/1.1 200 OK..."
-    ↓
-TCP: Dest-Port: 52431 (dein Browser!)
-    ↓
-IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
-    ↓
-Ethernet: Dest-MAC: Router des Server-Netzes
-    ↓
-Bits
-```
+![bg right:40% fit](./assets/demos/encap-stack.png)
 
 <!--
 SPEAKER NOTES:
@@ -1422,17 +1396,13 @@ SPEAKER NOTES:
 
 # Die Antwort reist zurück
 
-```
-Server
-    ↓
-Router → Router → Router → ...
-    ↓
-Router HdM
-    ↓
-Dein Laptop
-```
+![bg right:38% fit](./assets/demos/response-hops.png)
 
-Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
+Gleiches Spiel wie der Hinweg:
+
+- Hop für Hop durchs Internet
+- **IP bleibt gleich** (Start/Ziel)
+- **MAC ändert sich** bei jedem Router
 
 <!--
 SPEAKER NOTES:
@@ -1445,19 +1415,11 @@ SPEAKER NOTES:
 
 # Decapsulation bei dir
 
-```
-Bits empfangen
-    ↓
-Frame: MAC = meine MAC? → Auspacken
-    ↓
-IP: Ziel-IP = meine IP? → Auspacken
-    ↓
-TCP: Port 52431 = mein Browser → Auspacken
-    ↓
-HTTP: "HTTP/1.1 200 OK..."
-    ↓
-Browser rendert die Seite
-```
+![bg right:42% fit](./assets/demos/decap-stack.png)
+
+Rückweg = Encapsulation umgekehrt.
+
+Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
 
 <!--
 SPEAKER NOTES: