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/templates/legal/datenschutz.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="dark" xmlns:th="http://www.thymeleaf.org"
+      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mindflux – Datenschutzerklärung</title>
+  <link rel="stylesheet" href="/css/theme.css">
+  <script src="/js/theme.js"></script>
+  <style>
+    .mf-legal { max-width:860px; }
+    .mf-legal h1 { color:var(--heading); font-size:1.7rem; font-weight:800; margin:.2rem 0 .3rem; }
+    .mf-legal .stand { color:var(--muted); font-size:.85rem; margin-bottom:1.4rem; }
+    .mf-legal h2 { color:var(--heading); font-size:1.12rem; font-weight:700; margin:2rem 0 .6rem; }
+    .mf-legal p, .mf-legal li { color:var(--text); line-height:1.75; font-size:.97rem; }
+    .mf-legal ul { margin:.4rem 0 .4rem 1.2rem; }
+    .mf-legal li { margin-bottom:.35rem; }
+    .mf-legal .dev-note { color:var(--accent); line-height:1.65; border-left:3px solid var(--border-accent);
+      background:var(--surface-2); padding:.9rem 1.1rem; border-radius:10px; margin-bottom:1.6rem; font-size:.95rem; }
+    .mf-legal a.inline { color:var(--accent); }
+    .mf-legal table { width:100%; border-collapse:collapse; margin:.6rem 0 .4rem; font-size:.92rem; }
+    .mf-legal th, .mf-legal td { text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top; }
+    .mf-legal th { color:var(--heading); font-weight:700; }
+  </style>
+</head>
+<body>
+
+<div class="mf-theme-float"><button class="mf-theme"></button></div>
+
+<div class="mf-container mf-legal">
+  <div class="mf-page-head">
+    <a th:href="@{/dashboard}" class="mf-back" sec:authorize="isAuthenticated()">⟵ Zurück zum Dashboard</a>
+    <a th:href="@{/}" class="mf-back" sec:authorize="!isAuthenticated()">⟵ Zurück</a>
+  </div>
+
+  <h1>Datenschutzerklärung</h1>
+  <p class="stand">Stand: Juni 2026</p>
+
+  <div class="dev-note">
+    Hinweis: Mindflux befindet sich in aktiver Entwicklung und ist derzeit nicht für die öffentliche
+    Nutzung bestimmt. Die Verarbeitung erfolgt im Rahmen einer geschlossenen Test-/Entwicklungsphase.
+  </div>
+
+  <h2>1. Verantwortlicher</h2>
+  <p>
+    Verantwortlicher im Sinne der Datenschutz-Grundverordnung (DSGVO) ist Sysnaptik. Die vollständigen
+    Kontaktangaben finden sich im <a class="inline" th:href="@{/impressum}">Impressum</a>.
+  </p>
+
+  <h2>2. Überblick</h2>
+  <p>
+    Diese Erklärung informiert darüber, welche personenbezogenen Daten bei der Nutzung von Mindflux
+    verarbeitet werden, zu welchen Zwecken und auf welcher Rechtsgrundlage dies geschieht und welche
+    Rechte den betroffenen Personen zustehen. Wir verarbeiten nur die Daten, die für den Betrieb des
+    Dienstes erforderlich sind.
+  </p>
+
+  <h2>3. Welche Daten wir verarbeiten</h2>
+  <table>
+    <tr><th>Datenkategorie</th><th>Konkrete Daten</th></tr>
+    <tr><td>Kontodaten</td><td>Benutzername, E-Mail-Adresse, Passwort (ausschließlich als BCrypt-Hash gespeichert), Benutzerrolle</td></tr>
+    <tr><td>Profil</td><td>Optional hochgeladenes Profilbild (serverseitig auf max. 400 px skaliert, als JPEG gespeichert)</td></tr>
+    <tr><td>Nutzungs-/Lerndaten</td><td>Spielstände (Spiel, Deck, Punktzahl, Züge, Dauer, Zeitpunkt) sowie erreichte Erfolge/Achievements</td></tr>
+    <tr><td>Technische Daten</td><td>Sitzungs-Cookie zur Anmeldung, CSRF-Token; serverseitige Protokolldaten (z. B. IP-Adresse, Zeitpunkt, abgerufene Ressource) im Rahmen des technischen Betriebs</td></tr>
+  </table>
+
+  <h2>4. Zwecke und Rechtsgrundlagen</h2>
+  <ul>
+    <li><strong>Bereitstellung des Dienstes und Kontoverwaltung</strong> (Registrierung, Anmeldung, Lernfunktionen, Spielstände, Achievements) – Art. 6 Abs. 1 lit. b DSGVO (Vertrag/Nutzungsverhältnis).</li>
+    <li><strong>Technischer Betrieb, Sicherheit und Stabilität</strong> (Protokolldaten, Schutz vor Missbrauch) – Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse).</li>
+    <li><strong>Profilbild</strong> – auf Grundlage der freiwilligen Bereitstellung durch die Nutzer:in.</li>
+  </ul>
+
+  <h2>5. Cookies</h2>
+  <p>
+    Mindflux verwendet ausschließlich technisch notwendige Cookies: ein Sitzungs-Cookie für die
+    Anmeldung sowie einen Token zum Schutz vor Cross-Site-Request-Forgery (CSRF). Diese Cookies sind
+    für den Betrieb erforderlich; es findet kein Tracking und keine werbliche Auswertung statt.
+  </p>
+
+  <h2>6. Speicherdauer</h2>
+  <p>
+    Kontobezogene Daten werden gespeichert, solange das Nutzerkonto besteht. Nach Löschung des Kontos
+    werden die zugehörigen personenbezogenen Daten gelöscht, soweit keine gesetzlichen
+    Aufbewahrungspflichten entgegenstehen. Das Sitzungs-Cookie verliert mit dem Ende der Sitzung bzw.
+    der Abmeldung seine Gültigkeit. Da sich der Dienst in der Entwicklung befindet, können Daten zudem
+    im Rahmen von Tests zurückgesetzt werden.
+  </p>
+
+  <h2>7. Empfänger und Hosting</h2>
+  <p>
+    Die Daten werden auf einer vom Anbieter betriebenen Server-Infrastruktur verarbeitet und nicht zu
+    werblichen Zwecken an Dritte weitergegeben. Eine Übermittlung erfolgt nur, soweit dies für den
+    Betrieb technisch erforderlich oder gesetzlich vorgeschrieben ist. Eine Datenübermittlung in
+    Drittländer außerhalb der EU/des EWR findet nicht statt.
+  </p>
+
+  <h2>8. Datensicherheit</h2>
+  <p>
+    Passwörter werden ausschließlich als kryptografischer BCrypt-Hash gespeichert und nicht im Klartext
+    verarbeitet. Die Übertragung erfolgt im produktiven Betrieb verschlüsselt über TLS (HTTPS). Wir
+    treffen geeignete technische und organisatorische Maßnahmen, um die Daten vor unbefugtem Zugriff,
+    Verlust oder Missbrauch zu schützen.
+  </p>
+
+  <h2>9. Ihre Rechte</h2>
+  <p>Als betroffene Person haben Sie nach der DSGVO insbesondere folgende Rechte:</p>
+  <ul>
+    <li>Auskunft über die verarbeiteten Daten (Art. 15 DSGVO);</li>
+    <li>Berichtigung unrichtiger Daten (Art. 16 DSGVO);</li>
+    <li>Löschung (Art. 17 DSGVO) und Einschränkung der Verarbeitung (Art. 18 DSGVO);</li>
+    <li>Datenübertragbarkeit (Art. 20 DSGVO);</li>
+    <li>Widerspruch gegen eine Verarbeitung auf Grundlage berechtigter Interessen (Art. 21 DSGVO);</li>
+    <li>Beschwerde bei einer Datenschutz-Aufsichtsbehörde (Art. 77 DSGVO).</li>
+  </ul>
+  <p>Zur Ausübung dieser Rechte genügt eine Mitteilung an die im Impressum genannten Kontaktdaten.</p>
+
+  <h2>10. Änderungen dieser Erklärung</h2>
+  <p>
+    Wir passen diese Datenschutzerklärung an, wenn Änderungen am Dienst oder der Rechtslage dies
+    erfordern. Es gilt jeweils die hier veröffentlichte Fassung.
+  </p>
+</div>
+
+<footer class="mf-footer">
+  <a href="#">Support</a>
+  <a href="#">Feedback</a>
+  <a href="/nutzungsbedingungen">Nutzungsbedingungen</a>
+  <a href="/richtlinien">Richtlinien</a>
+  <a href="/datenschutz">Datenschutz</a>
+  <a href="/impressum">Impressum</a>
+</footer>
+
+</body>
+</html>