diff --git a/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
index 8e36754..efb3db7 100644
--- a/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
+++ b/courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md
@@ -1276,8 +1276,238 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
 
 https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
 
+
 ---
 
+<!-- _class: lead -->
+
+# "Barrierefreiheit"
+## a11y – Accessibility
+
+---
+
+<!-- _class: klausur -->
+
+# Wie nutzen Menschen das Web?
+
+| Eingabe | Nutzungsweise |
+|---------|---------------|
+| **Maus** | Klicken, Scrollen |
+| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
+| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
+| **Sprachsteuerung** | "Klicke auf Anmelden" |
+| **Augensteuerung** | Eye-Tracking |
+| **Switch-Geräte** | Ein-/Aus-Schalter |
+
+→ **Nicht alle nutzen Maus + Bildschirm!**
+
+<!--
+ACCESSIBILITY (a11y): a + 11 Buchstaben + y
+STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
+ARTEN VON EINSCHRÄNKUNGEN:
+- Permanent: Blindheit, Taubheit, motorische Einschränkungen
+- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
+- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
+ASSISTIVE TECHNOLOGIEN:
+- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
+- Braillezeilen: Taktile Ausgabe für Blinde
+- Switch-Geräte: Für motorische Einschränkungen
+- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
+WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
+EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
+PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# Warum "Barrierefreiheit"?
+
+**Rechtlich:**
+- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
+- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
+
+**Ethisch:**
+- Teilhabe für alle Menschen
+- Digitale Inklusion
+
+**Praktisch:**
+- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
+- Größerer Markt (~15% der Bevölkerung)
+
+<!--
+RECHTLICHER RAHMEN:
+- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
+- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
+- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
+- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
+- Strafen: Bis zu 100.000€ Bußgeld möglich
+CURB-CUT-EFFEKT:
+- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
+- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
+- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
+BUSINESS CASE:
+- 15% Zielgruppe (Menschen mit Behinderung)
+- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
+- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
+PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
+-->
+
+---
+
+# WCAG: Der Standard
+
+**W**eb **C**ontent **A**ccessibility **G**uidelines
+
+**4 Prinzipien (POUR):**
+
+| Prinzip | Bedeutung |
+|---------|-----------|
+| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
+| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
+| **Understandable** | Verständlich – Inhalte müssen klar sein |
+| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
+
+<!--
+WCAG vom W3C (World Wide Web Consortium)
+Aktuelle Version: WCAG 2.2 (2023)
+Level: A (minimal), AA (Standard), AAA (optimal)
+Gesetzlich meist Level AA gefordert
+-->
+
+---
+
+# Perceivable: Wahrnehmbar
+
+**Textalternativen für Nicht-Text:**
+```html
+<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
+```
+
+**Kontrast:** Mindestens 4.5:1 für Text
+
+**Untertitel:** Videos brauchen Captions
+
+**Responsive:** Inhalte bei 200% Zoom nutzbar
+
+<!--
+Leeres alt="" für dekorative Bilder
+Contrast-Checker: WebAIM Contrast Checker
+Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
+-->
+
+---
+
+# Operable: Bedienbar
+
+**Tastaturzugänglich:**
+```css
+/* Fokus-Indikator NIE entfernen! */
+:focus {
+    outline: 2px solid blue;
+    outline-offset: 2px;
+}
+
+/* Wenn custom styling: */
+button:focus-visible {
+    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+}
+```
+
+**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
+
+**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
+
+<!--
+Tab-Reihenfolge = DOM-Reihenfolge
+Skip-Links: "Zum Hauptinhalt springen"
+:focus-visible = nur bei Tastatur-Navigation
+-->
+
+---
+
+# Understandable: Verständlich
+
+**Sprache angeben:**
+```html
+<html lang="de">
+```
+
+**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
+
+**Fehler erklären:**
+```html
+<input type="email" aria-describedby="email-error">
+<p id="email-error" role="alert">
+    Bitte geben Sie eine gültige E-Mail-Adresse ein.
+</p>
+```
+
+<!--
+Screenreader nutzen lang für korrekte Aussprache
+Konsistenz reduziert kognitive Last
+Fehlermeldungen: konkret, hilfreich, am Feld
+-->
+
+---
+
+# Robust: Technisch solide
+
+**Semantisches HTML:**
+```html
+<!-- Schlecht -->
+<div class="button" onclick="...">Klick mich</div>
+
+<!-- Gut -->
+<button type="button">Klick mich</button>
+```
+
+**ARIA nur wenn nötig:**
+```html
+<!-- Nötig: Custom-Komponente -->
+<div role="tablist" aria-label="Produktkategorien">
+    <button role="tab" aria-selected="true">Schuhe</button>
+    <button role="tab" aria-selected="false">Jacken</button>
+</div>
+```
+
+<!--
+ARIA = Accessible Rich Internet Applications
+Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
+button hat eingebaute Tastatur-Unterstützung
+div-Button braucht JavaScript für Enter/Space
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# Barrieren im Netz vermeiden (a11y)
+
+**Tastatur-Test:**
+- Alle Funktionen nur mit Tab + Enter nutzbar?
+- Fokus immer sichtbar?
+- Logische Tab-Reihenfolge?
+
+**Screenreader-Test:**
+- VoiceOver (Mac): `Cmd + F5`
+- NVDA (Windows): Gratis-Download
+
+**Tools:**
+- axe DevTools, WAVE (Browser-Extensions)
+- Lighthouse (in Chrome DevTools)
+
+<!--
+Automatische Tests finden ~30% der Probleme
+Manuelles Testen unverzichtbar
+Echte NutzerInnen einbeziehen = Gold-Standard
+-->
+
+
+---
+
+
 <!-- _class: lead -->
 
 # Fragen & Diskussion
