add functionality to disable topics in course index and improve layout

- simplify development: single marp server on port 3000 instead of 3 processes
- rename klausur to klausurfolien for better naming
- update extract script to use 00-intro.md as template when no 01-*.md exists
- update makefile and package.json for new workflow
- add comprehensive AGENTS.md guidelines

AGENTS.md

@@ -0,0 +1,197 @@
+# AGENTS.md - Agent Guidelines for HdM Slides
+
+This file contains comprehensive guidelines for agentic coding agents working on the HdM Slides project.
+
+## Project Overview
+
+This project builds presentation decks for Marp, supporting multiple courses:
+- **223015b** - Dateiformate, Schnittstellen, Speichermedien (6 Kapitel)
+- **223015c** - Internettechnologien (3 Kapitel)
+
+## Development Workflow
+
+### Build Commands
+```bash
+# Development
+make dev              # Start single dev server on port 3000
+npm run dev           # Alternative command for development server
+
+# Build
+make build            # Build all courses (HTML + PDF)
+make build-b          # Build 223015b only
+make build-c          # Build 223015c only
+make html             # HTML only builds
+make pdf              # PDF only builds
+
+# Klausur Folien
+make klausur          # Extract klausurfolien for all courses
+make klausur-b        # Extract klausurfolien for 223015b
+make klausur-c        # Extract klausurfolien for 223015c
+
+# Deployment
+make deploy            # Deploy all courses (requires explicit permission)
+make deploy-b         # Deploy 223015b only
+make deploy-c         # Deploy 223015c only
+
+# Utilities
+make qr URL=...       # Generate QR code
+make optimize-images COURSE=223015b  # Resize images
+make clean            # Remove generated files
+```
+
+### Testing
+No specific test framework is used. To validate changes:
+1. Start dev server: `make dev`
+2. Open http://localhost:3000/223015b/ or /223015c/
+3. Verify slides render correctly
+4. Run `make build` to ensure no build errors
+5. Check generated files in `build/` directory
+
+## Code Style Guidelines
+
+### File Structure
+- Slides in `slides/<course>/` following naming pattern `NN-topic.md`
+- Assets in `slides/<course>/assets/`
+- Always reference images as `./assets/filename.png`
+- Scripts in `scripts/`
+- Themes in `themes/`
+- Generated output in `build/` (gitignored)
+
+### Naming Conventions
+- Slide files: `NN-topic.md` (e.g., `01-grundlagen.md`, `02-bilder.md`)
+- Images: `snake_case.jpg` or `kebab-case.jpg`
+- Klausur files: `klausurfolien.md` (auto-generated)
+- Function names in scripts: `snake_case`
+- Variable names in scripts: `snake_case`
+
+### Markdown Style
+- Use ATX-style headers (`# ## ###`)
+- YAML frontmatter for slide metadata at top of each file
+- Never include a final `---` (creates empty slide)
+- Use `<!-- _class: klausur -->` for exam-relevant slides
+- Use relative paths for assets: `./assets/image.png`
+
+### Script Style
+- Use `#!/usr/bin/env bash` shebang
+- Use `set -e` for error handling
+- Use `2>/dev/null || true` for optional operations
+- Define variables in UPPER_CASE at script top
+- Use colors for terminal output: `\033[0;32m` etc.
+
+### Git Workflow
+- Commit messages: ALWAYS lowercase
+- NEVER add co-authoring lines or generated footers
+- Follow semantic naming: "add-...", "fix-...", "update-..."
+- Commit changes to scripts, Makefile, documentation separately from slide content
+
+## Agent Restrictions
+
+### Security
+- NEVER run commands outside `/home/mwc/Coding/hdm` folder
+- NEVER run build/deploy commands without explicit user request
+- NEVER run deploy commands (make deploy, scp, etc.) without explicit permission
+
+### File Protection
+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
+
+### Klausur Handling
+- Klausur files (`klausurfolien.md`) are auto-generated
+- NEVER edit klausurfolien.md files directly
+- To update klausurfolien: edit source slides with `<!-- _class: klausur -->` markers
+- Run `make klausur` to regenerate
+
+## Development Patterns
+
+### Adding New Slides
+1. Create new file following `NN-topic.md` pattern
+2. Copy frontmatter from existing slides in the same course
+3. Update Makefile `_KAPITEL` variable if needed
+4. Test with `make dev`
+
+### Modifying Existing Slides
+1. Edit the appropriate markdown file in `slides/<course>/`
+2. Maintain consistent styling with course theme
+3. Preserve image paths as `./assets/...`
+4. Test changes with dev server
+
+### Working with Assets
+1. Place images in `slides/<course>/assets/`
+2. Use descriptive names: `diagram-network.jpg`, `example-code.png`
+3. Optimize with `make optimize-images COURSE=223015b`
+4. Reference as `./assets/filename.ext`
+
+### Course-Specific Configuration
+Each course has specific settings in Makefile:
+- Course name and title
+- Kapitel list (slide files)
+- Deploy path
+- Theme colors (in generate-index.sh)
+
+## Common Tasks
+
+### Debugging Build Issues
+1. Check Makefile syntax: `make -n build`
+2. Verify Marp CLI installation: `npx @marp-team/marp-cli --version`
+3. Check file permissions: `ls -la slides/`
+4. Validate markdown syntax with dev server
+
+### Updating Course Structure
+1. Update `_KAPITEL` variables in Makefile
+2. Ensure slide files follow naming convention
+3. Update course-specific themes if needed
+4. Test both dev and build processes
+
+### Working with Themes
+- Custom theme in `themes/custom-theme.css`
+- Course themes defined in individual slide frontmatter
+- Use consistent color schemes per course
+- Test theme changes across all slides
+
+## Deployment Process
+
+Deployment to production server requires explicit permission:
+1. Build process: `make build` (HTML + PDF)
+2. Index generation: automatically handled
+3. Deploy to remote server via SCP
+4. Root index deployment
+
+**IMPORTANT**: Never run deployment commands without explicit user permission.
+
+## Tools and Dependencies
+
+### Core Dependencies
+- Marp CLI for slide rendering
+- Bash scripts for automation
+- Make for build orchestration
+- Git for version control
+
+### Optional Tools
+- qrencode for QR generation (via nix)
+- ImageMagick for image optimization
+- Python 3 for simple HTTP server (legacy)
+
+## Testing Strategy
+
+Since there's no formal test suite:
+1. Manual testing with dev server
+2. Build process validation
+3. Slide rendering checks
+4. Asset path verification
+5. Cross-browser compatibility checks (important)
+
+## Troubleshooting
+
+### Common Issues
+- **Port conflicts**: Use `make dev-kill` to clean up processes
+- **Build failures**: Check file permissions and Marp CLI installation
+- **Asset loading**: Verify relative paths and file existence
+- **Deploy issues**: Check SSH keys and remote permissions
+
+### Getting Help
+1. Check this AGENTS.md file first
+2. Review Makefile targets and scripts
+3. Test changes incrementally
+4. Maintain backup of working configurations

