remove klausur class from chapter 2, siezen students, add server-decap demo, hide header/footer on oversized slides

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

@@ -349,7 +349,7 @@ SPEAKER NOTES:
 
 ![bg right:40% fit](./assets/demos/network-chain.png)
 
-Zwischen dir und einer Webseite liegen viele Stationen.
+Zwischen Ihnen und einer Webseite liegen viele Stationen.
 
 Jede Komponente "spricht" anders:
 
@@ -399,10 +399,6 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Das TCP/IP-Modell
 
 | Schicht | Name | Aufgabe | Protokolle |
@@ -473,10 +469,6 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # Dateneinheiten pro Schicht
 
 | Schicht | Name | Dateneinheit | Was kommt hinzu? |
@@ -663,10 +655,6 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
 # IP vs. MAC vs. Port
 
 | | IP-Adresse | MAC-Adresse | Port |
@@ -719,7 +707,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
 <!-- _class: lead -->
 
 # Die Reise eines Klicks
-## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
+## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?
 
 <!--
 SPEAKER NOTES:
@@ -733,7 +721,7 @@ SPEAKER NOTES:
 
 # Das Szenario
 
-Du bist im WLAN der HdM und rufst auf:
+Sie sind im WLAN der HdM und rufen auf:
 
 ```
 https://www.hdm-stuttgart.de
@@ -754,9 +742,13 @@ SPEAKER NOTES:
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # Die Zeitlinie
 
-![h:520 center](./assets/demos/timeline.png)
+![h:560 center](./assets/demos/timeline.png)
 
 <!--
 SPEAKER NOTES:
@@ -791,7 +783,7 @@ SPEAKER NOTES:
 www.hdm-stuttgart.de  →  212.132.79.37
 ```
 
-Dein Laptop fragt sich durch:
+Ihr Laptop fragt sich durch:
 
 1. **Browser-Cache:** "War ich da kürzlich?" → Nein
 2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
@@ -831,6 +823,10 @@ SPEAKER NOTES:
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # Der DNS-Lookup
 
 ![w:1100 center](./assets/demos/dns-lookup.png)
@@ -933,26 +929,13 @@ SPEAKER NOTES:
 
 ---
 
-<!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
+<!-- _paginate: false -->
 
 # Der 3-Way-Handshake
 
-```
-Client (dein Laptop)                      Server
-    |                                        |
-    |-------- SYN (Seq=1000) --------------->|
-    |         "Ich will reden"               |
-    |                                        |
-    |<--- SYN-ACK (Seq=5000, Ack=1001) ------|
-    |     "OK, ich auch. Ich starte bei 5000"|
-    |                                        |
-    |-------- ACK (Ack=5001) --------------->|
-    |         "Verstanden, los geht's"       |
-    |                                        |
-    |        [ Verbindung steht ]            |
-```
+![w:1050 center](./assets/demos/tcp-handshake.png)
 
 **SYN** = Synchronize · **ACK** = Acknowledge
 
@@ -1028,7 +1011,7 @@ SPEAKER NOTES:
 
 ---
 
-# Was dein Browser sendet
+# Was Ihr Browser sendet
 
 ```http
 GET / HTTP/1.1
@@ -1047,7 +1030,7 @@ Connection: keep-alive
 <!--
 SPEAKER NOTES:
 - HTTP-Request: lesbar, menschlich verständlich
-- GET = "hol mir was" (POST = "hier Daten für dich")
+- GET = "hol mir was" (POST = "hier Daten für Sie")
 - "/" = Wurzel = Startseite
 - HTTP/1.1 = Protokollversion
 - Header: Kontext (Host, Browser, Sprache)
@@ -1131,7 +1114,7 @@ SPEAKER NOTES:
 
 ---
 
-# Woher kennt dein Laptop die Router-MAC?
+# Woher kennt Ihr Laptop die Router-MAC?
 
 **ARP** – Address Resolution Protocol
 
@@ -1198,7 +1181,7 @@ SPEAKER NOTES:
 
 ---
 
-# Der erste Hop: Dein Router
+# Der erste Hop: Ihr Router
 
 ```
 Laptop → [Frame] → Router
