add claude code settings and skills

- rename Projekt slides to Übung
- condense overflowing slides
- remove JS validation (not fitting lecture context)
- remove emojis from summary
- add speaker notes for condensed content

.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)

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"`
-

slides/2025-12-20-termin-1-geschichte-grundlagen-html.md

@@ -5,7 +5,7 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik"
 footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: "Tag 1: Geschichte, Grundlagen & HTML"
+title: "Termin 1: Geschichte, Grundlagen & HTML"
 ---
 
 <style>
@@ -19,9 +19,9 @@ h2 {
 
 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _footer: '' -->
+<!-- _backgroundColor: black -->
 
-![bg fit opacity:0.4](./assets/digital-landscape.png)
+![bg fit opacity:0.4](./assets/background-termin-1.png)
 
 # Grundlagen IT- und Internettechnik
 
@@ -35,7 +35,7 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Tag 1 – 20.12.2025
+# Termin 1 – 20.12.2025
 ## Geschichte, Grundlagen & HTML
 
 ---
@@ -47,7 +47,7 @@ Hochschule der Medien Stuttgart
 - Softwareentwickler & IT-Berater
 - Schwerpunkte: Cloud, AI, Web-Technologien, Systemarchitektur, Open Source
 - Hintergrund: Philosophie & Informatik
-- Kontakt: michael.czechowski@lehre.dhbw-stuttgart.de
+- Kontakt: mail@librete.ch
 
 <!--
 Kurze Vorstellung
@@ -107,61 +107,10 @@ MedienStudentInnen, nicht InformatikerInnen
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg](./assets/torches-of-freedom.jpg)
+![bg fit](./assets/hollerith-machine-2.jpg)
 
 <!--
-Torches of Freedom, 1929
+Hollerith-Lochkartenmaschine, ca. 1910
-Edward Bernays, Neffe von Sigmund Freud
--->
-
----
-
-# Torches of Freedom (1929)
-
-**Edward Bernays** – Neffe von Sigmund Freud
-
-**Problem:** Frauen rauchen nicht in der Öffentlichkeit (Tabu)
-**Auftraggeber:** American Tobacco Company
-
-**Lösung:** Suffragetten-Marsch, Osterparade NYC
-"Torches of Freedom" – Zigaretten als Freiheitssymbol
-
-**Ergebnis:** Umsatz verdoppelt, Tabu gebrochen
-
-<!--
-Bernays gilt als "Vater der PR"
-Manipulation durch Medien und Symbolik
-Verbindung Psychologie + Massenmedien
-Warum erzähle ich das? → Technik formt Gesellschaft, Gesellschaft formt Technik
--->
-
----
-
-# Warum diese Geschichte?
-
-**Technik ist nie neutral.**
-
-- Lochkarten zählten Menschen... und sortieren sie
-- Computer berechneten Atombomben... und verbinden uns
-- Das Internet demokratisiert Wissen... und verbreitet Desinformation
-
-**MedienwirtschaftlerInnen** müssen verstehen:
-Technologie ist ein Werkzeug – **wofür** es genutzt wird, entscheiden Menschen.
-
-<!--
-Kritisches Denken über Technologie
-Medienkompetenz braucht technisches Verständnis
--->
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg](./assets/hollerith-machine.jpg)
-
-<!--
-Hollerith-Lochkartenmaschine, ca. 1890
 US Census Bureau
 -->
 
@@ -186,6 +135,30 @@ Eine Karte = ein Datensatz (eine Person)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/hollerith-machine.jpg)
+
+<!--
+Hollerith-Lochkartenmaschine, ca. 1908
+US Census Bureau
+-->
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/hollerith-machine-3.jpg)
+
+<!--
+Hollerith-Lochkartenmaschine, ca. 1940
+US Census Bureau
+-->
+
+---
+
 # Die Geburt von IBM
 
 **1896:** Hollerith gründet "Tabulating Machine Company"
@@ -208,7 +181,7 @@ Heute: IBM als Cloud- und AI-Unternehmen (Watson, Red Hat)
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg](./assets/ibm-nazi-hollerith.jpg)
+![bg fit](./assets/dehomag-hollerith.webp)
 
 <!--
 Hollerith-Maschinen im Dritten Reich
@@ -265,7 +238,7 @@ Verantwortung von TechnikerInnen und MedienarbeiterInnen
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg fit opacity:0.4](./assets/oppenheimer-poster.jpg)
+![bg fit opacity:0.4](./assets/oppenheimer.png)
 
 <!--
 Oppenheimer-Filmplakat (2023)