Makefile

@@ -1,25 +1,19 @@
 # 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 klausur 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 klausurfragen build-klausurfragen deploy-klausurfragen
 
 # Course configuration
 COURSES = 223015b 223015c
 SLIDES_DIR = slides
 
-# Port configuration (index starts at BASE_PORT, courses increment from there)
-BASE_PORT = 1310
-INDEX_PORT = $(BASE_PORT)
-
 # Course-specific settings
 223015b_NAME = Dateiformate, Schnittstellen, Speichermedien
-223015b_PORT = 1311
+223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen klausurfolien
-223015b_KAPITEL = 00-intro 01-grundlagen-text-audio 02-bild-audio-video 03-speichermedien-schnittstellen 04-distribution-apis-zukunft 05-vertiefung-offene-fragen klausur
 223015b_DEPLOY_PATH = /home/tengo/html/hdm/223015b
 
 223015c_NAME = Internettechnologien
-223015c_PORT = 1312
+223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausurfolien
-223015c_KAPITEL = 01-geschichte-grundlagen-html 02-netzwerke-protokolle-css 03-interaktivitaet-javascript klausur
 223015c_DEPLOY_PATH = /home/tengo/html/hdm/223015c
 
 DEPLOY_HOST = tengo@tuttle.uberspace.de
@@ -33,9 +27,7 @@ help:
 	@echo "  223015c - Internettechnologien"
 	@echo ""
 	@echo "Development:"
-	@echo "  make dev         - Both servers + index (ports 1311, 1312, 1313)"
+	@echo "  make dev         - Start development server (port 3000)"
-	@echo "  make dev-b       - Dev server for 223015b (port 1312)"
-	@echo "  make dev-c       - Dev server for 223015c (port 1313)"
 	@echo ""
 	@echo "Build:"
 	@echo "  make build       - Build all courses"
@@ -43,7 +35,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 "  make klausur     - Extract klausurfolien slides"
 	@echo ""
 	@echo "Tools:"
 	@echo "  make qr URL=...  - Generate QR code for URL"
@@ -63,25 +55,14 @@ build/.exists:
 	@mkdir -p build/223015b build/223015c
 	@touch $@
 
-# Development servers
+# Development server
 dev:
 	@./scripts/dev-server.sh
 
 dev-kill:
-	@-pkill -f "python3 -m http.server" 2>/dev/null || true
 	@-pkill -f "marp-cli.*--server" 2>/dev/null || true
 	@sleep 0.5
 
