223015b+c klausurfragen: sose26-klausurset kuratiert + wording-fixes

- 223015c: G7 id-selektor neu (ersetzt spezifität-ansatz), B10 encapsulation
  + E3 gesamtablauf disabled (tcp-handshake nie ausreichend behandelt),
  G6 ohne hsl + farbname/color code, H6 curb-cut-wording (genau zwei
  beispiele, klickflächen/kontrast/tab+enter), H7 attribute statt tags
  + screenreader-distraktor + tastatur-wording, B7b dns: domain->ip
- 223015b: J22 ohne buch-lesen + überwiegend unabhängig, K2 sie-form
  + taschenrechner-hinweis, strg/cmd+f
- .gitignore: slides/**/*-INTERN.md (lokale klausur-previews, nie deployen)
- 223015b/CLAUDE.md: deck-doku + downstream-verweis aufs klausur-repo

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

slides/223015c/klausurfragen.md

@@ -416,7 +416,7 @@ Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu.
 **Was ist das? / Beispiel (ungeordnet):**
 - Ein netzwerkfähiger Rechner (Laptop, Smartphone)
 - Menschenlesbarer Name – z. B. `hdm-stuttgart.de`
-- „Telefonbuch": übersetzt einen Namen in eine IP
+- „Telefonbuch": übersetzt eine Domain in eine IP
 - Nummer eines Programms bzw. Dienstes – z. B. `80`, `443`, `22`
 - Hardware-Adresse der Netzwerkkarte – z. B. `aa:bb:cc:dd:ee:ff`
 - Globale Adresse im Internet – z. B. `212.132.79.37`
@@ -435,11 +435,11 @@ Ordnen Sie jedem Begriff seine Beschreibung bzw. sein Beispiel zu.
 | IP-Adresse | Globale Adresse im Internet – z. B. `212.132.79.37` |
 | MAC-Adresse | Hardware-Adresse der Netzwerkkarte – z. B. `aa:bb:cc:dd:ee:ff` |
 | Port | Nummer eines Programms bzw. Dienstes – z. B. `80`, `443`, `22` |
-| DNS | „Telefonbuch": übersetzt einen Namen in eine IP |
+| DNS | „Telefonbuch": übersetzt eine Domain in eine IP |
 | Domain | Menschenlesbarer Name – z. B. `hdm-stuttgart.de` |
 | Host | Ein netzwerkfähiger Rechner (Laptop, Smartphone) |
 
-> **Feedback:** IP = global, MAC = lokal (Hardware), Port = Programm auf dem Host, DNS = Name→IP, Domain = der lesbare Name, Host = der Rechner selbst.
+> **Feedback:** IP = global, MAC = lokal (Hardware), Port = Programm auf dem Host, DNS = Domain→IP, Domain = der lesbare Name, Host = der Rechner selbst.
 
 ---
 
@@ -544,6 +544,8 @@ Ordnen Sie jeder Portnummer den passenden Dienst zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### B10 – Encapsulation: Reihenfolge sortieren
 **Thema:** Encapsulation – Reihenfolge
 **Punkte:** 2
@@ -551,21 +553,6 @@ Ordnen Sie jeder Portnummer den passenden Dienst zu.
 
 Sortieren Sie die Dateneinheiten in der Reihenfolge, wie sie beim Senden entstehen (von innen nach außen):
 
-- Frame
-- Paket
-- Segment
-- Daten
-
-
----
-
-### B10 – Encapsulation: Reihenfolge sortieren (Lösung)
-**Thema:** Encapsulation – Reihenfolge
-**Punkte:** 2
-**Typ:** `[ORDER]`
-
-Sortieren Sie die Dateneinheiten in der Reihenfolge, wie sie beim Senden entstehen (von innen nach außen):
-
 1. Daten
 2. Segment
 3. Paket
@@ -948,6 +935,8 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor*
 
 ---
 
+<!-- _class: disable -->
+
 ### E3 – Gesamtablauf: DNS, TCP, HTTP erklären
 **Thema:** Gesamtablauf – Schritte erklären
 **Punkte:** 3
@@ -955,16 +944,6 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor*
 
 Erklären Sie die drei Hauptphasen beim Aufruf einer Webseite: **DNS-Auflösung**, **TCP-Verbindungsaufbau** und **HTTP-Request/Response**. Beschreiben Sie für jede Phase: (1) was passiert, (2) warum sie vor der nächsten kommen muss.
 
