split klausurfragen into per-course files and add erklaerung slides to 223015c

- split slides/klausurfragen.md into course-specific files:
  - slides/223015b/klausurfragen.md (blocks J-O: dateiformate)
  - slides/223015c/klausurfragen.md (blocks A-I: it-grundlagen)
- add erklaerung slides to 223015c (16 new vertiefung slides)
- update erklaerung slides in 223015b with deeper content
- update makefile to build klausurfragen per-course
- remove global klausurfragen from root index

slides/223015b/02-bild-audio-video.md

@@ -70,18 +70,23 @@ section.aufgabe footer {
 }
 section.erklaerung {
   font-size: 1.1rem;
-  background: linear-gradient(180deg, #f8fbff 0%, #e8f4fc 100%) !important;
-  border-left: 6px solid #1e5f8a;
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 40px,
+    #fff 40px,
+    #fff 80px
+  ) !important;
+}
+@media print {
+  section.erklaerung {
+    background: #e3f2fd !important;
+  }
 }
 section.erklaerung h1 {
-  font-size: 1.6rem;
+  font-size: 1.5rem;
   color: #1e5f8a;
-  margin-bottom: 0.5rem;
-}
-section.erklaerung h2 {
-  font-size: 1.3rem;
-  color: #1f2937;
-  margin-top: 0;
+  margin-bottom: 0.3rem;
 }
 section.erklaerung ul,
 section.erklaerung ol {
@@ -89,11 +94,11 @@ section.erklaerung ol {
   line-height: 1.4;
 }
 section.erklaerung p {
-  font-size: 1.05rem;
-  line-height: 1.5;
+  font-size: 1.0rem;
+  line-height: 1.4;
 }
 section.erklaerung table {
-  font-size: 0.95rem;
+  font-size: 0.9rem;
 }
 </style>
 
@@ -251,26 +256,19 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Rastergrafiken: Erklaerung
+# Rastergrafik – Vertiefung
 
-**Definition:** Bilder als zweidimensionales Raster (Array) von Pixeln mit Farbwerten.
+Ein Pixel ist die kleinste adressierbare Einheit. Bei 24-Bit-Farbtiefe speichert jeder Pixel drei 8-Bit-Werte (0–255) für Rot, Grün und Blau. Diese additive Farbmischung erzeugt 256³ = 16,7 Millionen mögliche Farbtöne.
 
-**Speicherberechnung (unkomprimiert):**
-```
-Breite × Hoehe × (Farbtiefe ÷ 8) = Bytes
-```
+**Speicherberechnung:** `Breite × Höhe × Bytes pro Pixel`
 
-**Beispiel:** 1920×1080 bei 24 Bit
-- 1920 × 1080 × 3 = 6.220.800 Bytes ≈ **6,2 MB**
+| Auflösung | Farbtiefe | Berechnung | Größe |
+|-----------|-----------|------------|-------|
+| 1920×1080 | 24 Bit (3 B) | 2.073.600 × 3 | 6,2 MB |
+| 4K (3840×2160) | 24 Bit | 8.294.400 × 3 | 24,9 MB |
+| 4K | 32 Bit (4 B) | 8.294.400 × 4 | 33,2 MB |
 
-| Farbtiefe | Farben | Anwendung |
-|-----------|--------|-----------|
-| 1 Bit | 2 | S/W, Fax |
-| 8 Bit | 256 | Graustufen, GIF |
-| 24 Bit | 16,7 Mio | True Color (RGB) |
-| 32 Bit | 16,7 Mio + Alpha | Transparenz |
-
-**Merkhilfe:** "24 Bit = 3 Bytes = RGB" (8+8+8)
+Der Alpha-Kanal (32 Bit) speichert Transparenz als Wert von 0 (unsichtbar) bis 255 (vollständig sichtbar). PNG nutzt dies für weiche Kanten; JPEG unterstützt keinen Alpha-Kanal.
 
 ---
 
@@ -332,26 +330,23 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Vektorgrafiken: Erklaerung
+# Vektorgrafik – Vertiefung
 
-**Definition:** Bilder als mathematische Beschreibung geometrischer Formen (Pfade, Kurven, Formen).
+Vektorgrafiken speichern keine Pixel, sondern mathematische Beschreibungen: Koordinaten, Kurvenparameter (Bézier-Kontrollpunkte), Füllfarben, Strichstärken. Der Renderer berechnet die Pixel erst bei der Ausgabe – daher beliebig skalierbar.
 
-| Eigenschaft | Raster | Vektor |
-|-------------|--------|--------|
-| Speicherung | Pixel-Array | Geometrie-Anweisungen |
-| Skalierung | Qualitaetsverlust | Verlustfrei |
-| Ideal fuer | Fotos | Logos, Icons |
-| Formate | JPEG, PNG | SVG, PDF, AI |
+**Bézier-Kurven** (Pierre Bézier, 1962, für Renault-Karosserien entwickelt):
+- Definiert durch Ankerpunkte und Kontrollpunkte
+- Kubische Bézier: 2 Anker + 2 Kontrollpunkte
+- Mathematisch exakt reproduzierbar
 
-**SVG-Beispiel:**
-```xml
-<circle cx="50" cy="50" r="40" fill="red"/>
-```
-→ Beschreibt WAS, nicht WIE (deklarativ)
+| Aspekt | Raster | Vektor |
+|--------|--------|--------|
+| Skalierung 10× | Pixel sichtbar | Perfekt scharf |
+| Foto-Realismus | Gut geeignet | Unpraktikabel |
+| Dateigröße Logo | Wächst mit Auflösung | Konstant (~5 KB) |
+| Editierbarkeit | Destruktiv | Nicht-destruktiv |
 
-**Konvertierung:**
-- Vektor → Raster: Einfach (Rasterisierung)
-- Raster → Vektor: Schwierig (Tracing)
+**Rasterisierung:** GPU wandelt Vektordaten in Pixel um. Geschieht bei jeder Darstellung neu – deshalb ist ein 4K-Monitor schärfer als ein 1080p-Monitor bei gleichem SVG.
 
 ---
 
@@ -423,24 +418,21 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Psychovisuelle Wahrnehmung: Erklaerung
+# Psychovisuelle Wahrnehmung – Vertiefung
 
-**Definition:** Das menschliche Auge hat Schwaechen, die Kompressionsverfahren gezielt ausnutzen.
+Die Netzhaut enthält ~120 Mio. Stäbchen (Helligkeitswahrnehmung) aber nur ~6 Mio. Zapfen (Farbwahrnehmung). Dieses 20:1-Verhältnis erklärt, warum JPEG Farbinformationen stärker reduzieren kann als Helligkeitsinformationen.
 
-**Was Menschen schlecht sehen:**
-| Eigenschaft | Wahrnehmung | JPEG-Strategie |
-|-------------|-------------|----------------|
-| Farbe vs. Helligkeit | Helligkeit besser | Farbaufloesung reduzieren |
-| Hohe Frequenzen | Schlechter | Feine Details verwerfen |
-| Kleine Unterschiede | Kaum merkbar | Quantisierung |
+**Räumliche Frequenz** beschreibt, wie schnell sich die Helligkeit über eine Bildfläche ändert:
+- **Niedrig:** Himmel, Wand – große einheitliche Flächen
+- **Hoch:** Haare, Texturen, Schrift – schnelle Wechsel
 
-**Raeumliche Frequenz:**
-- **Niedrig:** Langsame Aenderung = grosse Flaechen
-- **Hoch:** Schnelle Aenderung = feine Details, Kanten
+Das Auge ist ein Tiefpassfilter: Hohe Frequenzen (feine Details) werden schwächer wahrgenommen. JPEG verwirft daher zuerst die hohen Frequenzen – der Qualitätsverlust bleibt meist unsichtbar.
 
-**Biologische Grundlage:**
-- Mehr Staebchen (Helligkeit) als Zapfen (Farbe) im Auge
-- Aehnlich: Psychoakustik bei MP3 (Maskierungseffekte)
+| Biologisches Limit | Ausnutzung in JPEG |
+|-------------------|-------------------|
+| Farbauflösung ~20× geringer | Chroma Subsampling (4:2:0) |
+| Hohe Frequenzen unscharf | DCT + Quantisierung |
+| Kontrast-Maskierung | Artefakte in Texturen versteckt |
 
 ---
 
@@ -552,25 +544,27 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# JPEG Farbraumkonversion: Erklaerung
+# Farbraumkonversion – Vertiefung
 
-**Definition:** Umwandlung von RGB (Rot-Gruen-Blau) in YCbCr (Helligkeit + Farbdifferenzen).
+RGB→YCbCr nutzt die Biologie des menschlichen Auges: 120 Mio. Stäbchen (Helligkeit) vs. nur 6 Mio. Zapfen (Farbe) – ein 20:1-Verhältnis. Die Transformation erfolgt über eine lineare Matrix:
 
-| Kanal | Bedeutung | Behandlung |
-|-------|-----------|------------|
-| **Y** | Luminanz (Helligkeit) | Volle Aufloesung behalten |
-| **Cb** | Blau-Gelb-Differenz | Kann reduziert werden |
-| **Cr** | Rot-Gruen-Differenz | Kann reduziert werden |
+```
+Y  =  0.299·R + 0.587·G + 0.114·B
+Cb = −0.169·R − 0.331·G + 0.500·B + 128
+Cr =  0.500·R − 0.419·G − 0.081·B + 128
+```
 
-**Warum diese Trennung?**
-- Menschliches Auge: empfindlicher fuer Helligkeit als Farbe
-- Y behaelt volle Aufloesung → Schaerfe erhalten
-- Cb/Cr reduziert (Chroma Subsampling) → Daten sparen
+Die Gewichtung (G dominiert mit 59%) entspricht der spektralen Empfindlichkeit des Auges bei Tageslicht. Y enthält alle Schärfeinformation; Cb/Cr können reduziert werden.
 
-**Chroma Subsampling 4:2:0:**
-- 4 Pixel teilen sich einen Farbwert
-- Jeder Pixel behaelt eigene Helligkeit
-- = 50% Datenreduktion bei kaum sichtbarem Verlust
+**Chroma Subsampling – Notation J:a:b** (bezogen auf 4×2 Pixel):
+
+| Schema | Farbdaten | Einsatz |
+|--------|-----------|---------|
+| 4:4:4 | 100% | Postproduktion, Grafik |
+| 4:2:2 | 50% | Broadcast, Pro-Video |
+| 4:2:0 | 25% | JPEG, H.264, Streaming |
+
+Bei 4:2:0 teilen sich 4 Pixel einen Farbwert, behalten aber individuelle Helligkeit → 50% Dateneinsparung bei kaum sichtbarem Unterschied.
 
 ---
 
@@ -763,25 +757,26 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Huffman-Coding: Erklaerung
+# Huffman-Coding – Vertiefung
 
-**Definition:** Verlustfreie Kompression durch variable Codelaengen basierend auf Zeichenhaeufigkeit.
+David Huffman entwickelte 1952 als Student am MIT einen optimalen Algorithmus für präfixfreie Codes – ursprünglich als Hausaufgabe, die zur Veröffentlichung führte.
 
-**Prinzip:**
-- Haeufige Zeichen → kurze Codes
-- Seltene Zeichen → lange Codes
-- Praefix-frei: Kein Code ist Anfang eines anderen
+**Algorithmus (Bottom-Up-Baumkonstruktion):**
+1. Alle Symbole nach Häufigkeit sortieren
+2. Die zwei seltensten Symbole zu einem Knoten kombinieren
+3. Wiederholen bis nur noch die Wurzel übrig ist
+4. Codes ablesen: links = 0, rechts = 1
 
-**Beispiel ABRACADABRA:**
-| Zeichen | Haeufigkeit | Code |
-|---------|-------------|------|
-| A | 5× | `0` (1 Bit) |
-| B | 2× | `10` (2 Bit) |
-| R | 2× | `110` (3 Bit) |
+**Präfixfreiheit:** Kein Code ist Anfang eines anderen → sofort dekodierbar ohne Trennzeichen.
 
-**Kompression:** 88 Bit → 23 Bit = **74% gespart**
+| Eigenschaft | Huffman | Arithmetisch |
+|-------------|---------|--------------|
+| Einheit | Ganze Bits | Fraktionale Bits |
+| Optimalität | Optimal für ganze Bits | Näher an Entropie |
+| Geschwindigkeit | Schneller | Langsamer |
+| JPEG-Einsatz | Standard (Baseline) | Optional (selten) |
 
-**Einsatz:** JPEG, ZIP, PNG, MP3, DEFLATE
+JPEG verwendet zwei Huffman-Tabellen: eine für DC-Koeffizienten (Durchschnittswerte), eine für AC-Koeffizienten (Frequenzen). Die Tabellen sind im JPEG-Header gespeichert.
 
 ---
 
@@ -931,27 +926,21 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# WebP & AVIF: Erklaerung
+# WebP & AVIF – Vertiefung
 
-**Definition:** Moderne Bildformate mit besserer Kompression als JPEG.
+**WebP** entstand 2010 aus Googles VP8-Videocodec (On2 Technologies, für $133M gekauft). Statt I-Frames für Video werden sie als Einzelbilder verwendet. WebP nutzt Intra-Frame-Prediction, die benachbarte Blöcke zur Vorhersage verwendet – effizienter als JPEGs blockweise DCT.
 
-| Format | Jahr | Basis | Vorteil |
-|--------|------|-------|---------|
-| **WebP** | 2010 | VP8 (Google) | 25-35% kleiner als JPEG |
-| **AVIF** | 2019 | AV1 | 50% kleiner als JPEG |
+**AVIF** basiert auf dem AV1-Videocodec, entwickelt 2015–2018 von der Alliance for Open Media (Google, Apple, Netflix, Amazon, Microsoft, Mozilla). Nach dem Patent-Chaos von H.265/HEVC vereinten sich die Konkurrenten für einen lizenzfreien Standard.
 
-**WebP Features:**
-- Lossy und Lossless
-- Transparenz (Alpha)
-- Animationen (ersetzt GIF)
+| Aspekt | WebP | AVIF |
+|--------|------|------|
+| Basis-Codec | VP8/VP9 | AV1 |
+| Kompression vs. JPEG | 25–35% besser | 50% besser |
+| HDR/Wide Gamut | Nein | Ja (10/12 Bit) |
+| Encoding-Geschwindigkeit | Schnell | Sehr langsam |
+| Browser-Support 2025 | 97%+ | 93%+ |
 
-**AVIF Features:**
-- HDR-Unterstuetzung
-- Patent-frei (Alliance for Open Media)
-- Beste Kompression, aber langsamer
-
-**Browser-Support 2025:** WebP universell, AVIF waechst
-**Realitaet:** JPEG bleibt dominant (Kompatibilitaet)
+**Warum JPEG dominiert:** Kameras, Bildbearbeitungssoftware und Content-Management-Systeme sind auf JPEG optimiert. Der Wechsel erfordert Infrastruktur-Updates über die gesamte Pipeline.
 
 ---
 
@@ -1077,26 +1066,26 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Container vs. Codec: Erklaerung
+# Container vs. Codec – Vertiefung
 
-**Definition:** Container und Codec sind zwei verschiedene Konzepte bei Videodateien.
+**Container** (Multiplexer-Format) organisiert mehrere Datenströme mit Timing-Informationen. Er enthält keine Kompressionslogik, sondern synchronisiert Video, Audio, Untertitel und Metadaten.
 
-| Begriff | Bedeutung | Beispiele |
-|---------|-----------|-----------|
-| **Container** | Dateiformat/"Box" | MP4, MKV, WebM, MOV |
-| **Codec** | Kompressionsalgorithmus | H.264, H.265, VP9, AV1 |
+**Codec** (Coder-Decoder) definiert den Kompressionsalgorithmus. Derselbe Container kann verschiedene Codecs enthalten – die Dateiendung verrät den Codec nicht.
 
-**Container enthaelt:**
-- Video-Stream (komprimiert mit Codec)
-- Audio-Stream(s)
-- Untertitel
-- Metadaten (Kapitel, Thumbnail)
+| Container | Entwickler | Typische Codecs | Besonderheit |
+|-----------|------------|-----------------|--------------|
+| MP4 | ISO/MPEG | H.264, H.265, AAC | Web-Standard, DRM-fähig |
+| MKV | Matroska | Alle | Beliebig viele Streams, Kapitel |
+| WebM | Google | VP9, AV1, Opus | HTML5-optimiert, lizenzfrei |
+| MOV | Apple | ProRes, H.264 | Professionelle Produktion |
 
-**Wichtig:** Gleiche Endung ≠ gleicher Inhalt!
-- film.mp4 kann H.264, H.265 oder AV1 enthalten
-- Tool-Tipp: **MediaInfo** zeigt beides an
+**Metadaten im Container:**
+- Timecodes für Frame-genaue Synchronisation
+- Kapitelmarken, Thumbnails
+- Sprach-Tags für Audio/Untertitel
+- HDR-Metadaten (MaxCLL, MaxFALL)
 
-**Merkhilfe:** "Container = Schachtel, Codec = Verpackungsart"
+**Praktisches Problem:** Eine `.mp4`-Datei mit AV1-Codec spielt auf älteren Geräten nicht ab, obwohl sie MP4 „unterstützen" – der Hardware-Decoder fehlt für AV1.
 
 ---
 
@@ -1329,26 +1318,25 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# H.264/AVC: Erklaerung
+# H.264/AVC – Vertiefung
 
-**Definition:** Der dominierende Video-Codec seit 2003, der modernes Video-Streaming erst ermoeglichte.
+H.264 (2003) ermöglichte erst YouTube (2005), Netflix-Streaming (2007) und Blu-ray. Vor H.264 war MPEG-2 Standard – H.264 erreichte bei gleicher Qualität die halbe Bitrate.
 
-**Warum so erfolgreich?**
-| Eigenschaft | Bedeutung |
-|-------------|-----------|
-| Kompression | ~100:1 moeglich |
-| Hardware | Decoder in jedem Geraet seit ~2010 |
-| Verbreitung | YouTube, Netflix, Blu-ray |
+**Technische Innovationen:**
+- **Variable Blockgrößen:** 16×16 bis 4×4 Macroblocks (MPEG-2: nur 16×16)
+- **Intra-Prediction:** Blöcke werden aus Nachbarn vorhergesagt
+- **In-Loop Deblocking:** Filter reduziert Blockartefakte vor der Referenzierung
+- **CABAC:** Arithmetic Coding ersetzt Huffman (10–15% effizienter)
 
-**Technische Features:**
-- Variable Block-Groessen (16×16 bis 4×4)
-- Deblocking-Filter (reduziert Blocking-Artefakte)
-- I-, P-, B-Frames (temporale Kompression)
+| Profile | Anwendung | Max. Auflösung |
+|---------|-----------|----------------|
+| Baseline | Videotelefonie, ältere Geräte | 480p |
+| Main | Broadcast, Streaming | 1080p |
+| High | Blu-ray, professionell | 4K |
 
-**Patent-Situation:**
-- MPEG-LA Pool: 2000+ Patente
-- "Internet Broadcast" fuer Endnutzer kostenlos
-- Hardware-Decoder: ~$0,20/Geraet
+**Hardware-Ubiquität:** Seit 2010 hat jedes Smartphone, jede GPU, jeder Smart-TV einen H.264-Hardware-Decoder. Encoding in Echtzeit braucht keine CPU – das ermöglichte erst mobiles Video-Streaming und Videotelefonie.
+
+**Patent-Pool (MPEG-LA):** ~2.000 Patente von 30+ Unternehmen. Endnutzer-Streaming ist lizenzfrei; Hardware-Hersteller zahlen ~$0,20/Gerät.
 
 ---
 
@@ -1462,26 +1450,22 @@ KLAUSURRELEVANT:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# AV1: Erklaerung
+# AV1 – Vertiefung
 
-**Definition:** Der offene, lizenzfreie Video-Codec der Zukunft, entwickelt von der Alliance for Open Media.
+Die **Alliance for Open Media** (2015) vereinte Konkurrenten nach dem Patent-Chaos von H.265/HEVC. Drei separate Patent-Pools (MPEG-LA, HEVC Advance, Velos Media) machten H.265-Lizenzierung unberechenbar – die Industrie wollte einen garantiert lizenzfreien Standard.
 
-**Alliance for Open Media (AOM):**
-- Gegruendet 2015: Google, Netflix, Amazon, Microsoft, Apple, Mozilla
-- Ziel: Patent-freier Standard nach H.265-Chaos
+**Gründungsmitglieder:** Google, Mozilla, Cisco, Netflix, Amazon, Microsoft. Apple trat 2018 bei – historisch, da Apple sonst eigene Standards bevorzugt.
 
-| Eigenschaft | AV1 |
-|-------------|-----|
-| Effizienz | 30% besser als H.265 |
-| Lizenz | Royalty-free, Open Source |
-| Features | 8K, HDR, hohe Frame-Rates |
+| Technische Innovation | Beschreibung |
+|----------------------|--------------|
+| Superblocks | Bis 128×128 Pixel (H.264: max 16×16) |
+| Prediction Modes | 56 Intra-Modi (H.264: 9) |
+| Transform | 10 verschiedene Transformtypen |
+| Film Grain Synthesis | Filmkorn wird als Parameter übertragen |
 
-**Stand 2025:**
-- YouTube, Netflix nutzen AV1 fuer 4K/8K
-- Hardware-Encoder in aktuellen GPUs
-- Emmy-Gewinner 2024 fuer technische Innovation
+**Encoding-Performance:** Software-Encoding ist 50–200× langsamer als H.264. Erst Hardware-Encoder (Intel ab Gen 12, NVIDIA RTX 40, Apple M3) machen Echtzeit-Encoding praktikabel.
 
-**Nachteil:** Encoding sehr langsam (Hardware loest das)
+**Adoption 2025:** YouTube und Netflix nutzen AV1 für 4K/8K-Streams. 2024 gewann AV1 einen Emmy für technische Innovation – offene Standards können Industriestandard werden.
 
 ---