restructure: rename termin to kapitel, flatten folder structure

- rename slide files: YYYY-MM-DD-termin-N-topic.md → NN-topic.md
- flatten folders: courses/X/slides/ → slides/X/
- replace "Termin" with "Kapitel" in all content
- add klausur extraction script (make klausur)
- update Makefile, generate-index.sh, dev-server.sh
- add README.md with full documentation

CLAUDE.md

@@ -4,8 +4,8 @@ This project builds presentation decks for Marp, supporting multiple courses.
 
 ## Courses
 
-- **223015b** - Dateiformate, Schnittstellen, Speichermedien (6 Termine)
+- **223015b** - Dateiformate, Schnittstellen, Speichermedien (6 Kapitel)
-- **223015c** - Internettechnologien (3 Termine)
+- **223015c** - Internettechnologien (3 Kapitel)
 
 ## Agent Restrictions
 
@@ -15,7 +15,7 @@ This project builds presentation decks for Marp, supporting multiple courses.
 
 ## Critical File Protection
 
-Slide files in `courses/*/slides/*.md` are main content files:
+Slide files in `slides/*/*.md` are main content files:
 - ALLOWED: Adding slides, adjusting content, fixing typos, enhancing sections
 - FORBIDDEN (without permission): Deleting slides, removing sections, bulk deletions
 - Before ANY deletion: ALWAYS ask user for confirmation
@@ -23,9 +23,9 @@ Slide files in `courses/*/slides/*.md` are main content files:
 ## Project Structure
 
 ```
-courses/
+slides/
-├── 223015b/slides/     # Dateiformate course
+├── 223015b/            # Dateiformate course
-└── 223015c/slides/     # Internettechnik course
+└── 223015c/            # Internettechnik course
 scripts/                # Shared scripts
 themes/                 # Custom Marp themes
 build/                  # Generated output (gitignored)
@@ -34,13 +34,14 @@ build/                  # Generated output (gitignored)
 ## Build Commands
 
 ```bash
-make dev-b          # Dev server 223015b (port 1312)
+make dev-b          # Dev server 223015b (port 1311)
-make dev-c          # Dev server 223015c (port 1313)
+make dev-c          # Dev server 223015c (port 1312)
 make build          # Build all courses
 make build-b        # Build 223015b only
 make build-c        # Build 223015c only
 make html           # HTML only
 make pdf            # PDF only
