fix klausur slides for pdf: add svg pattern and marp directives

- add svg diagonal stripe patterns for pdf background
- use @media print to apply svg only in pdf export
- keep css gradient for web/screen display
- add _header: '' and _footer: '' to all klausur slides

courses/223015b/slides/2025-12-19-termin-0-intro.md

@@ -57,8 +57,11 @@ section.klausur {
     #fff 80px
   ) !important;
 }
-section.klausur footer {
+@media print {
-  display: none;
+  section.klausur {
+    background: url('./assets/klausur-pattern.svg') !important;
+    background-size: cover !important;
+  }
 }
 section.aufgabe {
   background: #e3f2fd !important;

courses/223015b/slides/2025-12-19-termin-1-grundlagen-text-audio.md

@@ -57,8 +57,11 @@ section.klausur {
     #fff 80px
   ) !important;
 }
-section.klausur footer {
+@media print {
-  display: none;
+  section.klausur {
+    background: url('./assets/klausur-pattern.svg') !important;
+    background-size: cover !important;
+  }
 }
 section.aufgabe {
   background: #e3f2fd !important;
@@ -244,6 +247,7 @@ Eselsbrücke: 1 Byte = 1 Buchstabe/Symbol (in ASCII/UTF-8 für einfache Zeichen)
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
 <!-- _footer: '' -->
 
 # Dateneinheiten
@@ -266,6 +270,7 @@ Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
 <!-- _footer: '' -->
 
 # Dateneinheiten (Fortsetzung)
@@ -313,6 +318,7 @@ Digital explodierte: IoT, Social Media, Cloud, Video
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
 <!-- _footer: '' -->
 
 # Der digitale Wendepunkt
@@ -813,6 +819,8 @@ Visueller Kontrast: Analog vs. Digital
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Analoge Medien
 ### Distribution: physisch (Kauf, Verleih, Kopie)
@@ -877,6 +885,8 @@ Paradox: Gerade die Perfektion wurde zum "Problem"
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Digitale Medien
 ### Distribution: Datenträger (CD, USB), Download, Streaming, P2P
@@ -893,6 +903,8 @@ Paradox: Gerade die Perfektion wurde zum "Problem"
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Digitale Speichermedien
 
@@ -1272,6 +1284,8 @@ Visualisierung der beiden Philosophien
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Verlustfrei vs. Verlustbehaftet
 

courses/223015b/slides/2026-01-09-termin-2-bild-audio-video.md

@@ -57,8 +57,11 @@ section.klausur {
     #fff 80px
   ) !important;
 }
-section.klausur footer {
+@media print {
-  display: none;
+  section.klausur {
+    background: url('./assets/klausur-pattern.svg') !important;
+    background-size: cover !important;
+  }
 }
 section.aufgabe {
   background: #e3f2fd !important;
@@ -136,6 +139,7 @@ Smartphone-Speicher wäre schnell voll ohne Kompression
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
 <!-- _footer: '' -->
 
 # Rastergrafiken (Bitmaps)
@@ -174,6 +178,7 @@ PRÜFUNGSRELEVANT: Speicherberechnung, Farbtiefe-Tabelle, warum Vergrößern pro
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
 <!-- _footer: '' -->
 
 # Vektorgrafiken
@@ -213,6 +218,7 @@ PRÜFUNGSRELEVANT: Warum Vektoren skalierbar, SVG-Grundsyntax, Rendering-Pipelin
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
 <!-- _footer: '' -->
 
 # Raster vs. Vektor: Entscheidungskriterien
@@ -708,6 +714,8 @@ Quelle: https://www.canon.com.hk/cpx/en/technical/va_EOS_Movie_Compression_Optio
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # H.264 / AVC Codec (2003)
 ### Der bisherige Platzhirsch
@@ -828,6 +836,8 @@ Alliance for Open Media
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # AV1: Die Open-Source-Revolution
 

courses/223015b/slides/2026-01-23-termin-3-speichermedien-schnittstellen.md

@@ -57,8 +57,11 @@ section.klausur {
     #fff 80px
   ) !important;
 }
-section.klausur footer {
+@media print {
-  display: none;
+  section.klausur {
+    background: url('./assets/klausur-pattern.svg') !important;
+    background-size: cover !important;
+  }
 }
 section.aufgabe {
   background: #e3f2fd !important;

courses/223015b/slides/2026-01-30-termin-4-distribution-apis-zukunft.md

@@ -57,8 +57,11 @@ section.klausur {
     #fff 80px
   ) !important;
 }
-section.klausur footer {
+@media print {
-  display: none;
+  section.klausur {
+    background: url('./assets/klausur-pattern.svg') !important;
+    background-size: cover !important;
+  }
 }
 section.aufgabe {
   background: #e3f2fd !important;

courses/223015b/slides/2026-xx-xx-termin-5-vertiefung-offene-fragen.md

@@ -57,8 +57,11 @@ section.klausur {
     #fff 80px
   ) !important;
 }
-section.klausur footer {
+@media print {
-  display: none;
+  section.klausur {
+    background: url('./assets/klausur-pattern.svg') !important;
+    background-size: cover !important;
+  }
 }
 section.aufgabe {
   background: #e3f2fd !important;

courses/223015b/slides/assets/klausur-pattern.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80">
+  <defs>
+    <pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="80" height="80" patternTransform="rotate(135)">
+      <rect width="40" height="80" fill="#e3f2fd"/>
+      <rect x="40" width="40" height="80" fill="#ffffff"/>
+    </pattern>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#diagonalStripes)"/>
+</svg>

courses/223015c/slides/2025-12-20-termin-1-geschichte-grundlagen-html.md

@@ -57,8 +57,11 @@ section.klausur {
     #fff 80px
   ) !important;
 }
-section.klausur footer {
+@media print {
-  display: none;
+  section.klausur {
+    background: url('./assets/klausur-pattern.svg') !important;
+    background-size: cover !important;
+  }
 }
 section.aufgabe {
   background: #fce4ec !important;
@@ -618,6 +621,8 @@ Euer Laptop, euer Handy, der Server dieser Präsentation
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Die 5 Komponenten
 
@@ -648,6 +653,8 @@ PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Von-Neumann-Architektur: Bedeutung
 
@@ -1068,6 +1075,8 @@ Formattierungssprache
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # HTML Metadaten
 
@@ -1276,8 +1285,249 @@ 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: lead -->
+
+# Web Disability Simulator
+
+---
+
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 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 -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 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 -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 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

courses/223015c/slides/2026-01-24-termin-3-interaktivitaet-javascript.md

@@ -57,8 +57,11 @@ section.klausur {
     #fff 80px
   ) !important;
 }
-section.klausur footer {
+@media print {
-  display: none;
+  section.klausur {
+    background: url('./assets/klausur-pattern.svg') !important;
+    background-size: cover !important;
+  }
 }
 section.aufgabe {
   background: #fce4ec !important;

courses/223015c/slides/assets/klausur-pattern.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80">
+  <defs>
+    <pattern id="diagonalStripes" patternUnits="userSpaceOnUse" width="80" height="80" patternTransform="rotate(135)">
+      <rect width="40" height="80" fill="#fce4ec"/>
+      <rect x="40" width="40" height="80" fill="#ffffff"/>
+    </pattern>
+  </defs>
+  <rect width="100%" height="100%" fill="url(#diagonalStripes)"/>
+</svg>