update termin 2 slides based on feedback

- fix hdm ip address (212.132.79.37)
- change website to codescripsi.es with basics/advanced
- change email to mail@librete.ch
- simplify overflow slides (http, css, pseudo elements)

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
 
 <!DOCTYPE html>
-<html>
+<html>...</html>
-...
-</html>
 ```
 
-**Status-Codes:**
+**Status-Codes:** 2xx Erfolg · 3xx Umleitung · 4xx Client-Fehler · 5xx Server-Fehler
-
-| 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 merken!
+200 OK, 404 Not Found, 500 Internal Error
-404 = Seite nicht gefunden
-500 = Server-Problem
 -->
 
 ---
@@ -475,20 +463,14 @@ POST = nicht idempotent
 
 # Hands-On: HTTP beobachten (20 Min)
 
-**Browser DevTools öffnen:**
+**DevTools öffnen:** `F12` (Win/Linux) · `Cmd+Option+I` (Mac)
-- Windows/Linux: `F12` oder `Strg+Shift+I`
-- Mac: `Cmd+Option+I`
 
 **Tab "Netzwerk" (Network):**
+1. Beliebige Webseite öffnen
+2. Requests beobachten
+3. Auf Request klicken → Headers & Response analysieren
 
-1. Öffnet eine beliebige Webseite
+**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...)
-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?
 
 ---
 
@@ -531,30 +513,23 @@ Separation of Concerns
 
 # CSS einbinden
 
-**Option 1: Externe Datei (empfohlen!)**
+**Option 1: Externe Datei** (empfohlen!)
 ```html
-<head>
 <link rel="stylesheet" href="style.css">
-</head>
 ```
 
-**Option 2: Im `<style>`-Tag**
+**Option 2: Style-Tag**
 ```html
-<head>
+<style>p { color: blue; }</style>
-    <style>
-        p { color: blue; }
-    </style>
-</head>
 ```
 
-**Option 3: Inline (vermeiden!)**
+**Option 3: Inline** (vermeiden!)
 ```html
-<p style="color: blue;">Text</p>
+<p style="color: blue;">...</p>
 ```
 
 <!--
 Externe Datei = wiederverwendbar, cachebar
-Inline nur für Debugging/Ausnahmen
 -->
 
 ---
@@ -830,19 +805,14 @@ vw/vh = Viewport (sichtbarer Bereich)
 
 **Erstellt `style.css` für eure HTML-Seite:**
 
-1. Verlinkt die CSS-Datei im `<head>`
+1. CSS-Datei im `<head>` verlinken
-2. Setzt eine Grundschrift:
+2. Grundschrift setzen (`font-family`, `line-height`, `color`)
-   ```css
+3. Überschriften, Links, Listen stylen
-   body {
+4. Mit Farben und Abständen experimentieren
-       font-family: system-ui, sans-serif;
-       line-height: 1.6;
-       color: #333;
-   }
-   ```
-3. Stylt Überschriften, Links, Listen
-4. Experimentiert mit Farben und Abständen
 
-**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:hover { color: red; }
-a:active { color: darkred; }   /* Beim Klicken */
+a:visited { color: purple; }
-a:visited { color: purple; }   /* Bereits besucht */
-
-/* Formular */
 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; }
 ```
 
 <!--
-Pseudo-Klassen = Zustände
+Pseudo-Klassen = Zustände, kein JavaScript nötig!
-Kein JavaScript nötig!
-nth-child für Zebra-Streifen
 -->
 
 ---
@@ -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
+
 <!--
-:: = Pseudo-Element
-: = Pseudo-Klasse
 content nur bei ::before/::after
 -->
 
@@ -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) */
+/* Mobile First: Standard */
-.container {
+.container { padding: 1rem; }
-    padding: 1rem;
-}
 
-/* Ab 768px Breite (Tablet) */
+/* Ab 768px (Tablet) */
 @media (min-width: 768px) {
-    .container {
+    .container { padding: 2rem; max-width: 720px; }
-        padding: 2rem;
-        max-width: 720px;
-    }
-}
-
-/* Ab 1024px Breite (Desktop) */
-@media (min-width: 1024px) {
-    .container {
-        max-width: 960px;
-    }
 }
 ```
 
+**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
+
 <!--
-Mobile First = Standard für klein
+Mobile First = Standard für klein, dann größere überschreiben
-Dann größere Screens überschreiben
-Breakpoints: 768px, 1024px, 1280px typisch
 -->
 
 ---
@@ -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
+**Kontakt:** mail@librete.ch
-**Repository:** git.librete.ch/hdm/223015b
 
 ---