-
----
-
-### E3 – Gesamtablauf: DNS, TCP, HTTP erklären (Lösung)
-**Thema:** Gesamtablauf – Schritte erklären
-**Punkte:** 3
-**Typ:** `[ESSAY]`
-
-Erklären Sie die drei Hauptphasen beim Aufruf einer Webseite: **DNS-Auflösung**, **TCP-Verbindungsaufbau** und **HTTP-Request/Response**. Beschreiben Sie für jede Phase: (1) was passiert, (2) warum sie vor der nächsten kommen muss.
-
 > **Musterlösung:** **DNS-Auflösung:** Der Domain-Name wird in eine IP-Adresse übersetzt. Muss zuerst kommen, weil TCP nur mit IP-Adressen arbeiten kann. **TCP-Verbindungsaufbau:** Der 3-Way-Handshake (SYN → SYN-ACK → ACK) baut eine zuverlässige Verbindung auf. Muss vor HTTP kommen, weil HTTP auf TCP aufsetzt und eine bestehende Verbindung braucht. **HTTP-Request/Response:** Der Browser sendet GET, der Server antwortet mit 200 OK + HTML. Kann erst nach TCP-Verbindung stattfinden.
 
 ---
@@ -1110,14 +1089,12 @@ Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu.
 - `#FF0000`
 - `rgb(255, 0, 0)`
 - `rgba(255, 0, 0, 0.5)`
-- `hsl(0, 100%, 50%)`
 
 **Notation (ungeordnet):**
-- HSL (Hue, Saturation, Lightness)
 - RGBA (RGB + Alpha/Transparenz)
 - RGB (Red Green Blue)
 - Hexadezimal
-- Schlüsselwort
+- Farbname / Color Code
 
 ---
 
@@ -1130,13 +1107,12 @@ Ordnen Sie jede Schreibweise für die Farbe Rot ihrer Notation zu.
 
 | Schreibweise | Notation |
 |---|---|
-| `red` | Schlüsselwort |
+| `red` | Farbname / Color Code |
 | `#FF0000` | Hexadezimal |
 | `rgb(255, 0, 0)` | RGB (Red Green Blue) |
 | `rgba(255, 0, 0, 0.5)` | RGBA (RGB + Alpha/Transparenz) |
-| `hsl(0, 100%, 50%)` | HSL (Hue, Saturation, Lightness) |
 
-> **Feedback:** Fünf Wege, dieselbe Farbe anzugeben. RGBA ergänzt RGB um einen Alpha-Kanal (Transparenz). HSL beschreibt Farbton, Sättigung und Helligkeit – intuitiver beim manuellen Anpassen.
+> **Feedback:** Vier Wege, dieselbe Farbe anzugeben. RGBA ergänzt RGB um einen Alpha-Kanal (Transparenz).
 
 ---
 
@@ -1156,7 +1132,7 @@ Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine
 - [ ] `#intro { color: red; }`
 - [ ] `.intro { color: red; }`
 - [ ] `p { color: red; }`
-- [ ] `p #intro { color: red; }`
+- [ ] `ul > li#intro { color: red; }`
 
 ---
 
@@ -1176,9 +1152,9 @@ Mit welchem CSS-Selektor sprechen Sie **gezielt dieses eine Element über seine
 - [x] **`#intro { color: red; }`**
 - [ ] `.intro { color: red; }`
 - [ ] `p { color: red; }`
-- [ ] `p #intro { color: red; }`
+- [ ] `ul > li#intro { color: red; }`
 
-> **Feedback:** Der ID-Selektor beginnt mit `#` und wählt das Element mit dem passenden `id`-Attribut; eine `id` darf pro Seite nur einmal vorkommen – er adressiert genau ein Element. Abgrenzung: `.intro` = Klassen-Selektor, `p` = Element-Selektor (trifft alle `<p>`), `p #intro` = Nachfahren-Selektor.
+> **Feedback:** Der ID-Selektor beginnt mit `#` und wählt das Element mit dem passenden `id`-Attribut; eine `id` darf pro Seite nur einmal vorkommen – er adressiert genau ein Element. Abgrenzung: `.intro` = Klassen-Selektor (die Klasse hier heißt zudem `text`), `p` = Element-Selektor (trifft alle `<p>`), `ul > li#intro` = Kind-Kombinator – trifft nur ein `<li>` mit dieser ID direkt unter einem `<ul>`, nie das gegebene `<p>`.
 
 ---
 
@@ -1238,7 +1214,7 @@ Ordnen Sie jedem Eingabegerät seine Nutzungsweise zu.
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat. Nennen Sie mindestens zwei konkrete Beispiele.
+Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops.
 
 
 ---