@@ -294,7 +267,7 @@ Von Neumann kam 1943 als Berater
 
 ---
 
-![bg right:40%](./assets/john-von-neumann.jpg)
+![bg right:40%](./assets/john-von-neumann.png)
 
 # John von Neumann (1903–1957)
 
@@ -342,7 +315,7 @@ ENIAC-Projekt in Philadelphia sollte helfen
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg](./assets/eniac.jpg)
+![bg](./assets/eniac.avif)
 
 <!--
 ENIAC (1945)
@@ -396,7 +369,7 @@ Daher: "Von-Neumann-Architektur"
 
 ```
 ┌─────────────────────────────────────────┐
-│                  CPU                     │
+│                  CPU                    │
 │  ┌─────────────┐    ┌─────────────────┐ │
 │  │ Rechenwerk  │    │   Steuerwerk    │ │
 │  │    (ALU)    │    │ (Control Unit)  │ │
@@ -445,13 +418,16 @@ Speicher enthält beides: Was zu tun ist (Programm) + Womit (Daten)
 - Kein Multitasking
 - Keine Updates
 
-**JEDES digitale Gerät** basiert auf diesem Prinzip:
+**Die meisten Computer** basieren auf diesem Prinzip:
-Laptop, Smartphone, Router, Smartwatch, Auto-Computer...
+Laptop, Smartphone, Server, Spielkonsole...
+
+**Ausnahme:** Mikrocontroller & DSPs nutzen oft die **Harvard-Architektur**
+(separate Speicher für Code und Daten → schneller für Echtzeitanwendungen)
 
 <!--
-Alternativen existieren (Harvard-Architektur für Embedded)
+Harvard-Architektur: AVR, PIC, viele ARM-Prozessoren
-Aber: Grundkonzept gilt überall
+Modified Harvard in modernen CPUs (separate Caches)
-Deshalb wichtig zu verstehen
+Für Medienwirtschaft: Von-Neumann-Konzept reicht
 -->
 
 ---
@@ -485,7 +461,7 @@ Paul Baran (RAND Corp): Packet Switching
 | Jahr | Meilenstein |
 |------|-------------|
 | **1966** | ARPANET-Projekt startet |
-| **1969** | Erste Verbindung: UCLA ↔ Stanford |
+| **1969** | Erste Verbindung: UCLA <-> Stanford |
 | **1974** | TCP/IP-Protokoll entwickelt |
 | **1983** | ARPANET wechselt zu TCP/IP |
 | **1989** | Tim Berners-Lee erfindet das WWW |
@@ -774,23 +750,21 @@ a = anchor (Anker)
 
 # Hands-On: Werkzeuge einrichten
 
-**Option 1: Ganz einfach**
+**Option 1: Texteditor + Browser**
-- Texteditor (Notepad, TextEdit, gedit)
+- Notepad, TextEdit oder gedit
-- Datei speichern als `index.html`
+- Speichern als `index.html` → Im Browser öffnen
-- Im Browser öffnen (Firefox empfohlen)
 
-**Option 2: Komfortabler**
+**Option 2: VS Code** (empfohlen)
-- VS Code (kostenlos): https://code.visualstudio.com
+- code.visualstudio.com
 - Extension: "Live Server"
 
-**Option 3: Ohne Installation**
+**Option 3: Online-Editoren**
-- https://stackblitz.com
+- stackblitz.com
-- https://codepen.io
+- codepen.io
 
 <!--
 Erstmal ohne IDE starten!
 Verstehen: HTML ist nur Text
-Browser interpretiert den Text
 -->
 
 ---
@@ -954,17 +928,15 @@ Antworten sammeln: Brief, Telefon, Fax, Funk...
 
 # Kommunikationsarten
 
-| Kategorie | Denkweise |
+| Kategorie | Beispiel |
-|-----------|-----------|
+|-----------|----------|
-| **Synchron** | "Ich sende und warte auf Antwort" |
+| **Synchron** | Telefonat, Video-Call |
-| **Asynchron** | "Ich sende – du antwortest später" |
+| **Asynchron** | E-Mail, Brief, SMS |
-| **Verbindungsorientiert** | "Wir bauen erst eine Leitung auf" |
+| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
-| **Verbindungslos** | "Ich schicke Pakete los – jedes für sich" |
+| **Verbindungslos** | Brief, Postkarte |
 
 <!--
-Telefon = synchron + verbindungsorientiert
+Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
-Brief = asynchron + verbindungslos
-Internet nutzt beides!
 -->
 
 ---
@@ -1127,22 +1099,13 @@ HTTPS = HTTP + TLS-Verschlüsselung
 
 # Hands-On: Netzwerk erkunden (20 Min)
 
-**Öffnet das Terminal:**
+**Terminal öffnen:** PowerShell (Win) / Terminal (Mac/Linux)
-- Windows: PowerShell
-- Mac/Linux: Terminal
 
-**Befehle ausprobieren:**
 ```bash