@@ -1280,19 +1263,11 @@ SPEAKER NOTES:
 
 # Decapsulation am Server
 
-```
-Bits empfangen (Layer 1)
-    ↓
-Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
-    ↓
-IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
-    ↓
-TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
-    ↓
-HTTP lesen: "GET / HTTP/1.1" (Layer 7)
-```
+![bg right:42% fit](./assets/demos/server-decap.png)
 
-Der Webserver versteht: "Jemand will die Startseite."
+Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+
+Am Ende versteht der Webserver: "Jemand will die Startseite."
 
 <!--
 SPEAKER NOTES:
@@ -1321,7 +1296,7 @@ Content-Length: 45231
 <!--
 SPEAKER NOTES:
 - Antwort: 200 OK = alles gut
-- Content-Type: HTML
+- Content-Type: HTML
 - Content-Length: 45231 Bytes
 - Dann: eigentlicher HTML-Code
 -->
@@ -1369,7 +1344,7 @@ SPEAKER NOTES:
 ![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.
 
 <!--
@@ -1400,10 +1375,6 @@ SPEAKER NOTES:
 | | TCP | UDP |
 |---|-----|-----|
 | **Verbindung** | Ja (Handshake) | Nein |
-
-| | TCP | UDP |
-|---|-----|-----|
-| **Verbindung** | Ja (Handshake) | Nein |
 | **Reihenfolge** | Garantiert | Nicht garantiert |
 | **Verlorene Pakete** | Werden nachgefordert | Gehen verloren |
 | **Overhead** | Höher | Niedriger |
@@ -1505,10 +1476,6 @@ SPEAKER NOTES:
 | Methode | Bedeutung | Beispiel |
 |---------|-----------|----------|
 | **GET** | Daten abrufen | Seite laden |
-
-| Methode | Bedeutung | Beispiel |
-|---------|-----------|----------|
-| **GET** | Daten abrufen | Seite laden |
 | **POST** | Daten senden | Formular absenden |
 | **PUT** | Daten ersetzen | Profil aktualisieren |
 | **DELETE** | Daten löschen | Account löschen |
@@ -1570,10 +1537,6 @@ POST /users          → Neuen Benutzer erstellen
 ```http
 HTTP/1.1 200 OK
 HTTP/1.1 404 Not Found
-
-```http
-HTTP/1.1 200 OK
-HTTP/1.1 404 Not Found
 HTTP/1.1 500 Internal Server Error
 ```
 
@@ -1630,10 +1593,6 @@ Die erste Ziffer kategorisiert die Antwort:
 **Der Ablauf:**
 1. DNS (UDP:53) → Name zu IP
 2. TCP-Handshake (SYN → SYN-ACK → ACK)
-
-**Der Ablauf:**
-1. DNS (UDP:53) → Name zu IP
-2. TCP-Handshake (SYN → SYN-ACK → ACK)
 3. HTTP-Request (GET /...)
 4. HTTP-Response (200 OK + HTML)
 
@@ -1966,10 +1925,6 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
 ![bg right:35%](./assets/demos/css-specificity.png)
 
 | Selektor | Spezifität |
-
-![bg right:35%](./assets/demos/css-specificity.png)
-
-| Selektor | Spezifität |
 |----------|------------|
 | Element (`p`) | 0,0,0,1 |
 | Klasse (`.wichtig`) | 0,0,1,0 |
@@ -2136,11 +2091,6 @@ HSL: Hue, Saturation, Lightness. Manchmal intuitiver für Farbanpassungen.
 | Einheit | Bedeutung |
 |---------|-----------|
 | `px` | Pixel (absolut) |
-# Einheiten
-
-| Einheit | Bedeutung |
-|---------|-----------|
-| `px` | Pixel (absolut) |
 | `%` | Prozent vom Elternelement |
 | `em` | Relativ zur Schriftgröße des Elements |
 | `rem` | Relativ zur Schriftgröße des Root-Elements |