diff --git a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
index 0851cd4..12be498 100644
--- a/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+++ b/courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
@@ -129,17 +129,17 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Teil 1: Rechner verbinden
-## Netzwerk-Grundlagen
+# Teil 1: Grundbegriffe
+## Netzwerk und Internet
 
 ---
 
 # Warum Rechner verbinden?
 
-- Daten und Informationen teilen
-- Zusammenarbeiten & Kollaboration
-- Kommunizieren
-- Ressourcen teilen (Drucker, Speicher, andere Geräte)
+* Daten und Informationen teilen
+* Zusammenarbeiten & Kollaboration
+* Ressourcen teilen (Drucker, Speicher, andere Geräte)
+* **Kommunikation**
 
 ---
 
@@ -158,72 +158,6 @@ Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
 
 ---
 
-<!-- _class: klausur -->
-
-# Das OSI-Modell
-
-**7 Schichten der Netzwerkkommunikation:**
-
-| Schicht | Name | Beispiel |
-|---------|------|----------|
-| 7 | Anwendung | HTTP, FTP, SMTP |
-| 6 | Darstellung | Verschlüsselung, Kompression |
-| 5 | Sitzung | Sessions |
-| 4 | Transport | TCP, UDP |
-| 3 | Vermittlung | IP, Routing |
-| 2 | Sicherung | Ethernet, MAC |
-| 1 | Bitübertragung | Kabel, WLAN |
-
-<!--
-OSI-MODELL: Open Systems Interconnection (1984, ISO 7498)
-ZWECK: Standardisierte Beschreibung von Netzwerkkommunikation
-7 SCHICHTEN (von unten nach oben):
-1. Physical: Bits über Kabel/Funk (Ethernet-Kabel, WLAN-Frequenzen)
-2. Data Link: Frames, MAC-Adressen (Ethernet, Switch)
-3. Network: Pakete, IP-Adressen, Routing (Router)
-4. Transport: Segmente, Ports, Zuverlässigkeit (TCP/UDP)
-5. Session: Verbindungsmanagement (selten separat implementiert)
-6. Presentation: Datenformat, Verschlüsselung (TLS gehört hierher)
-7. Application: Nutzer-Protokolle (HTTP, SMTP, FTP)
-MERKSATZ: "Please Do Not Throw Salami Pizza Away" (Physical→Application)
-REALITÄT: OSI ist Theorie, TCP/IP ist Praxis (fasst Schichten zusammen)
-PRÜFUNGSRELEVANT: 7 Schichten mit Beispielen, Unterschied OSI vs. TCP/IP
--->
-
----
-
-<!-- _class: klausur -->
-
-# TCP/IP: Die Praxis
-
-**Das Internet nutzt TCP/IP (4 Schichten):**
-
-| TCP/IP | Entspricht OSI | Protokolle |
-|--------|----------------|------------|
-| Anwendung | 5-7 | HTTP, DNS, SMTP |
-| Transport | 4 | TCP, UDP |
-| Internet | 3 | IP |
-| Netzzugang | 1-2 | Ethernet, WLAN |
-
-**TCP/IP = Transmission Control Protocol / Internet Protocol**
-
-<!--
-TCP/IP-STACK: Praktische Implementierung des Internets
-4 SCHICHTEN statt 7:
-1. Network Access (OSI 1-2): Ethernet, WLAN, physische Übertragung
-2. Internet (OSI 3): IP-Protokoll, Routing, Adressierung
-3. Transport (OSI 4): TCP (zuverlässig) oder UDP (schnell)
-4. Application (OSI 5-7): HTTP, DNS, SMTP, SSH
-TCP vs. UDP:
-- TCP: Verbindungsorientiert, garantierte Zustellung, Reihenfolge (Web, E-Mail)
-- UDP: Verbindungslos, schneller, keine Garantie (Video-Streaming, Gaming, DNS)
-IP-PROTOKOLL: Adressierung + Routing, "Best Effort" (keine Garantie)
-ENTSTEHUNG: ARPANET 1969, TCP/IP 1983 (Flag Day)
-PRÜFUNGSRELEVANT: 4 Schichten, TCP vs. UDP Unterschied, wann welches Protokoll
--->
-
----
-
 # IP-Adressen
 
 **Jeder Rechner im Netzwerk braucht eine Adresse**
