add pdf download links to index page

- move bletchley park image after turing portrait
- condense turing biography section
- add full name after A.A.L. initials

.claude/commands/humanify.md

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

.claude/skills/marp/REFERENCE.md

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

.claude/skills/marp/SKILL.md

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

.gitignore

@@ -63,3 +63,4 @@ Desktop.ini
 *.pdf
 index.md.bak
 hdm-lehrauftrag-uebersicht.md
+slides/assets-original/

ASSETS.md

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

CLAUDE.md

@@ -5,6 +5,7 @@ This project builds a presentation deck for Marp based on Markdown files.
 ## Agent Restrictions
 - Agent NEVER runs commands on its own except changing files INSIDE THIS FOLDER, never any other then this
 - Agent NEVER runs build commands or any automated processes without explicit user request, as the user is working in dev mode
+- Agent NEVER runs deploy commands (make deploy, scp, etc.) without explicit user permission - always ask first
 
 ## Critical File Protection: index.md
 - `index.md` is the MAIN CONTENT FILE for the entire lecture series - treat with extreme care

IMAGE_LIST.md

@@ -1,99 +1,124 @@
 # Image List for HdM Internettechnik Slides
 
-This document lists all images needed for the lecture slides. Each image includes:
+Save images to `./slides/assets/` with the exact filenames.
-- **Filename**: Target filename in `./assets/`
-- **Context**: Where/why it's used in the slides
-- **AI Prompt**: Suggested prompt for image generation (Gemini, DALL-E, Midjourney, etc.)
-
-**Recommended settings:**
-- Aspect ratio: 16:9 (1920x1080 or similar)
-- Style: Clean, professional, educational
-- For historical photos: Consider using real images from Wikipedia Commons or similar
-
-**Legend:**
-- ✅ = Already exists in assets/
-- ⬚ = Not yet created
 
 ---
 
-## Intro / Title Slides
+## background-termin-1.png
-
+**Gemini Prompt:**
-### ⬚ digital-landscape.png
+```
-- **Context**: Opening slide background for Termin 1, sets futuristic tech mood
+Futuristic digital landscape with glowing blue and purple data streams, abstract network connections, binary patterns flowing through a neon-lit cyber environment, wide cinematic shot 16:9 aspect ratio, no text
-- **AI Prompt**: Futuristic digital landscape with glowing blue and purple data streams, abstract network connections, binary patterns flowing through a neon-lit cyber environment, wide cinematic shot, no text
+```
-
-### ⬚ network-cables.png
-- **Context**: Opening slide background for Termin 2 (Netzwerke, Protokolle, CSS)
-- **AI Prompt**: Network infrastructure with colorful ethernet cables, server racks, fiber optic lights, data center aesthetic, blue and orange accent lighting, wide cinematic shot, no text
-
-### ⬚ javascript-code.png
-- **Context**: Opening slide background for Termin 3 (Interaktivität, JavaScript)
-- **AI Prompt**: JavaScript code on dark IDE background, syntax highlighting in vibrant colors, modern code editor aesthetic, shallow depth of field on code, programming atmosphere, wide cinematic shot, no text
 
 ---
 
-## Termin 1: Geschichte, Grundlagen & HTML
+## background-termin-2.png
+**Gemini Prompt:**
+```
+Network infrastructure with colorful ethernet cables, server racks, fiber optic lights, data center aesthetic, blue and orange accent lighting, wide cinematic shot 16:9 aspect ratio, no text
+```
 
-### ⬚ hollerith-machine.jpg
+---
-- **Context**: Herman Hollerith's tabulating machine, US Census 1890
-- **AI Prompt**: Historical photograph style of Hollerith tabulating machine from 1890s, punch card reader, mechanical computing device, sepia tone, museum exhibit quality, vintage industrial equipment
-- **Search**: `Hollerith tabulating machine` on commons.wikimedia.org or `site:loc.gov Hollerith census`
 
-### ⬚ dehomag-hollerith.jpg
+## background-termin-3.png
-- **Context**: IBM Hollerith machines used by Dehomag (Deutsche Hollerith-Maschinen GmbH) in 1930s Germany
+**Gemini Prompt:**
-- **AI Prompt**: Historical photograph style of Hollerith machines in 1930s German office setting, punch card processing, bureaucratic documentation, black and white historical photo aesthetic
+```
-- **Search**: `Dehomag Hollerith` or `Deutsche Hollerith-Maschinen` on commons.wikimedia.org or bundesarchiv.de
+JavaScript code on dark IDE background, syntax highlighting in vibrant colors, modern code editor aesthetic, shallow depth of field on code, programming atmosphere, wide cinematic shot 16:9 aspect ratio, no text
+```
 
-### ⬚ oppenheimer-poster.jpg
+---
-- **Context**: Reference to Manhattan Project, introduces WWII computing context
-- **AI Prompt**: Dramatic portrait in style of Oppenheimer movie poster, scientist silhouette against atomic explosion background, 1940s aesthetic, cinematic dramatic lighting
-- **Search**: `Oppenheimer 2023 poster` or `J. Robert Oppenheimer portrait` on commons.wikimedia.org
 
-### ⬚ john-von-neumann.jpg
+## hollerith-machine.tif
-- **Context**: Portrait of John von Neumann, father of computer architecture
+**Search (preferred):**
-- **AI Prompt**: Professional portrait of 1950s mathematician/scientist, suit and tie, blackboard with equations in background, academic setting, black and white photography style
+- commons.wikimedia.org: `Hollerith tabulating machine`
-- **Search**: `John von Neumann` on commons.wikimedia.org (public domain photos available)
+- google.com: `site:loc.gov Hollerith census`
 
