add data units, global data growth and AI content statistics slides to termin 1

- add CSS variables for colors (foreground, highlight, dimmed)
- style code blocks with dark background and blue accent
- improve inline code appearance
- update link colors
- add deploy restriction to CLAUDE.md

.claude/commands/humanify.md

@@ -0,0 +1,75 @@
+# Humanify Slide Command
+
+Transformiere die angegebene Slide(s) in meinen persönlichen Lehr- und Erzählstil.
+
+**Argument:** $ARGUMENTS (Slide-Nummer, Titel, oder Range wie "15-20")
+
+---
+
+## Mein pädagogischer Stil (extrahiert aus Termin 1)
+
+### 1. Konversationelle Speaker Notes auf Deutsch
+- Direkte Zitate in Anführungszeichen: `"Ich schaue in viele fragende Gesichte..."`
+- Natürliche, gesprochene Sprache - kein Vorlesungsdeutsch
+- Persönliche Ansprache: "ihr", "euch", "wir"
+
+### 2. Storytelling & Spannungsbogen
+- Cliffhanger: `"am Ende der heutigen Veranstaltung werdet ihr mir genau sagen können..."`
+- Übergänge zwischen Konzepten als Geschichte erzählen
+- Neugier wecken bevor die Antwort kommt
+
+### 3. Rhetorische Fragen & Interaktion
+- `Frage: "Weiß jemand wieviele Zustände wir mit 8 Bit beschreiben können?"`
+- `Fangfrage: "Wie hoch ist die Sample Rate von Vinyls?"` → Überraschende Antwort
+- Einladungen: `"Wie würdet ihr vorgehen?"`
+
+### 4. Literarische & kulturelle Referenzen
+- `»256 Shades of Gray«` (mit deutschen Guillemets »...«)
+- Metaphern: `"ganz literarisch"`, `"stellt euch vor ihr seid ArchäologInnen"`
+- Popkulturelle Anknüpfungspunkte
+
+### 5. Rätsel & Denkaufgaben
+- Seerose-Rätsel für exponentielles Wachstum
+- Aktivierung statt passives Zuhören
+
+### 6. Etymologie & Historie
+- Wortherkunft: `"von griech. hexa „sechs" und lat. decem „zehn""`
+- Historische Anekdoten: `"Es gab durchaus einen »Machtkampf«..."`
+- Personen hinter den Konzepten
+
+### 7. Progressive Enthüllung
+- Konzepte über mehrere Slides aufbauen (Das Byte: 3 Slides)
+- Erst Frage, dann Antwort auf nächster Slide
+- Spannung halten
+
+### 8. Struktur der Speaker Notes
+```markdown
+<!--
+"Gesprochener Text in Anführungszeichen"
+
+Fakten und Hintergrundinfos als Stichpunkte:
+- Punkt 1
+- Punkt 2
+
+Frage: "Interaktive Frage an Studierende?"
+
+Überleitung: "Und damit kommen wir zu..."
+-->
+```
+
+---
+
+## Aufgabe
+
+1. Lies die angegebene(n) Slide(s) aus den Dateien in `slides/`
+2. Analysiere den aktuellen Inhalt und die Speaker Notes
+3. Transformiere die Speaker Notes in meinen Stil:
+   - Füge gesprochene Zitate hinzu
+   - Baue rhetorische Fragen ein
+   - Ergänze Übergänge und Storytelling-Elemente
+   - Füge Etymologie oder historischen Kontext hinzu wo passend
+   - Nutze deutsche Guillemets »...« für Titel/Zitate
+4. Behalte die Slide-Inhalte (Bullet Points, Code, Tabellen) weitgehend bei
+5. Zeige mir die vorgeschlagenen Änderungen bevor du sie anwendest
+
+**WICHTIG:** Nicht übertreiben! Authentisch bleiben, nicht jede Slide braucht alles.

.claude/skills/marp/REFERENCE.md

@@ -0,0 +1,373 @@
+# Marp/Marpit Complete Reference
+
+## Overview
+
+**Marp** = Markdown Presentation Ecosystem
+**Marpit** = The core framework ("skinny framework for creating slide deck from Markdown")
+
+Built-in themes: `default`, `gaia`, `uncover`
+
+---
+
+## Slide Structure
+
+### Slide Separation
+Slides are separated by horizontal rulers:
+```markdown
+---
+```
+Alternatives: `___`, `***`, `- - -`
+
+**Important**: May need empty line before `---` per CommonMark spec.
+
+### Basic Document Structure
+```markdown
+---
+marp: true
+theme: gaia
+paginate: true
+---
+
+# First Slide
+
+Content here
+
+---
+
+# Second Slide
+
+More content
+
+<!-- Speaker notes go here -->
+```
+
+---
+
+## Directives
+
+### Syntax Options
+
+**HTML Comments:**
+```markdown
+<!-- theme: default -->
+<!-- paginate: true -->
+```
+
+**Front-matter (YAML):**
+```markdown
+---
+theme: default
+paginate: true
+---
+```
+
+### Directive Scopes
+
+| Scope | Applies to | Syntax |
+|-------|-----------|--------|
+| Global | Entire deck | Normal directive |
+| Local | Current + following slides | Normal directive mid-document |
+| Spot | Single slide only | Underscore prefix: `_directive` |
+
+### Global Directives
+- `theme` — Slide deck theme
+- `style` — Custom CSS
+- `lang` — Language attribute (accessibility)
+- `headingDivider` — Auto-split at heading levels (1-6)
+
+### Local Directives
+- `paginate` — Page numbers (true/false/hold/skip)
+- `header` — Persistent header text
+- `footer` — Persistent footer text
+- `class` — CSS class for slide
+- `backgroundColor` — Slide background color
+- `backgroundImage` — Background image URL
+- `backgroundPosition` — CSS background-position
+- `backgroundRepeat` — CSS background-repeat
+- `backgroundSize` — CSS background-size
+- `color` — Text color
+
+### Spot Directive Example
+```markdown
+<!-- _backgroundColor: aqua -->
+<!-- _class: lead -->
+```
+Only affects current slide.
+
+### Pagination Values
+- `true` — Show and increment
+- `false` — Hide but increment
+- `hold` — Show without incrementing
+- `skip` — Hide without incrementing
+
+### Heading Divider
+```markdown
+---
+headingDivider: 2
+---
+
+# Section 1
+Content
+
+## Slide 1.1    <!-- auto slide break -->
+Content
+
+## Slide 1.2    <!-- auto slide break -->
+Content
+```
+
+---
+
+## Image Syntax
+
+### Basic Resizing
+```markdown
+![w:200](image.jpg)           <!-- width 200px -->
+![h:300](image.jpg)           <!-- height 300px -->
+![w:200 h:150](image.jpg)     <!-- both -->
+```
+
+Units: px, em, cm, pt, etc. (no viewport units vw/vh)
+
+### Image Filters
+```markdown
+![blur:10px](image.jpg)
+![brightness:1.5](image.jpg)
+![contrast:200%](image.jpg)
+![grayscale:1](image.jpg)
+![sepia:50%](image.jpg)
+![hue-rotate:180deg](image.jpg)
+![invert:100%](image.jpg)
+![opacity:0.5](image.jpg)
+![saturate:2](image.jpg)
+![drop-shadow:0,5px,10px,rgba(0,0,0,.4)](image.jpg)
+```
+
+Combine multiple:
+```markdown
+![brightness:.8 sepia:50%](image.jpg)
+```
+
+### Background Images
+```markdown
+![bg](image.jpg)              <!-- full background -->
+![bg fit](image.jpg)          <!-- contain/fit -->
+![bg cover](image.jpg)        <!-- cover (default) -->
+![bg auto](image.jpg)         <!-- original size -->
+![bg 150%](image.jpg)         <!-- scale percentage -->
+```
+
+### Split Backgrounds
+```markdown
+![bg left](image.jpg)         <!-- left half -->
+![bg right](image.jpg)        <!-- right half -->
+![bg left:40%](image.jpg)     <!-- custom split -->
+![bg right:33%](image.jpg)
+```
+
+### Multiple Backgrounds
+```markdown
+![bg](image1.jpg)
+![bg](image2.jpg)
+![bg](image3.jpg)
+```
+Arranges horizontally by default.
+
+```markdown
+![bg vertical](image1.jpg)
+![bg](image2.jpg)
+```
+Arranges vertically.
+
+---
+
+## Fragmented Lists (Animations)
+
+### Bullet Lists — Use `*`
+```markdown
+* First item      <!-- reveals first -->
+* Second item     <!-- reveals second -->
+* Third item      <!-- reveals third -->
+```
+
+Regular `-` or `+` bullets don't animate.
+
+### Ordered Lists — Use `)`
+```markdown
+1) First item
+2) Second item
+3) Third item
+```
+
+Regular `.` numbered lists don't animate.
+
+### Output
+```html
+<li data-marpit-fragment="1">First</li>
+<li data-marpit-fragment="2">Second</li>
+```
+
+**Note**: Actual animation depends on presentation viewer.
+
+---
+
+## Theme CSS
+
+### Required Metadata
+```css
+/* @theme my-theme */
+```
+
+### Core Selectors
+```css
+/* Slide container */
+section {
+  width: 1280px;
+  height: 720px;
+  font-size: 32px;
+}
+
+/* Higher specificity alternative */
+:root {
+  --color-primary: #3498db;
+}
+
+/* Pagination */
+section::after {
+  content: attr(data-marpit-pagination) ' / ' attr(data-marpit-pagination-total);
+}
+```
+
+### Scoped Styles
+```markdown
+<style scoped>
+/* Only this slide */
+h1 { color: red; }
+</style>
+```
+
+### Global Inline Styles
+```markdown
+<style>
+/* All slides */
+section { background: #f0f0f0; }
+</style>
+```
+
+### Theme Inheritance
+```css
+/* @theme derived-theme */
+@import 'default';
+/* or */
+@import-theme 'default';
+```
+
+### Units
+- `rem` scales relative to slide `<section>` (isolated from HTML root)
+- Slide dimensions require absolute units (px, cm, in, mm)
+
+---
+
+## Marp CLI
+
+### Installation
+```bash
+npm install -g @marp-team/marp-cli
+# or
+brew install marp-cli
+```
+
+### Basic Conversion
+```bash
+marp slide.md                    # → HTML
+marp --pdf slide.md              # → PDF
+marp --pptx slide.md             # → PowerPoint
+marp --images png slide.md       # → PNG images
+```
+
+### Development Server
+```bash
+marp --server ./slides/
+PORT=1312 marp --server ./
+```
+
+Query formats: `http://localhost:8080/deck.md?pdf`
+
+### Watch Mode
+```bash
+marp --watch slide.md
+```
+
+### Key Options
+```bash
+-o, --output <file>      # Output path
+-w, --watch              # Watch for changes
+-s, --server             # HTTP server mode
+-p, --preview            # Open preview window
+--pdf                    # PDF output
+--pptx                   # PowerPoint output
+--images [png|jpeg]      # Image output
+--image-scale <n>        # Resolution (e.g., 2 for 2x)
+--allow-local-files      # Enable local file access (security risk)
+--pdf-notes              # Include speaker notes in PDF
+--browser <name>         # chrome, edge, firefox
+```
+
+---
+
+## Common Patterns
+
+### Title Slide
+```markdown
+<!-- _class: lead -->
+
+# Presentation Title
+
+**Author Name**
+Date
+```
+
+### Two-Column Layout (via background)
+```markdown
+![bg left:50%](image.jpg)
+
+# Right Content
+
+Text appears on right side
+```
+
+### Speaker Notes
+```markdown
+# Slide Title
+
+Content
+
+<!--
+These are speaker notes.
+Not visible in slides.
+Visible in presenter mode.
+-->
+```
+
+### Custom Class
+```markdown
+<!-- _class: centered dark -->
+
+# Centered Dark Slide
+```
+
+Then in CSS/theme:
+```css
+section.centered { text-align: center; }
+section.dark { background: #222; color: #fff; }
+```
+
+---
+
+## Project Conventions (This Project)
+
+- Theme: `gaia`
+- Assets: `./assets/filename.png`
+- Build output: `build/`
+- Dev server: `make dev` (port 1312)
+- Never end with `---` (creates empty slide)

