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
 
-```
+![w:1050 center](./assets/demos/tcp-handshake.png)
-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 ]            |
-```
 
 **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
 
-```
+![bg right:42% fit](./assets/demos/server-decap.png)
-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)
-```
 
-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 |

slides/223015c/03-interaktivitaet-javascript.md

@@ -342,7 +342,7 @@ true || false  // true (ODER)
 
 **In der Browser-Konsole:**
 
-1. Erstelle Variablen für dich:
+1. Erstellen Sie Variablen für sich:
    ```javascript
    const name = "Your Name";
    let age = 20;

slides/223015c/assets/demos/server-decap.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>Server Decapsulation</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 30px; display: inline-block; }
+    .stack { display: flex; flex-direction: column; gap: 0; }
+    .layer {
+      border: 2px solid;
+      border-radius: 6px;
+      padding: 10px 18px;
+      min-width: 540px;
+      font-size: 0.95rem;
+      margin-bottom: 4px;
+    }
+    .layer-name { font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; }
+    .layer-desc { font-family: ui-monospace, monospace; margin-top: 3px; }
+    .check { margin-top: 3px; font-size: 0.85rem; font-style: italic; }
+    .http { background: #e0e7ff; border-color: #4f46e5; color: #3730a3; }
+    .tcp { background: #dbeafe; border-color: #1e40af; color: #1e3a8a; }
+    .ip { background: #dcfce7; border-color: #15803d; color: #14532d; }
+    .eth { background: #fed7aa; border-color: #c2410c; color: #7c2d12; }
+    .bit { background: #e5e7eb; border-color: #4b5563; color: #1f2937; }
+    .arrow {
+      align-self: center;
+      width: 0; height: 0;
+      border-left: 9px solid transparent;
+      border-right: 9px solid transparent;
+      border-top: 12px solid #d63384;
+      margin: 2px 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="stack">
+    <div class="layer bit">
+      <div class="layer-name">Physical</div>
+      <div class="layer-desc">Bits empfangen</div>
+    </div>
+    <div class="arrow"></div>
+    <div class="layer eth">
+      <div class="layer-name">Ethernet-Frame</div>
+      <div class="check">MAC + FCS okay? ✓ auspacken</div>
+    </div>
+    <div class="arrow"></div>
+    <div class="layer ip">
+      <div class="layer-name">IP-Paket</div>
+      <div class="check">Ziel-IP = meine? ✓ auspacken</div>
+    </div>
+    <div class="arrow"></div>
+    <div class="layer tcp">
+      <div class="layer-name">TCP-Segment</div>
+      <div class="check">Port 443, Seq-Nr passt? ✓ auspacken</div>
+    </div>
+    <div class="arrow"></div>
+    <div class="layer http">
+      <div class="layer-name">HTTP-Request</div>
+      <div class="layer-desc">"GET / HTTP/1.1"</div>
+      <div class="check">→ Webserver bearbeitet</div>
+    </div>
+  </div>
+</body>
+</html>

slides/223015c/assets/demos/tcp-handshake.html

@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <title>TCP 3-Way-Handshake</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
+    body { padding: 30px; display: inline-block; }
+    .actors { display: flex; justify-content: space-between; width: 900px; margin-bottom: 8px; }
+    .actor {
+      background: #1a1a2e;
+      color: #fff;
+      padding: 10px 24px;
+      border-radius: 6px;
+      font-weight: 700;
+      font-size: 0.95rem;
+    }
+    .client { background: #1e40af; }
+    .server { background: #c2410c; }
+    .diagram {
+      position: relative;
+      width: 900px;
+      height: 420px;
+    }
+    .lifeline {
+      position: absolute;
+      top: 0; bottom: 0;
+      width: 3px;
+      background: repeating-linear-gradient(to bottom, #9ca3af 0 8px, transparent 8px 14px);
+    }
+    .ll-client { left: 80px; }
+    .ll-server { right: 80px; }
+    .msg {
+      position: absolute;
+      height: 2px;
+      background: #d63384;
+    }
+    .msg-reverse { background: #15803d; }
+    .arrow-right::after {
+      content: "";
+      position: absolute;
+      right: -1px; top: -6px;
+      border-left: 10px solid #d63384;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+    }
+    .arrow-left::before {
+      content: "";
+      position: absolute;
+      left: -1px; top: -6px;
+      border-right: 10px solid #15803d;
+      border-top: 6px solid transparent;
+      border-bottom: 6px solid transparent;
+    }
+    .label {
+      position: absolute;
+      font-size: 0.85rem;
+      padding: 4px 12px;
+      background: #fff;
+      border-radius: 4px;
+      border: 1px solid;
+      font-weight: 600;
+      white-space: nowrap;
+    }
+    .label.ask { border-color: #d63384; color: #7c2d12; top: -24px; }
+    .label.reply { border-color: #15803d; color: #14532d; top: -24px; }
+    .quote {
+      position: absolute;
+      font-size: 0.78rem;
+      color: #4a4a6a;
+      font-style: italic;
+      top: 14px;
+      white-space: nowrap;
+    }
+    .final {
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #dcfce7;
+      border: 2px solid #15803d;
+      color: #14532d;
+      padding: 8px 20px;
+      border-radius: 6px;
+      font-weight: 700;
+    }
+  </style>
+</head>
+<body>
+  <div class="actors">
+    <div class="actor client">Client (Laptop)</div>
+    <div class="actor server">Server</div>
+  </div>
+  <div class="diagram">
+    <div class="lifeline ll-client"></div>
+    <div class="lifeline ll-server"></div>
+
+    <!-- SYN -->
+    <div class="msg arrow-right" style="left: 82px; right: 80px; top: 60px;">
+      <div class="label ask" style="left: 50%; transform: translateX(-50%);">SYN · Seq=1000</div>
+      <div class="quote" style="left: 50%; transform: translateX(-50%);">"Ich will reden"</div>
+    </div>
+
+    <!-- SYN-ACK -->
+    <div class="msg arrow-left msg-reverse" style="left: 83px; right: 80px; top: 180px;">
+      <div class="label reply" style="left: 50%; transform: translateX(-50%);">SYN-ACK · Seq=5000, Ack=1001</div>
+      <div class="quote" style="left: 50%; transform: translateX(-50%);">"OK, ich starte bei 5000"</div>
+    </div>
+
+    <!-- ACK -->
+    <div class="msg arrow-right" style="left: 82px; right: 80px; top: 300px;">
+      <div class="label ask" style="left: 50%; transform: translateX(-50%);">ACK · Ack=5001</div>
+      <div class="quote" style="left: 50%; transform: translateX(-50%);">"Verstanden, los geht's"</div>
+    </div>
+
+    <div class="final">✓ Verbindung steht</div>
+  </div>
+</body>
+</html>