unify slide styles across all termine

223015b:
- add klausur styles to termin-3, 4, 5
- consistent styles across all 6 termine

223015c:
- h1: darker raspberry (#a02060)
- h2: dark gray almost black (#1f2937)
- section.invert h1: white
- consistent styles across all 3 termine

also:
- add squoosh link and QR code
- update video title to "RIIIIIIIESIG"
- replace i-frame diagram with canon image

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

@@ -42,6 +42,12 @@ code {
 a {
   color: var(--color-highlight);
 }
+section.klausur {
+  background: #e3f2fd !important;
+}
+section.klausur footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->
@@ -69,7 +75,7 @@ Hochschule der Medien Stuttgart
 <!-- _class: lead -->
 
 # Willkommen!
-## Termin 1 – Einführung & Grundlagen
+## Einführung
 
 ---
 

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

@@ -872,6 +872,25 @@ DAS SPEKTROGRAMM zeigt es:
 
 ---
 
+<!-- _class: lead -->
+
+# Kompression
+## Weniger Daten, gleiche(?) Information
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/compression-types.png)
+
+<!--
+Lossless vs. Lossy Kompression
+Visualisierung der beiden Philosophien
+-->
+
+---
+
 # Sample Rate vs. Bit Depth
 
 **Zwei Dimensionen der Digitalisierung:**
@@ -909,25 +928,6 @@ KOMPRESSION nutzt beide Achsen:
 
 ---
 
-<!-- _class: lead -->
-
-# Kompression
-## Weniger Daten, gleiche(?) Information
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/compression-types.png)
-
-<!--
-Lossless vs. Lossy Kompression
-Visualisierung der beiden Philosophien
--->
-
----
-
 <!-- _class: klausur -->
 <!-- _footer: '' -->
 

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

@@ -474,6 +474,8 @@ Lösung: Portfolio-Websites (eigene Kontrolle)
 
 ---
 
+![bg right:25%](./assets/qr/squoosh.png)
+
 # Hands-On: Kompression vergleichen
 
 **Aufgabe (40 Min):**
@@ -483,7 +485,7 @@ Lösung: Portfolio-Websites (eigene Kontrolle)
    - PNG
    - JPEG Q100, Q85, Q50
    - WebP (optional)
-3. Tool: **Squoosh.app** (Google-Tool)
+3. Tool: **[Squoosh.app](https://squoosh.app)** (Google-Tool)
 4. Vergleiche: Dateigrößen, sichtbare Unterschiede
 5. Wo werden Artefakte sichtbar?
 
@@ -515,7 +517,7 @@ Unmöglich ohne moderne Codecs
 
 ---
 
-# Das Problem: Video ist RIESIG
+# Das Problem: Videos sind RIIIIIIIESIG
 
 **1 Minute 4K-Video (3840×2160):**
 
@@ -624,12 +626,12 @@ Wenn du vorspulst: Sucht nach nächstem I-Frame
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg](./assets/iframe-pframe-diagram.png)
+![bg fit](./assets/ipb-compression-canon.jpg)
 
-<!-- 
+<!--
 Visualisierung: I/P/B-Frame-Abhängigkeiten
-Pfeile zeigen Referenzen
+I-Frame = Vollbild (Keyframe), P/B-Frames speichern nur Unterschiede
-I-Frame = Anker, P/B-Frames hängen dran
+Quelle: https://www.canon.com.hk/cpx/en/technical/va_EOS_Movie_Compression_Options_All_I_and_IPB.html
 -->
 
 ---

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

@@ -42,6 +42,12 @@ code {
 a {
   color: var(--color-highlight);
 }
+section.klausur {
+  background: #e3f2fd !important;
+}
+section.klausur footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -42,6 +42,12 @@ code {
 a {
   color: var(--color-highlight);
 }
+section.klausur {
+  background: #e3f2fd !important;
+}
+section.klausur footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -42,6 +42,12 @@ code {
 a {
   color: var(--color-highlight);
 }
+section.klausur {
+  background: #e3f2fd !important;
+}
+section.klausur footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -20,8 +20,14 @@ section.invert {
 section {
   font-size: 1.7rem;
 }
+h1 {
+  color: #a02060;  /* darker raspberry */
+}
+section.invert h1 {
+  color: #fff;
+}
 h2 {
-  color: var(--color-highlight);
+  color: #1f2937;  /* dark gray, almost black */
 }
 pre {
   background: #0f0f23;

courses/223015c/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md

@@ -20,8 +20,14 @@ section.invert {
 section {
   font-size: 1.7rem;
 }
+h1 {
+  color: #a02060;  /* darker raspberry */
+}
+section.invert h1 {
+  color: #fff;
+}
 h2 {
-  color: var(--color-highlight);
+  color: #1f2937;  /* dark gray, almost black */
 }
 pre {
   background: #0f0f23;

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

@@ -20,8 +20,14 @@ section.invert {
 section {
   font-size: 1.7rem;
 }
+h1 {
+  color: #a02060;  /* darker raspberry */
+}
+section.invert h1 {
+  color: #fff;
+}
 h2 {
-  color: var(--color-highlight);
+  color: #1f2937;  /* dark gray, almost black */
 }
 pre {
   background: #0f0f23;