merge klausur-erklaerungen into test-merge

resolves all conflicts: main's content preferred for slide edits, klausur-erklaerungen's structural additions (erklaerung slides, klausurfragen, archive, scripts) preserved. fixes generate-root-index.sh semester to sommersemester 2026.
add erklaerung slides after klausur slides in 223015c
2026-03-26 22:31:04 +01:00 · 2026-02-02 14:03:54 +01:00 · 2026-02-02 13:42:12 +01:00 · 2026-02-02 13:42:11 +01:00 · 2026-02-02 13:42:02 +01:00 · 2026-02-02 13:41:58 +01:00
246 changed files with 6441 additions and 10178 deletions
@@ -2,7 +2,6 @@
 build/
 *.pdf
 *.html
 !slides/*/assets/demos/**/*.html
 .dev-index/
 # Dependencies
@@ -35,9 +35,8 @@ build/                  # Generated output (gitignored)
 ## Build Commands
 ```bash
-make dev            # Marp live server all courses (port 1312, HMR)
+make dev-b          # Dev server 223015b (port 1311)
-make dev-b          # Marp live server 223015b (port 1313, HMR)
+make dev-c          # Dev server 223015c (port 1312)
 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
@@ -27,9 +27,7 @@ help:
 	@echo "  223015c - Internettechnologien"
 	@echo ""
 	@echo "Development:"
-	@echo "  make dev         - Marp live server all courses (port 1312, HMR)"
+	@echo "  make dev         - Start development server (port 3000)"
 	@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"
@@ -57,20 +55,13 @@ build/.exists:
 	@mkdir -p build/223015b build/223015c
 	@touch $@
-# Development server (Marp live server with HMR)
+# Development server
 dev:
 	@./scripts/dev-server.sh
 dev-b:
 	@./scripts/dev-server.sh 223015b 1313
 dev-c:
 	@./scripts/dev-server.sh 223015c 1314
 dev-kill:
-	@-fuser -k 1312/tcp 2>/dev/null || true
+	@-pkill -f "marp-cli.*--server" 2>/dev/null || true
-	@-fuser -k 1313/tcp 2>/dev/null || true
+	@sleep 0.5
 	@-fuser -k 1314/tcp 2>/dev/null || true
 # Build functions
 define build_course
@@ -0,0 +1,469 @@
 <?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>
@@ -0,0 +1,439 @@
 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).
@@ -1,21 +0,0 @@
 const { Marp } = require('@marp-team/marp-core');
 const hljs = require('highlight.js');
 module.exports = {
  engine: (opts) => {
    const marp = new Marp(opts);
    const md = marp.markdown;
    const defaultInline = md.renderer.rules.code_inline
      || ((tokens, idx, options, env, self) => `<code>${md.utils.escapeHtml(tokens[idx].content)}</code>`);
    md.renderer.rules.code_inline = (tokens, idx, options, env, self) => {
      const content = tokens[idx].content;
      try {
        const highlighted = hljs.highlight(content, { language: 'html', ignoreIllegals: true }).value;
        return `<code class="hljs language-html">${highlighted}</code>`;
      } catch (e) {
        return defaultInline(tokens, idx, options, env, self);
      }
    };
    return marp;
  }
 };
@@ -13,18 +13,11 @@
    "deploy": "make deploy",
    "test": "echo \"No tests specified\" && exit 0"
  },
-  "keywords": [
+  "keywords": ["marp", "slides", "hdm", "lectures"],
    "marp",
    "slides",
    "hdm",
    "lectures"
  ],
  "author": "Michael Czechowski <mail@librete.ch>",
  "license": "CC-BY-SA-4.0",
  "type": "commonjs",
  "devDependencies": {
-    "@marp-team/marp-cli": "^4.2.3",
+    "@marp-team/marp-cli": "^4.2.3"
    "@marp-team/marp-core": "^4.3.0",
    "highlight.js": "^11.11.1"
  }
 }
@@ -1,16 +1,12 @@
 #!/usr/bin/env bash
-# Development server for HdM slides
+# Simplified development server for HdM slides
-# Usage:
+# Starts single Marp server for all courses
 #   ./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"
-COURSE="${1:-}"
+DEV_PORT=3000
 DEV_PORT="${2:-1312}"
 # Colors
 GREEN='\033[0;32m'
@@ -18,27 +14,40 @@ BLUE='\033[0;34m'
 RED='\033[0;31m'
 NC='\033[0m' # No Color
-# Kill existing process on our port only
+# Cleanup function
-kill_port() {
+cleanup() {
-    fuser -k "$DEV_PORT/tcp" 2>/dev/null || true
+    echo -e "\n${RED}Shutting down dev server...${NC}"
-    sleep 0.5
+    pkill -f "marp-cli.*--server" 2>/dev/null || true
    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 'echo -e "\n${RED}Shutting down...${NC}"; kill 0; exit 0' SIGINT SIGTERM
+trap cleanup SIGINT SIGTERM
-kill_port
+kill_existing
-if [ -n "$COURSE" ]; then
+echo -e "${GREEN}Starting development server...${NC}"
-    SERVE_DIR="$SLIDES_DIR/$COURSE"
+echo ""
-    echo -e "${GREEN}Marp dev server${NC} · ${BLUE}$COURSE${NC}"
+echo -e "  Server:   ${BLUE}http://localhost:$DEV_PORT${NC}"
-else
+echo -e "  Slides:   ${BLUE}$SLIDES_DIR/${NC}"
-    SERVE_DIR="$SLIDES_DIR"
+echo ""
-    echo -e "${GREEN}Marp dev server${NC} · ${BLUE}all courses${NC}"
+echo -e "Available courses:"
-fi
+echo -e "  223015b: ${BLUE}http://localhost:$DEV_PORT/223015b/${NC}"
-
+echo -e "  223015c: ${BLUE}http://localhost:$DEV_PORT/223015c/${NC}"
-echo -e "  ${BLUE}http://localhost:$DEV_PORT${NC}"
+echo ""
-echo -e "  ${BLUE}$SERVE_DIR/${NC}"
+echo -e "Press ${RED}Ctrl+C${NC} to stop the server"
 echo ""
-PORT=$DEV_PORT exec npx @marp-team/marp-cli -c marp.config.js --server "$SERVE_DIR/"
+# Start single Marp server for all slides
 PORT=$DEV_PORT npx @marp-team/marp-cli --server "$SLIDES_DIR/"
 # Wait for process to exit
 wait
@@ -41,6 +41,7 @@ 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)
@@ -320,42 +321,42 @@ LINK
 done
-# Add klausurfolien entry if it exists (disabled — wird noch überarbeitet)
+# Add klausurfolien entry if it exists
 if [[ -f "$BUILD_DIR/klausurfolien.html" ]]; then
-  pdf_disabled=""
+  pdf_link=""
  if [[ -f "$BUILD_DIR/klausurfolien.pdf" ]]; then
-    pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
+    pdf_link="<a href=\"klausurfolien.pdf\" class=\"btn btn-pdf\">PDF</a>"
  fi
  cat >> "$BUILD_DIR/index.html" << KLAUSUR
-    <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
+    <div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
-      <div class="kapitel-link">
+      <a href="klausurfolien.html" class="kapitel-link">
        <div class="kapitel-label">Prüfung</div>
        <div class="kapitel-title">Klausurrelevante Folien</div>
-      </div>
+      </a>
-      <span class="btn btn-slides btn-disabled">Folien</span>
+      <a href="klausurfolien.html" class="btn btn-slides">Folien</a>
-      $pdf_disabled
+      $pdf_link
    </div>
 KLAUSUR
 fi
-# Add klausurfragen entry if it exists (disabled — wird noch überarbeitet)
+# Add klausurfragen entry if it exists (HTML and/or PDF)
 if [[ -f "$BUILD_DIR/klausurfragen.html" ]] || [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
-  pdf_disabled=""
+  pdf_link=""
  if [[ -f "$BUILD_DIR/klausurfragen.pdf" ]]; then
-    pdf_disabled="<span class=\"btn btn-pdf btn-disabled\">PDF</span>"
+    pdf_link="<a href=\"klausurfragen.pdf\" class=\"btn btn-pdf\">PDF</a>"
  fi
-  slides_disabled=""
+  slides_link=""
  if [[ -f "$BUILD_DIR/klausurfragen.html" ]]; then
-    slides_disabled="<span class=\"btn btn-slides btn-disabled\">Folien</span>"
+    slides_link="<a href=\"klausurfragen.html\" class=\"btn btn-slides\">Folien</a>"
  fi
  cat >> "$BUILD_DIR/index.html" << KLAUSURFRAGEN
-    <div class="kapitel-card disabled" style="border-left: 3px solid $ACCENT_COLOR;">
+    <div class="kapitel-card" style="border-left: 3px solid $ACCENT_COLOR;">
-      <div class="kapitel-link">
+      <a href="klausurfragen.html" class="kapitel-link">
        <div class="kapitel-label">Prüfung</div>
        <div class="kapitel-title">Klausurfragen</div>
-      </div>
+      </a>
-      $slides_disabled
+      $slides_link
-      $pdf_disabled
+      $pdf_link
    </div>
 KLAUSURFRAGEN
 fi
@@ -1,8 +1,8 @@
 #!/usr/bin/env bash
-# Generate root index.html for HdM slides overview
+# Generate root index.html for /hdm/
-# Usage: ./generate-root-index.sh
+# Lists all courses (klausurfragen are now per-course)
-BUILD_DIR="${1:-build}"
+BUILD_DIR="build"
 cat > "$BUILD_DIR/index.html" << 'HEADER'
 <!DOCTYPE html>
@@ -78,6 +78,31 @@ 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;
@@ -112,6 +137,7 @@ 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>
@@ -123,16 +149,19 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
      <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 &quot;Technik 1&quot;</span>
+        <span class="course-info">6 Kapitel · Modul "Technik 1"</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 &quot;Technik 1&quot;</span>
+        <span class="course-info">3 Kapitel · Modul "Technik 1"</span>
      </a>
    </div>
 HEADER
 cat >> "$BUILD_DIR/index.html" << 'FOOTER'
  </div>
  <h2 class="section-title">Referenzen</h2>
  <div class="references">
@@ -153,6 +182,6 @@ cat > "$BUILD_DIR/index.html" << 'HEADER'
  </footer>
 </body>
 </html>
-HEADER
+FOOTER
 echo "Generated $BUILD_DIR/index.html"
@@ -40,13 +40,11 @@ pre code {
  color: inherit;
 }
 code {
-  background: #0f0f23;
+  background: #1a1a2e;
  color: #5fb3e4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
 section code:not(.hljs) { color: #5fb3e4 !important; }
 section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -90,56 +88,50 @@ Hochschule der Medien Stuttgart
 ---
 <!-- _header: '' -->
 <!-- _footer: '' -->
 ![bg fit](./assets/qrcode-0.svg)
 ---
 <!-- _class: lead -->
-# Herzlich willkommen!
+# Willkommen!
 ## Einführung
 ---
 # Über mich
-**Michael Werner Czechowski**
+**Michael Czechowski**
- Systems and Platform Engineer
+- Irgendwas mit IT, Cloud und AI
 - Schwerpunkte:
  - Web-Technologien, Barriere-Armut, Systemarchitektur, Open Source
 - Hintergrund:
-  - Philosophie (Uni Stuttgart)
+  - Philosophie (Uni Stuttgart) -> NO degree
-  - Wirtschaftsinformatik (Leibniz-FH Hannover)
+  - Wirtschafts-Informatik (Leibniz-FH) -> B.Sc.
 - Kontakt: lb-czechowski@hdm-stuttgart.de
 <!--
 Kurze Vorstellung
 Praxisbezug betonen
 Fragen jederzeit willkommen
 -->
 ---
-# Warum dieses Modul?
+<!-- _footer: '' -->
-**Digitale Medien sind überall.**
+![bg fit](./assets/jung-naiv.png)
-* 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!**
-<!--
+# AMA (Ask my anything)
 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
-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
+*Nur ein Vorschlag ...*
-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
+* Hast du alle Bände von AoT daheim?
-
+* Hast du eine Studierenden-Kneipe mal geleitet?
-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
+* Hast du wirklich 17 Semester Philosophie ohne Abschluss studiert?
 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
 -->
 ---
@@ -147,46 +139,116 @@ Hochschule der Medien Stuttgart
 **Bitte Hand heben:**
-* Wer kennt den Unterschied zwischen analog und digital?
+1) Wer hat schon mal ein Video komprimiert/konvertiert?
-* Wer hat schon mal eine Datei von einem Format in ein anderes konvertiert?
+2) Wer kennte die 3-2-1 Regel?
-* Wer hat schon mal Metadaten aus einem Foto entfernt?
+3) Wer weiß, was der Unterschied zwischen JPEG und PNG ist?
-* Wer hat schon mal ein Backup verloren?
+4) Wer hat schon mal mit APIs gearbeitet?
-* Wer hat schon mal ein Backup wiederhergestellt?
+5) Wer weiß, was UTF-8 bedeutet?
 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
-**Kapitel:**
+**5 Termine:**
-* 1. **Grundlagen**, Text & Audio (Bits, Bytes, Zeichenkodierung, MP3)
+| # | Datum | Thema |
-* 2. Bild- & Video-**Kompression** (JPEG, PNG, H.264/H.265)
+|---|-------|-------|
-* 3. **Speichermedien** & **Schnittstellen** (HDD, SSD, USB, Thunderbolt)
+| 1 | 19.12.2025 | Bits, Bytes, Zeichenkodierung & Audio |
-* 4. **Distribution** und Verteilung (Streaming, REST, Cloud)
+| 2 | 09.01.2026 | Bild- & Video-Kompression |
-* Vertiefung & offene Fragen
+| 3 | 23.01.2026 | Speichermedien & Schnittstellen |
 | 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
 -->
 ---
-<!-- _class: klausur -->
+# Prüfungsleistung 18.02.
 <!-- _header: '' -->
 <!-- _footer: '' -->
 <!-- _backgroundColor: #e3f2fd -->
 # Prüfungsleistung
 **Nach aktuellem Kenntnisstand:**
-* 90 min insg. (Technik 1)
+* 90 min (40% Grundlagen, 40% Dateiformate, 20% AV)
-* Schriftliche Klausur (digital)
+* Schriftliche Klausur
 * Teils offene Fragen
-* Kein Coding/Programmieren
+* Vermutlich digital
-* **Prüfungsrelevante Folien:**
+* Kein Coding!
-  - Gestreift oder Vollton (PDF) markiert
+* **Prüfungsrelevant:** Alles in den Folien/im Skript
 <!--
 Details können sich noch ändern
 Keine Programmieraufgaben
 Verständnisfragen, keine Auswendiglernerei
 -->
@@ -40,13 +40,11 @@ pre code {
  color: inherit;
 }
 code {
-  background: #0f0f23;
+  background: #1a1a2e;
  color: #5fb3e4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
 section code:not(.hljs) { color: #5fb3e4 !important; }
 section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -72,6 +70,18 @@ section.aufgabe footer {
 }
 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;
@@ -948,7 +958,7 @@ KLAUSURRELEVANT:
 <!--
 - Kompatibilität schlägt oft Effizienz
 - TIFF für Archivierung: Unkomprimiert oder verlustfrei
- RAW für FotografInnen: Maximale Bearbeitungsfreiheit
+- RAW für Fotografen: Maximale Bearbeitungsfreiheit
 - Frage: "Was passiert, wenn ihr ein PNG auf Instagram hochladet?"
 -->
@@ -984,8 +994,8 @@ KLAUSURRELEVANT:
 - Instagram ist keine Kunstgalerie, sondern Massenplattform
 - Optimiert für Geschwindigkeit, nicht Qualität
 - Facebook, Twitter, TikTok – alle machen das
- Tipp für FotografInnen: Portfolio auf eigener Website
+- Tipp für Fotografen: Portfolio auf eigener Website
- Diskussion: Ist das fair? Trade-off Nutzende vs. Plattform
+- Diskussion: Ist das fair? Trade-off Nutzer vs. Plattform
 -->
 ---
@@ -1062,7 +1072,7 @@ KLAUSURRELEVANT:
 **Codec** (Coder-Decoder) definiert den Kompressionsalgorithmus. Derselbe Container kann verschiedene Codecs enthalten – die Dateiendung verrät den Codec nicht.
-| Container | Entwicklung | Typische Codecs | Besonderheit |
+| Container | Entwickler | Typische Codecs | Besonderheit |
 |-----------|------------|-----------------|--------------|
 | MP4 | ISO/MPEG | H.264, H.265, AAC | Web-Standard, DRM-fähig |
 | MKV | Matroska | Alle | Beliebig viele Streams, Kapitel |
@@ -1326,7 +1336,7 @@ H.264 (2003) ermöglichte erst YouTube (2005), Netflix-Streaming (2007) und Blu-
 **Hardware-Ubiquität:** Seit 2010 hat jedes Smartphone, jede GPU, jeder Smart-TV einen H.264-Hardware-Decoder. Encoding in Echtzeit braucht keine CPU – das ermöglichte erst mobiles Video-Streaming und Videotelefonie.
-**Patent-Pool (MPEG-LA):** ~2.000 Patente von 30+ Unternehmen. Endnutzungs-Streaming ist lizenzfrei; Hardware-Hersteller zahlen ~$0,20/Gerät.
+**Patent-Pool (MPEG-LA):** ~2.000 Patente von 30+ Unternehmen. Endnutzer-Streaming ist lizenzfrei; Hardware-Hersteller zahlen ~$0,20/Gerät.
 ---
@@ -1347,7 +1357,7 @@ H.264 (2003) ermöglichte erst YouTube (2005), Netflix-Streaming (2007) und Blu-
 <!--
 - MPEG-LA = Licensing Authority
 - Firefox weigerte sich lange, H.264 zu unterstützen
- "Free to View" gilt nur für Endnutzungs-Streaming
+- "Free to View" gilt nur für Endnutzer-Streaming
 - Diskussion: Sollten Standards patent-frei sein?
 -->
@@ -40,13 +40,11 @@ pre code {
  color: inherit;
 }
 code {
-  background: #0f0f23;
+  background: #1a1a2e;
  color: #5fb3e4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
 section code:not(.hljs) { color: #5fb3e4 !important; }
 section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -72,6 +70,18 @@ section.aufgabe footer {
 }
 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;
@@ -154,7 +164,7 @@ Hersteller: Dezimal (SI-Präfix) - klingt mehr!
 Betriebssysteme: Binär - aber zeigen "GB" statt "GiB"
 Diskrepanz bei 1 TB: 1.000.000.000.000 vs. 1.099.511.627.776 Bytes
 → 10% Unterschied bei TB-Größen
-Verwirrung für KonsumentInnen seit Jahrzehnten
+Verwirrung für Konsumenten seit Jahrzehnten
 ISO/IEC 80000-13: Definiert KiB, MiB, GiB, TiB (2008)
 -->
@@ -592,7 +602,7 @@ Voll: Langsamstes Backup, schnellste Wiederherstellung
 <!--
 Time Machine: Stündliche Snapshots, APFS-Integration
-Veeam: Enterprise-Level, kostenlose Privatversion
+Veeam: Enterprise-Level, kostenlose Endnutzer-Version
 rsync: Unix-Klassiker, extrem effizient
 Borg: Deduplizierung + Verschlüsselung
 -->
@@ -40,13 +40,11 @@ pre code {
  color: inherit;
 }
 code {
-  background: #0f0f23;
+  background: #1a1a2e;
  color: #5fb3e4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
 section code:not(.hljs) { color: #5fb3e4 !important; }
 section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -160,7 +158,7 @@ AWS Snowmobile: 45-Fuß-Container auf LKW
 **Prozess:**
 1. AWS schickt verschlüsseltes Gerät
-2. KundIn kopiert Daten lokal (schnell!)
+2. Kunde kopiert Daten lokal (schnell!)
 3. Gerät zurück an AWS
 4. AWS lädt in S3 hoch
@@ -220,7 +218,7 @@ Server unter Last (symbolisch)
 **Klassisches Modell:** Ein Server, viele Clients
 **Problem:**
-1 Million Nutzende wollen 1 GB-Datei
+1 Million User wollen 1 GB-Datei
 → Server braucht **1 PB Bandbreite!**
 → Server überlastet → **"Hug of Death"**
@@ -252,7 +250,7 @@ Globale Verteilung
 **Funktionsweise:**
 1. **Origin Server** (Hauptquelle)
 2. **Edge Servers** (geografisch verteilt)
-3. Nutzende → nächster Edge Server
+3. User → nächster Edge Server
 4. Erste Anfrage: Edge holt von Origin, cached
 5. Weitere Anfragen: Direkt vom Edge (schnell!)
@@ -277,7 +275,7 @@ Große CDN-Anbieter: Cloudflare, Akamai, Amazon CloudFront, Fastly
 - Lange Cache-Zeit (TTL: Tage/Wochen)
 **Dynamic Content:**
- Nutzungs-spezifisch (Profil)
+- User-spezifisch (Profil)
 - Kurze TTL oder nicht cachebar
 **Cache Invalidation:**
@@ -349,14 +347,14 @@ Dezentral, jeder ist Client & Server
 - IPFS (InterPlanetary File System)
 - Blockchain (Bitcoin, Ethereum)
-**Vorteil:** Skalierbar (mehr Nutzende = mehr Bandbreite!)
+**Vorteil:** Skalierbar (mehr User = mehr Bandbreite!)
 **Nachteil:** Langsam bei wenigen Peers, oft für Piraterie missbraucht
 <!-- 
 P2P vs. Client-Server: Kein zentraler Server
-Last verteilt sich auf alle Teilnehmenden
+Last verteilt sich auf alle Teilnehmer
-Je mehr Nutzende, desto schneller (umgekehrt zu Client-Server!)
+Je mehr User, desto schneller (umgekehrt zu Client-Server!)
 Zensur-resistent: Kein Single Point of Failure
 Rechtliche Grauzone: Technologie neutral, aber oft illegal genutzt
 -->
@@ -1023,8 +1021,8 @@ Privacy-Albtraum
 **Beispiele:**
 - **Foto:** Kamera, Datum, GPS, Belichtung
- **MP3:** KünstlerInnen, Album, Jahr, Genre, Cover
+- **MP3:** Künstler, Album, Jahr, Genre, Cover
- **PDF:** AutorIn, Datum, Software
+- **PDF:** Autor, Datum, Software
 - **E-Mail:** Absender, Empfänger, Zeitstempel
 **Warum wichtig?**
@@ -1180,7 +1178,7 @@ Wikipedia für Musik-Metadaten
 **Idee:** Wikipedia für Musik-Metadaten
 **Community-gepflegt:**
- KünstlerInnen, Alben, Tracks
+- Künstler, Alben, Tracks
 - Relationships (Band-Mitglieder, Label...)
 - Releases (verschiedene Editionen, Länder)
@@ -1239,7 +1237,7 @@ Versteckte Informationen sichtbar
 **PDF-Metadaten (XMP):**
 **Gespeichert:**
- Titel, AutorIn, Betreff, Keywords
+- Titel, Autor, Betreff, Keywords
 - Erstellungsdatum, Änderungsdatum
 - Software, **Company** (aus Office-Lizenz!)
@@ -1600,7 +1598,7 @@ QKD: Abhör-sichere Kommunikation (Quantenmechanik garantiert)
 **Filecoin (2017):**
 - Blockchain-basiert
- Nutzende vermieten Festplatten-Platz
+- User vermieten Festplatten-Platz
 - Bezahlung in FIL (Kryptowährung)
 **Arweave (2018):**
@@ -1638,7 +1636,7 @@ Legitime Use-Cases: NFT-Storage, Zensur-resistente Archivierung
 - 5G + Edge Computing nötig
 **Cloud Gaming:**
- Spiel im Rechenzentrum, Stream zu Nutzenden
+- Spiel im Rechenzentrum, Stream zu User
 - Input-Lag = Todfeind (<50ms)
 **Problem:** Physik (Lichtgeschwindigkeit!)
@@ -1647,7 +1645,7 @@ Legitime Use-Cases: NFT-Storage, Zensur-resistente Archivierung
 8K: YouTube unterstützt, aber wer hat 8K-Monitor?
 VR: Meta Quest, Apple Vision Pro
 Latenz: Lichtgeschwindigkeit ~300.000 km/s, aber Routing + Processing addiert sich
-Edge Computing: Server näher an Nutzende (5G-Masten)
+Edge Computing: Server näher an User (5G-Masten)
 Cloud Gaming: Stadia gescheitert (2023 †), GeForce Now, Xbox Cloud
 Input-Lag: Fiber ~5ms/1000km, aber Server-Processing + Encoding + Decoding
 -->
@@ -40,13 +40,11 @@ pre code {
  color: inherit;
 }
 code {
-  background: #0f0f23;
+  background: #1a1a2e;
  color: #5fb3e4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
 section code:not(.hljs) { color: #5fb3e4 !important; }
 section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -1,311 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>ASCII-Tabelle</title>
 <style>
  :root {
    --hl: #1e5f8a;
    --dark: #1a1a2e;
    --muted: #6b7280;
    --border: #cbd5e1;
    --bg-soft: #f8fafc;
    --c-ctrl: #e5e7eb;     /* control */
    --c-ctrl-text: #4b5563;
    --c-space: #fef3c7;    /* space */
    --c-punct: #ddd6fe;    /* punctuation */
    --c-digit: #bfdbfe;    /* digits */
    --c-upper: #bbf7d0;    /* uppercase */
    --c-lower: #fed7aa;    /* lowercase */
    --c-del:   #fecaca;    /* DEL */
  }
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 18px 24px; }
  h1 { text-align: center; margin: 0 0 2px; font-size: 1.5rem; }
  .sub { text-align: center; color: var(--muted); margin-bottom: 14px; font-size: 0.9rem; }
  .sub strong { color: var(--dark); }
  .table-wrap { display: flex; justify-content: center; }
  table.ascii {
    border-collapse: separate;
    border-spacing: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
  }
  table.ascii th, table.ascii td {
    width: 68px;
    height: 60px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
  }
  table.ascii th {
    background: var(--dark); color: #fff;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    width: 56px;
    height: 36px;
  }
  table.ascii th.row { width: 64px; }
  table.ascii th .b { display: block; font-size: 0.68rem; opacity: 0.7; font-weight: 400; margin-top: 2px; letter-spacing: 0.04em; }
  table.ascii td {
    border: 1px solid var(--border);
    position: relative;
  }
  td .hex { position: absolute; top: 3px; left: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 700; }
  td .dec { position: absolute; bottom: 3px; right: 5px; font-size: 0.62rem; color: var(--muted); font-weight: 400; }
  td .ch { font-size: 1.45rem; font-weight: 700; line-height: 1; }
  td.ctrl .ch { font-size: 0.82rem; font-weight: 700; }
  td.ctrl .ch small { display: block; font-size: 0.6rem; font-weight: 400; color: var(--muted); margin-top: 2px; letter-spacing: 0; }
  td.ctrl  { background: var(--c-ctrl); color: var(--c-ctrl-text); }
  td.space { background: var(--c-space); }
  td.punct { background: var(--c-punct); }
  td.digit { background: var(--c-digit); }
  td.upper { background: var(--c-upper); }
  td.lower { background: var(--c-lower); }
  td.del   { background: var(--c-del); color: var(--c-ctrl-text); }
  .legend {
    margin: 14px auto 0;
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    font-size: 0.85rem;
  }
  .legend .item { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); }
  .legend .swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); }
  .legend .swatch.ctrl  { background: var(--c-ctrl); }
  .legend .swatch.space { background: var(--c-space); }
  .legend .swatch.punct { background: var(--c-punct); }
  .legend .swatch.digit { background: var(--c-digit); }
  .legend .swatch.upper { background: var(--c-upper); }
  .legend .swatch.lower { background: var(--c-lower); }
  .legend .swatch.del   { background: var(--c-del); }
  .meta-row {
    margin-top: 10px;
    display: flex; gap: 18px; justify-content: center;
    font-size: 0.85rem; color: var(--muted);
  }
  .meta-row strong { color: var(--dark); }
  .meta-row code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
 </style>
 </head>
 <body>
  <h1>ASCII-Tabelle (1963) · 7 Bit · 128 Zeichen</h1>
  <div class="sub">Spalte = High-Nibble (Hex 0–7) · Zeile = Low-Nibble (Hex 0–F) · <strong>Hex</strong> oben, <strong>Dezimal</strong> unten</div>
  <div class="table-wrap">
  <table class="ascii">
    <thead>
      <tr>
        <th class="row">↓ Low<br>→ High</th>
        <th>0<span class="b">0000</span></th>
        <th>1<span class="b">0001</span></th>
        <th>2<span class="b">0010</span></th>
        <th>3<span class="b">0011</span></th>
        <th>4<span class="b">0100</span></th>
        <th>5<span class="b">0101</span></th>
        <th>6<span class="b">0110</span></th>
        <th>7<span class="b">0111</span></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="row">0<span class="b">0000</span></th>
        <td class="ctrl"><span class="hex">00</span><span class="ch">NUL<small>null</small></span><span class="dec">0</span></td>
        <td class="ctrl"><span class="hex">10</span><span class="ch">DLE<small>data link esc</small></span><span class="dec">16</span></td>
        <td class="space"><span class="hex">20</span><span class="ch">SP<small>space</small></span><span class="dec">32</span></td>
        <td class="digit"><span class="hex">30</span><span class="ch">0</span><span class="dec">48</span></td>
        <td class="punct"><span class="hex">40</span><span class="ch">@</span><span class="dec">64</span></td>
        <td class="upper"><span class="hex">50</span><span class="ch">P</span><span class="dec">80</span></td>
        <td class="punct"><span class="hex">60</span><span class="ch">`</span><span class="dec">96</span></td>
        <td class="lower"><span class="hex">70</span><span class="ch">p</span><span class="dec">112</span></td>
      </tr>
      <tr>
        <th class="row">1<span class="b">0001</span></th>
        <td class="ctrl"><span class="hex">01</span><span class="ch">SOH<small>start hdr</small></span><span class="dec">1</span></td>
        <td class="ctrl"><span class="hex">11</span><span class="ch">DC1<small>XON</small></span><span class="dec">17</span></td>
        <td class="punct"><span class="hex">21</span><span class="ch">!</span><span class="dec">33</span></td>
        <td class="digit"><span class="hex">31</span><span class="ch">1</span><span class="dec">49</span></td>
        <td class="upper"><span class="hex">41</span><span class="ch">A</span><span class="dec">65</span></td>
        <td class="upper"><span class="hex">51</span><span class="ch">Q</span><span class="dec">81</span></td>
        <td class="lower"><span class="hex">61</span><span class="ch">a</span><span class="dec">97</span></td>
        <td class="lower"><span class="hex">71</span><span class="ch">q</span><span class="dec">113</span></td>
      </tr>
      <tr>
        <th class="row">2<span class="b">0010</span></th>
        <td class="ctrl"><span class="hex">02</span><span class="ch">STX<small>start txt</small></span><span class="dec">2</span></td>
        <td class="ctrl"><span class="hex">12</span><span class="ch">DC2</span><span class="dec">18</span></td>
        <td class="punct"><span class="hex">22</span><span class="ch">"</span><span class="dec">34</span></td>
        <td class="digit"><span class="hex">32</span><span class="ch">2</span><span class="dec">50</span></td>
        <td class="upper"><span class="hex">42</span><span class="ch">B</span><span class="dec">66</span></td>
        <td class="upper"><span class="hex">52</span><span class="ch">R</span><span class="dec">82</span></td>
        <td class="lower"><span class="hex">62</span><span class="ch">b</span><span class="dec">98</span></td>
        <td class="lower"><span class="hex">72</span><span class="ch">r</span><span class="dec">114</span></td>
      </tr>
      <tr>
        <th class="row">3<span class="b">0011</span></th>
        <td class="ctrl"><span class="hex">03</span><span class="ch">ETX<small>end txt</small></span><span class="dec">3</span></td>
        <td class="ctrl"><span class="hex">13</span><span class="ch">DC3<small>XOFF</small></span><span class="dec">19</span></td>
        <td class="punct"><span class="hex">23</span><span class="ch">#</span><span class="dec">35</span></td>
        <td class="digit"><span class="hex">33</span><span class="ch">3</span><span class="dec">51</span></td>
        <td class="upper"><span class="hex">43</span><span class="ch">C</span><span class="dec">67</span></td>
        <td class="upper"><span class="hex">53</span><span class="ch">S</span><span class="dec">83</span></td>
        <td class="lower"><span class="hex">63</span><span class="ch">c</span><span class="dec">99</span></td>
        <td class="lower"><span class="hex">73</span><span class="ch">s</span><span class="dec">115</span></td>
      </tr>
      <tr>
        <th class="row">4<span class="b">0100</span></th>
        <td class="ctrl"><span class="hex">04</span><span class="ch">EOT<small>end trans</small></span><span class="dec">4</span></td>
        <td class="ctrl"><span class="hex">14</span><span class="ch">DC4</span><span class="dec">20</span></td>
        <td class="punct"><span class="hex">24</span><span class="ch">$</span><span class="dec">36</span></td>
        <td class="digit"><span class="hex">34</span><span class="ch">4</span><span class="dec">52</span></td>
        <td class="upper"><span class="hex">44</span><span class="ch">D</span><span class="dec">68</span></td>
        <td class="upper"><span class="hex">54</span><span class="ch">T</span><span class="dec">84</span></td>
        <td class="lower"><span class="hex">64</span><span class="ch">d</span><span class="dec">100</span></td>
        <td class="lower"><span class="hex">74</span><span class="ch">t</span><span class="dec">116</span></td>
      </tr>
      <tr>
        <th class="row">5<span class="b">0101</span></th>
        <td class="ctrl"><span class="hex">05</span><span class="ch">ENQ<small>enquiry</small></span><span class="dec">5</span></td>
        <td class="ctrl"><span class="hex">15</span><span class="ch">NAK</span><span class="dec">21</span></td>
        <td class="punct"><span class="hex">25</span><span class="ch">%</span><span class="dec">37</span></td>
        <td class="digit"><span class="hex">35</span><span class="ch">5</span><span class="dec">53</span></td>
        <td class="upper"><span class="hex">45</span><span class="ch">E</span><span class="dec">69</span></td>
        <td class="upper"><span class="hex">55</span><span class="ch">U</span><span class="dec">85</span></td>
        <td class="lower"><span class="hex">65</span><span class="ch">e</span><span class="dec">101</span></td>
        <td class="lower"><span class="hex">75</span><span class="ch">u</span><span class="dec">117</span></td>
      </tr>
      <tr>
        <th class="row">6<span class="b">0110</span></th>
        <td class="ctrl"><span class="hex">06</span><span class="ch">ACK<small>ack</small></span><span class="dec">6</span></td>
        <td class="ctrl"><span class="hex">16</span><span class="ch">SYN</span><span class="dec">22</span></td>
        <td class="punct"><span class="hex">26</span><span class="ch">&amp;</span><span class="dec">38</span></td>
        <td class="digit"><span class="hex">36</span><span class="ch">6</span><span class="dec">54</span></td>
        <td class="upper"><span class="hex">46</span><span class="ch">F</span><span class="dec">70</span></td>
        <td class="upper"><span class="hex">56</span><span class="ch">V</span><span class="dec">86</span></td>
        <td class="lower"><span class="hex">66</span><span class="ch">f</span><span class="dec">102</span></td>
        <td class="lower"><span class="hex">76</span><span class="ch">v</span><span class="dec">118</span></td>
      </tr>
      <tr>
        <th class="row">7<span class="b">0111</span></th>
        <td class="ctrl"><span class="hex">07</span><span class="ch">BEL<small>bell 🔔</small></span><span class="dec">7</span></td>
        <td class="ctrl"><span class="hex">17</span><span class="ch">ETB</span><span class="dec">23</span></td>
        <td class="punct"><span class="hex">27</span><span class="ch">'</span><span class="dec">39</span></td>
        <td class="digit"><span class="hex">37</span><span class="ch">7</span><span class="dec">55</span></td>
        <td class="upper"><span class="hex">47</span><span class="ch">G</span><span class="dec">71</span></td>
        <td class="upper"><span class="hex">57</span><span class="ch">W</span><span class="dec">87</span></td>
        <td class="lower"><span class="hex">67</span><span class="ch">g</span><span class="dec">103</span></td>
        <td class="lower"><span class="hex">77</span><span class="ch">w</span><span class="dec">119</span></td>
      </tr>
      <tr>
        <th class="row">8<span class="b">1000</span></th>
        <td class="ctrl"><span class="hex">08</span><span class="ch">BS<small>backspace</small></span><span class="dec">8</span></td>
        <td class="ctrl"><span class="hex">18</span><span class="ch">CAN</span><span class="dec">24</span></td>
        <td class="punct"><span class="hex">28</span><span class="ch">(</span><span class="dec">40</span></td>
        <td class="digit"><span class="hex">38</span><span class="ch">8</span><span class="dec">56</span></td>
        <td class="upper"><span class="hex">48</span><span class="ch">H</span><span class="dec">72</span></td>
        <td class="upper"><span class="hex">58</span><span class="ch">X</span><span class="dec">88</span></td>
        <td class="lower"><span class="hex">68</span><span class="ch">h</span><span class="dec">104</span></td>
        <td class="lower"><span class="hex">78</span><span class="ch">x</span><span class="dec">120</span></td>
      </tr>
      <tr>
        <th class="row">9<span class="b">1001</span></th>
        <td class="ctrl"><span class="hex">09</span><span class="ch">HT<small>tab ⇥</small></span><span class="dec">9</span></td>
        <td class="ctrl"><span class="hex">19</span><span class="ch">EM</span><span class="dec">25</span></td>
        <td class="punct"><span class="hex">29</span><span class="ch">)</span><span class="dec">41</span></td>
        <td class="digit"><span class="hex">39</span><span class="ch">9</span><span class="dec">57</span></td>
        <td class="upper"><span class="hex">49</span><span class="ch">I</span><span class="dec">73</span></td>
        <td class="upper"><span class="hex">59</span><span class="ch">Y</span><span class="dec">89</span></td>
        <td class="lower"><span class="hex">69</span><span class="ch">i</span><span class="dec">105</span></td>
        <td class="lower"><span class="hex">79</span><span class="ch">y</span><span class="dec">121</span></td>
      </tr>
      <tr>
        <th class="row">A<span class="b">1010</span></th>
        <td class="ctrl"><span class="hex">0A</span><span class="ch">LF<small>↵ newline</small></span><span class="dec">10</span></td>
        <td class="ctrl"><span class="hex">1A</span><span class="ch">SUB<small>EOF DOS</small></span><span class="dec">26</span></td>
        <td class="punct"><span class="hex">2A</span><span class="ch">*</span><span class="dec">42</span></td>
        <td class="punct"><span class="hex">3A</span><span class="ch">:</span><span class="dec">58</span></td>
        <td class="upper"><span class="hex">4A</span><span class="ch">J</span><span class="dec">74</span></td>
        <td class="upper"><span class="hex">5A</span><span class="ch">Z</span><span class="dec">90</span></td>
        <td class="lower"><span class="hex">6A</span><span class="ch">j</span><span class="dec">106</span></td>
        <td class="lower"><span class="hex">7A</span><span class="ch">z</span><span class="dec">122</span></td>
      </tr>
      <tr>
        <th class="row">B<span class="b">1011</span></th>
        <td class="ctrl"><span class="hex">0B</span><span class="ch">VT</span><span class="dec">11</span></td>
        <td class="ctrl"><span class="hex">1B</span><span class="ch">ESC<small>escape</small></span><span class="dec">27</span></td>
        <td class="punct"><span class="hex">2B</span><span class="ch">+</span><span class="dec">43</span></td>
        <td class="punct"><span class="hex">3B</span><span class="ch">;</span><span class="dec">59</span></td>
        <td class="upper"><span class="hex">4B</span><span class="ch">K</span><span class="dec">75</span></td>
        <td class="punct"><span class="hex">5B</span><span class="ch">[</span><span class="dec">91</span></td>
        <td class="lower"><span class="hex">6B</span><span class="ch">k</span><span class="dec">107</span></td>
        <td class="punct"><span class="hex">7B</span><span class="ch">{</span><span class="dec">123</span></td>
      </tr>
      <tr>
        <th class="row">C<span class="b">1100</span></th>
        <td class="ctrl"><span class="hex">0C</span><span class="ch">FF<small>form feed</small></span><span class="dec">12</span></td>
        <td class="ctrl"><span class="hex">1C</span><span class="ch">FS</span><span class="dec">28</span></td>
        <td class="punct"><span class="hex">2C</span><span class="ch">,</span><span class="dec">44</span></td>
        <td class="punct"><span class="hex">3C</span><span class="ch">&lt;</span><span class="dec">60</span></td>
        <td class="upper"><span class="hex">4C</span><span class="ch">L</span><span class="dec">76</span></td>
        <td class="punct"><span class="hex">5C</span><span class="ch">\</span><span class="dec">92</span></td>
        <td class="lower"><span class="hex">6C</span><span class="ch">l</span><span class="dec">108</span></td>
        <td class="punct"><span class="hex">7C</span><span class="ch">|</span><span class="dec">124</span></td>
      </tr>
      <tr>
        <th class="row">D<span class="b">1101</span></th>
        <td class="ctrl"><span class="hex">0D</span><span class="ch">CR<small>carriage</small></span><span class="dec">13</span></td>
        <td class="ctrl"><span class="hex">1D</span><span class="ch">GS</span><span class="dec">29</span></td>
        <td class="punct"><span class="hex">2D</span><span class="ch">-</span><span class="dec">45</span></td>
        <td class="punct"><span class="hex">3D</span><span class="ch">=</span><span class="dec">61</span></td>
        <td class="upper"><span class="hex">4D</span><span class="ch">M</span><span class="dec">77</span></td>
        <td class="punct"><span class="hex">5D</span><span class="ch">]</span><span class="dec">93</span></td>
        <td class="lower"><span class="hex">6D</span><span class="ch">m</span><span class="dec">109</span></td>
        <td class="punct"><span class="hex">7D</span><span class="ch">}</span><span class="dec">125</span></td>
      </tr>
      <tr>
        <th class="row">E<span class="b">1110</span></th>
        <td class="ctrl"><span class="hex">0E</span><span class="ch">SO</span><span class="dec">14</span></td>
        <td class="ctrl"><span class="hex">1E</span><span class="ch">RS</span><span class="dec">30</span></td>
        <td class="punct"><span class="hex">2E</span><span class="ch">.</span><span class="dec">46</span></td>
        <td class="punct"><span class="hex">3E</span><span class="ch">&gt;</span><span class="dec">62</span></td>
        <td class="upper"><span class="hex">4E</span><span class="ch">N</span><span class="dec">78</span></td>
        <td class="punct"><span class="hex">5E</span><span class="ch">^</span><span class="dec">94</span></td>
        <td class="lower"><span class="hex">6E</span><span class="ch">n</span><span class="dec">110</span></td>
        <td class="punct"><span class="hex">7E</span><span class="ch">~</span><span class="dec">126</span></td>
      </tr>
      <tr>
        <th class="row">F<span class="b">1111</span></th>
        <td class="ctrl"><span class="hex">0F</span><span class="ch">SI</span><span class="dec">15</span></td>
        <td class="ctrl"><span class="hex">1F</span><span class="ch">US</span><span class="dec">31</span></td>
        <td class="punct"><span class="hex">2F</span><span class="ch">/</span><span class="dec">47</span></td>
        <td class="punct"><span class="hex">3F</span><span class="ch">?</span><span class="dec">63</span></td>
        <td class="upper"><span class="hex">4F</span><span class="ch">O</span><span class="dec">79</span></td>
        <td class="punct"><span class="hex">5F</span><span class="ch">_</span><span class="dec">95</span></td>
        <td class="lower"><span class="hex">6F</span><span class="ch">o</span><span class="dec">111</span></td>
        <td class="del"><span class="hex">7F</span><span class="ch">DEL</span><span class="dec">127</span></td>
      </tr>
    </tbody>
  </table>
  </div>
  <div class="legend">
    <div class="item"><span class="swatch ctrl"></span>Steuerzeichen (0–31)</div>
    <div class="item"><span class="swatch space"></span>Leerzeichen (32)</div>
    <div class="item"><span class="swatch punct"></span>Satzzeichen</div>
    <div class="item"><span class="swatch digit"></span>Ziffern (48–57)</div>
    <div class="item"><span class="swatch upper"></span>Großbuchstaben (65–90)</div>
    <div class="item"><span class="swatch lower"></span>Kleinbuchstaben (97–122)</div>
    <div class="item"><span class="swatch del"></span>DEL (127)</div>
  </div>
  <div class="meta-row">
    <span><strong>Beispiel:</strong> <code>A</code> = Hex <code>41</code> = Dez <code>65</code> = Bin <code>0100&nbsp;0001</code></span>
    <span><strong>Trick:</strong> Ziffern <code>0–9</code> liegen bei <code>30–39</code> · <code>'A'+1='B'</code> · Groß ↔ Klein: Bit 5 togglen</span>
  </div>
 </body>
 </html>
