Rechtstexte, FinalFlux-Überarbeitung, neue Login-Optik, Konto-Löschung-Fix, BTTF-Farbrelaunch

- Rechtsseiten: Impressum-Platzhalter + echte Nutzungsbedingungen/AGB,
  Datenschutz (DSGVO) und Richtlinien; LegalController/ImpressumController,
  Footer app-weit verlinkt, Seiten als permitAll freigegeben.
- FinalFlux: 28 Themen / ~742 Fragen überarbeitet (plausible Distraktoren statt
  Dummy-Antworten, echte Erklärungen) + echte Lehrtexte je Seite;
  Netzwerktopologien mit Inline-SVG-Diagrammen (Stern/Bus/Ring/Mesh/Baum).
- Login/Registrierung als kombiniertes Dual-Panel (Slide-Overlay + Neon-Hover-
  Button), ausgelagert nach auth.css; Register-Duplikat -> /?registerError.
- Konto löschen repariert: @Transactional + Löschen von Spielständen,
  Achievements und Profilbild-Datei (DSGVO Art. 17). Impressum-Zurück-Link
  login-abhängig.
- App-weiter Farb-Relaunch auf "Back to the Future"-Palette: Feuer-Amber primär
  + Flux-Blau sekundär, warmer Glow; Dark/Light bleiben. Spiele-Feedback ohne
  Grün: richtig = Blau + Haken, falsch = Rot + Kreuz (neue Tokens
  --success/--danger/--secondary). Legacy-Cyan in style.css auf Variablen.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/main/resources/static/finalflux/systemintegration/osi.html

@@ -16,18 +16,102 @@
   <h1>OSI-Modell</h1>
 
   <section>
-    <h2>Die 7 Schichten</h2>
+    <h2>Was ist das OSI-Modell?</h2>
+    <p>
+      Das OSI-Modell (Open Systems Interconnection) ist ein Referenzmodell, das
+      die Kommunikation in Netzwerken in <strong>sieben aufeinander aufbauende
+      Schichten</strong> gliedert. Jede Schicht hat eine klar abgegrenzte Aufgabe
+      und nutzt die Dienste der darunterliegenden Schicht. Das Modell ist kein
+      Produkt, sondern eine gedankliche Ordnung: Es hilft, Geräte, Protokolle und
+      Fehler systematisch einzuordnen.
+    </p>
+    <p>
+      Beim Senden wandern die Daten von oben (Anwendung) nach unten
+      (Bitübertragung) und werden dabei <strong>gekapselt</strong> &ndash; jede
+      Schicht ergänzt einen eigenen Header. Beim Empfänger läuft es umgekehrt: Die
+      Daten werden Schicht für Schicht wieder ausgepackt (entkapselt).
+    </p>
+  </section>
+
+  <section>
+    <h2>Die 7 Schichten und ihre Aufgaben</h2>
     <ol class="key-list">
-      <li>Bitübertragung: Kabel, Funk, elektrische Signale.</li>
-      <li>Sicherung: MAC-Adressen, Frames, Switches.</li>
-      <li>Vermittlung: IP-Adressen, Routing.</li>
-      <li>Transport: TCP, UDP, Ports.</li>
-      <li>Sitzung: Verbindungen steuern.</li>
-      <li>Darstellung: Formate, Kodierung, Verschlüsselung.</li>
-      <li>Anwendung: HTTP, DNS, SMTP und andere Dienste.</li>
+      <li><strong>Schicht 1 &ndash; Bitübertragung:</strong> physische Übertragung roher Bits über Kabel, Glasfaser oder Funk. Geräte: Kabel, Hub, Repeater.</li>
+      <li><strong>Schicht 2 &ndash; Sicherung:</strong> fehlerfreie Übertragung im lokalen Netz, Adressierung über MAC-Adressen. Geräte: Switch, Bridge. Stichworte: Frames, VLAN.</li>
+      <li><strong>Schicht 3 &ndash; Vermittlung:</strong> logische Adressierung und Wegewahl (Routing) zwischen Netzen. Gerät: Router. Protokolle: IP, ICMP.</li>
+      <li><strong>Schicht 4 &ndash; Transport:</strong> Ende-zu-Ende-Verbindung zwischen Anwendungen, Unterscheidung über Ports. Protokolle: TCP (zuverlässig), UDP (schnell).</li>
+      <li><strong>Schicht 5 &ndash; Sitzung:</strong> Auf-, Abbau und Steuerung von Sitzungen und Dialogen zwischen Systemen.</li>
+      <li><strong>Schicht 6 &ndash; Darstellung:</strong> Datenformate, Zeichencodierung (z. B. UTF-8), Kompression und Verschlüsselung (z. B. TLS).</li>
+      <li><strong>Schicht 7 &ndash; Anwendung:</strong> Schnittstelle zu den Anwendungen. Protokolle: HTTP, HTTPS, DNS, SMTP, FTP.</li>
     </ol>
   </section>
 