@@ -254,9 +188,6 @@ NAT = Network Address Translation
 | `192.168.x.x` | Private Adressen (Heimnetz) |
 | `10.x.x.x` | Private Adressen (Firmen) |
 
-**Localhost = "Ich selbst"**
-→ Perfekt für Web-Entwicklung!
-
 <!--
 Localhost für lokale Entwicklung
 Private IPs werden nicht im Internet geroutet
@@ -308,32 +239,198 @@ Pakete können verschiedene Wege nehmen
 Adaptives Routing bei Auslastung
 -->
 
+
 ---
 
 <!-- _class: lead -->
 
-# Teil 1: Netzwerke
-## Wie Daten reisen
+# DNS: Domain Name System
+## Das Telefonbuch des Internets
 
 ---
 
-# Wiederholung: OSI-Modell
+# Das Problem
 
-**Merksatz:** "**A**lle **d**eutschen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
+**Menschen:** `www.hdm-stuttgart.de`
+**Computer:** `https://212.132.79.37:443`
 
-| Schicht | Name | Merksatz |
-|---------|------|----------|
-| 7 | **A**nwendung | **A**lle |
-| 6 | **D**arstellung | **d**eutschen |
-| 5 | **S**itzung | **S**tudierenden |
-| 4 | **T**ransport | **t**rinken |
-| 3 | **V**ermittlung | **v**erschiedene |
-| 2 | **S**icherung | **S**orten |
-| 1 | **B**itübertragung | **B**ier/Brause |
+**DNS** = Domain Name System
+→ Übersetzt Namen in IP-Adressen
 
 <!--