@@ -1,180 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Byte-Fluss: Bit → Hex → ASCII</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #1a1a2e;
    --muted: #6b7280;
    --border: #cbd5e1;
    --bg-soft: #f8fafc;
    --byte-border: #94a3b8;
  }
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 22px 28px; }
  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
  .stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
  .file {
    width: 100%; box-sizing: border-box;
    border: 2px solid var(--dark);
    border-radius: 10px;
    background: var(--bg-soft);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  }
  .file .head {
    background: var(--dark); color: #fff; padding: 8px 14px;
    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    display: flex; justify-content: space-between; align-items: center;
  }
  .file .head .name { font-family: ui-monospace, monospace; }
  .file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
  .file .body { padding: 12px 14px; }
  .row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
  .row-bytes:last-child { margin-bottom: 0; }
  .byte-bin {
    border: 1px solid var(--byte-border);
    border-radius: 4px;
    padding: 4px 7px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.92rem;
    font-weight: 700;
    background: #fff;
    letter-spacing: 0.04em;
  }
  .byte-hex {
    border: 1px solid var(--byte-border);
    border-radius: 4px;
    padding: 6px 0;
    font-family: ui-monospace, monospace;
    font-size: 1.1rem;
    font-weight: 700;
    background: #fff;
    min-width: 88px;
    text-align: center;
  }
  .byte-ascii {
    border: 1px solid var(--byte-border);
    border-radius: 4px;
    padding: 6px 0;
    font-family: ui-monospace, monospace;
    font-size: 1.2rem;
    font-weight: 700;
    background: #fff;
    min-width: 88px;
    text-align: center;
  }
  .byte-ascii.np { color: var(--muted); font-style: italic; }
  .truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
  .arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
  .arrow {
    width: 0; height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 14px solid var(--hl);
  }
  .arrow-label {
    font-size: 0.78rem; color: var(--hl); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .legend {
    margin-top: 12px;
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
    font-size: 0.85rem; color: var(--muted);
  }
  .legend strong { color: var(--dark); }
  .legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
 </style>
 </head>
 <body>
  <h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
  <div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
  <div class="stage">
    <!-- Stage 1: Bitstream -->
    <div class="file">
      <div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
      <div class="body">
        <div class="row-bytes">
          <span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
        </div>
        <div class="row-bytes">
          <span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
        </div>
        <div class="row-bytes">
          <span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
        </div>
        <div class="row-bytes">
          <span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
        </div>
      </div>
    </div>
    <div class="arrow-stack">
      <div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
      <div class="arrow"></div>
    </div>
    <!-- Stage 2: Hex -->
    <div class="file">
      <div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
      <div class="body">
        <div class="row-bytes">
          <span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
        </div>
        <div class="row-bytes">
          <span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
        </div>
        <div class="row-bytes">
          <span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
        </div>
        <div class="row-bytes">
          <span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
        </div>
      </div>
    </div>
    <div class="arrow-stack">
      <div class="arrow-label">je 1 Byte → 1 Zeichen</div>
      <div class="arrow"></div>
    </div>
    <!-- Stage 3: ASCII -->
    <div class="file">
      <div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
      <div class="body">
        <div class="row-bytes">
          <span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
        </div>
        <div class="row-bytes">
          <span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
        </div>
        <div class="row-bytes">
          <span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
        </div>
        <div class="row-bytes">
          <span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
        </div>
      </div>
    </div>
    <div class="legend">
      <span><code>␣</code> = Leerzeichen (0x20)</span>
      <span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
      <span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
    </div>
  </div>
 </body>
 </html>
@@ -1,185 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Byte → Nibble → Hex</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #1a1a2e;
    --muted: #6b7280;
    --border: #cbd5e1;
    --bg-soft: #f8fafc;
  }
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 28px 32px; }
  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
  .stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .level { display: flex; flex-direction: column; align-items: center; }
  .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
  /* Level 1: whole byte */
  .byte {
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    border: 2px solid var(--dark);
    border-radius: 8px;
    background: var(--bg-soft);
  }
  .byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
  .byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
  /* Split arrows */
  .split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
  .split .arrow {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid var(--hl);
  }
  /* Level 2: two nibbles */
  .nibbles { display: flex; gap: 80px; }
  .nibble {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 14px;
    border: 2px solid var(--hl);
    border-radius: 8px;
    background: #fff;
  }
  .nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
  .nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
  .nibble .meta { font-size: 0.78rem; color: var(--muted); }
  .single-arrow {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid var(--hl);
    margin: 2px 0;
  }
  /* Level 3: hex digits */
  .hex-digits { display: flex; gap: 80px; }
  .hex-digit {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 22px;
    border: 2px solid var(--dark);
    border-radius: 8px;
    background: var(--dark);
    color: var(--hl);
  }
  .hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
  .hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
  /* Merge down to byte */
  .merge {
    display: flex; justify-content: center; margin-top: 2px;
  }
  .merge-v {
    display: grid;
    grid-template-columns: 60px 60px;
    justify-content: center;
    align-items: center;
  }
  .merge-v .line {
    height: 20px;
    border-right: 2px solid var(--hl);
  }
  .merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
  .bottom-bar { height: 2px; background: var(--hl); width: 120px; }
  /* Final result */
  .result {
    margin-top: 14px;
    padding: 14px 22px;
    background: #fef3f8;
    border-left: 4px solid var(--hl);
    border-radius: 4px;
    font-size: 1.05rem;
    text-align: center;
    max-width: 640px;
  }
  .result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
  .result strong { color: var(--hl); }
  .math {
    margin-top: 10px;
    font-size: 0.95rem;
    color: var(--dark);
    text-align: center;
  }
  .math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
 </style>
 </head>
 <body>
  <h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
  <div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
  <div class="stage">
    <!-- Level 1 -->
    <div class="level">
      <div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
      <div class="byte">
        <span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
        <span class="sep"></span>
        <span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
      </div>
    </div>
    <div class="split">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>
    <!-- Level 2 -->
    <div class="level">
      <div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
      <div class="nibbles">
        <div class="nibble">
          <div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
          <div class="meta">= 4 (dez)</div>
        </div>
        <div class="nibble">
          <div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
          <div class="meta">= 13 (dez)</div>
        </div>
      </div>
    </div>
    <div class="split">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>
    <!-- Level 3 -->
    <div class="level">
      <div class="label">2 Hex-Ziffern · Symbole 0–F</div>
      <div class="hex-digits">
        <div class="hex-digit">
          <div class="digit">4</div>
          <div class="meta">Nibble → 1 Ziffer</div>
        </div>
        <div class="hex-digit">
          <div class="digit">D</div>
          <div class="meta">13 → D</div>
        </div>
      </div>
    </div>
    <div class="result">
      <code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
    </div>
    <div class="math">
      <span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
    </div>
  </div>
 </body>
 </html>
 </content>
 </invoke>