-### ⬚ eniac.jpg
+**Gemini Prompt (fallback):**
-- **Context**: ENIAC computer (1945), first electronic general-purpose computer
+```
-- **AI Prompt**: Historical photograph of ENIAC computer room, massive machine with vacuum tubes, cables, switches, 1940s technology, operators working, wide shot showing scale, black and white
+Historical photograph style of Hollerith tabulating machine from 1890s, punch card reader, mechanical computing device, sepia tone, museum exhibit quality, vintage industrial equipment, 16:9
-- **Search**: `ENIAC computer` on commons.wikimedia.org or `site:archives.upenn.edu ENIAC`
+```
 
-### ⬚ arpanet-1969.png
+---
-- **Context**: First ARPANET map showing 4 nodes (UCLA, Stanford, UCSB, Utah)
-- **AI Prompt**: Clean diagram of early ARPANET network from 1969, four nodes connected by lines, US map background, vintage technical drawing style, labeled nodes: UCLA, SRI, UCSB, Utah
-- **Search**: `ARPANET 1969 map` or `ARPANET logical map` on commons.wikimedia.org
 
-### ⬚ lightbulb-onoff.png
+## dehomag-hollerith.jpg
-- **Context**: Explaining the bit concept (0 or 1, on or off)
+**Search (preferred):**
-- **AI Prompt**: Simple lightbulb comparison: one lit bright yellow, one dark/off, side by side, clean minimal style, binary concept visualization, white background, educational diagram
+- commons.wikimedia.org: `Dehomag Hollerith`
+- bundesarchiv.de: `Deutsche Hollerith-Maschinen`
+
+**Gemini Prompt (fallback):**
+```
+Historical photograph of Hollerith machines in 1930s German office setting, punch card processing, bureaucratic documentation, black and white historical photo aesthetic, 16:9
+```
+
+---
+
+## oppenheimer-poster.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `J. Robert Oppenheimer portrait`
+- google.com: `Oppenheimer 2023 movie poster`
+
+**Gemini Prompt (fallback):**
+```
+Dramatic portrait in style of Oppenheimer movie poster, scientist silhouette against atomic explosion background, 1940s aesthetic, cinematic dramatic lighting, 16:9
+```
+
+---
+
+## john-von-neumann.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `John von Neumann portrait`
+- google.com: `John von Neumann LANL`
+
+**Gemini Prompt (fallback):**
+```
+Professional portrait of 1950s mathematician scientist, suit and tie, blackboard with equations in background, academic setting, black and white photography style, 16:9
+```
+
+---
+
+## eniac.jpg
+**Search (preferred):**
+- commons.wikimedia.org: `ENIAC computer`
+- google.com: `site:archives.upenn.edu ENIAC`
+
+**Gemini Prompt (fallback):**
+```
+Historical photograph of ENIAC computer room, massive machine with vacuum tubes cables switches, 1940s technology, operators working, wide shot showing scale, black and white, 16:9
+```
+
+---
+
+## arpanet-1969.png
+**Search (preferred):**
+- commons.wikimedia.org: `ARPANET 1969 map`
+- commons.wikimedia.org: `ARPANET logical map December 1969`
+
+**Gemini Prompt (fallback):**
+```
+Clean technical diagram of early ARPANET network from 1969, four nodes connected by lines on US map background, vintage technical drawing style, labeled nodes UCLA SRI UCSB Utah, 16:9
+```
+
+---
+
+## lightbulb-onoff.png
+**Gemini Prompt:**
+```
+Simple lightbulb comparison showing binary concept, one lightbulb lit bright yellow, one lightbulb dark off, side by side, clean minimal style, white background, educational diagram, 16:9
+```
 
 ---
 
 ## Summary
 
-| Lecture | Total | ✅ Done | ⬚ Todo |
+| Image | Type |
-|---------|-------|--------|--------|
+|-------|------|
-| Intro/Title Slides | 3 | 0 | 3 |
+| background-termin-1.png | Generate |
-| Termin 1 (Geschichte/Grundlagen/HTML) | 7 | 0 | 7 |
+| background-termin-2.png | Generate |
-| Termin 2 (Netzwerke/Protokolle/CSS) | 0 | 0 | 0 |
+| background-termin-3.png | Generate |
-| Termin 3 (Interaktivität/JavaScript) | 0 | 0 | 0 |
+| hollerith-machine.tif/jpg | Search or Generate |
-| **Total** | **10** | **0** | **10** |
+| dehomag-hollerith.webp | Search or Generate |
-
+| oppenheimer.png | Search or Generate |
----
+| john-von-neumann.png | Search or Generate |
-
+| eniac.avif | Search or Generate |
-## Generation Tips
+| arpanet-1969.png | Search or Generate |
-
+| lightbulb-onoff.png | Generate |
-1. **Historical photos**: Prefer real historical photos from Wikipedia Commons, Library of Congress, or university archives for authenticity
-2. **Diagrams**: Use "clean infographic style", "technical illustration", "minimal diagram" in prompts
-3. **Backgrounds**: Use "wide cinematic shot", "no text", "opacity-friendly" for title slide backgrounds
-4. **Consistency**: Add "educational style", "professional presentation" to maintain visual coherence
-
-## Asset Directory
-
-Create the assets directory if it doesn't exist:
-```bash
-mkdir -p ./assets
-```
-
-Place all images in `./slides/assets/` with the exact filenames listed above.

Makefile

@@ -1,21 +1,16 @@
 # Makefile for Marp Slides Project
 
-.PHONY: help build dev watch pdf html clean install deploy assemble
+.PHONY: help build dev watch pdf html clean install deploy deploy-html copy-assets optimize-images
 
-# Slide components
+# Directories
 SLIDES_DIR = slides
 BUILD_DIR = build
-HEADER = $(SLIDES_DIR)/_frontmatter.md
-INTRO = $(SLIDES_DIR)/_intro.md
-OUTRO = $(SLIDES_DIR)/_outro.md
 
