rename materials wtf1-3 to hex1-3 and add hex4, hex5

- replace grayscale-gradient.png with svg (256 discrete rects)
- add grayscale-zoom.svg: 16 brightest shades with decimal + hex labels
- add zoom slide after '256 shades of gray'
- minor tweaks: Mbps capitalization, remove redundant '256' prefix in states list

CLAUDE.md

@@ -12,6 +12,7 @@ This project builds presentation decks for Marp, supporting multiple courses.
 - Agent NEVER runs commands outside this folder
 - Agent NEVER runs build/deploy commands without explicit user request
 - Agent NEVER runs deploy commands (make deploy, scp, etc.) without explicit user permission
+- Agent NEVER runs `git checkout --` or `git restore` on files with uncommitted work. To undo specific changes, use targeted Edit operations instead.
 
 ## Critical File Protection
 
@@ -34,8 +35,9 @@ build/                  # Generated output (gitignored)
 ## Build Commands
 
 ```bash
-make dev-b          # Dev server 223015b (port 1311)
+make dev            # Marp live server all courses (port 1312, HMR)
-make dev-c          # Dev server 223015c (port 1312)
+make dev-b          # Marp live server 223015b (port 1313, HMR)
+make dev-c          # Marp live server 223015c (port 1314, HMR)
 make build          # Build all courses
 make build-b        # Build 223015b only
 make build-c        # Build 223015c only
@@ -48,10 +50,7 @@ make deploy         # Deploy all (ASK FIRST!)
 ## Nix Flake Commands
 
 ```bash