-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 $(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 $(SLIDES_DIR)/223015c/
-
 # Build functions
 define build_course
 	@echo "Building $(1)..."
@@ -104,7 +85,18 @@ build-b: build/.exists
 build-c: build/.exists
 	$(call build_course,223015c)
 
-build: build-b build-c
+build-klausurfragen: build/.exists
+	@echo "Building klausurfragen..."
+	@mkdir -p build
+	@if [ -f "$(SLIDES_DIR)/klausurfragen.md" ]; then \
+		echo "  Building klausurfragen.md..."; \
+		npx @marp-team/marp-cli "$(SLIDES_DIR)/klausurfragen.md" -o build/klausurfragen.html; \
+		npx @marp-team/marp-cli "$(SLIDES_DIR)/klausurfragen.md" --pdf --allow-local-files -o build/klausurfragen.pdf; \
+	else \
+		echo "  Skipping: $(SLIDES_DIR)/klausurfragen.md not found"; \
+	fi
+
+build: build-b build-c build-klausurfragen
 	@echo "All courses built!"
 
 # HTML only builds
@@ -158,7 +150,7 @@ klausur-c:
 	@./scripts/extract-klausur.sh 223015c
 
 klausur: klausur-b klausur-c
-	@echo "Klausur slides extracted for all courses!"
+	@echo "Klausurfolien slides extracted for all courses!"
 
 # QR Code generation (uses nix-shell)
 qr:
@@ -198,7 +190,8 @@ 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 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
+	@mkdir -p build
+	@./scripts/generate-root-index.sh
 
 # Deploy
 define deploy_course
@@ -217,13 +210,20 @@ deploy-b: build-b
 deploy-c: build-c
 	$(call deploy_course,223015c)
 
+# Deploy klausurfragen (root-level page)
+deploy-klausurfragen: build-klausurfragen
+	@echo "Deploying klausurfragen..."
+	@scp build/klausurfragen.html $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ 2>/dev/null || true
+	@scp build/klausurfragen.pdf $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ 2>/dev/null || true
+	@echo "klausurfragen deployed!"
+
 deploy-index: build-index
 	@echo "Deploying root index..."
 	scp build/index.html $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/
 	scp build/qr-root.svg $(DEPLOY_HOST):$(HDM_DEPLOY_PATH)/ 2>/dev/null || true
 	@echo "Root index deployed!"
 
-deploy: build-index deploy-b deploy-c deploy-index
+deploy: build-index deploy-b deploy-c deploy-klausurfragen deploy-index
 	@echo "All courses deployed!"
 
 # Clean

README.md

@@ -27,10 +27,12 @@ build/                # Generated output (gitignored)
 ## Development
 
 ```bash
-# Start dev servers (hot reload)
+# Start development server (hot reload)
-make dev              # All courses + index
+make dev              # Single server for all courses (port 3000)
-make dev-b            # 223015b only (port 1311)
+
-make dev-c            # 223015c only (port 1312)
+# Access individual courses:
+# 223015b: http://localhost:3000/223015b/
+# 223015c: http://localhost:3000/223015c/
 ```
 
 ## Build
@@ -43,7 +45,7 @@ make html             # HTML only
 make pdf              # PDF only
 ```
 
-## Klausur Slides
+## Klausur Folien
 
 Extract exam-relevant slides (marked with `<!-- _class: klausur -->`) into a single file:
 
@@ -53,7 +55,7 @@ make klausur-b        # 223015b only
 make klausur-c        # 223015c only
 ```
 
-Output: `slides/<course>/klausur.md`
+Output: `slides/<course>/klausurfolien.md`
 
 The generated file includes:
 - A title slide per kapitel for orientation

flake.nix

@@ -9,7 +9,8 @@
   outputs = { self, nixpkgs, flake-utils }:
     flake-utils.lib.eachDefaultSystem (system:
       let
-        pkgs = nixpkgs.legacyPackages.${system};
+        pkgs = import nixpkgs { inherit system; config.allowUnfree = true; };
+
 
         # QR code generator script
         qr-gen = pkgs.writeShellScriptBin "qr" ''
@@ -77,6 +78,7 @@
             qrencode
             imagemagick
             gnumake
+            claude-code
           ];
 
           shellHook = ''

package.json

@@ -3,13 +3,14 @@
   "version": "1.0.0",
   "description": "HdM Stuttgart - Lecture Slides (Marp)",
   "scripts": {
-    "dev:b": "PORT=1312 marp --server --allow-local-files courses/223015b/slides/",
+    "dev": "PORT=3000 marp --server --allow-local-files slides/",
-    "dev:c": "PORT=1313 marp --server --allow-local-files courses/223015c/slides/",
     "build": "make build",
     "build:b": "make build-b",
     "build:c": "make build-c",
     "pdf": "make pdf",
     "html": "make html",
+    "klausur": "make klausur",
+    "deploy": "make deploy",
     "test": "echo \"No tests specified\" && exit 0"
   },
   "keywords": ["marp", "slides", "hdm", "lectures"],

scripts/dev-server.sh

@@ -1,106 +1,53 @@
 #!/usr/bin/env bash
-# Development server script for HdM slides
+# Simplified development server for HdM slides
-# Starts index server + marp servers for each course
+# Starts single Marp server for all courses
 
 set -e
 
 # Configuration
-INDEX_PORT=1310
-COURSE_B_PORT=1311
-COURSE_C_PORT=1312
 SLIDES_DIR="slides"
-DEV_INDEX_DIR=".dev-index"
+DEV_PORT=3000
 
 # Colors
-RED='\033[0;31m'
 GREEN='\033[0;32m'
 BLUE='\033[0;34m'
+RED='\033[0;31m'
 NC='\033[0m' # No Color
 
 # Cleanup function
 cleanup() {
-    echo -e "\n${RED}Shutting down servers...${NC}"
+    echo -e "\n${RED}Shutting down dev server...${NC}"
-    kill $PID_INDEX $PID_B $PID_C 2>/dev/null || true
+    pkill -f "marp-cli.*--server" 2>/dev/null || true
     exit 0
 }
 
-# Kill existing processes on our ports
+# Kill existing processes on our port
 kill_existing() {
     echo -e "${BLUE}Cleaning up existing processes...${NC}"
-    # Kill marp processes first
     pkill -9 -f "marp-cli" 2>/dev/null || true
-    pkill -f "python3 -m http.server" 2>/dev/null || true
+    fuser -k $DEV_PORT/tcp 2>/dev/null || true
-    # Kill ports including marp's WebSocket ports (37717-37720 range)
+    sleep 1
-    fuser -k $INDEX_PORT/tcp $COURSE_B_PORT/tcp $COURSE_C_PORT/tcp 2>/dev/null || true
-    fuser -k 37717/tcp 37718/tcp 37719/tcp 37720/tcp 2>/dev/null || true
-    sleep 2
-}
-
-# Generate dev index
-generate_index() {
-    mkdir -p "$DEV_INDEX_DIR"
-    cat > "$DEV_INDEX_DIR/index.html" << 'EOF'
-<!DOCTYPE html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>HdM Slides - Dev</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}
-  </style>
-</head>
-<body>
-  <h1>HdM Slides</h1>
-  <p class="subtitle">Development Server</p>
-  <div class="courses">
-EOF
-    echo "    <a class=\"course course-b\" href=\"http://localhost:$COURSE_B_PORT\"><span class=\"course-label\">223015b</span><div class=\"course-title\">Dateiformate, Schnittstellen, Speichermedien & Distributionswege</div><span class=\"course-info\">Port $COURSE_B_PORT</span></a>" >> "$DEV_INDEX_DIR/index.html"
-    echo "    <a class=\"course course-c\" href=\"http://localhost:$COURSE_C_PORT\"><span class=\"course-label\">223015c</span><div class=\"course-title\">Grundlagen IT- und Internettechnik</div><span class=\"course-info\">Port $COURSE_C_PORT</span></a>" >> "$DEV_INDEX_DIR/index.html"
-    cat >> "$DEV_INDEX_DIR/index.html" << 'EOF'
-  </div>
-</body>
-</html>
-EOF
 }
 
 # Main
 trap cleanup SIGINT SIGTERM
 
 kill_existing