-# Termin files (date-topic naming convention)
+# Termin files (date-topic naming convention) - each is self-contained
-TERMIN_1 = 2025-12-19-termin-1-grundlagen-text-audio
+TERMIN_1 = 2025-12-20-termin-1-geschichte-grundlagen-html
-TERMIN_2 = 2026-01-09-termin-2-bild-audio-video
+TERMIN_2 = 2026-01-10-termin-2-netzwerke-protokolle-css
-TERMIN_3 = 2026-01-23-termin-3-speichermedien-schnittstellen
+TERMIN_3 = 2026-01-24-termin-3-interaktivitaet-javascript
-TERMIN_4 = 2026-01-30-termin-4-distribution-apis-zukunft
+TERMINS = $(TERMIN_1) $(TERMIN_2) $(TERMIN_3)
-TERMIN_5 = 2026-xx-xx-termin-5-vertiefung-offene-fragen
-TERMINS = $(TERMIN_1) $(TERMIN_2) $(TERMIN_3) $(TERMIN_4) $(TERMIN_5)
 
 # Default target
 help:
@@ -29,27 +24,25 @@ help:
 	@echo "    make pdf        - Export all slides to PDF"
 	@echo "    make html       - Export all slides to HTML"
 	@echo ""
+	@echo "  Deploy:"
+	@echo "    make deploy     - Full build + deploy (HTML, PDF, assets)"
+	@echo "    make deploy-html - HTML only deploy (faster)"
+	@echo ""
 	@echo "  Other:"
-	@echo "    make assemble   - Assemble all termin files in build/"
+	@echo "    make optimize-images - Resize images to max 1920px"
 	@echo "    make clean      - Remove generated files"
 	@echo "    make install    - Install dependencies"
-	@echo "    make deploy     - Deploy slides to server"
 
 # Ensure build directory exists
 $(BUILD_DIR)/.exists:
 	@mkdir -p $(BUILD_DIR)
 	@touch $@
 
-# Assemble all termin files
+# Copy assets and materials to build directory
-assemble: $(BUILD_DIR)/.exists
+copy-assets: $(BUILD_DIR)/.exists
-	@echo "Assembling slides..."
+	@echo "Copying assets..."
-	@for f in $(TERMINS); do \
+	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/
-		echo "  $$f.md"; \
+	@cp -r $(SLIDES_DIR)/materials $(BUILD_DIR)/ 2>/dev/null || true
-		cat $(HEADER) $(INTRO) $(SLIDES_DIR)/$$f.md $(OUTRO) > $(BUILD_DIR)/$$f.md; \
-	done
-	@echo "  all.md"
-	@cat $(HEADER) $(INTRO) $(foreach t,$(TERMINS),$(SLIDES_DIR)/$(t).md) $(OUTRO) > $(BUILD_DIR)/all.md
-	@cp -r $(SLIDES_DIR)/assets $(BUILD_DIR)/ 2>/dev/null || true
 
 # Development server - serves slides/ directly with HMR
 dev:
@@ -58,30 +51,38 @@ dev:
 	PORT=1312 npx @marp-team/marp-cli --server $(SLIDES_DIR)/
 
 # Watch for changes
-watch: assemble
+watch:
-	npx @marp-team/marp-cli --watch $(BUILD_DIR)/all.md
+	npx @marp-team/marp-cli --watch $(SLIDES_DIR)/
 
 # Build all slides (HTML + PDF)
-build: assemble
+build: copy-assets
 	@echo "Building all slides..."
 	@for f in $(TERMINS); do \
 		echo "Building $$f..."; \