+make klausur        # Extract klausur slides → slides/*/klausur.md
 make deploy         # Deploy all (ASK FIRST!)
 ```
 
@@ -56,12 +57,12 @@ nix run .#optimize-img -- <path>      # Optimize images
 ## Code Style Guidelines
 
 ### File Structure
-- Slides in `courses/<course>/slides/`
+- Slides in `slides/<course>/`
-- Assets in `courses/<course>/slides/assets/`
+- Assets in `slides/<course>/assets/`
 - Always reference images as `./assets/filename.png`
 
 ### Naming Conventions
-- Slide files: `YYYY-MM-DD-termin-N-topic.md`
+- Slide files: `NN-topic.md` (e.g., `01-grundlagen.md`)
 - Images: `snake_case.jpg` or `kebab-case.jpg`
 
 ### Markdown Style

Makefile

@@ -1,11 +1,11 @@
 # HdM Slides - Unified Makefile
 # Supports multiple courses: 223015b (Dateiformate) and 223015c (Internettechnik)
 
-.PHONY: help dev dev-b dev-c build build-b build-c pdf html clean install deploy qr optimize-images
+.PHONY: help dev dev-b dev-c build build-b build-c pdf html klausur clean install deploy qr optimize-images
 
 # Course configuration
 COURSES = 223015b 223015c
-COURSE_DIR = courses
+SLIDES_DIR = slides
 
 # Port configuration (index starts at BASE_PORT, courses increment from there)
 BASE_PORT = 1310
@@ -14,12 +14,12 @@ INDEX_PORT = $(BASE_PORT)
 # Course-specific settings
 223015b_NAME = Dateiformate, Schnittstellen, Speichermedien
 223015b_PORT = 1311
-223015b_TERMINS = 2025-12-19-termin-0-intro 2025-12-19-termin-1-grundlagen-text-audio 2026-01-09-termin-2-bild-audio-video 2026-01-23-termin-3-speichermedien-schnittstellen 2026-01-30-termin-4-distribution-apis-zukunft 2026-xx-xx-termin-5-vertiefung-offene-fragen
+223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen
 223015b_DEPLOY_PATH = /home/tengo/html/hdm/223015b
 
 223015c_NAME = Internettechnologien
 223015c_PORT = 1312
-223015c_TERMINS = 2025-12-20-termin-1-geschichte-grundlagen-html 2026-01-10-termin-2-netzwerke-protokolle-css 2026-01-24-termin-3-interaktivitaet-javascript
+223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript
 223015c_DEPLOY_PATH = /home/tengo/html/hdm/223015c
 
 DEPLOY_HOST = tengo@tuttle.uberspace.de
@@ -43,6 +43,7 @@ help:
 	@echo "  make build-c     - Build 223015c only"
 	@echo "  make pdf         - Export all to PDF"
 	@echo "  make html        - Export all to HTML"
+	@echo "  make klausur     - Extract klausur slides"
 	@echo ""
 	@echo "Tools:"
 	@echo "  make qr URL=...  - Generate QR code for URL"
@@ -74,24 +75,24 @@ dev-kill:
 dev-b:
 	@echo "Starting 223015b dev server on port $(223015b_PORT)..."
 	@echo "Open: http://localhost:$(223015b_PORT)"
-	PORT=$(223015b_PORT) npx @marp-team/marp-cli --server $(COURSE_DIR)/223015b/slides/
+	PORT=$(223015b_PORT) npx @marp-team/marp-cli --server $(SLIDES_DIR)/223015b/
 
 dev-c:
 	@echo "Starting 223015c dev server on port $(223015c_PORT)..."
 	@echo "Open: http://localhost:$(223015c_PORT)"
-	PORT=$(223015c_PORT) npx @marp-team/marp-cli --server $(COURSE_DIR)/223015c/slides/
+	PORT=$(223015c_PORT) npx @marp-team/marp-cli --server $(SLIDES_DIR)/223015c/
 
 # Build functions
 define build_course
 	@echo "Building $(1)..."
 	@mkdir -p build/$(1)
-	@cp -r $(COURSE_DIR)/$(1)/slides/assets build/$(1)/ 2>/dev/null || true
+	@cp -r $(SLIDES_DIR)/$(1)/assets build/$(1)/ 2>/dev/null || true
-	@cp -r $(COURSE_DIR)/$(1)/slides/materials build/$(1)/ 2>/dev/null || true
+	@cp -r $(SLIDES_DIR)/$(1)/materials build/$(1)/ 2>/dev/null || true
-	@for f in $($(1)_TERMINS); do \
+	@for f in $($(1)_KAPITEL); do \
-		if [ -f "$(COURSE_DIR)/$(1)/slides/$$f.md" ]; then \
+		if [ -f "$(SLIDES_DIR)/$(1)/$$f.md" ]; then \
 			echo "  Building $$f..."; \
-			npx @marp-team/marp-cli $(COURSE_DIR)/$(1)/slides/$$f.md -o build/$(1)/$$f.html; \
+			npx @marp-team/marp-cli $(SLIDES_DIR)/$(1)/$$f.md -o build/$(1)/$$f.html; \
-			npx @marp-team/marp-cli $(COURSE_DIR)/$(1)/slides/$$f.md --pdf --allow-local-files -o build/$(1)/$$f.pdf; \
+			npx @marp-team/marp-cli $(SLIDES_DIR)/$(1)/$$f.md --pdf --allow-local-files -o build/$(1)/$$f.pdf; \
 		fi \
 	done
 	@./scripts/generate-index.sh $(1) build/$(1)
@@ -110,12 +111,12 @@ build: build-b build-c
 define html_course
 	@echo "Building HTML for $(1)..."
 	@mkdir -p build/$(1)
-	@cp -r $(COURSE_DIR)/$(1)/slides/assets build/$(1)/ 2>/dev/null || true
+	@cp -r $(SLIDES_DIR)/$(1)/assets build/$(1)/ 2>/dev/null || true
-	@cp -r $(COURSE_DIR)/$(1)/slides/materials build/$(1)/ 2>/dev/null || true
+	@cp -r $(SLIDES_DIR)/$(1)/materials build/$(1)/ 2>/dev/null || true
-	@for f in $($(1)_TERMINS); do \
+	@for f in $($(1)_KAPITEL); do \
-		if [ -f "$(COURSE_DIR)/$(1)/slides/$$f.md" ]; then \
+		if [ -f "$(SLIDES_DIR)/$(1)/$$f.md" ]; then \
 			echo "  $$f.html"; \
-			npx @marp-team/marp-cli $(COURSE_DIR)/$(1)/slides/$$f.md -o build/$(1)/$$f.html; \
+			npx @marp-team/marp-cli $(SLIDES_DIR)/$(1)/$$f.md -o build/$(1)/$$f.html; \
 		fi \
 	done
 	@./scripts/generate-index.sh $(1) build/$(1)
@@ -133,10 +134,10 @@ html: html-b html-c
 define pdf_course
 	@echo "Building PDFs for $(1)..."
 	@mkdir -p build/$(1)
-	@for f in $($(1)_TERMINS); do \
+	@for f in $($(1)_KAPITEL); do \
-		if [ -f "$(COURSE_DIR)/$(1)/slides/$$f.md" ]; then \
+		if [ -f "$(SLIDES_DIR)/$(1)/$$f.md" ]; then \
 			echo "  $$f.pdf"; \
-			npx @marp-team/marp-cli $(COURSE_DIR)/$(1)/slides/$$f.md --pdf --allow-local-files -o build/$(1)/$$f.pdf; \
+			npx @marp-team/marp-cli $(SLIDES_DIR)/$(1)/$$f.md --pdf --allow-local-files -o build/$(1)/$$f.pdf; \
 		fi \
 	done
 endef
@@ -149,6 +150,16 @@ pdf-c: build/.exists
 
 pdf: pdf-b pdf-c
 
+# Klausur slide extraction
+klausur-b:
+	@./scripts/extract-klausur.sh 223015b
+
+klausur-c:
+	@./scripts/extract-klausur.sh 223015c
+
+klausur: klausur-b klausur-c
+	@echo "Klausur slides extracted for all courses!"
+
 # QR Code generation (uses nix-shell)
 qr:
 ifndef URL
@@ -174,9 +185,9 @@ ifndef COURSE
 	@echo "Usage: make optimize-images COURSE=223015b"
 else
 	@echo "Optimizing images for $(COURSE)..."
-	@mkdir -p $(COURSE_DIR)/$(COURSE)/slides/assets-original
+	@mkdir -p $(SLIDES_DIR)/$(COURSE)/assets-original
-	@nix-shell -p imagemagick --run 'for img in $(COURSE_DIR)/$(COURSE)/slides/assets/*.png $(COURSE_DIR)/$(COURSE)/slides/assets/*.jpg 2>/dev/null; do \
+	@nix-shell -p imagemagick --run 'for img in $(SLIDES_DIR)/$(COURSE)/assets/*.png $(SLIDES_DIR)/$(COURSE)/assets/*.jpg 2>/dev/null; do \
-		[ -f "$$img" ] && cp "$$img" $(COURSE_DIR)/$(COURSE)/slides/assets-original/ && \
+		[ -f "$$img" ] && cp "$$img" $(SLIDES_DIR)/$(COURSE)/assets-original/ && \
 		magick "$$img" -resize "1920x>" -quality 85 "$$img" && echo "  Optimized: $$(basename $$img)"; \
 	done || true'
 	@echo "Done! Originals in assets-original/"
@@ -187,7 +198,7 @@ HDM_DEPLOY_PATH = /home/tengo/html/hdm
 
 build-index: build/.exists
 	@echo "Building root index..."
-	@echo '<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HdM Vorlesungen</title><style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;max-width:720px;margin:0 auto;padding:3rem 1.5rem;background:#fafafa;color:#1d1d1f;line-height:1.5}h1{font-size:2rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:.5rem}.subtitle{color:#86868b;font-size:1rem}.courses{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}a.course{display:block;background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all .2s ease;cursor:pointer}a.course:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}.course-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.course-b .course-label{color:#1e5f8a}.course-c .course-label{color:#d63384}.course-title{font-size:1.15rem;font-weight:500;color:#1d1d1f;margin:.25rem 0}.course-info{font-size:.85rem;color:#86868b}.section-title{font-size:1rem;font-weight:600;color:#86868b;margin-top:2.5rem;margin-bottom:.75rem}.references{display:flex;flex-direction:column;gap:.75rem}footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e5e5e7;color:#86868b;font-size:.85rem}footer a{color:#1d1d1f;text-decoration:none}footer a:hover{text-decoration:underline}.qr-section{margin-top:2.5rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);text-align:center}.qr-code{width:100%;height:auto}.qr-url{margin-top:.75rem;font-size:.85rem;color:#86868b}</style></head><body><h1>HdM Vorlesungen</h1><p class="subtitle">Wintersemester 2025/26 · Michael Czechowski</p><div class="courses"><a class="course course-b" href="223015b/"><span class="course-label">223015b</span><div class="course-title">Dateiformate, Schnittstellen, Speichermedien & Distributionswege</div><span class="course-info">6 Termine · Modul "Technik 1"</span></a><a class="course course-c" href="223015c/"><span class="course-label">223015c</span><div class="course-title">Grundlagen IT- und Internettechnik</div><span class="course-info">3 Termine · Modul "Technik 1"</span></a></div><h2 class="section-title">Referenzen</h2><div class="references"><a class="course" href="https://codecrispi.es/"><span class="course-label">Plattform</span><div class="course-title">Code Crispies</div><span class="course-info">Selbstlernplattform</span></a></div><div class="qr-section"><img src="qr-root.svg" alt="QR Code" class="qr-code"><p class="qr-url">https://librete.ch/hdm/</p></div><footer><a href="mailto:mail@librete.ch">Kontakt</a></footer></body></html>' > build/index.html
+	@echo '<!DOCTYPE html><html lang="de"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HdM Vorlesungen</title><style>*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;max-width:720px;margin:0 auto;padding:3rem 1.5rem;background:#fafafa;color:#1d1d1f;line-height:1.5}h1{font-size:2rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:.5rem}.subtitle{color:#86868b;font-size:1rem}.courses{margin-top:2rem;display:flex;flex-direction:column;gap:.75rem}a.course{display:block;background:#fff;border-radius:12px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 1px 3px rgba(0,0,0,0.08);transition:all .2s ease;cursor:pointer}a.course:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}.course-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.course-b .course-label{color:#1e5f8a}.course-c .course-label{color:#d63384}.course-title{font-size:1.15rem;font-weight:500;color:#1d1d1f;margin:.25rem 0}.course-info{font-size:.85rem;color:#86868b}.section-title{font-size:1rem;font-weight:600;color:#86868b;margin-top:2.5rem;margin-bottom:.75rem}.references{display:flex;flex-direction:column;gap:.75rem}footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e5e5e7;color:#86868b;font-size:.85rem}footer a{color:#1d1d1f;text-decoration:none}footer a:hover{text-decoration:underline}.qr-section{margin-top:2.5rem;padding:1.5rem;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.08);text-align:center}.qr-code{width:100%;height:auto}.qr-url{margin-top:.75rem;font-size:.85rem;color:#86868b}</style></head><body><h1>HdM Vorlesungen</h1><p class="subtitle">Wintersemester 2025/26 · Michael Czechowski</p><div class="courses"><a class="course course-b" href="223015b/"><span class="course-label">223015b</span><div class="course-title">Dateiformate, Schnittstellen, Speichermedien & Distributionswege</div><span class="course-info">6 Kapitel · Modul "Technik 1"</span></a><a class="course course-c" href="223015c/"><span class="course-label">223015c</span><div class="course-title">Grundlagen IT- und Internettechnik</div><span class="course-info">3 Kapitel · Modul "Technik 1"</span></a></div><h2 class="section-title">Referenzen</h2><div class="references"><a class="course" href="https://codecrispi.es/"><span class="course-label">Plattform</span><div class="course-title">Code Crispies</div><span class="course-info">Selbstlernplattform</span></a></div><div class="qr-section"><img src="qr-root.svg" alt="QR Code" class="qr-code"><p class="qr-url">https://librete.ch/hdm/</p></div><footer><a href="mailto:mail@librete.ch">Kontakt</a></footer></body></html>' > build/index.html
 
 # Deploy
 define deploy_course

README.md

@@ -1,182 +1,95 @@
 # HdM Slides
 
-**Modul "Technik 1"** - 1. Semester - Digital- und Medienwirtschaft
+Presentation slides for HdM Stuttgart courses, built with [Marp](https://marp.app/).
-Hochschule der Medien Stuttgart - Wintersemester 2025/26
 
----
+## Courses
 
-## Kurse
+| Code | Title | Kapitel |
+|------|-------|---------|
+| 223015b | Dateiformate, Schnittstellen, Speichermedien | 6 |
+| 223015c | Internettechnologien | 3 |
 
-### 223015b - Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+## Project Structure
 
-| # | Datum | Thema |
-|---|-------|-------|
-| 0 | 19.12.2025 | Intro |
-| 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 |
-
-### 223015c - Internettechnologien
-
-| # | Datum | Thema |
-|---|-------|-------|
-| 1 | 20.12.2025 | Geschichte, Grundlagen & HTML |
-| 2 | 10.01.2026 | Netzwerke, Protokolle & CSS |
-| 3 | 24.01.2026 | Interaktivitat & JavaScript |
-
-**Dozent:** Michael Czechowski - mail@librete.ch
-
----
-
-## Quick Start
-
-### Mit Nix (empfohlen)
-
-```bash
-# Development shell mit allen Tools
-nix develop
-
-# Oder direkt QR-Code generieren
-nix run .#qr -- "https://example.com"
-nix run .#qr-slides -- 223015b
 ```
-
+slides/
-### Ohne Nix
+├── 223015b/          # Dateiformate course
-
+│   ├── 00-intro.md
-```bash
+│   ├── 01-grundlagen-text-audio.md
-npm install
+│   └── ...
-make dev-b   # 223015b auf Port 1312
+└── 223015c/          # Internettechnik course
-make dev-c   # 223015c auf Port 1313
+    ├── 01-geschichte-grundlagen-html.md
+    └── ...
+scripts/              # Build scripts
+build/                # Generated output (gitignored)
 ```
 
----
-
 ## Development
 
-### Dev Server starten
-
 ```bash