-generate_index
 
-echo -e "${GREEN}Starting development servers...${NC}"
+echo -e "${GREEN}Starting development server...${NC}"
 echo ""
-echo -e "  Index:    ${BLUE}http://localhost:$INDEX_PORT${NC}"
+echo -e "  Server:   ${BLUE}http://localhost:$DEV_PORT${NC}"
-echo -e "  223015b:  ${BLUE}http://localhost:$COURSE_B_PORT${NC}"
+echo -e "  Slides:   ${BLUE}$SLIDES_DIR/${NC}"
-echo -e "  223015c:  ${BLUE}http://localhost:$COURSE_C_PORT${NC}"
 echo ""
-echo -e "Press ${RED}Ctrl+C${NC} to stop all servers"
+echo -e "Available courses:"
+echo -e "  223015b: ${BLUE}http://localhost:$DEV_PORT/223015b/${NC}"
+echo -e "  223015c: ${BLUE}http://localhost:$DEV_PORT/223015c/${NC}"
+echo ""
+echo -e "Press ${RED}Ctrl+C${NC} to stop the server"
 echo ""
 
-# Start servers
+# Start single Marp server for all slides
-python3 -m http.server $INDEX_PORT --directory "$DEV_INDEX_DIR" &
+PORT=$DEV_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/"
-PID_INDEX=$!
 