-		npx @marp-team/marp-cli $(BUILD_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
-		npx @marp-team/marp-cli $(BUILD_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
 	done
-	@echo "Building all.md..."
+	@./scripts/generate-index.sh $(BUILD_DIR)
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md -o $(BUILD_DIR)/all.html
+	@echo "Done! Output in $(BUILD_DIR)/"
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md --pdf --allow-local-files -o $(BUILD_DIR)/all.pdf
 
-# Export to PDF (all slides combined)
+# Export all slides to PDF
-pdf: assemble
+pdf: $(BUILD_DIR)/.exists
 	@echo "Exporting to PDF..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md --pdf --allow-local-files -o $(BUILD_DIR)/all.pdf
+	@for f in $(TERMINS); do \
+		echo "  $$f.pdf"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md --pdf --allow-local-files -o $(BUILD_DIR)/$$f.pdf; \
+	done
+	@echo "Done! PDFs in $(BUILD_DIR)/"
 
-# Export to HTML (all slides combined)
+# Export all slides to HTML
-html: assemble
+html: copy-assets
 	@echo "Exporting to HTML..."
-	npx @marp-team/marp-cli $(BUILD_DIR)/all.md -o $(BUILD_DIR)/all.html
+	@for f in $(TERMINS); do \
+		echo "  $$f.html"; \
+		npx @marp-team/marp-cli $(SLIDES_DIR)/$$f.md -o $(BUILD_DIR)/$$f.html; \
+	done
+	@./scripts/generate-index.sh $(BUILD_DIR)
+	@echo "Done! HTML files in $(BUILD_DIR)/"
 
 # Clean generated files
 clean:
@@ -93,8 +94,26 @@ install:
 	@echo "Installing dependencies..."
 	npm install
 
-# Deploy slides
+# Optimize images (resize to max 1920px, requires nix-shell -p imagemagick)
+optimize-images:
+	@echo "Creating optimized images from assets-original..."
+	@mkdir -p $(SLIDES_DIR)/assets
+	@nix-shell -p imagemagick --run 'find $(SLIDES_DIR)/assets-original -maxdepth 1 -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" -o -name "*.webp" -o -name "*.avif" \) -exec sh -c '"'"'for img; do magick "$$img" -resize "1920x>" -quality 85 "$(SLIDES_DIR)/assets/$$(basename "$$img")"; done'"'"' _ {} +'
+	@echo "Done! Optimized images in assets/"
+
+# Deploy slides (full build)
 deploy: build
 	@echo "Deploying slides..."
-	scp $(BUILD_DIR)/all.html tengo@tuttle.uberspace.de:/home/tengo/html/malta/index.html
+	@echo "Copying HTML files..."
-	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/malta/
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	@echo "Copying assets..."
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	@echo "Copying materials..."
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true
+
+# Deploy HTML only (faster, no PDF rebuild)
+deploy-html: html
+	@echo "Deploying HTML only..."
+	scp $(BUILD_DIR)/*.html tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp -r $(BUILD_DIR)/assets/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/
+	scp -r $(BUILD_DIR)/materials/ tengo@tuttle.uberspace.de:/home/tengo/html/hdm/223015c/ 2>/dev/null || true

README.md

@@ -1,17 +1,15 @@
-# 223015b – Dateiformate, Schnittstellen, Speichermedien & Distributionswege
+# 223015c – Grundlagen IT- und Internettechnik
 
 **Modul "Technik 1"** · 1. Semester · Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart · Wintersemester 2025/26
 
-**Repository:** [git.librete.ch/hdm/223015b](https://git.librete.ch/hdm/223015b)
-
 ---
 
 ## Über dieses Modul
 
 > *Internettechnologien 1 – "Technische Grundlagen von IT-Projekten"*
 
-Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Sie hat neue Geschäftsmodelle ermöglicht und auch unseren Alltag stark verändert. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing- und Verkaufsplattform.
+Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen. Kaum ein Projekt in der Medienwelt kommt ohne digitale Technik aus – als Produkt, Kollaborationsplattform oder Marketing- und Verkaufsplattform.
 
 **Ziel:** Technische Grundlagen verstehen, um mit Entwicklungsteams, Kunden und Projektpartnern auf Augenhöhe zusammenarbeiten zu können.
 
@@ -19,152 +17,59 @@ Die Digitalisierung verändert die Prozesse und Tätigkeiten in allen Branchen.
 
 | # | Datum | Thema |
 |---|-------|-------|
-| 1 | 19.12.2025 | Grundlagen, Text & Audio |
+| 1 | 20.12.2025 | Geschichte, Grundlagen & HTML |
-| 2 | 09.01.2026 | Bild- & Videoformate |
+| 2 | 10.01.2026 | Netzwerke, Protokolle & CSS |
-| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+| 3 | 24.01.2026 | Interaktivität & JavaScript |
-| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
-| 5 | TBA | Vertiefung & offene Fragen |
 
 ### Kompetenzen
 
 In dieser Veranstaltung erwerben Sie folgende Kompetenzen:
-- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, Client/Server)
+- Geschichte der Informatik verstehen (Hollerith, Von-Neumann, ARPANET)
-- Dateiformate analysieren und verstehen
+- Technische Konzepte des Internets verstehen (Netzwerke, Protokolle, DNS, HTTP)
-- Grundlagen von Kompression (Audio, Bild, Video)
+- HTML-Seiten strukturieren und semantisch aufbauen
-- Speichermedien und Schnittstellen kennen
+- CSS für Layout und Design einsetzen (Selektoren, Box-Modell, Flexbox)
-- APIs und Distributionswege verstehen
+- JavaScript für Interaktivität nutzen (DOM-Manipulation, Events)
 
-**Dozent:** Michael Czechowski · michael.czechowski@lehre.dhbw-stuttgart.de
+**Dozent:** Michael Czechowski · mail@librete.ch
 
 ---
 
-## Slides erstellen
+## Development
 
-### Basic Slide Structure
+### Voraussetzungen
-
-Slides are written in Markdown and separated by `---`:
-
-```markdown
----
-marp: true
-theme: uncover
-paginate: true
----
-
-# Slide Title
-
-Content here
-
----
-
-# Next Slide
-
-More content
-```
-
-### Frontmatter
-
-Configure slide settings at the top:
-
-```yaml
----
-marp: true
-theme: uncover
-paginate: true
-backgroundColor: #fff
-title: My Presentation
----
-```
-
-### Themes
-
-Use built-in themes:
-- `default`
-- `gaia`
-- `uncover`
-
-Or create custom themes in `themes/` directory.
-
-### Images and Assets
-
-Place images in `assets/` directory and reference them:
-
-```markdown
-![Alt text](assets/image.jpg)
-```
-
-## Custom Themes
-
-Create custom themes in `themes/` directory:
-
-```css
-/* @theme custom-theme */
-
-@import-theme "gaia";
-
-section {
-  background-color: #f0f8ff;
-  color: #2c3e50;
-}
-
-h1 {
-  color: #3498db;
-}
-```
-
-Apply custom theme in frontmatter:
-```yaml
----
-marp: true
-theme: custom-theme
----
-```
-
-## Development Workflow
-
-1. Edit slide files in `slides/` directory
-2. Use `npm run dev` for live preview
-3. Make changes and see updates automatically
-4. Export final version with `npm run export:pdf`
-
-## Makefile Commands
-
-Alternative commands using Make:
 
 ```bash
-make build      # Build slides
+npm install
-make dev        # Start development server
-make pdf        # Export to PDF
-make html       # Export to HTML
-make watch      # Watch for changes
-make clean      # Remove generated files
-make deploy     # Deploy slides to server
 ```
 
-## Tips
+### Commands
 
-- Use `---` to separate slides
+```bash
-- Frontmatter controls global settings
+npm run dev        # Development server (http://localhost:8080)
-- Images should be in `assets/` directory
+npm run build      # Build slides
-- Custom themes extend built-in themes
+npm run export:pdf # Export to PDF
-- PDF export requires Chrome/Chromium
+```
 
-## Troubleshooting
+### Makefile
 
-- **PDF export fails**: Ensure Chrome/Chromium is installed
+```bash
-- **Server not starting**: Check if port 8080 is available
+make dev    # Start development server
-- **Styles not applying**: Verify theme file paths
+make build  # Build slides
-- **Images not loading**: Check relative paths from slides directory
+make pdf    # Export to PDF
+make clean  # Remove generated files
+```
 
-## Contributing
+## Projektstruktur
 
-1. Follow the file structure conventions
+```
-2. Use numbered prefixes for slide files
+slides/
-3. Test builds before committing
+├── 2025-12-20-termin-1-geschichte-grundlagen-html.md
-4. Keep commit messages lowercase and descriptive
+├── 2026-01-10-termin-2-netzwerke-protokolle-css.md
+├── 2026-01-24-termin-3-interaktivitaet-javascript.md
+└── assets/
+    └── (images)
+```
 
 ## License
 
-This project is licensed under [Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)](https://creativecommons.org/licenses/by-sa/4.0/).
+Licensed under [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/).
-
-This project uses Marp which is MIT licensed.

package.json

@@ -4,11 +4,11 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "marp index.md -o build/index.html && cp -r assets build/",
+    "build": "marp index.md --allow-local-files -o build/index.html && cp -r assets build/",
-    "dev": "marp --server ./",
+    "dev": "marp --server --allow-local-files -p 1313 ./",
-    "watch": "marp --watch index.md",
+    "watch": "marp --watch --allow-local-files index.md",
-    "export:pdf": "marp index.md --pdf -o build/index.pdf",
+    "export:pdf": "marp index.md --allow-local-files --pdf -o build/index.pdf",
-    "export:html": "marp index.md --html -o build/index.html && cp -r assets build/",
+    "export:html": "marp index.md --allow-local-files --html -o build/index.html && cp -r assets build/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

scripts/generate-index.sh

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

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

@@ -5,27 +5,55 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik"
 footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: "Tag 3: Interaktivität & JavaScript"
+title: "Termin 3: Interaktivität & JavaScript"
 ---
 
 <style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
 section {
   font-size: 1.7rem;
 }
 h2 {
-  color: var(--color-dimmed);
+  color: var(--color-highlight);
+}
+pre {
+  background: #0f0f23;
+  color: #d63384;
+  border-radius: 8px;
+  border-left: 3px solid #d63384;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+code {
+  background: #1a1a2e;
+  color: #d63384;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+}
+a {
+  color: var(--color-highlight);
 }
 </style>
 
 <!-- _class: invert -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
+<!-- _backgroundColor: black -->
 
-![bg fit opacity:0.4](./assets/javascript-code.png)
+![bg fit opacity:0.2](./assets/background-termin-2.png)
 
 # Grundlagen IT- und Internettechnik
 
-**223015b** · Modul "Technik 1" · 1. Semester
+**223015c** · Modul "Technik 1" · 1. Semester
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
@@ -35,15 +63,15 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Tag 3 – 24.01.2026
+# Termin 3 – 24.01.2026
 ## Interaktivität & JavaScript
 
 ---
 
 # Rückblick
 
-**Tag 1:** Geschichte, Von-Neumann, HTML
+**Termin 1:** Geschichte, Von-Neumann, HTML
-**Tag 2:** Netzwerke, DNS, HTTP, CSS
+**Termin 2:** Netzwerke, DNS, HTTP, CSS
 
 **Eure Portfolio-Seiten?**
 - Wer hat mehrere Seiten?
@@ -169,11 +197,11 @@ Fehler werden hier auch angezeigt
 
 ```javascript
 // Modern (empfohlen)
-let alter = 25;            // Kann geändert werden
+let age = 25;              // Kann geändert werden
 const name = "Max";        // Konstante (nicht änderbar)
 
 // Alt (vermeiden!)
-var stadt = "Stuttgart";   // Problematisches Scoping
+var city = "Stuttgart";    // Problematisches Scoping
 ```
 
 **Regeln:**
@@ -193,27 +221,26 @@ var = alte Syntax, hat Scoping-Probleme
 
 ```javascript
 // String (Text)
-const text = "Hallo";
+const text = "Hello";
-const text2 = 'Welt';
+const text2 = 'World';
-const text3 = `Hallo ${text2}`;  // Template Literal
+const text3 = `Hello ${text2}`;  // Template Literal
 
 // Number (Zahl)
-const ganzzahl = 42;
+const integer = 42;
-const kommazahl = 3.14;
+const decimal = 3.14;
 
 // Boolean (Wahrheitswert)
-const istWahr = true;
+const isTrue = true;
-const istFalsch = false;
+const isFalse = false;
 
 // Undefined & Null
-let unbekannt;           // undefined
+let unknown;             // undefined
-const nichts = null;     // null (bewusst leer)
+const nothing = null;    // null (bewusst leer)
 ```
 
 <!--
 typeof prüft den Typ
 Template Literals mit Backticks!
-Keine Unterscheidung int/float
 -->
 
 ---
@@ -221,27 +248,22 @@ Keine Unterscheidung int/float
 # Arrays: Listen
 
 ```javascript
-const farben = ["rot", "grün", "blau"];
+const colors = ["red", "green", "blue"];
 
 // Zugriff (0-basiert!)
-console.log(farben[0]);    // "rot"
+console.log(colors[0]);    // "red"
-console.log(farben[2]);    // "blau"
+console.log(colors[2]);    // "blue"
 
 // Länge
-console.log(farben.length); // 3
+console.log(colors.length); // 3
 
-// Hinzufügen
+// Hinzufügen/Entfernen
-farben.push("gelb");       // Am Ende
+colors.push("yellow");     // Am Ende hinzufügen
-farben.unshift("weiß");    // Am Anfang
+colors.pop();              // Letztes entfernen
-
-// Entfernen
-farben.pop();              // Letztes Element
-farben.shift();            // Erstes Element
 ```
 
 <!--
 Index startet bei 0!
-farben[3] = viertes Element
 Arrays sind veränderbar auch bei const
 -->
 
@@ -251,27 +273,23 @@ Arrays sind veränderbar auch bei const
 
 ```javascript
 const person = {
-    vorname: "Max",
+    firstName: "Max",
-    nachname: "Mustermann",
+    lastName: "Smith",
-    alter: 25,
+    age: 25,
-    hobbies: ["Lesen", "Sport"]
+    hobbies: ["Reading", "Sports"]
 };
 
 // Zugriff
-console.log(person.vorname);      // "Max"
+console.log(person.firstName);     // "Max"
-console.log(person["nachname"]);  // "Mustermann"
+console.log(person["lastName"]);   // "Smith"
 
-// Ändern
+// Ändern/Hinzufügen
-person.alter = 26;
+person.age = 26;
-
+person.job = "Student";
-// Hinzufügen
-person.beruf = "Student";
 ```
 
 <!--
-Key-Value-Paare
+Key-Value-Paare, Punkt- oder Bracket-Notation
-Punkt-Notation oder Bracket-Notation
-Verschachtelt möglich
 -->
 
 ---
@@ -313,15 +331,15 @@ true || false  // true (ODER)
 
 1. Erstelle Variablen für dich:
    ```javascript
-   const name = "Dein Name";
+   const name = "Your Name";
-   let alter = 20;
+   let age = 20;
    const hobbies = ["Hobby1", "Hobby2"];
    ```
 
 2. Gib sie aus:
    ```javascript
-   console.log(`Ich bin ${name}, ${alter} Jahre alt.`);
+   console.log(`I am ${name}, ${age} years old.`);
-   console.log("Meine Hobbies:", hobbies);
+   console.log("My hobbies:", hobbies);
    ```
 
 3. Erstelle ein `person`-Objekt und greife auf Properties zu
@@ -332,28 +350,26 @@ true || false  // true (ODER)
 
 ```javascript
 // Funktion definieren
-function grüßen(name) {
+function greet(name) {
-    return `Hallo ${name}!`;
+    return `Hello ${name}!`;
 }
 
 // Funktion aufrufen
-const nachricht = grüßen("Max");
+const message = greet("Max");
-console.log(nachricht);  // "Hallo Max!"
+console.log(message);  // "Hello Max!"
 
 // Arrow Function (modern)
-const addieren = (a, b) => {
+const add = (a, b) => {
     return a + b;
 };
 
 // Kurzform (bei einem Ausdruck)
-const verdoppeln = x => x * 2;
+const double = x => x * 2;
 ```
 
 <!--
 function = klassische Syntax
 Arrow Functions = modern, kürzer
-Parameter = Eingabe
-return = Rückgabe
 -->
 
 ---
@@ -361,24 +377,23 @@ return = Rückgabe
 # Kontrollstrukturen: if/else
 
 ```javascript
-const alter = 18;
+const age = 18;
 
-if (alter >= 18) {
+if (age >= 18) {
-    console.log("Volljährig");
+    console.log("Adult");
-} else if (alter >= 16) {
+} else if (age >= 16) {
-    console.log("Fast volljährig");
+    console.log("Almost adult");
 } else {
-    console.log("Minderjährig");
+    console.log("Minor");
 }
 
 // Ternärer Operator (Kurzform)
-const status = alter >= 18 ? "Erwachsen" : "Kind";
+const status = age >= 18 ? "Adult" : "Child";
 ```
 
 <!--
 Bedingung in Klammern
 Code-Block in geschweiften Klammern
-Ternär für einfache Fälle
 -->
 
 ---
@@ -392,29 +407,17 @@ for (let i = 0; i < 5; i++) {
 }
 
 // for...of (Arrays)
-const farben = ["rot", "grün", "blau"];
+const colors = ["red", "green", "blue"];
-for (const farbe of farben) {
+for (const color of colors) {
-    console.log(farbe);
+    console.log(color);
 }
 
 // forEach (Array-Methode)
-farben.forEach(farbe => {
+colors.forEach(color => console.log(color));
-    console.log(farbe);
-});
-
-// while
-let count = 0;
-while (count < 3) {
-    console.log(count);
-    count++;
-}
 ```
 
 <!--
-for = wenn Anzahl bekannt
+for = Anzahl bekannt, for...of = Arrays, forEach = Array-Methode
-for...of = für Arrays/Iterables
-forEach = Array-Methode
-while = solange Bedingung wahr
 -->
 
 ---
@@ -422,29 +425,23 @@ while = solange Bedingung wahr
 # Nützliche Array-Methoden
 
 ```javascript
-const zahlen = [1, 2, 3, 4, 5];
+const numbers = [1, 2, 3, 4, 5];
 
 // map: Transformieren
-const verdoppelt = zahlen.map(x => x * 2);
+const doubled = numbers.map(x => x * 2);    // [2, 4, 6, 8, 10]
-// [2, 4, 6, 8, 10]
 
 // filter: Filtern
-const groß = zahlen.filter(x => x > 2);
+const large = numbers.filter(x => x > 2);   // [3, 4, 5]
-// [3, 4, 5]
 
 // find: Erstes Element finden
-const gefunden = zahlen.find(x => x > 3);
+const found = numbers.find(x => x > 3);     // 4
-// 4
 
 // reduce: Aggregieren
-const summe = zahlen.reduce((acc, x) => acc + x, 0);
+const sum = numbers.reduce((acc, x) => acc + x, 0);  // 15
-// 15
 ```
 
 <!--
-Funktionale Programmierung
+Funktionale Programmierung, Original-Array bleibt unverändert
-Sehr mächtig für Datenverarbeitung
-Originales Array bleibt unverändert
 -->
 
 ---
@@ -455,16 +452,14 @@ Originales Array bleibt unverändert
 
 1. Funktion die prüft ob Zahl gerade ist:
    ```javascript
-   function istGerade(zahl) {
+   function isEven(num) { /* your code */ }
-       // Dein Code
-   }
    ```
 
 2. Funktion die Array-Summe berechnet
 
-3. Schleife die 1-10 ausgibt und "Fizz" für durch 3 teilbare, "Buzz" für durch 5 teilbare Zahlen
+3. FizzBuzz: 1-10 ausgeben, "Fizz" bei /3, "Buzz" bei /5
 
-**Tipp:** `zahl % 2 === 0` prüft ob gerade
+**Tipp:** `num % 2 === 0` prüft ob gerade
 
 ---
 
@@ -800,57 +795,31 @@ State in Klasse gespeichert
 
 ---
 
-# Beispiel: Formular-Validierung
-
-```javascript
-const form = document.querySelector("#kontaktForm");
-const emailInput = document.querySelector("#email");
-const errorMessage = document.querySelector("#error");
-
-form.addEventListener("submit", function(event) {
-    const email = emailInput.value;
-    
-    if (!email.includes("@")) {
-        event.preventDefault();
-        errorMessage.textContent = "Bitte gültige E-Mail eingeben!";
-        errorMessage.style.display = "block";
-    }
-});
-
-// Live-Feedback
-emailInput.addEventListener("input", function() {
-    if (emailInput.value.includes("@")) {
-        errorMessage.style.display = "none";
-    }
-});
-```
-
-<!--
-Client-Side Validation
-Zusätzlich zu HTML-Validation
-UX: Sofortiges Feedback
-Server-Validation trotzdem nötig!
--->
-
----
-
 # Hands-On: Interaktive Features (45 Min)
 
 **Baut in eure Seite ein:**
 
-1. **Dark Mode Toggle**
+1. **Dark Mode Toggle** – Button toggelt Klasse auf `body`
+2. **Accordion/FAQ** – Klick zeigt/versteckt Antwort
+
+**Tipp:** `classList.toggle()` + CSS `display: none/block`
+
+**Hilfe:** https://codescripsi.es/
+
+<!--
+Ausführlicher:
+1. Dark Mode Toggle
    - Button der Klasse auf `body` toggelt
    - CSS für `.dark-mode`
 
-2. **Accordion/FAQ**
+2. Accordion/FAQ
    - Klick auf Frage → Antwort erscheint/verschwindet
-   - Tipp: `classList.toggle()` + CSS `display: none/block`
+   - Tipp: classList.toggle() + CSS display: none/block
 
-3. **Formular-Validierung**
+3. Formular-Validierung (entfernt - passt nicht zum Kurskontext)
    - Prüft ob Felder ausgefüllt
    - Zeigt Fehlermeldung
-
+-->
-**Hilfe:** https://nextlevelshit.github.io/web-engineering-mandala/
 
 ---
 
@@ -868,30 +837,21 @@ Server-Validation trotzdem nötig!
 
 ---
 
-# Projekt: Interaktive Portfolio-Seite
+# Übung: Interaktive Portfolio-Seite
 
-**Ihr habt jetzt alle Bausteine:**
+**Kombiniert eure Bausteine:**
-
+HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)
-- **HTML:** Struktur
-- **CSS:** Design
-- **JavaScript:** Interaktivität
-
-**Kombiniert sie!**
 
 ---
 
-# Projekt-Anforderungen
+# Übung: Anforderungen
 
 **Must-Have:**
 - [ ] Semantisches HTML
-- [ ] Responsive CSS (Mobile + Desktop)
+- [ ] Responsive CSS
-- [ ] Mindestens 2 interaktive Features mit JS
+- [ ] 2 interaktive JS-Features
 
-**Nice-to-Have:**
+**Nice-to-Have:** Dark Mode, Animationen, Formular-Validierung
-- [ ] Dark Mode
-- [ ] Animationen/Transitions
-- [ ] Formular mit Validierung
-- [ ] Dynamisch generierte Inhalte
 
 **Zeit:** 60 Minuten
 
@@ -902,21 +862,18 @@ Server-Validation trotzdem nötig!
 ```javascript
 const form = document.querySelector("#todoForm");
 const input = document.querySelector("#todoInput");
-const liste = document.querySelector("#todoListe");
+const list = document.querySelector("#todoList");
 
 form.addEventListener("submit", function(event) {
     event.preventDefault();
-    
     if (input.value.trim() === "") return;
 
     const li = document.createElement("li");
     li.textContent = input.value;
-    
-    // Löschen per Klick
     li.addEventListener("click", () => li.remove());
 
-    liste.appendChild(li);
+    list.appendChild(li);
-    input.value = "";  // Input leeren
+    input.value = "";
 });
 ```
 
@@ -945,32 +902,20 @@ Node.js für Backend
 # Fetch: Daten laden
 
 ```javascript
-// Daten von API laden
+// Mit async/await (modern)
-fetch("https://api.example.com/data")
+async function loadData() {
-    .then(response => response.json())
-    .then(data => {
-        console.log(data);
-    })
-    .catch(error => {
-        console.error("Fehler:", error);
-    });
-
-// Mit async/await (moderner)
-async function ladeDaten() {
     try {
         const response = await fetch("https://api.example.com/data");
         const data = await response.json();
         console.log(data);
     } catch (error) {
-        console.error("Fehler:", error);
+        console.error("Error:", error);
     }
 }
 ```
 
 <!--
-APIs = Schnittstellen zu Daten
+APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
-JSON = JavaScript Object Notation
-async/await = lesbarere Syntax
 -->
 
 ---
@@ -980,10 +925,7 @@ async/await = lesbarere Syntax
 ```javascript
 // Speichern
 localStorage.setItem("name", "Max");
-localStorage.setItem("settings", JSON.stringify({
+localStorage.setItem("settings", JSON.stringify({ darkMode: true }));
-    darkMode: true,
-    language: "de"
-}));
 
 // Laden
 const name = localStorage.getItem("name");
@@ -991,13 +933,10 @@ const settings = JSON.parse(localStorage.getItem("settings"));
 
 // Löschen
 localStorage.removeItem("name");
-localStorage.clear();  // Alles löschen
 ```
 
 <!--
-Daten bleiben nach Browser-Neustart
+Daten bleiben nach Browser-Neustart, nur Strings → JSON.stringify/parse
-Max 5-10 MB
-Nur Strings → JSON.stringify/parse
 -->
 
 ---
@@ -1009,59 +948,41 @@ Nur Strings → JSON.stringify/parse
 function Button() {
     const [count, setCount] = useState(0);
     return <button onClick={() => setCount(count + 1)}>
-        Klicks: {count}
+        Clicks: {count}
     </button>;
 }
 ```
 
-**Vue.js** (Evan You)
+**Weitere:** Vue.js, Svelte, Angular
-```vue
-<template>
-    <button @click="count++">Klicks: {{ count }}</button>
-</template>
-<script setup>
-import { ref } from 'vue';
-const count = ref(0);
-</script>
-```
 
 <!--
-Frameworks für größere Apps
+Frameworks für größere Apps, Komponenten-basiert
-Komponenten-basiert
-State Management eingebaut
 -->
 
 ---
 
+<!-- _class: "" -->
+
 # Ressourcen zum Weiterlernen
 
-**Dokumentation:**
+- **MDN Web Docs:** https://developer.mozilla.org/de/
-- MDN Web Docs: https://developer.mozilla.org/de/
+- **freeCodeCamp:** https://freecodecamp.org
+- **The Odin Project:** https://theodinproject.com
 
-**Interaktiv lernen:**
+**Interaktiv:**
-- HTML: https://nextlevelshit.github.io/html-over-js/
+- https://codescripsi.es/
-- CSS: https://codecrispi.es/
-- JS Visualisierung: https://nextlevelshit.github.io/web-engineering-mandala/
-
-**Kurse:**
-- freeCodeCamp: https://freecodecamp.org
-- The Odin Project: https://theodinproject.com
 
 ---
 
+<!-- _class: "" -->
+
 # Tools für die Praxis
 
-**Editoren:**
+**Editoren:** VS Code (empfohlen), WebStorm, Neovim
-- VS Code (empfohlen)
-- WebStorm (JetBrains)
-- Neovim (für Terminal-Fans)
 
-**Online-Editoren:**
+**Online:** CodePen, StackBlitz
-- CodePen: https://codepen.io
-- StackBlitz: https://stackblitz.com
 
-**Versionskontrolle:**
+**Versionskontrolle:** Git + GitHub/GitLab
-- Git + GitHub/GitLab
 
 ---
 
@@ -1073,38 +994,49 @@ State Management eingebaut
 
 # Was ihr gelernt habt
 
-**Tag 1:**
+**Termin 1:** Geschichte, Von-Neumann, HTML
+**Termin 2:** Netzwerke, DNS, HTTP, CSS
+**Termin 3:** JavaScript, DOM, Events
+
+<!--
+Termin 1:
 - Geschichte der Informatik (Hollerith → Internet)
 - Von-Neumann-Architektur
 - HTML-Grundlagen
 
-**Tag 2:**
+Termin 2:
 - Netzwerke, DNS, HTTP
 - CSS: Selektoren, Box-Modell, Flexbox
 
-**Tag 3:**
+Termin 3:
 - JavaScript: Variablen, Funktionen, Schleifen
 - DOM-Manipulation
 - Events & Interaktivität
+-->
 
 ---
 
 # Ihr könnt jetzt...
 
-✅ Den historischen Kontext von IT verstehen
+- Den historischen Kontext von IT verstehen
-✅ Erklären wie das Internet funktioniert
+- Erklären wie das Internet funktioniert
-✅ HTML-Seiten strukturieren
+- HTML-Seiten strukturieren
-✅ CSS für Layout und Design nutzen
+- CSS für Layout und Design nutzen
-✅ JavaScript für Interaktivität einsetzen
+- JavaScript für Interaktivität einsetzen
-✅ **Mit EntwicklerInnen auf Augenhöhe sprechen!**
+- **Mit EntwicklerInnen auf Augenhöhe sprechen!**
 
 ---
 
-# Feedback
+# Feedback – Eure Meinung zählt!
 
-**Was hat gut funktioniert?**
+Euer ehrliches Feedback hilft mir, den Kurs zu verbessern.
-**Was könnte besser sein?**
+**Es gibt keine falschen Antworten!**
-**Welche Themen wünscht ihr euch für die Zukunft?**
+
+- Was hat gut funktioniert?
+- Was könnte besser sein?
+- Welche Themen interessieren euch noch?
+
+*Feedback gerne auch anonym per E-Mail an mail@librete.ch*
 
 ---
 
@@ -1112,12 +1044,11 @@ State Management eingebaut
 
 # Danke!
 
-**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
+**Kontakt:** mail@librete.ch
-**Repository:** git.librete.ch/hdm/223015b
 
 **Ressourcen:**
 - https://nextlevelshit.github.io/html-over-js/
-- https://codecrispi.es/
+- https://codescripsi.es/
 - https://nextlevelshit.github.io/web-engineering-mandala/
 
 ---