-# Eure IP-Adresse
+ipconfig          # IP-Adresse (Win)
-ipconfig    # Windows
+ifconfig          # IP-Adresse (Mac/Linux)
-ifconfig    # Mac/Linux
+ping google.de    # Erreichbarkeit testen
-
+tracert google.de # Weg zum Server (Win)
-# Ping (erreichbar?)
-ping google.de
-
-# Weg zum Server
-tracert google.de    # Windows
-traceroute google.de # Mac/Linux
 ```
 
 ---
@@ -1231,15 +1194,11 @@ Validierung kostenlos
 
 **Baut eine "Über mich"-Seite mit:**
 
-1. **Semantischem Grundgerüst** (header, nav, main, footer)
+1. Semantisches Grundgerüst (header, nav, main, footer)
-2. **Navigation** mit Links zu Abschnitten
+2. Navigation mit Links zu Abschnitten
-3. **Über-mich-Abschnitt** mit Bild
+3. Über-mich-Abschnitt mit Bild
-4. **Hobbies-Liste**
+4. Hobbies-Liste
-5. **Kontaktformular** mit:
+5. Kontaktformular (Name, E-Mail, Nachricht, Button)
-   - Name (required)
-   - E-Mail (type="email")
-   - Nachricht (textarea)
-   - Absenden-Button
 
 **Ziel:** Vollständige, valide HTML-Seite
 
@@ -1266,12 +1225,11 @@ Validierung kostenlos
 
 **Nächster Termin:** 10.01.2026 – CSS & Netzwerke
 
-**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
+**Kontakt:** mail@librete.ch
-**Repository:** git.librete.ch/hdm/223015b
 
 ---
 
-# Zusammenfassung Tag 1
+# Zusammenfassung Termin 1
 
 **Geschichte:**
 - Hollerith → IBM → Nazi-Deutschland → Verantwortung
@@ -1283,10 +1241,14 @@ Validierung kostenlos
 - Von-Neumann-Architektur
 - IP-Adressen, Ports, HTTP
 
-**Praxis:**
+---
-- HTML-Grundstruktur
+
-- Semantische Tags
+# Zusammenfassung Termin 1 (Praxis)
-- Native HTML-Features
+
+**Was wir gemacht haben:**
+- HTML-Grundstruktur erstellt
+- Semantische Tags angewendet
+- Native HTML-Features genutzt
 
 ---
 

slides/2026-01-10-termin-2-netzwerke-protokolle-css.md

@@ -5,7 +5,7 @@ paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik"
 footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
-title: "Tag 2: Netzwerke, Protokolle & CSS"
+title: "Termin 2: Netzwerke, Protokolle & CSS"
 ---
 
 <style>
@@ -19,9 +19,9 @@ h2 {
 
 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _footer: '' -->
+<!-- _backgroundColor: black -->
 
-![bg fit opacity:0.4](./assets/network-cables.png)
+![bg fit opacity:0.4](./assets/background-termin-2.png)
 
 # Grundlagen IT- und Internettechnik
 
@@ -35,12 +35,12 @@ Hochschule der Medien Stuttgart
 
 <!-- _class: lead -->
 
-# Tag 2 – 10.01.2026
+# Termin 2 – 10.01.2026
 ## Netzwerke, Protokolle & CSS
 
 ---
 
-# Rückblick Tag 1
+# Rückblick Termin 1
 
 **Was wir gelernt haben:**
 
@@ -285,7 +285,7 @@ Ports = "Türnummern" auf Server
 # Das Problem
 
 **Menschen:** `www.hdm-stuttgart.de`
-**Computer:** `141.62.1.53`
+**Computer:** `212.132.79.37`
 
 **DNS** = Domain Name System
 → Übersetzt Namen in IP-Adressen
@@ -327,9 +327,9 @@ FQDN = Fully Qualified Domain Name
 1. Browser fragt lokalen DNS-Resolver
 2. Resolver fragt Root-Server → ".de ist bei..."
 3. Resolver fragt .de-Server → "hdm-stuttgart bei..."
-4. Resolver fragt hdm-Server → "www = 141.62.1.53"
+4. Resolver fragt hdm-Server → "www = 212.132.79.37"
 5. Resolver cached Antwort
-6. Browser verbindet zu 141.62.1.53
+6. Browser verbindet zu 212.132.79.37
 ```
 
 **Caching:** Antworten werden gespeichert