-PORT=$COURSE_B_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/223015b/" &
+# Wait for process to exit
-PID_B=$!
-
-sleep 3  # Stagger starts to avoid WebSocket port collision
-
-PORT=$COURSE_C_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/223015c/" &
-PID_C=$!
-
-# Wait for any process to exit
 wait

scripts/extract-klausur.sh

@@ -1,19 +1,19 @@
 #!/usr/bin/env bash
 # Extract klausur-relevant slides from all kapitel
 # Usage: ./extract-klausur.sh <course_id>
-# Output: slides/<course>/klausur.md
+# Output: slides/<course>/klausurfolien.md
 
 set -e
 
 COURSE="${1:-223015b}"
 SLIDES_DIR="slides/$COURSE"
-OUTPUT_FILE="$SLIDES_DIR/klausur.md"
+OUTPUT_FILE="$SLIDES_DIR/klausurfolien.md"
 
-# Find the first kapitel file (01-*.md) to copy styles from
+# Find the first kapitel file (00-intro.md or 01-*.md) to copy styles from
-FIRST_KAPITEL=$(ls "$SLIDES_DIR"/01-*.md 2>/dev/null | head -1)
+FIRST_KAPITEL=$(ls "$SLIDES_DIR"/00-intro.md "$SLIDES_DIR"/01-*.md 2>/dev/null | head -1)
 
 if [[ -z "$FIRST_KAPITEL" ]]; then
-  echo "Error: No 01-*.md file found in $SLIDES_DIR"
+  echo "Error: No 00-intro.md or 01-*.md file found in $SLIDES_DIR"
   exit 1
 fi
 
@@ -57,7 +57,7 @@ awk '
 ' "$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
+for md_file in $(ls "$SLIDES_DIR"/[0-9][0-9]-*.md 2>/dev/null | grep -v klausurfolien | sort); do
   filename=$(basename "$md_file")
   kapitel_num=$(echo "$filename" | grep -oE '^[0-9]+' | sed 's/^0*//')
 

scripts/generate-index.sh

@@ -42,6 +42,15 @@ TOPIC_MAP["geschichte-grundlagen-html"]="Geschichte, Grundlagen & HTML"
 TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS"
 TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript"
 
+# Configure which topics should appear disabled per course
+# Two modes: fully disabled (non-clickable card) and buttons-disabled (link remains clickable, buttons are disabled)
+declare -A DISABLED_FULL
+declare -A DISABLED_BUTTONS
+# For course B: chapters 3,4,5 should be fully disabled
+DISABLED_FULL["223015b"]="speichermedien-schnittstellen distribution-apis-zukunft vertiefung-offene-fragen"
+# For course C: chapter 3 should keep link clickable but buttons disabled
+DISABLED_BUTTONS["223015c"]="interaktivitaet-javascript"
+
 cat > "$BUILD_DIR/index.html" << HEADER
 <!DOCTYPE html>
 <html lang="de">
@@ -61,6 +70,15 @@ cat > "$BUILD_DIR/index.html" << HEADER
       line-height: 1.5;
     }
     header { margin-bottom: 2rem; }
+    .breadcrumb {
+      margin-bottom: 1rem;
+      font-size: 0.85rem;
+    }
+    .breadcrumb a {
+      color: #86868b;
+      text-decoration: none;
+    }
+    .breadcrumb a:hover { text-decoration: underline; }
     h1 {
       font-size: 1.75rem;
       font-weight: 600;
@@ -68,6 +86,12 @@ cat > "$BUILD_DIR/index.html" << HEADER
       margin-bottom: 0.5rem;
       color: $ACCENT_COLOR;
     }
+    .course-heading {
+      font-size: 1.25rem;
+      font-weight: 500;
+      color: #1d1d1f;
+      margin-bottom: 0.25rem;
+    }
     .subtitle {
       color: #86868b;
       font-size: 0.95rem;
@@ -77,7 +101,8 @@ cat > "$BUILD_DIR/index.html" << HEADER
       font-size: 0.875rem;
       margin-top: 0.25rem;
     }