.claude/skills/marp/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: marp
+description: Marp/Marpit documentation and slide creation guide. Use this skill when working with Marp presentations, slide syntax, themes, directives, or troubleshooting Marp-related issues.
+allowed-tools:
+  - Read
+  - Glob
+  - Grep
+  - WebFetch
+---
+
+# Marp/Marpit Skill
+
+## Purpose
+
+This skill provides comprehensive knowledge about Marp (Markdown Presentation Ecosystem) and its core engine Marpit. Use this when creating, editing, or troubleshooting Markdown-based slide presentations.
+
+## Documentation Sources
+
+When you need Marp information, fetch from these official sources:
+
+### Marpit Framework (Core Engine)
+- **Main docs**: https://marpit.marp.app/
+- **Markdown syntax**: https://marpit.marp.app/markdown
+- **Directives**: https://marpit.marp.app/directives
+- **Theme CSS**: https://marpit.marp.app/theme-css
+- **Fragmented list**: https://marpit.marp.app/fragmented-list
+- **Image syntax**: https://marpit.marp.app/image-syntax
+
+### Marp CLI
+- **Usage guide**: https://github.com/marp-team/marp-cli
+
+## Key Concepts to Learn
+
+### 1. Slide Separation
+Slides are separated by `---` (horizontal rule). The first `---` after frontmatter starts the first slide.
+
+### 2. Directives
+- **Global directives**: Apply to all slides (in frontmatter)
+- **Local directives**: Apply to current slide only (`<!-- _directive: value -->`)
+- **Spot directives**: Underscore prefix for local scope
+
+### 3. Image Syntax
+Marp extends standard Markdown image syntax:
+- `![bg](image.jpg)` - background image
+- `![bg fit](image.jpg)` - fit to slide
+- `![bg right:40%](image.jpg)` - split background
+- `![w:200](image.jpg)` - width filter
+- `![h:300](image.jpg)` - height filter
+
+### 4. Theme CSS
+- Themes use CSS with special Marpit selectors
+- `section` = slide container
+- `section::after` = pagination
+- CSS variables for theming
+
+### 5. Scoped Styles
+```html
+<style scoped>
+/* Only applies to this slide */
+</style>
+```
+
+## Workflow
+
+When asked about Marp:
+
+1. **Read REFERENCE.md first** - Contains comprehensive syntax documentation
+2. **Check local files** - Read existing slides and themes in the project
+3. **Fetch official docs if needed** - Use WebFetch for edge cases
+4. **Provide concrete examples** - Show actual Marp syntax
+5. **Reference project conventions** - Follow CLAUDE.md guidelines
+
+## Project-Specific Notes
+
+This project uses:
+- Theme: `gaia`
+- Assets path: `./assets/`
+- Build output: `build/`
+- Dev server: `make dev` (port 1312)

.gitignore