+  <section>
+    <h2>PDUs &ndash; Wie heißen die Daten je Schicht?</h2>
+    <p>
+      Die Daten heißen auf jeder Schicht anders. Diese Protokoll-Dateneinheiten
+      (PDU) werden in AP1 gern abgefragt:
+    </p>
+    <ul class="key-list">
+      <li><strong>Schicht 1:</strong> Bit</li>
+      <li><strong>Schicht 2:</strong> Frame (Rahmen)</li>
+      <li><strong>Schicht 3:</strong> Paket</li>
+      <li><strong>Schicht 4:</strong> Segment (TCP) bzw. Datagramm (UDP)</li>
+      <li><strong>Schicht 5&ndash;7:</strong> Daten</li>
+    </ul>
+  </section>
+
+  <section>
+    <h2>Geräte und Protokolle richtig zuordnen</h2>
+    <p>
+      Die häufigste Verwechslung betrifft Schicht-Nummern. Diese Zuordnungen
+      sollten sitzen:
+    </p>
+    <ul class="key-list">
+      <li><strong>Hub / Repeater &rarr; Schicht 1</strong> (nur Signalverstärkung)</li>
+      <li><strong>Switch &rarr; Schicht 2</strong> (entscheidet anhand der MAC-Adresse)</li>
+      <li><strong>Router &rarr; Schicht 3</strong> (entscheidet anhand der IP-Adresse)</li>
+      <li><strong>MAC-Adresse = Schicht 2, IP-Adresse = Schicht 3, Port = Schicht 4</strong></li>
+      <li><strong>TCP/UDP = Schicht 4, HTTP/DNS/SMTP = Schicht 7</strong></li>
+    </ul>
+    <p class="merksatz"><strong>Merksatz:</strong> Von unten nach oben &ndash; <em>&bdquo;Alle deutschen Studenten trinken verschiedene Sorten Bier&ldquo;</em> (Anwendung, Darstellung, Sitzung, Transport, Vermittlung, Sicherung, Bitübertragung).</p>
+  </section>
+
+  <section>
+    <h2>Abgrenzung zum TCP/IP-Modell</h2>
+    <p>
+      In der Praxis wird oft das schlankere TCP/IP-Modell mit nur
+      <strong>vier Schichten</strong> verwendet. Es fasst mehrere OSI-Schichten
+      zusammen:
+    </p>
+    <ul class="key-list">
+      <li><strong>Netzzugang</strong> entspricht OSI-Schicht 1&ndash;2</li>
+      <li><strong>Internet</strong> entspricht OSI-Schicht 3 (IP)</li>
+      <li><strong>Transport</strong> entspricht OSI-Schicht 4 (TCP/UDP)</li>
+      <li><strong>Anwendung</strong> entspricht OSI-Schicht 5&ndash;7</li>
+    </ul>
+    <p>
+      OSI ist das theoretische Lern- und Analysemodell, TCP/IP das real im
+      Internet eingesetzte Modell.
+    </p>
+  </section>
+
+  <section>
+    <h2>Fehleranalyse nach OSI</h2>
+    <p>
+      Bei Netzwerkproblemen prüft man typischerweise <strong>von unten nach
+      oben</strong> (bottom-up): Erst die physische Verbindung, dann die
+      Konfiguration, zuletzt die Anwendung.
+    </p>
+    <ul class="key-list">
+      <li>Keine Link-LED &rarr; Schicht 1: Kabel, Port, Stecker prüfen.</li>
+      <li>Link da, aber keine IP &rarr; Schicht 3: IP-Adresse, Gateway, DHCP.</li>
+      <li>Ping auf IP ok, Name nicht &rarr; Schicht 7: DNS-Auflösung.</li>
+      <li>Ping ok, aber Dienst nicht erreichbar &rarr; Schicht 4: Port/Firewall.</li>
+      <li>HTTP 500 &rarr; Schicht 7: Anwendung bzw. Serverdienst.</li>
+    </ul>
+  </section>
+
   <section>
     <h2>Prüfungsmodus</h2>
     <p>