-Von oben nach unten: 7 bis 1
-Merksatz hilft beim Behalten
+Niemand merkt sich IP-Adressen
+DNS macht Internet benutzbar
+-->
+
+---
+
+# DNS-Hierarchie
+
+```
+                  (Root)
+                     . 
+                   / | \
+                 /   |   \
+               .de .org .com
+               /           \
+         hdm-stuttgart   google
+              |            |
+            www           mail
+```
+
+**FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
+
+<!--
+Hierarchisch wie Dateisystem
+Root-Server weltweit verteilt (13 Cluster)
+TLD = Top Level Domain (.de, .com, .org)
+FQDN = Fully Qualified Domain Name
+-->
+
+---
+
+# DNS-Auflösung
+
+```
+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 = 212.132.79.37"
+5. Resolver cached Antwort
+6. Browser verbindet zu 212.132.79.37
+```
+
+**Caching:** Antworten werden gespeichert
+→ Schneller bei wiederholten Anfragen
+
+<!--
+Rekursive Auflösung
+DNS-Cache auf vielen Ebenen (Browser, OS, Router, ISP)
+TTL = Time To Live (wie lange cachen)
+-->
+
+---
+
+# DNS-Records
+
+| Typ | Bedeutung | Beispiel |
+|-----|-----------|----------|
+| **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` |
+| **TXT** | Text (Verifikation) | `"v=spf1..."` |
+
+<!--
+dig oder nslookup zum Nachschauen
+A = Address
+CNAME = Canonical Name (Weiterleitung)
+MX = Mail Exchange
+-->
+
+---
+
+# URLs & Domains
+
+**URL** = Uniform Resource Locator
+
+```
+https://www.example.com:443/pfad/seite.html?suche=test#kapitel2
+└─┬──┘   └──────┬──────┘└┬┘ └──────┬──────┘ └───┬────┘ └──┬───┘
+Protokoll    Hostname   Port     Pfad         Query     Fragment
+```
+
+| Begriff | Erklärung |
+|---------|-----------|
+| **Domain** | `example.com` (registrierter Name) |
+| **Subdomain** | `www`, `mail`, `api` (Prefix) |
+| **Hostname** | `www.example.com` (vollständig) |
+| **Port** | Standard: 80 (HTTP), 443 (HTTPS) |
+
+<!--
+URL = Adresse einer Ressource im Web
+Hostname = Domain + optionale Subdomain
+Port wird oft weggelassen (Standardports)
+Fragment (#) geht nicht an Server, nur Browser
+Query-String für Parameter
+-->
+
+---
+
+<!-- _class: lead -->
+
+# Netzwerke
+## Theorie und Praxis
+
+<!-- "Netzwerke sind super komplex und alles hier gezeigte ist bloß eine stark vereinfachte Schematisierung" -->
+
+
+---
+
+<!-- _class: klausur -->
+
+# Das OSI-Modell: Die Theorie
+
+**7 Schichten der Netzwerkkommunikation:**
+
+| Schicht | Name | Beispiel |
+|---------|------|----------|
+| **7** | **Anwendung** | **HTTP/S, FTP, SMTP** |
+| 6 | Darstellung | Verschlüsselung, Kompression |
+| 5 | Sitzung | Sessions |
+| 4 | Transport | TCP, UDP |
+| 3 | Vermittlung | IP, Routing |
+| 2 | Sicherung | Ethernet, MAC |
+| 1 | Bitübertragung | Kabel, WLAN |
+
+<!--
+OSI-MODELL: Open Systems Interconnection (1984, ISO 7498)
+ZWECK: Standardisierte Beschreibung von Netzwerkkommunikation
+7 SCHICHTEN (von unten nach oben):
+1. Physical: Bits über Kabel/Funk (Ethernet-Kabel, WLAN-Frequenzen)
+2. Data Link: Frames, MAC-Adressen (Ethernet, Switch)
+3. Network: Pakete, IP-Adressen, Routing (Router)
+4. Transport: Segmente, Ports, Zuverlässigkeit (TCP/UDP)
+5. Session: Verbindungsmanagement (selten separat implementiert)
+6. Presentation: Datenformat, Verschlüsselung (TLS gehört hierher)
+7. Application: Nutzer-Protokolle (HTTP, SMTP, FTP)
+MERKSATZ: "Please Do Not Throw Salami Pizza Away" (Physical→Application)
+REALITÄT: OSI ist Theorie, TCP/IP ist Praxis (fasst Schichten zusammen)
+PRÜFUNGSRELEVANT: 7 Schichten mit Beispielen, Unterschied OSI vs. TCP/IP
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# TCP/IP: Die Praxis
+
+**Das Internet nutzt TCP/IP (4 Schichten):**
+
+| TCP/IP | Entspricht OSI | Protokolle |
+|--------|----------------|------------|
+| **Anwendung** | **5-7** | **HTTP, DNS, SMTP** |
+| Transport | 4 | TCP, UDP |
+| Internet | 3 | IP |
+| Netzzugang | 1-2 | Ethernet, WLAN |
+
+**TCP/IP = Transmission Control Protocol / Internet Protocol**
+
+https://www.ietf.org/rfc/rfc793.txt
+
+<!--
+TCP/IP-STACK: Praktische Implementierung des Internets
+4 SCHICHTEN statt 7:
+1. Network Access (OSI 1-2): Ethernet, WLAN, physische Übertragung
+2. Internet (OSI 3): IP-Protokoll, Routing, Adressierung
+3. Transport (OSI 4): TCP (zuverlässig) oder UDP (schnell)
+4. Application (OSI 5-7): HTTP, DNS, SMTP, SSH
+TCP vs. UDP:
+- TCP: Verbindungsorientiert, garantierte Zustellung, Reihenfolge (Web, E-Mail)
+- UDP: Verbindungslos, schneller, keine Garantie (Video-Streaming, Gaming, DNS)
+IP-PROTOKOLL: Adressierung + Routing, "Best Effort" (keine Garantie)
+ENTSTEHUNG: ARPANET 1969, TCP/IP 1983 (Flag Day)
+PRÜFUNGSRELEVANT: 4 Schichten, TCP vs. UDP Unterschied, wann welches Protokoll
 -->
 
 ---
@@ -369,6 +466,7 @@ Internet nutzt TCP/IP
 
 ---
 
+
 # Schicht 1: Bitübertragung
 
 **Physikalische Übertragung von Bits**
@@ -469,10 +567,12 @@ UDP für Echtzeit (Video-Call, Gaming)
 
 # TCP: 3-Way-Handshake
 
+### Verbindungsorientiert
+
 ```
 Client                          Server
    │                               │
