improve dev setup slides and add hex visualizations

- split windows wsl setup into 2 slides with admin powershell instructions
- clarify that ubuntu runs as app inside windows
- fix all editor links to show https://
- add hex lookup table and 8bit character images

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

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

@@ -9,19 +9,47 @@ title: "Termin 1: Geschichte, Grundlagen & HTML"
 ---
 
 <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/background-termin-1.png)
+.2
+![bg fit opacity:0.2](./assets/background-termin-1.png)
 
 # Grundlagen IT- und Internettechnik
 
@@ -31,6 +59,8 @@ Hochschule der Medien Stuttgart
 
 **Wintersemester 2025/26**
 
+[https://git.librete.ch/hdm/223015c](https://git.librete.ch/hdm/223015c)
+
 ---
 
 <!-- _class: lead -->
@@ -633,6 +663,20 @@ CSS-Farben nutzen Hex
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/hex-dec-lookup-table.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/8bit-P-character.png)
+
+---
+
 # Speicheradressen
 
 **64-Bit-System:**
@@ -755,12 +799,12 @@ a = anchor (Anker)
 - Speichern als `index.html` → Im Browser öffnen
 
 **Option 2: VS Code** (empfohlen)
-- code.visualstudio.com
+- [https://code.visualstudio.com](https://code.visualstudio.com)
 - Extension: "Live Server"
 
 **Option 3: Online-Editoren**
-- stackblitz.com
-- codepen.io
+- [https://stackblitz.com](https://stackblitz.com)
+- [https://codepen.io](https://codepen.io)
 
 <!--
 Erstmal ohne IDE starten!
@@ -769,6 +813,103 @@ Verstehen: HTML ist nur Text
 
 ---
 
+# Terminal & Paketmanager
+
+**Warum brauchen wir das?**
+- Professionelle Webentwicklung läuft über die Kommandozeile
+- Tools wie `git`, `node`, `npm` werden später benötigt
+- Bash-Skripte automatisieren wiederkehrende Aufgaben
+
+**Je nach Betriebssystem:**
+
+| macOS | Windows |
+|-------|---------|
+| Terminal ist vorinstalliert | **WSL** installieren |
+| **Homebrew** als Paketmanager | Ubuntu-Terminal nutzen |
+
+<!--
+Heute nur Einrichtung
+Später: git, node.js, npm
+Bash = Standard-Shell für Entwickler
+-->
+
+---
+
+# macOS: Homebrew installieren
+
+**Terminal öffnen:** Spotlight → "Terminal"
+
+**Homebrew installieren:**
+```bash
+/bin/bash -c "$(curl -fsSL https://homebrew.sh/install.sh)"
+```
+
+**Danach verfügbar:**
+```bash
+brew install git        # Versionskontrolle
+brew install node       # JavaScript-Runtime
+brew install --cask visual-studio-code
+```
+
+**Homebrew** = Der fehlende Paketmanager für macOS
+https://brew.sh
+
+<!--
+Einzeiler kopieren, im Terminal einfügen
+Passwort eingeben
+Dauert 2-5 Minuten
+-->
+
+---
+
+# Windows: WSL installieren (1/2)
+
+**PowerShell als Administrator öffnen:**
+
+1. `Windows-Taste` drücken
+2. `powershell` eintippen
+3. Rechtsklick → **"Als Administrator ausführen"**
+   *(oder: Rechts auf "Als Administrator ausführen" klicken)*
+
+**Im PowerShell-Fenster eingeben:**
+```powershell
+wsl --install
+```
+
+**Danach: Neustart erforderlich!**
+
+<!--
+WSL = Windows Subsystem for Linux
+Echtes Linux im Windows
+Alle Linux-Tools verfügbar
+-->
+
+---
+
+# Windows: WSL einrichten (2/2)
+
+**Nach dem Neustart:** Ubuntu wird als App in Windows installiert
+→ Ubuntu-Terminal öffnet sich zur Einrichtung
+→ Username + Passwort festlegen (Passwort wird nicht angezeigt!)
+
+**Im Ubuntu-Terminal:**
+```bash
+sudo apt update
+sudo apt install git nodejs npm
+```
+
+**VS Code installieren:** [https://code.visualstudio.com](https://code.visualstudio.com)
+→ Extension **"WSL"** installieren
+→ Danach: `code .` öffnet VS Code aus Ubuntu heraus
+
+<!--
+Passwort-Eingabe: Cursor bewegt sich nicht, einfach tippen
+sudo = Super User DO (Admin-Rechte)
+VS Code verbindet sich automatisch mit WSL
+-->
+
+---
+
 # Hands-On: Erste HTML-Seite (45 Min)
 
 **Aufgabe:**

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

@@ -9,19 +9,47 @@ title: "Termin 2: Netzwerke, Protokolle & CSS"
 ---
 
 <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/background-termin-2.png)
+![bg fit opacity:0.2](./assets/background-termin-2.png)
 
 # Grundlagen IT- und Internettechnik
 

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

@@ -9,19 +9,47 @@ 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/background-termin-3.png)
+![bg fit opacity:0.2](./assets/background-termin-3.png)
 
 # Grundlagen IT- und Internettechnik