add pdf download links to index page

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

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

@@ -22,19 +22,36 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
     }
     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;
-      margin-bottom: 1rem;
       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>
@@ -66,13 +83,23 @@ for html in $(ls "$BUILD_DIR"/2*.html 2>/dev/null | sort); do
   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
 

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

@@ -42,6 +42,12 @@ code {
 a {
   color: var(--color-highlight);
 }
+section.klausur {
+  background: #fce4ec !important;
+}
+section.klausur footer {
+  display: none;
+}
 </style>
 
 <!-- _class: invert -->
@@ -72,17 +78,15 @@ Hochschule der Medien Stuttgart
 
 **Was wir gelernt haben:**
 
-- Geschichte: Hollerith → IBM → Von Neumann → ARPANET
+- Geschichte: Lovelace -> Hollerith → IBM -> Turing → Von Neumann → ARPANET -> Kalifornische ForscherInnen
 - Von-Neumann-Architektur (5 Komponenten)
-- Bits, Bytes, Hexadezimal
+- Bits, Bytes, Hexadezimal (8Bits = 2 * 4Bits = 16 * 16 Hexadezimalzahlen)
-- HTML-Grundlagen & semantische Tags
 
-**Fragen? Probleme bei der Fleißaufgabe?**
+**Fragen? Unklarheiten?**
 
 <!--
 Kurze Wiederholung
 Fragen klären
-Wer hat die Fleißaufgabe gemacht?
 -->
 
 ---
@@ -90,15 +94,190 @@ Wer hat die Fleißaufgabe gemacht?
 # Heute
 
 **Vormittag:**
-- Netzwerke vertieft (OSI, TCP/IP)
+- Netzwerke (OSI, TCP/IP)
 - DNS: Wie funktionieren Domain-Namen?
-- HTTP im Detail
+- HTTP(S) im Detail
 
 **Nachmittag:**
 - CSS-Grundlagen
+- "Barrierefreiheit" (a11y, WCAG)
 - Selektoren & Spezifität
-- Layouts mit Flexbox
+- Hands-On: Styling
-- Hands-On: Eure Seite stylen
+
+---
+
+# Ressourcen zum Selbstlernen
+
+* Online Code-Editor: https://codepen.io/pen/
+* MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
+* HTML-Referenz: https://nextlevelshit.github.io/html-over-js/
+* CSS lernen: https://codescripsi.es/
+* Flexbox-Spiel: https://flexboxfroggy.com/
+* Grid-Spiel: https://cssgridgarden.com/
+
+---
+
+<!-- _class: lead -->
+
+# Teil 1: Rechner verbinden
+## Netzwerk-Grundlagen
+
+---
+
+# Warum Rechner verbinden?
+
+- Daten und Informationen teilen
+- Zusammenarbeiten & Kollaboration
+- Kommunizieren
+- Ressourcen teilen (Drucker, Speicher, andere Geräte)
+
+---
+
+# Kommunikationsarten
+
+| Kategorie | Beispiel |
+|-----------|----------|
+| **Synchron** | Telefonat, Video-Call |
+| **Asynchron** | E-Mail, Brief, SMS |
+| **Verbindungsorientiert** | Telefon (Leitung aufbauen) |
+| **Verbindungslos** | Brief, Postkarte |
+
+<!--
+Internet nutzt beides: TCP = verbindungsorientiert, UDP = verbindungslos
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# Das OSI-Modell
+
+**7 Schichten der Netzwerkkommunikation:**
+
+| Schicht | Name | Beispiel |
+|---------|------|----------|
+| 7 | Anwendung | HTTP, FTP, SMTP |
+| 6 | Darstellung | Verschlüsselung, Kompression |
+| 5 | Sitzung | Sessions |
+| 4 | Transport | TCP, UDP |
+| 3 | Vermittlung | IP, Routing |
+| 2 | Sicherung | Ethernet, MAC |
+| 1 | Bitübertragung | Kabel, WLAN |
+
+<!--
+OSI = Open Systems Interconnection
+ISO-Standard
+Theoretisches Modell
+TCP/IP ist die praktische Implementierung
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# TCP/IP: Die Praxis
+
+**Das Internet nutzt TCP/IP (4 Schichten):**
+
+| TCP/IP | Entspricht OSI | Protokolle |
+|--------|----------------|------------|
+| Anwendung | 5-7 | HTTP, DNS, SMTP |
+| Transport | 4 | TCP, UDP |
+| Internet | 3 | IP |
+| Netzzugang | 1-2 | Ethernet, WLAN |
+
+**TCP/IP = Transmission Control Protocol / Internet Protocol**
+
+<!--
+TCP/IP einfacher als OSI
+Praktisch gewachsen, nicht theoretisch geplant
+-->
+
+---
+
+# IP-Adressen
+
+**Jeder Rechner im Netzwerk braucht eine Adresse**
+
+**IPv4:** 4 Zahlen (0-255), Punkt-getrennt
+`192.168.1.1`
+
+**Problem:** 2⁸·2⁸·2⁸·2⁸ = 2³² = nur 4,3 Milliarden Adressen
+→ Reicht nicht für alle Geräte!
+
+**IPv6:** 128 Bit = 3,4 × 10³⁸ Adressen
+`2001:0db8:85a3:0000:0000:8a2e:0370:7334`
+
+<!--
+Eure IP: ipconfig (Win) / ifconfig (Mac/Linux)
+Private IPs: 192.168.x.x, 10.x.x.x
+Öffentliche IP: Router hat eine
+NAT = Network Address Translation
+-->
+
+---
+
+# Spezielle IP-Adressen
+
+| Adresse | Bedeutung |
+|---------|-----------|
+| `127.0.0.1` | **Localhost** – Ihr eigener Rechner |
+| `192.168.x.x` | Private Adressen (Heimnetz) |
+| `10.x.x.x` | Private Adressen (Firmen) |
+
+**Localhost = "Ich selbst"**
+→ Perfekt für Web-Entwicklung!
+
+<!--
+Localhost für lokale Entwicklung
+Private IPs werden nicht im Internet geroutet
+Router macht NAT (Network Address Translation)
+-->
+
+---
+
+# Ports: Die Türnummern
+
+**IP-Adresse = Hausnummer**
+**Port = Wohnungstür**
+
+| Port | Dienst |
+|------|--------|
+| 80 | HTTP (Web) |
+| 443 | HTTPS (Web, verschlüsselt) |
+| 22 | SSH (Terminal) |
+| 25 | SMTP (E-Mail senden) |
+
+**Beispiel:** `192.168.1.1:8080`
+(IP-Adresse : Port)
+
+<!--
+Ein Server kann viele Dienste anbieten
+Ports 0-1023 = "well-known" (reserviert)
+Ports 1024-65535 = frei nutzbar
+-->
+
+---
+
+# Routing: Der Weg durchs Netz
+
+**Router = Postamt**
+- Entscheidet, wohin Pakete gehen
+- Findet besten Weg
+- Pakete können verschiedene Wege nehmen!
+
+**Traceroute:** Zeigt den Weg
+```bash
+traceroute google.de     # Mac/Linux
+tracert google.de        # Windows
+```
+
+<!--
+Live-Demo: traceroute zu google.de
+Zeigt alle Router auf dem Weg
+Pakete können verschiedene Wege nehmen
+Adaptives Routing bei Auslastung
+-->
 
 ---
 
@@ -111,17 +290,17 @@ Wer hat die Fleißaufgabe gemacht?
 
 # Wiederholung: OSI-Modell
 
-**Merksatz:** "**A**lle **d**eutschen **S**tudenten **t**rinken **v**erschiedene **S**orten **B**ier"
+**Merksatz:** "**A**lle **d**eutschen **S**tudierenden **t**rinken **v**erschiedene **S**orten **B**ier/Brause"
 
 | Schicht | Name | Merksatz |
 |---------|------|----------|
 | 7 | **A**nwendung | **A**lle |
 | 6 | **D**arstellung | **d**eutschen |
-| 5 | **S**itzung | **S**tudenten |
+| 5 | **S**itzung | **S**tudierenden |
 | 4 | **T**ransport | **t**rinken |
 | 3 | **V**ermittlung | **v**erschiedene |
 | 2 | **S**icherung | **S**orten |
-| 1 | **B**itübertragung | **B**ier |
+| 1 | **B**itübertragung | **B**ier/Brause |
 
 <!--
 Von oben nach unten: 7 bis 1
@@ -198,9 +377,9 @@ Overhead reduziert reale Geschwindigkeit
 **Ethernet-Frame:**
 
 ```
-┌────────┬────────┬──────┬─────────┬─────┐
+┌────────┬────────┬────────┬────────┬─────┐
 │Präambel│Ziel-MAC│Src-MAC │ Daten  │ FCS │
-└────────┴────────┴──────┴─────────┴─────┘
+└────────┴────────┴────────┴────────┴─────┘
 ```
 
 <!--
@@ -284,6 +463,8 @@ ACK bestätigt Empfang
 
 ---
 
+<!-- _class: klausur -->
+
 # Schicht 7: Anwendung
 
 **Protokolle, die wir täglich nutzen:**
@@ -328,10 +509,11 @@ DNS macht Internet benutzbar
 # DNS-Hierarchie
 
 ```
-                    . (Root)
+                  (Root)
+                     . 
                    / | \
                  /   |   \
-               .de .com .org
+               .de .org .com
                /           \
          hdm-stuttgart   google
               |            |
@@ -390,34 +572,6 @@ MX = Mail Exchange
 
 ---
 
-# Hands-On: DNS erkunden (15 Min)
-
-**Terminal öffnen:**
-
-```bash
-# DNS-Auflösung
-nslookup hdm-stuttgart.de
-nslookup google.com
-
-# Detaillierter (Linux/Mac)
-dig hdm-stuttgart.de
-dig google.com MX
-
-# Weg verfolgen
-traceroute hdm-stuttgart.de   # Mac/Linux
-tracert hdm-stuttgart.de      # Windows
-```
-
-**Online-Tool:** https://toolbox.googleapps.com/apps/dig/
-
-<!--
-nslookup auf allen Systemen verfügbar
-dig zeigt mehr Details
-Verschiedene Record-Typen ausprobieren
--->
-
----
-
 <!-- _class: lead -->
 
 # HTTP im Detail
@@ -489,26 +643,6 @@ POST = nicht idempotent
 
 ---
 
-# Hands-On: HTTP beobachten (20 Min)
-
-**DevTools öffnen:** `F12` (Win/Linux) · `Cmd+Option+I` (Mac)
-
-**Tab "Netzwerk" (Network):**
-1. Beliebige Webseite öffnen
-2. Requests beobachten
-3. Auf Request klicken → Headers & Response analysieren
-
-**Beobachtet:** Anzahl Requests, Dateitypen (JS, CSS, Bilder...)
-
----
-
-<!-- _class: lead -->
-
-# Pause
-## 15 Minuten
-
----
-
 <!-- _class: lead -->
 
 # Teil 2: CSS
@@ -551,13 +685,14 @@ Separation of Concerns
 <style>p { color: blue; }</style>
 ```
 
-**Option 3: Inline** (vermeiden!)
+**Option 3: Inline als HTML-Attribute** (vermeiden!)
 ```html
 <p style="color: blue;">...</p>
 ```
 
 <!--
 Externe Datei = wiederverwendbar, cachebar
+Option 3 vermeiden aufgrund der hohen Spezifiät (sog. Code Smell)
 -->
 
 ---
@@ -669,7 +804,7 @@ IDs für JavaScript/Anker-Links
 # Selektoren: Kombinationen
 
 ```css
-/* Nachfahre (irgendwo drin) */
+/* Nachfahre (egal wie tief verschachtelt) */
 article p {
     line-height: 1.6;
 }
@@ -829,31 +964,214 @@ vw/vh = Viewport (sichtbarer Bereich)
 
 ---
 
-# Hands-On: Erste Styles (30 Min)
+<!-- _class: lead -->
 
-**Erstellt `style.css` für eure HTML-Seite:**
+# "Barrierefreiheit"
+## a11y – Accessibility
 
-1. CSS-Datei im `<head>` verlinken
+---
-2. Grundschrift setzen (`font-family`, `line-height`, `color`)
-3. Überschriften, Links, Listen stylen
-4. Mit Farben und Abständen experimentieren
 
-**Ressource:** https://codescripsi.es/
+<!-- _class: klausur -->
-- **Basics:** Alle machen
+
-- **Advanced:** Wer möchte
+# Wie nutzen Menschen das Web?
+
+| Eingabe | Nutzungsweise |
+|---------|---------------|
+| **Maus** | Klicken, Scrollen |
+| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
+| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
+| **Sprachsteuerung** | "Klicke auf Anmelden" |
+| **Augensteuerung** | Eye-Tracking |
+| **Switch-Geräte** | Ein-/Aus-Schalter |
+
+→ **Nicht alle nutzen Maus + Bildschirm!**
+
+<!--
+a11y = Accessibility (a + 11 Buchstaben + y)
+15% der Weltbevölkerung haben eine Behinderung
+Temporäre Einschränkungen: gebrochener Arm, helle Sonne
+Situative Einschränkungen: laute Umgebung, Baby auf dem Arm
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# Warum "Barrierefreiheit"?
+
+**Rechtlich:**
+- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
+- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
+
+**Ethisch:**
+- Teilhabe für alle Menschen
+- Digitale Inklusion
+
+**Praktisch:**
+- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
+- Größerer Markt (~15% der Bevölkerung)
+
+<!--
+European Accessibility Act: gilt jetzt für private Unternehmen
+"Barrierefreiheit" = gutes Design für alle
+Curb-Cut-Effekt: Rampen helfen auch Kinderwagen, Koffern...
+-->
+
+---
+
+# WCAG: Der Standard
+
+**W**eb **C**ontent **A**ccessibility **G**uidelines
+
+**4 Prinzipien (POUR):**
+
+| Prinzip | Bedeutung |
+|---------|-----------|
+| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
+| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
+| **Understandable** | Verständlich – Inhalte müssen klar sein |
+| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
+
+<!--
+WCAG vom W3C (World Wide Web Consortium)
+Aktuelle Version: WCAG 2.2 (2023)
+Level: A (minimal), AA (Standard), AAA (optimal)
+Gesetzlich meist Level AA gefordert
+-->
+
+---
+
+# Perceivable: Wahrnehmbar
+
+**Textalternativen für Nicht-Text:**
+```html
+<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
+```
+
+**Kontrast:** Mindestens 4.5:1 für Text
+
+**Untertitel:** Videos brauchen Captions
+
+**Responsive:** Inhalte bei 200% Zoom nutzbar
+
+<!--
+Leeres alt="" für dekorative Bilder
+Contrast-Checker: WebAIM Contrast Checker
+Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
+-->
+
+---
+
+# Operable: Bedienbar
+
+**Tastaturzugänglich:**
+```css
+/* Fokus-Indikator NIE entfernen! */
+:focus {
+    outline: 2px solid blue;
+    outline-offset: 2px;
+}
+
+/* Wenn custom styling: */
+button:focus-visible {
+    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+}
+```
+
+**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
+
+**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
+
+<!--
+Tab-Reihenfolge = DOM-Reihenfolge
+Skip-Links: "Zum Hauptinhalt springen"
+:focus-visible = nur bei Tastatur-Navigation
+-->
+
+---
+
+# Understandable: Verständlich
+
+**Sprache angeben:**
+```html
+<html lang="de">
+```
+
+**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
+
+**Fehler erklären:**
+```html
+<input type="email" aria-describedby="email-error">
+<p id="email-error" role="alert">
+    Bitte geben Sie eine gültige E-Mail-Adresse ein.
+</p>
+```
+
+<!--
+Screenreader nutzen lang für korrekte Aussprache
+Konsistenz reduziert kognitive Last
+Fehlermeldungen: konkret, hilfreich, am Feld
+-->
+
+---
+
+# Robust: Technisch solide
+
+**Semantisches HTML:**
+```html
+<!-- Schlecht -->
+<div class="button" onclick="...">Klick mich</div>
+
+<!-- Gut -->
+<button type="button">Klick mich</button>
+```
+
+**ARIA nur wenn nötig:**
+```html
+<!-- Nötig: Custom-Komponente -->
+<div role="tablist" aria-label="Produktkategorien">
+    <button role="tab" aria-selected="true">Schuhe</button>
+    <button role="tab" aria-selected="false">Jacken</button>
+</div>
+```
+
+<!--
+ARIA = Accessible Rich Internet Applications
+Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
+button hat eingebaute Tastatur-Unterstützung
+div-Button braucht JavaScript für Enter/Space
+-->
+
+---
+
+<!-- _class: klausur -->
+
+# Barrieren im Netz vermeiden (a11y)
+
+**Tastatur-Test:**
+- Alle Funktionen nur mit Tab + Enter nutzbar?
+- Fokus immer sichtbar?
+- Logische Tab-Reihenfolge?
+
+**Screenreader-Test:**
+- VoiceOver (Mac): `Cmd + F5`
+- NVDA (Windows): Gratis-Download
+
+**Tools:**
+- axe DevTools, WAVE (Browser-Extensions)
+- Lighthouse (in Chrome DevTools)
+
+<!--
+Automatische Tests finden ~30% der Probleme
+Manuelles Testen unverzichtbar
+Echte NutzerInnen einbeziehen = Gold-Standard
+-->
 
 ---
 
 <!-- _class: lead -->
 
-# Mittagspause
+# Teil 3: Layouts (optional)
-## 60 Minuten
-
----
-
-<!-- _class: lead -->
-
-# Teil 3: Layouts
 ## Flexbox & mehr
 
 ---
@@ -1031,6 +1349,8 @@ Oder gleichmäßig verteilt
 
 ---
 
+<!-- _class: klausur -->
+
 # Pseudo-Klassen
 
 ```css
@@ -1050,6 +1370,8 @@ Pseudo-Klassen = Zustände, kein JavaScript nötig!
 
 ---
 
+<!-- _class: klausur -->
+
 # Pseudo-Elemente
 
 ```css
@@ -1070,6 +1392,8 @@ content nur bei ::before/::after
 
 ---
 
+<!-- _class: klausur -->
+
 # Responsive Design
 
 **Media Queries:** CSS je nach Bildschirmgröße
@@ -1092,89 +1416,6 @@ Mobile First = Standard für klein, dann größere überschreiben
 
 ---
 
-# Hands-On: Layout bauen (60 Min)
-
-**Erstellt ein komplettes Layout:**
-
-1. **Header** mit Logo (links) und Navigation (rechts)
-2. **Main** mit zwei Spalten (Sidebar + Content)
-3. **Footer** mit zentriertem Copyright
-
-**Anforderungen:**
-- Nutzt Flexbox
-- Responsive: Auf Handy untereinander
-- Hover-Effekte für Links
-- Mindestens 2 Farben
-
-**Hilfe:** https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-
----
-
-# Beispiel-Struktur
-
-```html
-<body>
-    <header>
-        <div class="logo">Meine Seite</div>
-        <nav>
-            <a href="#">Home</a>
-            <a href="#">Über</a>
-            <a href="#">Kontakt</a>
-        </nav>
-    </header>
-    
-    <main>
-        <aside>Sidebar</aside>
-        <article>Hauptinhalt</article>
-    </main>
-    
-    <footer>© 2026</footer>
-</body>
-```
-
----
-
-# Beispiel-CSS
-
-```css
-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem 2rem;
-    background: #2c3e50;
-    color: white;
-}
-
-main {
-    display: flex;
-    gap: 2rem;
-    padding: 2rem;
-}
-
-aside {
-    flex: 0 0 250px;
-}
-
-article {
-    flex: 1;
-}
-
-@media (max-width: 768px) {
-    main { flex-direction: column; }
-    aside { flex: none; }
-}
-```
-
----
-
-<!-- _class: lead -->
-
-# Pause
-## 15 Minuten
-
----
-
 <!-- _class: lead -->
 
 # Teil 4: CSS vertiefen
@@ -1298,37 +1539,6 @@ Variablen machen's einfach
 
 ---
 
-# Hands-On: Styling finalisieren (45 Min)
-
-**Erweitert eure Seite:**
-
-1. **Transitions** für alle Links und Buttons
-2. **CSS-Variablen** für Farben
-3. **Hover-Effekte** für Karten/Boxen
-4. **Media Query** für Mobile
-
-**Bonus:**
-- Dark Mode Support
-- Animierte Navigation
-
----
-
-# Fleißaufgabe bis 24.01.
-
-**Baut eine vollständige Portfolio-Seite:**
-
-1. Mehrere Unterseiten (HTML-Dateien)
-2. Konsistentes Layout (Header, Footer, Navigation)
-3. Responsive Design (Mobile-freundlich)
-4. Mindestens ein Kontaktformular
-
-**Ressourcen:**
-- CSS lernen: https://codescripsi.es/
-- Flexbox: https://flexboxfroggy.com/
-- Grid: https://cssgridgarden.com/
-
----
-
 <!-- _class: lead -->
 
 # Fragen & Diskussion
@@ -1339,22 +1549,6 @@ Variablen machen's einfach
 
 ---
 
-# Zusammenfassung Termin 2
-
-**Netzwerke:**
-- OSI-Modell (7 Schichten) vs. TCP/IP (4 Schichten)
-- DNS: Namen → IP-Adressen
-- HTTP: Request/Response, Status-Codes
-
-**CSS:**
-- Selektoren (Element, Klasse, ID)
-- Box-Modell (Content, Padding, Border, Margin)
-- Flexbox für Layouts
-- Responsive Design mit Media Queries
-- Transitions für Animationen
-
----
-
 # Lizenz
 
 Diese Präsentation ist lizenziert unter **Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)**

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

@@ -49,7 +49,7 @@ a {
 <!-- _footer: '' -->
 <!-- _backgroundColor: black -->
 
-![bg fit opacity:0.2](./assets/background-termin-3.png)
+![bg fit opacity:0.2](./assets/background-termin-2.png)
 
 # Grundlagen IT- und Internettechnik