-   │──── SYN (Seq=100) ──────────>│
+   │──── SYN (Seq=100) ───────────>│
    │                               │
    │<─── SYN-ACK (Seq=300, Ack=101)│
    │                               │
@@ -501,7 +601,7 @@ ACK bestätigt Empfang
 - **Synchronisation** → Wiederaufnahme nach Abbruch
 
 **Beispiele:**
-- Web-Sessions (Cookies, Tokens)
+- Web-Sessions (Cookies, Tokens, OAuth)
 - RPC (Remote Procedure Call)
 - NetBIOS
 
@@ -569,118 +669,25 @@ HTTPS = HTTP + TLS: Verschlüsselung, Authentifizierung, Integrität
 PRÜFUNGSRELEVANT: Wichtige Ports auswendig, HTTP vs. HTTPS, was macht DNS
 -->
 
----
-
-<!-- _class: lead -->
-
-# DNS: Das Telefonbuch des Internets
 
 ---
 
-# Das Problem
+# Merksatz: OSI-Modell
 
-**Menschen:** `www.hdm-stuttgart.de`
-**Computer:** `212.132.79.37`
+"**A**lle **d**ualen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
 
-**DNS** = Domain Name System
-→ Übersetzt Namen in IP-Adressen
+| Schicht | Name | Merksatz |
+|---------|------|----------|
+| 7 | **A**nwendung | **A**lle |
+| 6 | **D**arstellung | **d**ualen |
+| 5 | **S**itzung | **S**tudierenden |
+| 4 | **T**ransport | **t**rinken |
+| 3 | **V**ermittlung | **v**erschiedene |
+| 2 | **S**icherung | **S**orten |
+| 1 | **B**itübertragung | **B**ier/Brause |
 
 <!--
