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
 
@@ -1286,7 +1295,15 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
 
 ---
 
+<!-- _class: lead -->
+
+# Web Disability Simulator
+
+---
+
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Wie nutzen Menschen das Web?
 
@@ -1321,6 +1338,8 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Warum "Barrierefreiheit"?
 
@@ -1482,6 +1501,8 @@ div-Button braucht JavaScript für Enter/Space
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Barrieren im Netz vermeiden (a11y)
 
@@ -1504,7 +1525,6 @@ Manuelles Testen unverzichtbar
 Echte NutzerInnen einbeziehen = Gold-Standard
 -->
 
-
 ---
 
 

courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.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;
@@ -110,7 +113,6 @@ Hochschule der Medien Stuttgart
 
 **Teil 2:**
 - CSS-Grundlagen
-- "Barrierefreiheit" (a11y, WCAG)
 - Selektoren & Spezifität
 - Hands-On: Styling
 
@@ -118,10 +120,10 @@ Hochschule der Medien Stuttgart
 
 # Ressourcen zum Selbstlernen
 
+* **CODE CRISPIES: https://codecrispi.es/**
 * Online Code-Editor: https://codepen.io/pen/
 * MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
 * HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
-* CSS lernen: https://codescripsi.es/
 * Flexbox-Spiel: https://flexboxfroggy.com/
 * Grid-Spiel: https://cssgridgarden.com/
 
@@ -139,7 +141,7 @@ Hochschule der Medien Stuttgart
 * Daten und Informationen teilen
 * Zusammenarbeiten & Kollaboration
 * Ressourcen teilen (Drucker, Speicher, andere Geräte)
-* **Kommunikation**
+* **(Tele)kommunikation** *(gr. telos – Ziel, Ende)*
 
 ---
 
@@ -368,6 +370,8 @@ Query-String für Parameter
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Das OSI-Modell: Die Theorie
 
@@ -402,6 +406,8 @@ PRÜFUNGSRELEVANT: 7 Schichten mit Beispielen, Unterschied OSI vs. TCP/IP
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # TCP/IP: Die Praxis
 
@@ -637,6 +643,8 @@ Heute: Fast nur noch HTTPS
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # Schicht 7: Anwendung
 
@@ -693,12 +701,16 @@ Von oben nach unten: 7 bis 1
 ---
 
 <!-- _class: lead klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # HTTP/S im Detail
 
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # HTTP-Request
 
@@ -726,6 +738,8 @@ Body kommt nach leerem Zeile (bei POST)
 ---
 
 <!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
 
 # HTTP-Response
 
@@ -751,6 +765,8 @@ Content-Length: 1234
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
+
+# HTTP-Methoden
 
 | Methode | CRUD | Zweck | Beispiel |
 |---------|------|-------|----------|
@@ -1091,6 +1107,79 @@ vw/vh = Viewport (sichtbarer Bereich)
 
 <!-- _class: klausur -->
 <!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Pseudo-Klassen
+
+```css
+/* Zustände */
+a:hover { color: red; }
+a:visited { color: purple; }
+input:focus { border-color: blue; }
+
+/* Struktur */
+li:first-child { font-weight: bold; }
+li:nth-child(odd) { background: #eee; }
+```
+
+<!--
+Pseudo-Klassen = Zustände, kein JavaScript nötig!
+-->
+
+---
+
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Pseudo-Elemente
+
+```css
+.required::before {
+    content: "* ";
+    color: red;
+}
+
+p::first-letter { font-size: 2em; }
+p::first-line { font-weight: bold; }
+```
+
+**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
+
+<!--
+content nur bei ::before/::after
+-->
+
+---
+
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Responsive Design
+
+**Media Queries:** CSS je nach Bildschirmgröße
+
+```css
+/* Mobile First: Standard */
+.container { padding: 1rem; }
+
+/* Ab 768px (Tablet) */
+@media (min-width: 768px) {
+    .container { padding: 2rem; max-width: 720px; }
+}
+```
+
+**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
+
+<!--
+Mobile First = Standard für klein, dann größere überschreiben
+-->
+
+---
+
+<!-- _class: lead -->
+
 # Teil 3: Layouts (optional)
 ## Flexbox & mehr
 
@@ -1271,76 +1360,9 @@ Oder gleichmäßig verteilt
 
 <!-- _class: lead -->
 
-# Pseudo-Klassen
-
-```css
-/* Zustände */
-a:hover { color: red; }
-a:visited { color: purple; }
-input:focus { border-color: blue; }
-
-/* Struktur */
-li:first-child { font-weight: bold; }
-li:nth-child(odd) { background: #eee; }
-```
-
-<!--
-Pseudo-Klassen = Zustände, kein JavaScript nötig!
--->
-
----
-
-<!-- _class: klausur -->
-
-# Pseudo-Elemente
-
-```css
-.required::before {
-    content: "* ";
-    color: red;
-}
-
-p::first-letter { font-size: 2em; }
-p::first-line { font-weight: bold; }
-```
-
-**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
-
-<!--
-content nur bei ::before/::after
--->
-
----
-
-<!-- _class: klausur -->
-
-# Responsive Design
-
-**Media Queries:** CSS je nach Bildschirmgröße
-
-```css
-/* Mobile First: Standard */
-.container { padding: 1rem; }
-
-/* Ab 768px (Tablet) */
-@media (min-width: 768px) {
-    .container { padding: 2rem; max-width: 720px; }
-}
-```
-
-**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
-
-<!--
-Mobile First = Standard für klein, dann größere überschreiben
--->
-
----
-
-<!-- _class: lead -->
-
 # Teil 4: CSS vertiefen (optional)
 ## Transitions & moderne Features
-
+
 ---
 
 # Transitions: Sanfte Übergänge

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>