-make dev-b   # 223015b (Dateiformate) - http://localhost:1312
+# Start dev servers (hot reload)
-make dev-c   # 223015c (Internettechnik) - http://localhost:1313
+make dev              # All courses + index
+make dev-b            # 223015b only (port 1311)
+make dev-c            # 223015c only (port 1312)
 ```
 
-### Build
+## Build
 
 ```bash
-make build      # Alle Kurse (HTML + PDF)
+make build            # Build all (HTML + PDF)
-make build-b    # Nur 223015b
+make build-b          # Build 223015b only
-make build-c    # Nur 223015c
+make build-c          # Build 223015c only
-make html       # Nur HTML
+make html             # HTML only
-make pdf        # Nur PDF
+make pdf              # PDF only
 ```
 
-### Deploy
+## Klausur Slides
+
+Extract exam-relevant slides (marked with `<!-- _class: klausur -->`) into a single file:
 
 ```bash
-make deploy     # Alle Kurse
+make klausur          # Extract all courses
-make deploy-b   # Nur 223015b
+make klausur-b        # 223015b only
-make deploy-c   # Nur 223015c
+make klausur-c        # 223015c only
 ```
 
----
+Output: `slides/<course>/klausur.md`
+
+The generated file includes:
+- A title slide per kapitel for orientation
+- All slides marked with `<!-- _class: klausur -->`
 
 ## Tools
 
-### QR-Code Generator
+```bash
+make qr URL=https://example.com           # Generate QR code
+make qr-slides COURSE=223015b             # QR for course URL
+make optimize-images COURSE=223015b       # Resize images
+```
+
+## Deploy
 
 ```bash