@@ -1,67 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Hex → Dezimal</title>
 <style>
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
  body { padding: 28px; }
  h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
  .sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
  table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
  th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
  thead th { background: #1a1a2e; color: #fff; }
  tbody th { background: #334155; color: #fff; font-weight: 600; }
  tbody td.ascii { background: #f3f4f6; }
  tbody td.nonascii { background: #fff; color: #6b7280; }
  .corner { background: #0f0f23; color: #d63384; }
  .legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
  .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
  .example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
  code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
 </style>
 </head>
 <body>
  <h1>Hex → Dezimal</h1>
  <div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
  <table>
    <thead>
      <tr>
        <th class="corner">×16 / +</th>
        <th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
        <th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <div class="legend">
    <span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
    <span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
  </div>
  <div class="example">
    <strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
  </div>
 <script>
  const rows = '0123456789ABCDEF';
  const tb = document.querySelector('tbody');
  for (let r = 0; r < 16; r++) {
    const tr = document.createElement('tr');
    const th = document.createElement('th');
    th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
    tr.appendChild(th);
    for (let c = 0; c < 16; c++) {
      const td = document.createElement('td');
      const v = r*16 + c;
      td.textContent = v;
      td.className = v <= 127 ? 'ascii' : 'nonascii';
      tr.appendChild(td);
    }
    tb.appendChild(tr);
  }
 </script>
 </body>
 </html>
@@ -1,120 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Dieselben Byte — drei Perspektiven</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #1a1a2e;
    --muted: #6b7280;
    --border: #cbd5e1;
    --bg-soft: #f8fafc;
    --magic: #ef4444;
    --format: #2563eb;
    --transport: #16a34a;
  }
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 24px 28px; }
  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
  .stage { display: flex; flex-direction: column; gap: 14px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
  .row { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; }
  .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: right; white-space: nowrap; }
  .label small { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 2px; font-size: 0.8em; white-space: nowrap; }
  .panel { padding: 14px 16px; border: 2px solid var(--border); border-radius: 8px; background: var(--bg-soft); }
  .panel.bin { background: #0f0f23; color: #fff; border-color: var(--dark); }
  .panel.bin code { color: #e5e7eb; }
  .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.02em; word-break: break-all; line-height: 1.5; }
  .hex-bytes { display: flex; flex-wrap: wrap; gap: 8px; }
  .hex-byte { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 4px 10px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
  .semantic { display: flex; gap: 6px; flex-wrap: wrap; align-items: stretch; }
  .group { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 6px; min-width: 70px; }
  .group .bytes { display: flex; gap: 4px; }
  .group .b { background: #fff; border: 1px solid currentColor; border-radius: 3px; padding: 3px 7px; font-family: ui-monospace, monospace; font-size: 1rem; font-weight: 700; color: var(--dark); }
  .group .tag { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
  .group .meaning { font-size: 0.78rem; line-height: 1.3; color: var(--dark); }
  .group.magic { background: #fee2e2; color: var(--magic); }
  .group.format { background: #dbeafe; color: var(--format); }
  .group.transport { background: #dcfce7; color: var(--transport); }
  .arrow-row { display: flex; justify-content: center; }
  .arrow {
    width: 0; height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 14px solid var(--hl);
  }
  .footnote { margin-top: 16px; font-size: 0.88rem; color: var(--muted); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; }
  .footnote strong { color: var(--dark); }
 </style>
 </head>
 <body>
  <h1>Dieselben 8 Byte — drei Perspektiven</h1>
  <div class="sub">PNG-Datei-Anfang: <code style="font-family:ui-monospace,monospace">89 50 4E 47 0D 0A 1A 0A</code></div>
  <div class="stage">
    <div class="row">
      <div class="label">1 · Bitstream<small>was wirklich gespeichert wird</small></div>
      <div class="panel bin">
        <code class="mono">10001001&nbsp;01010000&nbsp;01001110&nbsp;01000111&nbsp;00001101&nbsp;00001010&nbsp;00011010&nbsp;00001010</code>
      </div>
    </div>
    <div class="arrow-row"><div class="arrow"></div></div>
    <div class="row">
      <div class="label">2 · Hex<small>gruppiert in 8-Bit-Häppchen</small></div>
      <div class="panel">
        <div class="hex-bytes">
          <span class="hex-byte">89</span>
          <span class="hex-byte">50</span>
          <span class="hex-byte">4E</span>
          <span class="hex-byte">47</span>
          <span class="hex-byte">0D</span>
          <span class="hex-byte">0A</span>
          <span class="hex-byte">1A</span>
          <span class="hex-byte">0A</span>
        </div>
      </div>
    </div>
    <div class="arrow-row"><div class="arrow"></div></div>
    <div class="row">
      <div class="label">3 · Bedeutung<small>was die Byte sagen</small></div>
      <div class="panel">
        <div class="semantic">
          <div class="group magic">
            <div class="bytes"><span class="b">89</span></div>
            <div class="tag">Magic Byte</div>
            <div class="meaning">&gt; 127 → "Ich bin Binär, kein Text"</div>
          </div>
          <div class="group format">
            <div class="bytes"><span class="b">50</span><span class="b">4E</span><span class="b">47</span></div>
            <div class="tag">Format-Kürzel</div>
            <div class="meaning">P · N · G (ASCII) → "PNG-Datei"</div>
          </div>
          <div class="group transport">
            <div class="bytes"><span class="b">0D</span><span class="b">0A</span><span class="b">1A</span><span class="b">0A</span></div>
            <div class="tag">Transport-Schutz</div>
            <div class="meaning">CR · LF · EOF · LF → erkennt kaputte Übertragung</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footnote">
    Byte ändern sich nicht — nur unsere <strong>Brille</strong>. Bitstream zeigt das <em>was</em>, Hex das <em>wie kompakt</em>, Bedeutung das <em>warum</em>.
  </div>
 </body>
 </html>
@@ -1,135 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Warum 8 Bit? Adressierung im Speicher</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #1a1a2e;
    --muted: #6b7280;
    --border: #cbd5e1;
    --bg-soft: #f8fafc;
    --bad: #ef4444;
    --good: #16a34a;
  }
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 24px 28px; }
  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
  .stage { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 1100px; margin: 0 auto; }
  .ram-wrap { display: flex; gap: 18px; align-items: stretch; }
  .ram {
    display: grid;
    grid-template-columns: 90px 90px 230px;
    border: 2px solid var(--dark);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-soft);
  }
  .ram .head {
    background: var(--dark); color: #fff; padding: 8px 10px;
    font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; text-align: center;
  }
  .ram .cell {
    border-top: 1px solid var(--border); padding: 10px 12px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.05rem; font-weight: 700;
    text-align: center; background: #fff;
  }
  .ram .cell.addr { color: var(--muted); background: var(--bg-soft); }
  .ram .cell.bin  { font-size: 0.95rem; letter-spacing: 0.05em; }
  .ram .row.cur .cell { background: #fef3f8; color: var(--hl); }
  .pointer-side { display: flex; flex-direction: column; gap: 12px; padding-top: 36px; }
  .ptr-block { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; font-family: ui-monospace, monospace; font-weight: 700; font-size: 0.95rem; }
  .ptr-block.ok  { background: #dcfce7; color: var(--good); border: 2px solid var(--good); }
  .ptr-block.bad { background: #fee2e2; color: var(--bad); border: 2px dashed var(--bad); }
  .ptr-block.between {
    background: #fff; color: var(--bad); border: 2px dashed var(--bad);
    margin: -12px 0 -12px 0;
    transform: translateX(-10px);
  }
  .ptr-block .ico { font-size: 1.3rem; line-height: 1; }
  .legend {
    display: flex; gap: 22px; padding: 12px 16px; border-top: 1px solid var(--border);
    font-size: 0.9rem; color: var(--dark);
  }
  .legend .row { display: flex; align-items: center; gap: 6px; }
  .legend .swatch { width: 14px; height: 14px; border-radius: 3px; }
  .conclusion {
    margin-top: 6px;
    padding: 14px 22px;
    background: #fef3f8;
    border-left: 4px solid var(--hl);
    border-radius: 4px;
    font-size: 1rem;
    text-align: center;
    max-width: 760px;
  }
  .conclusion strong { color: var(--hl); }
  .conclusion code { background: var(--dark); color: #f8f8f8; padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
 </style>
 </head>
 <body>
  <h1>Warum 8 Bit? Speicher-Adressierung</h1>
  <div class="sub">CPU adressiert <strong>byteweise</strong> — halbe Byte existieren nicht.</div>
  <div class="stage">
    <div class="ram-wrap">
      <div class="ram">
        <div class="head">Adresse</div>
        <div class="head">Hex</div>
        <div class="head">Bit (was im Speicher steht)</div>
        <div class="cell addr">0x0000</div>
        <div class="cell">48</div>
        <div class="cell bin">01001000</div>
        <div class="cell addr">0x0001</div>
        <div class="cell">65</div>
        <div class="cell bin">01100101</div>
        <div class="cell addr">0x0002</div>
        <div class="cell">6C</div>
        <div class="cell bin">01101100</div>
        <div class="cell addr">0x0003</div>
        <div class="cell">6C</div>
        <div class="cell bin">01101100</div>
        <div class="cell addr">0x0004</div>
        <div class="cell">6F</div>
        <div class="cell bin">01101111</div>
        <div class="cell addr">0x0005</div>
        <div class="cell">21</div>
        <div class="cell bin">00100001</div>
      </div>
      <div class="pointer-side">
        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0000 ✓</span></div>
        <div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0000.5 — gibt's nicht</span></div>
        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0001 ✓</span></div>
        <div class="ptr-block bad"><span class="ico">✗</span><span>read 0x0001.5 — gibt's nicht</span></div>
        <div class="ptr-block ok"><span class="ico">→</span><span>read 0x0002 ✓</span></div>
        <div class="ptr-block ok" style="opacity:0.4"><span class="ico">→</span><span>...</span></div>
      </div>
    </div>
    <div class="conclusion">
      <strong>Byte = kleinste adressierbare Einheit.</strong><br>
      Speichercontroller, Bus und CPU sind alle auf 8-Bit-Häppchen ausgelegt.<br>
      Einzelne Bit lesen → muss erst <code>byte = mem[addr]</code>, dann mit <code>byte &amp; 0b1000_0000</code> Bit isolieren.
    </div>
  </div>
 </body>
 </html>
@@ -1,258 +0,0 @@
 <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>
@@ -1,53 +0,0 @@
 <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>
@@ -39,13 +39,11 @@ pre code {
  color: inherit;
 }
 code {
-  background: #0f0f23;
+  background: #1a1a2e;
  color: #5fb3e4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
 }
 section code:not(.hljs) { color: #5fb3e4 !important; }
 section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -114,7 +112,7 @@ Hochschule der Medien Stuttgart
 | **Formate** | ZIP, PNG, FLAC, GIF | JPEG, MP3, H.264/H.265 |
 **Faustregel:**
- Medien für EndnutzerInnen → Lossy oft akzeptabel
+- Medien für Endnutzer → Lossy oft akzeptabel
 - Quellmaterial, Code, Archive → Lossless nötig
 <!--
@@ -30,21 +30,12 @@ h2 {
 }
 pre {
  background: #0f0f23;
  color: #f8f8f8;
  border-radius: 8px;
 }
 pre code {
  background: transparent;
  color: inherit;
 }
 code {
  background: #0f0f23;
  color: #5fb3e4;
  padding: 0.15em 0.4em;
  border-radius: 4px;
 }
 section code:not(.hljs) { color: #5fb3e4 !important; }
 section code.hljs { color: #f8f8f8 !important; }
 a {
  color: var(--color-highlight);
 }
@@ -57,7 +48,7 @@ section.disable {
 # Klausurfragen – 223015b
 **Dateiformate, Schnittstellen, Speichermedien · HdM Stuttgart · M. Czechowski**
-<small>Stand: 01.02.2026</small>
+<small>Stand: 02.02.2026</small>
 ---
@@ -69,7 +60,7 @@ section.disable {
 > `[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)
 ---
@@ -451,9 +442,9 @@ Ordne jede Eigenschaft zu: Vorteil von Analog oder Vorteil von Digital?
 **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 zu Nutzenden gelangen, (2) ob Nutzende eine dauerhafte Kopie erhalten, und (3) nennen Sie je ein Beispiel.
+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. Nutzende erhalten dauerhafte Kopie. Beispiel: iTunes Store, Steam. **Streaming:** Daten werden während des Abspielens übertragen, keine dauerhafte lokale Kopie. Beispiel: Netflix, Spotify. **P2P:** Nutzende laden Teile der Datei gleichzeitig von vielen anderen herunter (dezentral). Dauerhafte Kopie möglich. Beispiel: BitTorrent.
+> **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.
 ---
@@ -931,6 +922,8 @@ Wie viele Farben kann ein GIF-Bild gleichzeitig anzeigen?
 ---
 <!-- _class: disable -->
 ### M4 – WebP vs. JPEG: Vorteil?
 **Thema:** Bildformate – WebP
 **Punkte:** 1
@@ -1174,6 +1167,8 @@ 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
@@ -1190,6 +1185,8 @@ Was ist der fundamentale technische Unterschied zwischen HDD und SSD?
 ---
 <!-- _class: disable -->
 ### O3 – HDD vs. SSD: Eigenschaften zuordnen
 **Thema:** Speichermedien – Vergleich
 **Punkte:** 2
@@ -1,228 +0,0 @@
 ---
 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)
@@ -73,6 +73,18 @@ section.glossar {
 }
 section.erklaerung {
  font-size: 1.1rem;
  background: repeating-linear-gradient(
    135deg,
    #fce4ec,
    #fce4ec 40px,
    #fff 40px,
    #fff 80px
  ) !important;
 }
@media print {
  section.erklaerung {
    background: #fce4ec !important;
  }
 }
 section.erklaerung h1 {
  font-size: 1.5rem;
@@ -335,18 +347,25 @@ SPEAKER NOTES:
 # Das Problem: Komplexität
-![bg right:40% fit](./assets/demos/network-chain.png)
+Zwischen dir und einer Webseite liegen:
-Zwischen Ihnen und einer Webseite liegen viele Stationen.
+```
 Dein Browser
    ↓
 Deine Netzwerkkarte (WLAN oder Ethernet)
    ↓
 Router im Flur / zu Hause
    ↓
 Netzwerk der HdM / deines Providers
    ↓
 Das Internet (dutzende Router)
    ↓
 Netzwerk des Ziel-Servers
    ↓
 Der Webserver
 ```
-Jede Komponente "spricht" anders:
+Jede Komponente "spricht" anders.
 - Browser → **HTTP**
 - Netzwerkkarte → **Bits / Signale**
 - Router → **IP-Pakete**
 - Provider → **Routing**
 Wie zusammenbringen?
 <!--
 SPEAKER NOTES:
@@ -387,6 +406,10 @@ SPEAKER NOTES:
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 # Das TCP/IP-Modell
 | Schicht | Name | Aufgabe | Protokolle |
@@ -438,10 +461,19 @@ Das TCP/IP-Modell entstand praktisch aus dem ARPANET (1970er), im Gegensatz zum
 # Schichten verpacken Daten
-![bg right:52% fit](./assets/demos/encap-layers.png)
+```
 Anwendung:  [ HTTP-Request: "GET /index.html" ]
                 ↓ verpackt in
 Transport:  [ TCP-Header | HTTP-Request ]
                 ↓ verpackt in
 Internet:   [ IP-Header | TCP-Header | HTTP-Request ]
                 ↓ verpackt in
 Netzzugang: [ Eth-Header | IP-Header | TCP | HTTP | Eth-Trailer ]
                 ↓
 Physik:     01001000 01010100 01010100...
 ```
 **Encapsulation:** Jede Schicht packt ein.
 **Decapsulation:** Beim Empfang wird ausgepackt.
 <!--
@@ -457,6 +489,10 @@ SPEAKER NOTES:
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 # Dateneinheiten pro Schicht
 | Schicht | Name | Dateneinheit | Was kommt hinzu? |
@@ -535,7 +571,24 @@ SPEAKER NOTES:
 # Exkurs: OSI vs. TCP/IP
-![h:440 center](./assets/demos/osi-tcpip-diagram.png)
+```
    OSI (7 Schichten)              TCP/IP (4 Schichten)
 ┌─────────────────────┐        ┌─────────────────────┐
 │  7. Anwendung       │        │                     │
 ├─────────────────────┤        │      Anwendung      │
 │  6. Darstellung     │        │                     │
 ├─────────────────────┤        │                     │
 │  5. Sitzung         │        │                     │
 ├─────────────────────┤        ├─────────────────────┤
 │  4. Transport       │        │      Transport      │
 ├─────────────────────┤        ├─────────────────────┤
 │  3. Vermittlung     │        │      Internet       │
 ├─────────────────────┤        ├─────────────────────┤
 │  2. Sicherung       │        │                     │
 ├─────────────────────┤        │     Netzzugang      │
 │  1. Bitübertragung  │        │                     │
 └─────────────────────┘        └─────────────────────┘
 ```
 OSI = Theorie. TCP/IP = Realität.
@@ -615,7 +668,10 @@ SPEAKER NOTES:
 # Port: Das richtige Programm
-![bg right:38% fit](./assets/demos/port-highlight.png)
+```
 212.132.79.37:443
              └─── Port 443 = HTTPS
 ```
 - Identifiziert ein **Programm** auf einem Rechner
 - Ein Rechner, viele Dienste
@@ -643,6 +699,10 @@ SPEAKER NOTES:
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 # IP vs. MAC vs. Port
 | | IP-Adresse | MAC-Adresse | Port |
@@ -695,7 +755,7 @@ Drei Adressebenen lösen drei verschiedene Probleme:
 <!-- _class: lead -->
 # Die Reise eines Klicks
-## Was passiert, wenn Sie `www.hdm-stuttgart.de` aufrufen?
+## Was passiert, wenn du `www.hdm-stuttgart.de` aufrufst?
 <!--
 SPEAKER NOTES:
@@ -709,7 +769,7 @@ SPEAKER NOTES:
 # Das Szenario
-Sie sind im WLAN der HdM und rufen auf:
+Du bist im WLAN der HdM und rufst auf:
 ```
 https://www.hdm-stuttgart.de
@@ -730,13 +790,23 @@ SPEAKER NOTES:
 ---
 <!-- _header: '' -->
 <!-- _footer: '' -->
 <!-- _paginate: false -->
 # Die Zeitlinie
-![h:560 center](./assets/demos/timeline.png)
+```
 [0 ms]     DNS: "Welche IP hat www.hdm-stuttgart.de?"
              ↓
 [~20 ms]   DNS-Antwort: "212.132.79.37"
              ↓
 [~25 ms]   TCP-Handshake beginnt
              ↓
 [~50 ms]   TCP-Verbindung steht
              ↓
 [~55 ms]   HTTP-Request: "GET /index.html"
              ↓
 [~150 ms]  HTTP-Response: HTML kommt zurück
              ↓
 [~200 ms]  Browser rendert die Seite
 ```
 <!--
 SPEAKER NOTES:
@@ -771,7 +841,7 @@ SPEAKER NOTES:
 www.hdm-stuttgart.de  →  212.132.79.37
 ```
-Ihr Laptop fragt sich durch:
+Dein Laptop fragt sich durch:
 1. **Browser-Cache:** "War ich da kürzlich?" → Nein
 2. **OS-Cache:** "Kennt das Betriebssystem die IP?" → Nein
@@ -790,15 +860,19 @@ SPEAKER NOTES:
 # Die DNS-Hierarchie
-![bg right:45% fit](./assets/demos/dns-tree.png)
+```
                    . (Root)
                   /|\
                  / | \
               .de .com .org ...
               /
        hdm-stuttgart
             |
            www
 ```
 **Dezentral:** Niemand kennt alles.
-
+Jede Ebene kennt nur die nächste.
 Jede Ebene kennt nur die nächste:
 - Root → .de, .com, .org
 - .de → alle .de-Domains
 - hdm-stuttgart.de → www, mail, …
 <!--
 SPEAKER NOTES:
@@ -811,15 +885,25 @@ SPEAKER NOTES:
 ---
-<!-- _header: '' -->
+# Der DNS-Lookup
 <!-- _footer: '' -->
 <!-- _paginate: false -->
-![bg fit](./assets/demos/dns-lookup.png)
+```
 Dein Laptop → Resolver:    "Wo ist www.hdm-stuttgart.de?"
 Resolver → Root (.):       "Wer verwaltet .de?"
                           ← "Frag 194.0.0.53"
 Resolver → .de-Server:     "Wer verwaltet hdm-stuttgart.de?"
                           ← "Frag den Nameserver der HdM"
 Resolver → HdM-NS:         "Welche IP hat www?"
                           ← "212.132.79.37"
 Resolver → Dein Laptop:    "Die IP ist 212.132.79.37"
 ```
 <!--
 SPEAKER NOTES:
 - Titel: Der DNS-Lookup
 - Kompletter Ablauf (wenn nichts gecached)
 - Resolver = typisch beim Provider, macht Arbeit
 - Root → .de-Server → HdM-NS → IP
@@ -916,16 +1000,31 @@ SPEAKER NOTES:
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 <!-- _paginate: false -->
-![bg fit](./assets/demos/tcp-handshake.png)
+# Der 3-Way-Handshake
 ```
 Client (dein Laptop)                      Server
    |                                        |
    |-------- SYN (Seq=1000) --------------->|
    |         "Ich will reden"               |
    |                                        |
    |<--- SYN-ACK (Seq=5000, Ack=1001) ------|
    |     "OK, ich auch. Ich starte bei 5000"|
    |                                        |
    |-------- ACK (Ack=5001) --------------->|
    |         "Verstanden, los geht's"       |
    |                                        |
    |        [ Verbindung steht ]            |
 ```
 **SYN** = Synchronize · **ACK** = Acknowledge
 <!--
 SPEAKER NOTES:
 - Titel: Der 3-Way-Handshake
 - SYN = Synchronize, ACK = Acknowledge
 - 3 Pakete → Verbindung steht
 - 1. Client SYN: "Will Verbindung, starte bei 1000"
 - 2. Server SYN-ACK: "OK, ich starte bei 5000, erwarte 1001"
@@ -969,7 +1068,13 @@ Der Handshake synchronisiert **Sequenznummern** – essenziell für TCPs Zuverl
 **Status:** Die TCP-Verbindung steht.
-![bg right:42% fit](./assets/demos/client-server-ports.png)
+```
 Client:    141.62.xxx.xxx:52431
                         └─── Zufälliger Port für diese Verbindung
 Server:    212.132.79.37:443
                        └─── HTTPS-Port
 ```
 **Jetzt erst** kann HTTP gesprochen werden.
@@ -996,7 +1101,7 @@ SPEAKER NOTES:
 ---
-# Was Ihr Browser sendet
+# Was dein Browser sendet
 ```http
 GET / HTTP/1.1
@@ -1015,7 +1120,7 @@ Connection: keep-alive
 <!--
 SPEAKER NOTES:
 - HTTP-Request: lesbar, menschlich verständlich
- GET = "hol mir was" (POST = "hier Daten für Sie")
+- GET = "hol mir was" (POST = "hier Daten für dich")
 - "/" = Wurzel = Startseite
 - HTTP/1.1 = Protokollversion
 - Header: Kontext (Host, Browser, Sprache)
@@ -1041,7 +1146,17 @@ SPEAKER NOTES:
 HTTP-Request wird zum **Segment**:
-![w:900 center](./assets/demos/tcp-segment.png)
+```
 ┌─────────────────────────────────────────────────┐
 │ TCP-Header                                      │
 │ ┌─────────────┬─────────────┬─────────────────┐ │
 │ │ Source Port │ Dest Port   │ Sequence Number │ │
 │ │ 52431       │ 443         │ 1001            │ │
 │ └─────────────┴─────────────┴─────────────────┘ │
 ├─────────────────────────────────────────────────┤
 │ Payload: "GET / HTTP/1.1..."                    │
 └─────────────────────────────────────────────────┘
 ```
 **Neu:** Ports + Sequenznummer
@@ -1062,7 +1177,17 @@ SPEAKER NOTES:
 Segment wird zum **Paket**:
-![w:900 center](./assets/demos/ip-packet.png)
+```
 ┌─────────────────────────────────────────────────┐
 │ IP-Header                                       │
 │ ┌─────────────────┬─────────────────┐           │
 │ │ Source IP       │ Destination IP  │           │
 │ │ 141.62.xxx.xxx  │ 212.132.79.37   │           │
 │ └─────────────────┴─────────────────┘           │
 ├─────────────────────────────────────────────────┤
 │ TCP-Segment (unverändert)                       │
 └─────────────────────────────────────────────────┘
 ```
 **Neu:** IP-Adressen
@@ -1082,7 +1207,19 @@ SPEAKER NOTES:
 Paket wird zum **Frame**:
-![w:900 center](./assets/demos/ethernet-frame.png)
+```
 ┌─────────────────────────────────────────────────┐
 │ Ethernet-Header                                 │
 │ ┌─────────────────┬─────────────────┐           │
 │ │ Source MAC      │ Destination MAC │           │
 │ │ aa:bb:cc:dd:ee  │ 11:22:33:44:55  │           │
 │ └─────────────────┴─────────────────┘           │
 ├─────────────────────────────────────────────────┤
 │ IP-Paket (unverändert)                          │
 ├─────────────────────────────────────────────────┤
 │ FCS (Frame Check Sequence / Prüfsumme)          │
 └─────────────────────────────────────────────────┘
 ```
 **Wichtig:** Destination MAC = **Router**, nicht Server!
@@ -1099,11 +1236,17 @@ SPEAKER NOTES:
 ---
-# Woher kennt Ihr Laptop die Router-MAC?
+# Woher kennt dein Laptop die Router-MAC?
 **ARP** – Address Resolution Protocol
-![w:900 center](./assets/demos/arp-lookup.png)
+```
 Laptop (Broadcast):
    "Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
 Router:
    "Das bin ich! Meine MAC ist 11:22:33:44:55:66"
 ```
 Das passiert automatisch. Die Info wird gecached.
@@ -1160,9 +1303,11 @@ SPEAKER NOTES:
 ---
-# Der erste Hop: Ihr Router
+# Der erste Hop: Dein Router
-**Laptop** → [Frame] → **Router**
+```
 Laptop → [Frame] → Router
 ```
 Der Router empfängt:
@@ -1185,7 +1330,19 @@ SPEAKER NOTES:
 # Der Router verpackt NEU
-![w:900 center](./assets/demos/ethernet-rehop.png)
+```
 ┌─────────────────────────────────────────────────┐
 │ Ethernet-Header (NEU!)                          │
 │ ┌─────────────────┬─────────────────┐           │
 │ │ Source MAC      │ Destination MAC │           │
 │ │ Router-MAC      │ Nächster-Router │           │
 │ └─────────────────┴─────────────────┘           │
 ├─────────────────────────────────────────────────┤
 │ IP-Paket (UNVERÄNDERT)                          │
 │ Source: 141.62.xxx.xxx                          │
 │ Dest: 212.132.79.37                             │
 └─────────────────────────────────────────────────┘
 ```
 **IP bleibt gleich. MAC ändert sich.**
@@ -1204,15 +1361,19 @@ SPEAKER NOTES:
 # Mehrere Hops
-![bg right:35% fit](./assets/demos/hop-chain.png)
+```
 Dein Laptop
    ↓ [Frame an Router 1]
 Router HdM-Netz
    ↓ [Frame an Router 2]
 Router BelWü
    ↓ [Frame an Router 3]
 ...
    ↓ [Frame an Server]
 Webserver der HdM
 ```
-Bei jedem Hop:
+Bei jedem Hop: Auspacken bis Layer 3, Routing, neu verpacken.
 1. Auspacken bis Layer 3 (IP)
 2. Routing-Entscheidung
 3. Neu verpacken mit nächster MAC
 IP bleibt gleich · MAC ändert sich jedes Mal.
 <!--
 SPEAKER NOTES:
@@ -1240,11 +1401,19 @@ SPEAKER NOTES:
 # Decapsulation am Server
-![bg right:42% fit](./assets/demos/server-decap.png)
+```
 Bits empfangen (Layer 1)
    ↓
 Frame prüfen: MAC okay? FCS okay? → Auspacken (Layer 2)
    ↓
 IP lesen: Ziel-IP = meine IP? Ja! → Auspacken (Layer 3)
    ↓
 TCP lesen: Port 443, Seq-Nr passt → Auspacken (Layer 4)
    ↓
 HTTP lesen: "GET / HTTP/1.1" (Layer 7)
 ```
-Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+Der Webserver versteht: "Jemand will die Startseite."
 Am Ende versteht der Webserver: "Jemand will die Startseite."
 <!--
 SPEAKER NOTES:
@@ -1273,7 +1442,7 @@ Content-Length: 45231
 ...
 ```
-~45 KB HTML müssen jetzt zu Ihnen.
+~45 KB HTML müssen jetzt zu dir.
 <!--
 SPEAKER NOTES:
@@ -1289,7 +1458,17 @@ SPEAKER NOTES:
 Der Server macht **dasselbe** – nur in die andere Richtung:
-![bg right:40% fit](./assets/demos/encap-stack.png)
+```
 HTTP-Response: "HTTP/1.1 200 OK..."
    ↓
 TCP: Dest-Port: 52431 (dein Browser!)
    ↓
 IP: Dest-IP: 141.62.xxx.xxx (dein Laptop!)
    ↓
 Ethernet: Dest-MAC: Router des Server-Netzes
    ↓
 Bits
 ```
 <!--
 SPEAKER NOTES:
@@ -1304,13 +1483,17 @@ SPEAKER NOTES:
 # Die Antwort reist zurück
-![bg right:38% fit](./assets/demos/response-hops.png)
+```
 Server
    ↓
 Router → Router → Router → ...
    ↓
 Router HdM
    ↓
 Dein Laptop
 ```
-Gleiches Spiel wie der Hinweg:
+Gleiches Spiel: Hop für Hop, IP bleibt gleich, MAC ändert sich.
 - Hop für Hop durchs Internet
 - **IP bleibt gleich** (Start/Ziel)
 - **MAC ändert sich** bei jedem Router
 <!--
 SPEAKER NOTES:
@@ -1321,13 +1504,21 @@ SPEAKER NOTES:
 ---
-# Decapsulation bei Ihnen
+# Decapsulation bei dir
-![bg right:42% fit](./assets/demos/decap-stack.png)
+```
-
+Bits empfangen
-Rückweg = Encapsulation umgekehrt.
+    ↓
-
+Frame: MAC = meine MAC? → Auspacken
-Jede Schicht prüft "ist das für mich?" und packt dann die nächste aus.
+    ↓
 IP: Ziel-IP = meine IP? → Auspacken
    ↓
 TCP: Port 52431 = mein Browser → Auspacken
    ↓
 HTTP: "HTTP/1.1 200 OK..."
    ↓
 Browser rendert die Seite
 ```
 <!--
 SPEAKER NOTES:
@@ -1352,6 +1543,10 @@ SPEAKER NOTES:
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 # TCP vs. UDP
 | | TCP | UDP |
@@ -1453,6 +1648,10 @@ SPEAKER NOTES:
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 # HTTP-Methoden
 | Methode | Bedeutung | Beispiel |
@@ -1514,6 +1713,10 @@ POST /users          → Neuen Benutzer erstellen
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 # HTTP Status-Codes
 ```http
@@ -1570,6 +1773,10 @@ Die erste Ziffer kategorisiert die Antwort:
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 # Zusammenfassung Teil 1
 **Der Ablauf:**
@@ -1608,7 +1815,7 @@ Wie Encapsulation funktioniert.
 # Netzwerk-Grundlagen – Vertiefung
-Die vier Kernkonzepte für Web-Entwickelnde:
+Die vier Kernkonzepte für Web-Entwickler:
 **1. DNS-Auflösung:**
 - Browser fragt DNS-Resolver (z.B. 8.8.8.8)
@@ -1682,8 +1889,6 @@ HTML definiert die Struktur – was ist auf der Seite. CSS definiert das Aussehe
 # Was ist CSS?
 ![bg right:35%](./assets/demos/css-anatomie.png)
 **C**ascading **S**tyle **S**heets
 ```css
@@ -1779,8 +1984,6 @@ Semikolon nach jedem Paar. Doppelpunkt zwischen Property und Value.
 # Selektoren: Element
 ![bg right:35%](./assets/demos/css-selector-element.png)
 ```css
 /* Alle <p>-Elemente */
 p {
@@ -1809,8 +2012,6 @@ Komma bedeutet "oder" – h1 oder h2 oder h3.
 # Selektoren: Klasse
 ![bg right:35%](./assets/demos/css-selector-class.png)
 ```html
 <p class="wichtig">Dieser Text ist wichtig.</p>
 <p>Dieser nicht.</p>
@@ -1839,8 +2040,6 @@ Eine Klasse kann auf beliebig viele Elemente angewendet werden. Ein Element kann
 # Selektoren: ID
 ![bg right:35%](./assets/demos/css-selector-id.png)
 ```html
 <nav id="hauptnavigation">...</nav>
 ```
@@ -1870,8 +2069,6 @@ In der Praxis: Klassen sind meist besser. IDs haben hohe Spezifität und sind un
 # Selektoren: Kombinationen
 ![bg right:35%](./assets/demos/css-combinators.png)
 ```css
 /* Nachfahre (beliebig tief verschachtelt) */
 article p { line-height: 1.6; }
@@ -1902,9 +2099,11 @@ Element.Klasse: Das Element muss beides sein. "p.wichtig" heißt: nur p-Elemente
 ---
-# Spezifität: Welche Regel gewinnt?
+<!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
-![bg right:35%](./assets/demos/css-specificity.png)
+# Spezifität: Welche Regel gewinnt?
 | Selektor | Spezifität |
 |----------|------------|
@@ -1964,18 +2163,22 @@ Spezifität bestimmt, welche CSS-Regel gewinnt, wenn mehrere auf dasselbe Elemen
 # Box-Modell
-![bg right:42% fit](./assets/demos/box-model-diagram.png)
+```
 ┌─────────────────────────────────────┐
 │              margin                 │
 │   ┌─────────────────────────────┐   │
 │   │          border             │   │
 │   │   ┌─────────────────────┐   │   │
 │   │   │       padding       │   │   │
 │   │   │   ┌─────────────┐   │   │   │
 │   │   │   │   content   │   │   │   │
 │   │   │   └─────────────┘   │   │   │
 │   │   └─────────────────────┘   │   │
 │   └─────────────────────────────┘   │
 └─────────────────────────────────────┘
 ```
-Jedes HTML-Element ist eine rechteckige **Box**.
+Jedes Element ist eine Box.
 **Schichten innen → außen:**
 - **content** – Inhalt (Text, Bild)
 - **padding** – Innenabstand
 - **border** – Rahmen
 - **margin** – Außenabstand
 <small>Gesamt-Breite = `width + padding + border + margin`. Tipp: `box-sizing: border-box` rechnet padding + border mit ein.</small>
 <!--
 SPEAKER NOTES:
@@ -1997,8 +2200,6 @@ Margin: Außenabstand. Zwischen diesem Element und anderen.
 # Box-Modell: CSS
 ![bg right:35%](./assets/demos/css-box-model.png)
 ```css
 .box {
    width: 200px;
@@ -2031,8 +2232,6 @@ Best Practice: Setzt das global für alle Elemente.
 # Farben
 ![bg right:35%](./assets/demos/css-colors.png)
 ```css
 /* Keyword */
 color: red;
@@ -2101,8 +2300,6 @@ vw und vh sind Prozent des Viewports. 100vw ist die volle Bildschirmbreite.
 # Pseudo-Klassen
 ![bg right:35%](./assets/demos/css-pseudo-classes.png)
 ```css
 /* Hover – Maus drüber */
 a:hover { color: red; }
@@ -2138,8 +2335,6 @@ Wichtig für interaktive Elemente und Zebra-Streifen in Tabellen.
 # Pseudo-Elemente
 ![bg right:35%](./assets/demos/css-pseudo-elements.png)
 ```css
 /* Vor dem Inhalt einfügen */
 .required::before {
@@ -2170,17 +2365,19 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
 ---
 <!-- _class: klausur -->
 <!-- _header: '' -->
 <!-- _footer: '' -->
 # Responsive Design
 ![bg right:35%](./assets/demos/css-responsive.png)
 ```css
 /* Mobile First: Basis-Styles */
 .container {
    padding: 1rem;
    background: white;
 }
 /* Ab 768px (Tablet): Anpassungen */
@media (min-width: 768px) {
    .container {
@@ -2188,6 +2385,7 @@ Doppelpunkt zur Unterscheidung von Pseudo-Klassen – aber einfacher Doppelpunkt
        background: red;
    }
 }
 /* Ab 1024px (Desktop): Weitere Anpassungen */
@media (min-width: 1024px) {
    .container {
@@ -208,8 +208,6 @@ Fehler werden hier auch angezeigt
 # Variablen: Daten speichern
 ![bg right:35%](./assets/demos/js-console.png)
 ```javascript
 // Modern (empfohlen)
 let age = 25;              // Kann geändert werden
@@ -262,8 +260,6 @@ Template Literals mit Backticks!
 # Arrays: Listen
 ![bg right:35%](./assets/demos/js-arrays.png)
 ```javascript
 const colors = ["red", "green", "blue"];
@@ -288,8 +284,6 @@ Arrays sind veränderbar auch bei const
 # Objects: Strukturierte Daten
 ![bg right:35%](./assets/demos/js-objects.png)
 ```javascript
 const person = {
    firstName: "Max",
@@ -348,7 +342,7 @@ true || false  // true (ODER)
 **In der Browser-Konsole:**
-1. Erstellen Sie Variablen für sich:
+1. Erstelle Variablen für dich:
   ```javascript
   const name = "Your Name";
   let age = 20;
@@ -419,8 +413,6 @@ Code-Block in geschweiften Klammern
 # Schleifen: Wiederholen
 ![bg right:35%](./assets/demos/js-loops.png)
 ```javascript
 // for-Schleife
 for (let i = 0; i < 5; i++) {
@@ -499,7 +491,15 @@ Funktionale Programmierung, Original-Array bleibt unverändert
 - JavaScript kann diesen Baum **lesen und ändern**
 - Jedes HTML-Element = ein "Node"
-![bg right:45% fit](./assets/demos/dom-tree.png)
+```
 document
 └── html
    ├── head
    │   └── title
    └── body
        ├── h1
        └── p
 ```
 <!--
 DOM = Programmierschnittstelle für HTML
@@ -536,8 +536,6 @@ querySelectorAll = alle Treffer
 # Elemente manipulieren
 ![bg right:35%](./assets/demos/js-manipulate.png)
 ```javascript
 const element = document.querySelector("#meinElement");
@@ -566,8 +564,6 @@ style = Inline-Styles (camelCase!)
 # Klassen manipulieren
 ![bg right:35%](./assets/demos/js-classlist.png)
 ```javascript
 const element = document.querySelector(".box");
@@ -596,8 +592,6 @@ toggle schaltet hin und her
 # Elemente erstellen
 ![bg right:35%](./assets/demos/js-create.png)
 ```javascript
 // Neues Element erstellen
 const neuerAbsatz = document.createElement("p");
@@ -666,8 +660,6 @@ Interaktive Webseiten durch Events
 # Event Listener
 ![bg right:35%](./assets/demos/js-event-listener.png)
 ```javascript
 const button = document.querySelector("#meinButton");
@@ -745,8 +737,6 @@ target = auslösendes Element
 # Event.preventDefault()
 ![bg right:35%](./assets/demos/js-preventdefault.png)
 ```javascript
 // Link ohne Navigation
 const link = document.querySelector("a");
@@ -773,8 +763,6 @@ Formular-Validierung ohne Reload
 # Beispiel: Toggle Dark Mode
 ![bg right:35%](./assets/demos/js-darkmode.png)
 ```javascript
 const toggleButton = document.querySelector("#darkModeToggle");
 const body = document.body;
@@ -863,8 +851,6 @@ HTML (Struktur) + CSS (Design) + JavaScript (Interaktivität)
 # Beispiel: Todo-Liste
 ![bg right:35%](./assets/demos/js-todo.png)
 ```javascript
 const form = document.querySelector("#todoForm");
 const input = document.querySelector("#todoInput");
@@ -907,8 +893,6 @@ Node.js für Backend
 # Fetch: Daten laden
 ![bg right:35%](./assets/demos/js-fetch.png)
 ```javascript
 // Mit async/await (modern)
 async function loadData() {
@@ -930,8 +914,6 @@ APIs = Schnittstellen zu Daten, JSON = JavaScript Object Notation
 # LocalStorage: Daten speichern
 ![bg right:35%](./assets/demos/js-localstorage.png)
 ```javascript
 // Speichern
 localStorage.setItem("name", "Max");
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: __TITLE__</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">__URL__</span>
    </div>
    <iframe src="__SRC__"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: a11y-error</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/email-form.html</span>
    </div>
    <iframe src="./a11y-error.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,31 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Fehlermeldung</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
    label { display: block; margin-bottom: 4px; font-weight: 600; }
    input {
      font: inherit;
      padding: 6px 10px;
      width: 100%;
      box-sizing: border-box;
      border: 2px solid #d63384;
      border-radius: 4px;
    }
    #email-error {
      color: #d63384;
      font-size: 0.9em;
      margin-top: 6px;
    }
  </style>
 </head>
 <body>
  <label for="email">E-Mail-Adresse</label>
  <input id="email" type="email" aria-describedby="email-error" value="michael@">
  <p id="email-error" role="alert">
    Bitte geben Sie eine gültige E-Mail-Adresse ein.
  </p>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: a11y-focus</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/focus.html</span>
    </div>
    <iframe src="./a11y-focus.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,22 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Fokus-Indikator</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1.4rem; font-size: 1rem; }
    button { font: inherit; padding: 10px 18px; margin: 8px 0; display: block; border: 1.5px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
    button:focus-visible, button.is-focused {
      outline: 3px solid #d63384;
      outline-offset: 3px;
      border-radius: 4px;
    }
  </style>
 </head>
 <body>
  <p><strong>Tab-Taste drücken:</strong></p>
  <button class="is-focused">Erster Button</button>
  <button>Zweiter Button</button>
  <button>Dritter Button</button>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: a11y-semantic</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/klick.html</span>
    </div>
    <iframe src="./a11y-semantic.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,31 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>div vs button</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
    h3 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
    .bad { color: #b91c1c; }
    .good { color: #15803d; }
    .button {
      display: inline-block;
      background: #e5e7eb;
      border: 1px solid #9ca3af;
      padding: 6px 14px;
      cursor: pointer;
      border-radius: 4px;
    }
    button { font: inherit; padding: 6px 14px; }
  </style>
 </head>
 <body>
  <h3 class="bad">Schlecht (div)</h3>
  <div class="button" onclick="alert('!')">Klick mich</div>
  <p><small>❌ Tab überspringt, kein Enter, kein Screenreader</small></p>
  <h3 class="good">Gut (button)</h3>
  <button type="button">Klick mich</button>
  <p><small>✅ Tastatur + Screenreader eingebaut</small></p>
 </body>
 </html>
@@ -1,65 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>ARP</title>
  <style>
    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
    body { padding: 30px; display: inline-block; }
    .row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
    .actor {
      background: #1a1a2e;
      color: #fff;
      padding: 10px 16px;
      border-radius: 6px;
      font-weight: 700;
      min-width: 160px;
      text-align: center;
      font-size: 0.9rem;
    }
    .laptop { background: #1e40af; }
    .router { background: #c2410c; }
    .arrow-right, .arrow-left {
      width: 0; height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
    }
    .arrow-right { border-left: 14px solid #d63384; }
    .arrow-left { border-right: 14px solid #15803d; }
    .bubble {
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 0.95rem;
      max-width: 460px;
    }
    .ask { background: #fce7f3; border: 2px solid #d63384; color: #7c2d12; }
    .reply { background: #dcfce7; border: 2px solid #15803d; color: #14532d; }
    .meta {
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      opacity: 0.7;
      margin-bottom: 3px;
    }
  </style>
 </head>
 <body>
  <div class="row">
    <div class="actor laptop">Laptop</div>
    <div class="arrow-right"></div>
    <div class="bubble ask">
      <div class="meta">Broadcast</div>
      "Wer hat die IP 192.168.1.1? Sag mir deine MAC!"
    </div>
  </div>
  <div class="row">
    <div class="bubble reply">
      <div class="meta">Antwort</div>
      "Das bin ich! Meine MAC ist 11:22:33:44:55:66"
    </div>
    <div class="arrow-left"></div>
    <div class="actor router">Router</div>
  </div>
 </body>
 </html>
@@ -1,53 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Box-Modell Diagramm</title>
  <style>
    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
    body { padding: 40px; display: inline-block; box-sizing: border-box; }
    .layer {
      padding-top: 38px;
      padding-bottom: 30px;
      padding-left: 30px;
      padding-right: 30px;
      position: relative;
      border-radius: 4px;
    }
    .layer::before {
      position: absolute;
      top: 8px; left: 14px;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    .margin { background: #fde68a; }
    .margin::before { content: "margin"; color: #92400e; }
    .border { background: #fca5a5; }
    .border::before { content: "border"; color: #991b1b; }
    .padding { background: #86efac; }
    .padding::before { content: "padding"; color: #166534; }
    .content {
      background: #93c5fd;
      width: 260px;
      height: 110px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1e3a8a;
      font-weight: 700;
      font-size: 1.2rem;
      border-radius: 4px;
    }
  </style>
 </head>
 <body>
  <div class="layer margin">
    <div class="layer border">
      <div class="layer padding">
        <div class="content">content</div>
      </div>
    </div>
  </div>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: button</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/button.html</span>
    </div>
    <iframe src="./button.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,10 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Button</title>
 </head>
 <body>
  <button>Add to favorites</button>
 </body>
 </html>
@@ -1,180 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Byte-Fluss: Bit → Hex → ASCII</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #1a1a2e;
    --muted: #6b7280;
    --border: #cbd5e1;
    --bg-soft: #f8fafc;
    --byte-border: #94a3b8;
  }
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 22px 28px; }
  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
  .sub { text-align: center; color: var(--muted); margin-bottom: 18px; font-size: 0.95rem; }
  .stage { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 920px; margin: 0 auto; }
  .file {
    width: 100%; box-sizing: border-box;
    border: 2px solid var(--dark);
    border-radius: 10px;
    background: var(--bg-soft);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  }
  .file .head {
    background: var(--dark); color: #fff; padding: 8px 14px;
    font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
    display: flex; justify-content: space-between; align-items: center;
  }
  .file .head .name { font-family: ui-monospace, monospace; }
  .file .head .meta { font-weight: 400; opacity: 0.7; text-transform: none; letter-spacing: 0; font-size: 0.85em; }
  .file .body { padding: 12px 14px; }
  .row-bytes { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: nowrap; }
  .row-bytes:last-child { margin-bottom: 0; }
  .byte-bin {
    border: 1px solid var(--byte-border);
    border-radius: 4px;
    padding: 4px 7px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.92rem;
    font-weight: 700;
    background: #fff;
    letter-spacing: 0.04em;
  }
  .byte-hex {
    border: 1px solid var(--byte-border);
    border-radius: 4px;
    padding: 6px 0;
    font-family: ui-monospace, monospace;
    font-size: 1.1rem;
    font-weight: 700;
    background: #fff;
    min-width: 88px;
    text-align: center;
  }
  .byte-ascii {
    border: 1px solid var(--byte-border);
    border-radius: 4px;
    padding: 6px 0;
    font-family: ui-monospace, monospace;
    font-size: 1.2rem;
    font-weight: 700;
    background: #fff;
    min-width: 88px;
    text-align: center;
  }
  .byte-ascii.np { color: var(--muted); font-style: italic; }
  .truncate { color: var(--muted); font-family: ui-monospace, monospace; padding: 4px 6px; font-weight: 700; align-self: center; }
  .arrow-stack { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
  .arrow {
    width: 0; height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 14px solid var(--hl);
  }
  .arrow-label {
    font-size: 0.78rem; color: var(--hl); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .legend {
    margin-top: 12px;
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
    font-size: 0.85rem; color: var(--muted);
  }
  .legend strong { color: var(--dark); }
  .legend code { background: var(--bg-soft); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, monospace; }
 </style>
 </head>
 <body>
  <h1>1 Byte = 8 Bit = 2 Hex = 1 ASCII-Zeichen</h1>
  <div class="sub">Dieselbe Datei — dieselben Byte, drei Schreibweisen. Jeder Rahmen = ein Byte.</div>
  <div class="stage">
    <!-- Stage 1: Bitstream -->
    <div class="file">
      <div class="head"><span class="name">datei.bin</span><span class="meta">Roh-Bit · 8 Bit pro Rahmen</span></div>
      <div class="body">
        <div class="row-bytes">
          <span class="byte-bin">01001000</span><span class="byte-bin">01100101</span><span class="byte-bin">01101100</span><span class="byte-bin">01101100</span><span class="byte-bin">01101111</span><span class="byte-bin">00101100</span><span class="byte-bin">00100000</span><span class="byte-bin">01010111</span>
        </div>
        <div class="row-bytes">
          <span class="byte-bin">01101111</span><span class="byte-bin">01110010</span><span class="byte-bin">01101100</span><span class="byte-bin">01100100</span><span class="byte-bin">00100001</span><span class="byte-bin">00100000</span><span class="byte-bin">01001000</span><span class="byte-bin">01101111</span>
        </div>
        <div class="row-bytes">
          <span class="byte-bin">01110111</span><span class="byte-bin">00100000</span><span class="byte-bin">01100001</span><span class="byte-bin">01110010</span><span class="byte-bin">01100101</span><span class="byte-bin">00100000</span><span class="byte-bin">01111001</span><span class="byte-bin">01101111</span>
        </div>
        <div class="row-bytes">
          <span class="byte-bin">01110101</span><span class="byte-bin">00111111</span><span class="byte-bin">00001010</span><span class="truncate">… (weitere Byte)</span>
        </div>
      </div>
    </div>
    <div class="arrow-stack">
      <div class="arrow-label">je 8 Bit → 2 Hex-Ziffern</div>
      <div class="arrow"></div>
    </div>
    <!-- Stage 2: Hex -->
    <div class="file">
      <div class="head"><span class="name">datei.hex</span><span class="meta">Hex-Sicht · 2 Hex-Ziffern pro Rahmen</span></div>
      <div class="body">
        <div class="row-bytes">
          <span class="byte-hex">48</span><span class="byte-hex">65</span><span class="byte-hex">6C</span><span class="byte-hex">6C</span><span class="byte-hex">6F</span><span class="byte-hex">2C</span><span class="byte-hex">20</span><span class="byte-hex">57</span>
        </div>
        <div class="row-bytes">
          <span class="byte-hex">6F</span><span class="byte-hex">72</span><span class="byte-hex">6C</span><span class="byte-hex">64</span><span class="byte-hex">21</span><span class="byte-hex">20</span><span class="byte-hex">48</span><span class="byte-hex">6F</span>
        </div>
        <div class="row-bytes">
          <span class="byte-hex">77</span><span class="byte-hex">20</span><span class="byte-hex">61</span><span class="byte-hex">72</span><span class="byte-hex">65</span><span class="byte-hex">20</span><span class="byte-hex">79</span><span class="byte-hex">6F</span>
        </div>
        <div class="row-bytes">
          <span class="byte-hex">75</span><span class="byte-hex">3F</span><span class="byte-hex">0A</span><span class="truncate">…</span>
        </div>
      </div>
    </div>
    <div class="arrow-stack">
      <div class="arrow-label">je 1 Byte → 1 Zeichen</div>
      <div class="arrow"></div>
    </div>
    <!-- Stage 3: ASCII -->
    <div class="file">
      <div class="head"><span class="name">datei.txt</span><span class="meta">Text-Sicht · 1 ASCII-Zeichen pro Rahmen</span></div>
      <div class="body">
        <div class="row-bytes">
          <span class="byte-ascii">H</span><span class="byte-ascii">e</span><span class="byte-ascii">l</span><span class="byte-ascii">l</span><span class="byte-ascii">o</span><span class="byte-ascii">,</span><span class="byte-ascii np">␣</span><span class="byte-ascii">W</span>
        </div>
        <div class="row-bytes">
          <span class="byte-ascii">o</span><span class="byte-ascii">r</span><span class="byte-ascii">l</span><span class="byte-ascii">d</span><span class="byte-ascii">!</span><span class="byte-ascii np">␣</span><span class="byte-ascii">H</span><span class="byte-ascii">o</span>
        </div>
        <div class="row-bytes">
          <span class="byte-ascii">w</span><span class="byte-ascii np">␣</span><span class="byte-ascii">a</span><span class="byte-ascii">r</span><span class="byte-ascii">e</span><span class="byte-ascii np">␣</span><span class="byte-ascii">y</span><span class="byte-ascii">o</span>
        </div>
        <div class="row-bytes">
          <span class="byte-ascii">u</span><span class="byte-ascii">?</span><span class="byte-ascii np">↵</span><span class="truncate">…</span>
        </div>
      </div>
    </div>
    <div class="legend">
      <span><code>␣</code> = Leerzeichen (0x20)</span>
      <span><code>↵</code> = Zeilenumbruch (0x0A, nicht druckbar)</span>
      <span><strong>Byte ändern sich nicht.</strong> Nur die Anzeige.</span>
    </div>
  </div>
 </body>
 </html>
@@ -1,185 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Byte → Nibble → Hex</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #1a1a2e;
    --muted: #6b7280;
    --border: #cbd5e1;
    --bg-soft: #f8fafc;
  }
  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; color: var(--dark); }
  body { padding: 28px 32px; }
  h1 { text-align: center; margin: 0 0 4px; font-size: 1.55rem; }
  .sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
  .stage { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  .level { display: flex; flex-direction: column; align-items: center; }
  .label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
  /* Level 1: whole byte */
  .byte {
    display: flex;
    gap: 4px;
    padding: 8px 14px;
    border: 2px solid var(--dark);
    border-radius: 8px;
    background: var(--bg-soft);
  }
  .byte .bit { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 1.3rem; font-weight: 700; padding: 4px 8px; min-width: 22px; text-align: center; }
  .byte .sep { width: 2px; background: var(--hl); margin: 2px 6px; border-radius: 2px; }
  /* Split arrows */
  .split { display: flex; justify-content: space-between; width: 360px; margin: 2px 0; }
  .split .arrow {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid var(--hl);
  }
  /* Level 2: two nibbles */
  .nibbles { display: flex; gap: 80px; }
  .nibble {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 14px;
    border: 2px solid var(--hl);
    border-radius: 8px;
    background: #fff;
  }
  .nibble .bits { display: flex; gap: 4px; font-family: ui-monospace, monospace; font-size: 1.15rem; font-weight: 700; }
  .nibble .bits span { padding: 2px 6px; min-width: 20px; text-align: center; }
  .nibble .meta { font-size: 0.78rem; color: var(--muted); }
  .single-arrow {
    width: 0; height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid var(--hl);
    margin: 2px 0;
  }
  /* Level 3: hex digits */
  .hex-digits { display: flex; gap: 80px; }
  .hex-digit {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 22px;
    border: 2px solid var(--dark);
    border-radius: 8px;
    background: var(--dark);
    color: var(--hl);
  }
  .hex-digit .digit { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 800; line-height: 1; }
  .hex-digit .meta { font-size: 0.72rem; color: #f3f4f6; opacity: 0.7; }
  /* Merge down to byte */
  .merge {
    display: flex; justify-content: center; margin-top: 2px;
  }
  .merge-v {
    display: grid;
    grid-template-columns: 60px 60px;
    justify-content: center;
    align-items: center;
  }
  .merge-v .line {
    height: 20px;
    border-right: 2px solid var(--hl);
  }
  .merge-v .line.l { border-right: none; border-left: 2px solid var(--hl); }
  .bottom-bar { height: 2px; background: var(--hl); width: 120px; }
  /* Final result */
  .result {
    margin-top: 14px;
    padding: 14px 22px;
    background: #fef3f8;
    border-left: 4px solid var(--hl);
    border-radius: 4px;
    font-size: 1.05rem;
    text-align: center;
    max-width: 640px;
  }
  .result code { background: var(--dark); color: var(--hl); padding: 2px 8px; border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 700; }
  .result strong { color: var(--hl); }
  .math {
    margin-top: 10px;
    font-size: 0.95rem;
    color: var(--dark);
    text-align: center;
  }
  .math .eq { font-family: ui-monospace, monospace; font-weight: 700; }
 </style>
 </head>
 <body>
  <h1>1 Byte → 2 Nibble → 2 Hex-Ziffern</h1>
  <div class="sub">Jedes Byte lässt sich sauber halbieren – und 4 Bit passen exakt auf eine Hex-Ziffer.</div>
  <div class="stage">
    <!-- Level 1 -->
    <div class="level">
      <div class="label">1 Byte · 8 Bit · 2⁸ = 256 Werte</div>
      <div class="byte">
        <span class="bit">0</span><span class="bit">1</span><span class="bit">0</span><span class="bit">0</span>
        <span class="sep"></span>
        <span class="bit">1</span><span class="bit">1</span><span class="bit">0</span><span class="bit">1</span>
      </div>
    </div>
    <div class="split">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>
    <!-- Level 2 -->
    <div class="level">
      <div class="label">2 Nibble · je 4 Bit · 2⁴ = 16 Werte</div>
      <div class="nibbles">
        <div class="nibble">
          <div class="bits"><span>0</span><span>1</span><span>0</span><span>0</span></div>
          <div class="meta">= 4 (dez)</div>
        </div>
        <div class="nibble">
          <div class="bits"><span>1</span><span>1</span><span>0</span><span>1</span></div>
          <div class="meta">= 13 (dez)</div>
        </div>
      </div>
    </div>
    <div class="split">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>
    <!-- Level 3 -->
    <div class="level">
      <div class="label">2 Hex-Ziffern · Symbole 0–F</div>
      <div class="hex-digits">
        <div class="hex-digit">
          <div class="digit">4</div>
          <div class="meta">Nibble → 1 Ziffer</div>
        </div>
        <div class="hex-digit">
          <div class="digit">D</div>
          <div class="meta">13 → D</div>
        </div>
      </div>
    </div>
    <div class="result">
      <code>01001101</code> (bin) &nbsp;=&nbsp; <code>4D</code> (hex) &nbsp;=&nbsp; <strong>77</strong> (dez) &nbsp;=&nbsp; <strong>"M"</strong> (ASCII)
    </div>
    <div class="math">
      <span class="eq">16 × 16 = 256</span> &nbsp;·&nbsp; <span class="eq">2⁴ × 2⁴ = 2⁸</span> &nbsp;·&nbsp; Darum passt Hex so gut zu Bytes.
    </div>
  </div>
 </body>
 </html>
 </content>
 </invoke>
@@ -1,58 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Client/Server Ports</title>
  <style>
    html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, sans-serif; }
    body { padding: 30px; display: inline-block; }
    .endpoint {
      border: 2px solid #4a4a6a;
      border-radius: 6px;
      padding: 18px 24px;
      margin-bottom: 24px;
      min-width: 380px;
      background: #f3f4f6;
    }
    .endpoint.client { background: #dbeafe; border-color: #1e40af; }
    .endpoint.server { background: #fed7aa; border-color: #c2410c; }
    .role {
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 6px;
    }
    .client .role { color: #1e3a8a; }
    .server .role { color: #7c2d12; }
    .addr {
      font-family: ui-monospace, monospace;
      font-size: 1.4rem;
      color: #0f172a;
    }
    .port {
      background: #fde68a;
      color: #7c2d12;
      padding: 1px 8px;
      border-radius: 4px;
      font-weight: 700;
    }
    .label {
      margin-top: 6px;
      font-size: 0.85rem;
      color: #4a4a6a;
      font-style: italic;
    }
  </style>
 </head>
 <body>
  <div class="endpoint client">
    <div class="role">Client</div>
    <div class="addr">141.62.xxx.xxx:<span class="port">52431</span></div>
    <div class="label">↳ zufälliger Port vom OS</div>
  </div>
  <div class="endpoint server">
    <div class="role">Server</div>
    <div class="addr">212.132.79.37:<span class="port">443</span></div>
    <div class="label">↳ HTTPS-Standardport</div>
  </div>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: Kontrast</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/contrast.html</span>
    </div>
    <iframe src="./contrast-levels.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,97 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Kontrast-Stufen</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1.6rem; margin: 0; }
    .row {
      background: #fff;
      padding: 22px 20px;
      margin-bottom: 14px;
      border-radius: 6px;
      border: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }
    .sample {
      font-size: 1.5rem;
      font-weight: 600;
      flex: 1;
    }
    .meta {
      text-align: right;
      font-size: 0.85rem;
      white-space: nowrap;
    }
    .ratio {
      font-family: ui-monospace, monospace;
      font-weight: 700;
      font-size: 0.95rem;
      color: #1a1a2e;
    }
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-top: 4px;
    }
    .fail { background: #fee2e2; color: #991b1b; }
    .aa-large { background: #fed7aa; color: #7c2d12; }
    .aa { background: #dcfce7; color: #166534; }
    .aaa { background: #bbf7d0; color: #14532d; }
    .hint {
      margin-top: 14px;
      font-size: 0.78rem;
      color: #6b7280;
      font-style: italic;
      text-align: right;
    }
    .hint a { color: #d63384; }
  </style>
 </head>
 <body>
  <div class="row" style="background: #fff;">
    <div class="sample" style="color: #aaaaaa;">Barrierefrei lesen</div>
    <div class="meta">
      <div class="ratio">2.3:1</div>
      <span class="badge fail">✗ Fail</span>
    </div>
  </div>
  <div class="row" style="background: #fff;">
    <div class="sample" style="color: #949494;">Barrierefrei lesen</div>
    <div class="meta">
      <div class="ratio">3:1</div>
      <span class="badge aa-large">AA Large</span>
    </div>
  </div>
  <div class="row" style="background: #fff;">
    <div class="sample" style="color: #767676;">Barrierefrei lesen</div>
    <div class="meta">
      <div class="ratio">4.5:1</div>
      <span class="badge aa">✓ AA</span>
    </div>
  </div>
  <div class="row" style="background: #fff;">
    <div class="sample" style="color: #595959;">Barrierefrei lesen</div>
    <div class="meta">
      <div class="ratio">7:1</div>
      <span class="badge aaa">✓ AAA</span>
    </div>
  </div>
  <div class="row" style="background: #fff;">
    <div class="sample" style="color: #1a1a1a;">Barrierefrei lesen</div>
    <div class="meta">
      <div class="ratio">16:1</div>
      <span class="badge aaa">✓ AAA+</span>
    </div>
  </div>
  <div class="hint">Check: webaim.org/resources/contrastchecker</div>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: css-anatomie</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/anatomie.html</span>
    </div>
    <iframe src="./css-anatomie.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,15 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>CSS Anatomie</title>
  <style>
    body { padding: 1.2rem; font-family: system-ui, sans-serif; }
    p { color: blue; font-size: 16px; }
  </style>
 </head>
 <body>
  <p>Dieser Absatz ist blau und 16 Pixel groß.</p>
  <p>Alle p-Elemente werden gleich gestylt.</p>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: css-box-model</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/box-model.html</span>
    </div>
    <iframe src="./css-box-model.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,58 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Box-Modell</title>
  <style>
    body { padding: 1.2rem; font-family: system-ui, sans-serif; background: #fff; }
    .box { display: inline-block; }
    .layer {
      padding-top: 22px;
      padding-bottom: 18px;
      padding-left: 18px;
      padding-right: 18px;
      position: relative;
    }
    .layer::before {
      position: absolute;
      top: 4px; left: 8px;
      font-size: 0.75em;
      font-weight: 600;
    }
    .margin { background: #fde68a; }
    .margin::before { content: "margin"; color: #92400e; }
    .border { background: #fca5a5; }
    .border::before { content: "border"; color: #991b1b; }
    .padding { background: #86efac; }
    .padding::before { content: "padding"; color: #166534; }
    .content {
      background: #93c5fd;
      width: 140px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1e3a8a;
      font-weight: 600;
    }
    pre { background: #f3f4f6; padding: 10px; border-radius: 4px; font-size: 0.85em; margin-top: 1rem; font-family: ui-monospace, monospace; }
  </style>
 </head>
 <body>
  <div class="box">
    <div class="layer margin">
      <div class="layer border">
        <div class="layer padding">
          <div class="content">content</div>
        </div>
      </div>
    </div>
  </div>
  <pre>.box {
  width: 140px;
  padding: 18px;
  border: 18px solid;
  margin: 18px;
 }</pre>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: css-colors</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/colors.html</span>
    </div>
    <iframe src="./css-colors.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,21 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Farben</title>
  <style>
    body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
    .swatch { display: flex; align-items: center; margin-bottom: 8px; }
    .chip { width: 40px; height: 40px; border-radius: 4px; margin-right: 12px; border: 1px solid #e5e7eb; }
    code { background: #f3f4f6; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-size: 0.85em; }
  </style>
 </head>
 <body>
  <div class="swatch"><div class="chip" style="background: red;"></div><code>color: red;</code></div>
  <div class="swatch"><div class="chip" style="background: rebeccapurple;"></div><code>color: rebeccapurple;</code></div>
  <div class="swatch"><div class="chip" style="background: #FF0000;"></div><code>#FF0000</code></div>
  <div class="swatch"><div class="chip" style="background: rgb(255, 0, 0);"></div><code>rgb(255, 0, 0)</code></div>
  <div class="swatch"><div class="chip" style="background: rgba(255, 0, 0, 0.5);"></div><code>rgba(255, 0, 0, 0.5)</code></div>
  <div class="swatch"><div class="chip" style="background: hsl(0, 100%, 50%);"></div><code>hsl(0, 100%, 50%)</code></div>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: css-combinators</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/combinators.html</span>
    </div>
    <iframe src="./css-combinators.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,25 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Kombinatoren</title>
  <style>
    body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
    article p { line-height: 1.6; background: #fef3c7; padding: 4px; }
    nav > a { text-decoration: none; color: #d63384; margin-right: 10px; font-weight: 600; }
    h2 + p { font-size: 1.2em; color: #065f46; }
    p.wichtig { color: red; }
  </style>
 </head>
 <body>
  <nav>
    <a href="#">Link</a><a href="#">Link</a>
  </nav>
  <article>
    <h2>Artikel-Überschrift</h2>
    <p>Direkt nach h2 (größer, grün).</p>
    <p>Normaler Absatz im article (gelb).</p>
    <p class="wichtig">Wichtig (rot).</p>
  </article>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: css-pseudo-classes</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/pseudo-classes.html</span>
    </div>
    <iframe src="./css-pseudo-classes.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,37 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Pseudo-Klassen</title>
  <style>
    body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
    a { color: #2563eb; }
    a:hover, a.is-hovered { color: red; text-decoration: underline; }
    a:visited, a.is-visited { color: purple; }
    input:focus, input.is-focused { border-color: blue; outline: 2px solid blue; }
    input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; }
    ul { list-style: none; padding: 0; }
    li { padding: 6px 10px; }
    li:first-child, li.is-first { font-weight: bold; }
    li:nth-child(odd), li.is-odd { background: #eee; }
    h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
  </style>
 </head>
 <body>
  <h3>:hover / :visited</h3>
  <a href="#" class="is-hovered">Link mit Hover</a> &middot;
  <a href="#" class="is-visited">Besuchter Link</a>
  <h3>:focus</h3>
  <input class="is-focused" value="fokussiert">
  <h3>:first-child, :nth-child(odd)</h3>
  <ul>
    <li class="is-first is-odd">Erster (bold, zebra)</li>
    <li>Zweiter</li>
    <li class="is-odd">Dritter (zebra)</li>
    <li>Vierter</li>
    <li class="is-odd">Fünfter (zebra)</li>
  </ul>
 </body>
 </html>
@@ -1,34 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
 <meta charset="UTF-8">
 <title>Preview: css-pseudo-elements</title>
 <style>
  :root {
    --hl: #d63384;
    --dark: #0f0f23;
    --chrome: #1a1a2e;
    --muted: #4a4a6a;
  }
  html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
  .browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
  .window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
  .chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
  .dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
  .r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
  .url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
 </style>
 </head>
 <body>
 <div class="browser">
  <div class="window">
    <div class="chrome">
      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
      <span class="url">file:///beispiel/pseudo-elements.html</span>
    </div>
    <iframe src="./css-pseudo-elements.html"></iframe>
  </div>
 </div>
 </body>
 </html>
@@ -1,35 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Pseudo-Elemente</title>
  <style>
    body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
    .required::before {
      content: "* ";
      color: red;
    }
    p.drop { line-height: 1.5; }
    p.drop::first-letter {
      font-size: 3em;
      font-weight: bold;
      color: #d63384;
      float: left;
      line-height: 0.9;
      padding-right: 6px;
      padding-top: 2px;
    }
    label { display: block; margin-top: 10px; }
    input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }
    h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
  </style>
 </head>
 <body>
  <h3>::before (Pflichtfeld-Sternchen)</h3>
  <label class="required">E-Mail-Adresse</label>
  <input type="email">
  <h3>::first-letter (Initial-Buchstabe)</h3>
  <p class="drop">Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.</p>
 </body>
 </html>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
libretech	8d5c57d561	merge klausur-erklaerungen into test-merge resolves all conflicts: main's content preferred for slide edits, klausur-erklaerungen's structural additions (erklaerung slides, klausurfragen, archive, scripts) preserved. fixes generate-root-index.sh semester to sommersemester 2026.	2026-03-26 22:31:04 +01:00
libretech	64f4729f45	add erklaerung slides after klausur slides in 223015c - add section.erklaerung CSS class with pink theme styling - add 6 explanation slides to 01-geschichte-grundlagen-html.md - add 10 explanation slides to 02-netzwerke-protokolle-css.md - each slide includes definition, key points, and mnemonics	2026-02-02 14:03:54 +01:00
libretechandClaude Opus 4.5	c35541961e	add archive directory with old klausurfragen files Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-02 13:42:12 +01:00
libretechandClaude Opus 4.5	d8f68183f3	update 02-bild-audio-video.md structure and content Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-02 13:42:11 +01:00
libretechandClaude Opus 4.5	705c5e3457	add klausurfragen to topic map in generate-index.sh Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-02 13:42:02 +01:00
libretechandClaude Opus 4.5	9b0b6bc9d6	remove global klausurfragen from root index klausurfragen are now per-course, no longer shown on root index Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-02 13:41:58 +01:00
libretechandClaude Opus 4.5	62cd97c51a	update makefile for per-course klausurfragen - add klausurfragen to KAPITEL lists for both courses - remove standalone build-klausurfragen target - remove deploy-klausurfragen target - klausurfragen now built and deployed as part of each course Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-02 13:41:52 +01:00
libretechandClaude Opus 4.5	9f2c78d536	add course-specific klausurfragen files split klausurfragen by course with appropriate CI: - 223015b: blocks J-O (dateiformate) with blue CI - 223015c: blocks A-I (IT-grundlagen) with pink CI preserves existing disable markers for non-klausur questions Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-02 13:41:48 +01:00
libretechandClaude Opus 4.5	fb0db03db9	restore 01-grundlagen.md for 223015b accidentally removed in `a8343c9`, restored from `d77b0f2` Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>	2026-02-02 13:41:42 +01:00