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/css/finalflux.css

@@ -84,6 +84,62 @@ body.finalflux-page {
   margin-bottom: 1.5rem;
 }
 
+.finalflux-page .merksatz {
+  margin: 1rem 0 0;
+  padding: 0.85rem 1rem;
+  background: var(--surface-2);
+  border-left: 4px solid var(--accent-2);
+  border-radius: 8px;
+}
+
+.finalflux-page .merksatz strong {
+  color: var(--accent-2);
+}
+
+/* ---- Topologie-Diagramme (Inline-SVG, theme-adaptiv) ---- */
+.topo-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 1.1rem 0 0.2rem;
+}
+.topo-figure {
+  flex: 1 1 240px;
+  margin: 0;
+  text-align: center;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 0.9rem 0.9rem 0.7rem;
+}
+.topo-figure svg { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
+.topo-figure figcaption { color: var(--muted); font-size: 0.82rem; margin-top: 0.5rem; line-height: 1.4; }
+.topo .link { stroke: var(--border-accent); stroke-width: 2; fill: none; }
+.topo .bus  { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
+.topo .node { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
+.topo .hub  { fill: var(--accent); stroke: none; }
+.topo .term { fill: var(--muted); }
+.topo .hlbl { fill: var(--accent-ink); font: 700 9px 'Segoe UI', Tahoma, sans-serif; text-anchor: middle; dominant-baseline: central; }
+
+.finalflux-page table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  font-size: 0.95rem;
+}
+
+.finalflux-page th,
+.finalflux-page td {
+  text-align: left;
+  padding: 0.55rem 0.7rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.finalflux-page th {
+  color: var(--heading);
+  font-weight: 700;
+}
+
 .finalflux-hero h2 {
   font-size: 2rem;
   margin: 0.4rem 0 1rem;
@@ -163,12 +219,14 @@ body.finalflux-page {
 }
 
 .fluxcheck-result.correct {
-  color: #00ff88;
+  color: var(--success);
 }
+.fluxcheck-result.correct::before { content: "\2713  "; font-weight: 800; }
 
 .fluxcheck-result.wrong {
-  color: #ff6b6b;
+  color: var(--danger);
 }
+.fluxcheck-result.wrong::before { content: "\2717  "; font-weight: 800; }
 
 .finalflux-test {
   background: var(--surface);