fix layout and add disabled state for slides

slides/klausurfragen.md

@@ -1,6 +1,82 @@
-# 223015c – Fragenkatalog (Question Pool)
+---
-**IT-Grundlagen · HdM Stuttgart · M. Czechowski**
+marp: true
-**Ziel: ~100 Fragen, hohe Varianz, semestraler Los-Mechanismus**
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: ""
+footer: ""
+title: "Fragenkatalog - Klausurvorbereitung"
+---
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.325rem;
+}
+h1 {
+  color: #a02060;  /* darker raspberry */
+}
+section.invert h1 {
+  color: #fff;
+}
+h2 {
+  color: #1f2937;  /* dark gray, almost black */
+}
+pre {
+  background: #0f0f23;
+  color: #d63384;
+  border-radius: 8px;
+  border-left: 3px solid #d63384;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #d63384;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+section.klausur {
+  background: repeating-linear-gradient(
+    135deg,
+    #fce4ec,
+    #fce4ec 40px,
+    #fff 40px,
+    #fff 80px
+  ) !important;
+}
+@media print {
+  section.klausur {
+    background: #fce4ec !important;
+  }
+}
+section.aufgabe {
+  background: #fce4ec !important;
+}
+section.aufgabe footer {
+  display: none;
+}
+section.disable {
+  opacity: 0.4;
+}
+</style>FA2
+
+
+# Fragenkatalog – 223015b/223015c
+**IT-Grundlagen/Dateiformate · HdM Stuttgart · M. Czechowski**
+
+<small>Stand: 01.02.2026</small>
 
 ---
 