-# Mit Nix
+make deploy           # Deploy all courses
-nix run .#qr -- "https://librete.ch/hdm/223015b/"
+make deploy-b         # Deploy 223015b only
-nix run .#qr -- "https://example.com" output.png
+make deploy-c         # Deploy 223015c only
-
-# Mit Make
-make qr URL=https://example.com
-make qr URL=https://example.com OUTPUT=my-qr.png
-
-# Fur Kurse
-make qr-slides COURSE=223015b
 ```
 
-### Bilder optimieren
+## Marking Slides as Klausur-Relevant
 
-```bash
+Add this comment block after the slide separator:
-# Mit Nix
-nix run .#optimize-img -- courses/223015b/slides/assets/
-
-# Mit Make
-make optimize-images COURSE=223015b
-```
-
----
-
-## Projektstruktur
-
-```
-hdm/
-├── courses/
-│   ├── 223015b/
-│   │   └── slides/
-│   │       ├── 2025-12-19-termin-1-grundlagen-text-audio.md
-│   │       ├── assets/
-│   │       └── materials/
-│   └── 223015c/
-│       └── slides/
-│           ├── 2025-12-20-termin-1-geschichte-grundlagen-html.md
-│           └── assets/
-├── scripts/
-│   └── generate-index.sh
-├── themes/
-│   └── custom-theme.css
-├── build/           # Generated output
-├── flake.nix        # Nix flake with tools
-├── Makefile
-└── package.json
-```
-
----
-
-## Slides erstellen
-
-### Frontmatter
-
-```yaml
----
-marp: true
-theme: uncover
-paginate: true
-backgroundColor: #fff
----
-```
-
-### Slide-Trennung
 
 ```markdown
-# Slide 1
-
-Content
-
 ---
 
-# Slide 2
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->
 