@@ -347,7 +347,7 @@ TTL = Time To Live (wie lange cachen)
 
 | Typ | Bedeutung | Beispiel |
 |-----|-----------|----------|
-| **A** | IPv4-Adresse | `www → 141.62.1.53` |
+| **A** | IPv4-Adresse | `www → 212.132.79.37` |
 | **AAAA** | IPv6-Adresse | `www → 2001:db8::1` |
 | **CNAME** | Alias | `blog → www.example.com` |
 | **MX** | Mail-Server | `@ → mail.example.com` |
@@ -427,27 +427,15 @@ Body kommt nach leerem Zeile (bei POST)
 HTTP/1.1 200 OK
 Content-Type: text/html; charset=UTF-8
 Content-Length: 1234
-Date: Fri, 10 Jan 2026 10:00:00 GMT
 
 <!DOCTYPE html>
-<html>
+<html>...</html>
-...
-</html>
 ```
 
-**Status-Codes:**
+**Status-Codes:** 2xx Erfolg · 3xx Umleitung · 4xx Client-Fehler · 5xx Server-Fehler
-
-| Code | Bedeutung |
-|------|-----------|
-| **2xx** | Erfolg (200 OK, 201 Created) |
-| **3xx** | Umleitung (301 Moved, 302 Found) |
-| **4xx** | Client-Fehler (404 Not Found, 403 Forbidden) |
-| **5xx** | Server-Fehler (500 Internal Error) |
 
 <!--
-Status-Codes merken!
+200 OK, 404 Not Found, 500 Internal Error
-404 = Seite nicht gefunden
-500 = Server-Problem
 -->
 
 ---
@@ -475,20 +463,14 @@ POST = nicht idempotent
 
 # Hands-On: HTTP beobachten (20 Min)
 
-**Browser DevTools öffnen:**
+**DevTools öffnen:** `F12` (Win/Linux) · `Cmd+Option+I` (Mac)
-- Windows/Linux: `F12` oder `Strg+Shift+I`
-- Mac: `Cmd+Option+I`
 
 **Tab "Netzwerk" (Network):**
+1. Beliebige Webseite öffnen
+2. Requests beobachten
+3. Auf Request klicken → Headers & Response analysieren
 
-1. Öffnet eine beliebige Webseite
+**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...)
-2. Beobachtet die Requests
-3. Klickt auf einen Request
-4. Analysiert Headers und Response
-
-**Fragen:**
-- Wie viele Requests für eine Seite?
-- Welche Dateitypen werden geladen?
 
 ---
 
@@ -531,30 +513,23 @@ Separation of Concerns
 
 # CSS einbinden
 
-**Option 1: Externe Datei (empfohlen!)**
+**Option 1: Externe Datei** (empfohlen!)
 ```html
-<head>
+<link rel="stylesheet" href="style.css">
-    <link rel="stylesheet" href="style.css">
-</head>
 ```
 
-**Option 2: Im `<style>`-Tag**
+**Option 2: Style-Tag**
 ```html
-<head>
+<style>p { color: blue; }</style>
-    <style>
-        p { color: blue; }
-    </style>
-</head>
 ```
 
-**Option 3: Inline (vermeiden!)**
+**Option 3: Inline** (vermeiden!)
 ```html
-<p style="color: blue;">Text</p>
+<p style="color: blue;">...</p>
 ```
 
 <!--
 Externe Datei = wiederverwendbar, cachebar
-Inline nur für Debugging/Ausnahmen
 -->
 
 ---
@@ -830,19 +805,14 @@ vw/vh = Viewport (sichtbarer Bereich)
 
 **Erstellt `style.css` für eure HTML-Seite:**
 
-1. Verlinkt die CSS-Datei im `<head>`
+1. CSS-Datei im `<head>` verlinken
-2. Setzt eine Grundschrift:
+2. Grundschrift setzen (`font-family`, `line-height`, `color`)
-   ```css
+3. Überschriften, Links, Listen stylen
-   body {
+4. Mit Farben und Abständen experimentieren
-       font-family: system-ui, sans-serif;
-       line-height: 1.6;
-       color: #333;
-   }
-   ```
-3. Stylt Überschriften, Links, Listen
-4. Experimentiert mit Farben und Abständen
 
-**Ressource:** https://codecrispi.es/
+**Ressource:** https://codescripsi.es/
+- **Basics:** Alle machen
+- **Advanced:** Wer möchte
 
 ---
 
@@ -1037,24 +1007,17 @@ Oder gleichmäßig verteilt
 
 ```css
 /* Zustände */
