fix termin 2 header/footer colors to match termin 1

- change --color-dimmed from light gray to dark
- update code styling to dark bg with pink text

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

@@ -49,11 +49,23 @@ a {
   color: var(--color-highlight);
 }
 section.klausur {
-  background: #e3f2fd !important;
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
 }
 section.klausur footer {
   display: none;
 }
+section.aufgabe {
+  background: #e3f2fd !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -49,11 +49,23 @@ a {
   color: var(--color-highlight);
 }
 section.klausur {
-  background: #e3f2fd !important;
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
 }
 section.klausur footer {
   display: none;
 }
+section.aufgabe {
+  background: #e3f2fd !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->
@@ -95,14 +107,6 @@ Hochschule der Medien Stuttgart
 00 00 01 90 00 00 01 2C
 ```
 
-<!--
-
-"Ich schaue in viele fragende Gesichte ..."
-
-"Doch vertraut mir, am Ende der heutigen Veranstaltung werdet ihr mir genau sagen können was hier steht"
-
--->
-
 ---
 
 ![bg right:30%](./assets/matrix-code.png)
@@ -154,7 +158,7 @@ Demonstration: Glühbirne AN/AUS = 1 Bit
 <!--
 BIT = Binary Digit (Binärziffer) – 1948 von Claude Shannon geprägt
 
-"Bit warum somit ein Neologismus, bis dato gab es das Wort in dieser Bedeutung überhaupt nicht"
+"Bit war somit ein Neologismus; bis dato gab es das Wort in dieser Bedeutung überhaupt nicht"
 
 Shannon war Mathematiker bei Bell Labs – begründete die Informationstheorie
 
@@ -190,12 +194,6 @@ BYTE = Wortspiel aus "Bit" + "Bite" (Bissen) – ein "Bissen" Information
 
 <!--
 
-"Und das sieht dann so aus"
-
-"Aber warum genau 8 Bits?" -> "Das versteht man leider erst so richtig wenn man sich das Ergebnis anschaut, wie viele Möglichkeiten hieraus entstehen"
-
-"Menschen neigen dazu, exponentielles Wachstum zu unterschätzen"
-
 Rätsel: "Wenn sich das Wachstum einer Seerose auf einem Teich jeden Tag verdoppelt · und nach *zehn Tagen* der ganze Teich bedeckt ist, wann ist er zur Hälfte zugewachsen?"
 
 Frage: "Weiß jemand wieviele Zustände wir mit 8 Bit beschreiben können?"
@@ -236,7 +234,7 @@ Praktikabilität:
 7 Bit = 128 Zustände
 8 Bit = 256 Zustände
 
-Rechnung: 2×2×2×2×2×2×2×2 = 256 mögliche Kombinationen
+Rechnung: 2·2·2·2·2·2·2·2 = 256 mögliche Kombinationen
 
 von griech. hexa „sechs“ und lat. decem „zehn“
 
@@ -245,15 +243,18 @@ Eselsbrücke: 1 Byte = 1 Buchstabe/Symbol (in ASCII/UTF-8 für einfache Zeichen)
 
 ---
 
+<!-- _class: klausur -->
+<!-- _footer: '' -->
+
 # Dateneinheiten
 
-| Einheit | Bytes | Bits | Potenz |
+| Einheit | Bytes | Potenz | Beispiel |
-|---------|-------|------|--------|
+|---------|-------|--------|----------|
-| **1 Byte** | 1 | 8 | 10⁰ |
+| **1 Byte** | 1 | 10⁰ | Farbwerte eines Pixels |
-| **1 Kilobyte (KB)** | 1.000 | 8.000 | 10³ |
+| **1 Kilobyte (KB)** | 1.000 | 10³ | Kleiner Programmcode |
-| **1 Megabyte (MB)** | 1.000.000 | 8 Mio. | 10⁶ |
+| **1 Megabyte (MB)** | 1 Million (Mio.) | 10⁶ | Textdokument |
-| **1 Gigabyte (GB)** | 1 Mrd. | 8 Mrd. | 10⁹ |
+| **1 Gigabyte (GB)** | 1 Milliarde (Mrd.) | 10⁹ | Kinofilm in FullHD |
-| **1 Terabyte (TB)** | 1 Bio. | 8 Bio. | 10¹² |
+| **1 Terabyte (TB)** | 1 Billion (Bio.) | 10¹² | ~12h Video in 4K |
 
 <!--
 SI-Präfixe (Dezimal): 1 KB = 1.000 Bytes
@@ -264,14 +265,17 @@ Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
 
 ---
 
+<!-- _class: klausur -->
+<!-- _footer: '' -->
+
 # Dateneinheiten (Fortsetzung)
 
 | Einheit | Bytes | Potenz | Beispiel |
 |---------|-------|--------|----------|
-| **1 Petabyte (PB)** | 10¹⁵ | 1.000 TB | Netflix-Gesamtarchiv |
+| **1 Petabyte (PB)** | 1 Billiarde (Brd.) | 10¹⁵ | Netflix-Gesamtarchiv |
-| **1 Exabyte (EB)** | 10¹⁸ | 1.000 PB | Alle E-Mails weltweit/Tag |
+| **1 Exabyte (EB)** | 1 Trillion (Trill.) | 10¹⁸ | Alle E-Mails weltweit/Tag |
-| **1 Zettabyte (ZB)** | 10²¹ | 1.000 EB | Internet-Traffic 2016 |
+| **1 Zettabyte (ZB)** | 1 Trilliarde | 10²¹ | Internet-Traffic 2016 |
-| **1 Yottabyte (YB)** | 10²⁴ | 1.000 ZB | *Noch nie erreicht* |
+| **1 Yottabyte (YB)** | 1 Quadrillion | 10²⁴ | *Noch nie erreicht* |
 
 <!--
 Peta = 10^15 (Billiarde)
@@ -279,6 +283,7 @@ Exa = 10^18 (Trillion)
 Zetta = 10^21 (Trilliarde)
 Yotta = 10^24 (Quadrillion)
 
+
 Eselsbrücke: "Kilo Mega Giga Tera Peta Exa Zetta Yotta"
 → "Komm Mit Großem Tee, Peter Exte Zettelt Yachten"
 -->
@@ -326,14 +331,25 @@ Digital explodierte: IoT, Social Media, Cloud, Video
 (AWS Glacier, Film-Archive, Rechenzentren)
 
 <!--
+PRÜFUNGSRELEVANT:
+ - Wendepunkt 2002
+ - Speichereinheiten (KB→MB→GB→TB→PB→EB→ZB)
+ - Magnetband als Archivmedium
+
 QUELLE: Hilbert & López (2011): "The World's Technological Capacity to Store, Communicate, and Compute Information", Science
+
 METHODIK: 60 analoge + digitale Technologien untersucht (1986-2007)
+
 WENDEPUNKT 2002: Erstmals mehr digital als analog gespeichert
+
 ANALOG damals: Bücher, Zeitungen, Vinyl, VHS, Filmrollen, Fotos
+
 DIGITAL damals: Festplatten, CDs, DVDs, frühe Flash-Speicher
+
 HEUTE: LTO-9 (2021) speichert 18 TB pro Band, ~$5/TB für Cold Storage
+
 VERGLEICH: SSD ~$50/TB, HDD ~$15/TB, LTO ~$5/TB
-PRÜFUNGSRELEVANT: Wendepunkt 2002, Speichereinheiten (KB→MB→GB→TB→PB→EB→ZB), Magnetband als Archivmedium
+
 -->
 
 ---
@@ -385,7 +401,7 @@ Model Collapse: AI trainiert auf AI-Output → Qualitätsverlust
 <!-- _class: lead -->
 
 # ASCII
-## Ein Zeichensatz to rule them all
+## One *Zeichensatz* to rule them all
 
 <!--
 WARUM 7 BIT STATT 8?
@@ -462,8 +478,6 @@ US-ASCII (1967) Code Chart
 * **256 Lautstärkestufen**
 * **Zahlen 0-255** (oder -128 bis +127)
 
-* *Fällt Euch noch mehr ein?*
-
 <!--
 256 = die "magische Zahl" bei 8 Bit
 Alltagsbeispiele:
@@ -517,8 +531,11 @@ Sog. RGB Tuple (geordnete endliche Liste)
 - **Blau:** 0-255
 
 **Beispiele:**
-`FF 00 00` = Rot | `00 FF 00` = Grün
+`FF 00 00` = Rot
-`00 00 00` = Schwarz | `FF FF FF` = Weiß
+`00 FF 00` = Grün
+`00 00 FF` = Blau
+`00 00 00` = Schwarz
+`FF FF FF` = Weiß
 
 <!--
 "Weiß jemand oder möchte jemand raten, wofür das "s" bei "sRGB" steht?"
@@ -563,7 +580,7 @@ Chaos: Verschiedene Standards für verschiedene Sprachen
 
 ---
 
-# Unicode: Ein Standard für alle
+# Unicode: Ein Standard für alle (8 Bit)
 
 **Unicode (1991):** Jedes Schriftsystem der Welt
 
@@ -746,20 +763,22 @@ Windows vertraut der Endung, aber "file" (Linux) liest Magic Number
 
 ---
 
-![bg right:25%](./assets/qr/hexed-it.png)
+<!-- _class: aufgabe -->
+
+![bg contain right:22%](./assets/qr/hexed-it.png)
 
 # Hands-On: WTF Files
 
 **Aufgabe (30 Min):**
 
-1. Drei Dateien ohne Extension: `wtf1`, `wtf2`, `wtf3`
+1. Drei Dateien ohne Dateiendung:
-   → Download: `materials/` Ordner
+   <a href="../materials/wtf1"/>`wtf1`</a>  <a href="../materials/wtf2"/>`wtf2`</a>  <a href="../materials/wtf3"/>`wtf3`</a>
-2. Öffne im Hex-Editor
+3. Lies erste 16 Bytes aus und identifiziere Dateiformat (Magic Number)
-3. Lies erste 16 Bytes
+5. *Optional: Datei umbenennen und korrekte Dateiendung anhängen (bspw. `.jpg`)*
-4. Identifiziere Format (Magic Number)
-5. Benenne um und öffne
 
-**Tools:** [hexed.it](https://hexed.it) (online), HxD, Hex Fiend, Bless
+**Tools:**
+- Hex-Editor: [hexed.it](https://hexed.it)
+- Magic Numbers: [en.wikipedia.org/wiki/List_of_file_signatures](https://en.wikipedia.org/wiki/List_of_file_signatures)
 
 <!--
 Praktische Phase: Studierende arbeiten selbst
@@ -935,7 +954,6 @@ KOMPRESSION nutzt beide Achsen:
 ---
 
 <!-- _class: klausur -->
-<!-- _footer: '' -->
 
 # Verlustfrei vs. Verlustbehaftet
 
@@ -946,7 +964,9 @@ KOMPRESSION nutzt beide Achsen:
 | **Reduktion** | 30-50% | 80-99% |
 | **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |
 
-**Faustregel:** Code/Archiv → verlustfrei · Medien → verlustbehaftet
+**Faustregel:** 
+ * **Medien** → (tendenziell) verlustbehaftet
+ * **Vektorgrafiken**, Textdokumente, Archive, Programmcode  → verlustfrei
 
 <!--
 REDUNDANZ: Wiederholende Muster kompakter darstellen (z.B. "AAAA" → "4×A")
@@ -1011,7 +1031,6 @@ KERNKONZEPT: Kompression = Modell der menschlichen Wahrnehmung
 * Diplom-Ingenieur, Universität Erlangen-Nürnberg
 * Fraunhofer IIS (Institut für Integrierte Schaltungen)
 * Forschung ab 1982, Patent 1988
-* Hörte "Tom's Diner" über 10.000 Mal
 
 <!--
 Fraunhofer IIS Erlangen
@@ -1049,10 +1068,11 @@ Patent lief 2017 aus
 
 **"Tom's Diner" (1987)**
 
+- Der erste Song, der als MP3 kodiert wurde
 - A cappella (keine Instrumente)
 - Klare, hohe Frequenzen
 - Perfekter Stresstest für Kompression
-- Der erste Song, der als MP3 kodiert wurde
+- Brandenburg hörte "Tom's Diner" über 10.000 Mal
 
 <!--
 Suzanne Vega – "Tom's Diner" (1987)
@@ -1071,7 +1091,7 @@ Brandenburg hörte den Song über 10.000 Mal
 - Suzanne Vegas Stimme ist "schwierig"
 - Klare, hohe Frequenzen → Stresstest
 
-> If I could code Suzanne Vega's voice well, I could code anything.
+> Wenn ich Suzanne Vegas Stimme kodieren könnte, kann ich alles kodieren.
 — Karlheinz Brandenburg
 
 <!-- 
@@ -1184,7 +1204,7 @@ Das Pferd war aus dem Stall
 
 ---
 
-![bg right:50% fit](./assets/napster-interface.png)
+![bg right:50% fit](./assets/napster-2001.png)
 
 # Napster (1999)
 
@@ -1204,6 +1224,8 @@ Aber: LimeWire, Kazaa, BitTorrent folgten
 
 ---
 
+![bg right:40% contain](./assets/bittorrent.png)
+
 # Napster & Musikindustrie
 
 **1999:** Napster startet
@@ -1256,19 +1278,13 @@ Vinyl-Revival: 2020er Gegenbewegung
 
 ---
 
-# Hands-On: MP3 sezieren
+# Hands-On: Audio-Spektrogram
 
 **Aufgabe (30 Min):**
 
-1. Lade Lied runter (eigenes oder CC)
+* Live Spektrogram untersuchen https://borismus.github.io/spectrogram/
-2. Konvertiere in verschiedene Bitraten:
+* Mit Effekten experimentieren https://audiomass.co/
-   - 320 kbps, 128 kbps, 64 kbps
+* Spektrogramme vergleichen Audacity (kostenloser Download nötig) [https://manual.audacityteam.org/man/spectrogram_view.html](https://manual.audacityteam.org/man/spectrogram_view.html)
-3. Tool: **Audacity** (kostenlos)
-4. Höre Unterschiede (Kopfhörer!)
-5. Vergleiche Dateigrößen
-
-**Spektrogramm:** Klick auf Track-Name → Spektrogramm
-[https://manual.audacityteam.org/man/spectrogram_view.html](https://manual.audacityteam.org/man/spectrogram_view.html)
 
 <!--
 Audacity: FOSS Audio-Editor (audacityteam.org)

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

@@ -49,11 +49,23 @@ a {
   color: var(--color-highlight);
 }
 section.klausur {
-  background: #e3f2fd !important;
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
 }
 section.klausur footer {
   display: none;
 }
+section.aufgabe {
+  background: #e3f2fd !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->
@@ -342,7 +354,7 @@ Huffman: Finale Effizienz (wie bei MP3)
 
 ---
 
-# JPEG Quality
+# JPEG Qualität
 
 | Quality | Dateigröße | Artefakte |
 |---------|------------|-----------|
@@ -480,6 +492,8 @@ Lösung: Portfolio-Websites (eigene Kontrolle)
 
 ---
 
+<!-- _class: aufgabe -->
+
 ![bg contain right:25%](./assets/qr/squoosh.png)
 
 # Hands-On: Kompression vergleichen
@@ -893,6 +907,8 @@ MKV vs. MP4: Offenheit vs. Kompatibilität
 
 ---
 
+<!-- _class: aufgabe -->
+
 # Hands-On: Video analysieren
 
 **Aufgabe (40 Min):**

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

@@ -49,11 +49,23 @@ a {
   color: var(--color-highlight);
 }
 section.klausur {
-  background: #e3f2fd !important;
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
 }
 section.klausur footer {
   display: none;
 }
+section.aufgabe {
+  background: #e3f2fd !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -49,11 +49,23 @@ a {
   color: var(--color-highlight);
 }
 section.klausur {
-  background: #e3f2fd !important;
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
 }
 section.klausur footer {
   display: none;
 }
+section.aufgabe {
+  background: #e3f2fd !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -49,11 +49,23 @@ a {
   color: var(--color-highlight);
 }
 section.klausur {
-  background: #e3f2fd !important;
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
 }
 section.klausur footer {
   display: none;
 }
+section.aufgabe {
+  background: #e3f2fd !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -49,11 +49,23 @@ a {
   color: var(--color-highlight);
 }
 section.klausur {
-  background: #fce4ec !important;
+  background: repeating-linear-gradient(
+    135deg,
+    #fce4ec,
+    #fce4ec 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
 }
 section.klausur footer {
   display: none;
 }
+section.aufgabe {
+  background: #fce4ec !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -12,7 +12,7 @@ title: "Termin 2: Netzwerke, Protokolle & CSS"
 :root {
   --color-foreground: #1a1a2e;
   --color-highlight: #d63384;
-  --color-dimmed: #dde0e4;
+  --color-dimmed: #4a4a6a;
 }
 section.invert {
   --color-foreground: #fff;
@@ -40,8 +40,8 @@ pre code {
   color: inherit;
 }
 code {
-  background: #f0e6eb;
+  background: #1a1a2e;
-  color: #1a1a2e;
+  color: #d63384;
   padding: 0.15em 0.4em;
   border-radius: 4px;
 }
@@ -49,11 +49,23 @@ a {
   color: var(--color-highlight);
 }
 section.klausur {
-  background: #fce4ec !important;
+  background: repeating-linear-gradient(
+    135deg,
+    #fce4ec,
+    #fce4ec 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
 }
 section.klausur footer {
   display: none;
 }
+section.aufgabe {
+  background: #fce4ec !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->

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

@@ -48,6 +48,24 @@ code {
 a {
   color: var(--color-highlight);
 }
+section.klausur {
+  background: repeating-linear-gradient(
+    135deg,
+    #fce4ec,
+    #fce4ec 20px,
+    #fff 20px,
+    #fff 40px
+  ) !important;
+}
+section.klausur footer {
+  display: none;
+}
+section.aufgabe {
+  background: #fce4ec !important;
+}
+section.aufgabe footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->