@@ -61,3 +61,6 @@ Desktop.ini
 *.html
 !build/*.html
 *.pdf
+index.md.bak
+hdm-lehrauftrag-uebersicht.md
+slides/assets-original/

ASSETS.md

@@ -1,172 +0,0 @@
-# Asset-Liste: Bildbeschreibungen & Kontext
-
-## **Allgemein / Titel**
-
-| Dateiname | Kontext | Beschreibung für Suche/Generierung |
-|-----------|---------|-----------------------------------|
-| `digital-landscape.jpg` | Titelfolie, Einstieg | Futuristische digitale Landschaft mit Netzwerk-Verbindungen, leuchtende Datenpunkte, abstrakte binäre Muster, Glasfaser-Optik, cyber-ästhetisch, blau-violette Farbpalette |
-
----
-
-## **Woche 1: Bits, Bytes & Encoding**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `matrix-code.jpg` | Hex-Dump Mystery-Folie | Matrix-Style fallender grüner Code, binäre Zahlen, Hex-Zahlen (0-9, A-F), schwarzer Hintergrund, mysteriös, "digital rain" |
-| `lightbulb-onoff.jpg` | Bit-Demonstration (AN/AUS) | Zwei Glühbirnen nebeneinander: eine leuchtend (AN/gelb), eine dunkel (AUS/grau), minimalistisch, einfache Illustration, technisch-didaktisch |
-| `grayscale-gradient.jpg` | 256 Graustufen-Beispiel | Sanfter Verlauf von reinem Schwarz (#000000) zu reinem Weiß (#FFFFFF), horizontal oder vertikal, 256 diskrete Stufen sichtbar, technische Visualisierung |
-| `rgb-color-model.jpg` | RGB-Farben erklären | RGB-Farbmodell-Diagramm mit drei überlappenden Kreisen (Rot, Grün, Blau), Venn-Diagramm-Stil, zeigt additive Farbmischung (Rot+Grün=Gelb, etc.), sauber, lehrreich |
-| `ascii-table.png` | ASCII-Tabelle (1963) | Vollständige ASCII-Tabelle, 128 Zeichen (0-127), tabellarische Darstellung mit Dezimal-, Hex- und Zeichen-Spalten, retro/technisch, schwarz-weiß oder grün-schwarz (Terminal-Stil) |
-| `hex-binary-table.jpg` | Hexadezimal-Erklärung | Konversionstabelle: Dezimal (0-15), Binär (0000-1111), Hexadezimal (0-F), drei Spalten, übersichtlich, didaktische Grafik |
-| `hexeditor-screenshot.png` | Hex-Editor mit PNG-Datei | Screenshot eines Hex-Editors (z.B. HxD, Hex Fiend), zeigt PNG-Datei-Header mit Magic Number `89 50 4E 47`, linke Spalte Adressen, Mitte Hex-Werte, rechts ASCII-Darstellung |
-
----
-
-## **Woche 2: MP3 & Audio-Kompression**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `cassette-ipod.jpg` | Analog vs. Digital Kontrast | Kassette (1980er, retro) neben iPod Classic (2000er, weiß), Side-by-Side-Vergleich, nostalgisch vs. modern, auf neutralem Hintergrund |
-| `compression-types.jpg` | Lossless vs. Lossy Visualisierung | Diagramm mit zwei Pfeilen: "Lossless" (Original → Komprimiert → Original exakt rekonstruiert), "Lossy" (Original → Komprimiert → Ähnlich, aber nicht identisch), Wasserglas-Metapher möglich |
-| `karlheinz-brandenburg.jpg` | Fraunhofer IIS, MP3-Erfinder | Porträtfoto von Karlheinz Brandenburg (Entwickler, ~60 Jahre, graues Haar, Brille), professionell, Konferenz- oder Labor-Setting, alternativ: Fraunhofer IIS-Gebäude Erlangen |
-| `suzanne-vega.jpg` | "Tom's Diner" – erster MP3-Song | Suzanne Vega (Sängerin, 1980er-90er Ästhetik), Album-Cover "Solitude Standing" (1987) oder Konzertfoto, warm, akustisch, ikonisch |
-| `audio-spectrogram.jpg` | Frequenz-Vergleich (Bitrate) | Spektrogramm-Vergleich: drei Panels (Original, 320 kbps, 128 kbps), Y-Achse = Frequenz (Hz), X-Achse = Zeit, Farbe = Intensität, hohe Frequenzen verschwinden bei niedriger Bitrate (dunkle Bereiche oben) |
-| `napster-interface.jpg` | Napster-Screenshot (1999) | Screenshot Napster-Software (Windows 98/2000-Stil), Suchleiste, Liste von MP3-Dateien, Peer-Verbindungen, retro-UI, grün-graue Interface, historisch |
-
----
-
-## **Woche 3: Bilder & JPEG-Kompression**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `photo-comparison.jpg` | Hochauflösend vs. komprimiert | Side-by-Side: Linkes Bild scharf und detailliert, rechts stark JPEG-komprimiert mit sichtbaren Artefakten (Blocking, Ringing), gleiches Motiv (z.B. Landschaft oder Porträt) |
-| `jpeg-artifacts.jpg` | JPEG-Artefakte Zoom | Stark vergrößerter Ausschnitt eines JPEG-Bildes: 8×8-Blöcke sichtbar (Blocking), "Geister" um Text/Kanten (Ringing), Farb-Banding in Himmel/Verläufen |
-| `gif-animation.gif` | GIF-Animation (Meme) | Klassisches animiertes GIF (z.B. "Dancing Baby" 90er-Stil oder modernes Meme), 256 Farben, loop, pixelig-charmant, Internet-Kultur |
-| `instagram-quality-loss.jpg` | Vorher/Nachher Instagram-Upload | Zwei Versionen eines Fotos: Oben "Original" (scharf, hochauflösend), unten "Nach Instagram-Upload" (sichtbar schlechter, matschig, Kompressionsartefakte), Pfeile zeigen Unterschiede |
-
----
-
-## **Woche 4: Video-Kompression & Codecs**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `netflix-4k.jpg` | Netflix 4K-Streaming | Netflix-Interface auf 4K-TV, zeigt Filmauswahl mit "4K Ultra HD"-Badge, scharfes Bild, moderne Wohnzimmer-Setting, oder: Netflix-Logo mit "4K" |
-| `container-codec-diagram.jpg` | Container vs. Codec Visualisierung | Diagramm: Schachtel (MP4-Container) enthält mehrere Streams – Video-Track (H.264), Audio-Track (AAC), Untertitel (SRT), Metadaten, farbcodiert, technisch-didaktisch |
-| `iframe-pframe-diagram.jpg` | I/P/B-Frame-Abhängigkeiten | Diagramm: Sequenz von Frames (I-B-B-P-B-B-I), Pfeile zeigen Abhängigkeiten (P zeigt auf I, B zeigt auf I und P), farbcodiert (I=rot, P=blau, B=grün), technisch |
-| `youtube-vp9.jpg` | YouTube VP9-Logo | YouTube-Logo mit "VP9"-Badge oder Text, alternativ: YouTube-Player mit VP9-Codec-Info (Stats for Nerds), modern, Google-Branding |
-| `av1-logo.jpg` | AV1-Logo (Alliance for Open Media) | AV1-Logo (stilisiertes "AV1" mit dreieckigem Design), schwarz oder weiß auf transparentem Hintergrund, modern, clean |
-| `streaming-quality-switch.jpg` | Adaptive Bitrate Streaming | Visualisierung: Videoplayer mit Qualitätsoptionen (240p, 480p, 720p, 1080p, 4K), Balkendiagramm zeigt Bandbreite über Zeit, Qualität wechselt dynamisch, Netzwerk-Symbol |
-
----
-
-## **Woche 5: Speichermedien, Dateisysteme, Backup**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `hdd-ssd-comparison.jpg` | HDD vs. SSD Technologie | Aufgeschraubte HDD (Platter, Lesekopf sichtbar) neben SSD-Platine (Chips, keine beweglichen Teile), Side-by-Side, technisch-präzise, neutraler Hintergrund |
-| `directory-tree.jpg` | Verzeichnisbaum-Struktur | Baumdiagramm: Root (/) an der Spitze, Zweige zu Ordnern (home, usr, etc.), Unterordner, Dateien als Blätter, hierarchisch, clean, schwarz-weiß oder minimalistisch |
-| `backup-disaster.jpg` | Festplatten-Crash / Ransomware | Kaputte Festplatte (physisch beschädigt, Kratzer auf Platter) ODER Bildschirm mit Ransomware-Warnung ("Your files are encrypted"), dramatisch, Warnsignal |
-| `bit-rot.jpg` | Daten-Degradation über Zeit | Abstraktes Bild: Binärcode oder Pixel, die sich auflösen/verfallen, visuelle Metapher für Datenverlust, glitch-artig, beunruhigend |
-| `lto-tape.jpg` | LTO-Kassette + Laufwerk | LTO-Ultrium-Kassette (schwarz, kompakt, Label sichtbar) neben oder in LTO-Bandlaufwerk (Rack-Mount), professionelle Rechenzentrum-Ästhetik |
-| `m-disc.jpg` | M-DISC Blu-ray | M-DISC Blu-ray-Disc (mit "M-DISC"-Logo auf Disc oder Verpackung), Nahaufnahme, metallisch glänzend, hochwertig |
-| `dna-helix.jpg` | DNA-Storage Konzept | DNA-Doppelhelix mit überlagerten Binärcode (0 und 1) oder Daten-Symbolen, futuristisch, wissenschaftlich, blau-grüne Farbpalette, Sci-Fi-ästhetisch |
-
----
-
-## **Woche 6: Schnittstellen (Hardware)**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `cable-mess.jpg` | Kabelsalat / Anschluss-Chaos | Haufen verschiedener Kabel (USB-A, USB-C, HDMI, DisplayPort, Lightning, Ethernet), durcheinander, chaotisch, auf Schreibtisch oder weiß, frustrierend |
-| `pc-back-1990s.jpg` | PC-Rückseite 1990er | Rückseite eines PCs aus den 90ern: VGA, PS/2 (lila/grün), Seriell (COM), Parallel (LPT), SCSI, viele verschiedene Ports, retro, nostalgisch, beige Gehäuse |
-| `usb-c-cables.jpg` | Identische USB-C-Kabel | Mehrere USB-C-Kabel (3-5), die identisch aussehen, aber mit Fragezeichen oder Labels ("USB 2.0?", "USB 4?", "Thunderbolt?"), Verwirrung symbolisierend |
-| `thunderbolt-logo.jpg` | Thunderbolt-Logo | Thunderbolt-Logo (Blitz-Symbol, schwarz oder weiß), offizielles Intel-Branding, clean, auf transparentem Hintergrund |
-| `hdmi-cable.jpg` | HDMI-Kabel + Stecker | HDMI-Kabel mit Stecker (Typ A, Standard), Nahaufnahme des Pin-Layouts, schwarz, auf weißem Hintergrund, technisch-präzise |
-| `displayport-cable.jpg` | DisplayPort-Kabel + Stecker | DisplayPort-Kabel mit Stecker (charakteristische asymmetrische Form, Verriegelung sichtbar), schwarz, technisch |
-| `hdcp-warning.jpg` | HDCP-Fehler Bildschirm | Schwarzer Bildschirm oder blauer Error-Screen mit Text "HDCP Error" oder "HDCP-Handshake fehlgeschlagen", frustrierend, technischer Fehler |
-| `ethernet-cable.jpg` | Ethernet-Kabel (RJ45) | Cat6 Ethernet-Kabel mit RJ45-Stecker, Nahaufnahme der 8 Pins (farbcodiert), blau oder grau, technisch |
-| `vintage-ports.jpg` | Alte Anschlüsse (Nostalgie) | Collage: VGA-Port (blau, 15-Pin), PS/2 (lila/grün, rund), Seriell (DB9), Parallel (DB25), retro, beige/grau, Museums-Qualität |
-
----
-
-## **Woche 7: Distribution (CDN, P2P, Streaming)**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `sneakernet-truck.jpg` | LKW voller Festplatten | LKW geladen mit Servern oder Festplatten-Paletten, "Sneakernet"-Konzept, humorvoll-dokumentarisch, logistisch, Lagerhalle oder Straße |
-| `aws-snowmobile.jpg` | AWS Snowmobile | AWS Snowmobile (45-Fuß-Container auf LKW), weiß mit AWS-Logo, dramatisch, Rechenzentrum im Hintergrund, offizielles AWS-Pressefoto-Stil |
-| `cd-dvd-bluray.jpg` | Optische Medien Evolution | Drei Discs nebeneinander: CD (compact, silber), DVD (ähnlich, aber Label), Blu-ray (blau-schimmernd), Evolution, zeitlich geordnet |
-| `server-overload.jpg` | Server unter Last (Hug of Death) | Server-Racks mit roten Warnlichtern oder Error-Screens, Rauch/Hitze-Effekt (metaphorisch), Überlastung, dramatisch-technisch |
-| `cdn-map.jpg` | CDN-Knoten Weltkarte | Weltkarte mit leuchtenden Punkten (Points of Presence), Linien verbinden Punkte (Netzwerk), blau-violett, futuristisch, globale Infrastruktur |
-| `netflix-openconnect.jpg` | Netflix Open Connect Appliance | Netflix Open Connect Server-Appliance (schwarzes Rack-Mount-Gerät, Netflix-Logo), professionell, Rechenzentrum-Setting |
-| `p2p-network.jpg` | P2P-Netzwerk Diagramm | Netzwerk-Diagramm: Viele Knoten (Peers) verbunden, keine zentrale Hierarchie, dezentral, organisch, Linien zwischen Knoten, technisch-didaktisch |
-| `bittorrent-swarm.jpg` | BitTorrent-Swarm Visualisierung | Visualisierung: Zentrale Datei (Torrent), umgeben von vielen Peers (kleine Kreise), Pfeile zeigen Datenfluss (Chunks), dynamisch, farbcodiert |
-| `pirate-bay-logo.jpg` | The Pirate Bay Logo | The Pirate Bay Schiffs-Logo (Piratenschiff, schwarz-weiß oder farbig), ikonisch, kontroverser historischer Kontext |
-| `ipfs-logo.jpg` | IPFS Logo | IPFS-Logo (Würfel-Design mit Verbindungen), blau-weiß, geometrisch, modern, offizielles Protocol Labs-Branding |
-| `streaming-hls.jpg` | Streaming-Pipeline (HLS/DASH) | Diagramm: Encoder → Segmente (2-10s) → CDN → Player, verschiedene Qualitäten parallel (240p-4K), technisch, Flowchart-Stil |
-
----
-
-## **Woche 8: APIs & Software-Schnittstellen**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `api-diagram.jpg` | API-Kommunikation | Diagramm: Zwei Boxen (App A, App B) verbunden durch "API" (Pfeile bidirektional), zeigt Request/Response, clean, technisch-minimalistisch |
-| `http-request-response.jpg` | HTTP Request/Response-Zyklus | Diagramm: Client (Browser-Symbol) → Request (Pfeil mit "GET /page") → Server (Server-Symbol) → Response (Pfeil mit "200 OK + HTML") → Client, Zyklus, didaktisch |
-| `rest-api.jpg` | REST-API Struktur | Diagramm: URLs als Ressourcen (`/users`, `/posts`), HTTP-Methods (GET, POST, PUT, DELETE) daneben, tabellarisch oder Baum-Struktur, technisch |
-| `graphql-logo.jpg` | GraphQL Logo | GraphQL-Logo (rosa/magenta Raute mit "GraphQL"-Text), offizielles Branding, clean, auf transparentem Hintergrund |
-| `websocket-diagram.jpg` | WebSocket bidirektionale Verbindung | Diagramm: Client ↔ Server (bidirektionale Pfeile), "Persistent Connection", im Gegensatz zu HTTP (unidirektionale Pfeile), technisch-vergleichend |
-| `grpc-logo.jpg` | gRPC Logo | gRPC-Logo (blau-grünes "gRPC"-Design), offizielles Google/CNCF-Branding, modern |
-
----
-
-## **Woche 9: Metadaten & Interoperabilität**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `exif-gps.jpg` | EXIF-Daten mit GPS | Foto mit eingeblendeten EXIF-Daten als Overlay: GPS-Koordinaten, Kamera-Modell, Datum, Kartenpunkt zeigt Standort, Privacy-Warnung, technisch-dokumentarisch |
-| `mcafee-exif-fail.jpg` | John McAfee Guatemala-Story | Foto von John McAfee (2012, Guatemala, mit Hund) ODER Screenshot des Vice-Artikels mit Foto + GPS-Koordinaten eingeblendet, historisch-dokumentarisch |
-| `id3-tag-editor.jpg` | ID3-Tag-Editor Screenshot | Screenshot eines ID3-Editors (z.B. Kid3, mp3tag), zeigt MP3-Datei mit Feldern (Artist, Album, Year, Genre, Cover-Art), übersichtlich |
-| `musicbrainz-logo.jpg` | MusicBrainz Logo | MusicBrainz-Logo (stilisierte Note oder "MB"-Buchstaben), offizielles Branding, open-source-freundlich |
-| `pdf-metadata-leak.jpg` | PDF-Metadaten Analyse | Screenshot: PDF-Metadaten-Fenster zeigt versteckte Infos (Autor, Firma, Software, Änderungsdatum), Warnung, forensisch |
-| `binary.png` | Binäre Limitationen | Binärcode (0 und 1) als Hintergrund, eventuell mit Warnung oder Fragezeichen, technisch-abstrakt, schwarz-weiß oder grün-schwarz (Matrix-Stil) |
-
----
-
-## **Woche 10: Zukunft & Synthese**
-
-| Dateiname | Kontext | Beschreibung |
-|-----------|---------|--------------|
-| `futuristic-datacenter.jpg` | Futuristisches Rechenzentrum | Modernes Rechenzentrum mit Server-Racks, blaue LED-Beleuchtung, alternativ: DNA-Helix überlagert auf Servern, Sci-Fi-ästhetisch, sauber, high-tech |
-| `jpeg-xl-logo.jpg` | JPEG XL Logo | JPEG XL Logo (stilisiertes "JXL" oder "JPEG XL"), modern, clean, offizielles Branding |
-| `dna-storage-concept.jpg` | DNA-Storage Visualisierung | DNA-Doppelhelix mit Daten-Symbolen, Petrischale mit DNA-Proben, Laborumgebung, futuristisch-wissenschaftlich, blau-grün |
-| `science.jpg` | Wissenschaft/Forschung (Allgemein) | Wissenschaftliche Visualisierung: Labor, Mikroskop, DNA-Sequenzierung, oder abstrakte Wissenschafts-Grafik, professionell, blau-weiß |
-
----
-
-## **Zusammenfassung: Asset-Kategorien**
-
-| Kategorie | Anzahl | Notizen |
-|-----------|--------|---------|
-| **Technische Diagramme** | 15+ | Flow-Charts, Netzwerk-Topologien, Container/Codec-Visualisierungen |
-| **Screenshots/UIs** | 10+ | Hex-Editor, Napster, ID3-Editor, Netflix, Browser DevTools |
-| **Logos** | 8+ | Thunderbolt, HDMI, GraphQL, gRPC, IPFS, AV1, MusicBrainz, JPEG XL |
-| **Hardware-Fotos** | 12+ | HDDs, SSDs, Kabel, Ports, LTO-Tapes, M-DISC |
-| **Vergleiche (Vorher/Nachher)** | 5+ | JPEG-Artefakte, Instagram-Quality, HDD vs. SSD, Kassette vs. iPod |
-| **Historische/Nostalgie** | 6+ | 90er-PC, ASCII-Tabelle, Napster, WordPerfect, John McAfee |
-| **Futuristisch/Konzeptuell** | 5+ | DNA-Storage, Quantum, Futuristic Datacenter, AI-Compression |
-
----
-
-## **Generierungs-Tipps für AI-Tools (Midjourney, DALL-E, Stable Diffusion)**
-
-**Allgemeine Prompts-Zusätze:**
-- Für **technische Diagramme**: `"technical diagram, clean lines, minimal colors, educational, isometric view, white background"`
-- Für **Screenshots**: `"UI screenshot, realistic software interface, high resolution, modern design"`
-- Für **Fotos/Realismus**: `"product photography, studio lighting, white background, high detail, professional"`
-- Für **Futuristisch**: `"futuristic, sci-fi, blue-violet color palette, glowing, high-tech, cinematic lighting"`
-- Für **Retro/Nostalgie**: `"1990s aesthetic, beige computer, CRT monitor, retro technology, nostalgic"`
-
-**Negative Prompts (was vermeiden):**
-- `"blurry, text artifacts, watermark, low quality, distorted, unrealistic proportions"`
-

CLAUDE.md

@@ -5,6 +5,14 @@ This project builds a presentation deck for Marp based on Markdown files.
 ## Agent Restrictions
 - Agent NEVER runs commands on its own except changing files INSIDE THIS FOLDER, never any other then this
 - Agent NEVER runs build commands or any automated processes without explicit user request, as the user is working in dev mode
+- Agent NEVER runs deploy commands (make deploy, scp, etc.) without explicit user permission - always ask first
+
+## Critical File Protection: index.md
+- `index.md` is the MAIN CONTENT FILE for the entire lecture series - treat with extreme care
+- ALLOWED: Adding new slides, adjusting existing content, fixing typos, enhancing sections
+- FORBIDDEN (without explicit permission): Deleting slides, removing sections, bulk replacements that remove content
+- Before ANY deletion in index.md: ALWAYS ask user for confirmation and warn about what will be removed
+- When in doubt, ADD rather than REPLACE - let the user decide what to remove
 
 ## Build Commands
 - `npm run build` - Build slides from Markdown using Marp

IMAGE_LIST.md

@@ -0,0 +1,339 @@
+# Image List for HdM Dateiformate Slides
+
+This document lists all images needed for the lecture slides. Each image includes:
+- **Filename**: Target filename in `./assets/`
+- **Context**: Where/why it's used in the slides
+- **AI Prompt**: Suggested prompt for image generation (Gemini, DALL-E, Midjourney, etc.)
+
+**Recommended settings:**
+- Aspect ratio: 16:9 (1920x1080 or similar)
+- Style: Clean, professional, educational
+- For logos: Consider downloading official versions from the web instead of generating
+
+**Legend:**
+- ✅ = Already generated and in assets/
+- ⬚ = Not yet generated
+
+---
+
+## Intro
+
+### ✅ digital-landscape.png
+- **Context**: Opening slide background, sets futuristic tech mood
+- **AI Prompt**: Futuristic digital landscape with glowing blue and purple data streams, abstract network connections, binary patterns flowing through a neon-lit cyber environment, wide cinematic shot, no text
+
+---
+
+## Termin 1: Grundlagen, Text & Audio
+
+### ✅ matrix-code.png
+- **Context**: Opening visual for "WTF!?" hex dump slide
+- **AI Prompt**: Matrix-style green digital rain code falling on black background, glowing green characters, cyberpunk hacker aesthetic, mysterious data visualization
+
+### ✅ lightbulb-onoff.png
+- **Context**: Explaining the bit concept (0 or 1, on or off)
+- **AI Prompt**: Simple lightbulb comparison: one lit bright yellow, one dark/off, side by side, clean minimal style, binary concept visualization, white background
+
+### ✅ grayscale-gradient.png ⚠️ NEEDS REGENERATION
+- **Context**: Explaining 256 grayscale values (0=black to 255=white)
+- **AI Prompt**: Horizontal grayscale gradient bar on a neutral gray background (#808080), gradient goes from pure black (left) to pure white (right), add visible value labels "0" on left and "255" on right, ensure edges are clearly visible against background, clean educational diagram style, 16:9 aspect ratio
+- **Issue**: Current image has barely visible edges on left (black) and right (white) sides
+
+### ✅ rgb-color-model.png
+- **Context**: Explaining RGB color model (3 bytes per pixel)
+- **AI Prompt**: RGB color model visualization showing three overlapping circles (red, green, blue) creating cyan, magenta, yellow, and white in overlaps, clean educational diagram style
+
+### ✅ ascii-table.png
+- **Context**: Showing ASCII character encoding (7-bit, 128 characters total)
+- **AI Prompt**: Clean ASCII table showing printable characters 32-126 with their decimal and hex values, vintage computer terminal aesthetic, green on black or clean white background, educational reference chart. Note: ASCII is 7-bit encoding with 128 total characters (0-127), not 256. First 32 (0-31) are control characters, 127 is DEL.
+
+### ✅ hex-binary-table.png
+- **Context**: Hex to binary conversion reference
+- **AI Prompt**: Clean conversion table showing hexadecimal digits 0-F with their 4-bit binary equivalents, educational reference style, programmer cheat sheet aesthetic
+
+### ✅ hexeditor-screenshot.png
+- **Context**: Showing what a hex editor looks like
+- **AI Prompt**: Screenshot of hex editor software showing file bytes in hexadecimal with ASCII representation on the right side, typical hex editor layout, technical software interface
+
+### ✅ cassette-ipod.png
+- **Context**: Audio format evolution intro
+- **AI Prompt**: Vintage audio cassette tape next to modern iPod or MP3 player, technology evolution comparison, nostalgic meets modern, clean product photography style
+
+### ✅ compression-types.png
+- **Context**: Lossless vs lossy compression comparison
+- **AI Prompt**: Split diagram comparing lossless (ZIP icon, identical files) vs lossy (JPEG/MP3 icon, smaller but different), educational infographic style, clear visual distinction
+
+### ✅ karlheinz-brandenburg.jpg
+- **Context**: MP3 inventor portrait/reference (Fraunhofer IIS)
+- **AI Prompt**: Professional portrait style of a German scientist/engineer in academic setting, Fraunhofer institute aesthetic, 1990s technology pioneer look (or use real photo)
+
+### ✅ suzanne-vega.jpg
+- **Context**: "Tom's Diner" - the song used to test MP3 compression
+- **AI Prompt**: Female singer-songwriter aesthetic, acoustic guitar, 1980s folk music style, intimate cafe performance setting (or use real photo)
+
+### ✅ audio-spectrogram.png
+- **Context**: Visualizing audio frequencies and MP3 compression effects
+- **AI Prompt**: Colorful audio spectrogram visualization showing frequency spectrum over time, rainbow gradient from low (red) to high (blue) frequencies, scientific audio analysis display
+
+### ✅ napster-interface.png
+- **Context**: MP3 piracy era / file sharing history (1999-2001)
+- **AI Prompt**: Late 1990s peer-to-peer file sharing interface aesthetic, Windows 98/2000 style dialog boxes, music file listings, nostalgic internet era, retro software UI
+
+---
+
+## Termin 2: Bild, Audio, Video
+
+### ✅ photo-comparison.png
+- **Context**: Demonstrating compression quality loss
+- **AI Prompt**: Side-by-side comparison of same landscape photo: left side crystal clear high resolution, right side heavily compressed with visible JPEG artifacts, blocky pixels and color banding, split down the middle, educational comparison style
+
+### ⬚ raster-vs-vector.png
+- **Context**: Comparison of raster and vector graphics scaling
+- **AI Prompt**: Split image showing scaling comparison: left side shows raster/bitmap image (photo of flower) that becomes pixelated when zoomed in, right side shows vector graphic (simple logo/icon) that stays crisp at any zoom level, magnifying glass effect on both sides, educational diagram style, clean white background
+
+### ⬚ vector-circle-example.png
+- **Context**: Explaining how vector graphics store shapes mathematically
+- **AI Prompt**: Educational diagram showing a circle with labeled parameters: center point (x,y coordinates), radius line, color fill indicator, stroke width indicator, mathematical notation style, clean technical illustration, blueprint aesthetic
+
+### ✅ jpeg-artifacts.png
+- **Context**: Close-up example of JPEG compression artifacts
+- **AI Prompt**: Close-up macro shot of heavily compressed JPEG image showing visible compression artifacts, blocky 8x8 pixel blocks, mosquito noise around edges, color banding in gradients, technical demonstration image
+
+### ✅ gif-animation.png
+- **Context**: Explaining GIF format limitations
+- **AI Prompt**: Classic internet aesthetic image with limited color palette (256 colors), dithering patterns visible, retro web 1.0 style, simple animation frames concept, nostalgic internet culture
+
+### ✅ instagram-quality-loss.png
+- **Context**: Real-world example of social media compression
+- **AI Prompt**: Split image comparison: left side showing original crisp smartphone photo, right side showing same image after social media upload with visible quality degradation, compression artifacts, softer details, educational before/after style
+
+### ✅ netflix-4k.png
+- **Context**: Modern streaming technology introduction
+- **AI Prompt**: Modern living room with large OLED TV displaying streaming interface, 4K UHD quality visible, cozy home theater setup, ambient lighting, contemporary interior design, cinematic wide shot
+
+### ✅ container-codec-diagram.png
+- **Context**: Explaining video container vs codec concept
+- **AI Prompt**: Clean technical diagram showing video container structure as a box containing separate colored tracks: video stream (blue), audio stream (green), subtitle stream (yellow), metadata (gray), arrows showing data flow, minimal infographic style, white background
+
+### ✅ iframe-pframe-diagram.png
+- **Context**: Video compression frame types explanation
+- **AI Prompt**: Technical diagram showing video compression frame sequence: large I-frame (keyframe) in blue, smaller P-frames (predicted) in green, tiny B-frames (bidirectional) in orange, arrows showing dependencies between frames, timeline visualization, clean educational style
+
+### ✅ youtube-vp9.png
+- **Context**: VP9 codec discussion
+- **AI Prompt**: YouTube video player interface with VP9 codec indicator, stats for nerds overlay showing codec information, modern streaming technology aesthetic, screen capture style
+
+### ✅ av1-logo.png
+- **Context**: AV1 codec introduction
+- **AI Prompt**: AV1 video codec logo visualization, Alliance for Open Media branding, clean modern tech logo style, blue and white color scheme, professional technology branding
+
+### ✅ streaming-quality-switch.png
+- **Context**: Adaptive bitrate streaming explanation
+- **AI Prompt**: Visualization of adaptive bitrate streaming: video player with quality indicator showing switch from 480p to 720p to 1080p, buffer loading bar, bandwidth graph in corner, technical streaming diagram style
+
+---
+
+## Termin 3: Speichermedien & Schnittstellen
+
+### ⬚ rosetta-disk.png
+- **Context**: Long-term archival - Rosetta Project by Long Now Foundation
+- **AI Prompt**: Rosetta Disk by Long Now Foundation, small nickel disk with micro-etched text visible under magnification, archival preservation technology, scientific artifact photography, emphasis on the intricate etched patterns containing thousands of languages
+
+### ⬚ hdd-ssd-comparison.png
+- **Context**: Storage technology comparison
+- **AI Prompt**: Side-by-side comparison: opened hard disk drive showing silver platters and read/write head on left, modern NVMe SSD circuit board with flash chips on right, technical product photography, white background, educational comparison
+
+### ⬚ directory-tree.png
+- **Context**: File system structure explanation
+- **AI Prompt**: File system directory tree visualization, hierarchical folder structure with branching paths, root folder at top expanding into subdirectories, clean diagram style with folder icons, blue and gray color scheme, technical illustration
+
+### ⬚ backup-disaster.png
+- **Context**: Importance of backups - cautionary tale
+- **AI Prompt**: Dramatic scene of broken hard drive with visible damage, smoke rising, concerned person in background looking at computer screen showing error message, data loss disaster concept, moody lighting, cautionary illustration style
+
+### ⬚ bit-rot.png
+- **Context**: Data degradation over time
+- **AI Prompt**: Abstract visualization of digital decay: image gradually corrupting from left to right, pixels breaking apart, glitch effects spreading, data entropy concept, corrupted file aesthetic, technical art style
+
+### ⬚ lto-tape.png
+- **Context**: Professional archival storage
+- **AI Prompt**: LTO tape cartridge in professional data center setting, tape drive unit visible, blue and black enterprise storage equipment, clean technical product shot, professional backup infrastructure
+
+### ⬚ m-disc.png
+- **Context**: Long-term optical storage
+- **AI Prompt**: M-DISC optical disc showing distinctive gold/bronze reflective surface, archival grade media, jewel case partially visible, product photography style, emphasis on durability and longevity
+
+### ⬚ dna-helix.png
+- **Context**: Future storage technology
+- **AI Prompt**: DNA double helix structure with binary code (0s and 1s) integrated into the strand pattern, futuristic data storage concept, blue bioluminescent glow, science fiction meets biology, clean dark background
+
+### ⬚ cable-mess.png
+- **Context**: Cable/connector chaos problem
+- **AI Prompt**: Chaotic tangle of various cables: USB-A, USB-C, HDMI, DisplayPort, Lightning, micro-USB, all intertwined in frustrating mess, cable drawer chaos, relatable tech problem, overhead shot
+
+### ⬚ pc-back-1990s.png
+- **Context**: Legacy port evolution
+- **AI Prompt**: Back panel of vintage 1990s beige desktop PC showing rainbow of legacy ports: blue VGA, green/purple PS/2, gray serial DB9, pink parallel DB25, game port, nostalgic retro computing, authentic vintage tech
+
+### ⬚ usb-c-cables.png
+- **Context**: USB-C confusion (same connector, different specs)
+- **AI Prompt**: Five identical-looking USB-C cables laid out in a row, all appearing the same but with subtle question marks or spec labels (USB 2.0, 3.0, 3.1, Thunderbolt, charging only), consumer confusion concept, clean product shot
+
+### ⬚ thunderbolt-logo.png
+- **Context**: Thunderbolt interface explanation
+- **AI Prompt**: Thunderbolt technology logo, stylized lightning bolt symbol, Intel branding aesthetic, clean modern tech logo on dark background, high-speed connection concept
+
+### ⬚ hdmi-cable.png
+- **Context**: HDMI interface explanation
+- **AI Prompt**: HDMI cable with gold-plated connector in sharp focus, premium build quality visible, professional AV equipment aesthetic, product photography on neutral background
+
+### ⬚ displayport-cable.png
+- **Context**: DisplayPort interface explanation
+- **AI Prompt**: DisplayPort cable and connector close-up, distinctive asymmetrical shape visible, professional display connection, technical product photography, clean background
+
+### ⬚ hdcp-warning.png
+- **Context**: DRM/content protection issues
+- **AI Prompt**: TV or monitor screen displaying HDCP error message dialog box, "Content Protection Error" or "HDCP not supported" warning, frustrated user experience, screen capture style, consumer electronics problem
+
+### ⬚ ethernet-cable.png
+- **Context**: Network connectivity
+- **AI Prompt**: Blue Ethernet cable with clear RJ45 connector showing gold pins, Cat6 or Cat7 network cable, technical product shot, networking infrastructure aesthetic
+
+### ⬚ wifi-bluetooth.png
+- **Context**: Wireless connectivity introduction (WLAN & Bluetooth slides)
+- **AI Prompt**: Modern Wi-Fi router with antenna and Bluetooth symbol overlay, wireless technology concept, clean product photography showing both standards, blue LED lights, home networking aesthetic
+
+### ⬚ nas-server.png
+- **Context**: Network Attached Storage introduction
+- **AI Prompt**: Synology or QNAP NAS device with multiple hard drive bays, blue LED status lights, home server setup in modern office environment, network storage infrastructure, clean product photography
+
+### ⬚ vintage-ports.png
+- **Context**: Legacy connector nostalgia/history
+- **AI Prompt**: Collection of vintage computer ports and connectors: VGA blue, PS/2 keyboard and mouse, serial DB9, parallel DB25, arranged like museum display, retro computing history, nostalgic tech photography
+
+---
+
+## Termin 4: Distribution, APIs, Zukunft
+
+### ⬚ sneakernet-truck.png
+- **Context**: Physical data transport concept ("Never underestimate bandwidth of a truck full of tapes")
+- **AI Prompt**: Semi truck loaded with pallets of hard drives and storage media, highway background, humorous take on data transfer, "sneakernet" concept visualization, photorealistic style
+
+### ⬚ aws-snowmobile.png
+- **Context**: AWS Snowmobile - extreme data transfer
+- **AI Prompt**: Large shipping container truck (semi-trailer) with data center branding, AWS style, massive scale data transfer concept, industrial tech photography
+
+### ⬚ cd-dvd-bluray.png
+- **Context**: Physical media distribution history
+- **AI Prompt**: Three optical discs arranged showing evolution: CD, DVD, Blu-ray, each with distinctive colors/labels, product photography, media format comparison
+
+### ⬚ server-overload.png
+- **Context**: "Hug of Death" / traffic spike problems
+- **AI Prompt**: Server rack with red warning lights flashing, smoke or heat waves rising, overwhelmed system visualization, too many connection requests flooding in as visual arrows, data center stress, dramatic lighting
+
+### ⬚ cdn-map.png
+- **Context**: Content Delivery Network explanation
+- **AI Prompt**: World map with glowing nodes representing CDN edge locations, connection lines between points of presence, global content delivery network visualization, dark background with bright cyan/green nodes, tech infographic style
+
+### ⬚ netflix-openconnect.png
+- **Context**: Netflix CDN case study
+- **AI Prompt**: Netflix Open Connect server appliance in ISP data center rack, red Netflix branding visible, professional server hardware, content delivery infrastructure, enterprise equipment photography
+
+### ⬚ p2p-network.png
+- **Context**: Peer-to-peer architecture explanation
+- **AI Prompt**: Peer-to-peer network diagram showing decentralized mesh of connected computer nodes, no central server, all nodes equal, bidirectional arrows between peers, clean technical diagram style, blue network aesthetic
+
+### ⬚ bittorrent-swarm.png
+- **Context**: BitTorrent technology explanation
+- **AI Prompt**: BitTorrent swarm visualization showing multiple peers exchanging colored file chunks/pieces, some peers have complete file (seeders), others downloading (leechers), piece availability concept, technical diagram style
+
+### ⬚ pirate-bay-logo.png
+- **Context**: BitTorrent history/controversy discussion
+- **AI Prompt**: Pirate ship silhouette in vintage woodcut style, cassette tape as sail, controversial but historically significant internet culture reference, monochrome illustration style
+
+### ⬚ ipfs-logo.png
+- **Context**: Decentralized storage future
+- **AI Prompt**: IPFS (InterPlanetary File System) logo concept, interconnected nodes forming globe shape, decentralized web aesthetic, teal/cyan color scheme, modern tech branding
+
+### ⬚ streaming-hls.png
+- **Context**: HLS/DASH streaming protocols
+- **AI Prompt**: Streaming pipeline diagram: video encoder box connecting to CDN cloud connecting to multiple player devices, HLS/DASH segment chunks visualized as small boxes along the path, technical flowchart style
+
+### ⬚ api-diagram.png
+- **Context**: API concept introduction
+- **AI Prompt**: Clean API diagram showing multiple application icons connected by arrows through central API gateway, request/response flow visualization, software integration concept, modern flat design infographic
+
+### ⬚ http-request-response.png
+- **Context**: HTTP basics
+- **AI Prompt**: HTTP request/response cycle diagram: client computer on left, server on right, arrows showing GET request going right, response with data coming back left, status codes visible, clean technical illustration
+
+### ⬚ rest-api.png
+- **Context**: REST architecture explanation
+- **AI Prompt**: REST API structure diagram showing resource URLs (/users, /posts, /comments) with HTTP methods (GET, POST, PUT, DELETE) color-coded, CRUD operations mapped, clean API documentation style
+
+### ⬚ graphql-logo.png
+- **Context**: GraphQL introduction
+- **AI Prompt**: GraphQL logo, distinctive pink/magenta hexagonal shape, query language for APIs branding, modern tech aesthetic, clean vector style on dark background
+
+### ⬚ websocket-diagram.png
+- **Context**: Real-time communication
+- **AI Prompt**: WebSocket vs HTTP comparison diagram: HTTP showing multiple request-response pairs, WebSocket showing single persistent bidirectional connection, real-time communication concept, technical comparison illustration
+
+### ⬚ grpc-logo.png
+- **Context**: gRPC introduction
+- **AI Prompt**: gRPC logo, Google's RPC framework branding, blue and white color scheme, protocol buffers concept, modern microservices aesthetic, clean tech logo
+
+### ⬚ exif-gps.png
+- **Context**: Metadata privacy concerns
+- **AI Prompt**: Smartphone photo with semi-transparent overlay showing EXIF metadata: GPS coordinates on map, camera model, date/time, exposure settings, privacy concern visualization, metadata exposure concept
+
+### ⬚ mcafee-exif-fail.png
+- **Context**: Real-world EXIF privacy incident
+- **AI Prompt**: News headline style image about location data leak, map with pin showing exposed location, journalist camera icon, privacy fail case study concept, documentary style illustration
+
+### ⬚ id3-tag-editor.png
+- **Context**: Audio metadata explanation
+- **AI Prompt**: Screenshot-style image of ID3 tag editor software interface showing MP3 metadata fields: title, artist, album, year, genre, track number, album art placeholder, music file management aesthetic
+
+### ⬚ musicbrainz-logo.png
+- **Context**: Music metadata database
+- **AI Prompt**: MusicBrainz logo concept, music database branding, orange/yellow color scheme, open source music metadata project aesthetic
+
+### ⬚ pdf-metadata-leak.png
+- **Context**: Document metadata privacy
+- **AI Prompt**: PDF document properties dialog showing hidden metadata: author name, creation date, software used, revision history, privacy concern visualization, document forensics concept
+
+### ⬚ futuristic-datacenter.png
+- **Context**: Future of data storage intro
+- **AI Prompt**: Futuristic data center with glowing blue server racks, holographic displays, advanced cooling systems, sci-fi technology aesthetic, next-generation computing infrastructure
+
+### ⬚ jpeg-xl-logo.png
+- **Context**: Next-gen image formats
+- **AI Prompt**: JPEG XL logo concept, modern image format branding, evolution of JPEG, clean tech logo style, future of image compression
+
+### ⬚ dna-storage-concept.png
+- **Context**: DNA data storage future
+- **AI Prompt**: DNA strand with digital data visualization, binary code transforming into genetic sequence, futuristic biotechnology concept, scientific illustration style, data storage evolution
+
+---
+
+## Summary
+
+| Lecture | Total | ✅ Done | ⬚ Todo |
+|---------|-------|--------|--------|
+| Intro | 1 | 1 | 0 |
+| Termin 1 (Grundlagen/Text/Audio) | 13 | 13 | 0 |
+| Termin 2 (Bild/Audio/Video) | 10 | 10 | 0 |
+| Termin 3 (Speichermedien) | 19 | 0 | 19 |
+| Termin 4 (Distribution/APIs) | 25 | 0 | 25 |
+| **Total** | **68** | **24** | **44** |
+
+**Note:** grayscale-gradient.png is marked ⚠️ NEEDS REGENERATION due to visibility issues at edges.
+
+## Generation Tips
+
+1. **Diagrams**: Use "clean infographic style", "technical illustration", "minimal diagram" in prompts
+2. **Photos**: Use "product photography", "professional shot", "realistic" for hardware images
+3. **Concepts**: Use "visualization", "abstract representation" for abstract ideas
+4. **Logos**: Consider downloading official logos instead of generating (better accuracy)
+5. **Consistency**: Add "educational style", "professional presentation" to maintain visual coherence

Makefile

@@ -1,56 +1,125 @@
 # Makefile for Marp Slides Project
 
-.PHONY: help build dev watch pdf html clean install deploy
+.PHONY: help build dev watch pdf html clean install deploy deploy-html copy-assets optimize-images
+
+# Directories
+SLIDES_DIR = slides
+BUILD_DIR = build
+
+# Termin files (date-topic naming convention) - each is self-contained
+TERMIN_0 = 2025-12-19-termin-0-intro
+TERMIN_1 = 2025-12-19-termin-1-grundlagen-text-audio
+TERMIN_2 = 2026-01-09-termin-2-bild-audio-video
+TERMIN_3 = 2026-01-23-termin-3-speichermedien-schnittstellen
+TERMIN_4 = 2026-01-30-termin-4-distribution-apis-zukunft
+TERMIN_5 = 2026-xx-xx-termin-5-vertiefung-offene-fragen
+TERMINS = $(TERMIN_0) $(TERMIN_1) $(TERMIN_2) $(TERMIN_3) $(TERMIN_4) $(TERMIN_5)
 
 # Default target
 help:
 	@echo "Available commands:"
-	@echo "  make build    - Build slides from Markdown"
+	@echo ""
-	@echo "  make dev      - Start development server with live reload"
+	@echo "  Development:"
-	@echo "  make watch    - Watch for changes and rebuild automatically"
+	@echo "    make dev        - Start dev server (browse all files at localhost:1312)"
-	@echo "  make pdf      - Export slides to PDF format"
+	@echo ""
-	@echo "  make html     - Export slides to HTML format"
+	@echo "  Build:"
+	@echo "    make build      - Build all slides (HTML + PDF)"
+	@echo "    make pdf        - Export all slides to PDF"
+	@echo "    make html       - Export all slides to HTML"
+	@echo ""
+	@echo "  Deploy:"
+	@echo "    make deploy     - Full build + deploy (HTML, PDF, assets)"
+	@echo "    make deploy-html - HTML only deploy (faster)"
+	@echo ""
+	@echo "  Other:"
+	@echo "    make optimize-images - Resize images to max 1920px"
 	@echo "    make clean      - Remove generated files"
 	@echo "    make install    - Install dependencies"
-	@echo "  make deploy   - Deploy slides to server"
 
-# Build slides
+# Ensure build directory exists
-build:
+$(BUILD_DIR)/.exists:
-	@echo "Building slides..."
+	@mkdir -p $(BUILD_DIR)
-	npm run build
+	@touch $@
 
-# Start development server
+# Development server - serves slides/ directly with HMR
 dev:
-	@echo "Starting development server..."
+	@echo "Starting dev server with HMR..."
-	npm run dev
+	@echo "Open: http://localhost:1312"
+	PORT=1312 npx @marp-team/marp-cli --server $(SLIDES_DIR)/
 
 # Watch for changes
 watch:
-	@echo "Watching for changes..."
+	npx @marp-team/marp-cli --watch $(SLIDES_DIR)/
-	npm run watch
 
-# Export to PDF
+# Copy assets and materials to build directory
-pdf:
+copy-assets: $(BUILD_DIR)/.exists
+	@echo "Copying assets..."
+	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/
+	@cp -r $(SLIDES_DIR)/materials $(BUILD_DIR)/ 2>/dev/null || true
+
+# Build all slides (HTML + PDF)
+build: copy-assets
+	@echo "Building all slides..."
+	@for f in $(TERMINS); do \
+		echo "Building $$f..."; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+	done
+	@echo "Done! Output in $(BUILD_DIR)/"
+
+# Export all slides to PDF
+pdf: $(BUILD_DIR)/.exists
 	@echo "Exporting to PDF..."
-	npm run export:pdf -- --allow-local-files
+	@for f in $(TERMINS); do \
+		echo "  $$f.pdf"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+	done
+	@echo "Done! PDFs in $(BUILD_DIR)/"
 
-# Export to HTML
+# Export all slides to HTML
-html:
+html: copy-assets
 	@echo "Exporting to HTML..."
-	npm run export:html
+	@for f in $(TERMINS); do \
+		echo "  $$f.html"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+	done
+	@./scripts/generate-index.sh $(BUILD_DIR)
+	@echo "Done! HTML files in $(BUILD_DIR)/"
 
 # Clean generated files
 clean:
 	@echo "Cleaning generated files..."
-	rm -rf dist/ build/ *.pdf *.html
+	rm -rf $(BUILD_DIR)/ *.pdf *.html
 
 # Install dependencies
 install:
 	@echo "Installing dependencies..."
 	npm install
 
-# Deploy slides
+# Optimize images (resize to max 1920px, requires nix-shell -p imagemagick)
+optimize-images:
+	@echo "Backing up originals to assets-original/..."
+	@mkdir -p $(SLIDES_DIR)/assets-original
+	@cp $(SLIDES_DIR)/assets/*.png $(SLIDES_DIR)/assets-original/ 2>/dev/null || true
+	@cp $(SLIDES_DIR)/assets/*.jpg $(SLIDES_DIR)/assets-original/ 2>/dev/null || true
+	@echo "Resizing images to max 1920px..."
+	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/assets/*.png; do magick "$$img" -resize "1920x>" -quality 85 "$$img"; done'
+	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/assets/*.jpg; do magick "$$img" -resize "1920x>" -quality 85 "$$img"; done'
+	@echo "Done! Originals backed up in assets-original/"
+
+# Deploy slides (full build)
 deploy: build
 	@echo "Deploying slides..."
-	scp build/index.html tengo@tuttle.uberspace.de:/home/tengo/html/malta/
+	@echo "Copying HTML files..."
-	scp -r build/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/malta/
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/
+	@echo "Copying assets..."
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/
+	@echo "Copying materials..."
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/ 2>/dev/null || true
+
+# Deploy HTML only (faster, no PDF rebuild)
+deploy-html: html
+	@echo "Deploying HTML only..."
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015b/ 2>/dev/null || true

README.md

@@ -1,6 +1,36 @@
-# HdM - Dateiformate, Speichermedien und Schnittstellen
+# 223015b – Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 
-## Creating Slides
+**Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart · Wintersemester 2025/26
+
+**Repository:** [git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
+---
+
+## Termine
+
+| # | Datum | Thema |
+|---|-------|-------|
+| 1 | 19.12.2025 | Grundlagen, Text & Audio |
+| 2 | 09.01.2026 | Bild- & Videoformate |
+| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
+| 5 | TBA | Vertiefung & offene Fragen |
+
+### Kompetenzen
+
+In dieser Veranstaltung erwerben Sie folgende Kompetenzen:
+- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
+- Dateiformate analysieren und verstehen
+- Grundlagen von Kompression (Audio, Bild, Video)
+- Speichermedien und Schnittstellen kennen
+- APIs und Distributionswege verstehen
+
+**Dozent:** Michael Czechowski · mail@librete.ch
+
+---
+
+## Slides erstellen
 
 ### Basic Slide Structure
 

scripts/generate-index.sh

@@ -0,0 +1,93 @@
+#!/usr/bin/env bash
+# Generate index.html for slide overview
+
+BUILD_DIR="${1:-build}"
+
+cat > "$BUILD_DIR/index.html" << 'HEADER'
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>223015b - Dateiformate, Schnittstellen, Speichermedien</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 2rem;
+      background: #1a1a2e;
+      color: #eee;
+    }
+    h1 { color: #fff; margin-bottom: 0.5rem; }
+    .subtitle { color: #888; margin-bottom: 2rem; }
+    .termin {
+      background: #16213e;
+      border-radius: 8px;
+      padding: 1.5rem;
+      margin-bottom: 1rem;
+      text-decoration: none;
+      display: block;
+      transition: transform 0.2s, background 0.2s;
+    }
+    .termin:hover { background: #1f4068; transform: translateX(5px); }
+    .termin h2 { color: #fff; margin: 0 0 0.5rem 0; font-size: 1.2rem; }
+    .termin .date { color: #4ecca3; font-size: 0.9rem; }
+    .termin .topic { color: #aaa; font-size: 0.95rem; margin-left: 1rem; }
+    footer { margin-top: 2rem; color: #666; font-size: 0.85rem; text-align: center; }
+    footer a { color: #4ecca3; }
+  </style>
+</head>
+<body>
+  <h1>223015b</h1>
+  <p class="subtitle">Dateiformate, Schnittstellen, Speichermedien & Distributionswege<br>
+  HdM Stuttgart - WS 2025/26 - Michael Czechowski</p>
+HEADER
+
+# Generate links for each termin (sorted)
+for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do
+  filename=$(basename "$html")
+
+  # Extract components from filename
+  # Format: 2025-12-19-termin-1-grundlagen-text-audio.html
+  date=$(echo "$filename" | grep -oE '^[0-9]{4}-[0-9]{2}-[0-9]{2}')
+  termin_num=$(echo "$filename" | grep -oE 'termin-[0-9]+' | grep -oE '[0-9]+')
+  topic_raw=$(echo "$filename" | sed -E 's/^[0-9]{4}-[0-9]{2}-[0-9]{2}-termin-[0-9]+-//' | sed 's/\.html$//')
+
+  # Format topic: replace - with space, capitalize
+  topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\u&/')
+
+  # Format date
+  if [[ "$date" =~ ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ ]]; then
+    formatted_date=$(date -d "$date" "+%d.%m.%Y" 2>/dev/null || echo "$date")
+  else
+    formatted_date="TBA"
+  fi
+
+  # Handle termin number
+  if [[ "$termin_num" == "0" ]]; then
+    termin_label="Einfuhrung"
+  else
+    termin_label="Termin $termin_num"
+  fi
+
+  cat >> "$BUILD_DIR/index.html" << LINK
+  <a href="$filename" class="termin">
+    <h2>$termin_label</h2>
+    <span class="date">$formatted_date</span>
+    <span class="topic">$topic</span>
+  </a>
+LINK
+done
+
+cat >> "$BUILD_DIR/index.html" << 'FOOTER'
+  <footer>
+    <a href="https://git.librete.ch/hdm/223015b">Git Repository</a> -
+    <a href="mailto:mail@librete.ch">Kontakt</a>
+  </footer>
+</body>
+</html>
+FOOTER
+
+echo "Generated $BUILD_DIR/index.html"

slides/2025-12-19-termin-0-intro.md

@@ -0,0 +1,228 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
+---
+
+![bg fit](./assets/qrcode-0.svg)
+
+---
+
+<!-- _class: lead -->
+
+# Willkommen!
+## Termin 1 – Einführung & Grundlagen
+
+---
+
+# Über mich
+
+**Michael Czechowski**
+
+- Irgendwas mit IT, Cloud und AI
+- Schwerpunkte:
+  - Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source
+- Hintergrund:
+  - Philosophie (Uni Stuttgart) -> NO degree
+  - Wirtschafts-Informatik (Leibniz-FH) -> B.Sc.
+- Kontakt: mail@librete.ch
+
+<!--
+Kurze Vorstellung
+Praxisbezug betonen
+Fragen jederzeit willkommen
+-->
+
+---
+
+<!-- _footer: '' -->
+
+![bg fit](./assets/jung-naiv.png)
+
+---
+
+# AMA (Ask my anything)
+
+*Nur ein Vorschlag ...*
+
+* Hast du alle Bände von AoT daheim?
+* Hast du eine Studierenden-Kneipe mal geleitet?
+* Hast du wirklich 17 Semester Philosophie ohne Abschluss studiert?
+
+---
+
+# Kurze Umfrage
+
+**Bitte Hand heben:**
+
+1) Wer hat schon mal ein Video komprimiert/konvertiert?
+2) Wer kennte die 3-2-1 Regel?
+3) Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
+4) Wer hat schon mal mit APIs gearbeitet?
+5) Wer weiß, was UTF-8 bedeutet?
+6) Wer hat schon mal mit einem CLI gearbeitet?
+6) **Wer hat schon mal etwas mit HTML oder CSS gemacht?** (Hex-Farben wie `#FF0000`?)
+
+<!--
+Niveau der Gruppe einschätzen
+Keine falschen Antworten
+Zeigt, wo wir starten
+HTML/CSS-Frage: Viele kennen Hex-Codes aus Webdesign
+API = Application Programming Interface
+-->
+
+---
+
+# Warum dieses Modul?
+
+**Digitale Medien sind überall** – aber was steckt dahinter?
+
+* Warum ist ein JPEG kleiner als ein PNG?
+* Warum klingt MP3 anders als FLAC?
+* Warum zeigt meine 1 TB Festplatte nur 931 GB?
+* Warum ist USB-C so verwirrend?
+* Wie funktioniert eigentlich Streaming?
+* **→ Die Technik dahinter verstehen!**
+
+<!--
+Praxisnahe Fragen aus dem Alltag
+Nicht nur "was", sondern "warum"
+Verständnis für technische Entscheidungen
+-->
+
+---
+
+# Das Ziel
+
+**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
+
+Als Digital- und Medienwirtschaftler:innen werdet ihr täglich mit technischen Fragen konfrontiert:
+* Welches Format für welchen Zweck?
+* Welche Schnittstelle für welches Gerät?
+* Wie funktioniert die Distribution digitaler Inhalte?
+* **→ Mitreden können – nicht (zwingend) programmieren!**
+
+<!--
+Nicht: Ihr sollt Programmierer werden
+Sondern: Ihr sollt technische Entscheidungen verstehen
+Praxisbezug: Medienproduktion, Marketing, Projektmanagement
+-->
+
+---
+
+# Was ihr lernt
+
+**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
+
+* Fundiertes Grundwissen über Daten und Informationen
+* Dateiformate analysieren und verstehen
+* Grundlagen von Kompression (Audio, Bild, Video)
+* Speichermedien unterscheiden
+* Programmier-Schnittstellen kennenlernen
+* APIs und Distributionswege verstehen
+
+<!--
+Fokus auf Verständnis, nicht auf Programmierung
+Hands-On jede Woche: Selbst ausprobieren
+Ziel: Einblick in die Denkweise von Software-Entwicklern
+-->
+
+---
+
+# Kursübersicht
+
+**5 Termine:**
+
+| # | Datum | Thema |
+|---|-------|-------|
+| 1 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
+| 2 | 09.01.2026 | Bild- & Video-Kompression |
+| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
+| 5 | TBA | Vertiefung & offene Fragen |
+
+**Format:** Theorie + Hands-On (30-40 Min pro Termin)
+
+<!--
+Nicht nur theoretische Inhalte
+Praktische Übungen jede Woche
+Medienwissenschaftler:innen, nicht Informatiker:innen
+-->
+
+---
+
+# Prüfungsleistung 18.02.
+
+**Nach aktuellem Kenntnisstand:**
+
+* 90 min (40% Grundlagen, 40% Dateiformate, 20% AV)
+* Schriftliche Klausur
+* Teils offene Fragen
+* Vermutlich digital
+* Kein Coding!
+* **Prüfungsrelevant:** Alles in den Folien/im Skript
+
+<!--
+Details können sich noch ändern
+Keine Programmieraufgaben
+Verständnisfragen, keine Auswendiglernerei
+-->
+

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

@@ -0,0 +1,860 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
+---
+
+<!-- _class: lead -->
+
+# Termin 2 – 09.01.2026
+## Bild-, Audio- & Videoformate
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/photo-comparison.png)
+
+<!--
+Links: Hochauflösend
+Rechts: Stark komprimiert (JPEG-Artefakte sichtbar)
+Instagram-Effekt
+-->
+
+---
+
+# Was ist ein Bild?
+
+**Digital = Pixelraster**
+
+**Beispiel: 1920×1080 (Full HD)**
+= 2.073.600 Pixel
+
+**Jedes Pixel = 3 Bytes (RGB)**
+2.073.600 × 3 = **6,2 MB**
+
+**Für EIN Foto!**
+
+<!--
+Zoom auf Pixel-Ebene zeigen
+Jedes Pixel = RGB-Tripel (3 Bytes)
+6 MB × 10.000 Fotos = 62 GB
+Smartphone-Speicher wäre schnell voll ohne Kompression
+-->
+
+---
+
+# Rastergrafiken (Bitmaps)
+
+**Pixelraster:** Jeder Bildpunkt hat Koordinate + Farbwert
+
+**Eigenschaften:**
+- Je größer das Bild → größere Datei
+- **Verkleinern:** Meist ohne Qualitätsverlust
+- **Vergrößern:** Wird unscharf/pixelig!
+
+**Formate:** JPEG, PNG, GIF, BMP, TIFF, WebP
+
+**Verwendung:** Fotos, Screenshots, komplexe Bilder
+
+<!--
+Bitmap = Bit-mapped graphics
+Digitalkameras erzeugen immer Rastergrafiken
+Kompression nötig wegen Dateigrößen (PNG, JPEG, GIF)
+Skalierungsproblem: Interpolation erzeugt Unschärfe
+-->
+
+---
+
+# Vektorgrafiken
+
+**Mathematische Beschreibung statt Pixel**
+
+**Kreis speichern:**
+- Rastergrafik: Tausende Pixel
+- Vektorgrafik: Mittelpunkt + Radius (2 Werte!)
+
+**Gespeichert werden:**
+- Form (Kreis, Linie, Pfad...)
+- Position, Farbe, Strichstärke, Füllung
+
+**Vorteil:** Beliebig skalierbar ohne Qualitätsverlust!
+
+**Formate:** SVG, PDF, AI, EPS
+
+<!--
+Vektorgrafik = geometrische Primitive + Attribute
+SVG = Scalable Vector Graphics (Web-Standard)
+AI = Adobe Illustrator
+Ideal für Logos, Icons, Infografiken
+-->
+
+---
+
+# Raster vs. Vektor
+
+| | Rastergrafik | Vektorgrafik |
+|---|---|---|
+| **Basis** | Pixelraster | Mathematische Objekte |
+| **Skalierung** | Qualitätsverlust | Verlustfrei |
+| **Dateigröße** | Abhängig von Auflösung | Abhängig von Komplexität |
+| **Gut für** | Fotos | Logos, Icons, Text |
+| **Formate** | JPEG, PNG, GIF | SVG, PDF, AI |
+
+**Rasterung:** Vektorgrafik → Rastergrafik (für Bildschirm/Druck)
+
+<!--
+Bildschirme sind Rastergeräte (Framebuffer)
+Jede Vektorgrafik muss gerastert werden zur Anzeige
+Browser rastert SVG in Echtzeit
+Firmenlogos: Immer als Vektor anlegen!
+-->
+
+---
+
+# Lossless: PNG
+
+**PNG = Portable Network Graphics (1996)**
+
+**Funktionsweise:**
+- Vorhersage (Pixel ähneln Nachbarn)
+- Differenz-Encoding
+- DEFLATE-Algorithmus (wie ZIP)
+
+**Kompression:** 20-50% Ersparnis
+
+**Gut für:** Screenshots, Logos, Text
+**Schlecht für:** Fotos
+
+<!-- 
+PNG wurde entwickelt als GIF-Alternative (Patent-Probleme)
+Lossless: Originaldaten bleiben erhalten
+Transparenz: Alpha-Kanal (sanfte Übergänge)
+DEFLATE: Gleicher Algorithmus wie ZIP
+-->
+
+---
+
+# Lossy: JPEG
+
+**JPEG = Joint Photographic Experts Group (1992)**
+
+**Eigenschaften:**
+- Lossy Kompression
+- 90%+ Platzersparnis möglich
+- Artefakte bei hoher Kompression
+
+**6 MB → 500 KB** (typisch)
+
+<!-- 
+JPEG-Norm beschreibt nur Kompression, nicht Speicherformat
+JFIF = JPEG File Interchange Format (das eigentliche Dateiformat)
+Dateierweiterungen: .jpg, .jpeg, .jfif (alle gleich)
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/jpeg-artifacts.png)
+
+<!--
+Beispiel: Stark komprimiertes JPEG
+Blocking (8×8-Blöcke sichtbar)
+Ringing (Geister um Kanten)
+Color Banding (Verläufe "treppig")
+-->
+
+---
+
+# Wie funktioniert JPEG? (1/2)
+
+**Schritt 1: RGB → YCbCr**
+- Y = Helligkeit (Luminanz)
+- Cb/Cr = Farbe (Chrominanz)
+
+**Warum?** Menschen sehen Helligkeit besser als Farbe
+
+**Schritt 2: Chroma Subsampling**
+Farbauflösung reduzieren (4:2:0)
+→ 50% Datenmenge weg, kaum sichtbar
+
+<!-- 
+YCbCr = Farbraum-Konversion
+Y = Brightness, Cb = Blue-Yellow, Cr = Red-Green
+4:2:0 Subsampling: Farbe nur jedes 2. Pixel horizontal & vertikal
+Auge merkt's kaum, weil Helligkeitssehen dominiert
+-->
+
+---
+
+# Wie funktioniert JPEG? (2/2)
+
+**Schritt 3: DCT (Discrete Cosine Transform)**
+Bild in 8×8-Blöcke → Frequenzspektrum
+
+**Schritt 4: Quantisierung**
+Hohe Frequenzen (Details) stark reduzieren
+→ **Hier passiert Datenverlust!**
+
+**Schritt 5: Huffman-Coding**
+Lossless-Kompression der Restdaten
+
+<!-- 
+DCT: Ähnlich wie FFT bei Audio
+8×8 Blöcke: Warum JPEG "blocky" wird bei hoher Kompression
+Quantisierung: Quality-Schieberegler steuert genau das
+Huffman: Finale Effizienz (wie bei MP3)
+-->
+
+---
+
+# JPEG Quality
+
+| Quality | Dateigröße | Artefakte |
+|---------|------------|-----------|
+| **100** | ≈2-3 MB | Kaum |
+| **85-90** | ≈200-400 KB | Minimal |
+| **50** | ≈100 KB | Sichtbar |
+
+**Sweet Spot: 85-90**
+10x Kompression, für Menschen kaum unterscheidbar
+
+<!-- 
+Quality 100 = Minimum Compression (nicht lossless!)
+Quality 85-90 = Standard für Web
+Quality 50 = Sichtbare Artefakte (Blocking, Ringing)
+Photoshop "Save for Web": Standard ist 60
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/gif-animation.png)
+
+<!--
+GIF-Animation (z.B. Meme)
+256 Farben, aber Animationen möglich
+-->
+
+---
+
+# Die GIF-Geschichte
+
+**GIF = Graphics Interchange Format (1987)**
+CompuServe (US-Online-Dienst)
+
+**Features:**
+- 256 Farben max (8-bit Palette)
+- Lossless (für Palette)
+- Animationen!
+
+**1994 Twist:** Unisys hält Patent auf LZW-Kompression
+→ Fordert Lizenzgebühren
+
+→ **"Burn All GIFs!" Kampagne**
+
+<!-- 
+CompuServe: Früher Online-Dienst (1969-2009)
+LZW = Lempel-Ziv-Welch Compression
+Unisys Patent-Trolling: Erst Jahre nach GIF-Einführung
+Community-Reaktion: Boykott, Suche nach Alternative
+Ergebnis: PNG wurde entwickelt (1996)
+-->
+
+---
+
+# PNG vs. GIF
+
+**GIF:**
+✓ Animationen
+✓ Breite Unterstützung
+❌ Nur 256 Farben
+❌ Patent-Probleme (bis 2003)
+
+**PNG:**
+✓ Millionen Farben
+✓ Alpha-Transparenz
+✓ Patent-frei
+❌ Keine Animationen (bis APNG, 2004)
+
+**Ergebnis:** PNG für Grafiken, GIF für Memes!
+
+<!-- 
+APNG = Animated PNG (Firefox, Safari support)
+WebP (Google, 2010): Animationen + bessere Kompression
+GIF überlebte kulturell (Meme-Format)
+"GIF" Aussprache: "Jif" vs. "Gif" – ewiger Streit
+-->
+
+---
+
+# WebP & AVIF
+
+**WebP (Google, 2010):**
+- Lossy UND Lossless
+- Animationen
+- 25-35% kleiner als JPEG
+
+**AVIF (2019):**
+- Basiert auf AV1-Video-Codec
+- 50% kleiner als JPEG
+- HDR-Unterstützung
+- Patent-frei
+
+**Problem:** Browser-Support dauert Jahre
+
+<!-- 
+WebP: Von Google entwickelt, deshalb Skepsis
+AVIF: Alliance for Open Media (Google, Netflix, Amazon, Mozilla...)
+Browser-Support 2024: WebP fast überall, AVIF wachsend
+JPEG bleibt dominant (Kompatibilität!)
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/instagram-quality-loss.png)
+
+<!--
+Vorher/Nachher: Hochauflösend vs. Instagram-Upload
+Sichtbare Qualitätsverluste
+-->
+
+---
+
+# Warum Instagram eure Fotos "ruiniert"
+
+**Upload-Pipeline:**
+1. Dein Foto: 12 MP, 8 MB
+2. Instagram skaliert: max. 1080px
+3. Re-Kompression: JPEG Quality ~75
+4. Endgröße: 200-400 KB
+
+**Warum?**
+- Speicherkosten (Milliarden Fotos!)
+- Ladezeiten (Mobile)
+- Bandbreite (günstiger)
+
+<!-- 
+Instagram ist keine Kunstgalerie
+Optimiert für Geschwindigkeit, nicht Qualität
+Facebook macht dasselbe
+Lösung: Portfolio-Websites (eigene Kontrolle)
+-->
+
+---
+
+# Hands-On: Kompression vergleichen
+
+**Aufgabe (40 Min):**
+
+1. Hochauflösendes Foto (eigenes oder CC)
+2. Exportiere:
+   - PNG
+   - JPEG Q100, Q85, Q50
+   - WebP (optional)
+3. Tool: **Squoosh.app** (Google-Tool)
+4. Vergleiche: Dateigrößen, sichtbare Unterschiede
+5. Wo werden Artefakte sichtbar?
+
+<!-- 
+Squoosh.app: Browser-basiert, keine Installation
+Side-by-Side-Vergleich mit Zoom
+Verschiedene Codecs testen
+Studis sollen selbst "Sweet Spot" finden
+-->
+
+---
+
+# Fleißaufgabe bis nächste Woche
+
+**Nimm ein Foto (eigenes oder CC)**
+
+1. Exportiere: PNG, JPEG Q90, JPEG Q50
+2. Vergleiche Größen & Qualität
+3. Welche Quality ist für dich "akzeptabel"?
+4. Wo siehst du zuerst Artefakte?
+
+**Bonus:** Teste WebP oder AVIF
+
+<!--
+Selbstständiges Experimentieren
+Keine Abgabe, nur zum Ausprobieren
+Subjektive Wahrnehmung (jeder anders)
+-->
+
+---
+
+<!-- _class: lead -->
+
+# Teil 2: Video
+## Kompression & Codecs
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/netflix-4k.png)
+
+<!-- 
+Netflix 4K-Streaming
+Unmöglich ohne moderne Codecs
+-->
+
+---
+
+# Das Problem: Video ist RIESIG
+
+**1 Minute 4K-Video (3840×2160):**
+
+- 30 fps (Bilder/Sekunde)
+- Jedes Bild: 24,8 MB (unkomprimiert)
+
+**Rechnung:**
+30 × 24,8 MB = **744 MB/Sekunde**
+× 60 Sekunden = **44,6 GB/Minute**
+
+**2-Stunden-Film: 5,3 TB!**
+
+<!-- 
+4K = 3840×2160 Pixel = 8,3 Megapixel pro Frame
+30 fps = Standard, Kino = 24 fps, Gaming = 60+ fps
+Ohne Kompression: Unmöglich zu streamen oder speichern
+-->
+
+---
+
+# Container vs. Codec
+
+**Container = Die Box**
+Verpackt Video, Audio, Untertitel, Metadaten
+
+**Beispiele:** MP4, MKV, AVI, MOV
+
+**Codec = Kompressionsalgorithmus**
+Entscheidet, WIE Daten komprimiert werden
+
+**Video-Codecs:** H.264, H.265, VP9, AV1
+**Audio-Codecs:** AAC, MP3, Opus
+
+<!-- 
+Container ≠ Codec (häufiges Missverständnis!)
+MP4 ist KEIN Codec, sondern Container
+Schachtel-Analogie: Container = Karton, Codec = Inhalt
+Ein MP4 kann H.264, H.265 oder AV1 enthalten
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/container-codec-diagram.png)
+
+<!-- 
+Diagramm: Container mit verschiedenen Streams
+Video-Track (H.264)
+Audio-Track (AAC)
+Untertitel-Track (SRT)
+Metadaten (Titel, Künstler, etc.)
+-->
+
+---
+
+# Video-Kompression: Drei Prinzipien
+
+**1. Spatial Compression (Intra-Frame)**
+Jedes Bild einzeln (wie JPEG)
+→ I-Frames
+
+**2. Temporal Compression (Inter-Frame)**
+Nur Änderungen zwischen Bildern
+→ P-Frames, B-Frames
+
+**3. Motion Compensation**
+"Ball bewegt sich von A nach B"
+
+<!-- 
+Spatial: Innerhalb eines Bildes (JPEG-ähnlich)
+Temporal: Zwischen Bildern (zeitliche Redundanz)
+Motion Compensation: Intelligente Vorhersage
+→ 90%+ Effizienz durch temporale Kompression
+-->
+
+---
+
+# I-Frames, P-Frames, B-Frames
+
+**I-Frame (Intra):**
+Vollständiges Bild (wie JPEG)
+Groß, aber unabhängig
+
+**P-Frame (Predicted):**
+Referenziert vorherige Frames
+Viel kleiner
+
+**B-Frame (Bi-directional):**
+Referenziert vorherige UND zukünftige Frames
+Am effizientesten
+
+**GOP:** I - B - B - P - B - B - P - B - B - I
+
+<!-- 
+GOP = Group of Pictures (typisch 12-15 Frames)
+I-Frame: Alle 1-2 Sekunden nötig (für Seeking)
+P-Frame: "Pixel X bewegt sich 5px rechts"
+B-Frame: Komplex, aber beste Kompression
+Wenn du vorspulst: Sucht nach nächstem I-Frame
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/iframe-pframe-diagram.png)
+
+<!-- 
+Visualisierung: I/P/B-Frame-Abhängigkeiten
+Pfeile zeigen Referenzen
+I-Frame = Anker, P/B-Frames hängen dran
+-->
+
+---
+
+# H.264: Der König
+
+**H.264 / AVC (2003)**
+
+**Warum dominant?**
+✓ Exzellente Kompression (100:1 möglich)
+✓ Hardware-Support (jedes Gerät seit ~2010)
+✓ YouTube, Netflix, Blu-ray – alles H.264
+
+**Features:**
+- Variable Block-Größen (16×16 bis 4×4)
+- Deblocking-Filter
+- CABAC-Coding
+
+<!-- 
+AVC = Advanced Video Coding
+MPEG-4 Part 10 = H.264 (gleicher Standard)
+Revolutionierte Video-Streaming
+Hardware-Decoder in CPUs/GPUs → Batterie-schonend
+CABAC = Context-Adaptive Binary Arithmetic Coding
+-->
+
+---
+
+# Das Patent-Problem
+
+**H.264 ist NICHT frei!**
+
+**MPEG-LA (Patent Pool):**
+- 2.000+ Patente von ~30 Unternehmen
+- Apple, Microsoft, Sony, Panasonic...
+
+**Lizenzgebühren:**
+- Hardware-Decoder: $0,20/Einheit
+- Content-Distribution: Kostenlos für "Internet Broadcast"
+
+**Problem:** Open-Source-Projekte in Grauzone
+
+<!-- 
+MPEG-LA = Licensing Authority
+Firefox weigerte sich lange, H.264 zu supporten (Patent-Gründe)
+Chromium musste extern linken
+Patent-Pool: Firmen teilen Patente, gemeinsame Lizenzierung
+"Free to View" Klausel: YouTube etc. kostenlos
+-->
+
+---
+
+# H.265 / HEVC
+
+**H.265 (2013):**
+50% bessere Kompression als H.264
+
+**ABER:** Patent-Desaster
+
+**Drei (!) konkurrierende Patent-Pools:**
+- MPEG-LA
+- HEVC Advance
+- Velos Media
+
+→ Viele bleiben bei H.264 oder suchen Alternativen
+
+<!-- 
+HEVC = High Efficiency Video Coding
+Technisch überlegen, aber juristisch Albtraum
+Apple nutzt HEVC (iPhone-Videos)
+Netflix zögert wegen Lizenzkosten
+Fragmentierung verzögert Adoption
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/youtube-vp9.png)
+
+<!-- 
+YouTube VP9-Logo
+Google's Patent-freie Alternative
+-->
+
+---
+
+# VP9: Googles Antwort
+
+**VP9 (2013):**
+Entwickelt von Google (On2-Akquisition)
+
+**Eigenschaften:**
+✓ Ähnlich H.265-Kompression
+✓ KOSTENLOS, patent-frei (laut Google)
+✓ YouTube nutzt VP9 für 4K
+
+**Nachteile:**
+❌ Hardware-Support langsam
+❌ Höherer CPU-Aufwand
+❌ Nicht universell wie H.264
+
+<!-- 
+On2 Technologies: Gekauft 2010 für $133M
+VP8 → VP9 → AV1 (Evolution)
+YouTube forciert VP9: 4K-Videos nur VP9/AV1
+Hardware-Decoder erst ab ~2016 (langsame Adoption)
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/av1-logo.png)
+
+<!-- 
+AV1-Logo
+Alliance for Open Media
+-->
+
+---
+
+# AV1: Die Open-Source-Revolution
+
+**AV1 (2018):**
+Alliance for Open Media: Google, Netflix, Amazon, Microsoft, Apple, Mozilla...
+
+**Ziel:** Patent-freier, moderner Codec
+
+**Features:**
+✓ 30% besser als H.265
+✓ Royalty-free, Open Source
+✓ 8K, HDR, hohe Frame-Rates
+
+**Stand 2025:**
+YouTube, Netflix nutzen AV1 für 4K/8K
+
+<!-- 
+AOM = Alliance for Open Media (2015 gegründet)
+Alle Big-Tech-Player vereint (historisch!)
+"Fuck you" an Patent-Mafia
+Problem: Encoding SEHR langsam (10-100x vs. H.264)
+Hardware-Encoder kommen (ab 2020er-GPUs)
+-->
+
+---
+
+# Adaptive Bitrate Streaming
+
+**Problem:** Internet-Geschwindigkeit variiert
+
+**Lösung:** Mehrere Qualitäten parallel
+
+**MPEG-DASH / HLS:**
+- 4K (20 Mbps)
+- 1080p (5 Mbps)
+- 720p (2,5 Mbps)
+- 480p (1 Mbps)
+- 240p (0,5 Mbps)
+
+Segmente: 2-10 Sekunden
+Player wählt dynamisch
+
+<!-- 
+DASH = Dynamic Adaptive Streaming over HTTP
+HLS = HTTP Live Streaming (Apple)
+Beide ähnlich, aber inkompatibel
+Manifest-Datei: Liste aller Qualitäten
+Player misst Bandbreite, wechselt live
+→ Warum Netflix plötzlich pixelig wird
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg](./assets/streaming-quality-switch.png)
+
+<!-- 
+Visualisierung: Qualitätswechsel während Playback
+Bandbreite schwankt → Player reagiert
+-->
+
+---
+
+# Container im Detail
+
+**MP4:**
+- Standard für Web, Mobile
+- H.264, H.265, AV1
+- DRM-fähig
+
+**MKV (Matroska):**
+- Open Source, extrem flexibel
+- Beliebig viele Audio-/Untertitel-Spuren
+- Fast jeden Codec
+
+**WebM:**
+- Google, Web-optimiert
+- Nur VP9/AV1 + Opus/Vorbis
+
+<!-- 
+MP4 = MPEG-4 Part 14 (ISO-Standard)
+Matroska = Russisch: Matrjoschka (Puppen ineinander)
+WebM = Subset von Matroska (HTML5-Video)
+MKV vs. MP4: Offenheit vs. Kompatibilität
+-->
+
+---
+
+# Hands-On: Video analysieren
+
+**Aufgabe (40 Min):**
+
+**Tool:** FFmpeg (CLI) oder HandBrake (GUI)
+
+1. Download: CC-Video (Big Buck Bunny, ~1 Min)
+2. Analysiere: `ffmpeg -i video.mp4` oder MediaInfo
+3. Notiere: Container, Codec, Bitrate, Auflösung
+4. Konvertiere:
+   - H.264, 1080p, 5 Mbps
+   - H.265, 1080p, 2,5 Mbps
+5. Vergleiche: Größen, Encoding-Zeit, Qualität
+
+<!-- 
+Big Buck Bunny: Open-Source-Film (Blender Foundation)
+FFmpeg: Swiss Army Knife für Video
+HandBrake: GUI für FFmpeg (einfacher)
+MediaInfo: Detaillierte Datei-Analyse
+Encoding-Zeit: H.265 deutlich langsamer als H.264
+-->
+
+---
+
+# Fleißaufgabe bis nächste Woche
+
+**Nimm kurzes Video (eigenes oder CC, max. 1 Min)**
+
+1. Analysiere: Container, Codecs, Bitrate
+2. Konvertiere: H.264 + H.265 (gleiche Qualität)
+3. Vergleiche: Dateigrößen, Encoding-Zeiten, visueller Unterschied?
+
+**Bonus:** AV1-Encoding (Warnung: SEHR langsam!)
+
+<!--
+MediaInfo oder ffprobe für Analyse
+HandBrake für Konvertierung
+Keine Abgabe, nur zum Ausprobieren
+-->
+
+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** mail@librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+

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

@@ -0,0 +1,107 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #5da9e9;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.7rem;
+}
+h2 {
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #5da9e9;
+  border-radius: 8px;
+  border-left: 3px solid #5da9e9;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5da9e9;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg fit opacity:0.4](./assets/digital-landscape.png)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Wintersemester 2025/26**
+
+[https://git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
+
+---
+
+<!-- _class: lead -->
+
+# Termin 5 – TBA
+## Vertiefung & Offene Fragen
+
+---
+
+# Ersatztermin
+
+**Dieser Termin wird noch bekannt gegeben.**
+
+Mögliche Inhalte:
+- Vertiefung von Themen nach Wunsch
+- Praxisübungen & Hands-On
+- Offene Fragen & Diskussion
+- Prüfungsvorbereitung
+
+<!--
+Flexibler Termin für Nachholbedarf
+Themen nach Interesse der Studierenden
+-->
+
+---
+
+<!-- _class: lead -->
+
+# Fragen & Diskussion
+
+**Kontakt:** mail@librete.ch
+**Folien:** Online verfügbar unter https://librete.ch/hdm/223015b
+
+---
+
+# Lizenz & Attribution
+
+Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**
+
+- Erlaubt Teilen & Anpassen mit Namensnennung
+- Adaptionen müssen unter gleicher Lizenz geteilt werden
+
+Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/
+

slides/assets/qrcode-0.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 41" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h41v41H0z"/><path stroke="#000000" d="M4 4.5h7m1 0h3m1 0h3m2 0h2m3 0h2m2 0h7M4 5.5h1m5 0h1m2 0h1m2 0h11m3 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h1m2 0h1m2 0h1m1 0h1m2 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h1m2 0h2m2 0h2m3 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h1m1 0h3m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h2m1 0h4m4 0h1m2 0h1m3 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M12 11.5h2m2 0h2m3 0h7M4 12.5h1m3 0h1m1 0h4m3 0h2m2 0h13m2 0h1M6 13.5h1m1 0h2m1 0h2m3 0h1m1 0h1m2 0h2m4 0h1m1 0h1m3 0h4M7 14.5h2m1 0h2m1 0h2m2 0h5m3 0h1m1 0h1m1 0h2m2 0h1M5 15.5h1m6 0h1m1 0h4m1 0h4m3 0h1m2 0h1M6 16.5h1m2 0h4m1 0h2m1 0h1m2 0h3m2 0h1m7 0h1m2 0h1M4 17.5h1m1 0h1m4 0h1m1 0h2m3 0h2m1 0h1m2 0h1m1 0h3m3 0h1m1 0h1M8 18.5h3m1 0h5m1 0h1m1 0h1m1 0h2m1 0h1m3 0h2m1 0h1m2 0h1M4 19.5h1m2 0h2m3 0h4m1 0h1m3 0h2m1 0h2m3 0h2m2 0h1M5 20.5h3m2 0h1m1 0h2m3 0h2m1 0h1m1 0h4m4 0h1m1 0h4M4 21.5h2m1 0h3m4 0h3m1 0h1m1 0h1m6 0h1m1 0h1m3 0h4M8 22.5h4m1 0h1m2 0h1m1 0h1m3 0h1m1 0h1m2 0h1m3 0h1m1 0h1m1 0h1M4 23.5h2m1 0h1m1 0h1m2 0h1m1 0h3m3 0h1m1 0h4m4 0h2m4 0h1M5 24.5h3m2 0h2m3 0h2m1 0h1m1 0h1m1 0h1m6 0h2m2 0h1M4 25.5h3m4 0h1m1 0h1m3 0h1m1 0h1m4 0h9m1 0h2M6 26.5h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h5m1 0h1m3 0h1m1 0h2m2 0h1m1 0h1M7 27.5h2m2 0h2m1 0h1m1 0h3m1 0h2m1 0h4m6 0h4M4 28.5h3m2 0h7m3 0h1m2 0h11m3 0h1M12 29.5h1m2 0h1m1 0h1m6 0h1m3 0h1m3 0h1m1 0h1m1 0h1M4 30.5h7m1 0h3m1 0h1m1 0h2m2 0h1m5 0h1m1 0h1m1 0h2m2 0h1M4 31.5h1m5 0h1m3 0h1m2 0h1m3 0h2m3 0h1m1 0h1m3 0h1m2 0h1M4 32.5h1m1 0h3m1 0h1m1 0h1m1 0h1m4 0h4m5 0h6m1 0h2M4 33.5h1m1 0h3m1 0h1m2 0h3m3 0h1m1 0h1m1 0h2m1 0h3m1 0h3m1 0h1m1 0h1M4 34.5h1m1 0h3m1 0h1m2 0h1m1 0h1m1 0h1m1 0h3m4 0h3m1 0h4M4 35.5h1m5 0h1m8 0h1m5 0h1m2 0h1m1 0h1M4 36.5h7m1 0h5m1 0h1m1 0h1m3 0h3m3 0h1m2 0h2m1 0h1"/></svg>

slides/assets/qrcode-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" shape-rendering="crispEdges"><path fill="#ffffff" d="M0 0h45v45H0z"/><path stroke="#000000" d="M4 4.5h7m1 0h1m1 0h1m1 0h1m2 0h1m2 0h1m3 0h5m3 0h7M4 5.5h1m5 0h1m1 0h1m3 0h4m1 0h1m2 0h1m4 0h1m1 0h2m1 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m2 0h4m3 0h1m1 0h1m1 0h3m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h4m3 0h1m2 0h1m2 0h2m2 0h3m2 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m7 0h1m2 0h2m1 0h4m2 0h2m2 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m5 0h2m2 0h1m2 0h1m1 0h2m7 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M12 11.5h3m2 0h1m1 0h1m1 0h1m3 0h1m1 0h1m1 0h2m1 0h1M4 12.5h1m1 0h2m1 0h3m3 0h2m2 0h2m2 0h4m1 0h1m5 0h1m2 0h1m1 0h2M4 13.5h2m2 0h1m4 0h8m1 0h2m2 0h3m1 0h1m2 0h1m2 0h1m2 0h1M5 14.5h3m2 0h1m1 0h5m2 0h1m1 0h1m1 0h4m2 0h3m2 0h2m2 0h1M5 15.5h1m2 0h2m3 0h1m2 0h1m1 0h2m1 0h1m2 0h1m2 0h4m1 0h1m2 0h1M5 16.5h2m1 0h1m1 0h2m4 0h2m2 0h3m2 0h1m3 0h3m1 0h2m1 0h1m1 0h3M4 17.5h2m2 0h1m2 0h1m1 0h2m4 0h1m7 0h1m2 0h8m2 0h1M4 18.5h1m4 0h2m1 0h1m3 0h1m1 0h2m1 0h3m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1M5 19.5h2m1 0h1m4 0h1m2 0h4m1 0h5m1 0h1m2 0h7m2 0h2M4 20.5h1m1 0h3m1 0h2m3 0h4m1 0h4m1 0h1m2 0h1m1 0h1m1 0h2m1 0h1m1 0h4M6 21.5h4m1 0h2m4 0h1m2 0h1m9 0h11M4 22.5h1m2 0h2m1 0h1m1 0h1m2 0h1m3 0h2m1 0h1m5 0h1m2 0h1m4 0h2m1 0h2M5 23.5h2m1 0h2m3 0h1m2 0h1m1 0h1m2 0h1m1 0h4m3 0h3m2 0h2m1 0h2M4 24.5h4m2 0h2m6 0h1m3 0h1m1 0h1m2 0h1m5 0h1m1 0h3m2 0h1M4 25.5h1m6 0h1m2 0h2m1 0h1m1 0h1m5 0h4m3 0h1m4 0h1m1 0h1M6 26.5h1m1 0h1m1 0h1m3 0h1m1 0h1m4 0h1m1 0h1m2 0h4m2 0h4m3 0h2M4 27.5h2m2 0h2m1 0h2m4 0h1m1 0h2m1 0h2m1 0h2m1 0h1m5 0h1m1 0h3m1 0h1M6 28.5h1m1 0h3m5 0h2m1 0h1m2 0h1m1 0h1m2 0h1m1 0h1m1 0h2m2 0h1m2 0h1m1 0h1M5 29.5h3m4 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h3m1 0h1m2 0h1m1 0h1m2 0h1m2 0h1m1 0h2M5 30.5h3m2 0h4m1 0h1m3 0h5m2 0h1m3 0h1m1 0h1m2 0h1m1 0h1m1 0h1M4 31.5h1m1 0h1m1 0h1m9 0h1m1 0h2m2 0h2m4 0h1m5 0h2m1 0h1M6 32.5h1m3 0h2m2 0h9m1 0h1m4 0h1m2 0h6M12 33.5h3m1 0h2m1 0h1m1 0h1m1 0h1m2 0h3m3 0h1m3 0h1m1 0h3M4 34.5h7m1 0h2m1 0h3m2 0h2m1 0h1m2 0h1m1 0h2m2 0h1m1 0h1m1 0h1m1 0h1m1 0h1M4 35.5h1m5 0h1m1 0h4m2 0h1m1 0h1m3 0h5m1 0h3m3 0h1m2 0h2M4 36.5h1m1 0h3m1 0h1m3 0h1m1 0h2m1 0h1m2 0h1m1 0h1m1 0h1m1 0h1m3 0h6m2 0h1M4 37.5h1m1 0h3m1 0h1m1 0h5m2 0h1m1 0h3m1 0h10m1 0h1m2 0h2M4 38.5h1m1 0h3m1 0h1m1 0h3m2 0h2m1 0h3m3 0h1m3 0h1m3 0h1m1 0h1m1 0h2M4 39.5h1m5 0h1m4 0h2m1 0h1m1 0h3m1 0h2m1 0h1m1 0h1m1 0h1m1 0h1m1 0h2M4 40.5h7m1 0h1m1 0h4m1 0h1m2 0h1m2 0h1m2 0h4m1 0h1m2 0h1m2 0h2"/></svg>

slides/materials/wtf1

@@ -0,0 +1 @@
+Dies ist eine einfache Textdatei. Keine Magic Number hier! Plaintext hat keinen Standard-Header.