-nix develop                           # Dev shell with all tools
+nix develop                           # Dev shell with all tools (node 22, npm, make)
-nix run .#qr -- "https://example.com" # Generate QR code
-nix run .#qr-slides -- 223015b        # QR for course
-nix run .#optimize-img -- <path>      # Optimize images
 ```
 
 ## Code Style Guidelines

Makefile

@@ -27,7 +27,9 @@ help:
 	@echo "  223015c - Internettechnologien"
 	@echo ""
 	@echo "Development:"
-	@echo "  make dev         - Start development server (port 3000)"
+	@echo "  make dev         - Marp live server all courses (port 1312, HMR)"
+	@echo "  make dev-b       - Marp live server 223015b (port 1313, HMR)"
+	@echo "  make dev-c       - Marp live server 223015c (port 1314, HMR)"
 	@echo ""
 	@echo "Build:"
 	@echo "  make build       - Build all courses"
@@ -55,13 +57,20 @@ build/.exists:
 	@mkdir -p build/223015b build/223015c
 	@touch $@
 
-# Development server
+# Development server (Marp live server with HMR)
 dev:
 	@./scripts/dev-server.sh
 
+dev-b:
+	@./scripts/dev-server.sh 223015b 1313
+
+dev-c:
+	@./scripts/dev-server.sh 223015c 1314
+
 dev-kill:
-	@-pkill -f "marp-cli.*--server" 2>/dev/null || true
+	@-fuser -k 1312/tcp 2>/dev/null || true
-	@sleep 0.5
+	@-fuser -k 1313/tcp 2>/dev/null || true
+	@-fuser -k 1314/tcp 2>/dev/null || true
 
 # Build functions
 define build_course

archive/223015c_it_grundlagen_40pt.xml

@@ -1,469 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<quiz>
-
-<!-- ============================================================
-     223015c – Grundlagen IT- und Internettechnik
-     40 Punkte / 40 Minuten
-     Michael Czechowski – HdM Stuttgart – WS 2025/26
-     ============================================================ -->
-
-<!-- ─── 3 pt – Von-Neumann: 5 Komponenten ─── -->
-<question type="matching">
-  <n><text>Q1 – Von-Neumann: Komponenten zuordnen</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Ordne jeder Komponente der Von-Neumann-Architektur ihre
-      Funktion zu.</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Die 5 Komponenten: ALU (Rechnen), Steuerwerk (Befehle steuern), Speicherwerk (Programme UND Daten), Ein-/Ausgabe (Peripherie), Bus-System (Verbindung).</text></generalfeedback>
-  <defaultgrade>3</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <shuffleanswers>true</shuffleanswers>
-  <answer fraction="100"><text>Rechenwerk (ALU)</text><match>Führt arithmetische und logische Operationen durch.</match></answer>
-  <answer fraction="100"><text>Steuerwerk</text><match>Holt, dekodiert und steuert die Ausführung von Befehlen.</match></answer>
-  <answer fraction="100"><text>Speicherwerk</text><match>Enthält sowohl Programme als auch Daten (Stored Program Concept).</match></answer>
-  <answer fraction="100"><text>Ein-/Ausgabe</text><match>Schnittstelle zu externen Geräten wie Tastatur, Bildschirm, Netzwerk.</match></answer>
-  <answer fraction="100"><text>Bus-System</text><match>Verbindet alle Komponenten mittels Adress-, Daten- und Steuerbus.</match></answer>
-</question>
-
-<!-- ─── 2 pt – Von-Neumann vs Harvard: Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q2 – Von-Neumann vs. Harvard</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Ein Arduino-Mikrocontroller nutzt die <strong>Harvard-Architektur</strong>.
-      Ein modernes Smartphone nutzt eine (modifizierte) Von-Neumann-Architektur.</p>
-      <p><strong>Warum ist die Harvard-Architektur für Echtzeit-Anwendungen
-      auf dem Arduino vorteilhafter, und was wäre der Nachteil, wenn
-      das Smartphone diese Architektur verwenden würde?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Harvard: separate Code/Daten-Speicher → paralleler Zugriff, schneller. Nachteil: Code und Daten nicht aus gleichem Speicher nahtlos mischbar → weniger Flexibilität, kein „Laden beliebiger Apps" wie bei Von-Neumann.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – Speed vs. Flexibilität.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, was getrennte Speicher für Code und Daten bedeuten.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[Harvard nutzt <strong>separate Speicher</strong> für Code und Daten → paralleler Zugriff, schneller. Beim Smartphone wäre es schwieriger, beliebige Apps zu laden – weniger Flexibilität.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Harvard ist langsamer, aber sicherer – daher für Echtzeit geeignet. Smartphones brauchen die Geschwindigkeit nicht.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Beide Architekturen sind funktional identisch – der Unterschied liegt nur im Gehäuse.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Von-Neumann ist schneller durch gemeinsamen Speicher. Harvard wird gewählt, weil Echtzeit-Apps weniger Speicher brauchen.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – Stored Program Concept Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q3 – Stored Program Concept</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Vor der Von-Neumann-Architektur mussten bei Maschinen wie dem
-      ENIAC Programme durch <strong>Umstecken von Kabeln</strong> eingegeben
-      werden.</p>
-      <p><strong>Was konkret ermöglicht das Stored Program Concept, was
-      vorher nicht möglich war? Nenne zwei Beispiele.</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Stored Program: Programme werden als Daten im Speicher abgelegt → austauschbar ohne Hardwareänderung. Ermöglicht: Betriebssysteme, Apps installieren/löschen, Multitasking, Updates.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – Programme als Daten im Speicher = Flexibilität.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – der Kern liegt darin, dass Programme im Speicher als Daten residieren.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[Programme werden als <strong>Daten im Speicher</strong> abgelegt → z. B. Apps können installiert/gelöscht werden und <strong>Multitasking</strong> (mehrere Programme gleichzeitig) wird möglich.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Programme werden auf separater Hardware gespeichert → die Hauptspeicher-Kapazität wird ums Doppelte gesteigert.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Die Hardware kann jetzt selbst Befehle erfinden – kein Mensch muss mehr programmieren.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Nur ein einzelnes Programm kann gleichzeitig laufen, aber es kann schneller geladenen werden.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – HTML Metadaten: Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q4 – HTML: &lt;head&gt; vs. &lt;body&gt;</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Ein Student erstellt eine Webseite und platziert <em>alles</em>
-      im <code>&lt;body&gt;</code> – auch den <code>&lt;title&gt;</code>
-      und die <code>&lt;meta name="description"&gt;</code>.</p>
-      <p><strong>Welche zwei konkreten Konsequenzen hat das?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>title und meta description gehören in &lt;head&gt;. Im &lt;body&gt;: (1) kein Titel im Browser-Tab / Suchergebnis, (2) keine Beschreibung für Suchmaschinen/Screen-Reader → SEO und Accessibility beeinträchtigt.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – Metadaten im Body werden nicht als solche interpretiert.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – &lt;head&gt; und &lt;body&gt; haben spezifische Funktionen.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[(1) Der Browser-Tab zeigt <strong>keinen Titel</strong> an. (2) Suchmaschinen haben <strong>keine Beschreibung</strong> für das Snippet → schlechte SEO und Screen-Reader können die Seite nicht richtig vorlesen.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Kein Problem – Browser ignorieren die Unterscheidung zwischen <code>&lt;head&gt;</code> und <code>&lt;body&gt;</code>.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[(1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Nur das Fehlen von <code>&lt;meta charset&gt;</code> ist ein Problem – title und description funktionieren überall.]]></text></answer>
-</question>
-
-<!-- ─── 3 pt – Accessibility Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q5 – Barrierefreiheit: Curb-Cut-Effekt</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Der <strong>Curb-Cut-Effekt</strong> beschreibt, wie eine
-      barrierefreie Lösung – ursprünglich für Menschen mit Behinderung –
-      letztendlich <em>allen</em> zugute kommt.</p>
-      <p><strong>Nenne ein konkretes Web-Beispiel, das diesen Effekt
-      demonstriert, und erkläre, wer davon profitiert.</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Beispiel: Untertitel (für Gehörlose) → helfen auch in lauter Umgebung, beim Sprachlernen, bei Ton aus. Alt-Texte (für Screen-Reader) → helfen auch SEO. Semantisches HTML → besser für alle.</text></generalfeedback>
-  <defaultgrade>3</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – Barrierefreiheit hilft allen.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, welche barrierefreien Maßnahmen auch Menschen ohne Behinderung nutzen.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[<strong>Untertitel:</strong> Gedacht für Gehörlose, helfen aber auch in lauter Umgebung, beim Sprachlernen oder wenn der Ton aus ist – profitiert fast jedermann.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Barrierefreie Webseiten sind langsamer zu laden – der Curb-Cut-Effekt beschreibt diesen negativen Nebeneffekt.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Der Curb-Cut-Effekt bedeutet, dass barrierefreie Seiten nur für Menschen mit Behinderung nützlich sind.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Dark Mode:</strong> Gedacht für Sehbehinderung, hilft auch in dunkler Umgebung – Beispiel für den Curb-Cut-Effekt.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – EAA / WCAG ─── -->
-<question type="multichoice">
-  <n><text>Q6 – European Accessibility Act</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Der <strong>European Accessibility Act (EAA)</strong> ist seit
-      Juni 2025 in Kraft.</p>
-      <p><strong>Was bedeutet das konkret für ein deutsches
-      E-Commerce-Unternehmen, das eine Webseite betreibt?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>EAA verpflichtet u. a. E-Commerce-Anbieter zur Barrierefreiheit. Die Webseite muss WCAG-Standards erfüllen. Bei Verstoß: Bußgelder bis 100.000 € möglich.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – rechtliche Pflicht zur Barrierefreiheit.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – der EAA erstellt eine rechtliche Verpflichtung für bestimmte Sektoren.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[Die Webseite <strong>muss barrierefreiheitstechnisch</strong> WCAG-Standards erfüllen – E-Commerce ist explizit im EAA geregelt. Bei Verstoß: Bußgelder möglich.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Der EAA betrifft nur öffentliche Behörden – private Unternehmen sind ausgenommen.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Das Unternehmen muss nur eine englische Version der Webseite bereitstellen.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Der EAA regelt nur die Barrierefreiheit von mobilen Apps, nicht von Webseiten.]]></text></answer>
-</question>
-
-<!-- ─── 3 pt – TCP/IP Schichten: Protokoll → Schicht ─── -->
-<question type="matching">
-  <n><text>Q7 – TCP/IP: Protokoll → Schicht</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Anwendung: HTTP, DNS, SMTP. Transport: TCP, UDP. Internet: IP. Netzzugang: Ethernet, WLAN.</text></generalfeedback>
-  <defaultgrade>3</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <shuffleanswers>true</shuffleanswers>
-  <answer fraction="100"><text>HTTP</text><match>Anwendung</match></answer>
-  <answer fraction="100"><text>TCP</text><match>Transport</match></answer>
-  <answer fraction="100"><text>IP</text><match>Internet</match></answer>
-  <answer fraction="100"><text>Ethernet</text><match>Netzzugang</match></answer>
-  <answer fraction="100"><text>DNS</text><match>Anwendung</match></answer>
-  <answer fraction="100"><text>UDP</text><match>Transport</match></answer>
-</question>
-
-<!-- ─── 3 pt – Encapsulation: D-S-P-F ─── -->
-<question type="matching">
-  <n><text>Q8 – Encapsulation: Dateneinheit → Schicht</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Bei der Übertragung wird eine Nachricht von Schicht zu Schicht
-      verpackt (Encapsulation). Ordne jeder Dateneinheit die zugehörige
-      Schicht zu.</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Daten (Anwendung) → Segment (Transport, +Ports) → Paket (Internet, +IP) → Frame (Netzzugang, +MAC). Merkhilfe: D-S-P-F.</text></generalfeedback>
-  <defaultgrade>3</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <shuffleanswers>true</shuffleanswers>
-  <answer fraction="100"><text>Daten</text><match>Anwendungsschicht – die eigentliche Nachricht (z. B. HTML-Seite).</match></answer>
-  <answer fraction="100"><text>Segment</text><match>Transportschicht – Daten + Ports und Sequenznummern.</match></answer>
-  <answer fraction="100"><text>Paket</text><match>Internetschicht – Segment + IP-Adressen (Quelle und Ziel).</match></answer>
-  <answer fraction="100"><text>Frame</text><match>Netzzugangsschicht – Paket + MAC-Adressen und Prüfsumme.</match></answer>
-</question>
-
-<!-- ─── 3 pt – IP vs MAC vs Port Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q9 – IP vs. MAC vs. Port: Transfer-Szenario</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Dein Laptop sendet eine HTTPS-Anfrage an einen Webserver in
-      einem anderen Land. Das Paket durchläuft mehrere Router.</p>
-      <p><strong>Welche der folgenden Aussagen über die Adressen auf dem
-      Weg ist korrekt?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>IP-Adresse des Ziel-Servers bleibt konstant (global). MAC-Adresse ändert sich bei jedem Hop (lokal, nächster Router). Port 443 (HTTPS) bleibt konstant.</text></generalfeedback>
-  <defaultgrade>3</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – nur MAC ändert sich unterwegs.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, welche Adresse bei jedem Hop neu gesetzt wird.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[Die <strong>IP-Adresse</strong> des Servers bleibt konstant, der <strong>Port</strong> (443) ändert sich nicht – die <strong>MAC-Adresse</strong> wird an jedem Router neu gesetzt (lokal, ein Hop).]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Alle drei Adressen (IP, MAC, Port) ändert sich bei jedem Router.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Die MAC-Adresse bleibt konstant, die IP-Adresse ändert sich bei jedem Hop.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[IP und Port ändert sich, MAC bleibt konstant – MAC ist die globale Adresse.]]></text></answer>
-</question>
-
-<!-- ─── 3 pt – 3-Way Handshake: Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q10 – TCP 3-Way-Handshake: Was passiert wäre?</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Der Client sendet ein <strong>SYN</strong> zum Server.
-      Das SYN-Paket geht verloren – es erreicht den Server nie.</p>
-      <p><strong>Was passiert als nächstes, und warum wird keine
-      Verbindung aufgebaut?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Der Server erhält kein SYN → sendet kein SYN-ACK zurück → der Client bekommt keine Antwort → Verbindung wird nicht aufgebaut. TCP wird das SYN nach einem Timeout erneut senden (Neuübertragung).</text></generalfeedback>
-  <defaultgrade>3</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – ohne SYN beim Server: kein SYN-ACK, kein Handshake.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, was der Server ohne SYN tun kann.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[Der Server kennt die Anfrage nicht → sendet <strong>kein SYN-ACK</strong> → der Client erhält keine Antwort → <strong>keine Verbindung</strong>. Der Client wird das SYN nach einem Timeout erneut senden.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Der Server sendet trotzdem ein SYN-ACK, da die IP-Adresse bekannt ist – die Verbindung wird trotzdem aufgebaut.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Der Client sendet direkt ein ACK als Fallback – die Verbindung wird mit zwei Paketen aufgebaut.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Das verloren gegangene SYN wird automatisch vom Netzwerk rekonstruiert – kein Problem.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – TCP vs UDP Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q11 – TCP vs. UDP: Videostreaming</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Ein Videostreaming-Dienst sendet Daten an deinen Browser.
-      Ein einzelnes Paket geht verloren.</p>
-      <p><strong>Warum wählt der Dienst <strong>UDP</strong> statt TCP,
-      obwohl ein Paket verloren geht?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Bei Echtzeit-Video ist Verzögerung schlimmer als Paketverlust. TCP würde das Paket erneut anfordern → Video friert. UDP ignoriert das Verlust → kurzer Artefakt, Video läuft weiter.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – bei Echtzeit ist Verzögerung ärger als Verlust.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, was TCP bei einem verlorenen Paket tun würde.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[Bei <strong>Echtzeit</strong> ist Verzögerung schlimmer als Verlust. TCP würde das Paket <strong>erneut anfordern</strong> → Video friert ein. UDP ignoriert es → kurzer Glitch, Video läuft weiter.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[UDP sendet jedes Paket doppelt, daher geht statistisch nie etwas verloren.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[TCP kann bei Videostreaming nicht verwendet werden, da es zu langsam für Multimedia ist.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[UDP ist immer schneller als TCP – deshalb nutzt jeder Streaming-Dienst UDP.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – HTTP Methoden: Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q12 – HTTP-Methoden: Szenario</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Ein Nutzer aktualisiert sein Profilbild auf einer Webseite.
-      Das Foto wird zum Server gesendet und das <strong>alte Bild
-      ersetzt</strong>.</p>
-      <p><strong>Welche HTTP-Methode wird für diese Operation verwendet,
-      und warum nicht GET?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>PUT – Daten ersetzen (eine existierende Ressource wird überschrieben). GET ruft nur Daten ab, sendet keine Daten zum Server.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – PUT für das Ersetzen einer Ressource.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, was „ersetzen" in HTTP bedeutet.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[<strong>PUT</strong> – ersetzt eine existierende Ressource. GET ruft nur Daten ab und sendet <em>keine</em> Daten zum Server.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>GET</strong> – GET kann auch Daten senden, wenn eine URL mit Parameter verwendet wird.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>POST</strong> – POST ist immer für das Ersetzen von Daten zuständig.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>DELETE</strong> – DELETE sendet das neue Foto und löscht gleichzeitig das alte.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – HTTP Status-Codes Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q13 – HTTP Status-Codes: Fehlerdiagnose</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Du rufst eine Webseite auf und der Browser zeigt folgende
-      Fehlermeldung an:</p>
-      <pre>HTTP/1.1 503 Service Unavailable</pre>
-      <p><strong>Was bedeutet dieser Code, und wer ist für die Behebung
-      zuständig – du oder der Betreiber der Webseite?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>503 ist ein 5xx-Code = Server-Fehler. Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Serverbetreiber, nicht beim Nutzer.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – 5xx = Server-Problem, nicht dein Fehler.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, was die Ziffer „5" im Code bedeutet.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[<strong>Server-Fehler:</strong> Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim <strong>Betreiber</strong> – du kannst nur später erneut versuchen.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Client-Fehler: Du hast die falsche URL eingegeben – ein 5xx-Code bedeutet, dass deine Anfrage falsch war.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Erfolgs-Code: 503 bedeutet, dass der Server die Anfrage erfolgreich umgeleitet hat.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Der Code bedeutet, dass der Server die Seite dauerhaft verschoben hat – du muss die neue URL suchen.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – DNS Ablauf Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q14 – DNS: Rolle im Ablauf</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Du gibst <code>https://hdm-stuttgart.de</code> in die
-      Adresszeile ein.</p>
-      <p><strong>Was passiert <em>vor</em> dem TCP-Handshake, und warum
-      ist dieser Schritt zwingend nötig?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>DNS-Auflösung: Der Name „hdm-stuttgart.de" wird in eine IP-Adresse umgewandelt. TCP braucht eine IP-Adresse – names können nicht direkt verbunden werden.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – DNS vor TCP, Name → IP.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, was TCP als Zieladresse braucht.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[<strong>DNS-Auflösung:</strong> Der Name <code>hdm-stuttgart.de</code> wird in eine <strong>IP-Adresse</strong> umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen, nicht zu Namen.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Der Browser sendet direkt den Namen an den Server – DNS wird erst danach für die Verschlüsselung benötigt.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[DNS passiert nach dem TCP-Handshake – erst wird die Verbindung aufgebaut, dann der Name aufgelöst.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – CSS Spezifität Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q15 – CSS Spezifität: Welche Regel gewinnt?</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Gegeben folgender CSS-Code:</p>
-      <pre>
-p           { color: blue; }      /* (A) */
-.highlight  { color: green; }     /* (B) */
-#main       { color: red; }       /* (C) */
-      </pre>
-      <p>Ein Element <code>&lt;p class="highlight" id="main"&gt;Text&lt;/p&gt;</code>
-      wird angezeigt.<br>
-      <strong>Welche Farbe zeigt der Text an, und warum?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Spezifität: ID (0,1,0,0) > Klasse (0,0,1,0) > Element (0,0,0,1). Alle drei Regeln treffen das Element – ID #main gewinnt → rot.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – ID gewinnt durch höchste Spezifität.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege die Spezifitätswerte: ID > Klasse > Element.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[<strong>Rot</strong> – die ID-Regel <code>#main</code> hat die höchste Spezifität (0,1,0,0) und gewinnt über Klasse (0,0,1,0) und Element (0,0,0,1).]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Blau</strong> – die Element-Regel steht zuerst im Code und hat daher Vorrang.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Grün</strong> – Klassen-Selektoren haben immer Vorrang vor IDs.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Rot</strong> – die letzte Regel im Code gewinnt immer, unabhängig vom Selektor-Typ.]]></text></answer>
-</question>
-
-<!-- ─── 2 pt – Responsive Design Transfer ─── -->
-<question type="multichoice">
-  <n><text>Q16 – Responsive Design: Mobile First</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Ein Developer schreibt folgendes CSS:</p>
-      <pre>
-.container { background: white; }
-
-@media (min-width: 768px) {
-    .container { background: blue; }
-}
-
-@media (min-width: 1024px) {
-    .container { background: green; }
-}
-      </pre>
-      <p><strong>Welche Farbe hat <code>.container</code> bei einem
-      Bildschirm von 900 px Breite, und warum?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Mobile First: Basis = white. Bei 900px greift min-width: 768px → blue. min-width: 1024px greift NICHT (900 &lt; 1024). Ergebnis: blau.</text></generalfeedback>
-  <defaultgrade>2</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – 768px greift, 1024px nicht.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – überlege, welche min-width-Bedingungen bei 900px erfüllt sind.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[<strong>Blau</strong> – bei 900 px greift <code>min-width: 768px</code> (900 ≥ 768), aber <code>min-width: 1024px</code> greift nicht (900 &lt; 1024).]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Weiß</strong> – Media-Queries gelten nur ab 1024 px, darunter bleibt immer die Basis-Farbe.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Grün</strong> – die letzte Media-Query überschreibt immer alle vorherigen.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Weiß</strong> – bei 900 px greift keine Media-Query, da 900 zwischen den beiden Breakpoints liegt.]]></text></answer>
-</question>
-
-<!-- ─── 1 pt – Zusammen: Der Ablauf eines Klicks ─── -->
-<question type="multichoice">
-  <n><text>Q17 – Zusammen: Reihenfolge eines HTTPS-Aufrufs</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Du gibst eine URL ein. <strong>Welche Reihenfolge der Schritte
-      ist korrekt?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Korrekte Reihenfolge: (1) DNS-Auflösung, (2) TCP 3-Way-Handshake, (3) HTTP-Request (GET), (4) HTTP-Response (200 OK + HTML).</text></generalfeedback>
-  <defaultgrade>1</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – DNS → TCP → HTTP Request → HTTP Response.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – an erster Stelle steht immer die DNS-Auflösung.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[(1) DNS → (2) TCP-Handshake → (3) HTTP GET → (4) HTTP 200 OK]]></text></answer>
-  <answer fraction="0"><text><![CDATA[(1) TCP-Handshake → (2) DNS → (3) HTTP GET → (4) HTTP 200 OK]]></text></answer>
-  <answer fraction="0"><text><![CDATA[(1) HTTP GET → (2) DNS → (3) TCP-Handshake → (4) HTTP 200 OK]]></text></answer>
-  <answer fraction="0"><text><![CDATA[(1) DNS → (2) HTTP GET → (3) TCP-Handshake → (4) HTTP 200 OK]]></text></answer>
-</question>
-
-<!-- ─── 1 pt – Bonusfrage: Spezifität Edge Case ─── -->
-<question type="multichoice">
-  <n><text>Q18 – CSS: 100 Element-Selektoren vs. 1 Klasse</text></n>
-  <questiontext type="html">
-    <text><![CDATA[
-      <p>Es gibt zwei CSS-Regeln für ein <code>&lt;p&gt;</code>-Element:</p>
-      <pre>
-p p p p p p p p p p  { color: blue; }   /* 100× Element-Selektor */
-.highlight           { color: red; }    /* 1× Klasse */
-      </pre>
-      <p>Das Element hat die Klasse <code>highlight</code>.
-      <strong>Welche Farbe gewinnt?</p>
-    ]]></text>
-  </questiontext>
-  <generalfeedback type="html"><text>Eine einzelne Klasse (0,0,1,0) schlägt immer hundert Element-Selektoren (0,0,0,100). Spezifität wird nicht additiv „aufgezählt" – die Stelle zählt als Einheit.</text></generalfeedback>
-  <defaultgrade>1</defaultgrade>
-  <penalty>0.25</penalty>
-  <hidden>0</hidden>
-  <single>true</single>
-  <shuffleanswers>true</shuffleanswers>
-  <correctfeedback type="html"><text>Genau – eine Klasse gewinnt immer gegen beliebig viele Elemente.</text></correctfeedback>
-  <incorrectfeedback type="html"><text>Nein – Spezifität funktioniert nicht durch Addition innerhalb einer Stelle.</text></incorrectfeedback>
-  <answer fraction="100"><text><![CDATA[<strong>Rot</strong> – eine Klasse (0,0,1,0) gewinnt immer gegen beliebig viele Element-Selektoren (0,0,0,n). Spezifität-Stellen überschreiben sich, nicht addieren.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Blau</strong> – 100 Element-Selektoren ergeben 0,0,0,100 = höhere Spezifität als 0,0,1,0.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[<strong>Blau</strong> – die längere Regel (mehr Selektoren) hat immer höhere Spezifität.]]></text></answer>
-  <answer fraction="0"><text><![CDATA[Unentschieden – die Regeln haben exakt gleiche Spezifität.]]></text></answer>
-</question>
-
-</quiz>

archive/klausurfragen_it.md

@@ -1,439 +0,0 @@
-Here is the quiz converted into a clean, readable Markdown format. I have preserved the structure, code snippets, and feedback for each question.
-
----
-
-# 223015c – Grundlagen IT- und Internettechnik
-
-**WS 2025/26 – Michael Czechowski – HdM Stuttgart**
-**40 Punkte / 40 Minuten**
-
----
-
-### Q1 – Von-Neumann: Komponenten zuordnen (3 pt)
-
-**Ordne jeder Komponente der Von-Neumann-Architektur ihre Funktion zu.**
-
-* **Rechenwerk (ALU):** Führt arithmetische und logische Operationen durch.
-* **Steuerwerk:** Holt, dekodiert und steuert die Ausführung von Befehlen.
-* **Speicherwerk:** Enthält sowohl Programme als auch Daten (Stored Program Concept).
-* **Ein-/Ausgabe:** Schnittstelle zu externen Geräten wie Tastatur, Bildschirm, Netzwerk.
-* **Bus-System:** Verbindet alle Komponenten mittels Adress-, Daten- und Steuerbus.
-
-> **Feedback:** Die 5 Komponenten: ALU (Rechnen), Steuerwerk (Befehle steuern), Speicherwerk (Programme UND Daten), Ein-/Ausgabe (Peripherie), Bus-System (Verbindung).
-
----
-
-### Q2 – Von-Neumann vs. Harvard (2 pt)
-
-**Ein Arduino-Mikrocontroller nutzt die Harvard-Architektur. Ein modernes Smartphone nutzt eine (modifizierte) Von-Neumann-Architektur.**
-
-**Warum ist die Harvard-Architektur für Echtzeit-Anwendungen auf dem Arduino vorteilhafter, und was wäre der Nachteil, wenn das Smartphone diese Architektur verwenden würde?**
-
-* [ ] Harvard ist langsamer, aber sicherer – daher für Echtzeit geeignet. Smartphones brauchen die Geschwindigkeit nicht.
-* [x] **Harvard nutzt separate Speicher für Code und Daten → paralleler Zugriff, schneller. Beim Smartphone wäre es schwieriger, beliebige Apps zu laden – weniger Flexibilität.** ✅
-* [ ] Beide Architekturen sind funktional identisch – der Unterschied liegt nur im Gehäuse.
-* [ ] Von-Neumann ist schneller durch gemeinsamen Speicher. Harvard wird gewählt, weil Echtzeit-Apps weniger Speicher brauchen.
-
-> **Feedback:** Harvard: separate Code/Daten-Speicher → paralleler Zugriff, schneller. Nachteil: Code und Daten nicht aus gleichem Speicher nahtlos mischbar → weniger Flexibilität, kein „Laden beliebiger Apps" wie bei Von-Neumann.
-
----
-
-### Q3 – Stored Program Concept (2 pt)
-
-**Vor der Von-Neumann-Architektur mussten bei Maschinen wie dem ENIAC Programme durch Umstecken von Kabeln eingegeben werden.**
-
-**Was konkret ermöglicht das Stored Program Concept, was vorher nicht möglich war? Nenne zwei Beispiele.**
-
-* [ ] Programme werden auf separater Hardware gespeichert → die Hauptspeicher-Kapazität wird ums Doppelte gesteigert.
-* [ ] Die Hardware kann jetzt selbst Befehle erfinden – kein Mensch muss mehr programmieren.
-* [x] **Programme werden als Daten im Speicher abgelegt → z. B. Apps können installiert/gelöscht werden und Multitasking (mehrere Programme gleichzeitig) wird möglich.** ✅
-* [ ] Nur ein einzelnes Programm kann gleichzeitig laufen, aber es kann schneller geladenen werden.
-
-> **Feedback:** Stored Program: Programme werden als Daten im Speicher abgelegt → austauschbar ohne Hardwareänderung. Ermöglicht: Betriebssysteme, Apps installieren/löschen, Multitasking, Updates.
-
----
-
-### Q4 – HTML: `<head>` vs. `<body>` (2 pt)
-
-**Ein Student erstellt eine Webseite und platziert *alles* im `<body>` – auch den `<title>` und die `<meta name="description">`.**
-
-**Welche zwei konkreten Konsequenzen hat das?**
-
-* [ ] Kein Problem – Browser ignorieren die Unterscheidung zwischen `<head>` und `<body>`.
-* [x] **(1) Der Browser-Tab zeigt keinen Titel an. (2) Suchmaschinen haben keine Beschreibung für das Snippet → schlechte SEO und Screen-Reader können die Seite nicht richtig vorlesen.** ✅
-* [ ] (1) Der Titel wird im Seiteninhalt sichtbar angezeigt. (2) Die description wird als Text auf der Seite eingeblendet.
-* [ ] Nur das Fehlen von `<meta charset>` ist ein Problem – title und description funktionieren überall.
-
-> **Feedback:** title und meta description gehören in `<head>`. Im `<body>`: (1) kein Titel im Browser-Tab / Suchergebnis, (2) keine Beschreibung für Suchmaschinen/Screen-Reader → SEO und Accessibility beeinträchtigt.
-
----
-
-### Q5 – Barrierefreiheit: Curb-Cut-Effekt (3 pt)
-
-**Der Curb-Cut-Effekt beschreibt, wie eine barrierefreie Lösung – ursprünglich für Menschen mit Behinderung – letztendlich *allen* zugute kommt.**
-
-**Nenne ein konkretes Web-Beispiel, das diesen Effekt demonstriert, und erkläre, wer davon profitiert.**
-
-* [ ] Barrierefreie Webseiten sind langsamer zu laden – der Curb-Cut-Effekt beschreibt diesen negativen Nebeneffekt.
-* [ ] Der Curb-Cut-Effekt bedeutet, dass barrierefreie Seiten nur für Menschen mit Behinderung nützlich sind.
-* [x] **Untertitel: Gedacht für Gehörlose, helfen aber auch in lauter Umgebung, beim Sprachlernen oder wenn der Ton aus ist – profitiert fast jedermann.** ✅
-* [ ] **Dark Mode:** Gedacht für Sehbehinderung, hilft auch in dunkler Umgebung – Beispiel für den Curb-Cut-Effekt.
-
-> **Feedback:** Beispiel: Untertitel (für Gehörlose) → helfen auch in lauter Umgebung, beim Sprachlernen, bei Ton aus. Alt-Texte (für Screen-Reader) → helfen auch SEO. Semantisches HTML → besser für alle.
-
----
-
-### Q6 – European Accessibility Act (2 pt)
-
-**Der European Accessibility Act (EAA) ist seit Juni 2025 in Kraft.**
-
-**Was bedeutet das konkret für ein deutsches E-Commerce-Unternehmen, das eine Webseite betreibt?**
-
-* [ ] Der EAA betrifft nur öffentliche Behörden – private Unternehmen sind ausgenommen.
-* [ ] Das Unternehmen muss nur eine englische Version der Webseite bereitstellen.
-* [x] **Die Webseite muss barrierefreiheitstechnisch WCAG-Standards erfüllen – E-Commerce ist explizit im EAA geregelt. Bei Verstoß: Bußgelder möglich.** ✅
-* [ ] Der EAA regelt nur die Barrierefreiheit von mobilen Apps, nicht von Webseiten.
-
-> **Feedback:** EAA verpflichtet u. a. E-Commerce-Anbieter zur Barrierefreiheit. Die Webseite muss WCAG-Standards erfüllen. Bei Verstoß: Bußgelder bis 100.000 € möglich.
-
----
-
-### Q7 – TCP/IP: Protokoll → Schicht (3 pt)
-
-**Ordne jedem Protokoll die richtige TCP/IP-Schicht zu.**
-
-* **HTTP:** Anwendung
-* **DNS:** Anwendung
-* **TCP:** Transport
-* **UDP:** Transport
-* **IP:** Internet
-* **Ethernet:** Netzzugang
-
-> **Feedback:** Anwendung: HTTP, DNS, SMTP. Transport: TCP, UDP. Internet: IP. Netzzugang: Ethernet, WLAN.
-
----
-
-### Q8 – Encapsulation: Dateneinheit → Schicht (3 pt)
-
-**Bei der Übertragung wird eine Nachricht von Schicht zu Schicht verpackt (Encapsulation). Ordne jeder Dateneinheit die zugehörige Schicht zu.**
-
-* **Daten:** Anwendungsschicht – die eigentliche Nachricht (z. B. HTML-Seite).
-* **Segment:** Transportschicht – Daten + Ports und Sequenznummern.
-* **Paket:** Internetschicht – Segment + IP-Adressen (Quelle und Ziel).
-* **Frame:** Netzzugangsschicht – Paket + MAC-Adressen und Prüfsumme.
-
-> **Feedback:** Daten (Anwendung) → Segment (Transport, +Ports) → Paket (Internet, +IP) → Frame (Netzzugang, +MAC). Merkhilfe: D-S-P-F.
-
----
-
-### Q9 – IP vs. MAC vs. Port: Transfer-Szenario (3 pt)
-
-**Dein Laptop sendet eine HTTPS-Anfrage an einen Webserver in einem anderen Land. Das Paket durchläuft mehrere Router.**
-
-**Welche der folgenden Aussagen über die Adressen auf dem Weg ist korrekt?**
-
-* [ ] Alle drei Adressen (IP, MAC, Port) ändert sich bei jedem Router.
-* [x] **Die IP-Adresse des Servers bleibt konstant, der Port (443) ändert sich nicht – die MAC-Adresse wird an jedem Router neu gesetzt (lokal, ein Hop).** ✅
-* [ ] Die MAC-Adresse bleibt konstant, die IP-Adresse ändert sich bei jedem Hop.
-* [ ] IP und Port ändert sich, MAC bleibt konstant – MAC ist die globale Adresse.
-
-> **Feedback:** IP-Adresse des Ziel-Servers bleibt konstant (global). MAC-Adresse ändert sich bei jedem Hop (lokal, nächster Router). Port 443 (HTTPS) bleibt konstant.
-
----
-
-### Q10 – TCP 3-Way-Handshake: Was passiert wäre? (3 pt)
-
-**Der Client sendet ein SYN zum Server. Das SYN-Paket geht verloren – es erreicht den Server nie.**
-
-**Was passiert als nächstes, und warum wird keine Verbindung aufgebaut?**
-
-* [ ] Der Server sendet trotzdem ein SYN-ACK, da die IP-Adresse bekannt ist – die Verbindung wird trotzdem aufgebaut.
-* [x] **Der Server kennt die Anfrage nicht → sendet kein SYN-ACK → der Client erhält keine Antwort → keine Verbindung. Der Client wird das SYN nach einem Timeout erneut senden.** ✅
-* [ ] Der Client sendet direkt ein ACK als Fallback – die Verbindung wird mit zwei Paketen aufgebaut.
-* [ ] Das verloren gegangene SYN wird automatisch vom Netzwerk rekonstruiert – kein Problem.
-
-> **Feedback:** Der Server erhält kein SYN → sendet kein SYN-ACK zurück → der Client bekommt keine Antwort → Verbindung wird nicht aufgebaut. TCP wird das SYN nach einem Timeout erneut senden (Neuübertragung).
-
----
-
-### Q11 – TCP vs. UDP: Videostreaming (2 pt)
-
-**Ein Videostreaming-Dienst sendet Daten an deinen Browser. Ein einzelnes Paket geht verloren.**
-
-**Warum wählt der Dienst UDP statt TCP, obwohl ein Paket verloren geht?**
-
-* [ ] UDP sendet jedes Paket doppelt, daher geht statistisch nie etwas verloren.
-* [x] **Bei Echtzeit ist Verzögerung schlimmer als Verlust. TCP würde das Paket erneut anfordern → Video friert ein. UDP ignoriert es → kurzer Glitch, Video läuft weiter.** ✅
-* [ ] TCP kann bei Videostreaming nicht verwendet werden, da es zu langsam für Multimedia ist.
-* [ ] UDP ist immer schneller als TCP – deshalb nutzt jeder Streaming-Dienst UDP.
-
-> **Feedback:** Bei Echtzeit-Video ist Verzögerung schlimmer als Paketverlust. TCP würde das Paket erneut anfordern → Video friert. UDP ignoriert das Verlust → kurzer Artefakt, Video läuft weiter.
-
----
-
-### Q12 – HTTP-Methoden: Szenario (2 pt)
-
-**Ein Nutzer aktualisiert sein Profilbild auf einer Webseite. Das Foto wird zum Server gesendet und das *alte Bild ersetzt*.**
-
-**Welche HTTP-Methode wird für diese Operation verwendet, und warum nicht GET?**
-
-* [ ] **GET** – GET kann auch Daten senden, wenn eine URL mit Parameter verwendet wird.
-* [x] **PUT – ersetzt eine existierende Ressource. GET ruft nur Daten ab und sendet *keine* Daten zum Server.** ✅
-* [ ] **POST** – POST ist immer für das Ersetzen von Daten zuständig.
-* [ ] **DELETE** – DELETE sendet das neue Foto und löscht gleichzeitig das alte.
-
-> **Feedback:** PUT – Daten ersetzen (eine existierende Ressource wird überschrieben). GET ruft nur Daten ab, sendet keine Daten zum Server.
-
----
-
-### Q13 – HTTP Status-Codes: Fehlerdiagnose (2 pt)
-
-**Du rufst eine Webseite auf und der Browser zeigt folgende Fehlermeldung an:**
-`HTTP/1.1 503 Service Unavailable`
-
-**Was bedeutet dieser Code, und wer ist für die Behebung zuständig – du oder der Betreiber der Webseite?**
-
-* [ ] Client-Fehler: Du hast die falsche URL eingegeben – ein 5xx-Code bedeutet, dass deine Anfrage falsch war.
-* [ ] Erfolgs-Code: 503 bedeutet, dass der Server die Anfrage erfolgreich umgeleitet hat.
-* [x] **Server-Fehler: Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Betreiber – du kannst nur später erneut versuchen.** ✅
-* [ ] Der Code bedeutet, dass der Server die Seite dauerhaft verschoben hat – du muss die neue URL suchen.
-
-> **Feedback:** 503 ist ein 5xx-Code = Server-Fehler. Der Server ist überlastet oder temporär nicht verfügbar. Verantwortung liegt beim Serverbetreiber, nicht beim Nutzer.
-
----
-
-### Q14 – DNS: Rolle im Ablauf (2 pt)
-
-**Du gibst `https://hdm-stuttgart.de` in die Adresszeile ein.**
-
-**Was passiert *vor* dem TCP-Handshake, und warum ist dieser Schritt zwingend nötig?**
-
-* [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach für die Verschlüsselung benötigt.
-* [x] **DNS-Auflösung: Der Name `hdm-stuttgart.de` wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen, nicht zu Namen.** ✅
-* [ ] DNS passiert nach dem TCP-Handshake – erst wird die Verbindung aufgebaut, dann der Name aufgelöst.
-* [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.
-
-> **Feedback:** DNS-Auflösung: Der Name „hdm-stuttgart.de" wird in eine IP-Adresse umgewandelt. TCP braucht eine IP-Adresse – names können nicht direkt verbunden werden.
-
----
-
-### Q15 – CSS Spezifität: Welche Regel gewinnt? (2 pt)
-
-**Gegeben folgender CSS-Code:**
-
-```css
-p           { color: blue; }      /* (A) */
-.highlight  { color: green; }     /* (B) */
-#main       { color: red; }       /* (C) */
-
-```
-
-**Ein Element `<p class="highlight" id="main">Text</p>` wird angezeigt.**
-**Welche Farbe zeigt der Text an, und warum?**
-
-* [ ] **Blau** – die Element-Regel steht zuerst im Code und hat daher Vorrang.
-* [ ] **Grün** – Klassen-Selektoren haben immer Vorrang vor IDs.
-* [x] **Rot – die ID-Regel `#main` hat die höchste Spezifität (0,1,0,0) und gewinnt über Klasse (0,0,1,0) und Element (0,0,0,1).** ✅
-* [ ] **Rot** – die letzte Regel im Code gewinnt immer, unabhängig vom Selektor-Typ.
-
-> **Feedback:** Spezifität: ID (0,1,0,0) > Klasse (0,0,1,0) > Element (0,0,0,1). Alle drei Regeln treffen das Element – ID #main gewinnt → rot.
-
----
-
-### Q16 – Responsive Design: Mobile First (2 pt)
-
-**Ein Developer schreibt folgendes CSS:**
-
-```css
-.container { background: white; }
-
-@media (min-width: 768px) {
-    .container { background: blue; }
-}
-
-@media (min-width: 1024px) {
-    .container { background: green; }
-}
-
-```
-
-**Welche Farbe hat `.container` bei einem Bildschirm von 900 px Breite, und warum?**
-
-* [ ] **Weiß** – Media-Queries gelten nur ab 1024 px, darunter bleibt immer die Basis-Farbe.
-* [ ] **Grün** – die letzte Media-Query überschreibt immer alle vorherigen.
-* [x] **Blau – bei 900 px greift `min-width: 768px` (900 ≥ 768), aber `min-width: 1024px` greift nicht (900 < 1024).** ✅
-* [ ] **Weiß** – bei 900 px greift keine Media-Query, da 900 zwischen den beiden Breakpoints liegt.
-
-> **Feedback:** Mobile First: Basis = white. Bei 900px greift min-width: 768px → blue. min-width: 1024px greift NICHT (900 < 1024). Ergebnis: blau.
-
----
-
-### Q17 – Zusammen: Reihenfolge eines HTTPS-Aufrufs (1 pt)
-
-**Du gibst eine URL ein. Welche Reihenfolge der Schritte ist korrekt?**
-
-* [ ] (1) TCP-Handshake → (2) DNS → (3) HTTP GET → (4) HTTP 200 OK
-* [x] **(1) DNS → (2) TCP-Handshake → (3) HTTP GET → (4) HTTP 200 OK** ✅
-* [ ] (1) HTTP GET → (2) DNS → (3) TCP-Handshake → (4) HTTP 200 OK
-* [ ] (1) DNS → (2) HTTP GET → (3) TCP-Handshake → (4) HTTP 200 OK
-
-> **Feedback:** Korrekte Reihenfolge: (1) DNS-Auflösung, (2) TCP 3-Way-Handshake, (3) HTTP-Request (GET), (4) HTTP-Response (200 OK + HTML).
-
----
-
-### Q18 – Bonusfrage: Spezifität Edge Case (1 pt)
-
-**Es gibt zwei CSS-Regeln für ein `<p>`-Element:**
-
-```css
-p p p p p p p p p p  { color: blue; }   /* 100× Element-Selektor */
-.highlight           { color: red; }    /* 1× Klasse */
-
-```
-
-**Das Element hat die Klasse `highlight`. Welche Farbe gewinnt?**
-
-* [ ] **Blau** – 100 Element-Selektoren ergeben 0,0,0,100 = höhere Spezifität als 0,0,1,0.
-* [x] **Rot – eine Klasse (0,0,1,0) gewinnt immer gegen beliebig viele Element-Selektoren (0,0,0,n). Spezifität-Stellen überschreiben sich, nicht addieren.** ✅
-* [ ] **Blau** – die längere Regel (mehr Selektoren) hat immer höhere Spezifität.
-* [ ] Unentschieden – die Regeln haben exakt gleiche Spezifität.
-
-> **Feedback:** Eine einzelne Klasse (0,0,1,0) schlägt immer hundert Element-Selektoren (0,0,0,100). Spezifität wird nicht additiv „aufgezählt" – die Stelle zählt als Einheit.
-
----
-
-### Q19 – Von-Neumann: Der Flaschenhals (Engpass)
-
-**Die Von-Neumann-Architektur hat einen bekannten Nachteil, den sogenannten „Von-Neumann-Flaschenhals“. Was ist damit gemeint?**
-
-* [ ] Das Steuerwerk kann Befehle schneller verarbeiten, als das Rechenwerk sie berechnen kann.
-* [x] **Die CPU ist schneller als der Datentransfer über den gemeinsamen Bus. Da Daten und Befehle denselben Bus nutzen, müssen sie nacheinander geladen werden.** ✅
-* [ ] Der Speicher verliert seine Daten, wenn der Strom abgeschaltet wird, was den Startvorgang verlangsamt.
-* [ ] Die Ein-/Ausgabegeräte blockieren den Prozessor dauerhaft, da sie keinen eigenen Speicher haben.
-
-> **Feedback:** Der Flaschenhals entsteht, weil Befehle und Daten sich den gleichen Weg (Bus) teilen müssen und der Speicherzugriff langsamer ist als die CPU-Geschwindigkeit.
-
----
-
-### Q20 – HTML: Encoding (Charset)
-
-**In Q4 ging es um Metadaten. Ein weiteres wichtiges Tag im `<head>` ist `<meta charset="UTF-8">`. Was ist die konkrete Konsequenz, wenn dieses Tag fehlt oder falsch ist?**
-
-* [ ] Die Webseite lädt gar nicht, da der Browser den Binärcode nicht interpretieren kann.
-* [x] **Sonderzeichen (Umlaute, Emojis) werden als kryptische Symbole („Hieroglyphen“) dargestellt, da der Browser die falsche Zeichenkodierung rät.** ✅
-* [ ] Die Seite wird langsamer, da der Browser erst alle Sprachen der Welt durchprobieren muss.
-* [ ] Das CSS wird nicht geladen, da CSS zwingend UTF-8 voraussetzt.
-
-> **Feedback:** Ohne definierte `charset` (Zeichensatz) nutzt der Browser oft einen Standard (z. B. Latin-1), was bei UTF-8-gespeicherten Dateien zu Darstellungsfehlern bei ä, ö, ü oder Emojis führt.
-
----
-
-### Q21 – Barrierefreiheit: POUR-Prinzip
-
-**Die WCAG basieren auf vier Prinzipien (POUR). Eines davon ist „Bedienbarkeit“ (Operable). Welches Szenario beschreibt eine Verletzung dieses Prinzips?**
-
-* [ ] Der Textkontrast ist zu gering (grau auf hellgrau), sodass man ihn kaum lesen kann.
-* [x] **Eine Navigation funktioniert nur per Maus (Hover), ist aber per Tastatur (Tab-Taste) nicht erreichbar.** ✅
-* [ ] Der Inhalt ist in sehr komplizierter Fachsprache geschrieben, die ein Laie nicht versteht.
-* [ ] Die Webseite stürzt in alten Browsern ab.
-
-> **Feedback:** „Bedienbar“ bedeutet, dass die Schnittstelle (Buttons, Links) von jedem genutzt werden kann – also auch ohne Maus (nur Tastatur). Kontrast gehört zu „Wahrnehmbar“ (Perceivable).
-
----
-
-### Q22 – Encapsulation: Die Empfänger-Seite (Decapsulation)
-
-**In Q8 haben wir Daten verpackt. Wenn der Server das Signal empfängt, passiert das Gegenteil (Decapsulation). In welcher Reihenfolge werden die Header *entfernt*?**
-
-* [ ] Anwendung (HTTP) → Transport (TCP) → Internet (IP) → Netzzugang (Ethernet)
-* [ ] Es werden alle Header gleichzeitig entfernt, sobald die Daten im RAM liegen.
-* [x] **Netzzugang (Ethernet-Header weg) → Internet (IP-Header weg) → Transport (TCP-Header weg) → Daten.** ✅
-* [ ] Internet (IP) → Netzzugang (Ethernet) → Transport (TCP) → Anwendung (HTTP)
-
-> **Feedback:** Das Auspacken erfolgt in umgekehrter Reihenfolge wie das Einpacken (Zwiebel-Prinzip). Erst wird der Umschlag (Ethernet) geöffnet, dann das Paket (IP), dann das Segment (TCP).
-
----
-
-### Q23 – Ports: Wozu genau?
-
-**Wir wissen aus Q9, dass IP-Adressen Computer identifizieren. Wozu genau dient dann die Port-Nummer (z. B. 80 oder 443) auf dem Zielrechner?**
-
-* [ ] Sie bestimmt die Geschwindigkeit der Verbindung.
-* [ ] Sie dient zur Verschlüsselung der Daten.
-* [x] **Sie adressiert den konkreten Dienst bzw. die Anwendung auf dem Computer (z. B. Webserver vs. Mailserver).** ✅
-* [ ] Sie zeigt an, ob der Computer per WLAN oder Kabel verbunden ist.
-
-> **Feedback:** Die IP ist wie die Hausnummer (welches Gebäude?), der Port ist wie die Türnummer oder der Name an der Klingel (wer im Haus soll das Paket bekommen? Webserver? Mailserver?).
-
----
-
-### Q24 – TCP: Sequenznummern
-
-**TCP ist zuverlässig. Ein Mechanismus dafür sind „Sequenznummern“ im Header. Welches Problem lösen diese konkret?**
-
-* [ ] Sie verhindern, dass Hacker die Verbindung abhören können.
-* [x] **Pakete können im Internet unterschiedliche Routen nehmen und in falscher Reihenfolge ankommen. Sequenznummern erlauben das korrekte Sortieren beim Empfänger.** ✅
-* [ ] Sie zählen, wie viele Benutzer gerade gleichzeitig auf dem Server sind.
-* [ ] Sie bestimmen die maximale Größe einer Datei.
-
-> **Feedback:** Da IP-Pakete überholen können, kommen Teil 2 und Teil 3 vielleicht vor Teil 1 an. TCP sortiert sie anhand der Nummern wieder richtig. UDP macht das nicht.
-
----
-
-### Q25 – HTTP Methoden: Sicherheit
-
-**Warum sollte man niemals die GET-Methode verwenden, um sensible Daten (z. B. ein Passwort) an den Server zu senden?**
-
-* [ ] GET ist langsamer als POST und Passwörter müssen schnell übertragen werden.
-* [x] **Bei GET stehen die Daten sichtbar in der URL (Browser-Verlauf, Server-Logs, Proxy-Server). Bei POST stehen sie im Body.** ✅
-* [ ] GET erlaubt nur Zahlen, keine Buchstaben.
-* [ ] GET-Anfragen werden vom Server nicht verschlüsselt, POST-Anfragen immer.
-
-> **Feedback:** Parameter bei GET hängen an der URL (`?pw=123`). Das ist in der History und in Logs sichtbar. HTTPS verschlüsselt zwar beides auf der Leitung, aber die URL ist an zu vielen Stellen sichtbar.
-
----
-
-### Q26 – HTTP Status: 404 Not Found
-
-**Du erhältst einen 404-Fehler. In Q13 (503) lag der Fehler beim Server. Wer hat beim 404-Fehler „Schuld“ bzw. wo liegt die Ursache meistens?**
-
-* [ ] Der Server ist abgestürzt.
-* [ ] Das Internet ist ausgefallen.
-* [x] **Der Client (Nutzer). Es wurde eine URL angefordert, die es nicht gibt (Tippfehler oder veralteter Link).** ✅
-* [ ] Der DNS-Server konnte den Namen nicht auflösen.
-
-> **Feedback:** 4xx-Codes sind Client-Errors. Der Server funktioniert super, er sagt dir nur: „Das, was du (Client) suchst, habe ich nicht.“
-
----
-
-### Q27 – CSS: `!important` vs. ID
-
-**In Q15 hat die ID gewonnen. Nun ändern wir den Code:**
-
-```css
-#main { color: red; }
-p     { color: blue !important; }
-
-```
-
-**Welche Farbe hat das `<p id="main">` Element nun?**
-
-* [ ] **Rot** – ID ist immer noch spezifischer als ein Element-Selektor.
-* [ ] **Lila** – Die Farben mischen sich.
-* [x] **Blau** – `!important` durchbricht die normale Spezifitäts-Kaskade und gewinnt sogar gegen IDs (außer die ID hat auch !important). ✅
-* [ ] **Rot** – `!important` wird von modernen Browsern ignoriert.
-
-> **Feedback:** `!important` ist die „Atombombe“ im CSS. Es überschreibt normale Spezifitätsregeln (ID, Klasse, Element). Es sollte daher sehr sparsam eingesetzt werden.
-
----
-
-### Q28 – Responsive Design: Desktop First
-
-**In Q16 nutzten wir `min-width` (Mobile First). Wie würde die Media Query aussehen, wenn wir „Desktop First“ arbeiten würden (also Standard ist Desktop, Anpassung für kleine Screens)?**
-
-* [ ] `@media (device-width: small) { ... }`
-* [ ] `@media (min-width: ...)` – das bleibt gleich, nur die Reihenfolge ändert sich.
-* [x] **`@media (max-width: ...)` – Wir definieren Stile für Bildschirme, die *kleiner* als eine bestimmte Breite sind.** ✅
-* [ ] `@media (mobile: true) { ... }`
-
-> **Feedback:** Desktop First bedeutet: Das Basis-CSS ist für große Schirme. Mit `max-width` (maximale Breite) definieren wir Ausnahmen für Geräte, die schmaler sind (Tablets, Handys).

flake.nix

@@ -1,5 +1,5 @@
 {
-  description = "HdM Slides - Marp presentation builder with tools";
+  description = "HdM Slides - Marp presentation builder";
 
   inputs = {
     nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
@@ -9,116 +9,19 @@
   outputs = { self, nixpkgs, flake-utils }:
     flake-utils.lib.eachDefaultSystem (system:
       let
-        pkgs = import nixpkgs { inherit system; config.allowUnfree = true; };
+        pkgs = import nixpkgs { inherit system; };
-
-
-        # QR code generator script
-        qr-gen = pkgs.writeShellScriptBin "qr" ''
-          if [ -z "$1" ]; then
-            echo "Usage: qr <url> [output.png]"
-            echo ""
-            echo "Examples:"
-            echo "  qr https://example.com"
-            echo "  qr https://example.com my-qr.png"
-            echo "  qr 'https://librete.ch/hdm/223015b/' slides-qr.png"
-            exit 1
-          fi
-
-          URL="$1"
-          OUTPUT="''${2:-qr-code.png}"
-
-          ${pkgs.qrencode}/bin/qrencode -o "$OUTPUT" -s 10 -m 2 "$URL"
-          echo "Generated: $OUTPUT"
-        '';
-
-        # QR code for course slides
-        qr-slides = pkgs.writeShellScriptBin "qr-slides" ''
-          COURSE="''${1:-223015b}"
-          OUTPUT="''${2:-build/$COURSE/qr-$COURSE.png}"
-
-          mkdir -p "$(dirname "$OUTPUT")"
-          ${pkgs.qrencode}/bin/qrencode -o "$OUTPUT" -s 10 -m 2 "https://librete.ch/hdm/$COURSE/"
-          echo "Generated QR for $COURSE: $OUTPUT"
-        '';
-
-        # Image optimizer script
-        optimize-img = pkgs.writeShellScriptBin "optimize-img" ''
-          if [ -z "$1" ]; then
-            echo "Usage: optimize-img <image-or-directory> [max-width]"
-            echo ""
-            echo "Resizes images to max width (default: 1920px)"
-            exit 1
-          fi
-
-          TARGET="$1"
-          MAX_WIDTH="''${2:-1920}"
-
-          if [ -d "$TARGET" ]; then
-            for img in "$TARGET"/*.{png,jpg,jpeg,webp} 2>/dev/null; do
-              [ -f "$img" ] || continue
-              echo "Optimizing: $(basename "$img")"
-              ${pkgs.imagemagick}/bin/magick "$img" -resize "''${MAX_WIDTH}x>" -quality 85 "$img"
-            done
-          elif [ -f "$TARGET" ]; then
-            echo "Optimizing: $TARGET"
-            ${pkgs.imagemagick}/bin/magick "$TARGET" -resize "''${MAX_WIDTH}x>" -quality 85 "$TARGET"
-          else
-            echo "Error: $TARGET not found"
-            exit 1
-          fi
-          echo "Done!"
-        '';
-
       in {
-        # Development shell with all tools
         devShells.default = pkgs.mkShell {
           buildInputs = with pkgs; [
-            nodejs_20
+            nodejs_22
             nodePackages.npm
-            qrencode
-            imagemagick
             gnumake
-            claude-code
           ];
 
           shellHook = ''
-            echo "HdM Slides Development Environment"
+            echo "HdM Slides - run 'make' for available commands"
-            echo ""
-            echo "Available commands:"
-            echo "  make dev-b     - Start 223015b dev server (port 1312)"
-            echo "  make dev-c     - Start 223015c dev server (port 1313)"
-            echo "  make build     - Build all courses"
-            echo "  qr <url>       - Generate QR code"
-            echo "  qr-slides 223015b - Generate QR for course"
-            echo "  optimize-img <dir> - Optimize images"
-            echo ""
           '';
         };
-
-        # Standalone apps
-        packages = {
-          qr = qr-gen;
-          qr-slides = qr-slides;
-          optimize-img = optimize-img;
-          default = qr-gen;
-        };
-
-        # Direct runnable apps
-        apps = {
-          qr = {
-            type = "app";
-            program = "${qr-gen}/bin/qr";
-          };
-          qr-slides = {
-            type = "app";
-            program = "${qr-slides}/bin/qr-slides";
-          };
-          optimize-img = {
-            type = "app";
-            program = "${optimize-img}/bin/optimize-img";
-          };
-          default = self.apps.${system}.qr;
-        };
       }
     );
 }

scripts/dev-server.sh

@@ -1,12 +1,16 @@
 #!/usr/bin/env bash
-# Simplified development server for HdM slides
+# Development server for HdM slides
-# Starts single Marp server for all courses
+# Usage:
+#   ./dev-server.sh              - Marp live server for all courses (port 1312)
+#   ./dev-server.sh 223015b 1313 - Marp live server for single course
+#   ./dev-server.sh 223015c 1314 - Marp live server for single course
 
 set -e
 
 # Configuration
 SLIDES_DIR="slides"
-DEV_PORT=3000
+COURSE="${1:-}"
+DEV_PORT="${2:-1312}"
 
 # Colors
 GREEN='\033[0;32m'
@@ -14,40 +18,27 @@ BLUE='\033[0;34m'
 RED='\033[0;31m'
 NC='\033[0m' # No Color
 
-# Cleanup function
+# Kill existing process on our port only
-cleanup() {
+kill_port() {
-    echo -e "\n${RED}Shutting down dev server...${NC}"
+    fuser -k "$DEV_PORT/tcp" 2>/dev/null || true
-    pkill -f "marp-cli.*--server" 2>/dev/null || true
+    sleep 0.5
-    exit 0
-}
-
-# Kill existing processes on our port
-kill_existing() {
-    echo -e "${BLUE}Cleaning up existing processes...${NC}"
-    pkill -9 -f "marp-cli" 2>/dev/null || true
-    fuser -k $DEV_PORT/tcp 2>/dev/null || true
-    sleep 1
 }
 
 # Main
-trap cleanup SIGINT SIGTERM
+trap 'echo -e "\n${RED}Shutting down...${NC}"; kill 0; exit 0' SIGINT SIGTERM
 
-kill_existing
+kill_port
 
-echo -e "${GREEN}Starting development server...${NC}"
+if [ -n "$COURSE" ]; then
-echo ""
+    SERVE_DIR="$SLIDES_DIR/$COURSE"
-echo -e "  Server:   ${BLUE}http://localhost:$DEV_PORT${NC}"
+    echo -e "${GREEN}Marp dev server${NC} · ${BLUE}$COURSE${NC}"
-echo -e "  Slides:   ${BLUE}$SLIDES_DIR/${NC}"
+else
-echo ""
+    SERVE_DIR="$SLIDES_DIR"
-echo -e "Available courses:"
+    echo -e "${GREEN}Marp dev server${NC} · ${BLUE}all courses${NC}"
-echo -e "  223015b: ${BLUE}http://localhost:$DEV_PORT/223015b/${NC}"
+fi
-echo -e "  223015c: ${BLUE}http://localhost:$DEV_PORT/223015c/${NC}"
+
-echo ""
+echo -e "  ${BLUE}http://localhost:$DEV_PORT${NC}"
-echo -e "Press ${RED}Ctrl+C${NC} to stop the server"
+echo -e "  ${BLUE}$SERVE_DIR/${NC}"
 echo ""
 
-# Start single Marp server for all slides
+PORT=$DEV_PORT exec npx @marp-team/marp-cli --server "$SERVE_DIR/"
-PORT=$DEV_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/"
-
-# Wait for process to exit
-wait

scripts/generate-index.sh

@@ -41,7 +41,6 @@ TOPIC_MAP["vertiefung-offene-fragen"]="Vertiefung & Offene Fragen"
 TOPIC_MAP["geschichte-grundlagen-html"]="Geschichte, Grundlagen & HTML"
 TOPIC_MAP["netzwerke-protokolle-css"]="Netzwerke, Protokolle & CSS"
 TOPIC_MAP["interaktivitaet-javascript"]="Interaktivität & JavaScript"
-TOPIC_MAP["klausurfragen"]="Klausurfragen"
 
 # Configure which topics should appear disabled per course
 # Two modes: fully disabled (non-clickable card) and buttons-disabled (link remains clickable, buttons are disabled)
@@ -231,7 +230,7 @@ cat > "$BUILD_DIR/index.html" << HEADER
     <h1>HdM Vorlesungen</h1>
     <h2 class="course-heading">$TITLE</h2>
     <p class="subtitle">$SUBTITLE</p>
-    <p class="meta">HdM Stuttgart · Wintersemester 2025/26 · Michael Czechowski</p>
+    <p class="meta">HdM Stuttgart · Sommersemester 2026 · Michael Czechowski</p>
   </header>
   <div class="termine">
 HEADER

scripts/generate-root-index.sh

@@ -1,8 +1,8 @@
 #!/usr/bin/env bash
-# Generate root index.html for /hdm/
+# Generate root index.html for HdM slides overview
-# Lists all courses (klausurfragen are now per-course)
+# Usage: ./generate-root-index.sh
 
-BUILD_DIR="build"
+BUILD_DIR="${1:-build}"
 
 cat > "$BUILD_DIR/index.html" << 'HEADER'
 <!DOCTYPE html>
@@ -78,31 +78,6 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
       margin: 0.25rem 0;
     }
     .course-info { font-size: 0.85rem; color: #86868b; }
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0.5rem 1rem;
-      border-radius: 8px;
-      text-decoration: none;
-      font-size: 0.8rem;
-      font-weight: 500;
-      transition: all 0.2s;
-      white-space: nowrap;
-      position: relative;
-      z-index: 1;
-      margin-right: 0.5rem;
-    }
-    .btn-slides {
-      background: #6c757d;
-      color: #fff;
-    }
-    .btn-slides:hover { filter: brightness(1.1); }
-    .btn-pdf {
-      background: #f5f5f7;
-      color: #1d1d1f;
-    }
-    .btn-pdf:hover { background: #e8e8ed; }
     .section-title {
       font-size: 1rem;
       font-weight: 600;
@@ -137,31 +112,27 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
     @media (max-width: 600px) {
       .course-card { grid-template-columns: 1fr; }
       .course-link { padding-bottom: 0.75rem; }
-      .btn { margin: 0 1rem 1rem 1.5rem; }
     }
   </style>
 </head>
 <body>
   <h1>HdM Vorlesungen</h1>
-  <p class="subtitle">Wintersemester 2025/26 · Michael Czechowski</p>
+  <p class="subtitle">Sommersemester 2026 · Michael Czechowski</p>
   <div class="courses">
     <div class="course-card course-b">
       <a href="223015b/" class="course-link">
         <span class="course-label">223015b</span>
         <div class="course-title">Dateiformate, Schnittstellen, Speichermedien &amp; Distributionswege</div>
-        <span class="course-info">6 Kapitel · Modul "Technik 1"</span>
+        <span class="course-info">6 Kapitel · Modul &quot;Technik 1&quot;</span>
       </a>
     </div>
     <div class="course-card course-c">
       <a href="223015c/" class="course-link">
         <span class="course-label">223015c</span>
         <div class="course-title">Grundlagen IT- und Internettechnik</div>
-        <span class="course-info">3 Kapitel · Modul "Technik 1"</span>
+        <span class="course-info">3 Kapitel · Modul &quot;Technik 1&quot;</span>
       </a>
     </div>
-HEADER
-
-cat >> "$BUILD_DIR/index.html" << 'FOOTER'
   </div>
   <h2 class="section-title">Referenzen</h2>
   <div class="references">
@@ -182,6 +153,6 @@ cat >> "$BUILD_DIR/index.html" << 'FOOTER'
   </footer>
 </body>
 </html>
-FOOTER
+HEADER
 
 echo "Generated $BUILD_DIR/index.html"

slides/223015b/00-intro.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -82,173 +82,109 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
 ![bg fit](./assets/qrcode-0.svg)
 
 ---
 
 <!-- _class: lead -->
 
-# Willkommen!
+# Herzlich willkommen!
 ## Einführung
 
 ---
 
 # Über mich
 
-**Michael Czechowski**
+**Michael Werner Czechowski**
 
-- Irgendwas mit IT, Cloud und AI
+- Systems and Platform Engineer
 - Schwerpunkte:
   - Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source
 - Hintergrund:
-  - Philosophie (Uni Stuttgart) -> NO degree
+  - Philosophie (Uni Stuttgart)
-  - Wirtschafts-Informatik (Leibniz-FH) -> B.Sc.
+  - Wirtschaftsinformatik (Leibniz-FH Hannover)
 - Kontakt: lb-czechowski@hdm-stuttgart.de
 
+---
+
+# Warum dieses Modul?
+
+**Digitale Medien sind überall.**
+
+* Warum enthalten Fotos oft Informationen über den Aufnahmeort?
+* Warum lassen sich gelöschte Dateien wiederherstellen?
+* Warum benötigt eine Minute 4K-Video unkomprimiert 45 GB Speicher?
+* Warum zeigt eine "1 TB"-Festplatte nur 931 GB an?
+* Warum ist USB-C nicht gleich USB-C?
+* Ziel: **→ Mitreden können!**
+
 <!--
-Kurze Vorstellung
+1. EXIF (Exchangeable Image File Format)-Metadaten speichern GPS-Koordinaten, Kameramodell und Zeitstempel automatisch. Die meisten wissen nicht, dass diese Daten beim Versenden mitgeschickt werden. → Kapitel 4: Metadaten
-Praxisbezug betonen
+
-Fragen jederzeit willkommen
+2. Beim Löschen wird nur der Verzeichniseintrag im Dateisystem entfernt, nicht die Daten selbst. Die Bits bleiben auf dem Datenträger, bis sie überschrieben werden. → Kapitel 3: Dateisysteme
+
+3. 3840 × 2160 Pixel × 3 Byte (RGB) × 30 Bilder/Sek × 60 Sek = ~45 GB. Codecs wie H.264/H.265 komprimieren um Faktor 100+. → Kapitel 1+2: Kompression
+
+4. Hersteller rechnen dezimal (1 TB = 10¹² Bytes), Betriebssysteme binär (1 TiB = 2⁴⁰ Bytes). Die Differenz beträgt bei Terabyte bereits ~10%. → Kapitel 1: Dateneinheiten
+
+5. USB-C ist nur die Steckerform. Dahinter können USB 2.0 (480 Mbit/s), USB 3.2 (20 Gbit/s) oder Thunderbolt 4 (40 Gbit/s) laufen — gleiches Kabel, völlig unterschiedliche Leistung. → Kapitel 3: Schnittstellen
 -->
 
 ---
 
-<!-- _footer: '' -->
-
-![bg fit](./assets/jung-naiv.png)
-
----
-
-# AMA (Ask my anything)
-
-*Nur ein Vorschlag ...*
-
-* Hast du alle Bände von AoT daheim?
-* Hast du eine Studierenden-Kneipe mal geleitet?
-* Hast du wirklich 17 Semester Philosophie ohne Abschluss studiert?
-
----
-
 # Kurze Umfrage
 
 **Bitte Hand heben:**
 
-1) Wer hat schon mal ein Video komprimiert/konvertiert?
+* Wer kennt den Unterschied zwischen analog und digital?
-2) Wer kennte die 3-2-1 Regel?
+* Wer hat schon mal eine Datei von einem Format in ein anderes konvertiert?
-3) Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
+* Wer hat schon mal Metadaten aus einem Foto entfernt?
-4) Wer hat schon mal mit APIs gearbeitet?
+* Wer hat schon mal ein Backup verloren?
-5) Wer weiß, was UTF-8 bedeutet?
+* Wer hat schon mal ein Backup wiederhergestellt?
-6) Wer hat schon mal mit einem CLI gearbeitet?
-6) **Wer hat schon mal etwas mit HTML oder CSS gemacht?** (Hex-Farben wie `#FF0000`?)
 
 <!--
 Niveau der Gruppe einschätzen
 Keine falschen Antworten
 Zeigt, wo wir starten
-HTML/CSS-Frage: Viele kennen Hex-Codes aus Webdesign
 API = Application Programming Interface
 -->
 
 ---
 
-# Warum dieses Modul?
-
-**Digitale Medien sind überall** – aber was steckt dahinter?
-
-* Warum ist ein JPEG kleiner als ein PNG?
-* Warum klingt MP3 anders als FLAC?
-* Warum zeigt meine 1 TB Festplatte nur 931 GB?
-* Warum ist USB-C so verwirrend?
-* Wie funktioniert eigentlich Streaming?
-* **→ Die Technik dahinter verstehen!**
-
-<!--
-Praxisnahe Fragen aus dem Alltag
-Nicht nur "was", sondern "warum"
-Verständnis für technische Entscheidungen
--->
-
----
-
-# Das Ziel
-
-**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
-
-Als Digital- und Medienwirtschaftler:innen werdet ihr täglich mit technischen Fragen konfrontiert:
-* Welches Format für welchen Zweck?
-* Welche Schnittstelle für welches Gerät?
-* Wie funktioniert die Distribution digitaler Inhalte?
-* **→ Mitreden können – nicht (zwingend) programmieren!**
-
-<!--
-Nicht: Ihr sollt Programmierer werden
-Sondern: Ihr sollt technische Entscheidungen verstehen
-Praxisbezug: Medienproduktion, Marketing, Projektmanagement
--->
-
----
-
-# Was ihr lernt
-
-**In dieser Veranstaltung erwerbt ihr folgende Kompetenzen:**
-
-* Fundiertes Grundwissen über Daten und Informationen
-* Dateiformate analysieren und verstehen
-* Grundlagen von Kompression (Audio, Bild, Video)
-* Speichermedien unterscheiden
-* Programmier-Schnittstellen kennenlernen
-* APIs und Distributionswege verstehen
-
-<!--
-Fokus auf Verständnis, nicht auf Programmierung
-Hands-On jede Woche: Selbst ausprobieren
-Ziel: Einblick in die Denkweise von Software-Entwicklern
--->
-
----
-
 # Kursübersicht
 
-**5 Termine:**
+**Kapitel:**
 
-| # | Datum | Thema |
+* 1. **Grundlagen**, Text & Audio (Bits, Bytes, Zeichenkodierung, MP3)
-|---|-------|-------|
+* 2. Bild- & Video-**Kompression** (JPEG, PNG, H.264/H.265)
-| 1 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
+* 3. **Speichermedien** & **Schnittstellen** (HDD, SSD, USB, Thunderbolt)
-| 2 | 09.01.2026 | Bild- & Video-Kompression |
+* 4. **Distribution** und Verteilung (Streaming, REST, Cloud)
-| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
+* Vertiefung & offene Fragen
-| 4 | 30.01.2026 | Distribution, APIs & Zukunft |
-| 5 | TBA | Vertiefung & offene Fragen |
 
-**Format:** Theorie + Hands-On (30-40 Min pro Termin)
-
-<!--
-Nicht nur theoretische Inhalte
-Praktische Übungen jede Woche
-Medienwissenschaftler:innen, nicht Informatiker:innen
--->
 
 ---
 
-# Prüfungsleistung 18.02.
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #e3f2fd -->
+
+# Prüfungsleistung
 
 **Nach aktuellem Kenntnisstand:**
 
-* 90 min (40% Grundlagen, 40% Dateiformate, 20% AV)
+* 90 min insg. (Technik 1)
-* Schriftliche Klausur
+* Schriftliche Klausur (digital)
 * Teils offene Fragen
-* Vermutlich digital
+* Kein Coding/Programmieren
-* Kein Coding!
+* **Prüfungsrelevante Folien:**
-* **Prüfungsrelevant:** Alles in den Folien/im Skript
+  - Gestreift oder Vollton (PDF) markiert
-
-<!--
-Details können sich noch ändern
-Keine Programmieraufgaben
-Verständnisfragen, keine Auswendiglernerei
--->
-

slides/223015b/03-speichermedien-schnittstellen.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -68,6 +68,38 @@ section.aufgabe {
 section.aufgabe footer {
   display: none;
 }
+section.erklaerung {
+  font-size: 1.1rem;
+  background: repeating-linear-gradient(
+    135deg,
+    #e3f2fd,
+    #e3f2fd 40px,
+    #fff 40px,
+    #fff 80px
+  ) !important;
+}
+@media print {
+  section.erklaerung {
+    background: #e3f2fd !important;
+  }
+}
+section.erklaerung h1 {
+  font-size: 1.5rem;
+  color: #1e5f8a;
+  margin-bottom: 0.3rem;
+}
+section.erklaerung ul,
+section.erklaerung ol {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung p {
+  font-size: 1.0rem;
+  line-height: 1.4;
+}
+section.erklaerung table {
+  font-size: 0.9rem;
+}
 </style>
 
 <!-- _class: invert -->
@@ -82,7 +114,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
@@ -235,6 +267,29 @@ Kleine SSD für System + große HDD für Archiv.
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# HDD vs. SSD – Vertiefung
+
+**HDD (Hard Disk Drive):** Magnetplatten rotieren mit 5.400–7.200 RPM; ein Schreib-/Lesekopf schwebt nanometerweit über der Oberfläche. Die Zugriffszeit setzt sich zusammen aus Seek Time (Kopf bewegen) + Rotational Latency (warten auf Sektor).
+
+**SSD (Solid State Drive):** NAND-Flash-Zellen speichern Bits als elektrische Ladung. Kein mechanischer Zugriff → konstant schnelle Latenz. Aber: Zellen haben begrenzte Schreibzyklen (P/E Cycles).
+
+| Aspekt | HDD | SATA SSD | NVMe SSD |
+|--------|-----|----------|----------|
+| Latenz | 5–10 ms | 0,1 ms | 0,02 ms |
+| Seq. Lesen | 150 MB/s | 550 MB/s | 7.000 MB/s |
+| IOPS (4K random) | 100 | 90.000 | 1.000.000 |
+| TBW (1 TB Modell) | ∞ | 600 TBW | 600 TBW |
+
+**Wear Leveling:** SSD-Controller verteilen Schreibvorgänge gleichmäßig, um einzelne Zellen nicht vorzeitig zu erschöpfen. TRIM informiert den Controller über gelöschte Blöcke.
+
+**Praxis:** System-SSD für OS/Anwendungen (Geschwindigkeit), HDD für Medienarchiv (Kapazität/Preis). RAID schützt vor Einzelausfällen bei beiden.
+
+---
+
 <!-- _class: lead -->
 
 # Dateisysteme
@@ -484,6 +539,30 @@ Warum 1 Offsite?
 
 ---
 
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# 3-2-1-Backup-Regel – Vertiefung
+
+Peter Krogh formulierte die Regel 2005 in „The DAM Book" (Digital Asset Management). Sie schützt gegen unterschiedliche Verlustszenarien:
+
+| Bedrohung | Schutz durch | Beispiel |
+|-----------|--------------|----------|
+| Hardware-Defekt | 3 Kopien | SSD stirbt → HDD-Backup vorhanden |
+| Firmware-Bug/Ransomware | 2 Medientypen | Malware infiziert nur ein System |
+| Feuer/Diebstahl/Flut | 1 Offsite | Haus brennt → Cloud-Backup sicher |
+
+**Moderne Erweiterung 3-2-1-1-0:**
+- **+1** Air-Gapped (offline, nicht verbunden)
+- **+0** Verifizierte Backups (regelmäßig Restore testen)
+
+**Ransomware-Problem:** Vernetzte Backups werden oft mitverschlüsselt. Air-Gapped-Medien (externe HDD im Safe, LTO-Band) bleiben sicher, weil sie physisch getrennt sind.
+
+**Realitäts-Check:** Die meisten Datenverluste entstehen durch menschliche Fehler (versehentliches Löschen), nicht Hardware-Ausfälle. Versionierte Backups (Time Machine, Borg) schützen auch davor – die gelöschte Datei existiert noch in älteren Snapshots.
+
+---
+
 # Backup-Arten
 
 **Vollständig (Full):**

slides/223015b/04-distribution-apis-zukunft.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -83,7 +83,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 

slides/223015b/05-vertiefung-offene-fragen.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 
@@ -83,7 +83,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 

slides/223015b/assets/grayscale-gradient.svg

@@ -0,0 +1,258 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2560 1440" preserveAspectRatio="none" shape-rendering="crispEdges">
+<rect x="0" y="0" width="10" height="1440" fill="rgb(255,255,255)"/>
+<rect x="10" y="0" width="10" height="1440" fill="rgb(254,254,254)"/>
+<rect x="20" y="0" width="10" height="1440" fill="rgb(253,253,253)"/>
+<rect x="30" y="0" width="10" height="1440" fill="rgb(252,252,252)"/>
+<rect x="40" y="0" width="10" height="1440" fill="rgb(251,251,251)"/>
+<rect x="50" y="0" width="10" height="1440" fill="rgb(250,250,250)"/>
+<rect x="60" y="0" width="10" height="1440" fill="rgb(249,249,249)"/>
+<rect x="70" y="0" width="10" height="1440" fill="rgb(248,248,248)"/>
+<rect x="80" y="0" width="10" height="1440" fill="rgb(247,247,247)"/>
+<rect x="90" y="0" width="10" height="1440" fill="rgb(246,246,246)"/>
+<rect x="100" y="0" width="10" height="1440" fill="rgb(245,245,245)"/>
+<rect x="110" y="0" width="10" height="1440" fill="rgb(244,244,244)"/>
+<rect x="120" y="0" width="10" height="1440" fill="rgb(243,243,243)"/>
+<rect x="130" y="0" width="10" height="1440" fill="rgb(242,242,242)"/>
+<rect x="140" y="0" width="10" height="1440" fill="rgb(241,241,241)"/>
+<rect x="150" y="0" width="10" height="1440" fill="rgb(240,240,240)"/>
+<rect x="160" y="0" width="10" height="1440" fill="rgb(239,239,239)"/>
+<rect x="170" y="0" width="10" height="1440" fill="rgb(238,238,238)"/>
+<rect x="180" y="0" width="10" height="1440" fill="rgb(237,237,237)"/>
+<rect x="190" y="0" width="10" height="1440" fill="rgb(236,236,236)"/>
+<rect x="200" y="0" width="10" height="1440" fill="rgb(235,235,235)"/>
+<rect x="210" y="0" width="10" height="1440" fill="rgb(234,234,234)"/>
+<rect x="220" y="0" width="10" height="1440" fill="rgb(233,233,233)"/>
+<rect x="230" y="0" width="10" height="1440" fill="rgb(232,232,232)"/>
+<rect x="240" y="0" width="10" height="1440" fill="rgb(231,231,231)"/>
+<rect x="250" y="0" width="10" height="1440" fill="rgb(230,230,230)"/>
+<rect x="260" y="0" width="10" height="1440" fill="rgb(229,229,229)"/>
+<rect x="270" y="0" width="10" height="1440" fill="rgb(228,228,228)"/>
+<rect x="280" y="0" width="10" height="1440" fill="rgb(227,227,227)"/>
+<rect x="290" y="0" width="10" height="1440" fill="rgb(226,226,226)"/>
+<rect x="300" y="0" width="10" height="1440" fill="rgb(225,225,225)"/>
+<rect x="310" y="0" width="10" height="1440" fill="rgb(224,224,224)"/>
+<rect x="320" y="0" width="10" height="1440" fill="rgb(223,223,223)"/>
+<rect x="330" y="0" width="10" height="1440" fill="rgb(222,222,222)"/>
+<rect x="340" y="0" width="10" height="1440" fill="rgb(221,221,221)"/>
+<rect x="350" y="0" width="10" height="1440" fill="rgb(220,220,220)"/>
+<rect x="360" y="0" width="10" height="1440" fill="rgb(219,219,219)"/>
+<rect x="370" y="0" width="10" height="1440" fill="rgb(218,218,218)"/>
+<rect x="380" y="0" width="10" height="1440" fill="rgb(217,217,217)"/>
+<rect x="390" y="0" width="10" height="1440" fill="rgb(216,216,216)"/>
+<rect x="400" y="0" width="10" height="1440" fill="rgb(215,215,215)"/>
+<rect x="410" y="0" width="10" height="1440" fill="rgb(214,214,214)"/>
+<rect x="420" y="0" width="10" height="1440" fill="rgb(213,213,213)"/>
+<rect x="430" y="0" width="10" height="1440" fill="rgb(212,212,212)"/>
+<rect x="440" y="0" width="10" height="1440" fill="rgb(211,211,211)"/>
+<rect x="450" y="0" width="10" height="1440" fill="rgb(210,210,210)"/>
+<rect x="460" y="0" width="10" height="1440" fill="rgb(209,209,209)"/>
+<rect x="470" y="0" width="10" height="1440" fill="rgb(208,208,208)"/>
+<rect x="480" y="0" width="10" height="1440" fill="rgb(207,207,207)"/>
+<rect x="490" y="0" width="10" height="1440" fill="rgb(206,206,206)"/>
+<rect x="500" y="0" width="10" height="1440" fill="rgb(205,205,205)"/>
+<rect x="510" y="0" width="10" height="1440" fill="rgb(204,204,204)"/>
+<rect x="520" y="0" width="10" height="1440" fill="rgb(203,203,203)"/>
+<rect x="530" y="0" width="10" height="1440" fill="rgb(202,202,202)"/>
+<rect x="540" y="0" width="10" height="1440" fill="rgb(201,201,201)"/>
+<rect x="550" y="0" width="10" height="1440" fill="rgb(200,200,200)"/>
+<rect x="560" y="0" width="10" height="1440" fill="rgb(199,199,199)"/>
+<rect x="570" y="0" width="10" height="1440" fill="rgb(198,198,198)"/>
+<rect x="580" y="0" width="10" height="1440" fill="rgb(197,197,197)"/>
+<rect x="590" y="0" width="10" height="1440" fill="rgb(196,196,196)"/>
+<rect x="600" y="0" width="10" height="1440" fill="rgb(195,195,195)"/>
+<rect x="610" y="0" width="10" height="1440" fill="rgb(194,194,194)"/>
+<rect x="620" y="0" width="10" height="1440" fill="rgb(193,193,193)"/>
+<rect x="630" y="0" width="10" height="1440" fill="rgb(192,192,192)"/>
+<rect x="640" y="0" width="10" height="1440" fill="rgb(191,191,191)"/>
+<rect x="650" y="0" width="10" height="1440" fill="rgb(190,190,190)"/>
+<rect x="660" y="0" width="10" height="1440" fill="rgb(189,189,189)"/>
+<rect x="670" y="0" width="10" height="1440" fill="rgb(188,188,188)"/>
+<rect x="680" y="0" width="10" height="1440" fill="rgb(187,187,187)"/>
+<rect x="690" y="0" width="10" height="1440" fill="rgb(186,186,186)"/>
+<rect x="700" y="0" width="10" height="1440" fill="rgb(185,185,185)"/>
+<rect x="710" y="0" width="10" height="1440" fill="rgb(184,184,184)"/>
+<rect x="720" y="0" width="10" height="1440" fill="rgb(183,183,183)"/>
+<rect x="730" y="0" width="10" height="1440" fill="rgb(182,182,182)"/>
+<rect x="740" y="0" width="10" height="1440" fill="rgb(181,181,181)"/>
+<rect x="750" y="0" width="10" height="1440" fill="rgb(180,180,180)"/>
+<rect x="760" y="0" width="10" height="1440" fill="rgb(179,179,179)"/>
+<rect x="770" y="0" width="10" height="1440" fill="rgb(178,178,178)"/>
+<rect x="780" y="0" width="10" height="1440" fill="rgb(177,177,177)"/>
+<rect x="790" y="0" width="10" height="1440" fill="rgb(176,176,176)"/>
+<rect x="800" y="0" width="10" height="1440" fill="rgb(175,175,175)"/>
+<rect x="810" y="0" width="10" height="1440" fill="rgb(174,174,174)"/>
+<rect x="820" y="0" width="10" height="1440" fill="rgb(173,173,173)"/>
+<rect x="830" y="0" width="10" height="1440" fill="rgb(172,172,172)"/>
+<rect x="840" y="0" width="10" height="1440" fill="rgb(171,171,171)"/>
+<rect x="850" y="0" width="10" height="1440" fill="rgb(170,170,170)"/>
+<rect x="860" y="0" width="10" height="1440" fill="rgb(169,169,169)"/>
+<rect x="870" y="0" width="10" height="1440" fill="rgb(168,168,168)"/>
+<rect x="880" y="0" width="10" height="1440" fill="rgb(167,167,167)"/>
+<rect x="890" y="0" width="10" height="1440" fill="rgb(166,166,166)"/>
+<rect x="900" y="0" width="10" height="1440" fill="rgb(165,165,165)"/>
+<rect x="910" y="0" width="10" height="1440" fill="rgb(164,164,164)"/>
+<rect x="920" y="0" width="10" height="1440" fill="rgb(163,163,163)"/>
+<rect x="930" y="0" width="10" height="1440" fill="rgb(162,162,162)"/>
+<rect x="940" y="0" width="10" height="1440" fill="rgb(161,161,161)"/>
+<rect x="950" y="0" width="10" height="1440" fill="rgb(160,160,160)"/>
+<rect x="960" y="0" width="10" height="1440" fill="rgb(159,159,159)"/>
+<rect x="970" y="0" width="10" height="1440" fill="rgb(158,158,158)"/>
+<rect x="980" y="0" width="10" height="1440" fill="rgb(157,157,157)"/>
+<rect x="990" y="0" width="10" height="1440" fill="rgb(156,156,156)"/>
+<rect x="1000" y="0" width="10" height="1440" fill="rgb(155,155,155)"/>
+<rect x="1010" y="0" width="10" height="1440" fill="rgb(154,154,154)"/>
+<rect x="1020" y="0" width="10" height="1440" fill="rgb(153,153,153)"/>
+<rect x="1030" y="0" width="10" height="1440" fill="rgb(152,152,152)"/>
+<rect x="1040" y="0" width="10" height="1440" fill="rgb(151,151,151)"/>
+<rect x="1050" y="0" width="10" height="1440" fill="rgb(150,150,150)"/>
+<rect x="1060" y="0" width="10" height="1440" fill="rgb(149,149,149)"/>
+<rect x="1070" y="0" width="10" height="1440" fill="rgb(148,148,148)"/>
+<rect x="1080" y="0" width="10" height="1440" fill="rgb(147,147,147)"/>
+<rect x="1090" y="0" width="10" height="1440" fill="rgb(146,146,146)"/>
+<rect x="1100" y="0" width="10" height="1440" fill="rgb(145,145,145)"/>
+<rect x="1110" y="0" width="10" height="1440" fill="rgb(144,144,144)"/>
+<rect x="1120" y="0" width="10" height="1440" fill="rgb(143,143,143)"/>
+<rect x="1130" y="0" width="10" height="1440" fill="rgb(142,142,142)"/>
+<rect x="1140" y="0" width="10" height="1440" fill="rgb(141,141,141)"/>
+<rect x="1150" y="0" width="10" height="1440" fill="rgb(140,140,140)"/>
+<rect x="1160" y="0" width="10" height="1440" fill="rgb(139,139,139)"/>
+<rect x="1170" y="0" width="10" height="1440" fill="rgb(138,138,138)"/>
+<rect x="1180" y="0" width="10" height="1440" fill="rgb(137,137,137)"/>
+<rect x="1190" y="0" width="10" height="1440" fill="rgb(136,136,136)"/>
+<rect x="1200" y="0" width="10" height="1440" fill="rgb(135,135,135)"/>
+<rect x="1210" y="0" width="10" height="1440" fill="rgb(134,134,134)"/>
+<rect x="1220" y="0" width="10" height="1440" fill="rgb(133,133,133)"/>
+<rect x="1230" y="0" width="10" height="1440" fill="rgb(132,132,132)"/>
+<rect x="1240" y="0" width="10" height="1440" fill="rgb(131,131,131)"/>
+<rect x="1250" y="0" width="10" height="1440" fill="rgb(130,130,130)"/>
+<rect x="1260" y="0" width="10" height="1440" fill="rgb(129,129,129)"/>
+<rect x="1270" y="0" width="10" height="1440" fill="rgb(128,128,128)"/>
+<rect x="1280" y="0" width="10" height="1440" fill="rgb(127,127,127)"/>
+<rect x="1290" y="0" width="10" height="1440" fill="rgb(126,126,126)"/>
+<rect x="1300" y="0" width="10" height="1440" fill="rgb(125,125,125)"/>
+<rect x="1310" y="0" width="10" height="1440" fill="rgb(124,124,124)"/>
+<rect x="1320" y="0" width="10" height="1440" fill="rgb(123,123,123)"/>
+<rect x="1330" y="0" width="10" height="1440" fill="rgb(122,122,122)"/>
+<rect x="1340" y="0" width="10" height="1440" fill="rgb(121,121,121)"/>
+<rect x="1350" y="0" width="10" height="1440" fill="rgb(120,120,120)"/>
+<rect x="1360" y="0" width="10" height="1440" fill="rgb(119,119,119)"/>
+<rect x="1370" y="0" width="10" height="1440" fill="rgb(118,118,118)"/>
+<rect x="1380" y="0" width="10" height="1440" fill="rgb(117,117,117)"/>
+<rect x="1390" y="0" width="10" height="1440" fill="rgb(116,116,116)"/>
+<rect x="1400" y="0" width="10" height="1440" fill="rgb(115,115,115)"/>
+<rect x="1410" y="0" width="10" height="1440" fill="rgb(114,114,114)"/>
+<rect x="1420" y="0" width="10" height="1440" fill="rgb(113,113,113)"/>
+<rect x="1430" y="0" width="10" height="1440" fill="rgb(112,112,112)"/>
+<rect x="1440" y="0" width="10" height="1440" fill="rgb(111,111,111)"/>
+<rect x="1450" y="0" width="10" height="1440" fill="rgb(110,110,110)"/>
+<rect x="1460" y="0" width="10" height="1440" fill="rgb(109,109,109)"/>
+<rect x="1470" y="0" width="10" height="1440" fill="rgb(108,108,108)"/>
+<rect x="1480" y="0" width="10" height="1440" fill="rgb(107,107,107)"/>
+<rect x="1490" y="0" width="10" height="1440" fill="rgb(106,106,106)"/>
+<rect x="1500" y="0" width="10" height="1440" fill="rgb(105,105,105)"/>
+<rect x="1510" y="0" width="10" height="1440" fill="rgb(104,104,104)"/>
+<rect x="1520" y="0" width="10" height="1440" fill="rgb(103,103,103)"/>
+<rect x="1530" y="0" width="10" height="1440" fill="rgb(102,102,102)"/>
+<rect x="1540" y="0" width="10" height="1440" fill="rgb(101,101,101)"/>
+<rect x="1550" y="0" width="10" height="1440" fill="rgb(100,100,100)"/>
+<rect x="1560" y="0" width="10" height="1440" fill="rgb(99,99,99)"/>
+<rect x="1570" y="0" width="10" height="1440" fill="rgb(98,98,98)"/>
+<rect x="1580" y="0" width="10" height="1440" fill="rgb(97,97,97)"/>
+<rect x="1590" y="0" width="10" height="1440" fill="rgb(96,96,96)"/>
+<rect x="1600" y="0" width="10" height="1440" fill="rgb(95,95,95)"/>
+<rect x="1610" y="0" width="10" height="1440" fill="rgb(94,94,94)"/>
+<rect x="1620" y="0" width="10" height="1440" fill="rgb(93,93,93)"/>
+<rect x="1630" y="0" width="10" height="1440" fill="rgb(92,92,92)"/>
+<rect x="1640" y="0" width="10" height="1440" fill="rgb(91,91,91)"/>
+<rect x="1650" y="0" width="10" height="1440" fill="rgb(90,90,90)"/>
+<rect x="1660" y="0" width="10" height="1440" fill="rgb(89,89,89)"/>
+<rect x="1670" y="0" width="10" height="1440" fill="rgb(88,88,88)"/>
+<rect x="1680" y="0" width="10" height="1440" fill="rgb(87,87,87)"/>
+<rect x="1690" y="0" width="10" height="1440" fill="rgb(86,86,86)"/>
+<rect x="1700" y="0" width="10" height="1440" fill="rgb(85,85,85)"/>
+<rect x="1710" y="0" width="10" height="1440" fill="rgb(84,84,84)"/>
+<rect x="1720" y="0" width="10" height="1440" fill="rgb(83,83,83)"/>
+<rect x="1730" y="0" width="10" height="1440" fill="rgb(82,82,82)"/>
+<rect x="1740" y="0" width="10" height="1440" fill="rgb(81,81,81)"/>
+<rect x="1750" y="0" width="10" height="1440" fill="rgb(80,80,80)"/>
+<rect x="1760" y="0" width="10" height="1440" fill="rgb(79,79,79)"/>
+<rect x="1770" y="0" width="10" height="1440" fill="rgb(78,78,78)"/>
+<rect x="1780" y="0" width="10" height="1440" fill="rgb(77,77,77)"/>
+<rect x="1790" y="0" width="10" height="1440" fill="rgb(76,76,76)"/>
+<rect x="1800" y="0" width="10" height="1440" fill="rgb(75,75,75)"/>
+<rect x="1810" y="0" width="10" height="1440" fill="rgb(74,74,74)"/>
+<rect x="1820" y="0" width="10" height="1440" fill="rgb(73,73,73)"/>
+<rect x="1830" y="0" width="10" height="1440" fill="rgb(72,72,72)"/>
+<rect x="1840" y="0" width="10" height="1440" fill="rgb(71,71,71)"/>
+<rect x="1850" y="0" width="10" height="1440" fill="rgb(70,70,70)"/>
+<rect x="1860" y="0" width="10" height="1440" fill="rgb(69,69,69)"/>
+<rect x="1870" y="0" width="10" height="1440" fill="rgb(68,68,68)"/>
+<rect x="1880" y="0" width="10" height="1440" fill="rgb(67,67,67)"/>
+<rect x="1890" y="0" width="10" height="1440" fill="rgb(66,66,66)"/>
+<rect x="1900" y="0" width="10" height="1440" fill="rgb(65,65,65)"/>
+<rect x="1910" y="0" width="10" height="1440" fill="rgb(64,64,64)"/>
+<rect x="1920" y="0" width="10" height="1440" fill="rgb(63,63,63)"/>
+<rect x="1930" y="0" width="10" height="1440" fill="rgb(62,62,62)"/>
+<rect x="1940" y="0" width="10" height="1440" fill="rgb(61,61,61)"/>
+<rect x="1950" y="0" width="10" height="1440" fill="rgb(60,60,60)"/>
+<rect x="1960" y="0" width="10" height="1440" fill="rgb(59,59,59)"/>
+<rect x="1970" y="0" width="10" height="1440" fill="rgb(58,58,58)"/>
+<rect x="1980" y="0" width="10" height="1440" fill="rgb(57,57,57)"/>
+<rect x="1990" y="0" width="10" height="1440" fill="rgb(56,56,56)"/>
+<rect x="2000" y="0" width="10" height="1440" fill="rgb(55,55,55)"/>
+<rect x="2010" y="0" width="10" height="1440" fill="rgb(54,54,54)"/>
+<rect x="2020" y="0" width="10" height="1440" fill="rgb(53,53,53)"/>
+<rect x="2030" y="0" width="10" height="1440" fill="rgb(52,52,52)"/>
+<rect x="2040" y="0" width="10" height="1440" fill="rgb(51,51,51)"/>
+<rect x="2050" y="0" width="10" height="1440" fill="rgb(50,50,50)"/>
+<rect x="2060" y="0" width="10" height="1440" fill="rgb(49,49,49)"/>
+<rect x="2070" y="0" width="10" height="1440" fill="rgb(48,48,48)"/>
+<rect x="2080" y="0" width="10" height="1440" fill="rgb(47,47,47)"/>
+<rect x="2090" y="0" width="10" height="1440" fill="rgb(46,46,46)"/>
+<rect x="2100" y="0" width="10" height="1440" fill="rgb(45,45,45)"/>
+<rect x="2110" y="0" width="10" height="1440" fill="rgb(44,44,44)"/>
+<rect x="2120" y="0" width="10" height="1440" fill="rgb(43,43,43)"/>
+<rect x="2130" y="0" width="10" height="1440" fill="rgb(42,42,42)"/>
+<rect x="2140" y="0" width="10" height="1440" fill="rgb(41,41,41)"/>
+<rect x="2150" y="0" width="10" height="1440" fill="rgb(40,40,40)"/>
+<rect x="2160" y="0" width="10" height="1440" fill="rgb(39,39,39)"/>
+<rect x="2170" y="0" width="10" height="1440" fill="rgb(38,38,38)"/>
+<rect x="2180" y="0" width="10" height="1440" fill="rgb(37,37,37)"/>
+<rect x="2190" y="0" width="10" height="1440" fill="rgb(36,36,36)"/>
+<rect x="2200" y="0" width="10" height="1440" fill="rgb(35,35,35)"/>
+<rect x="2210" y="0" width="10" height="1440" fill="rgb(34,34,34)"/>
+<rect x="2220" y="0" width="10" height="1440" fill="rgb(33,33,33)"/>
+<rect x="2230" y="0" width="10" height="1440" fill="rgb(32,32,32)"/>
+<rect x="2240" y="0" width="10" height="1440" fill="rgb(31,31,31)"/>
+<rect x="2250" y="0" width="10" height="1440" fill="rgb(30,30,30)"/>
+<rect x="2260" y="0" width="10" height="1440" fill="rgb(29,29,29)"/>
+<rect x="2270" y="0" width="10" height="1440" fill="rgb(28,28,28)"/>
+<rect x="2280" y="0" width="10" height="1440" fill="rgb(27,27,27)"/>
+<rect x="2290" y="0" width="10" height="1440" fill="rgb(26,26,26)"/>
+<rect x="2300" y="0" width="10" height="1440" fill="rgb(25,25,25)"/>
+<rect x="2310" y="0" width="10" height="1440" fill="rgb(24,24,24)"/>
+<rect x="2320" y="0" width="10" height="1440" fill="rgb(23,23,23)"/>
+<rect x="2330" y="0" width="10" height="1440" fill="rgb(22,22,22)"/>
+<rect x="2340" y="0" width="10" height="1440" fill="rgb(21,21,21)"/>
+<rect x="2350" y="0" width="10" height="1440" fill="rgb(20,20,20)"/>
+<rect x="2360" y="0" width="10" height="1440" fill="rgb(19,19,19)"/>
+<rect x="2370" y="0" width="10" height="1440" fill="rgb(18,18,18)"/>
+<rect x="2380" y="0" width="10" height="1440" fill="rgb(17,17,17)"/>
+<rect x="2390" y="0" width="10" height="1440" fill="rgb(16,16,16)"/>
+<rect x="2400" y="0" width="10" height="1440" fill="rgb(15,15,15)"/>
+<rect x="2410" y="0" width="10" height="1440" fill="rgb(14,14,14)"/>
+<rect x="2420" y="0" width="10" height="1440" fill="rgb(13,13,13)"/>
+<rect x="2430" y="0" width="10" height="1440" fill="rgb(12,12,12)"/>
+<rect x="2440" y="0" width="10" height="1440" fill="rgb(11,11,11)"/>
+<rect x="2450" y="0" width="10" height="1440" fill="rgb(10,10,10)"/>
+<rect x="2460" y="0" width="10" height="1440" fill="rgb(9,9,9)"/>
+<rect x="2470" y="0" width="10" height="1440" fill="rgb(8,8,8)"/>
+<rect x="2480" y="0" width="10" height="1440" fill="rgb(7,7,7)"/>
+<rect x="2490" y="0" width="10" height="1440" fill="rgb(6,6,6)"/>
+<rect x="2500" y="0" width="10" height="1440" fill="rgb(5,5,5)"/>
+<rect x="2510" y="0" width="10" height="1440" fill="rgb(4,4,4)"/>
+<rect x="2520" y="0" width="10" height="1440" fill="rgb(3,3,3)"/>
+<rect x="2530" y="0" width="10" height="1440" fill="rgb(2,2,2)"/>
+<rect x="2540" y="0" width="10" height="1440" fill="rgb(1,1,1)"/>
+<rect x="2550" y="0" width="10" height="1440" fill="rgb(0,0,0)"/>
+</svg>

slides/223015b/assets/grayscale-zoom.svg

@@ -0,0 +1,53 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
+<rect width="1920" height="1080" fill="#ffffff"/>
+<text x="960.0" y="100" text-anchor="middle" font-family="sans-serif" font-size="54" fill="#1a1a2e" font-weight="bold">Zoom: die 16 hellsten Abstufungen</text>
+<rect x="60.00" y="220" width="101.25" height="500" fill="rgb(255,255,255)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="110.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">255</text>
+<text x="110.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFF</text>
+<rect x="173.25" y="220" width="101.25" height="500" fill="rgb(254,254,254)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="223.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">254</text>
+<text x="223.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFE</text>
+<rect x="286.50" y="220" width="101.25" height="500" fill="rgb(253,253,253)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="337.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">253</text>
+<text x="337.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFD</text>
+<rect x="399.75" y="220" width="101.25" height="500" fill="rgb(252,252,252)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="450.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">252</text>
+<text x="450.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFC</text>
+<rect x="513.00" y="220" width="101.25" height="500" fill="rgb(251,251,251)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="563.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">251</text>
+<text x="563.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFB</text>
+<rect x="626.25" y="220" width="101.25" height="500" fill="rgb(250,250,250)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="676.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">250</text>
+<text x="676.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xFA</text>
+<rect x="739.50" y="220" width="101.25" height="500" fill="rgb(249,249,249)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="790.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">249</text>
+<text x="790.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF9</text>
+<rect x="852.75" y="220" width="101.25" height="500" fill="rgb(248,248,248)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="903.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">248</text>
+<text x="903.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF8</text>
+<rect x="966.00" y="220" width="101.25" height="500" fill="rgb(247,247,247)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1016.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">247</text>
+<text x="1016.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF7</text>
+<rect x="1079.25" y="220" width="101.25" height="500" fill="rgb(246,246,246)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1129.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">246</text>
+<text x="1129.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF6</text>
+<rect x="1192.50" y="220" width="101.25" height="500" fill="rgb(245,245,245)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1243.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">245</text>
+<text x="1243.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF5</text>
+<rect x="1305.75" y="220" width="101.25" height="500" fill="rgb(244,244,244)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1356.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">244</text>
+<text x="1356.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF4</text>
+<rect x="1419.00" y="220" width="101.25" height="500" fill="rgb(243,243,243)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1469.62" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">243</text>
+<text x="1469.62" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF3</text>
+<rect x="1532.25" y="220" width="101.25" height="500" fill="rgb(242,242,242)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1582.88" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">242</text>
+<text x="1582.88" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF2</text>
+<rect x="1645.50" y="220" width="101.25" height="500" fill="rgb(241,241,241)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1696.12" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">241</text>
+<text x="1696.12" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF1</text>
+<rect x="1758.75" y="220" width="101.25" height="500" fill="rgb(240,240,240)" stroke="#1a1a2e" stroke-width="3"/>
+<text x="1809.38" y="820" text-anchor="middle" font-family="monospace" font-size="42" fill="#1a1a2e" font-weight="bold">240</text>
+<text x="1809.38" y="900" text-anchor="middle" font-family="monospace" font-size="36" fill="#4a4a6a">0xF0</text>
+<text x="960.0" y="1020" text-anchor="middle" font-family="sans-serif" font-size="28" fill="#4a4a6a" font-style="italic">jede Stufe = Unterschied von 1/255 ≈ 0,4% Helligkeit</text>
+</svg>

slides/223015b/klausurfolien.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Dateiformate, Schnittstellen, Speichermedien & Distributionswege (223015b)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: Dateiformate, Schnittstellen, Speichermedien & Distributionswege
 ---
 <style>
@@ -92,7 +92,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015b/](https://librete.ch/hdm/223015b/)
 
@@ -102,6 +102,166 @@ Hochschule der Medien Stuttgart
 <!-- _footer: "" -->
 
 
+# Verlustfrei vs. Verlustbehaftet
+
+| | Verlustfrei (Lossless) | Verlustbehaftet (Lossy) |
+|---|---|---|
+| **Prinzip** | **Redundanz** entfernen | **Irrelevanz** entfernen |
+| **Reversibel** | Ja (Original wiederherstellbar) | Nein (Information unwiederbringlich weg) |
+| **Reduktion** | 30-50% | 80-99% |
+| **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |
+
+**Faustregel:**
+- Medien für EndnutzerInnen → Lossy oft akzeptabel
+- Quellmaterial, Code, Archive → Lossless nötig
+
+<!--
+REDUNDANZ: Wiederholende Muster kompakter darstellen (z.B. "AAAA" → "4×A")
+IRRELEVANZ: Für Menschen nicht wahrnehmbar (Psychoakustik, Psychovisuell)
+
+KLAUSURRELEVANT:
+- Verlustfrei = Original 1:1 wiederherstellbar
+- Verlustbehaftet = Information geht verloren, aber kaum wahrnehmbar
+- Redundanz vs. Irrelevanz ist der Kernunterschied!
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Dateneinheiten
+
+| Einheit | Bytes | Potenz | Beispiel |
+|---------|------:|:------:|----------|
+| **Byte** | 1 | 10⁰ | Farbwerte eines Pixels |
+| **Kilobyte (KB)** | 1.000 | 10³ | Kleiner Programmcode |
+| **Megabyte (MB)** | 1 Million | 10⁶ | Textdokument |
+| **Gigabyte (GB)** | 1 Milliarde | 10⁹ | Kinofilm in FullHD |
+| **Terabyte (TB)** | 1 Billion | 10¹² | ~12h Video in 4K |
+| **Petabyte (PB)** | 1 Billiarde | 10¹⁵ | Netflix-Gesamtarchiv |
+| **Exabyte (EB)** | 1 Trillion | 10¹⁸ | Alle E-Mails weltweit/Tag |
+| **Zettabyte (ZB)** | 1 Trilliarde | 10²¹ | Internet-Traffic 2016 |
+
+<!--
+SI-Präfixe (Dezimal): 1 KB = 1.000 Bytes
+Binär (IEC): 1 KiB = 1.024 Bytes (Kibibyte)
+Windows zeigt oft binär, sagt aber "KB" → Verwirrung!
+1 TB Festplatte = ~931 GiB nutzbar
+
+Eselsbrücke: "Kilo Mega Giga Tera Peta Exa Zetta Yotta"
+→ "Komm Mit Großem Tee, Peter Exte Zettelt Yachten"
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Der digitale Wendepunkt
+
+| Jahr | Analog | Digital | Digital-Anteil |
+|------|--------|---------|----------------|
+| **1986** | 2,6 EB | 0,02 EB | **1%** |
+| **2002** | — | — | **50%** (Wendepunkt) |
+| **2007** | 18 EB | 277 EB | **94%** |
+
+**Perspektive:**
+- 1986: "Petabyte" war ein theoretisches Konzept
+- 2025: ~181 Zettabyte jährlich produziert
+
+**Magnetband lebt:** LTO-Tapes bleiben günstigstes Archivmedium
+(AWS Glacier, Film-Archive, Rechenzentren)
+
+<!--
+PRÜFUNGSRELEVANT:
+ - Wendepunkt 2002
+ - Speichereinheiten (KB→MB→GB→TB→PB→EB→ZB)
+ - Magnetband als Archivmedium
+
+QUELLE: Hilbert & López (2011): "The World's Technological Capacity to Store, Communicate, and Compute Information", Science
+
+METHODIK: 60 analoge + digitale Technologien untersucht (1986-2007)
+
+WENDEPUNKT 2002: Erstmals mehr digital als analog gespeichert
+
+ANALOG damals: Bücher, Zeitungen, Vinyl, VHS, Filmrollen, Fotos
+
+DIGITAL damals: Festplatten, CDs, DVDs, frühe Flash-Speicher
+
+HEUTE: LTO-9 (2021) speichert 18 TB pro Band, ~$5/TB für Cold Storage
+
+VERGLEICH: SSD ~$50/TB, HDD ~$15/TB, LTO ~$5/TB
+
+-->
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Analoge Medien
+### Distribution: physisch (Kauf, Verleih, Kopie)
+
+- **Text**
+    - Bücher, Zeitungen, Zeitschriften, Lochkarten
+- **Bild**
+    - Fotografie (Negativ, Dia, Polaroid), Mikrofilm
+- **Audio:**
+    - Schallplatte (Vinyl, Schellack), Tonband, Musikkassette
+- **Video:**
+    - Film (35mm, Super 8), VHS, Betamax
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Digitale Medien
+### Distribution: Datenträger (CD, USB), Download, Streaming, P2P
+
+- **Text**
+    - E-Book (PDF, EPUB), Dokumente (TXT, DOCX)
+- **Bild**
+    - Digitalfoto (JPEG, PNG, RAW, WebP, GIF)
+- **Audio**
+    - Audiodatei (MP3, FLAC, WAV, AAC, OGG)
+- **Video**
+    - Videodatei (MP4, MKV, AVI, WebM)
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
+# Digitale Speichermedien
+
+- **Optische Speicher**
+    - CD, DVD, Blu-ray
+- **Magnetische Speicher**
+    - Festplatte (HDD), Magnetband (LTO)
+- **Flash-Speicher**
+    - SSD, USB-Stick, SD-Karte
+- **Cloud-Speicher**
+    - Dropbox, Google Drive, iCloud, AWS S3
+
+
+---
+
+<!-- _header: "" -->
+<!-- _footer: "" -->
+
+
 # Rastergrafiken
 
 **Aufbau:** Liste von Pixeln mit Farbwerten (2D-Array)
@@ -243,6 +403,7 @@ KLAUSURRELEVANT:
 - Präfix-frei: Kein Code ist Anfang eines anderen
 - Häufigstes Zeichen = kürzester Code
 - Auch in ZIP, PNG, MP3 verwendet
+-->
 
 
 ---

slides/223015b/klausurfragen.md

@@ -3,9 +3,9 @@ marp: true
 theme: gaia
 paginate: true
 backgroundColor: #fff
-header: "Klausurfragen – 223015b"
+header: ""
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: ""
-title: "Klausurfragen – Dateiformate, Schnittstellen, Speichermedien"
+title: "Fragenkatalog – Dateiformate (223015b)"
 ---
 <style>
 :root {
@@ -13,21 +13,42 @@ title: "Klausurfragen – Dateiformate, Schnittstellen, Speichermedien"
   --color-highlight: #1e5f8a;
   --color-dimmed: #4a4a6a;
 }
-section.invert { --color-foreground: #fff; }
+section.invert {
-section { font-size: 1.325rem; }
+  --color-foreground: #fff;
-h1 { color: #1e5f8a; }
+}
-section.invert h1 { color: #fff; }
+section {
-h2 { color: #1f2937; }
+  font-size: 1.325rem;
-pre { background: #0f0f23; border-radius: 8px; }
+}
-pre code { background: transparent; color: inherit; }
+h1 {
-a { color: var(--color-highlight); }
+  color: #1e5f8a;
-section.disable { opacity: 0.3; }
+}
+section.invert h1 {
+  color: #fff;
+}
+h2 {
+  color: #1f2937;  /* dark gray, almost black */
+}
+pre {
+  background: #0f0f23;
+  border-radius: 8px;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+a {
+  color: var(--color-highlight);
+}
+section.disable {
+  opacity: 0.3;
+}
 </style>
 
+
 # Klausurfragen – 223015b
 **Dateiformate, Schnittstellen, Speichermedien · HdM Stuttgart · M. Czechowski**
 
-<small>Stand: 02.02.2026</small>
+<small>Stand: 01.02.2026</small>
 
 ---
 
@@ -39,7 +60,7 @@ section.disable { opacity: 0.3; }
 > `[ESSAY]` = `essay` (Freitext, manuell bewertet)
 > `[SHORTANS]` = `shortanswer` (Stichwort/Satz, automatisch geprüft)
 > `[NUMERIC]` = `numerical` (Zahlenwert ± Toleranz)
-> `[CLOZE]` = `cloze` (Lückentext, gemischt)
+> `[CLOZE]` = `cloze` (Lückentext, gemischt)`
 
 ---
 
@@ -49,6 +70,8 @@ section.disable { opacity: 0.3; }
 
 ---
 
+<!-- _class: disable -->
+
 ### J1 – Was bedeutet „komprimieren"?
 **Thema:** Grundbegriffe – Kompression
 **Punkte:** 1
@@ -96,6 +119,8 @@ Erkläre den Unterschied zwischen verlustfreier und verlustbehafteter Kompressio
 
 ---
 
+<!-- _class: disable -->
+
 ### J4 – Was bedeutet „skalieren"?
 **Thema:** Grundbegriffe – Skalierung
 **Punkte:** 1
@@ -112,6 +137,8 @@ Was passiert, wenn ein Rasterbild vergrößert wird?
 
 ---
 
+<!-- _class: disable -->
+
 ### J5 – Was bedeutet „konvertieren"?
 **Thema:** Grundbegriffe – Konvertierung
 **Punkte:** 1
@@ -128,6 +155,8 @@ Was bedeutet es, eine Datei zu konvertieren?
 
 ---
 
+<!-- _class: disable -->
+
 ### J6 – Was bedeutet „codieren" und „decodieren"?
 **Thema:** Grundbegriffe – Codec-Konzept
 **Punkte:** 2
@@ -172,6 +201,8 @@ Ordne zu: Container oder Codec?
 
 ---
 
+<!-- _class: disable -->
+
 ### J9 – Redundanz vs. Irrelevanz
 **Thema:** Grundbegriffe – Kompressionsprinzipien
 **Punkte:** 2
@@ -206,6 +237,8 @@ Sortiere die Dateneinheiten von kleinster zu größter:
 
 ---
 
+<!-- _class: disable -->
+
 ### J11 – Bit und Byte: Umrechnung
 **Thema:** Grundbegriffe – Bit/Byte-Verhältnis
 **Punkte:** 1
@@ -219,6 +252,8 @@ Ein Bit ist die kleinste Informationseinheit. Ein Byte besteht aus wie vielen Bi
 
 ---
 
+<!-- _class: disable -->
+
 ### J12 – 7-Bit ASCII: Wie viele Zeichen?
 **Thema:** Grundbegriffe – ASCII-Zeichenkodierung
 **Punkte:** 1
@@ -232,6 +267,8 @@ Der ASCII-Standard verwendet 7 Bit pro Zeichen. Wie viele verschiedene Zeichen k
 
 ---
 
+<!-- _class: disable -->
+
 ### J13 – Hexadezimalzahlen: Zwei 4-Bit-Werte
 **Thema:** Grundbegriffe – Hexadezimal
 **Punkte:** 2
@@ -245,6 +282,8 @@ Zwei Hexadezimalzahlen werden jeweils durch 4 Bit dargestellt. Wie viele verschi
 
 ---
 
+<!-- _class: disable -->
+
 ### J14 – Ein Pixel, drei Kanäle, 8 Bit
 **Thema:** Grundbegriffe – Speicherbedarf eines Pixels
 **Punkte:** 1
@@ -258,6 +297,181 @@ Ein einzelner Pixel wird durch drei Farbkanäle (R, G, B) mit jeweils 8 Bit Farb
 
 ---
 
+### J15 – Analoge Medien: Übersicht
+**Thema:** Medientypen – Analog
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordne jedem Medientyp ein typisches analoges Format zu.
+
+| Medientyp | Analoges Format |
+|---|---|
+| Text | Buch, Zeitung, Lochkarte |
+| Bild | Fotografie (Negativ, Dia), Mikrofilm |
+| Audio | Schallplatte (Vinyl), Tonband, Musikkassette |
+| Video | Film (35mm, Super 8), VHS, Betamax |
+
+> **Feedback:** Analoge Medien speichern Information als kontinuierliche physikalische Größe – Rillentiefe, Magnetfeldstärke, Silberkorn-Dichte. Distribution erfolgt physisch: Kauf, Verleih, Kopie.
+
+---
+
+### J16 – Generationsverlust: Das Problem analoger Kopien
+**Thema:** Analog vs. Digital – Kopierqualität
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Was passiert, wenn eine VHS-Kassette auf eine andere VHS-Kassette kopiert wird?
+
+- [ ] Die Kopie ist bit-identisch mit dem Original – kein Unterschied erkennbar.
+- [x] **Jede Kopie verschlechtert die Qualität – Rauschen nimmt zu, Schärfe ab.** ✅
+- [ ] Die Kopie wird besser, weil das Kopiergerät Rauschen herausfiltert.
+- [ ] Die Qualität bleibt exakt gleich, nur das Medium wechselt.
+
+> **Feedback:** Generationsverlust ist ein fundamentales Problem analoger Medien: Jede Kopie addiert neues Rauschen. Bei der 3. Generation ist das Material oft unbrauchbar. Digital: Kopie = Original (bit-identisch).
+
+---
+
+### J17 – Digitale Medien: Formate zuordnen
+**Thema:** Medientypen – Digital
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordne jedem Medientyp typische digitale Formate zu.
+
+| Medientyp | Digitale Formate |
+|---|---|
+| Text | PDF, EPUB, TXT, DOCX |
+| Bild | JPEG, PNG, RAW, WebP, GIF |
+| Audio | MP3, FLAC, WAV, AAC, OGG |
+| Video | MP4, MKV, AVI, WebM |
+
+> **Feedback:** Digitale Medien werden über Datenträger (CD, USB), Download, Streaming oder P2P verteilt. Der entscheidende Vorteil: bit-identische Kopien ohne Qualitätsverlust.
+
+---
+
+### J18 – Analog vs. Digital: Der Hauptunterschied
+**Thema:** Analog vs. Digital – Konzept
+**Punkte:** 2
+**Typ:** `[MC]`
+
+Was ist der fundamentale Unterschied zwischen analoger und digitaler Speicherung?
+
+- [ ] Analog speichert in diskreten Stufen, digital als kontinuierliches Signal.
+- [ ] Analog nutzt Elektrizität, digital nutzt Magnetismus zur Speicherung.
+- [x] **Analog speichert kontinuierlich (z.B. Rillentiefe), digital in diskreten Bits.** ✅
+- [ ] Analog ist für Audio, digital ist ausschließlich für Text geeignet.
+
+> **Feedback:** Analog = kontinuierlich (Rillentiefe, Magnetfeldstärke). Digital = diskret (0 und 1). Die Quantisierung ist der „Preis" der Digitalisierung, aber danach bleibt die Information exakt – perfekte Kopien möglich.
+
+---
+
+<!-- _class: disable -->
+
+### J19 – Analoge Distribution: Wie kam Musik zum Käufer?
+**Thema:** Distribution – Analog
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Wie wurden analoge Medien typischerweise verbreitet?
+
+- [ ] Per Download aus dem Internet auf den heimischen Computer.
+- [ ] Über Streaming-Dienste wie Spotify oder Apple Music.
+- [x] **Physisch: Kauf im Laden, Verleih, Kopie auf Kassette.** ✅
+- [ ] Über dezentrale Peer-to-Peer-Netzwerke zwischen Nutzern.
+
+> **Feedback:** Analoge Distribution war immer physisch gebunden: Man musste das Medium besitzen oder ausleihen. Kopieren war möglich (Kassette), aber mit Qualitätsverlust verbunden.
+
+---
+
+### J20 – Digitale Distribution: Die vier Wege
+**Thema:** Distribution – Digital
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordne jeder Distributionsform ein Beispiel zu.
+
+| Distributionsform | Beispiel |
+|---|---|
+| Datenträger | CD, DVD, USB-Stick |
+| Download | iTunes Store, Steam, Bandcamp |
+| Streaming | Netflix, Spotify, YouTube |
+| Peer-to-Peer (P2P) | BitTorrent, eDonkey |
+
+> **Feedback:** Digital ermöglicht vier Distributionswege: physische Datenträger (wie analog, aber ohne Generationsverlust), Download (Besitz einer Kopie), Streaming (Zugriff ohne Besitz), P2P (dezentrale Verteilung zwischen Nutzern).
+
+---
+
+### J21 – Streaming vs. Download: Was ist der Unterschied?
+**Thema:** Distribution – Streaming
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Was unterscheidet Streaming von einem Download?
+
+- [ ] Streaming speichert die Datei dauerhaft, Download nur temporär.
+- [ ] Streaming ist immer kostenlos, Download immer kostenpflichtig.
+- [x] **Streaming überträgt während des Abspielens, ohne dauerhafte Kopie.** ✅
+- [ ] Streaming funktioniert offline, Download braucht ständig Internet.
+
+> **Feedback:** Streaming = „Wasserhahn" (Daten fließen, solange man zuschaut/hört). Download = „Flasche füllen" (Datei bleibt). Streaming braucht ständige Internetverbindung; Downloads funktionieren offline.
+
+---
+
+### J22 – Analog vs. Digital: Vor- und Nachteile
+**Thema:** Analog vs. Digital – Vergleich
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordne jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
+
+| Eigenschaft | Vorteil von |
+|---|---|
+| Kein Abspielgerät nötig (Buch lesen) | Analog |
+| Bit-identische Kopien ohne Qualitätsverlust | Digital |
+| Unabhängig von Strom und Internet | Analog |
+| Einfache Durchsuchbarkeit (Strg+F) | Digital |
+| Haptisches Erlebnis | Analog |
+| Fehlerkorrektur möglich (ECC, RAID) | Digital |
+
+> **Feedback:** Analog: physisch, unabhängig, haptisch – aber Verschleiß und Generationsverlust. Digital: perfekte Kopien, durchsuchbar, korrigierbar – aber abhängig von Technik und Formaten.
+
+---
+
+### J23 – Distribution vergleichen: Download, Streaming, P2P
+**Thema:** Distribution – Vergleich
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die drei digitalen Distributionswege **Download**, **Streaming** und **Peer-to-Peer (P2P)**. Beschreiben Sie für jeden Weg: (1) wie die Daten zum Nutzer gelangen, (2) ob der Nutzer eine dauerhafte Kopie erhält, und (3) nennen Sie je ein Beispiel.
+
+> **Musterlösung:** **Download:** Datei wird vollständig vom Server heruntergeladen und lokal gespeichert. Nutzer erhält dauerhafte Kopie. Beispiel: iTunes Store, Steam. **Streaming:** Daten werden während des Abspielens übertragen, keine dauerhafte lokale Kopie. Beispiel: Netflix, Spotify. **P2P:** Nutzer laden Teile der Datei gleichzeitig von vielen anderen Nutzern herunter (dezentral). Dauerhafte Kopie möglich. Beispiel: BitTorrent.
+
+---
+
+### J24 – Analog vs. Digital: Kopieren und Archivieren
+**Thema:** Analog vs. Digital – Transfer
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Vergleichen Sie **analoge** und **digitale** Medien hinsichtlich (1) Kopierqualität, (2) Langzeitarchivierung und (3) Abhängigkeit von Technik. Nennen Sie je einen konkreten Vor- und Nachteil.
+
+> **Musterlösung:** **Kopierqualität:** Analog: Jede Kopie verschlechtert sich (Generationsverlust). Digital: Bit-identische Kopien ohne Qualitätsverlust. **Langzeitarchivierung:** Analog: Physischer Verschleiß, aber lesbar ohne spezielle Software (Buch). Digital: Bits altern nicht, aber Formate können obsolet werden (DOCX in 50 Jahren?). **Technikabhängigkeit:** Analog: Buch braucht keinen Strom. Digital: Abhängig von funktionierender Hard- und Software. Vorteil Analog: Unabhängigkeit. Nachteil Analog: Generationsverlust. Vorteil Digital: Perfekte Kopien. Nachteil Digital: Formatobsoleszenz.
+
+---
+
+<!-- _class: disable -->
+
+### J25 – Redundanz vs. Irrelevanz erklären
+**Thema:** Kompression – Prinzipien
+**Punkte:** 2
+**Typ:** `[ESSAY]`
+
+Verlustfreie und verlustbehaftete Kompression nutzen unterschiedliche Prinzipien. Erklären Sie: (1) Was bedeutet **Redundanz entfernen**? (2) Was bedeutet **Irrelevanz entfernen**? (3) Welches Prinzip nutzt welcher Kompressionstyp?
+
+> **Musterlösung:** **(1) Redundanz:** Wiederholende Muster kompakter darstellen – z.B. "AAAAAAA" → "7×A". Die originalen Daten können perfekt rekonstruiert werden. **(2) Irrelevanz:** Daten wegwerfen, die Menschen nicht wahrnehmen – z.B. unhörbare Frequenzen in Audio, unsichtbare Farbunterschiede in Bildern. Nicht umkehrbar. **(3) Zuordnung:** Verlustfrei = Redundanz (ZIP, PNG, FLAC). Verlustbehaftet = Irrelevanz (JPEG, MP3).
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK K – Bildformate & Raster vs. Vektor
@@ -376,6 +590,8 @@ Erkläre, warum ein Rasterbild beim Vergrößern unscharf wird, während ein Vek
 
 ---
 
+<!-- _class: disable -->
+
 ### K8 – Vektor → Raster: Wie heißt das?
 **Thema:** Raster vs. Vektor – Konvertierung
 **Punkte:** 1
@@ -412,12 +628,51 @@ Ordne jedem Interpolationsverfahren seine Eigenschaft zu.
 
 ---
 
+### K10 – Bildtypen vergleichen: Foto, Screenshot, Logo
+**Thema:** Bildformate – Anwendungsfälle
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Sie haben drei Bilder: ein **Foto**, einen **Screenshot** und ein **Logo**. Erklären Sie für jedes Bild, welches Format (JPEG, PNG oder SVG) Sie wählen würden und warum. Begründen Sie Ihre Wahl mit den technischen Eigenschaften des Formats.
+
+> **Musterlösung:** **Foto → JPEG:** Verlustbehaftete Kompression ist akzeptabel, da kleine Artefakte bei natürlichen Bildern kaum auffallen. Dateigröße deutlich kleiner als PNG. **Screenshot → PNG:** Verlustfreie Kompression erhält scharfe Texte und Linien. JPEG würde sichtbare Artefakte an Kanten erzeugen. **Logo → SVG:** Vektorgrafik ist beliebig skalierbar ohne Qualitätsverlust – ein Logo muss auf Visitenkarte und Plakatwand gleich scharf sein. Dateigröße bei einfachen Formen minimal.
+
+---
+
+<!-- _class: disable -->
+
+### K11 – Farbtiefe erklären: 1-Bit, 8-Bit, 24-Bit, 32-Bit
+**Thema:** Rastergrafiken – Farbtiefe
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die Farbtiefen **1-Bit**, **8-Bit**, **24-Bit** und **32-Bit**. Beschreiben Sie für jede: (1) wie viele Farben dargestellt werden können, (2) einen typischen Anwendungsfall.
+
+> **Musterlösung:** **1-Bit:** 2¹ = 2 Farben (Schwarz/Weiß). Anwendung: Strichzeichnungen, Fax, QR-Codes. **8-Bit:** 2⁸ = 256 Farben. Anwendung: GIF-Bilder, Graustufen, Paletten-Bilder. **24-Bit:** 2²⁴ = 16,7 Millionen Farben (8 Bit pro Kanal: R, G, B). Anwendung: Standard für Fotos und Webgrafiken ("True Color"). **32-Bit:** 24 Bit Farbe + 8 Bit Alpha-Kanal (Transparenz). Anwendung: PNG mit Transparenz, Compositing in Grafikprogrammen.
+
+---
+
+<!-- _class: disable -->
+
+### K12 – Rasterisierung vs. Vektorisierung
+**Thema:** Raster vs. Vektor – Konvertierung
+**Punkte:** 2
+**Typ:** `[ESSAY]`
+
+Erklären Sie die beiden Konvertierungsprozesse **Rasterisierung** und **Vektorisierung** (Tracing). Beschreiben Sie: (1) die Richtung der Umwandlung, (2) ob Qualitätsverlust entsteht, (3) warum einer der Prozesse problematischer ist.
+
+> **Musterlösung:** **Rasterisierung (Vektor → Raster):** Trivial und verlustfrei bei gewählter Auflösung. Aus mathematischen Beschreibungen werden Pixel berechnet. Funktioniert immer perfekt. **Vektorisierung (Raster → Vektor):** Problematisch. Software muss Kanten "erraten" und als Pfade nachzeichnen. Funktioniert gut bei einfachen Grafiken (Logos), schlecht bei Fotos. Immer mit Qualitätsverlust/Interpretation verbunden.
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK L – JPEG: Innenleben
 
 ---
 
+<!-- _class: disable -->
+
 ### L1 – JPEG: Verlustfrei oder verlustbehaftet?
 **Thema:** JPEG – Grundeigenschaft
 **Punkte:** 1
@@ -466,6 +721,8 @@ Warum wird bei JPEG von RGB in YCbCr konvertiert?
 
 ---
 
+<!-- _class: disable -->
+
 ### L4 – Chroma Subsampling: Was ist 4:2:0?
 **Thema:** JPEG Schritt 2 – Subsampling
 **Punkte:** 2
@@ -482,6 +739,8 @@ Was bedeutet das Subsampling-Schema 4:2:0?
 
 ---
 
+<!-- _class: disable -->
+
 ### L5 – JPEG-Schritte: Richtige Reihenfolge
 **Thema:** JPEG – Kompressionsablauf
 **Punkte:** 2
@@ -500,6 +759,8 @@ Sortiere die Schritte der JPEG-Kompression in der richtigen Reihenfolge:
 
 ---
 
+<!-- _class: disable -->
+
 ### L6 – Welcher Schritt ist verlustbehaftet?
 **Thema:** JPEG – Verlust lokalisieren
 **Punkte:** 1
@@ -569,12 +830,51 @@ Ordne jedem JPEG-Artefakt seine Beschreibung zu.
 
 ---
 
+### L10 – JPEG-Kompression erklären: RGB, YCbCr, DCT
+**Thema:** JPEG – Pipeline verstehen
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+JPEG komprimiert in mehreren Schritten. Erklären Sie die Rolle von: (1) **RGB → YCbCr Konversion**, (2) **DCT (Discrete Cosine Transform)**, (3) **Quantisierung**. Welcher dieser Schritte ist verlustbehaftet und warum?
+
+> **Musterlösung:** **(1) RGB → YCbCr:** Trennt Helligkeit (Y) von Farbe (Cb, Cr). Ermöglicht Chroma Subsampling – Farbauflösung wird reduziert, Helligkeit bleibt voll erhalten. Das Auge sieht Helligkeit besser als Farbe. **(2) DCT:** Wandelt 8×8 Pixelblöcke in Frequenzkoeffizienten um. Sortiert Information nach Wichtigkeit: niedrige Frequenzen = grobe Struktur (wichtig), hohe Frequenzen = feine Details (weniger wichtig). Die DCT selbst ist verlustfrei. **(3) Quantisierung:** Hier passiert der Verlust! Frequenzkoeffizienten werden gerundet/auf Null gesetzt – hohe Frequenzen (Details) werden stärker reduziert. Dieser Schritt ist nicht umkehrbar.
+
+---
+
+<!-- _class: disable -->
+
+### L11 – JPEG-Artefakte erklären: Blocking, Ringing, Posterization
+**Thema:** JPEG – Artefakte verstehen
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+JPEG-komprimierte Bilder zeigen bei niedriger Qualität typische Artefakte. Erklären Sie die drei Artefakte **Blocking**, **Ringing** und **Posterization**. Beschreiben Sie für jedes: (1) wie es aussieht und (2) warum es entsteht.
+
+> **Musterlösung:** **Blocking:** Sichtbare 8×8-Pixel-Rechtecke. Entsteht, weil jeder Block unabhängig komprimiert wird – bei starker Kompression passen Nachbarblöcke nicht mehr zusammen. **Ringing:** „Geister" oder Halos an scharfen Kanten (z.B. schwarze Schrift auf weißem Hintergrund). Entsteht, weil die DCT mit harten Übergängen schlecht umgehen kann (Gibbs-Phänomen). **Posterization:** Farbverläufe werden stufig statt fließend. Entsteht, weil zu wenige Bits für feine Farbabstufungen übrig bleiben – ähnlich wie ein Poster mit wenigen Farben.
+
+---
+
+<!-- _class: disable -->
+
+### L12 – Warum 8×8-Blöcke bei JPEG?
+**Thema:** JPEG – Blockgröße
+**Punkte:** 2
+**Typ:** `[ESSAY]`
+
+JPEG teilt Bilder in 8×8-Pixel-Blöcke auf. Erklären Sie: (1) warum überhaupt Blöcke verwendet werden, (2) warum genau 8×8 (nicht 4×4 oder 16×16), (3) welches Artefakt durch diese Blockaufteilung entstehen kann.
+
+> **Musterlösung:** **(1) Warum Blöcke:** DCT arbeitet effizienter auf kleinen Bereichen. Globale Analyse wäre rechenintensiv und würde lokale Unterschiede verwischen. **(2) Warum 8×8:** Kompromiss – klein genug für lokale Anpassung, groß genug für effiziente DCT. 64 Koeffizienten sind mathematisch handlich (8² = 64). Historisch auch wegen begrenzter Rechenleistung gewählt. **(3) Artefakt:** Blocking – bei starker Kompression werden die 8×8-Grenzen sichtbar, weil Nachbarblöcke nicht mehr zusammenpassen.
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK M – Bildformate: PNG, GIF, WebP, SVG
 
 ---
 
+<!-- _class: disable -->
+
 ### M1 – PNG: Verlustfrei oder verlustbehaftet?
 **Thema:** PNG – Grundeigenschaft
 **Punkte:** 1
@@ -591,6 +891,8 @@ Wie komprimiert PNG?
 
 ---
 
+<!-- _class: disable -->
+
 ### M2 – PNG vs. JPEG: Wann was?
 **Thema:** Bildformate – Formatwahl
 **Punkte:** 2
@@ -602,6 +904,8 @@ Erklären Sie, wann Sie PNG und wann JPEG wählen würden. Nenne je zwei konkret
 
 ---
 
+<!-- _class: disable -->
+
 ### M3 – GIF: Wie viele Farben?
 **Thema:** GIF – Eigenschaften
 **Punkte:** 1
@@ -618,8 +922,6 @@ Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen?
 
 ---
 
-<!-- _class: disable -->
-
 ### M4 – WebP vs. JPEG: Vorteil?
 **Thema:** Bildformate – WebP
 **Punkte:** 1
@@ -636,6 +938,8 @@ Was ist der hauptsächliche Vorteil von WebP gegenüber JPEG?
 
 ---
 
+<!-- _class: disable -->
+
 ### M5 – SVG: Was ist es?
 **Thema:** SVG – Grundbegriff
 **Punkte:** 1
@@ -652,6 +956,8 @@ Was ist SVG?
 
 ---
 
+<!-- _class: disable -->
+
 ### M6 – Formatwahl: Szenario zuordnen
 **Thema:** Bildformate – Formatwahl Transfer
 **Punkte:** 2
@@ -670,6 +976,30 @@ Ordne jedem Szenario das optimale Bildformat zu.
 
 ---
 
+### M7 – Bildformate vergleichen: JPEG, PNG, WebP
+**Thema:** Bildformate – Vergleich
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Vergleichen Sie die drei Bildformate **JPEG**, **PNG** und **WebP**. Beschreiben Sie für jedes: (1) ob es verlustfrei oder verlustbehaftet komprimiert, (2) ob es Transparenz unterstützt, (3) einen idealen Anwendungsfall.
+
+> **Musterlösung:** **JPEG:** Verlustbehaftet. Keine Transparenz. Ideal für Fotos im Web – kleine Dateien, Qualitätsverlust bei natürlichen Bildern kaum sichtbar. **PNG:** Verlustfrei. Unterstützt Alpha-Transparenz (8 Bit). Ideal für Screenshots, Grafiken mit Text, Bilder mit Transparenz. **WebP:** Kann beides – lossy (wie JPEG) und lossless (wie PNG). Unterstützt Transparenz und Animation. Ideal als moderner Ersatz für beide – 25-35% kleiner als JPEG bei gleicher Qualität.
+
+---
+
+<!-- _class: disable -->
+
+### M8 – GIF vs. moderne Alternativen
+**Thema:** Bildformate – Animation
+**Punkte:** 2
+**Typ:** `[ESSAY]`
+
+GIF ist ein altes Format (1987), wird aber noch für Animationen verwendet. Erklären Sie: (1) die Haupteinschränkung von GIF, (2) warum es trotzdem noch populär ist, (3) welche moderne Alternative es gibt.
+
+> **Musterlösung:** **(1) Haupteinschränkung:** Nur 256 Farben (8-Bit-Palette). Farbverläufe werden stufig, Fotos sehen schlecht aus. **(2) Popularität:** Universelle Browser-Unterstützung, einfach zu teilen, "Meme-Kultur" hat das Format am Leben gehalten. **(3) Alternativen:** WebP (Animation + Millionen Farben + kleiner), APNG (animiertes PNG), oder kurze Videos (MP4/WebM mit `<video>`-Tag statt `<img>`).
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK N – Video-Kompression
@@ -774,6 +1104,43 @@ Erkläre, warum AV1 als „die Zukunft" der Videokompression gilt. Nenne mindest
 
 ---
 
+### N7 – Frame-Typen erklären: I-Frame, P-Frame, B-Frame
+**Thema:** Video – Frame-Typen verstehen
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die drei Frame-Typen **I-Frame**, **P-Frame** und **B-Frame**. Beschreiben Sie für jeden: (1) welche Daten gespeichert werden, (2) die relative Größe im Vergleich, (3) was passiert, wenn ein I-Frame beschädigt wird.
+
+> **Musterlösung:** **I-Frame (Keyframe):** Vollständiges Bild, unabhängig dekodierbar. Größte Dateigröße (100%). Kein Bezug auf andere Frames. **P-Frame (Predicted):** Speichert nur Änderungen gegenüber vorherigen Frames. Etwa 30% der I-Frame-Größe. Referenziert rückwärts. **B-Frame (Bi-directional):** Speichert Änderungen zu vorherigen UND zukünftigen Frames. Etwa 15% der I-Frame-Größe. Referenziert in beide Richtungen. **Bei beschädigtem I-Frame:** Alle abhängigen P- und B-Frames bis zum nächsten I-Frame können nicht korrekt rekonstruiert werden → sichtbare Fehler, bis ein neuer Keyframe kommt.
+
+---
+
+<!-- _class: disable -->
+
+### N8 – Video-Codecs vergleichen: H.264, H.265, AV1
+**Thema:** Video – Codec-Vergleich
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Vergleichen Sie die drei Video-Codecs **H.264**, **H.265** und **AV1**. Beschreiben Sie für jeden: (1) das Erscheinungsjahr, (2) die Kompressionseffizienz im Vergleich, (3) die Lizenzierung (kostenpflichtig vs. frei).
+
+> **Musterlösung:** **H.264 (2003):** Der Standard-Codec für über ein Jahrzehnt. Baseline für Vergleiche. Patentgebühren, aber klar strukturiert. Universelle Unterstützung. **H.265 (2013):** 50% bessere Kompression als H.264. Aber: Patent-Chaos mit drei konkurrierenden Pools → unklare Kosten, zögerliche Adoption. **AV1 (2018):** 30% besser als H.265. Royalty-free und open source (Alliance for Open Media: Google, Netflix, Apple, Amazon). Die Zukunft – aber höherer Rechenaufwand beim Encoding.
+
+---
+
+<!-- _class: disable -->
+
+### N9 – Container vs. Codec: MP4 mit verschiedenen Inhalten
+**Thema:** Video – Container/Codec Transfer
+**Punkte:** 2
+**Typ:** `[ESSAY]`
+
+Eine Datei heißt `video.mp4`. Erklären Sie: (1) Was sagt die Endung `.mp4` über den verwendeten Video-Codec aus? (2) Welche verschiedenen Codecs könnte diese Datei enthalten? (3) Warum kann ein MP4 auf einem Gerät abspielen und auf einem anderen nicht?
+
+> **Musterlösung:** **(1) Endung:** `.mp4` ist der Container (MPEG-4 Part 14) – sagt nichts über den Codec. **(2) Mögliche Codecs:** H.264, H.265/HEVC, AV1, und andere. Auch verschiedene Audio-Codecs (AAC, MP3, AC3). **(3) Kompatibilität:** Das Gerät muss den Codec unterstützen, nicht nur den Container. Ein alter Fernseher kann MP4-Container öffnen, aber AV1-Codec fehlt → "Format nicht unterstützt".
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK O – Speichermedien & Schnittstellen
@@ -798,8 +1165,6 @@ Eine Festplatte wird als „1 TB" vermarktet, aber Windows zeigt nur ~931 GB an.
 
 ---
 
-<!-- _class: disable -->
-
 ### O2 – HDD vs. SSD: Kern-Unterschied
 **Thema:** Speichermedien – HDD vs. SSD
 **Punkte:** 1
@@ -816,8 +1181,6 @@ Was ist der fundamentale technische Unterschied zwischen HDD und SSD?
 
 ---
 
-<!-- _class: disable -->
-
 ### O3 – HDD vs. SSD: Eigenschaften zuordnen
 **Thema:** Speichermedien – Vergleich
 **Punkte:** 2
@@ -922,3 +1285,114 @@ Ordne jedem Backup-Typ seine Beschreibung zu.
 | Differenziell | Änderungen seit dem letzten Voll-Backup – Mittelweg zwischen beiden |
 
 > **Feedback:** Typisches Schema: Sonntag Full, Mo–Sa Inkrementell oder Differenziell. Inkrementell = schnellstes Backup, langsamste Wiederherstellung (Kette aufbauen). Full = langsamstes Backup, schnellste Wiederherstellung.
+
+---
+
+### O9 – Digitale Speichermedien: Kategorien
+**Thema:** Speichermedien – Übersicht
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordne jedes Speichermedium seiner technischen Kategorie zu.
+
+| Medium | Kategorie |
+|---|---|
+| CD, DVD, Blu-ray | Optisch |
+| Festplatte (HDD), Magnetband (LTO) | Magnetisch |
+| SSD, USB-Stick, SD-Karte | Flash-Speicher |
+| Dropbox, AWS S3 | Cloud-Speicher |
+
+> **Feedback:** Optisch: Laser liest Pits/Lands. Magnetisch: magnetisierte Bereiche. Flash: Elektronen in Floating Gates. Cloud: physisch HDD/SSD/LTO in Rechenzentren – keine eigene Technologie, sondern Zugriffsmethode.
+
+---
+
+### O10 – Speichermedien: Wann welches?
+**Thema:** Speichermedien – Anwendungsfall
+**Punkte:** 2
+**Typ:** `[MATCH]`
+
+Ordne jedem Szenario das empfohlene Speichermedium zu.
+
+| Szenario | Empfohlenes Medium |
+|---|---|
+| Betriebssystem (schneller Zugriff) | NVMe SSD |
+| Videoarchiv (große Datenmengen, günstig) | HDD |
+| Langzeitarchiv (10+ Jahre) | LTO-Band, M-DISC |
+| Datenaustausch (portabel) | USB-Stick, SD-Karte |
+
+> **Feedback:** Die Wahl hängt vom Anwendungsfall ab: SSD = Geschwindigkeit, HDD = Kapazität/Preis, LTO/M-DISC = Langlebigkeit, USB/SD = Portabilität.
+
+---
+
+<!-- _class: disable -->
+
+### O11 – Optische Speicher: CD, DVD, Blu-ray
+**Thema:** Speichermedien – Optisch
+**Punkte:** 2
+**Typ:** `[ORDER]`
+
+Sortiere die optischen Speichermedien nach Kapazität (kleinste zuerst):
+
+1. CD (~700 MB)
+2. DVD (~4,7 GB)
+3. Blu-ray (~25 GB)
+
+> **Feedback:** Alle drei nutzen Laser zum Lesen von Pits (Vertiefungen) und Lands (Erhöhungen). Die Kapazität steigt durch kürzere Wellenlängen: CD = Infrarot, DVD = Rot, Blu-ray = Blau (daher der Name).
+
+---
+
+### O12 – Cloud-Speicher: Was ist das eigentlich?
+**Thema:** Speichermedien – Cloud
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Was ist „Cloud-Speicher" technisch gesehen?
+
+- [ ] Eine neue Speichertechnologie, die Daten in Funkwellen speichert.
+- [ ] Virtuelle Speicher ohne jegliche physische Hardware-Komponenten.
+- [x] **HDDs/SSDs in Rechenzentren – „Cloud" beschreibt den Internet-Zugriff.** ✅
+- [ ] Lokale Festplatten, die automatisch mit dem Himmel synchronisieren.
+
+> **Feedback:** „Cloud" ist Marketing für „fremder Computer". Dropbox, Google Drive, iCloud – alle speichern physisch auf Servern in Rechenzentren. Vorteil: Zugriff von überall. Nachteil: Abhängigkeit von Internet und Anbieter.
+
+---
+
+<!-- _class: disable -->
+
+### O13 – Magnetband (LTO): Warum noch heute?
+**Thema:** Speichermedien – Magnetband
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Warum verwenden große Unternehmen noch heute Magnetbänder (LTO)?
+
+- [ ] Magnetbänder sind schneller als SSDs beim wahlfreien Zugriff.
+- [ ] Magnetbänder werden nur aus nostalgischen Gründen eingesetzt.
+- [ ] Magnetbänder sind die einzige Technologie für Videospeicherung.
+- [x] **Extrem günstig pro TB, langlebig, ideal für selten abgerufene Daten.** ✅
+
+> **Feedback:** LTO = Linear Tape-Open. Aktuell LTO-9: 18 TB pro Band, ~2€/TB. Nachteil: sequentieller Zugriff (kein Random Access). Perfekt für Archivierung, wo Daten selten gelesen werden. Google, Facebook, Banken – alle nutzen LTO.
+
+---
+
+### O14 – Speichertechnologien vergleichen: Optisch, Magnetisch, Flash
+**Thema:** Speichermedien – Technologievergleich
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Beschreiben Sie die drei Speichertechnologien **optisch** (CD/DVD/Blu-ray), **magnetisch** (HDD/LTO) und **Flash** (SSD/USB). Erklären Sie für jede: (1) wie Daten physikalisch gespeichert werden, (2) einen typischen Anwendungsfall und (3) eine wichtige Einschränkung.
+
+> **Musterlösung:** **Optisch:** Laser liest Pits (Vertiefungen) und Lands (Erhöhungen). Anwendung: Software-Distribution, Archivierung (M-DISC). Einschränkung: Empfindlich gegen Kratzer und UV-Licht. **Magnetisch:** Magnetisierte Bereiche auf Platten (HDD) oder Band (LTO). Anwendung: Massenspeicher, Langzeitarchiv. Einschränkung: HDD hat bewegliche Teile (Verschleiß), LTO nur sequentieller Zugriff. **Flash:** Elektronen in Floating Gates. Anwendung: Betriebssystem (SSD), portable Daten (USB). Einschränkung: Begrenzte Schreibzyklen, Ladungsverlust ohne Strom nach Jahren.
+
+---
+
+<!-- _class: disable -->
+
+### O15 – Backup-Strategien erklären: Full, Inkrementell, Differenziell
+**Thema:** Backup – Strategievergleich
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die drei Backup-Typen **Full**, **Inkrementell** und **Differenziell**. Beschreiben Sie für jeden: (1) welche Daten gesichert werden, (2) Vor- und Nachteile, und (3) wann dieser Typ sinnvoll eingesetzt wird.
+
+> **Musterlösung:** **Full:** Kompletter Datenbestand wird jedes Mal gesichert. Vorteil: Einfache Wiederherstellung (nur ein Backup nötig). Nachteil: Langsam, braucht viel Speicherplatz. Einsatz: Wöchentlich als Basis. **Inkrementell:** Nur Änderungen seit dem letzten Backup (egal welcher Art). Vorteil: Schnell, wenig Speicher. Nachteil: Wiederherstellung komplex (Kette aller Backups nötig). Einsatz: Täglich. **Differenziell:** Änderungen seit dem letzten Full-Backup. Vorteil: Schneller als Full, einfachere Wiederherstellung als Inkrementell. Nachteil: Wächst täglich. Einsatz: Mittelweg bei moderatem Datenvolumen.

slides/223015c/00-intro.md

@@ -0,0 +1,228 @@
+---
+marp: true
+theme: gaia
+paginate: true
+backgroundColor: #fff
+header: "Grundlagen IT- und Internettechnik (223015c)"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
+title: Grundlagen IT- und Internettechnik
+---
+
+<style>
+:root {
+  --color-foreground: #1a1a2e;
+  --color-highlight: #d63384;
+  --color-dimmed: #4a4a6a;
+}
+section.invert {
+  --color-foreground: #fff;
+}
+section {
+  font-size: 1.7rem;
+}
+h1 {
+  color: #a02060;
+}
+section.invert h1 {
+  color: #fff;
+}
+h2 {
+  color: #1f2937;
+}
+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);
+}
+section.klausur {
+  background: repeating-linear-gradient(
+    135deg,
+    #fce4ec,
+    #fce4ec 40px,
+    #fff 40px,
+    #fff 80px
+  ) !important;
+}
+@media print {
+  section.klausur {
+    background: #fce4ec !important;
+  }
+}
+section.aufgabe {
+  background: #fce4ec !important;
+}
+section.aufgabe footer {
+  display: none;
+}
+</style>
+
+<!-- _class: invert -->
+<!-- _header: '' -->
+<!-- _backgroundColor: #000 -->
+
+![bg cover opacity:0.2](./assets/background-termin-1.png)
+
+# Grundlagen IT- und Internettechnik
+
+**223015c** · Modul "Technik 1" · 1. Semester
+Digital- und Medienwirtschaft
+Hochschule der Medien Stuttgart
+
+**Sommersemester 2026**
+
+[https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/qr/slides-223015c.png)
+
+---
+
+<!-- _class: lead -->
+
+# Herzlich willkommen!
+## Einführung
+
+---
+
+# Über mich
+
+**Michael Werner Czechowski**
+
+- Systems and Platform Engineer
+- Schwerpunkte:
+  - Web-Technologien, Barriere-Armut, Open Source
+- Hintergrund:
+  - Philosophie (Uni Stuttgart)
+  - Wirtschaftsinformatik (Leibniz-FH Hannover)
+- Kontakt: lb-czechowski@hdm-stuttgart.de
+
+---
+
+# Warum dieses Modul?
+
+**Das Internet ist überall** – aber was steckt dahinter?
+
+* Warum sehen Webseiten auf dem Handy anders aus?
+* Wie funktioniert eigentlich das Internet?
+* Wie erkennen Sie, ob eine Werbeagentur gute Arbeit leistet?
+* Was hat ein Unterseekabel mit meiner E-Mail zu tun?
+* **→ Die Technik dahinter verstehen und fundierte Entscheidungen treffen**
+
+---
+
+# Das Ziel
+
+**Technische Grundlagen verstehen**, um fundierte Entscheidungen treffen zu können.
+
+Als Digital- und MedienwirtschaftlerInnen werdet ihr täglich mit technischen Fragen konfrontiert:
+* Wie baue ich eine barrierearme Webseite?
+* Welches Protokoll für welchen Zweck?
+* Wie funktioniert das Web hinter den Kulissen?
+* **→ Mitreden können – und selbst Webseiten bauen!**
+
+---
+
+# Was Sie hier lernen werden
+
+**In dieser Veranstaltung erwerben Sie folgende Kompetenzen:**
+
+* Geschichte des Computers und Internets
+* HTML-Grundlagen und semantisches Markup
+* CSS für Layout und Gestaltung
+* Netzwerke und Protokolle (TCP/IP, DNS, HTTP(S))
+* "Barrierefreiheit" im Web
+* Grundlagen von JavaScript und Interaktivität
+
+---
+
+# Kurze Umfrage
+
+**Bitte Hand heben:**
+* Wer hat schon mal eine Webseite gebaut?
+* Wer weiß, was HTML ist?
+* Wer hat schon mal CSS geschrieben? 
+* Wer kennt den Unterschied zwischen Internet und WWW? 
+* Wer hat schon mal mit JavaScript gearbeitet?
+
+---
+
+# Kursübersicht
+
+**Kapitel:**
+
+1. Geschichte, Grundlagen & **HTML**
+2. Netzwerke, Protokolle, **semantisches HTML** & **CSS**
+3. Interaktivität, Animationen & **JavaScript**
+
+**Ziel:** "Gelernte Hilflosigkeit" ablegen
+
+---
+
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #fce4ec -->
+
+# Prüfungsleistung
+
+**Nach aktuellem Kenntnisstand:**
+
+* 90 min insg. (Technik 1)
+* Schriftliche Klausur (digital)
+* Teils offene Fragen
+* So gut wie kein Coding/Programmieren
+* **Prüfungsrelevant:** Folien sind markiert mit anderem Hintergrund
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/klausur-01.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/klausur-02.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/klausur-03.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/splan.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+![bg fit](./assets/asta.png)
+

slides/223015c/02-netzwerke-protokolle-css.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik (223015c)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: "Kapitel 2: Netzwerke, Protokolle & CSS"
 ---
 
@@ -73,18 +73,23 @@ section.glossar {
 }
 section.erklaerung {
   font-size: 1.1rem;
-  background: linear-gradient(180deg, #fff8fa 0%, #fef0f4 100%) !important;
+  background: repeating-linear-gradient(
-  border-left: 6px solid #a02060;
+    135deg,
+    #fce4ec,
+    #fce4ec 40px,
+    #fff 40px,
+    #fff 80px
+  ) !important;
+}
+@media print {
+  section.erklaerung {
+    background: #fce4ec !important;
+  }
 }
 section.erklaerung h1 {
-  font-size: 1.6rem;
+  font-size: 1.5rem;
   color: #a02060;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.3rem;
-}
-section.erklaerung h2 {
-  font-size: 1.3rem;
-  color: #1f2937;
-  margin-top: 0;
 }
 section.erklaerung ul,
 section.erklaerung ol {
@@ -92,11 +97,11 @@ section.erklaerung ol {
   line-height: 1.4;
 }
 section.erklaerung p {
-  font-size: 1.05rem;
+  font-size: 1.0rem;
-  line-height: 1.5;
+  line-height: 1.4;
 }
 section.erklaerung table {
-  font-size: 0.95rem;
+  font-size: 0.9rem;
 }
 </style>
 
@@ -113,7 +118,7 @@ section.erklaerung table {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
 
@@ -433,22 +438,24 @@ SPEAKER NOTES:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# TCP/IP-Modell: Erklaerung
+# TCP/IP-Modell – Vertiefung
 
-**Definition:** Das TCP/IP-Modell beschreibt die Kommunikation im Internet in vier hierarchischen Schichten.
+Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum theoretischen OSI-Modell (7 Schichten, 1984). TCP/IP hat sich durchgesetzt, weil es das reale Internet beschreibt.
 
-| Schicht | Frage | Protokolle | Dateneinheit |
+**Schicht-Aufgaben im Detail:**
-|---------|-------|------------|--------------|
-| 4 Anwendung | Was will ich? | HTTP, DNS, SMTP | Daten |
-| 3 Transport | Kommt es an? | TCP, UDP | Segment |
-| 2 Internet | Welcher Rechner? | IP | Paket |
-| 1 Netzzugang | Wie zum Nachbarn? | Ethernet, WLAN | Frame |
 
-**Kernprinzip:** Jede Schicht hat eine Aufgabe und kennt nur ihre Nachbarschichten.
+| Schicht | Frage | Protokolle | Geräte |
+|---------|-------|------------|--------|
+| 4 Anwendung | Was will ich? | HTTP, DNS, SMTP, FTP | – (Software) |
+| 3 Transport | Kommt es an? Welches Programm? | TCP, UDP | – (Software) |
+| 2 Internet | Welcher Rechner weltweit? | IP, ICMP | Router |
+| 1 Netzzugang | Wie zum Nachbarn? | Ethernet, WLAN, PPP | Switch, Access Point |
 
-**Encapsulation:** Jede Schicht verpackt die Daten der darueberliegenden Schicht mit eigenem Header.
+**OSI vs. TCP/IP:**
+- OSI Schicht 5–7 (Session, Presentation, Application) → TCP/IP Schicht 4
+- OSI Schicht 1–2 (Physical, Data Link) → TCP/IP Schicht 1
 
-**Merkhilfe Schichten:** "**A**lle **T**rinken **I**mmer **N**och" (Anwendung-Transport-Internet-Netzzugang)
+**Warum Schichten?** Abstraktion. HTTP muss nicht wissen, ob Ethernet oder WLAN verwendet wird. Änderungen in einer Schicht betreffen andere nicht.
 
 ---
 
@@ -515,23 +522,26 @@ SPEAKER NOTES:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Dateneinheiten: Erklaerung
+# Dateneinheiten & Encapsulation – Vertiefung
 
-**Definition:** Jede Schicht im TCP/IP-Modell hat eine eigene Bezeichnung fuer die Daten, die sie verarbeitet.
+**Encapsulation** (Verkapselung): Jede Schicht fügt ihren Header hinzu, ohne den Inhalt der oberen Schicht zu verändern.
 
-| Schicht | Dateneinheit | Was kommt hinzu? |
+**Was jeder Header enthält:**
-|---------|--------------|------------------|
-| Anwendung | **Daten** (Message) | Anwendungsspezifische Infos |
-| Transport | **Segment** | Ports, Sequenznummern |
-| Internet | **Paket** | IP-Adressen (Quelle, Ziel) |
-| Netzzugang | **Frame** | MAC-Adressen, Pruefsumme |
 
-**Encapsulation-Prozess:**
+| Schicht | Einheit | Header-Inhalte |
-```
+|---------|---------|----------------|
-Daten → [TCP-Header + Daten] → [IP-Header + Segment] → [Eth-Header + Paket + Eth-Trailer]
+| Anwendung | Daten | HTTP-Header, Cookies, Content-Type |
-```
+| Transport | Segment | Quell-/Zielport, Sequenznummer, Flags (SYN, ACK) |
+| Internet | Paket | Quell-/Ziel-IP, TTL, Protokoll (TCP=6, UDP=17) |
+| Netzzugang | Frame | Quell-/Ziel-MAC, EtherType, CRC-Prüfsumme |
 
-**Merkhilfe:** "**D**er **S**ache **P**raktischer **F**olgen" (Daten-Segment-Paket-Frame, von oben nach unten)
+**Overhead-Rechnung (1 Byte HTTP-Body):**
+- Ethernet: 14 + 4 Bytes (Header + Trailer)
+- IP: 20 Bytes (ohne Optionen)
+- TCP: 20 Bytes (ohne Optionen)
+- **Minimum: 58 Bytes für 1 Byte Nutzlast**
+
+**Decapsulation:** Empfänger packt in umgekehrter Reihenfolge aus. Jede Schicht prüft ihren Header (z.B. CRC) und reicht Nutzdaten nach oben.
 
 ---
 
@@ -718,22 +728,27 @@ SPEAKER NOTES:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# IP vs. MAC vs. Port: Erklaerung
+# IP, MAC, Port – Vertiefung
 
-**Definition:** Drei verschiedene Adresstypen fuer drei verschiedene Fragen im Netzwerk.
+Drei Adressebenen lösen drei verschiedene Probleme:
 
-| Adresstyp | Frage | Reichweite | Aendert sich? |
+**IP-Adresse (Schicht 2 – Internet):**
-|-----------|-------|------------|---------------|
+- Hierarchisch aufgebaut: Netzwerk-Teil + Host-Teil
-| **IP-Adresse** | Welcher Rechner im Internet? | Global | Nein (Ziel bleibt) |
+- Router lesen nur den Netzwerk-Teil für Routing-Entscheidungen
-| **MAC-Adresse** | Welches Geraet nebenan? | Lokal (1 Hop) | Ja, bei jedem Hop |
+- IPv4: 32 Bit (z.B. 192.168.1.1), IPv6: 128 Bit
-| **Port** | Welches Programm? | Auf einem Rechner | Nein |
 
-**Analogie Briefpost:**
+**MAC-Adresse (Schicht 1 – Netzzugang):**
-- **IP** = Empfaengeradresse auf dem Brief (bleibt gleich)
+- 48 Bit, vom Hersteller fest vergeben (theoretisch)
-- **MAC** = "Naechstes Postamt" (aendert sich bei jeder Station)
+- Erste 24 Bit = OUI (Organizationally Unique Identifier) = Hersteller
-- **Port** = Wohnungsnummer im Mehrfamilienhaus
+- Nur relevant für den **nächsten Hop** – wird bei jedem Router ersetzt
+- ARP (Address Resolution Protocol) übersetzt IP → MAC
 
-**Merkhilfe:** "**I**P = **I**nternet-weit, **M**AC = **M**omentaner Nachbar, **P**ort = **P**rogramm"
+**Port (Schicht 3 – Transport):**
+- 16 Bit → 65.535 mögliche Ports
+- Well-Known Ports (0–1023): HTTP=80, HTTPS=443, SSH=22
+- Ephemeral Ports (49152–65535): Dynamisch für Client-Verbindungen
+
+**Warum ändert sich nur MAC?** IP ist das Endziel (Brief-Adresse), MAC ist der aktuelle Bote (wer trägt den Brief gerade?).
 
 ---
 
@@ -1023,24 +1038,29 @@ SPEAKER NOTES:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# 3-Way-Handshake: Erklaerung
+# 3-Way-Handshake – Vertiefung
 
-**Definition:** Der TCP-Verbindungsaufbau in drei Schritten, bei dem Client und Server ihre Sequenznummern austauschen.
+Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverlässigkeit.
 
-**Die drei Schritte:**
+**Warum zufällige Startwerte (ISN)?**
-1. **SYN** (Client → Server): "Ich will reden, starte bei Seq=1000"
+- Sicherheit: Verhindert Session-Hijacking durch Raten
-2. **SYN-ACK** (Server → Client): "OK, ich starte bei Seq=5000, erwarte 1001"
+- Eindeutigkeit: Unterscheidet alte von neuen Verbindungen
-3. **ACK** (Client → Server): "Verstanden, erwarte 5001 - los geht's!"
+- ISN = Initial Sequence Number, vom OS zufällig gewählt
 
-**Warum so kompliziert?**
+**TCP-Flags im Handshake:**
-- Beide Seiten muessen **bereit** sein
-- Sequenznummern werden **synchronisiert** (daher SYN)
-- Verlorene Pakete koennen spaeter **erkannt und nachgefordert** werden
 
-**Analogie Telefonat:**
+| Paket | Flags | Bedeutung |
-- Klingeln → Abheben → "Hallo?" → Gespraech beginnt
+|-------|-------|-----------|
+| 1 | SYN | Client will Verbindung, sendet seine ISN |
+| 2 | SYN+ACK | Server akzeptiert, sendet seine ISN, bestätigt Client-ISN+1 |
+| 3 | ACK | Client bestätigt Server-ISN+1 |
 
-**Merkhilfe:** "**S**ag mir → **S**icher, **A**ntworte → **A**lles klar" (SYN → SYN-ACK → ACK)
+**Was passiert bei Problemen?**
+- Kein SYN-ACK → Client wiederholt SYN (Timeout)
+- SYN-Flood-Attacke: Millionen SYNs ohne ACK → Server-Ressourcen erschöpft
+- Schutz: SYN-Cookies (Server speichert keinen State bis ACK kommt)
+
+**Verbindungsabbau:** 4-Way-Handshake (FIN → ACK → FIN → ACK) oder RST für sofortigen Abbruch.
 
 ---
 
@@ -1555,24 +1575,31 @@ SPEAKER NOTES:
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# TCP vs. UDP: Erklaerung
+# TCP vs. UDP – Vertiefung
 
-**Definition:** Die zwei Transport-Protokolle mit unterschiedlichen Garantien und Anwendungsfaellen.
+Beide sind Transport-Protokolle (Schicht 3), aber mit fundamental unterschiedlichen Garantien.
 
-| Eigenschaft | TCP | UDP |
+**TCP (Transmission Control Protocol):**
-|-------------|-----|-----|
+- Verbindungsorientiert (Handshake vor Daten)
-| Verbindungsaufbau | Ja (3-Way-Handshake) | Nein |
+- Sequenznummern → Reihenfolge garantiert
-| Reihenfolge | Garantiert | Nicht garantiert |
+- ACKs + Retransmission → Kein Datenverlust
-| Verlorene Pakete | Werden nachgefordert | Gehen verloren |
+- Flow Control (Sliding Window) → Empfänger nicht überlasten
-| Geschwindigkeit | Langsamer (Overhead) | Schneller |
+- Congestion Control → Netzwerk nicht überlasten
 
-**Wann TCP?** Wenn **alles ankommen** muss:
+**UDP (User Datagram Protocol):**
-- Web (HTTP/HTTPS), E-Mail, Datei-Downloads
+- Verbindungslos (Fire-and-Forget)
+- Keine Sequenznummern, keine ACKs
+- Header nur 8 Bytes (TCP: 20+ Bytes)
+- Anwendung muss selbst für Zuverlässigkeit sorgen
 
-**Wann UDP?** Wenn **Geschwindigkeit** wichtiger ist als Vollstaendigkeit:
+| Anwendung | Protokoll | Grund |
-- Video-Calls, Gaming, DNS, Streaming
+|-----------|-----------|-------|
+| HTTP/HTTPS | TCP | Vollständigkeit kritisch |
+| DNS | UDP | Kleine Pakete, schnelle Antwort |
+| Video-Streaming | UDP/QUIC | Latenz wichtiger als Perfektion |
+| Online-Gaming | UDP | Echtzeit, veraltete Daten nutzlos |
 
-**Merkhilfe:** "**T**CP = **T**otal **C**omplete **P**ackages" vs. "**U**DP = **U**nsicher, **D**afuer **P**rompt"
+**QUIC:** Googles Protokoll kombiniert UDP-Geschwindigkeit mit TCP-ähnlicher Zuverlässigkeit (HTTP/3).
 
 ---
 
@@ -1659,23 +1686,30 @@ Das wird wichtiger, wenn ihr mit REST-APIs arbeitet.
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# HTTP-Methoden: Erklaerung
+# HTTP-Methoden – Vertiefung
 
-**Definition:** HTTP-Methoden beschreiben die gewuenschte Aktion auf einer Ressource.
+HTTP-Methoden definieren die **Semantik** der Anfrage – was der Client vom Server erwartet.
 
-| Methode | Bedeutung | Typischer Einsatz |
+**CRUD-Mapping (Create, Read, Update, Delete):**
-|---------|-----------|-------------------|
-| **GET** | Daten abrufen | Webseite laden, Bild anzeigen |
-| **POST** | Daten senden | Formular absenden, Login |
-| **PUT** | Daten ersetzen | Profil komplett aktualisieren |
-| **PATCH** | Daten teilweise aendern | Einzelnes Feld aendern |
-| **DELETE** | Daten loeschen | Account loeschen |
 
-**Idempotenz:** GET, PUT, DELETE koennen mehrfach ausgefuehrt werden mit gleichem Ergebnis. POST nicht (mehrfach absenden = mehrere Bestellungen).
+| Methode | CRUD | Idempotent | Safe | Typischer Einsatz |
+|---------|------|------------|------|-------------------|
+| GET | Read | Ja | Ja | Ressource abrufen |
+| POST | Create | Nein | Nein | Formular, neue Ressource |
+| PUT | Update | Ja | Nein | Ressource vollständig ersetzen |
+| PATCH | Update | Nein | Nein | Ressource teilweise ändern |
+| DELETE | Delete | Ja | Nein | Ressource löschen |
 
-**REST-APIs:** Nutzen diese Methoden systematisch fuer CRUD-Operationen (Create, Read, Update, Delete).
+**Idempotent:** Mehrfaches Ausführen hat denselben Effekt wie einmaliges (GET, PUT, DELETE).
+**Safe:** Ändert nichts am Server (nur GET, HEAD, OPTIONS).
 
-**Merkhilfe:** "**G**ib mir, **P**oste das, **P**latziere neu, **D**elete" (GET, POST, PUT, DELETE)
+**REST-Prinzip:** URLs identifizieren Ressourcen, Methoden definieren Aktionen.
+```
+GET /users/42        → Benutzer 42 abrufen
+PUT /users/42        → Benutzer 42 vollständig ersetzen
+DELETE /users/42     → Benutzer 42 löschen
+POST /users          → Neuen Benutzer erstellen
+```
 
 ---
 
@@ -1718,24 +1752,24 @@ Status-Codes sagen euch, was passiert ist.
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# HTTP Status-Codes: Erklaerung
+# HTTP Status-Codes – Vertiefung
 
-**Definition:** Dreistellige Codes, die der Server zurueckgibt, um das Ergebnis einer Anfrage zu beschreiben.
+Die erste Ziffer kategorisiert die Antwort:
 
-| Bereich | Bedeutung | Wichtige Codes |
+| Bereich | Kategorie | Häufige Codes |
-|---------|-----------|----------------|
+|---------|-----------|---------------|
-| **2xx** | Erfolg | 200 OK, 201 Created, 204 No Content |
+| 1xx | Informational | 100 Continue, 101 Switching Protocols |
-| **3xx** | Umleitung | 301 Moved Permanently, 304 Not Modified |
+| 2xx | Success | 200 OK, 201 Created, 204 No Content |
-| **4xx** | Client-Fehler | 400 Bad Request, 403 Forbidden, 404 Not Found |
+| 3xx | Redirection | 301 Moved Permanently, 302 Found, 304 Not Modified |
-| **5xx** | Server-Fehler | 500 Internal Error, 502 Bad Gateway, 503 Unavailable |
+| 4xx | Client Error | 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found |
+| 5xx | Server Error | 500 Internal Error, 502 Bad Gateway, 503 Unavailable |
 
-**Haeufigste Codes im Alltag:**
+**Wichtige Unterscheidungen:**
-- **200:** Alles OK, hier sind die Daten
+- **401 vs. 403:** 401 = nicht authentifiziert (wer bist du?), 403 = nicht autorisiert (du darfst nicht)
-- **404:** Seite nicht gefunden (falsche URL)
+- **301 vs. 302:** 301 = permanent umgezogen (Cache-fähig), 302 = temporär (nicht cachen)
-- **403:** Zugriff verweigert (keine Berechtigung)
+- **304 Not Modified:** Browser hat Cache, Server bestätigt: noch aktuell → spart Bandbreite
-- **500:** Server hat einen Fehler (nicht eure Schuld)
 
-**Merkhilfe:** "**2**=alles **g**ut, **3**=woanders, **4**=du Fehler, **5**=Server Fehler"
+**API-Design:** Korrekte Status-Codes sind wichtig für Clients. `200` bei Fehler mit `{"error": "..."}` im Body ist schlechtes Design.
 
 ---
 
@@ -1779,27 +1813,33 @@ Wie Encapsulation funktioniert.
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Netzwerke Zusammenfassung: Erklaerung
+# Netzwerk-Grundlagen – Vertiefung
 
-**Der Ablauf eines Webseitenaufrufs:**
+Die vier Kernkonzepte für Web-Entwickler:
-1. **DNS** (UDP:53): Domain → IP-Adresse aufloesen
-2. **TCP-Handshake:** SYN → SYN-ACK → ACK (Verbindung aufbauen)
-3. **HTTP-Request:** GET /index.html (Seite anfordern)
-4. **HTTP-Response:** 200 OK + HTML (Seite erhalten)
 
-**Die 4 Schichten (TCP/IP):**
+**1. DNS-Auflösung:**
+- Browser fragt DNS-Resolver (z.B. 8.8.8.8)
+- Rekursive Abfrage: Root → TLD → Authoritative
+- Caching auf jeder Ebene (TTL = Time To Live)
 
-| Schicht | Protokolle | Dateneinheit |
+**2. TCP-Verbindungsaufbau:**
-|---------|------------|--------------|
+- 3-Way-Handshake vor jeder HTTP-Anfrage (HTTP/1.1)
-| Anwendung | HTTP, DNS | Daten |
+- Keep-Alive: Verbindung bleibt offen für mehrere Requests
-| Transport | TCP, UDP | Segment |
+- HTTP/2: Multiplexing – viele Requests über eine Verbindung
-| Internet | IP | Paket |
-| Netzzugang | Ethernet | Frame |
 
-**Merkhilfen:**
+**3. HTTP Request/Response:**
-- Schichten: "**A**lle **T**rinken **I**mmer **N**och"
+```
-- Dateneinheiten: "**D**er **S**ache **P**raktischer **F**olgen"
+Request:  Methode + URL + Header + (Body)
-- IP bleibt gleich, MAC aendert sich bei jedem Hop
+Response: Status + Header + Body
+```
+
+**4. Schichten & Adressen:**
+| Was bleibt gleich? | Was ändert sich? |
+|-------------------|------------------|
+| Ziel-IP | MAC-Adressen (bei jedem Hop) |
+| Ports | – |
+
+**Debugging:** Browser DevTools (F12 → Network) zeigt alle Requests, Timing, Header.
 
 ---
 
@@ -2098,26 +2138,26 @@ Inline-Styles schlagen alles – außer !important, was ihr vermeiden solltet.
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# CSS Spezifitaet: Erklaerung
+# CSS Spezifität – Vertiefung
 
-**Definition:** Spezifitaet bestimmt, welche CSS-Regel gewinnt, wenn mehrere Regeln auf dasselbe Element zutreffen.
+Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Element zutreffen. Sie wird als 4-stellige Zahl berechnet: **(Inline, IDs, Klassen, Elemente)**.
 
-**Spezifitaet als 4-stellige Zahl (a,b,c,d):**
+**Berechnung:**
 
-| Kategorie | Gewicht | Beispiel |
+| Selektor | Inline | IDs | Klassen | Elemente | Gesamt |
-|-----------|---------|----------|
+|----------|--------|-----|---------|----------|--------|
-| **a:** Inline-Style | 1,0,0,0 | `style="..."` |
+| `p` | 0 | 0 | 0 | 1 | 0,0,0,1 |
-| **b:** ID | 0,1,0,0 | `#header` |
+| `.info` | 0 | 0 | 1 | 0 | 0,0,1,0 |
-| **c:** Klasse, Attribut, Pseudo-Klasse | 0,0,1,0 | `.wichtig`, `:hover` |
+| `p.info` | 0 | 0 | 1 | 1 | 0,0,1,1 |
-| **d:** Element, Pseudo-Element | 0,0,0,1 | `p`, `::before` |
+| `#header` | 0 | 1 | 0 | 0 | 0,1,0,0 |
+| `#header .nav a` | 0 | 1 | 1 | 1 | 0,1,1,1 |
 
-**Vergleich:** Von links nach rechts, hoehere Zahl gewinnt.
+**Wichtige Regeln:**
-- 0,1,0,0 > 0,0,99,99 (eine ID schlaegt beliebig viele Klassen)
+- Eine Klasse (0,0,1,0) schlägt **jede Anzahl** von Elementen (0,0,0,99)
+- Eine ID schlägt jede Anzahl von Klassen
+- `!important` bricht alles → vermeiden, da schwer zu überschreiben
 
-**Praktische Tipps:**
+**Best Practice:** Flache Spezifität anstreben. BEM-Methodik (`.block__element--modifier`) hält Spezifität gleichmäßig niedrig.
-- Vermeide IDs in CSS (zu spezifisch)
-- Vermeide `!important` (bricht das System)
-- Nutze Klassen fuer wiederverwendbare Styles
 
 ---
 
@@ -2372,32 +2412,30 @@ Das Gegenteil wäre Desktop First mit max-width – aber Mobile First ist heute
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-# Responsive Design: Erklaerung
+# Responsive Design – Vertiefung
 
-**Definition:** Webseiten passen sich automatisch an verschiedene Bildschirmgroessen an (Desktop, Tablet, Smartphone).
+**Mobile First** ist der Standard: Basis-CSS für kleine Screens, dann Erweiterungen für größere.
 
-**Mobile First Ansatz:**
+**Breakpoints (gängige Werte):**
-1. Basis-CSS fuer kleine Bildschirme schreiben
-2. Mit `@media (min-width: ...)` fuer groessere Bildschirme erweitern
 
-```css
+| Breakpoint | Gerät | Media Query |
-/* Basis (Mobile) */
+|------------|-------|-------------|
-.container { padding: 1rem; }
+| < 576px | Smartphone (Portrait) | Basis (kein Query) |
+| ≥ 576px | Smartphone (Landscape) | `@media (min-width: 576px)` |
+| ≥ 768px | Tablet | `@media (min-width: 768px)` |
+| ≥ 992px | Desktop | `@media (min-width: 992px)` |
+| ≥ 1200px | Large Desktop | `@media (min-width: 1200px)` |
 
-/* Ab 768px (Tablet) */
+**Viewport-Meta-Tag (kritisch!):**
-@media (min-width: 768px) { .container { padding: 2rem; } }
+```html
-
+<meta name="viewport" content="width=device-width, initial-scale=1">
-/* Ab 1024px (Desktop) */
-@media (min-width: 1024px) { .container { max-width: 1200px; } }
 ```
+Ohne diesen Tag ignorieren mobile Browser eure Media Queries und rendern die Desktop-Version verkleinert.
 
-**Typische Breakpoints:**
+**Moderne Alternativen zu Media Queries:**
-- **576px:** Kleine Smartphones
+- `clamp()`: `font-size: clamp(1rem, 2vw, 2rem);`
-- **768px:** Tablets
+- Container Queries: Reagieren auf Container-Größe statt Viewport
-- **1024px:** Desktop
+- CSS Grid `auto-fit`/`auto-fill`: Automatisches Responsive Layout
-- **1200px:** Grosse Bildschirme
-
-**Merkhilfe:** "Mobile First" = Basis klein, dann groesser werden
 
 ---
 

slides/223015c/03-interaktivitaet-javascript.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik (223015c)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: "Kapitel 3: Interaktivität & JavaScript"
 ---
 
@@ -83,7 +83,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
 

slides/223015c/klausurfolien.md

@@ -4,7 +4,7 @@ theme: gaia
 paginate: true
 backgroundColor: #fff
 header: "Grundlagen IT- und Internettechnik (223015c)"
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: "Michael Czechowski – HdM Stuttgart – SoSe 2026"
 title: "Kapitel 1: Geschichte, Grundlagen & HTML"
 ---
 <style>
@@ -93,7 +93,7 @@ section.aufgabe footer {
 Digital- und Medienwirtschaft
 Hochschule der Medien Stuttgart
 
-**Wintersemester 2025/26**
+**Sommersemester 2026**
 
 [https://librete.ch/hdm/223015c/](https://librete.ch/hdm/223015c/)
 

slides/223015c/klausurfragen.md

@@ -3,9 +3,9 @@ marp: true
 theme: gaia
 paginate: true
 backgroundColor: #fff
-header: "Klausurfragen – 223015c"
+header: ""
-footer: "Michael Czechowski – HdM Stuttgart – WS 2025/26"
+footer: ""
-title: "Klausurfragen – Grundlagen IT- und Internettechnik"
+title: "Fragenkatalog – IT-Grundlagen (223015c)"
 ---
 <style>
 :root {
@@ -13,21 +13,42 @@ title: "Klausurfragen – Grundlagen IT- und Internettechnik"
   --color-highlight: #d63384;
   --color-dimmed: #4a4a6a;
 }
-section.invert { --color-foreground: #fff; }
+section.invert {
-section { font-size: 1.325rem; }
+  --color-foreground: #fff;
-h1 { color: #a02060; }
+}
-section.invert h1 { color: #fff; }
+section {
-h2 { color: #1f2937; }
+  font-size: 1.325rem;
-pre { background: #0f0f23; border-radius: 8px; }
+}
-pre code { background: transparent; color: inherit; }
+h1 {
-a { color: var(--color-highlight); }
+  color: #a02060;  /* darker raspberry */
-section.disable { opacity: 0.3; }
+}
+section.invert h1 {
+  color: #fff;
+}
+h2 {
+  color: #1f2937;  /* dark gray, almost black */
+}
+pre {
+  background: #0f0f23;
+  border-radius: 8px;
+}
+pre code {
+  background: transparent;
+  color: inherit;
+}
+a {
+  color: var(--color-highlight);
+}
+section.disable {
+  opacity: 0.3;
+}
 </style>
 
-# Klausurfragen – 223015c
-**Grundlagen IT- und Internettechnik · HdM Stuttgart · M. Czechowski**
 
-<small>Stand: 02.02.2026</small>
+# Klausurfragen – 223015c
+**IT-Grundlagen · HdM Stuttgart · M. Czechowski**
+
+<small>Stand: 01.02.2026</small>
 
 ---
 
@@ -39,7 +60,7 @@ section.disable { opacity: 0.3; }
 > `[ESSAY]` = `essay` (Freitext, manuell bewertet)
 > `[SHORTANS]` = `shortanswer` (Stichwort/Satz, automatisch geprüft)
 > `[NUMERIC]` = `numerical` (Zahlenwert ± Toleranz)
-> `[CLOZE]` = `cloze` (Lückentext, gemischt)
+> `[CLOZE]` = `cloze` (Lückentext, gemischt)`
 
 ---
 
@@ -104,6 +125,19 @@ Welche der folgenden Aussagen werden durch die Von-Neumann-Architektur ermöglic
 
 ---
 
+<!-- _class: disable -->
+
+### A4 – Von-Neumann: Komponenten erklären
+**Thema:** Von-Neumann – Transfer
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die fünf Komponenten der Von-Neumann-Architektur: **Rechenwerk (ALU)**, **Steuerwerk**, **Speicherwerk**, **Ein-/Ausgabe** und **Bus-System**. Beschreiben Sie für jede Komponente ihre Hauptfunktion in einem Satz.
+
+> **Musterlösung:** **Rechenwerk (ALU):** Führt arithmetische (Addition, Subtraktion) und logische (AND, OR, NOT) Operationen durch. **Steuerwerk:** Holt Befehle aus dem Speicher, dekodiert sie und steuert ihre Ausführung (Fetch-Decode-Execute). **Speicherwerk:** Speichert sowohl Programme als auch Daten im selben Speicher – das Kernprinzip der Von-Neumann-Architektur. **Ein-/Ausgabe:** Schnittstelle zu externen Geräten wie Tastatur, Bildschirm, Netzwerkkarte. **Bus-System:** Verbindet alle Komponenten mittels Adress-, Daten- und Steuerbus.
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK B – Netzwerk-Grundlagen (TCP/IP)
@@ -225,6 +259,17 @@ Ordne jeder Adresse ihre Beschreibung zu.
 
 ---
 
+### B7a – IP, MAC, Port: Drei Ebenen erklären
+**Thema:** Adressierung – Transfer
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die drei Adressierungsebenen **IP-Adresse**, **MAC-Adresse** und **Port-Nummer**. Beschreiben Sie für jede: (1) was sie identifiziert, (2) auf welcher Ebene sie gilt (lokal/global), (3) eine Analogie aus dem Alltag.
+
+> **Musterlösung:** **IP-Adresse:** Identifiziert ein Gerät im Internet. Global gültig, ermöglicht Routing über Netzwerkgrenzen. Analogie: „Postanschrift eines Hauses". **MAC-Adresse:** Identifiziert eine Netzwerkkarte. Nur lokal gültig (ein Hop). Analogie: „Seriennummer des Briefkastens". **Port-Nummer:** Identifiziert einen Dienst auf dem Gerät. Analogie: „Türnummer in einem Mehrfamilienhaus" – IP sagt welches Haus, Port sagt welche Wohnung.
+
+---
+
 <!-- _class: disable -->
 
 ### B8 – MAC ändert sich, IP nicht: Warum?
@@ -315,6 +360,17 @@ Ein Videostreaming-Dienst sendet Daten an Ihren Browser. Ein einzelnes Paket geh
 
 ---
 
+### B13a – TCP vs. UDP: Eigenschaften vergleichen
+**Thema:** TCP vs. UDP – Vergleich
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Vergleichen Sie **TCP** und **UDP**. Beschreiben Sie für jedes Protokoll: (1) ob es verbindungsorientiert ist, (2) ob es Zuverlässigkeit garantiert, (3) einen konkreten Anwendungsfall mit Begründung.
+
+> **Musterlösung:** **TCP:** Verbindungsorientiert (3-Way-Handshake). Garantiert Zuverlässigkeit: Sequenznummern, Bestätigungen (ACK), erneutes Senden bei Verlust. Anwendung: Dateiübertragung, E-Mail – jedes Byte muss ankommen. **UDP:** Verbindungslos („fire and forget"). Keine Garantie für Lieferung oder Reihenfolge. Anwendung: Videostreaming, Online-Gaming – Latenz wichtiger als Vollständigkeit, ein verlorenes Paket wird ignoriert statt nachgefordert.
+
+---
+
 ### B14 – TCP vs. UDP: Unterschiede beschreiben
 **Thema:** TCP vs. UDP – Konzept-Vergleich
 **Punkte:** 2
@@ -371,6 +427,8 @@ Beschreibe die drei Schritte des TCP 3-Way-Handshakes. Erkläre, warum alle drei
 
 ---
 
+<!-- _class: disable -->
+
 ### B18 – TCP Sequenznummern: Wozu?
 **Thema:** TCP – Sequenznummern
 **Punkte:** 1
@@ -545,6 +603,30 @@ Ordne jedem Szenario den passenden HTTP-Status-Code zu.
 
 ---
 
+### C9a – Status-Codes: 2xx, 4xx, 5xx vergleichen
+**Thema:** HTTP Status-Codes – Kategorien erklären
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die drei HTTP-Status-Code-Kategorien **2xx**, **4xx** und **5xx**. Beschreiben Sie für jede: (1) was sie bedeutet, (2) wer „schuld" ist (Client oder Server), (3) ein konkretes Beispiel mit Szenario.
+
+> **Musterlösung:** **2xx (Erfolg):** Die Anfrage wurde erfolgreich verarbeitet. Niemand ist „schuld" – alles funktioniert. Beispiel: 200 OK – die Webseite wurde korrekt geladen. **4xx (Client-Fehler):** Die Anfrage war fehlerhaft. Der Client ist verantwortlich. Beispiel: 404 Not Found – der Benutzer hat eine URL eingetippt, die nicht existiert. **5xx (Server-Fehler):** Der Server hat ein Problem. Der Betreiber ist verantwortlich. Beispiel: 503 Service Unavailable – der Server ist überlastet oder in Wartung.
+
+---
+
+<!-- _class: disable -->
+
+### C9b – HTTP-Methoden vergleichen: GET, POST, PUT, DELETE
+**Thema:** HTTP-Methoden – Vergleich
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die vier HTTP-Methoden **GET**, **POST**, **PUT** und **DELETE**. Beschreiben Sie für jede: (1) die Hauptfunktion, (2) ob Daten im Request-Body gesendet werden, (3) ein konkretes Beispiel.
+
+> **Musterlösung:** **GET:** Ruft eine Ressource ab (nur lesen). Keine Daten im Body (Parameter in URL). Beispiel: Webseite aufrufen. **POST:** Erstellt eine neue Ressource. Daten im Body. Beispiel: Neuen Blog-Eintrag erstellen. **PUT:** Ersetzt eine existierende Ressource vollständig. Daten im Body. Beispiel: Profilbild durch ein neues ersetzen. **DELETE:** Löscht eine Ressource. Meist keine Daten im Body. Beispiel: Kommentar löschen.
+
+---
+
 ### C10 – Status-Codes: Freitext
 **Thema:** HTTP Status-Codes – Konzept zusammenfassen
 **Punkte:** 2
@@ -578,6 +660,42 @@ Was ist die Hauptfunktion eines DNS-Servers?
 
 ---
 
+### D2 – DNS: Zeitlicher Ablauf
+**Thema:** DNS – Rolle im Gesamtablauf
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert **vor** dem TCP-Handshake?
+
+- [ ] Der Browser sendet direkt den Namen an den Server – DNS wird erst danach benötigt.
+- [x] **DNS-Auflösung: Der Name wird in eine IP-Adresse umgewandelt. TCP kann nur zu IP-Adressen Verbindungen aufbauen.** ✅
+- [ ] DNS passiert nach dem TCP-Handshake.
+- [ ] DNS ist nur für HTTPS nötig – bei HTTP kann der Name direkt verwendet werden.
+
+> **Feedback:** DNS vor TCP. Kein Name-to-IP? Kein Handshake möglich. TCP arbeitet auf IP-Adressen, nicht auf Domain-Namen.
+
+---
+
+<!-- _class: disable -->
+
+### D1-alt – DNS: Was macht es?
+**Thema:** DNS – Grundfunktion
+**Punkte:** 1
+**Typ:** `[MC]`
+
+Was ist die Hauptfunktion eines DNS-Servers?
+
+- [ ] Er verschlüsselt die Verbindung zwischen Client und Server.
+- [x] **Er übersetzt einen Domain-Namen (z. B. `hdm-stuttgart.de`) in eine IP-Adresse.** ✅
+- [ ] Er routet Pakete durch das Internet.
+- [ ] Er weist jedem Computer eine MAC-Adresse zu.
+
+> **Feedback:** DNS = Domain Name System = „Telefonbuch des Internets". Name → IP. Ohne DNS müsste man überall IP-Adressen eintippen.
+
+---
+
+<!-- _class: disable -->
+
 ### D2 – DNS: Zeitlicher Ablauf
 **Thema:** DNS – Rolle im Gesamtablauf
 **Punkte:** 2
@@ -594,6 +712,8 @@ Sie geben `https://hdm-stuttgart.de` in die Adresszeile ein. Was passiert vor de
 
 ---
 
+<!-- _class: disable -->
+
 ### D3 – DNS: Warum zwingend nötig?
 **Thema:** DNS – Transfer/Begründung
 **Punkte:** 2
@@ -605,6 +725,8 @@ Erkläre in 2–3 Sätzen, warum der DNS-Schritt zwingend vor dem TCP-Handshake
 
 ---
 
+<!-- _class: disable -->
+
 ### D4 – DNS: Lückentext
 **Thema:** DNS – Terminologie
 **Punkte:** 1
@@ -616,6 +738,19 @@ Der DNS-Server übersetzt einen [[1:Domain-Namen]] in eine [[2:IP-Adresse]]. Die
 
 ---
 
+<!-- _class: disable -->
+
+### D5 – Encapsulation: Daten → Segment → Paket → Frame
+**Thema:** Encapsulation – Transfer
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie den Encapsulation-Prozess beim Senden einer Nachricht. Beschreiben Sie die vier Dateneinheiten **Daten**, **Segment**, **Paket** und **Frame**. Was wird bei jedem Schritt hinzugefügt und von welcher Schicht?
+
+> **Musterlösung:** **Daten:** Die eigentliche Nachricht (z.B. HTML) von der Anwendungsschicht. **Segment:** Transportschicht fügt TCP-Header hinzu (Ports, Sequenznummern). **Paket:** Internetschicht fügt IP-Header hinzu (Quell- und Ziel-IP-Adresse). **Frame:** Netzzugangsschicht fügt Ethernet-Header (MAC-Adressen) und Trailer (Prüfsumme) hinzu. Beim Empfänger wird in umgekehrter Reihenfolge ausgepackt (Decapsulation).
+
+---
+
 <!-- _class: lead -->
 
 ## BLOCK E – Der Gesamtablauf (Zusammen)
@@ -653,6 +788,17 @@ Sie geben eine URL ein. Welche Reihenfolge ist korrekt?
 
 > **Feedback:** DNS immer zuerst. Dann TCP (Verbindung). Dann HTTP (Anfrage/Antwort).
 
+---
+
+### E3 – Gesamtablauf: DNS, TCP, HTTP erklären
+**Thema:** Gesamtablauf – Schritte erklären
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die drei Hauptphasen beim Aufruf einer Webseite: **DNS-Auflösung**, **TCP-Verbindungsaufbau** und **HTTP-Request/Response**. Beschreiben Sie für jede Phase: (1) was passiert, (2) warum sie vor der nächsten kommen muss.
+
+> **Musterlösung:** **DNS-Auflösung:** Der Domain-Name wird in eine IP-Adresse übersetzt. Muss zuerst kommen, weil TCP nur mit IP-Adressen arbeiten kann. **TCP-Verbindungsaufbau:** Der 3-Way-Handshake (SYN → SYN-ACK → ACK) baut eine zuverlässige Verbindung auf. Muss vor HTTP kommen, weil HTTP auf TCP aufsetzt und eine bestehende Verbindung braucht. **HTTP-Request/Response:** Der Browser sendet GET, der Server antwortet mit 200 OK + HTML. Kann erst nach TCP-Verbindung stattfinden.
+
 ---
 <!-- _class: lead -->
 
@@ -696,6 +842,8 @@ Ordne jedem Element zu, ob es in `<head>` oder `<body>` gehört.
 
 ---
 
+<!-- _class: disable -->
+
 ### F3 – Charset: Was passiert ohne `<meta charset>`?
 **Thema:** HTML – Zeichenkodierung
 **Punkte:** 1
@@ -817,6 +965,8 @@ Ordne jedem Eingabegerät seine Nutzungsweise zu.
 
 ---
 
+<!-- _class: disable -->
+
 ### H2 – Einschränkungen: Temporär vs. situativ
 **Thema:** Barrierefreiheit – Einschränkungstypen
 **Punkte:** 2
@@ -833,6 +983,17 @@ Eine Person kann aktuell nur mit einer Hand ihr Handy bedienen, weil sie das Bab
 
 ---
 
+### H2a – Einschränkungen: Permanent, Temporär, Situativ
+**Thema:** Barrierefreiheit – Einschränkungstypen erklären
+**Punkte:** 3
+**Typ:** `[ESSAY]`
+
+Erklären Sie die drei Typen von Einschränkungen: **permanent**, **temporär** und **situativ**. Nennen Sie für jeden Typ: (1) eine Definition, (2) ein konkretes Beispiel, (3) wie barrierefreie Gestaltung in diesem Fall hilft.
+
+> **Musterlösung:** **Permanent:** Dauerhafte körperliche/kognitive Behinderung. Beispiel: Blindheit. Hilfe: Screenreader kann Alt-Texte vorlesen. **Temporär:** Zeitlich begrenzte Einschränkung durch Verletzung/Krankheit. Beispiel: Gebrochener Arm. Hilfe: Tastaturnavigation ermöglicht Bedienung ohne Maus. **Situativ:** Einschränkung durch aktuelle Umgebung/Situation. Beispiel: Helle Sonne auf dem Bildschirm. Hilfe: Hoher Kontrast macht Text trotzdem lesbar.
+
+---
+
 <!-- _class: disable -->
 
 ### H3 – Curb-Cut-Effekt: Beispiel identifizieren