@@ -15,7 +91,8 @@
 > `[CLOZE]` = `cloze` (Lückentext, gemischt)`
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK A – Von-Neumann-Architektur
 
@@ -40,6 +117,8 @@ Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### A2 – Welche Komponente ist das?
 **Thema:** Von-Neumann – einzelne Komponente identifizieren
 **Punkte:** 1
@@ -56,24 +135,7 @@ Ein Programm besteht aus einer Folge von Befehlen. Eine Komponente der Von-Neuma
 
 ---
 
-### A3 – Bus-Typen identifizieren
+### A3 – Von-Neumann: Was wird ermöglicht?
-**Thema:** Von-Neumann – Bus-System im Detail
-**Punkte:** 2
-**Typ:** `[MATCH]`
-
-Ordne jedem Bus-Typ seine Funktion zu.
-
-| Bus | Funktion |
-|---|---|
-| Adressbus | Übermittelt die Speicheradresse, an der Daten gelesen/geschrieben werden |
-| Datenbus | Führt die eigentlichen Daten zwischen CPU und Speicher |
-| Steuerbus | Übermittelt Steuersignale (Lesen/Schreiben, Takt) |
-
-> **Feedback:** Adressbus = „Wo?", Datenbus = „Was?", Steuerbus = „Wie/Wann?"
-
----
-
-### A4 – Von-Neumann: Was wird ermöglicht?
 **Thema:** Von-Neumann – Bedeutung
 **Punkte:** 2
 **Typ:** `[MM]` (Mehrfachauswahl)
@@ -91,38 +153,7 @@ Welche der folgenden Aussagen werden durch die Von-Neumann-Architektur ermöglic
 
 ---
 
-### A5 – Von-Neumann vs. Harvard: Kern-Unterschied
+<!-- _class: lead -->
-**Thema:** Architektur-Vergleich
-**Punkte:** 1
-**Typ:** `[MC]`
-
-Mikrocontroller nutzen oft die Harvard-Architektur. Was unterscheidet sie von der Von-Neumann-Architektur?
-
-- [ ] Harvard hat mehr Prozessorkerne.
-- [x] **Bei Harvard sind Code- und Datenspeicher getrennt – bei Von-Neumann teilen sie den gleichen Speicher.** ✅
-- [ ] Harvard nutzt keinen Bus.
-- [ ] Der Unterschied liegt nur in der Taktfrequenz.
-
-> **Feedback:** Von-Neumann: ein gemeinsamer Speicher für Code und Daten. Harvard: zwei separate Speicher. Harvard ist schneller bei Echtzeitanwendungen (paralleler Zugriff), aber weniger flexibel.
-
----
-
-### A6 – Harvard: Wofür?
-**Thema:** Harvard-Architektur – Anwendung
-**Punkte:** 1
-**Typ:** `[MC]`
-
-Wo nutzt man die Harvard-Architektur?
-
-- [ ] In allen modernen Laptops und Smartphones.
-- [ ] In Cloud-Rechenzentren.
-- [x] **In Mikrokontrollern (z. B. Arduino) und DSPs – dort zählt Echtzeit.** ✅
-- [ ] Sie wurde durch Von-Neumann ersetzt und existiert nicht mehr.
-
-> **Feedback:** Harvard-Architektur = Nische für Echtzeit-Anwendungen. Mikrocontroller, Signalprozessoren. Der Rest der modernen Computerwelt: Von-Neumann (z. B. Laptop, Smartphone, Server, Spielkonsole).
-
----
----
 
 ## BLOCK B – Netzwerk-Grundlagen (TCP/IP)
 
@@ -136,13 +167,14 @@ Wo nutzt man die Harvard-Architektur?
 Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.
 
 | Protokoll | Schicht |
-|---|---|
+|----------|---|
-| HTTP | Anwendung |
+| HTTP     | Anwendung |
-| DNS | Anwendung |
+| DNS      | Anwendung |
-| TCP | Transport |
+| TCP      | Transport |
-| UDP | Transport |
+| UDP      | Transport |
-| IP | Internet |
+| IP       | Internet |
 | Ethernet | Netzzugang |
+| WLAN | Netzzugang |
 
 > **Feedback:** Anwendung: HTTP, DNS, SMTP, FTP. Transport: TCP, UDP. Internet: IP. Netzzugang: Ethernet, WLAN.
 
@@ -164,6 +196,8 @@ Das Protokoll IP arbeitet auf welcher TCP/IP-Schicht?
 
 ---
 
+<!-- _class: disable -->
+
 ### B3 – Schicht-Funktion beschreiben
 **Thema:** TCP/IP – Funktionen der Schichten
 **Punkte:** 2
@@ -194,7 +228,7 @@ Was identifiziert eine MAC-Adresse?
 ### B5 – Was ist eine IP-Adresse?
 **Thema:** IP-Adresse – Konzept
 **Punkte:** 1
-**Typ:** `[MC]`
+**Typ:** `[MC]`WiFi
 
 Was identifiziert eine IP-Adresse?
 
@@ -240,6 +274,8 @@ Ordne jeder Adresse ihre Beschreibung zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### B8 – MAC ändert sich, IP nicht: Warum?
 **Thema:** IP vs. MAC beim Routing – Transfer
 **Punkte:** 2
@@ -393,13 +429,14 @@ Welches Problem lösen Sequenznummern im TCP-Header konkret?
 
 - [ ] Sie verhindern, dass Hacker die Verbindung abhören können.
 - [x] **Pakete können in falscher Reihenfolge ankommen. Sequenznummern erlauben das korrekte Sortieren beim Empfänger.** ✅
-- [ ] Sie zählen, wie viele Benutzer gleichzeitig auf dem Server sind.
+- [ ] Sie zählen, wie viele BenutzerInnen gleichzeitig auf dem Server sind.
 - [ ] Sie bestimmen die maximale Größe einer Datei.
 
 > **Feedback:** IP-Pakete können unterschiedliche Routen nehmen → Part 3 kommt vor Part 1. TCP sortiert sie anhand der Sequenznummern wieder.
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK C – HTTP
 
@@ -428,7 +465,7 @@ Ordne jeder HTTP-Methode ihre Hauptfunktion zu.
 **Punkte:** 1
 **Typ:** `[MC]`
 
-Ein Nutzer erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet?
+Ein NutzerInnen erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Methode wird verwendet?
 
 - [x] **POST – eine neue Ressource wird erstellt.** ✅
 - [ ] PUT – PUT wird immer verwendet, wenn Daten gesendet werden.
@@ -444,7 +481,7 @@ Ein Nutzer erstellt einen neuen Blog-Eintrag auf einer Webseite. Welche HTTP-Met
 **Punkte:** 1
 **Typ:** `[MC]`
 
-Ein Nutzer aktualisiert sein Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode?
+Ein NutzerInnen aktualisiert sein Profilbild – das alte Bild wird durch ein neues ersetzt. Welche HTTP-Methode?
 
 - [ ] GET – GET kann auch Daten senden.
 - [x] **PUT – ersetzt eine existierende Ressource.** ✅
@@ -460,7 +497,7 @@ Ein Nutzer aktualisiert sein Profilbild – das alte Bild wird durch ein neues e
 **Punkte:** 1
 **Typ:** `[MC]`
 
-Ein Nutzer löscht einen von ihm erstellten Kommentar auf einer Webseite. Welche HTTP-Methode wird der Browser im Hintergrund verwenden?
+Ein NutzerInnen löscht einen von ihm erstellten Kommentar auf einer Webseite. Welche HTTP-Methode wird der Browser im Hintergrund verwenden?
 
 - [ ] GET – GET kann auch Löschvorgänge auslösen.
 - [ ] POST – POST ist die Standardmethode für alle Änderungen.
@@ -471,9 +508,7 @@ Ein Nutzer löscht einen von ihm erstellten Kommentar auf einer Webseite. Welche
 
 ---
 
----
+<!-- _class: disable -->
-
-
 
 ### C5 – GET: Warum nicht für Passwörter?
 **Thema:** HTTP-Methoden – GET Sicherheit
@@ -491,7 +526,7 @@ Warum sollte man niemals GET verwenden, um sensible Daten (z. B. ein Passwort) a
 
 ---
 
-### C6 – Status-Codes: Categorisierung
+### C6 – Status-Codes: Kategorisierung
 **Thema:** HTTP Status-Codes – Bedeutung der ersten Ziffer
 **Punkte:** 2
 **Typ:** `[MATCH]`
@@ -502,7 +537,7 @@ Ordne jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
 |---|---|
 | 2xx | Erfolg – die Anfrage wurde erfolgreich verarbeitet |
 | 3xx | Weiterleitung – die Ressource wurde verschoben |
-| 4xx | Client-Fehler – die Anfrage des Nutzers war fehlerhaft |
+| 4xx | Client-Fehler – die Anfrage des NutzerInnens war fehlerhaft |
 | 5xx | Server-Fehler – der Server hat ein Problem |
 
 > **Feedback:** Die erste Ziffer = Kategorie. 200 OK, 301 Moved, 404 Not Found, 503 Service Unavailable – die Kategorie sagt dir sofort, wo das Problem liegt.
@@ -514,7 +549,7 @@ Ordne jeder ersten Ziffer eines HTTP-Status-Codes ihre Bedeutung zu.
 **Punkte:** 1
 **Typ:** `[MC]`
 
-Du rufst eine Webseite auf und erhältst `HTTP/1.1 503 Service Unavailable`. Was bedeutet das?
+Du rufst eine Webseite auf und erhältst `HTTP/2 503 Service Unavailable`. Was bedeutet das?
 
 - [ ] Du hast die falsche URL eingegeben.
 - [ ] Der Server hat die Anfrage erfolgreich umgeleitet.
@@ -534,7 +569,7 @@ Du erhältst einen 404-Fehler. Wer ist für die Ursache verantwortlich?
 
 - [ ] Der Server ist abgestürzt.
 - [ ] Das Internet ist ausgefallen.
-- [x] **Der Client (Nutzer) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).** ✅
+- [x] **Der Client (NutzerInnen) – eine URL wurde angefordert, die nicht existiert (Tippfehler oder veralteter Link).** ✅
 - [ ] Der DNS-Server konnte den Namen nicht auflösen.
 
 > **Feedback:** 4xx = Client-Fehler. Der Server funktioniert perfekt, er sagt nur: „Das, was du anforderst, habe ich nicht."
@@ -569,7 +604,8 @@ Erkläre, warum HTTP-Status-Codes aus einer dreistelligen Zahl bestehen und was
 > **Musterlösung:** Die erste Ziffer kategorisiert die Antwort: 2xx = Erfolg, 3xx = Weiterleitung, 4xx = Client-Fehler, 5xx = Server-Fehler. Die restlichen zwei Ziffern spezifizieren den genauen Fall. Beispiele: 200 OK (Erfolg), 404 Not Found (Client-Fehler), 500 Internal Server Error (Server-Fehler). Diese Struktur ermöglicht es, allein aus dem Code zu verstehen, ob und wo ein Problem liegt – ohne die Antwort ganz lesen zu müssen.
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK D – DNS
 
@@ -628,7 +664,8 @@ Der DNS-Server übersetzt einen [[1:Domain-Namen]] in eine [[2:IP-Adresse]]. Die
 > **Feedback:** Die vier Lücken beschreiben den DNS-Ablauf vollständig: Was wird übersetzt, in was, wann, und warum.
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK E – Der Gesamtablauf (Zusammen)
 
@@ -666,9 +703,7 @@ Du gibst eine URL ein. Welche Reihenfolge ist korrekt?
 > **Feedback:** DNS immer zuerst. Dann TCP (Verbindung). Dann HTTP (Anfrage/Antwort).
 
 ---
-
+<!-- _class: lead -->
----
----
 
 ## BLOCK F – HTML-Grundlagen
 
@@ -679,14 +714,14 @@ Du gibst eine URL ein. Welche Reihenfolge ist korrekt?
 **Punkte:** 2
 **Typ:** `[MC]`
 
-Ein Student platziert `<title>` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das?
+Eine studierende Person platziert den `<title>` und `<meta name="description">` im `<body>` statt im `<head>`. Welche zwei Konsequenzen hat das?
 
 - [ ] Kein Problem – Browser ignorieren die Unterscheidung.
 - [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO, Screen-Reader können die Seite nicht richtig vorlesen.** ✅
 - [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet.
 - [ ] Nur das Fehlen von `<meta charset>` ist ein Problem.
 
-> **Feedback:** `<head>` = Metadaten (unsichtbar für den Nutzer, sichtbar für Browser/Maschinen). `<body>` = sichtbarer Inhalt. Title und description im Body werden nicht als Metadaten interpretiert.
+> **Feedback:** `<head>` = Metadaten (unsichtbar für die NutzerInnen, sichtbar für Browser/Maschinen). `<body>` = sichtbarer Inhalt. Title und description im Body werden nicht als Metadaten interpretiert.
 
 ---
 
@@ -706,7 +741,7 @@ Ordne jedem Element zu, ob es in `<head>` oder `<body>` gehört.
 | `<p>Text hier</p>` | `<body>` |
 | `<link rel="stylesheet">` | `<head>` |
 
-> **Feedback:** `<head>` = alles, was der Nutzer nicht direkt sieht (Metadaten, Styles, Titel). `<body>` = alles, was im Browser-Fenster angezeigt wird.
+> **Feedback:** `<head>` = alles, was der NutzerInnen nicht direkt sieht (Metadaten, Styles, Titel). `<body>` = alles, was im Browser-Fenster angezeigt wird.
 
 ---
 
@@ -725,7 +760,8 @@ Was ist die konkrete Konsequenz, wenn `<meta charset="UTF-8">` fehlt oder falsch
 > **Feedback:** Ohne charset nutzt der Browser oft einen Standard wie Latin-1. Bei UTF-8-gespeicherten Dateien → Umlaute und Emojis werden falsch dargestellt (Mojibake).
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK G – CSS
 
@@ -753,9 +789,6 @@ Ein Element `<p class="highlight" id="main">` wird angezeigt. Welche Farbe?
 
 ---
 
----
-
-
 
 ### G2 – Responsive Design: Mobile First – Welche Farbe?
 **Thema:** CSS Media Queries – Mobile First
@@ -778,6 +811,8 @@ Welche Farbe bei 900 px Breite?
 
 ---
 
+<!-- _class: disable -->
+
 ### G3 – Desktop First: `max-width` erkläre
 **Thema:** CSS Media Queries – Desktop First
 **Punkte:** 1
@@ -801,10 +836,11 @@ Wie würde eine Media Query für „Desktop First" aussehen (Standard ist Deskto
 
 Erkläre den Unterschied zwischen „Mobile First" und „Desktop First" beim Responsive Design. Welche Media-Query-Eigenschaft nutzt jeder Ansatz, und warum?
 
-> **Musterlösung:** Mobile First: Das Basis-CSS ist für kleine Bildschirme (Handy). Mit `min-width` werden schrittweise Anpassungen für größere Bildschirme hinzugefügt („ab dieser Breite"). Desktop First: Das Basis-CSS ist für große Bildschirme. Mit `max-width` werden Ausnahmen für kleinere Geräte definiert (「bis zu dieser Breite"). Mobile First wird bevorzugt, weil die Mehrheit der Nutzer mobil zugreift und es forced-mobile-first die Grundlage für progressive Enhancement bietet.
+> **Musterlösung:** Mobile First: Das Basis-CSS ist für kleine Bildschirme (Handy). Mit `min-width` werden schrittweise Anpassungen für größere Bildschirme hinzugefügt („ab dieser Breite"). Desktop First: Das Basis-CSS ist für große Bildschirme. Mit `max-width` werden Ausnahmen für kleinere Geräte definiert (「bis zu dieser Breite"). Mobile First wird bevorzugt, weil die Mehrheit der NutzerInnen mobil zugreift und es forced-mobile-first die Grundlage für progressive Enhancement bietet.
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK H – Barrierefreiheit
 
@@ -835,10 +871,10 @@ Ordne jedem Eingabegerät seine Nutzungsweise zu.
 **Punkte:** 2
 **Typ:** `[MC]`
 
-Ein Nutzer kann aktuell nur mit einer Hand sein Handy bedienen, weil er das Baby auf dem Arm trägt. Wie klassifiziert man diese Einschränkung?
+Eine NutzerInnen kann aktuell nur mit einer Hand sein Handy bedienen, weil er das Baby auf dem Arm trägt. Wie klassifiziert man diese Einschränkung?
 
 - [ ] Permanent – das ist eine bleibende körperliche Behinderung.
-- [ ] Temporär – der Nutzer ist verletzt und braucht Zeit zum Heilen.
+- [ ] Temporär – der NutzerInnen ist verletzt und braucht Zeit zum Heilen.
 - [x] **Situativ – die Einschränkung entsteht durch die aktuelle Umgebung/Situation, nicht durch eine Behinderung.** ✅
 - [ ] Diese Art von Einschränkung existiert nicht – Barrierefreiheit betrifft nur Menschen mit Behinderung.
 
@@ -846,6 +882,8 @@ Ein Nutzer kann aktuell nur mit einer Hand sein Handy bedienen, weil er das Baby
 
 ---
 
+<!-- _class: disable -->
+
 ### H3 – Curb-Cut-Effekt: Beispiel identifizieren
 **Thema:** Barrierefreiheit – Curb-Cut-Effekt
 **Punkte:** 1
@@ -862,14 +900,16 @@ Welches Beispiel demonstriert den Curb-Cut-Effekt?
 
 ---
 
-### H4 – Curb-Cut-Effekt: Erkläre
+<!-- _class: disable -->
+
+### H4 – Curb-Cut-Effekt: Erklärung
 **Thema:** Barrierefreiheit – Curb-Cut-Effekt Transfer
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
 Erkläre das Konzept des Curb-Cut-Effekts. Nenne zwei konkrete Web-Beispiele und erkläre jeweils, wer die ursprüngliche Zielgruppe war und wer sonst davon profitiert.
 
-> **Musterlösung:** Der Curb-Cut-Effekt beschreibt, wie eine Maßnahme für Menschen mit Behinderung am Ende allen zugute kommt – wie die Bordsteinabsenkung, die für Rollstuhlfahrer gedacht war, aber auch Kinderwagen, Rollkoffer und Fahrrädern helft. Web-Beispiele: (1) Untertitel – primär für Gehörlose, helfen auch in lauter Umgebung oder beim Sprachlernen. (2) Alt-Texte – primär für Screen-Reader-Nutzer, helfen auch Suchmaschinen (SEO).
+> **Musterlösung:** Der Curb-Cut-Effekt beschreibt, wie eine Maßnahme für Menschen mit Behinderung am Ende allen zugute kommt – wie die Bordsteinabsenkung, die für Rollstuhlfahrer gedacht war, aber auch Kinderwagen, Rollkoffer und Fahrrädern helft. Web-Beispiele: (1) Untertitel – primär für Gehörlose, helfen auch in lauter Umgebung oder beim Sprachlernen. (2) Alt-Texte – primär für Screen-Reader-NutzerInnen, helfen auch Suchmaschinen (SEO).
 
 ---
 
@@ -889,12 +929,12 @@ Was ist der European Accessibility Act (EAA)?
 
 ---
 
-### H6 – Barrierefreiheit: Warum auch für „normale" Nutzer?
+### H6 – Barrierefreiheit: Warum auch für „normale" NutzerInnen?
 **Thema:** Barrierefreiheit – Business Case
 **Punkte:** 2
 **Typ:** `[ESSAY]`
 
-Erkläre, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle Nutzer hat. Nenne mindestens zwei konkrete Beispiele.
+Erkläre, warum barrierefreie Gestaltung nicht nur für Menschen mit Behinderung wichtig ist, sondern auch einen praktischen Nutzen für alle NutzerInnen hat. Nenne mindestens zwei konkrete Beispiele.
 
 > **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.
 
@@ -912,10 +952,12 @@ Du willst eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie
 - [ ] Du installierst einen Screenreader und lässt die Seite vorlesen.
 - [ ] Du öffnest den Quellcode und zählst die barrierefreien Tags.
 
-> **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-Nutzer (und damit auch für Screenreader-Nutzer) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.
+> **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-NutzerInnen (und damit auch für Screenreader-NutzerInnen) nicht zugänglich. Tools wie axe DevTools oder Lighthouse automatisieren ~30% der Checks.
 
 ---
 
+<!-- _class: lead -->
+
 ## BLOCK I – Zusammenfassung-Fragen (Übergreifend)
 
 ---
@@ -925,7 +967,7 @@ Du willst eine Webseite auf Barrierefreiheit testen, ohne assistive Technologie
 **Punkte:** 3
 **Typ:** `[ESSAY]`
 
-Ein Nutzer klickt auf einen „Neuen Eintrag erstellen"-Button einer Webanwendung. Beschreibe vom Klick bis zur Antwort des Servers, welche Protokolle beteiligt sind und welche HTTP-Methode verwendet wird.
+Ein NutzerInnen klickt auf einen „Neuen Eintrag erstellen"-Button einer Webanwendung. Beschreibe vom Klick bis zur Antwort des Servers, welche Protokolle beteiligt sind und welche HTTP-Methode verwendet wird.
 
 > **Musterlösung:** (1) Der Browser sendet eine HTTP-Anfrage. Da es sich um eine neue Ressource handelt, nutzt er POST. (2) Vorher: DNS löst den Domain-Namen auf. (3) TCP-Handshake stellt die Verbindung her. (4) POST-Anfrage wird gesendet (Daten im Body). (5) Server verarbeitet, erstellt den Eintrag, antwortet mit 201 Created.
 
@@ -941,9 +983,7 @@ Du rufst eine Webseite auf und erhältst eine Fehlermeldung. Beschreibe drei ver
 > **Musterlösung:** (1) DNS-Fehler: „Der Server wurde nicht gefunden" → DNS konnte den Namen nicht auflösen (z. B. Tippfehler in der URL oder DNS-Server nicht erreichbar). (2) TCP-Fehler: „Die Verbindung wurde verweigert" → Server existiert (IP bekannt), akzeptiert aber keine Verbindung (nicht gestartet, Port blockiert). (3) HTTP-Fehler: 404 → TCP-Verbindung erfolgreich, aber die angeforderte Ressource existiert nicht auf dem Server.
 
 ---
-
+<!-- _class: lead -->
----
----
 
 ## BLOCK J – Dateiformate: Grundbegriffe
 
@@ -1066,12 +1106,8 @@ Ordne zu: Container oder Codec?
 |---|---|
 | MP4 | Container |
 | H.264 | Codec |
-| MKV | Container |
-| AAC | Codec |
 | WebM | Container |
 | AV1 | Codec |
-| VP9 | Codec |
-
 > **Feedback:** Container = Dateiformat, das Streams zusammenpackt (MP4, MKV, WebM). Codec = Kompressionsalgorithmus für einen bestimmten Stream (H.264, AV1, AAC).
 
 ---
@@ -1088,14 +1124,6 @@ Verlustfreie und verlustbehaftete Kompression arbeiten nach unterschiedlichen Pr
 | Redundanz entfernen (wiederholende Muster kompakter darstellen) | Verlustfrei |
 | Irrelevanz entfernen (für Menschen nicht wahrnehmbar) | Verlustbehaftet |
 
-**Zusätzlich:** Welches Beispiel passt zu welchem Prinzip?
-
-| Beispiel | Prinzip |
-|---|---|
-| „AAAA" wird zu „4×A" (Run-Length Encoding) | Redundanz |
-| Hohe Frequenzen in einem Foto werden weggeworfen – das Auge merkt es kaum | Irrelevanz |
-| Psychoakustik bei MP3: Töne maskieren andere Töne | Irrelevanz |
-
 > **Feedback:** Der Kernunterschied: Verlustfrei arbeitet mit Redundanz – Wiederholungen werden kompakter gespeichert, aber nichts geht verloren. Verlustbehaftet arbeitet mit Irrelevanz – Daten werden weggeworfen, die Menschen sowieso nicht wahrnehmen können (Psychovisuell bei Bildern, Psychoakustisch bei Audio).
 
 ---
@@ -1117,7 +1145,8 @@ Sortiere die Dateneinheiten von kleinster zu größter:
 > **Feedback:** Jede Stufe = Faktor 1.000 (SI-Präfixe). Merkhilfe: „Komm Mit Großem Tee, Peter". Ein einzelnes Foto (12 MP, unkomprimiert) ≈ 36 MB. Ein FullHD-Kinofilm ≈ 1 GB. Ein 4K-Film pro Minute unkomprimiert ≈ 44 GB.
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK K – Bildformate & Raster vs. Vektor
 
@@ -1268,7 +1297,8 @@ Ordne jedem Interpolationsverfahren seine Eigenschaft zu.
 > **Feedback:** Bei der Wahl: Pixel-Art → Nearest Neighbor (soll pixelig bleiben). Normale Bilder → Bilinear oder Bicubic. Maximale Qualität bei Fotos → Lanczos.
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK L – JPEG: Innenleben
 
@@ -1298,7 +1328,7 @@ JPEG ist ein …
 Wie nutzt JPEG die Schwächen des menschlichen Auges aus?
 
 - [ ] Das Auge kann keine Farben wahrnehmen – daher werden Farben komplett entfernt.
-- [x] **Das Auge sieht Helligkeit besser als Farbe. JPEG behält die Helligkeit (Y) voll auf, reduziert aber die Farbauflösung (Cb, Cr) – der Verlust wird kaum wahrgenommen.** ✅
+- [x] **Das Auge sieht Helligkeit besser als Farbe. JPEG behält die Helligkeit (Y) nahezu vollständig, reduziert aber die Farbauflösung (Cb, Cr) – der Verlust wird kaum wahrgenommen.** ✅
 - [ ] Das Auge kann keine Details sehen – daher werden alle Details entfernt.
 - [ ] JPEG nutzt keine Wahrnehmungsforschung, komprimiert rein mathematisch.
 
@@ -1421,22 +1451,7 @@ Ordne jedem JPEG-Artefakt seine Beschreibung zu.
 
 ---
 
-### L10 – JPEG Quality: Sweet Spot
+<!-- _class: lead -->
-**Thema:** JPEG – Praktische Qualitätswahl
-**Punkte:** 1
-**Typ:** `[MC]`
-
-Bei welcher JPEG-Quality sind Artefakte für die meisten Menschen kaum sichtbar, aber die Datei trotzdem deutlich kleiner?
-
-- [ ] Quality 30 – hier beginnt die Kompression erst.
-- [ ] Quality 100 – nur hier ist JPEG verlustfrei.
-- [x] **Quality 85–90 – etwa 10× Kompression, für Menschen kaum unterscheidbar vom Original.** ✅
-- [ ] Quality 50 – der optimale Kompromiss für alle Anwendungen.
-
-> **Feedback:** Quality 85–90 = der „Sweet Spot". Quality 100 ≠ verlustfrei (immer noch lossy!). Für Web/Social Media: 60–80 oft ausreichend. Für Archivierung: 90–100 oder besser PNG/RAW.
-
----
----
 
 ## BLOCK M – Bildformate: PNG, GIF, WebP, SVG
 
@@ -1527,19 +1542,22 @@ Ordne jedem Szenario das optimale Bildformat zu.
 | Szenario | Format |
 |---|---|
 | Ein Foto für eine Webseite (klein, OK-Qualität) | JPEG |
-| Ein Screenshot einer Benutzeroberfläche | PNG |
+| Ein Screenshot einer BenutzerInnenoberfläche | PNG |
 | Ein Logo, das auf allen Bildschirmgrößen scharf sein muss | SVG |
 | Ein animiertes Reaktionsbild für einen Chat | GIF |
 
 > **Feedback:** JPEG = Fotos (klein, lossy OK). PNG = Screenshots, Grafiken mit Transparenz (verlustfrei). SVG = Logos, Icons (skalierbar). GIF = Animationen (256 Farben, aber Animations-Support).
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK N – Video-Kompression
 
 ---
 
+<!-- _class: disable -->
+
 ### N1 – Spatial vs. Temporal Compression
 **Thema:** Video – Kompressionsprinzipien
 **Punkte:** 2
@@ -1557,6 +1575,8 @@ Ordne jedem Prinzip seine Beschreibung zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### N2 – I-Frame, P-Frame, B-Frame: Was ist was?
 **Thema:** Video – Frame-Typen
 **Punkte:** 2
@@ -1574,6 +1594,8 @@ Ordne jedem Frame-Typ seine Beschreibung zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### N3 – Was passiert, wenn ein I-Frame beschädigt ist?
 **Thema:** Video – I-Frame Bedeutung Transfer
 **Punkte:** 2
@@ -1585,6 +1607,8 @@ Erkläre, warum ein I-Frame bei der Videogespeicherung so wichtig ist. Was passi
 
 ---
 
+<!-- _class: disable -->
+
 ### N4 – Motion Compensation: Prinzip
 **Thema:** Video – Motion Compensation
 **Punkte:** 1
@@ -1601,6 +1625,8 @@ Was beschreibt ein Motion Vector bei der Videogespeicherung?
 
 ---
 
+<!-- _class: disable -->
+
 ### N5 – Video-Codecs: Zeitstrahl
 **Thema:** Video – Codecs-Übersicht
 **Punkte:** 2
@@ -1627,12 +1653,15 @@ Erkläre, warum AV1 als „die Zukunft" der Videogespeicherung gilt. Nenne minde
 > **Musterlösung:** AV1 (2018) ist royalty-free und open source – die Alliance for Open Media vereint Google, Netflix, Amazon, Apple, Mozilla. Es liefert 30% bessere Kompression als H.265 und unterstützt 8K, HDR, hohe Frame-Rates. H.265 scheitert vor allem am Patent-Chaos: Drei konkurrierende Patent-Pools (MPEG-LA, HEVC Advance, Velos Media) erzeugen rechtliche Unsicherheit und unklare Kosten → viele Unternehmen bleiben bei H.264 oder wechseln direkt zu AV1.
 
 ---
----
+
+<!-- _class: lead -->
 
 ## BLOCK O – Speichermedien & Schnittstellen
 
 ---
 
+<!-- _class: disable -->
+
 ### O1 – KB vs. KiB: Was ist der Unterschied?
 **Thema:** Speicher – Einheiten
 **Punkte:** 2
@@ -1649,6 +1678,8 @@ Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an.
 
 ---
 
+<!-- _class: disable -->
+
 ### O2 – HDD vs. SSD: Kern-Unterschied
 **Thema:** Speichermedien – HDD vs. SSD
 **Punkte:** 1
@@ -1665,6 +1696,8 @@ Was ist der fundamentale technische Unterschied zwischen HDD und SSD?
 
 ---
 
+<!-- _class: disable -->
+
 ### O3 – HDD vs. SSD: Eigenschaften zuordnen
 **Thema:** Speichermedien – Vergleich
 **Punkte:** 2
@@ -1685,6 +1718,8 @@ Ordne jeder Eigenschaft zu: HDD oder SSD?
 
 ---
 
+<!-- _class: disable -->
+
 ### O4 – USB-C: Stecker oder Protokoll?
 **Thema:** Schnittstellen – USB-C
 **Punkte:** 2
@@ -1701,6 +1736,8 @@ Ein USB-C-Kabel kann langsam sein, obwohl es wie ein „modernes" Kabel aussieht
 
 ---
 
+<!-- _class: disable -->
+
 ### O5 – Dateisysteme: Zuordnung
 **Thema:** Dateisysteme – Überblick
 **Punkte:** 2
@@ -1720,6 +1757,8 @@ Ordne jedem Dateisystem seine ideale Anwendung zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### O6 – FAT32: Warum nicht für große Dateien?
 **Thema:** Dateisysteme – FAT32 Limitation
 **Punkte:** 1
@@ -1747,6 +1786,8 @@ Erkläre die 3-2-1-Regel für Backups. Begründe, warum jede der drei Ziffern wi
 
 ---
 
+<!-- _class: disable -->
+
 ### O8 – Backup-Arten: Unterschiede
 **Thema:** Backup – Typen
 **Punkte:** 2
@@ -1761,8 +1802,3 @@ Ordne jedem Backup-Typ seine Beschreibung zu.
 | Differenziell | Änderungen seit dem letzten Voll-Backup – Mittelweg zwischen beiden |
 
 > **Feedback:** Typisches Schema: Sonntag Full, Mo–Sa Inkrementell oder Differenziell. Inkrementell = schnellstes Backup, langsamste Wiederherstellung (Kette aufbauen). Full = langsamstes Backup, schnellste Wiederherstellung.
-
----
-
-> **Ende des Katalogs – Aktuell: 105 Fragen across 15 Blöcke.**
-> Abgedeckte Themen: Von-Neumann, TCP/IP, HTTP, DNS, Gesamtablauf, HTML, CSS, Barrierefreiheit, Dateiformate-Grundbegriffe (inkl. Redundanz/Irrelevanz, Codec/Container, Dateneinheiten), Bildformate (Raster/Vektor/JPEG/PNG/GIF/WebP/SVG), Video-Kompression, Speichermedien, Schnittstellen, Dateisysteme, Backup.