-a:hover { color: red; }        /* Maus drüber */
+a:hover { color: red; }
-a:active { color: darkred; }   /* Beim Klicken */
+a:visited { color: purple; }
-a:visited { color: purple; }   /* Bereits besucht */
-
-/* Formular */
 input:focus { border-color: blue; }
-input:disabled { opacity: 0.5; }
 
 /* Struktur */
 li:first-child { font-weight: bold; }
-li:last-child { border: none; }
 li:nth-child(odd) { background: #eee; }
 ```
 
 <!--
-Pseudo-Klassen = Zustände
+Pseudo-Klassen = Zustände, kein JavaScript nötig!
-Kein JavaScript nötig!
-nth-child für Zebra-Streifen
 -->
 
 ---
@@ -1062,26 +1025,18 @@ nth-child für Zebra-Streifen
 # Pseudo-Elemente
 
 ```css
-/* Vor dem Inhalt */
 .required::before {
     content: "* ";
     color: red;
 }
 
-/* Nach dem Inhalt */
-blockquote::after {
-    content: " – Unbekannt";
-    font-style: italic;
-}
-
-/* Erste Zeile/Buchstabe */
-p::first-line { font-weight: bold; }
 p::first-letter { font-size: 2em; }
+p::first-line { font-weight: bold; }
 ```
 
+**Unterschied:** `:` = Pseudo-Klasse · `::` = Pseudo-Element
+
 <!--
-:: = Pseudo-Element
-: = Pseudo-Klasse
 content nur bei ::before/::after
 -->
 
@@ -1089,34 +1044,22 @@ content nur bei ::before/::after
 
 # Responsive Design
 
-**Media Queries: CSS je nach Bildschirmgröße**
+**Media Queries:** CSS je nach Bildschirmgröße
 
 ```css
-/* Standard (Mobile First) */
+/* Mobile First: Standard */
-.container {
+.container { padding: 1rem; }
-    padding: 1rem;
-}
 
-/* Ab 768px Breite (Tablet) */
+/* Ab 768px (Tablet) */
 @media (min-width: 768px) {
-    .container {
+    .container { padding: 2rem; max-width: 720px; }
-        padding: 2rem;
-        max-width: 720px;
-    }
-}
-
-/* Ab 1024px Breite (Desktop) */
-@media (min-width: 1024px) {
-    .container {
-        max-width: 960px;
-    }
 }
 ```
 
+**Breakpoints:** 768px (Tablet) · 1024px (Desktop) · 1280px (Large)
+
 <!--
-Mobile First = Standard für klein
+Mobile First = Standard für klein, dann größere überschreiben
-Dann größere Screens überschreiben
-Breakpoints: 768px, 1024px, 1280px typisch
 -->
 
 ---
@@ -1352,7 +1295,7 @@ Variablen machen's einfach
 4. Mindestens ein Kontaktformular
 
 **Ressourcen:**
-- CSS lernen: https://codecrispi.es/
+- CSS lernen: https://codescripsi.es/
 - Flexbox: https://flexboxfroggy.com/
 - Grid: https://cssgridgarden.com/
 
@@ -1364,12 +1307,11 @@ Variablen machen's einfach
 
 **Nächster Termin:** 24.01.2026 – JavaScript
 
-**Kontakt:** michael.czechowski@lehre.dhbw-stuttgart.de
+**Kontakt:** mail@librete.ch
-**Repository:** git.librete.ch/hdm/223015b
 
 ---
 
-# Zusammenfassung Tag 2
+# Zusammenfassung Termin 2
 
 **Netzwerke:**
 - OSI-Modell (7 Schichten) vs. TCP/IP (4 Schichten)

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

@@ -5,7 +5,7 @@ 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>
@@ -19,9 +19,9 @@ h2 {
 
 <!-- _class: invert -->
 <!-- _header: '' -->
-<!-- _footer: '' -->
+<!-- _backgroundColor: black -->
 
-![bg fit opacity:0.4](./assets/javascript-code.png)
+![bg fit opacity:0.4](./assets/background-termin-3.png)
 
 # Grundlagen IT- und Internettechnik
 
@@ -35,15 +35,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 +169,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 +193,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 +220,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 +245,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 +303,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 +322,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 +349,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 +379,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 +397,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 +424,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 +767,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 +809,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 +834,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 +874,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 +897,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 +905,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 +920,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 +966,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 +1016,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/
 
 ---