-Niemand merkt sich IP-Adressen
-DNS macht Internet benutzbar
--->
-
----
-
-# DNS-Hierarchie
-
-```
-                  (Root)
-                     . 
-                   / | \
-                 /   |   \
-               .de .org .com
-               /           \
-         hdm-stuttgart   google
-              |            |
-            www           mail
-```
-
-**FQDN:** `www.hdm-stuttgart.de.` (mit Punkt am Ende!)
-
-<!--
-Hierarchisch wie Dateisystem
-Root-Server weltweit verteilt (13 Cluster)
-TLD = Top Level Domain (.de, .com, .org)
-FQDN = Fully Qualified Domain Name
--->
-
----
-
-# DNS-Auflösung
-
-```
-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 = 212.132.79.37"
-5. Resolver cached Antwort
-6. Browser verbindet zu 212.132.79.37
-```
-
-**Caching:** Antworten werden gespeichert
-→ Schneller bei wiederholten Anfragen
-
-<!--
-Rekursive Auflösung
-DNS-Cache auf vielen Ebenen (Browser, OS, Router, ISP)
-TTL = Time To Live (wie lange cachen)
--->
-
----
-
-# DNS-Records
-
-| Typ | Bedeutung | Beispiel |
-|-----|-----------|----------|
-| **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` |
-| **TXT** | Text (Verifikation) | `"v=spf1..."` |
-
-<!--
-dig oder nslookup zum Nachschauen
-A = Address
-CNAME = Canonical Name (Weiterleitung)
-MX = Mail Exchange
--->
-
----
-
-# URLs & Domains
-
-**URL** = Uniform Resource Locator
-
-```
-https://www.example.com:443/pfad/seite.html?suche=test#kapitel2
-└─┬──┘   └──────┬──────┘└┬┘ └──────┬──────┘ └───┬────┘ └──┬───┘
-Protokoll    Hostname   Port     Pfad         Query     Fragment
-```
-
-| Begriff | Erklärung |
-|---------|-----------|
-| **Domain** | `example.com` (registrierter Name) |
-| **Subdomain** | `www`, `mail`, `api` (Prefix) |
-| **Hostname** | `www.example.com` (vollständig) |
-| **Port** | Standard: 80 (HTTP), 443 (HTTPS) |
-
-<!--
-URL = Adresse einer Ressource im Web
-Hostname = Domain + optionale Subdomain
-Port wird oft weggelassen (Standardports)
-Fragment (#) geht nicht an Server, nur Browser
-Query-String für Parameter
+Von oben nach unten: 7 bis 1
 -->
 
 ---
@@ -1086,233 +1093,6 @@ vw/vh = Viewport (sichtbarer Bereich)
 
 <!-- _class: lead -->
 
-# "Barrierefreiheit"
-## a11y – Accessibility
-
----
-
-<!-- _class: klausur -->
-
-# Wie nutzen Menschen das Web?
-
-| Eingabe | Nutzungsweise |
-|---------|---------------|
-| **Maus** | Klicken, Scrollen |
-| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
-| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
-| **Sprachsteuerung** | "Klicke auf Anmelden" |
-| **Augensteuerung** | Eye-Tracking |
-| **Switch-Geräte** | Ein-/Aus-Schalter |
-
-→ **Nicht alle nutzen Maus + Bildschirm!**
-
-<!--
-ACCESSIBILITY (a11y): a + 11 Buchstaben + y
-STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO)
-ARTEN VON EINSCHRÄNKUNGEN:
-- Permanent: Blindheit, Taubheit, motorische Einschränkungen
-- Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung
-- Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand)
-ASSISTIVE TECHNOLOGIEN:
-- Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell)
-- Braillezeilen: Taktile Ausgabe für Blinde
-- Switch-Geräte: Für motorische Einschränkungen
-- Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant
-WCAG: Web Content Accessibility Guidelines (A, AA, AAA)
-EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend!
-PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
--->
-
----
-
-<!-- _class: klausur -->
-
-# Warum "Barrierefreiheit"?
-
-**Rechtlich:**
-- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
-- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
-
-**Ethisch:**
-- Teilhabe für alle Menschen
-- Digitale Inklusion
-
-**Praktisch:**
-- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
-- Größerer Markt (~15% der Bevölkerung)
-
-<!--
-RECHTLICHER RAHMEN:
-- European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft
-- Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books
-- BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen)
-- BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA)
-- Strafen: Bis zu 100.000€ Bußgeld möglich
-CURB-CUT-EFFEKT:
-- Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern
-- Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen
-- Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen
-BUSINESS CASE:
-- 15% Zielgruppe (Menschen mit Behinderung)
-- +20% ältere Menschen (Sehschwäche, motorische Einschränkungen)
-- SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google
-PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case
--->
-
----
-
-# WCAG: Der Standard
-
-**W**eb **C**ontent **A**ccessibility **G**uidelines
-
-**4 Prinzipien (POUR):**
-
-| Prinzip | Bedeutung |
-|---------|-----------|
-| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
-| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
-| **Understandable** | Verständlich – Inhalte müssen klar sein |
-| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
-
-<!--
-WCAG vom W3C (World Wide Web Consortium)
-Aktuelle Version: WCAG 2.2 (2023)
-Level: A (minimal), AA (Standard), AAA (optimal)
-Gesetzlich meist Level AA gefordert
--->
-
----
-
-# Perceivable: Wahrnehmbar
-
-**Textalternativen für Nicht-Text:**
-```html
-<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
-```
-
-**Kontrast:** Mindestens 4.5:1 für Text
-
-**Untertitel:** Videos brauchen Captions
-
-**Responsive:** Inhalte bei 200% Zoom nutzbar
-
-<!--
-Leeres alt="" für dekorative Bilder
-Contrast-Checker: WebAIM Contrast Checker
-Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
--->
-
----
-
-# Operable: Bedienbar
-
-**Tastaturzugänglich:**
-```css
-/* Fokus-Indikator NIE entfernen! */
-:focus {
-    outline: 2px solid blue;
-    outline-offset: 2px;
-}
-
-/* Wenn custom styling: */
-button:focus-visible {
-    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
-}
-```
-
-**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
-
-**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
-
-<!--
-Tab-Reihenfolge = DOM-Reihenfolge
-Skip-Links: "Zum Hauptinhalt springen"
-:focus-visible = nur bei Tastatur-Navigation
--->
-
----
-
-# Understandable: Verständlich
-
-**Sprache angeben:**
-```html
-<html lang="de">
-```
-
-**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
-
-**Fehler erklären:**
-```html
-<input type="email" aria-describedby="email-error">
-<p id="email-error" role="alert">
-    Bitte geben Sie eine gültige E-Mail-Adresse ein.
-</p>
-```
-
-<!--
-Screenreader nutzen lang für korrekte Aussprache
-Konsistenz reduziert kognitive Last
-Fehlermeldungen: konkret, hilfreich, am Feld
--->
-
----
-
-# Robust: Technisch solide
-
-**Semantisches HTML:**
-```html
-<!-- Schlecht -->
-<div class="button" onclick="...">Klick mich</div>
-
-<!-- Gut -->
-<button type="button">Klick mich</button>
-```
-
-**ARIA nur wenn nötig:**
-```html
-<!-- Nötig: Custom-Komponente -->
-<div role="tablist" aria-label="Produktkategorien">
-    <button role="tab" aria-selected="true">Schuhe</button>
-    <button role="tab" aria-selected="false">Jacken</button>
-</div>
-```
-
-<!--
-ARIA = Accessible Rich Internet Applications
-Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
-button hat eingebaute Tastatur-Unterstützung
-div-Button braucht JavaScript für Enter/Space
--->
-
----
-
-<!-- _class: klausur -->
-
-# Barrieren im Netz vermeiden (a11y)
-
-**Tastatur-Test:**
-- Alle Funktionen nur mit Tab + Enter nutzbar?
-- Fokus immer sichtbar?
-- Logische Tab-Reihenfolge?
-
-**Screenreader-Test:**
-- VoiceOver (Mac): `Cmd + F5`
-- NVDA (Windows): Gratis-Download
-
-**Tools:**
-- axe DevTools, WAVE (Browser-Extensions)
-- Lighthouse (in Chrome DevTools)
-
-<!--
-Automatische Tests finden ~30% der Probleme
-Manuelles Testen unverzichtbar
-Echte NutzerInnen einbeziehen = Gold-Standard
--->
-
----
-
-<!-- _class: lead -->
-
 # Teil 3: Layouts (optional)
 ## Flexbox & mehr