diff --git a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
index e453642..584e54d 100644
--- a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+++ b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
@@ -285,7 +285,7 @@ Ports = "Türnummern" auf Server
# Das Problem
**Menschen:** `www.hdm-stuttgart.de`
-**Computer:** `141.62.1.53`
+**Computer:** `212.132.79.37`
**DNS** = Domain Name System
→ Übersetzt Namen in IP-Adressen
@@ -327,9 +327,9 @@ FQDN = Fully Qualified Domain Name
1. Browser fragt lokalen DNS-Resolver
2. Resolver fragt Root-Server → ".de ist bei..."
3. Resolver fragt .de-Server → "hdm-stuttgart bei..."
-4. Resolver fragt hdm-Server → "www = 141.62.1.53"
+4. Resolver fragt hdm-Server → "www = 212.132.79.37"
5. Resolver cached Antwort
-6. Browser verbindet zu 141.62.1.53
+6. Browser verbindet zu 212.132.79.37
```
**Caching:** Antworten werden gespeichert
@@ -347,7 +347,7 @@ TTL = Time To Live (wie lange cachen)
| Typ | Bedeutung | Beispiel |
|-----|-----------|----------|
-| **A** | IPv4-Adresse | `www → 141.62.1.53` |
+| **A** | IPv4-Adresse | `www → 212.132.79.37` |
| **AAAA** | IPv6-Adresse | `www → 2001:db8::1` |
| **CNAME** | Alias | `blog → www.example.com` |
| **MX** | Mail-Server | `@ → mail.example.com` |
@@ -427,27 +427,15 @@ Body kommt nach leerem Zeile (bei POST)
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234
-Date: Fri, 10 Jan 2026 10:00:00 GMT
-
-...
-
+...
```
-**Status-Codes:**
-
-| Code | Bedeutung |
-|------|-----------|
-| **2xx** | Erfolg (200 OK, 201 Created) |
-| **3xx** | Umleitung (301 Moved, 302 Found) |
-| **4xx** | Client-Fehler (404 Not Found, 403 Forbidden) |
-| **5xx** | Server-Fehler (500 Internal Error) |
+**Status-Codes:** 2xx Erfolg · 3xx Umleitung · 4xx Client-Fehler · 5xx Server-Fehler
---
@@ -475,20 +463,14 @@ POST = nicht idempotent
# Hands-On: HTTP beobachten (20 Min)
-**Browser DevTools öffnen:**
-- Windows/Linux: `F12` oder `Strg+Shift+I`
-- Mac: `Cmd+Option+I`
+**DevTools öffnen:** `F12` (Win/Linux) · `Cmd+Option+I` (Mac)
**Tab "Netzwerk" (Network):**
+1. Beliebige Webseite öffnen
+2. Requests beobachten
+3. Auf Request klicken → Headers & Response analysieren
-1. Öffnet eine beliebige Webseite
-2. Beobachtet die Requests
-3. Klickt auf einen Request
-4. Analysiert Headers und Response
-
-**Fragen:**
-- Wie viele Requests für eine Seite?
-- Welche Dateitypen werden geladen?
+**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...)
---
@@ -531,30 +513,23 @@ Separation of Concerns
# CSS einbinden
-**Option 1: Externe Datei (empfohlen!)**
+**Option 1: Externe Datei** (empfohlen!)
```html
-
-
-
+
```
-**Option 2: Im `
-
+
```
-**Option 3: Inline (vermeiden!)**
+**Option 3: Inline** (vermeiden!)
```html
-Text
+...
```
---
@@ -830,19 +805,14 @@ vw/vh = Viewport (sichtbarer Bereich)
**Erstellt `style.css` für eure HTML-Seite:**
-1. Verlinkt die CSS-Datei im ``
-2. Setzt eine Grundschrift:
- ```css
- body {
- font-family: system-ui, sans-serif;
- line-height: 1.6;
- color: #333;
- }
- ```
-3. Stylt Überschriften, Links, Listen
-4. Experimentiert mit Farben und Abständen
+1. CSS-Datei im `` verlinken
+2. Grundschrift setzen (`font-family`, `line-height`, `color`)
+3. Überschriften, Links, Listen stylen
+4. Mit Farben und Abständen experimentieren
-**Ressource:** https://codecrispi.es/
+**Ressource:** https://codescripsi.es/
+- **Basics:** Alle machen
+- **Advanced:** Wer möchte
---
@@ -1037,24 +1007,17 @@ Oder gleichmäßig verteilt
```css
/* Zustände */
-a:hover { color: red; } /* Maus drüber */
-a:active { color: darkred; } /* Beim Klicken */
-a:visited { color: purple; } /* Bereits besucht */
-
-/* Formular */
+a:hover { color: red; }
+a:visited { color: purple; }
input:focus { border-color: blue; }
-input:disabled { opacity: 0.5; }
/* Struktur */
li:first-child { font-weight: bold; }
-li:last-child { border: none; }
li:nth-child(odd) { background: #eee; }
```
---
@@ -1062,26 +1025,18 @@ nth-child für Zebra-Streifen
# Pseudo-Elemente
```css
-/* Vor dem Inhalt */
.required::before {
content: "* ";
color: red;
}
-/* Nach dem Inhalt */
-blockquote::after {
- content: " – Unbekannt";
- font-style: italic;
-}
-
-/* Erste Zeile/Buchstabe */
-p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
+p::first-line { font-weight: bold; }
```
+**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
+
@@ -1089,34 +1044,22 @@ content nur bei ::before/::after
# Responsive Design
-**Media Queries: CSS je nach Bildschirmgröße**
+**Media Queries:** CSS je nach Bildschirmgröße
```css
-/* Standard (Mobile First) */
-.container {
- padding: 1rem;
-}
+/* Mobile First: Standard */
+.container { padding: 1rem; }
-/* Ab 768px Breite (Tablet) */
+/* Ab 768px (Tablet) */
@media (min-width: 768px) {
- .container {
- padding: 2rem;
- max-width: 720px;
- }
-}
-
-/* Ab 1024px Breite (Desktop) */
-@media (min-width: 1024px) {
- .container {
- max-width: 960px;
- }
+ .container { padding: 2rem; max-width: 720px; }
}
```
+**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
+
---
@@ -1352,7 +1295,7 @@ Variablen machen's einfach
4. Mindestens ein Kontaktformular
**Ressourcen:**
-- CSS lernen: https://codecrispi.es/
+- CSS lernen: https://codescripsi.es/
- Flexbox: https://flexboxfroggy.com/
- Grid: https://cssgridgarden.com/
@@ -1364,8 +1307,7 @@ Variablen machen's einfach
**Nächster Termin:** 24.01.2026 – JavaScript
-**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
-**Repository:** git.librete.ch/hdm/223015b
+**Kontakt:** mail@librete.ch
---