@@ -1248,9 +1224,9 @@ Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behind
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat. Nennen Sie mindestens zwei konkrete Beispiele.
+Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Benutzenden hat (**Curb-Cut-Effekt**). Nennen Sie genau zwei Beispiele aus der alltäglichen Benutzung von Computern und Laptops.
 
-> **Musterlösung:** Barrierefreiheit verbessert die UX für alle: (1) SEO – Alt-Texte und semantisches HTML helfen Suchmaschinen, die Seite besser zu verstehen → besseres Ranking. (2) Mobile – viele barrierefreie Prinzipien (z. B. große Tippflächen, guter Kontrast) sind auch für Mobilgeräte im Sonnenlicht wichtig. (3) Ältere Menschen – Sehschwäche, motorische Einschränkungen betreffen einen großen Anteil der Bevölkerung. Der Markt: ~15% Menschen mit Behinderung + ~20% ältere Menschen.
+> **Musterlösung (je zwei ausreichend):** Curb-Cut-Effekt = barrierefreie Gestaltung hilft allen. (1) Große Klickflächen – nötig bei motorischen Einschränkungen (z. B. Parkinson), helfen aber allen auf kleinen Screens oder mit Touchpad. (2) Guter Kontrast – nötig bei Sehschwäche, hilft aber allen bei Sonnenlicht auf dem Display. (3) Untertitel – nötig für Gehörlose, helfen allen in lauter Umgebung. (4) Tastaturbedienung (bspw. Navigation mit Tab- und Enter-Taste) – nötig bei motorischen Einschränkungen, nutzen auch Power-User (Shortcuts). Analogie: Bordsteinabsenkung für Rollstühle nutzt auch Kinderwagen und Rollkoffern.
 
 ---
 
@@ -1261,10 +1237,10 @@ Erklären Sie, warum barrierefreie Gestaltung nicht nur für Menschen mit Behind
 
 Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie?
 
-- [ ] Sie scrollen durch die Seite und schauen, ob sie schön aussieht.
-- [ ] Sie navigieren nur mit Tab + Enter durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?
-- [ ] Sie installieren einen Screenreader und lassen die Seite vorlesen.
-- [ ] Sie öffnen den Quellcode und zählen die barrierefreien Tags.
+- [ ] Sie scrollen durch die Seite und schauen, ob sie ansprechend gestaltet ist.
+- [ ] Sie navigieren nur mit Tab- und Enter-Taste durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?
+- [ ] Sie installieren einen Screenreader, lassen die Seite vorlesen und protokollieren, welche Elemente ignoriert wurden.
+- [ ] Sie öffnen den Quellcode und zählen die Barrierefreiheits-Attribute (bspw. `aria-label`).
 
 
 ---
@@ -1276,10 +1252,10 @@ Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technolog
 
 Sie möchten eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie zu installieren. Was machen Sie?
 
-- [ ] Sie scrollen durch die Seite und schauen, ob sie schön aussieht.
-- [x] **Sie navigieren nur mit Tab + Enter durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?**
-- [ ] Sie installieren einen Screenreader und lassen die Seite vorlesen.
-- [ ] Sie öffnen den Quellcode und zählen die barrierefreien Tags.
+- [ ] Sie scrollen durch die Seite und schauen, ob sie ansprechend gestaltet ist.
+- [x] **Sie navigieren nur mit Tab- und Enter-Taste durch die Seite und prüfen: Erreichen Sie alle Funktionen? Ist der Fokus immer sichtbar? Ist die Tab-Reihenfolge logisch?**
+- [ ] Sie installieren einen Screenreader, lassen die Seite vorlesen und protokollieren, welche Elemente ignoriert wurden.
+- [ ] Sie öffnen den Quellcode und zählen die Barrierefreiheits-Attribute (bspw. `aria-label`).
 
-> **Feedback:** Der Tastatur-Test ist der schnellste barrierefreie Selbsttest: Nur Tab + Enter benutzen. Wenn man so eine Funktion nicht erreicht kann, ist sie für Tastatur-Benutzende (und damit auch für Screenreader-Benutzende) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.
+> **Feedback:** Der Tastatur-Test ist der schnellste barrierefreie Selbsttest: Nur Tab- und Enter-Taste benutzen. Wenn man so eine Funktion nicht erreichen kann, ist sie für Tastatur-Benutzende (und damit auch für Screenreader-Benutzende) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.