-    .kapitel {
+    /* Use the .termine wrapper and add a gap between cards */
+    .termine {
       margin-top: 1.5rem;
       display: flex;
       flex-direction: column;
@@ -93,6 +118,7 @@ cat > "$BUILD_DIR/index.html" << HEADER
       grid-template-columns: 1fr auto auto;
       align-items: center;
       gap: 1rem;
+      padding: 0; /* inner padding handled by kapitel-link */
     }
     .kapitel-card:hover {
       transform: translateY(-2px);
@@ -105,6 +131,8 @@ cat > "$BUILD_DIR/index.html" << HEADER
       color: inherit;
       grid-column: 1;
     }
+    /* Disabled look: dim the entire card and prevent pointer events */
+    .kapitel-card.disabled { opacity: 0.6; pointer-events: none; }
     .kapitel-label {
       font-size: 0.7rem;
       font-weight: 600;
@@ -135,11 +163,11 @@ cat > "$BUILD_DIR/index.html" << HEADER
       white-space: nowrap;
       position: relative;
       z-index: 1;
+      margin-right: 0.5rem;
     }
     .btn-slides {
       background: $ACCENT_COLOR;
       color: #fff;
-      margin-right: 0.5rem;
     }
     .btn-slides:hover {
       filter: brightness(1.1);
@@ -147,9 +175,9 @@ cat > "$BUILD_DIR/index.html" << HEADER
     .btn-pdf {
       background: #f5f5f7;
       color: #1d1d1f;
-      margin-right: 1rem;
     }
     .btn-pdf:hover { background: #e8e8ed; }
+    .btn-disabled { opacity: 0.6; pointer-events: none; }
     /* Make entire card clickable via overlay */
     .kapitel-link::after {
       content: '';
@@ -198,7 +226,9 @@ cat > "$BUILD_DIR/index.html" << HEADER
 </head>
 <body>
   <header>
-    <h1>$TITLE</h1>
+    <p class="breadcrumb"><a href="../">← Kursübersicht</a></p>
+    <h1>HdM Vorlesungen</h1>
+    <h2 class="course-heading">$TITLE</h2>
     <p class="subtitle">$SUBTITLE</p>
     <p class="meta">HdM Stuttgart · Wintersemester 2025/26 · Michael Czechowski</p>
   </header>
@@ -216,7 +246,7 @@ for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do
   # Look up nice topic name or fallback
   topic="${TOPIC_MAP[$topic_raw]}"
   if [[ -z "$topic" ]]; then
-    topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\u&/')
+    topic=$(echo "$topic_raw" | sed 's/-/ /g' | sed 's/.*/\\u&/')
   fi
 
   # Handle kapitel number
@@ -228,42 +258,108 @@ for html in $(ls "$BUILD_DIR"/[0-9][0-9]-*.html 2>/dev/null | sort); do
 
   pdf_filename="${filename%.html}.pdf"
 
-  # Check if PDF exists
+  # Determine whether this topic is configured as disabled for this course
+  disabled_full=false
+  disabled_buttons=false
+  for t in ${DISABLED_FULL["$COURSE"]}; do
+    if [[ "$topic_raw" == "$t" ]]; then
+      disabled_full=true
+      break
+    fi
+  done
+  if [[ "$disabled_full" == false ]]; then
+    for t in ${DISABLED_BUTTONS["$COURSE"]}; do
+      if [[ "$topic_raw" == "$t" ]]; then
+        disabled_buttons=true
+        break
+      fi
+    done
+  fi
+
+  # Decide card class
+  card_class="kapitel-card"
+  if [[ "$disabled_full" == true ]] || [[ "$disabled_buttons" == true ]]; then
+    card_class="$card_class disabled"
+  fi
+
+  # Build link/button HTML depending on disabled state
+  if [[ "$disabled_full" == true ]]; then
+    # non-interactive card (visually dimmed and not clickable)
+    link_html="<div class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></div>"
+    slides_html="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
+    pdf_html=""
+    if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
+      pdf_html="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
+    fi
+  elif [[ "$disabled_buttons" == true ]]; then
+    # link stays clickable, but buttons are disabled; card appears dimmed
+    link_html="<a href=\"$filename\" class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></a>"
+    slides_html="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
+    pdf_html=""
+    if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
+      pdf_html="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
+    fi
+  else
+    # normal interactive card
     pdf_link=""
     if [[ -f "$BUILD_DIR/$pdf_filename" ]]; then
       pdf_link="<a href=\"$pdf_filename\" class=\"btn btn-pdf\">PDF</a>"
     fi
+    link_html="<a href=\"$filename\" class=\"kapitel-link\"><div class=\"kapitel-label\">$kapitel_label</div><div class=\"kapitel-title\">$topic</div></a>"
+    slides_html="<a href=\"$filename\" class=\"btn btn-slides\">Folien</a>"
+    pdf_html="$pdf_link"
+  fi
 
   cat >> "$BUILD_DIR/index.html" << LINK
-    <div class="kapitel-card">
+    <div class="$card_class">
-      <a href="$filename" class="kapitel-link">
+      $link_html
-        <div class="kapitel-label">$kapitel_label</div>
+      $slides_html
-        <div class="kapitel-title">$topic</div>
+      $pdf_html
-      </a>
-      <a href="$filename" class="btn btn-slides">Folien</a>
-      $pdf_link
     </div>
 LINK
+
 done
 
-# Add klausur entry if it exists
+# Add klausurfolien entry if it exists
-if [[ -f "$BUILD_DIR/klausur.html" ]]; then
+if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
   pdf_link=""
-  if [[ -f "$BUILD_DIR/klausur.pdf" ]]; then
+  if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
-    pdf_link="<a href=\"klausur.pdf\" class=\"btn btn-pdf\">PDF</a>"
+    pdf_link="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
   fi
   cat >> "$BUILD_DIR/index.html" << KLAUSUR
     <div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
-      <a href="klausur.html" class="kapitel-link">
+      <a href="klausurfolien.html" class="kapitel-link">
         <div class="kapitel-label">Prüfung</div>
         <div class="kapitel-title">Klausurrelevante Folien</div>
       </a>
-      <a href="klausur.html" class="btn btn-slides">Folien</a>
+      <a href="klausurfolien.html" class="btn btn-slides">Folien</a>
       $pdf_link
     </div>
 KLAUSUR
 fi
 
+# Add klausurfragen entry if it exists (HTML and/or PDF)
+if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
+  pdf_link=""
+  if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
+    pdf_link="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
+  fi
+  slides_link=""
+  if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
+    slides_link="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
+  fi
+  cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
+    <div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
+      <a href="klausurfragen.html" class="kapitel-link">
+        <div class="kapitel-label">Prüfung</div>
+        <div class="kapitel-title">Klausurfragen</div>
+      </a>
+      $slides_link
+      $pdf_link
+    </div>
+KLAUSURFRAGEN
+fi
+
 cat >> "$BUILD_DIR/index.html" << FOOTER
   </div>
   <div class="qr-section">
@@ -272,7 +368,7 @@ cat >> "$BUILD_DIR/index.html" << FOOTER
   </div>
   <footer>
     <a href="mailto:mail@librete.ch">Kontakt</a> ·
-    <a href="../">Alle Kurse</a>
+    <a href="../">Kursübersicht</a>
   </footer>
 </body>
 </html>

slides/223015b/klausur.md

@@ -1,563 +0,0 @@
----
-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/223015b/klausurfolien.md

@@ -0,0 +1,458 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
+footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+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
+
+**Wintersemester 2025/26**
+
+[https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
+
+---
+
+<!-- _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 |
+
+<!--
+KLAUSURRELEVANT:
+- Formel: Breite × Höhe × (Farbtiefe / 8) = Bytes
+- Beispielrechnung: 1920 × 1080 × 3 = 6.220.800 Bytes ≈ 6,2 MB
+- Farbtiefe: 2^n Farben bei n Bit
+- 24 Bit = 8 Bit pro Kanal (R, G, B)
+- 32 Bit = 24 Bit + 8 Bit Alpha (Transparenz)
+-->
+
+
+---
+
+<!-- _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 WAS gezeichnet werden soll, nicht WIE jeder Pixel aussieht.</small>
+
+<!--
+KLAUSURRELEVANT:
+- Vektor = Beschreibung (deklarativ)
+- Raster = Pixel für Pixel (imperativ)
+- Rendering-Pipeline: Vektordaten → Rasterisierung → Display
+- Skalierung = Koordinaten multiplizieren → keine Information geht verloren
+- SVG = Scalable Vector Graphics (Web-Standard)
+-->
+
+
+---
+
+<!-- _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 (Helligkeit behalten)
+- Glatte Flächen effizient speichern
+- Hohe Frequenzen (feine Details) verwerfen
+
+<!--
+KLAUSURRELEVANT:
+- Mehr Stäbchen (Helligkeit) als Zapfen (Farbe) im Auge
+- "Frequenz" = räumliche Frequenz = wie schnell ändert sich Helligkeit?
+- Niedrig = langsame Änderung = große gleichmäßige Fläche
+- Hoch = schnelle Änderung = feine Details, Kanten
+- Analogie zur Psychoakustik bei MP3 (letztes Mal)
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+![bg right:20%](./assets/Barn-yuv.png)
+
+# JPEG Schritt 1: Farbraumkonversion
+
+**RGB → Y'CbCr**
+
+- **Y** = Helligkeit (Luminanz)
+- **Cb** = Blau-Gelb-Anteil (Chrominanz)
+- **Cr** = Rot-Grün-Anteil (Chrominanz)
+
+**Warum?**
+Y (Helligkeit) behält volle Auflösung
+Cb/Cr (Farbe) kann reduziert werden
+
+<!--
+KLAUSURRELEVANT:
+- YCbCr = auch 3 Werte pro Pixel, aber anders organisiert
+- Statt R-G-B: Helligkeit + 2 Farbdifferenzen
+- Umrechnung ist reversibel (mathematische Transformation)
+- Vorteil: Helligkeit und Farbe getrennt behandelbar
+- Bild zeigt: Y (oben), Cb (Mitte), Cr (unten)
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# JPEG Schritt 6: Huffman-Coding
+
+**Verlustfreie Kompression der Restwerte**
+
+**Idee:** Variable Bitlänge statt fester 8 Bit
+Häufige Werte → kurze Codes
+
+| Zeichen | Häufigkeit | Code |
+|---------|------------|------|
+| 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) |
+
+<!--
+KLAUSURRELEVANT:
+- Huffman = verlustfrei, optimal für bekannte Häufigkeiten
+- Präfix-frei: Kein Code ist Anfang eines anderen
+- Häufigstes Zeichen = kürzester Code
+- Auch in ZIP, PNG, MP3 verwendet
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+<!--
+# Huffman-Coding: Beispiel
+
+**Originaltext:** `ABRACADABRA` (11 Zeichen × 8 Bit = 88 Bit)
+
+**Häufigkeitsanalyse:**
+A=5, B=2, R=2, C=1, D=1
+
+**Huffman-Baum → Codes:**
+| Zeichen | Häufigkeit | Code |
+|---------|------------|------|
+| A | 5 | `0` |
+| B | 2 | `10` |
+| R | 2 | `110` |
+| C | 1 | `1110` |
+| D | 1 | `1111` |
+
+**Codiert:** `0 10 110 0 1110 0 1111 0 10 110 0` = **23 Bit**
+**Kompression:** 88 → 23 Bit = **74% gespart**
+
+
+- Beispiel Schritt für Schritt durchrechnen
+- Warum funktioniert's? A kommt 5× vor, bekommt kürzesten Code
+- Präfix-Eigenschaft: Kein Code ist Anfang eines anderen → eindeutig dekodierbar
+- Frage: "Was passiert, wenn alle Zeichen gleich häufig sind?" → Keine Ersparnis
+- In JPEG: Nicht Buchstaben, sondern DCT-Koeffizienten werden so codiert
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# WebP & AVIF: Moderne Alternativen
+
+**WebP (Google, 2010):**
+- Lossy und Lossless
+- Transparenz und Animationen
+- 25–35% kleiner als JPEG
+
+**AVIF (2019):**
+- Basiert auf AV1-Video-Codec
+- 50% kleiner als JPEG
+- HDR-Unterstützung, patent-frei
+
+**Browser-Support 2025:** WebP universell, AVIF wächst
+
+<!--
+KLAUSURRELEVANT:
+- WebP: VP8-Kompression (Google Video-Codec)
+- AVIF: Alliance for Open Media (Google, Netflix, Amazon, Apple, Mozilla)
+- Beide besser als JPEG, aber Kompatibilität bleibt Problem
+- JPEG bleibt dominant: alte Kameras, Software, Workflows
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Container und Codec
+
+**Container = Dateiformat (z.B. MP4)**
+Die "Box", die verschiedene Streams zusammenpackt:
+- Video-Stream
+- Audio-Stream(s)
+- Untertitel
+- Metadaten
+
+**Codec = Kompressionsalgorithmus (z.B. H.264)**
+Bestimmt, WIE komprimiert wird
+
+<!--
+KLAUSURRELEVANT:
+- Container ≠ Codec (häufiges Missverständnis!)
+- MP4 kann H.264, H.265 oder AV1 enthalten
+- Gleiche Endung, unterschiedlicher Inhalt
+- Tool-Tipp: MediaInfo zeigt beides an
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# H.264 / AVC
+
+**Advanced Video Coding (2003)**
+
+**Warum dominant?**
+- Exzellente Kompression (~100:1 möglich)
+- Hardware-Decoder 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 Artefakte)
+
+<!--
+KLAUSURRELEVANT:
+- H.264 revolutionierte Video-Streaming
+- Ohne H.264 kein Netflix, kein YouTube HD
+- Hardware-Decoder = kein CPU-Aufwand, kein Akku-Drain
+- Selbst billigste 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, Netflix nutzen AV1 für 4K/8K
+Hardware-Encoder in aktuellen GPUs
+
+<!--
+KLAUSURRELEVANT:
+- AOM gegründet 2015 – historisch: Konkurrenten vereint
+- Ziel: Nie wieder Patent-Chaos wie bei H.265
+- Problem: Encoding sehr langsam (10–100× vs. H.264)
+- Hardware-Encoder lösen das zunehmend
+- AV1 gewann 2024 einen Emmy für technische Innovation
+-->
+
+
+---
+
+<!-- _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
+-->