-More content
+# Your Slide Title
+
+Content here...
 ```
 
-### Bilder
+The `klausur` class adds a visual indicator (diagonal stripes) during presentation.
-
-```markdown
-![Alt text](./assets/image.jpg)
-```
-
-### Themes
-
-Built-in: `default`, `gaia`, `uncover`
-Custom: in `themes/` Verzeichnis
-
----
-
-## License
-
-[CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)

scripts/dev-server.sh

@@ -8,7 +8,7 @@ set -e
 INDEX_PORT=1310
 COURSE_B_PORT=1311
 COURSE_C_PORT=1312
-COURSE_DIR="courses"
+SLIDES_DIR="slides"
 DEV_INDEX_DIR=".dev-index"
 
 # Colors
@@ -94,12 +94,12 @@ echo ""
 python3 -m http.server $INDEX_PORT --directory "$DEV_INDEX_DIR" &
 PID_INDEX=$!
 
-PORT=$COURSE_B_PORT npx @marp-team/marp-cli --server "$COURSE_DIR/223015b/slides/" &
+PORT=$COURSE_B_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/223015b/" &
 PID_B=$!
 
 sleep 3  # Stagger starts to avoid WebSocket port collision
 
-PORT=$COURSE_C_PORT npx @marp-team/marp-cli --server "$COURSE_DIR/223015c/slides/" &
+PORT=$COURSE_C_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/223015c/" &
 PID_C=$!
 
 # Wait for any process to exit

scripts/extract-klausur.sh

@@ -0,0 +1,112 @@
+#!/usr/bin/env bash
+# Extract klausur-relevant slides from all kapitel
+# Usage: ./extract-klausur.sh <course_id>
+# Output: slides/<course>/klausur.md
+
+set -e
+
+COURSE="${1:-223015b}"
+SLIDES_DIR="slides/$COURSE"
+OUTPUT_FILE="$SLIDES_DIR/klausur.md"
+
+# Find the first kapitel file (01-*.md) to copy styles from
+FIRST_KAPITEL=$(ls "$SLIDES_DIR"/01-*.md 2>/dev/null | head -1)
+
+if [[ -z "$FIRST_KAPITEL" ]]; then
+  echo "Error: No 01-*.md file found in $SLIDES_DIR"
+  exit 1
+fi
+
+echo "Extracting klausur slides for $COURSE..."
+
+# Extract frontmatter and styles (everything up to first <!-- _class: line after style block)
+# This gets the YAML frontmatter + <style> block
+awk '
+  BEGIN { in_frontmatter = 0; in_style = 0; done = 0 }
+  /^---$/ && !in_frontmatter { in_frontmatter = 1; print; next }
+  /^---$/ && in_frontmatter && !in_style { in_frontmatter = 0; print; next }
+  in_frontmatter { print; next }
+  /<style>/ { in_style = 1; print; next }
+  /<\/style>/ { in_style = 0; print; print ""; done = 1; next }
+  in_style { print; next }
+  done { exit }
+' "$FIRST_KAPITEL" > "$OUTPUT_FILE"
+
+# Add warning comment
+cat >> "$OUTPUT_FILE" << 'EOF'
+<!--
+  ╔═══════════════════════════════════════════════════════════════════╗
+  ║  AUTO-GENERATED FILE - DO NOT EDIT MANUALLY                       ║
+  ║                                                                   ║
+  ║  This file is generated by: make klausur                          ║
+  ║  Source: scripts/extract-klausur.sh                               ║
+  ║                                                                   ║
+  ║  To update, edit the source slides and re-run make klausur        ║
+  ╚═══════════════════════════════════════════════════════════════════╝
+-->
+
+EOF
+
+# Extract and copy the cover slide (first slide after frontmatter/styles, up to first ---)
+awk '
+  BEGIN { past_style = 0; in_cover = 0; printed = 0 }
+  /<\/style>/ { past_style = 1; next }
+  past_style && !in_cover && /^[^[:space:]]/ { in_cover = 1 }
+  in_cover && /^---$/ { print "---\n"; exit }
+  in_cover { print }
+' "$FIRST_KAPITEL" >> "$OUTPUT_FILE"
+
+# Process each kapitel file in order - extract klausur slides only
+for md_file in $(ls "$SLIDES_DIR"/[0-9][0-9]-*.md 2>/dev/null | grep -v klausur | sort); do
+  filename=$(basename "$md_file")
+  kapitel_num=$(echo "$filename" | grep -oE '^[0-9]+' | sed 's/^0*//')
+
+  # Skip intro (kapitel 0)
+  if [[ "$kapitel_num" == "0" ]] || [[ -z "$kapitel_num" ]]; then
+    continue
+  fi
+
+  # Check if file has any klausur slides
+  if ! grep -q '<!-- _class: klausur -->' "$md_file"; then
+    continue
+  fi
+
+  echo "  Processing Kapitel $kapitel_num..."
+
+  # Extract klausur slides, hide header/footer, convert * to - bullets
+  awk '
+    /<!-- _class: klausur -->/ {
+      in_klausur = 1
+      # Add header/footer hiding
+      print "<!-- _header: \"\" -->"
+      print "<!-- _footer: \"\" -->"
+      print ""
+      next
+    }
+    in_klausur && /^---$/ {
+      print "\n---\n"
+      in_klausur = 0
+      next
+    }
+    in_klausur {
+      # Skip marp directives (we add our own)
+      if (/<!-- _header:/ || /<!-- _footer:/ || /<!-- _backgroundColor:/) next
+      # Convert * bullets to - bullets (avoid fragments)
+      gsub(/^\* /, "- ")
+      gsub(/^  \* /, "  - ")
+      gsub(/^    \* /, "    - ")
+      print
+    }
+  ' "$md_file" >> "$OUTPUT_FILE"
+
+done
+
+# Remove trailing --- and empty lines
+perl -i -0777 -pe 's/\n*---\n*$/\n/' "$OUTPUT_FILE"
+
+# Count slides
+slide_count=$(grep -c '^---$' "$OUTPUT_FILE" 2>/dev/null || echo "0")
+
+echo ""
+echo "Generated: $OUTPUT_FILE"
+echo "Total slides: $slide_count"

scripts/generate-index.sh

@@ -77,13 +77,13 @@ cat > "$BUILD_DIR/index.html" << HEADER
       font-size: 0.875rem;
       margin-top: 0.25rem;
     }
-    .termine {
+    .kapitel {
       margin-top: 1.5rem;
       display: flex;
       flex-direction: column;
       gap: 0.75rem;
     }
-    .termin-card {
+    .kapitel-card {
       position: relative;
       background: #fff;
       border-radius: 12px;
@@ -94,31 +94,31 @@ cat > "$BUILD_DIR/index.html" << HEADER
       align-items: center;
       gap: 1rem;
     }
-    .termin-card:hover {
+    .kapitel-card:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(0,0,0,0.12);
     }
-    .termin-link {
+    .kapitel-link {
       display: block;
       padding: 1.25rem 1.5rem;
       text-decoration: none;
       color: inherit;
       grid-column: 1;
     }
-    .termin-label {
+    .kapitel-label {
       font-size: 0.7rem;
       font-weight: 600;
       color: $ACCENT_COLOR;
       text-transform: uppercase;
       letter-spacing: 0.05em;
     }
-    .termin-title {
+    .kapitel-title {
       font-size: 1.05rem;
       font-weight: 500;
       color: #1d1d1f;
       margin: 0.15rem 0;
     }
-    .termin-date {
+    .kapitel-date {
       font-size: 0.8rem;
       color: #86868b;
     }
@@ -151,7 +151,7 @@ cat > "$BUILD_DIR/index.html" << HEADER
     }
     .btn-pdf:hover { background: #e8e8ed; }
     /* Make entire card clickable via overlay */
-    .termin-link::after {
+    .kapitel-link::after {
       content: '';
       position: absolute;
       inset: 0;
@@ -184,10 +184,10 @@ cat > "$BUILD_DIR/index.html" << HEADER
       color: #86868b;
     }
     @media (max-width: 600px) {
-      .termin-card {
+      .kapitel-card {
         grid-template-columns: 1fr;
       }
-      .termin-link {
+      .kapitel-link {
         padding-bottom: 0.75rem;
       }
       .btn-slides, .btn-pdf {
@@ -205,14 +205,13 @@ cat > "$BUILD_DIR/index.html" << HEADER
   <div class="termine">
 HEADER
 
-# Generate links for each termin (sorted)
+# Generate links for each kapitel (sorted)
-for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do
+for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do
   filename=$(basename "$html")
 
-  # Extract components from filename
+  # Extract components from filename (format: NN-topic.html)
-  date=$(echo "$filename" | grep -oE '^[0-9]{4}-[0-9x]{2}-[0-9x]{2}')
+  kapitel_num=$(echo "$filename" | grep -oE '^[0-9]+' | sed 's/^0*//')
-  termin_num=$(echo "$filename" | grep -oE 'termin-[0-9]+' | grep -oE '[0-9]+')
+  topic_raw=$(echo "$filename" | sed -E 's/^[0-9]+-//' | sed 's/\.html$//')
-  topic_raw=$(echo "$filename" | sed -E 's/^[0-9]{4}-[0-9x]{2}-[0-9x]{2}-termin-[0-9]+-//' | sed 's/\.html$//')
 
   # Look up nice topic name or fallback
   topic="${TOPIC_MAP[$topic_raw]}"
@@ -220,18 +219,11 @@ for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do
     topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\u&/')
   fi
 
-  # Format date
+  # Handle kapitel number
-  if [[ "$date" =~ ^[0-9]{4}-[0-9]{2}-[0-9]{2}$ ]] && [[ ! "$date" =~ xx ]]; then
+  if [[ "$kapitel_num" == "0" ]] || [[ -z "$kapitel_num" ]]; then
-    formatted_date=$(date -d "$date" "+%d. %B %Y" 2>/dev/null || echo "$date")
+    kapitel_label="Einführung"
   else
-    formatted_date="Termin folgt"
+    kapitel_label="Kapitel $kapitel_num"
-  fi
-
-  # Handle termin number
-  if [[ "$termin_num" == "0" ]]; then
-    termin_label="Einführung"
-  else
-    termin_label="Termin $termin_num"
   fi
 
   pdf_filename="${filename%.html}.pdf"
@@ -243,11 +235,10 @@ for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do
   fi
 
   cat >> "$BUILD_DIR/index.html" << LINK
-    <div class="termin-card">
+    <div class="kapitel-card">
-      <a href="$filename" class="termin-link">
+      <a href="$filename" class="kapitel-link">
-        <div class="termin-label">$termin_label</div>
+        <div class="kapitel-label">$kapitel_label</div>
-        <div class="termin-title">$topic</div>
+        <div class="kapitel-title">$topic</div>
-        <div class="termin-date">$formatted_date</div>
       </a>
       <a href="$filename" class="btn btn-slides">Folien</a>
       $pdf_link

slides/223015b/03-speichermedien-schnittstellen.md

@@ -97,7 +97,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Termin 3 – 23.01.2026
+# Kapitel 3 – 23.01.2026
 ## Speichermedien & Schnittstellen
 
 ---

slides/223015b/04-distribution-apis-zukunft.md

@@ -98,7 +98,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Termin 4 – 30.01.2026
+# Kapitel 4 – 30.01.2026
 ## Distribution, APIs & Zukunft
 
 ---

slides/223015b/05-vertiefung-offene-fragen.md

@@ -98,7 +98,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Termin 5 – TBA
+# Kapitel 5 – TBA
 ## Vertiefung & Offene Fragen
 
 ---

slides/223015b/klausur.md

@@ -0,0 +1,563 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
+footer: "Michael Czechowski – HdM Stuttgart"
+title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+---
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #1e5f8a;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.7rem;
+}
+h1 {
+  color: #1e5f8a;
+}
+section.invert h1 {
+  color: #fff;
+}
+h2 {
+  color: #1f2937;
+}
+pre {
+  background: #0f0f23;
+  color: #5fb3e4;
+  border-radius: 8px;
+  border-left: 3px solid #1e5f8a;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #5fb3e4;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
+}
+section.klausur {
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 40px,
+    #fff 40px,
+    #fff 80px
+  ) !important;
+}
+@media print {
+  section.klausur {
+    background: #e3f2fd !important;
+  }
+}
+section.aufgabe {
+  background: #e3f2fd !important;
+}
+section.aufgabe footer {
+  display: none;
+}
+</style>
+
+<!--
+  ╔═══════════════════════════════════════════════════════════════════╗
+  ║  AUTO-GENERATED FILE - DO NOT EDIT MANUALLY                       ║
+  ║                                                                   ║
+  ║  This file is generated by: make klausur                          ║
+  ║  Source: scripts/extract-klausur.sh                               ║
+  ║                                                                   ║
+  ║  To update, edit the source slides and re-run make klausur        ║
+  ╚═══════════════════════════════════════════════════════════════════╝
+-->
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg cover opacity:0.2](./assets/radek-grzybowski-eBRTYyjwpRY-unsplash.jpg)
+
+# Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+
+**223015b** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Verlustfrei vs. Verlustbehaftet
+
+| | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) |
+|---|---|---|
+| **Prinzip** | **Redundanz** entfernen | **Irrelevanz** entfernen |
+| **Reversibel** | Ja (Original wiederherstellbar) | Nein (Information unwiederbringlich weg) |
+| **Reduktion** | 30-50% | 80-99% |
+| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |
+
+**Faustregel:**
+- Medien für Endnutzer → Lossy oft akzeptabel
+- Quellmaterial, Code, Archive → Lossless nötig
+
+<!--
+REDUNDANZ: Wiederholende Muster kompakter darstellen (z.B. "AAAA" → "4×A")
+IRRELEVANZ: Für Menschen nicht wahrnehmbar (Psychoakustik, Psychovisuell)
+
+KLAUSURRELEVANT:
+- Verlustfrei = Original 1:1 wiederherstellbar
+- Verlustbehaftet = Information geht verloren, aber kaum wahrnehmbar
+- Redundanz vs. Irrelevanz ist der Kernunterschied!
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Dateneinheiten
+
+| Einheit | Bytes | Potenz | Beispiel |
+|---------|------:|:------:|----------|
+| **Byte** | 1 | 10⁰ | Farbwerte eines Pixels |
+| **Kilobyte (KB)** | 1.000 | 10³ | Kleiner Programmcode |
+| **Megabyte (MB)** | 1 Million | 10⁶ | Textdokument |
+| **Gigabyte (GB)** | 1 Milliarde | 10⁹ | Kinofilm in FullHD |
+| **Terabyte (TB)** | 1 Billion | 10¹² | ~12h Video in 4K |
+| **Petabyte (PB)** | 1 Billiarde | 10¹⁵ | Netflix-Gesamtarchiv |
+| **Exabyte (EB)** | 1 Trillion | 10¹⁸ | Alle E-Mails weltweit/Tag |
+| **Zettabyte (ZB)** | 1 Trilliarde | 10²¹ | Internet-Traffic 2016 |
+
+<!--
+SI-Präfixe (Dezimal): 1 KB = 1.000 Bytes
+Binär (IEC): 1 KiB = 1.024 Bytes (Kibibyte)
+Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
+1 TB Festplatte = ~931 GiB nutzbar
+
+Eselsbrücke: "Kilo Mega Giga Tera Peta Exa Zetta Yotta"
+→ "Komm Mit Großem Tee, Peter Exte Zettelt Yachten"
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Der digitale Wendepunkt
+
+| Jahr | Analog | Digital | Digital-Anteil |
+|------|--------|---------|----------------|
+| **1986** | 2,6 EB | 0,02 EB | **1%** |
+| **2002** | — | — | **50%** (Wendepunkt) |
+| **2007** | 18 EB | 277 EB | **94%** |
+
+**Perspektive:**
+- 1986: "Petabyte" war ein theoretisches Konzept
+- 2025: ~181 Zettabyte jährlich produziert
+
+**Magnetband lebt:** LTO-Tapes bleiben günstigstes Archivmedium
+(AWS Glacier, Film-Archive, Rechenzentren)
+
+<!--
+PRÜFUNGSRELEVANT:
+ - Wendepunkt 2002
+ - Speichereinheiten (KB→MB→GB→TB→PB→EB→ZB)
+ - Magnetband als Archivmedium
+
+QUELLE: Hilbert & López (2011): "The World's Technological Capacity to Store, Communicate, and Compute Information", Science
+
+METHODIK: 60 analoge + digitale Technologien untersucht (1986-2007)
+
+WENDEPUNKT 2002: Erstmals mehr digital als analog gespeichert
+
+ANALOG damals: Bücher, Zeitungen, Vinyl, VHS, Filmrollen, Fotos
+
+DIGITAL damals: Festplatten, CDs, DVDs, frühe Flash-Speicher
+
+HEUTE: LTO-9 (2021) speichert 18 TB pro Band, ~$5/TB für Cold Storage
+
+VERGLEICH: SSD ~$50/TB, HDD ~$15/TB, LTO ~$5/TB
+
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Analoge Medien
+### Distribution: physisch (Kauf, Verleih, Kopie)
+
+- **Text**
+  - Bücher, Zeitungen, Zeitschriften, Lochkarten
+- **Bild**
+  - Fotografie (Negativ, Dia, Polaroid), Mikrofilm
+- **Audio:**
+  - Schallplatte (Vinyl, Schellack), Tonband, Musikkassette
+- **Video:**
+  - Film (35mm, Super 8), VHS, Betamax
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Digitale Medien
+### Distribution: Datenträger (CD, USB), Download, Streaming, P2P
+
+- **Text**
+  - E-Book (PDF, EPUB), Dokumente (TXT, DOCX)
+- **Bild**
+  - Digitalfoto (JPEG, PNG, RAW, WebP, GIF)
+- **Audio**
+  - Audiodatei (MP3, FLAC, WAV, AAC, OGG)
+- **Video**
+  - Videodatei (MP4, MKV, AVI, WebM)
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Digitale Speichermedien
+
+- **Optische Speicher**
+  - CD, DVD, Blu-ray
+- **Magnetische Speicher**
+  - Festplatte (HDD), Magnetband (LTO)
+- **Flash-Speicher**
+  - SSD, USB-Stick, SD-Karte
+- **Cloud-Speicher**
+  - Dropbox, Google Drive, iCloud, AWS S3
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Rastergrafiken
+
+**Aufbau:** Liste von Pixeln mit Farbwerten (2D-Array)
+
+**Speicherbedarf (unkomprimiert):**
+Breite × Höhe × Farbtiefe (in Bytes)
+
+**Beispiele:** JPEG, PNG, WebP
+
+| Bits (Farbtiefe) | Farben | Anwendung |
+|-----:|-------:|-----------|
+| 1 | 2 | Schwarz/Weiß (Fax) |
+| 8 | 256 | Graustufen, GIF |
+| 24 | 16,7 Mio. | True Color (Standard) |
+| 32 | 16,7 Mio. + Alpha | Transparenz |
+
+<!--
+BERECHNUNG: Breite × Höhe × (Farbtiefe / 8)
+BEISPIEL: 1920×1080 × 24 Bit = 1920×1080×3 = 6.220.800 Bytes ≈ 6,2 MB
+
+Farbtiefe erklärt:
+- 1 Bit: 2^1 = 2 Farben
+- 8 Bit: 2^8 = 256 Farben
+- 24 Bit: 2^24 = 16.777.216 Farben (je 8 Bit für R, G, B)
+- 32 Bit: 24 Bit + 8 Bit Alpha-Kanal
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Vektorgrafiken
+
+**Speicherung als geometrische Primitive:**
+- Pfade (Bézierkurven mit Kontrollpunkten)
+- Grundformen (Rechteck, Ellipse, Polygon)
+- Text (Glyphen als Outlines)
+
+**SVG-Beispiel:**
+```xml
+<circle cx="50" cy="50" r="40" fill="#ff0000"/>
+```
+
+<small>SVG beschreibt nicht jeden einzelnen Pixel im Raster, sondern deklariert wie Farben und Formen gesetzt werden.</small>
+
+<!--
+Vektorgrafiken beschreiben WAS gezeichnet werden soll.
+Rastergrafiken beschreiben WIE jeder Pixel aussieht.
+
+Rendering-Pipeline:
+Vektordaten → Rasterisierung → Framebuffer → Display
+
+Beim Skalieren werden einfach die Koordinaten multipliziert.
+Keine Information geht verloren.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Die Schwächen des Auges
+
+**Menschen sehen:**
+- Helligkeit besser als Farbe
+- Große Flächen besser als feine Details
+- Niedrige Frequenzen besser als hohe
+
+**JPEG nutzt das aus:**
+- Farbauflösung reduzieren (aber Helligkeit behalten)
+- Glatte Flächen effizient speichern
+- Hohe Frequenzen (Details) verwerfen
+
+<!--
+Das ist die visuelle Entsprechung zur Psychoakustik.
+
+Das Auge hat mehr Rezeptoren für Helligkeit (Stäbchen)
+als für Farbe (Zapfen).
+
+Hohe Frequenzen = schnelle Wechsel = feine Details
+Niedrige Frequenzen = langsame Wechsel = große Flächen
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+![bg right:20%](./assets/Barn-yuv.png)
+
+# JPEG: Schritt 1 – Farbraumkonversion
+
+**RGB → Y'CbCr** (seltener Y'UV)
+
+- **Y** = Helligkeit (Luminanz) – Was das Auge am besten sieht
+- **Cb** = Blau-Gelb-Anteil (Chrominanz)
+- **Cr** = Rot-Grün-Anteil (Chrominanz)
+
+**Warum diese Trennung?**
+Y (Helligkeit) behält volle Auflösung.
+Cb/Cr (Farbe) kann reduziert werden – Auge merkt es kaum.
+
+<!--
+YCbCr ist wie RGB ein Tripel aus 3 Werten pro Pixel.
+Der Unterschied: Statt Rot-Grün-Blau speichern wir Helligkeit + 2 Farbdifferenzen.
+
+Die Umrechnung ist reversibel (mathematische Transformation).
+Der Clou: Jetzt können wir Helligkeit und Farbe getrennt behandeln.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# JPEG: Schritt 6 – Huffman-Coding
+
+**Verlustfreie Kompression der Restwerte**
+
+**Idee:** Statt fester 8 Bit pro Wert → variable Bitlänge
+Häufige Werte bekommen kurze Bit-Sequenzen.
+
+| Zeichen | Häufigkeit | Code (Bit-Sequenz) |
+|---------|------------|------|
+| e | 40% | `0` (1 Bit) |
+| a | 25% | `10` (2 Bit) |
+| i | 20% | `110` (3 Bit) |
+| o | 10% | `1110` (4 Bit) |
+| u | 5% | `1111` (4 Bit) |
+
+<!--
+Huffman-Coding ist verlustfrei.
+Der "Code" ist eine Bit-Sequenz, die das Zeichen eindeutig identifiziert.
+Weil "e" am häufigsten vorkommt, bekommt es den kürzesten Code.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Container und Codec
+
+**Container = Das Dateiformat (Beispiel: MP4)**
+Die "Box", die verschiedene Streams zusammenpackt:
+- Video-Stream
+- Audio-Stream(s)
+- Untertitel
+- Metadaten
+
+**Codec = Der Kompressionsalgorithmus (Beispiel: AV1)**
+Entscheidet, WIE komprimiert wird.
+
+
+<!--
+Container ≠ Codec
+Das ist ein häufiges Missverständnis.
+
+MP4 ist ein Container, nicht ein Codec.
+Ein MP4 kann H.264, H.265 oder AV1 enthalten.
+
+Übrigens: JPEG ist ein Codec (für Bilder), kein Container.
+Bei Bildern fallen Container und Codec oft zusammen.
+
+Tools wie MediaInfo zeigen beide Informationen.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# H.264 / AVC
+
+**Advanced Video Coding (2003)**
+
+**Warum dominant?**
+- Exzellente Kompression (~100:1 möglich)
+- Hardware-Support in jedem Gerät seit ~2010
+- YouTube, Netflix, Blu-ray – alles H.264
+
+**Features:**
+- Variable Block-Größen (16×16 bis 4×4)
+- Deblocking-Filter (reduziert Block-Artefakte)
+
+<!--
+H.264 revolutionierte Video-Streaming.
+Ohne H.264 kein Netflix, kein YouTube in HD.
+
+Hardware-Decoder bedeutet: Kein CPU-Aufwand, kein Akku-Drain.
+Selbst billige Smartphones können H.264 abspielen.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# AV1: Die offene Zukunft
+
+**AV1 (2018)**
+
+**Alliance for Open Media:**
+Google, Netflix, Amazon, Microsoft, Apple, Mozilla...
+
+**Eigenschaften:**
+- 30% besser als H.265
+- Royalty-free, Open Source
+- 8K, HDR, hohe Frame-Rates
+
+**Stand 2025:**
+YouTube und Netflix nutzen AV1 für 4K/8K
+Hardware-Encoder in aktuellen GPUs
+
+<!--
+AOM = Alliance for Open Media, gegründet 2015.
+Historisch: Konkurrierende Tech-Giganten vereint.
+
+Das Ziel: Nie wieder Patent-Chaos wie bei H.265.
+
+Problem: Encoding ist sehr langsam (10-100× vs. H.264).
+Hardware-Encoder lösen das zunehmend.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Wann HDD, wann SSD?
+
+| Anwendung | Empfehlung |
+|-----------|------------|
+| Betriebssystem | SSD (NVMe) |
+| Anwendungen, Spiele | SSD |
+| Video-Editing (Projekte) | SSD |
+| Foto-Archiv | HDD oder SSD |
+| Backup | HDD |
+| NAS / Server | HDD (oder Mix) |
+| Cold Storage | HDD oder Band |
+
+<!--
+Die Faustregel:
+- Oft genutzt, schnell gebraucht → SSD
+- Selten genutzt, viel Kapazität → HDD
+
+Viele setzen auf beides:
+Kleine SSD für System + große HDD für Archiv.
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Die 3-2-1-Regel
+
+**3** Kopien eurer Daten
+(Original + 2 Backups)
+
+**2** verschiedene Medientypen
+(z.B. SSD + HDD, oder lokal + Cloud)
+
+**1** Kopie an anderem Ort
+(Offsite: Cloud, anderes Gebäude)
+
+<!--
+Herkunft: Peter Krogh, "The DAM Book" (2005)
+
+Warum 3 Kopien?
+- Original kann kaputt gehen
+- Backup 1 auch
+- Backup 2 = Sicherheitspuffer
+
+Warum 2 Medientypen?
+- Gleiche Medien haben gleiche Schwachstellen
+- Batch-Fehler bei HDDs derselben Charge
+
+Warum 1 Offsite?
+- Brand/Wasserschaden zerstört alles vor Ort
+- Ransomware verschlüsselt angeschlossene Laufwerke
+-->

slides/223015c/02-netzwerke-protokolle-css.md

@@ -1610,21 +1610,6 @@ Das sind die Werkzeuge, mit denen Profis Netzwerk-Probleme debuggen.
 
 <!-- _class: lead -->
 
-# Pause
-## Danach: CSS
-
-<!--
-SPEAKER NOTES:
-
-Kurze Pause. Nutzt die Zeit, um Fragen zu notieren.
-
-Nach der Pause: CSS. Das ist weniger abstrakt – ihr werdet Dinge sehen, die passieren.
--->
-
----
-
-<!-- _class: lead -->
-
 # Teil 2: CSS
 ## Webseiten gestalten
 
@@ -2099,20 +2084,21 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
 /* Mobile First: Basis-Styles */
 .container {
     padding: 1rem;
+    background: white;
 }
 
 /* Ab 768px (Tablet): Anpassungen */
 @media (min-width: 768px) {
     .container {
         padding: 2rem;
-        max-width: 720px;
+        background: red;
     }
 }
 
 /* Ab 1024px (Desktop): Weitere Anpassungen */
 @media (min-width: 1024px) {
     .container {
-        max-width: 960px;
+        background: green;
     }
 }
 ```

slides/223015c/03-interaktivitaet-javascript.md

@@ -5,7 +5,7 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik (223015c)"
 footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: "Termin 3: Interaktivität & JavaScript"
+title: "Kapitel 3: Interaktivität & JavaScript"
 ---
 
 <style>
@@ -98,7 +98,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Termin 3 – 24.01.2026
+# Kapitel 3 – 24.01.2026
 ## Interaktivität & JavaScript
 
 ---