Refine Light Mode, UX und Mail-Diagnose

Refine: Nachtrag AP 1 — Glow im Light Mode störend, Alternative nötig
Vermerkt als offener Folge-Befund unter AP 1 (1e) und in der Umsetzungsstatus-Zeile: die aus dem Dark-Mode uebernommenen Glow-Effekte (Karten-`--glow-s`, Spiel-`*-glow`, `.mf-theme`-Toggle) wirken im Light Mode stoerend und brauchen eine helle Alternative. Dark Mode unveraendert. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EJvMTd7Vuedech24dy5kDY
2026-07-22 13:04:25 +02:00 · 2026-07-21 00:58:11 +02:00
28 changed files with 524 additions and 1267 deletions
@@ -7,6 +7,21 @@ Versionierung [semantisch](https://semver.org/lang/de/).
 ## [Unreleased] – 2026-07-21 · Gesamt-Audit: Light Mode, Barrierefreiheit, AP2-Inhalte, DSGVO
 ### Light Mode & Design
 - **Light-Mode-Fundament:** zentrale UI-Effekte sind jetzt als Theme-Primitives
  organisiert. Dark Mode behält Neon-Emissionen; Light Mode nutzt warme Elevation,
  entfernt Text-/Icon-Halos und erhält einen sichtbaren Scrollbar-Thumb. Native
  Controls folgen über `color-scheme` dem gewählten Theme.
 - **Theme-Start & FinalProtocol:** Erstbesucher folgen der OS-Farbpräferenz, die
  Browser-Chrome erhält ein passendes `theme-color` und FinalProtocol lädt keinen
  ungenutzten Legacy-Style mehr; die statischen Lernseiten erhalten daraus nur noch
  eine minimale Reset-Basis.
 - **Kritische Light-Mode-Fälle behoben:** Login-Overlay, SyntaxSaga-Bühne,
  CodeEscape-Terminal, NetWorker-Guide und die Farbenblind-Palette sind in heller
  Darstellung wieder lesbar und kontraststark. A11y-Widget und FinalProtocol
  verwenden ebenfalls themefähige Farben.
 - **Ansichtswechsel abgesichert:** zentrale SPA-Übergänge starten oben, ohne laufendes
  Antwortfeedback zu versetzen. FinalProtocol scrollt Ergebnisse und Neustarts gezielt
  ins Sichtfeld; SyntaxSaga und DevLab fokussieren ohne Scrollsprung.
 - **Echter Light Mode statt Invertierung:** Light-Tokens auf WCAG AA nachgeschärft
  (Akzent, Muted, Sekundär, Spielakzente), neues `--warn`-Token. Die Spielkarten der
  Plattform-Hülle erhalten im Light Mode farbton-treu abgedunkelte Akzente statt
@@ -48,6 +63,14 @@ Versionierung [semantisch](https://semver.org/lang/de/).
 - **Demo-Konto „NeuralTest"** wird per Migration aus produktiven Datenbanken entfernt.
 ### Technik & Qualität
 - **E-Mail-Versand diagnostizierbar:** Bestätigungs- und Reset-Mails schreiben jetzt
  datensparsame, korrelierbare Ereignislogs für Token-Erstellung, SMTP-Übergabe,
  Fehler, erneute Anforderung und Verifikation. Roh-Tokens und Bestätigungslinks
  werden nie protokolliert; eine SMTP-Annahme wird nicht als Postfachzustellung
  ausgegeben.
 - **Legacy aufgeräumt:** die nicht referenzierten Styles für Achievements, Progress,
  Settings und Soziales sowie `finalflux-check.js` entfernt; der Styleguide dokumentiert
  die neuen Effekt-Primitives.
 - **Chart.js lokal ausgeliefert** statt vom CDN – das einzige externe Asset entfällt,
  wodurch die Datenschutzerklärung wieder zur Realität passt.
 - **Security-Header** ergänzt: Content-Security-Policy (self-hosted), Referrer-Policy;
@@ -162,16 +162,18 @@ Feedback-Konvention (Blau/Rot) einhalten.
 ## Do / Don't
 **Do**
- Farben/Schatten/Glow ausschließlich über Tokens.
+- Farben, Schatten und Effekte ausschließlich über Tokens. Für Effekte die
  Primitives `--g-text`, `--g-icon`, `--g-strong`, `--g-amb`, `--g-card`,
  `--g-card-hover`, `--g-overlay` und `--g-focus` verwenden; keine direkten
  Glow-Geometrien in Komponenten schreiben.
 - Auf Akzentflächen Text in `--accent-ink`.
 - Erfolg = Blau, Fehler = Rot (nie Grün/Orange für „richtig/falsch").
 - Neue Komponenten an den `.mf-*`-Bausteinen orientieren.
 **Don't**
 - Keine hart kodierten Hex-/RGBA-Werte in Templates oder Spiele-CSS.
- Nicht die **Legacy-Dateien** als Stil-Referenz nehmen: `achievements.css`, `progress.css`,
+- Keine direkten `0 0 … var(--glow-*)`-, `text-shadow`- oder `drop-shadow`-Werte
-  `settings.css`, `soziales.css` (ungenutzt) sowie alte Schrift-Deklarationen
+  in Komponenten. Maßgeblich ist `theme.css`.
  (`'Segoe UI'`/`'Poppins'`) entsprechen **nicht** dem aktuellen System. Maßgeblich ist `theme.css`.
 ---
@@ -21,7 +21,7 @@ Basis-Pfad: `RES` = `src\main\resources`
 ## Umsetzungsstatus (Stand 2026-07-21, auf `main`)
 - ✅ **AP 0** Quick Wins — vollständig (inkl. V21-Reseed-Migration für Alt-DBs)
- ✅ **AP 1** Light Mode — vollständig, alle Kontraste WCAG-AA rechnerisch geprüft
+- ✅ **AP 1** Light Mode — vollständig, alle Kontraste WCAG-AA rechnerisch geprüft. ⚠️ **Nachtrag (2026-07-21):** Glow-Effekte wirken im Light Mode störend → Alternative nötig, s. AP 1e.
 - ✅ **AP 2** Header-Icons — vollständig
 - ✅ **AP 3** Barrierefreiheits-Widget — vollständig
 - ✅ **AP 4** Spielanleitungen & Hints — vollständig (AP 4c TechTacular-Joker war bereits erledigt)
@@ -80,6 +80,10 @@ Vorgehen je Spiel: alle Roh-Hexwerte in scoped Custom Properties überführen (`
 **Check:** jeder Spiel-Header, dessen Spiel jetzt theme-fähig ist, braucht den `.mf-theme`-Toggle (theme.js verdrahtet ihn automatisch); mindestens serviceclash.html fehlt er.
 ### 1e. Nachtrag: Glow im Light Mode überarbeiten (offen, 2026-07-21)
 **Befund:** Die aus dem Dark-Mode-Neon-Look übernommenen Glow-Effekte wirken im Light Mode störend (auf fast-weißem Grund lesen sie sich als Schmutz-/Haze-Rand statt als Akzent). Betrifft die durchgereichten Glow-Tokens der Kartenakzente (`--glow-s: rgba(<hex>,.22)`, s. 1b), die spielspezifischen `*-glow`-rgba (s. 1a) und den Glow am `.mf-theme`-Toggle (s. AP 2, `theme.css:120–121`).
 **Wir brauchen eine Alternative** für den hellen Modus — noch zu entscheiden, z. B. Glow-Alpha im Light-Block deutlich reduzieren/auf 0 setzen, oder den Neon-Glow durch ein dezentes Mittel ersetzen (weicher Schatten / abgesetzter Border / leichter Farbverlauf), das die Erkennungsfunktion behält, ohne den hellen Grund zu trüben. Dark Mode bleibt unverändert.
 ---
 ## AP 2 — Header-Icons vereinheitlichen
@@ -0,0 +1,305 @@
 # Mindflux — Refine 2: Light-Mode-Konzept, Scroll-Verhalten, Restpunkte
 ## Kontext
 Folgeplan zu `mindfluxrefine.md`. Die Code-Verifikation (2026-07-21) bestätigt: **alle „vollständig"-Claims aus Refine 1 halten der Prüfung stand**; offen sind AP 1e (Glow im Light Mode), der AP-7-Rest sowie einige Zusatzfunde (s. AP R5). Dieser Plan liefert das, was Refine 1 offen ließ: ein **echtes Light-Mode-Konzept**, das alle Probleme an der Wurzel behebt (statt Glow-Alphas weiter zu dimmen), plus das neue Thema **Scroll-Verhalten** (Ergebnisanzeigen u. ä. müssen oben starten, nicht unten).
 **Audit-Kurzbefunde (2026-07-21, drei unabhängige Durchgänge):**
 - **Light-Mode-Strukturfehler:** Der Light-Block in `theme.css` tauscht nur *Farbwerte/Alphas* der Glow-Tokens. Die *Geometrie* der Effekte (`box-shadow:0 0 20px …`, `text-shadow:0 0 12px …`, `drop-shadow(0 0 8px …)`) steht hart in ~70 Komponentenregeln quer durch `theme.css`, alle Spiele-CSS und Template-`<style>`-Blöcke. Ein Halo mit reduziertem Alpha bleibt ein Halo — auf Fast-Weiß liest er sich als Schmutz/Haze. Einzige strukturell adaptierte Stelle heute: `--g-soft` (`0 0 18px` dark → `0 6px 18px` light, `theme.css:31/53`). Genau **eine** Regel neutralisiert einen Glow explizit im Light Mode (`auth.css:127–128`).
 - **5 im Light Mode kaputte Stellen:** Login-Overlay weiß-auf-weiß (auth.css:123–127 × platform-neural.css:94), SyntaxSaga-Bühne bleibt schwarz (`syntaxsaga.css:250–251`), CodeEscape-Eingaben dunkel-auf-dunkel (`codeescape.css` `.esc-input` `#080604`), NetWorker-Guide-Panel dunkelnavy mit Light-`--muted` (`networker-guide.css`), Farbenblind-Palette × Light = Hellgelb/Hellblau auf Weiß (`accessibility.css:15–23`, `!important` schlägt die Light-Kartenakzente).
 - **Theme-Bootstrap-Lücken:** `color-scheme` fehlt komplett (native Scrollbars/Form-Controls folgen dem UA-Default), kein `theme-color`-Meta, kein `prefers-color-scheme`-Fallback (Erstbesucher mit OS-Light starten dunkel), alle Templates hardcoden `data-theme="dark"`.
 - **Scroll:** Im gesamten Projekt existiert **kein einziger** `scrollTo`/`scrollIntoView`/`scrollRestoration`-Aufruf (außer Chat-Autoscroll `neuralnet.js:84`, der korrekt ist). Die vier SPA-Spiele (BugHunter, CodeEscape, NetWorker, ServiceClash) ersetzen Views per `innerHTML` ohne Reset; der FinalProtocol-Quiz kollabiert am Ende einer langen Lernseite (Browser clampt ans neue Seitenende); SyntaxSaga/DevLab fokussieren Inputs ohne `preventScroll`.
 - **CSS-Leichen:** `achievements.css`, `progress.css`, `settings.css`, `soziales.css` werden nirgends mehr referenziert (repo-weiter Grep leer); `style.css` wird nur noch von `finalflux.html` geladen, ~90 % davon ist toter Dark-Code.
 Basis-Pfad: `RES` = `src\main\resources`
 ---
 ## Das Konzept: „Licht statt Leuchten"
 **Prinzip:** Dark Mode und Light Mode sind Geschwister mit derselben Farbidentität, aber unterschiedlicher *Physik*:
 | | Dark Mode | Light Mode |
 |---|---|---|
 | Metapher | Neon in der Nacht — Elemente **emittieren** Licht | Druck/Material am Tag — Elemente **werfen Schatten** |
 | Betonung | farbiger Glow (Halo) | **Elevation** (weicher, warm getönter neutraler Schatten) |
 | Identität/Wiedererkennung | Glow-Farbe | **Akzentfarbe direkt am Element** (Border, Text, Icon) — ist durch `--border-accent`, Icon-Farben und Kartenakzente bereits überall vorhanden |
 | Text-Halos | ja (`text-shadow`) | **nie** (liest sich als Unschärfe) |
 | Fokus-Ringe | farbig, weich | farbig, **crisp** (Ring statt Blur — funktional, bleibt farbig) |
 | Scrims/Overlays | dunkel | dunkel (funktional), aber leicht entschärft |
 **Mechanik:** Effekte werden zu **Primitives** — komplette `box-shadow`/`filter`/`text-shadow`-*Werte* als Tokens, nicht nur Farben. Komponenten schreiben nie mehr `0 0 20px var(--glow-s)`, sondern `var(--g-strong)`. Der Light-Block tauscht dann die *Kategorie* des Effekts (Glow → Elevation), nicht nur die Farbe. Dark bleibt visuell gleich (Blur-Radien werden auf die Primitive normalisiert; ±4 px sind nicht unterscheidbar). `--glow-s`/`--glow-w` bleiben als Farb-Tokens bestehen — die Spiele-CSS remappen sie bereits per `color-mix` auf ihre Akzente, und die Primitives referenzieren sie per `var()`, sodass Spiel-Glows im Dark Mode automatisch die Spielfarbe behalten.
 ---
 ## AP R0 — Aufräumen (erledigt 2026-07-22)
 1. **Erledigt:** Verwaiste CSS gelöscht: `achievements.css`, `progress.css`, `settings.css`, `soziales.css`. Die Referenzprüfung ergab 0 Treffer; STYLEGUIDE bereinigt.
 2. **Erledigt:** `style.css` auf eine vierzeilige Basis für die 40 statischen
   FinalProtocol-Lernseiten reduziert; FinalProtocol-Hub lädt sie nicht mehr.
 3. **Erledigt:** Nicht eingebundenes `finalflux-check.js` entfernt. `fluxtimer.css` bleibt separat offen, da die Datei in diesem Paket nicht geändert wurde.
 ---
 ## AP R1 — Effekt-Primitives (Kern des Light-Konzepts)
 ### R1a. Tokens in `RES\static\css\theme.css` — erledigt 2026-07-22
 In den Dark-Block (Z. 11–32) und Light-Block (Z. 33–54) ergänzen. Schattenfarbe Light ist **warmes Braun** `rgb(67,48,26)` (zur Creme-Palette passend, kein totes Grau/Schwarz):
 ```css
 :root, [data-theme="dark"] {
  /* … bestehende Tokens … */
  color-scheme:dark;
  --g-text:0 0 12px var(--glow-s);              /* Text-Halo: Logo, Headline-Akzent, *-brand b   */
  --g-icon:drop-shadow(0 0 8px var(--glow-s));  /* leuchtende Glyphen/Embleme                    */
  --g-strong:0 0 20px var(--glow-s);            /* starke Betonung: aktive Nav/Tabs, Primär-Btn  */
  --g-amb:0 0 14px var(--glow-w);               /* dezenter Schein: Icon-Hover, Toggle, Burger   */
  --g-card:drop-shadow(0 0 7px var(--glow-w));  /* Spielkarten-Grundzustand                      */
  --g-card-hover:drop-shadow(0 0 16px var(--glow-s));
  --g-overlay:0 24px 60px rgba(0,0,0,.5);       /* schwebende Panels: Guide, Drawer, A11y        */
  --g-focus:0 0 0 3px var(--glow-w);            /* Fokus-Ring (bleibt in beiden Themes farbig)   */
  --scroll-thumb:var(--line);
 }
 [data-theme="light"] {
  /* … bestehende Tokens … */
  color-scheme:light;
  --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.05), transparent 60%); /* statt .10 — Haze halbieren */
  --g-text:none;
  --g-icon:none;
  --g-strong:0 2px 10px rgba(67,48,26,.18), 0 1px 3px rgba(67,48,26,.10);
  --g-amb:0 1px 5px rgba(67,48,26,.10);
  --g-card:drop-shadow(0 2px 5px rgba(67,48,26,.10));
  --g-card-hover:drop-shadow(0 8px 18px rgba(67,48,26,.16));
  --g-overlay:0 18px 44px rgba(67,48,26,.20);
  --g-focus:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --scroll-thumb:#d9cbb2;   /* --line #f1e8d8 ist auf #fbf6ec unsichtbar */
 }
 ```
 Scrollbar-Regel `theme.css:64` auf `background:var(--scroll-thumb)` umstellen.
 ### R1b. Mechanische Migration in `theme.css`
 | Zeile | Selektor | Alt | Neu |
 |---|---|---|---|
 | 79 | `.mf-logo .mark` | `drop-shadow(0 0 8px var(--glow-s))` | `filter:var(--g-icon)` |
 | 80 | `.mf-logo .txt b` | `text-shadow:0 0 12px var(--glow-s)` | `text-shadow:var(--g-text)` |
 | 87 | `.mf-nav a.active` | `0 0 20px var(--glow-s)` | `box-shadow:var(--g-strong)` |
 | 94 | `.mf-avatar` | `0 0 14px var(--glow-s)` | `box-shadow:var(--g-strong)` (gleiche Farbstärke-Familie wie heute) |
 | 102/104 | `.mf-streak .fire` / `.mf-brain` | drop-shadows | `filter:var(--g-icon)` |
 | 109 | `.mf-hello h1 .nm` | `text-shadow:0 0 16px var(--glow-s)` | `text-shadow:var(--g-text)` |
 | 113/120/202 | iconbtn-Hover / `.mf-theme` / `.mf-burger` | `0 0 14px var(--glow-w)` | `box-shadow:var(--g-amb)` |
 | 128/130 | `.mf-card` / `:hover` | drop-shadow 7/16px | `filter:var(--g-card)` / `var(--g-card-hover)` |
 | 131 | `.mf-card .ico` | drop-shadow | `filter:var(--g-icon)` |
 | 136 | `.mf-card:hover .mf-play` | `0 0 16px var(--glow-s)` | `box-shadow:var(--g-strong)` |
 | 146 | `.mf-panel.accent` | `0 0 20px var(--glow-w)` | `box-shadow:var(--g-amb)` |
 | 151 | `.mf-bar > i` | `0 0 10px var(--glow-s)` | eigenes Primitive `--g-bar` (dark `0 0 10px var(--glow-s)` / light `none`) — der Balken trägt seine Farbe selbst, im Light braucht er keinen Hof |
 | 154 | `.mf-btn` | `0 0 18px var(--glow-s)` | `box-shadow:var(--g-strong)` |
 | 168 | Input-Fokus | `0 0 0 3px var(--glow-w)` | `box-shadow:var(--g-focus)` |
 | 182 | `.mf-cardbox` | `0 0 30px var(--glow-w)` | Hero-Aura: Zweizeiler — Basis `box-shadow:var(--g-strong)`, plus `[data-theme="dark"] .mf-cardbox{box-shadow:0 0 30px var(--glow-w)}` |
 | 223 | Mobile `.mf-sidebar` | `0 18px 50px rgba(0,0,0,.55)` | `box-shadow:var(--g-overlay)` |
 | 238 | `.mf-tab.active` | `0 0 18px var(--glow-s)` | `box-shadow:var(--g-strong)` |
 ### R1c. `platform-neural.css`
 Hat als einzige Datei schon gute Struktur-Overrides (Z. 91 ersetzt Schwarz- durch Grünschatten — Vorbild). Nachziehen: Z. 87 Logo-Drop-Shadow im Light auf `filter:none`; Z. 90 äußeren `0 0 13px`-Glow der aktiven Nav im Light streichen (Inset-Ring reicht). Die `--glow-s`-Kartenwerte (Z. 41–49/99–107) bleiben — sie speisen nach R1b nur noch Dark-Effekte.
 ### R1d. Spiele-CSS + Guide/Widget-CSS migrieren
 Gleiches Muster in allen Dateien; die Spiel-`--glow-s`-Remaps (z. B. `mindmatch.css:364`) bleiben unverändert und speisen die Primitives automatisch mit der Spielfarbe. Betroffene Stellen (Audit-Inventar):
 - **Text-Halos** → `text-shadow:var(--g-text)`: `syntaxsaga.css:40`, `mindmatch.css:53`, `techtacular.css:48`, `devlab.css` (`.dl-tube span`), `devlabgame.css` (Header-Titel), `codeescape.css` (`.esc-brand b`, `.esc-result .score`), `bughunter.css` (`.bh-brand b`, Stamp), `networker.css` (`.nw-brand b`, `.nw-final-score`), `serviceclash.css` (`.sc-brand b`, `.sc-score`), `auth.css:74` (`.auth-head b`), `style.css:89` (falls nach R0 noch vorhanden), Template-`<style>`: `progress.html:14` (Prozentzahl).
 - **Box-Glows** → `var(--g-strong)`/`var(--g-amb)` nach Gewicht: `syntaxsaga.css:37/70/100/125/136/200/229/233`, `mindmatch.css:40/106/226/237/280/287/299/324`, `techtacular.css:39/75/174/207/299`, `devlab.css:102/158/173`, `devlabgame.css:10/12/23/49/61/70/78/106/108`, `codeescape.css` (Buttons/Dialog/Hero — Hero-`0 0 50px` als Dark-only-Zweizeiler wie `.mf-cardbox`), `codeescape-guide.css` (`.esc-how .active`, `.esc-door.ready`, `.esc-input.bad`), `bughunter.css`, `networker.css`, `serviceclash.css` (`.sc-meter i`), `fluxtimer.css:6/7`, `accessibility.css:29`, `accessibility-placement.css:2/16`, `auth.css:14/34/88/98` (`.neon-btn` inkl.: den `::before`-Conic-Blur-Rotor Z. 95/99 im Light per `display:none`).
 - **Fokus-Ringe** → `var(--g-focus)`: `syntaxsaga.css:160`, `devlabgame.css:35/39`, CodeEscape-Inputs.
 - **Schwarz-Schatten** → `var(--g-overlay)` bzw. warm getönt: `game-guide.css:72`, `accessibility.css:30`, `accessibility-placement.css:17`, `fluxtimer.css:8` (+ Z. 14 `inset`-Schwarz auf hellem Display im Light entfernen), `serviceclash.css` (`.sc-card`), `bughunter.css` (Drawer, dort auch die im Light unsichtbaren `rgba(255,255,255,.09–.16)`-Inset-Highlights auf Light-Varianten umstellen).
 - **Scrims** (funktional, bleiben dunkel, aber vereinheitlichen): `mindmatch.css:309`, `techtacular.css:192`, `syntaxsaga.css:216`, `devlabgame.css:104` — im Light auf das Muster `game-guide.css:138` (`rgba(15,23,42,.5)`) wechseln, damit sich nicht zusätzlich der warme `--bg-glow`-Radial über den Scrim legt (`var(--bg-glow)` aus den Scrim-Deklarationen entfernen).
 - **Hint-Glow** `game-guide.css:155/160–161` (`#ffd54a`): Light-Override `[data-theme="light"] .mm-card.hinted { box-shadow:0 0 0 2px #8a6a06, 0 4px 12px rgba(67,48,26,.18); filter:none; }` (Warn-Ton aus dem Light-Block).
 ### R1e. Chart/Dashboard-`<style>`-Blöcke
 `dashboard.html:14/16/18/20/29/31/43/46/171`, `achievements.html:12–16`, `admin/dashboard.html:17–19`, `impressum.html:12`, `profile.html:11`: alle `text-shadow`/`drop-shadow`/`0 0 Npx`-Vorkommen auf die Primitives umstellen (Suchmuster: `grep -n "glow\|text-shadow\|drop-shadow" RES\templates -r`).
 ---
 ## AP R2 — Kaputte Light-Stellen (kritische Punkte erledigt 2026-07-22)
 ### R2a. Login/Registrierung: Overlay weiß-auf-weiß (kritisch)
 Ursache: `auth.css:123–127` setzt für Light `#fff`-Text/weiße Ghost-Border (Annahme: kräftiges Orange-Panel), aber auf der Plattform übersteuert `platform-neural.css:94` den Overlay-Grund mit Fast-Weiß. Fix in `platform-neural.css` (Light-Sektion, höhere Spezifität durch `.sn-platform` gewinnt gegen auth.css):
 ```css
 html[data-theme="light"].sn-platform body .overlay-panel h3 { color:#10291f; text-shadow:none; }
 html[data-theme="light"].sn-platform body .overlay-panel p  { color:#3c554a; }
 html[data-theme="light"].sn-platform body .ghost-btn        { color:#167a52; border-color:rgba(22,122,82,.55); }
 html[data-theme="light"].sn-platform body .ghost-btn:hover  { background:rgba(22,122,82,.10); }
 ```
 ### R2b. SyntaxSaga: Bühne bleibt schwarz (kritisch)
 `syntaxsaga.css:250–251` hardcodet `#07100b` + grüne Scanlines. Light-Block ergänzen (Palette: helles Bühnen-Grün zur Light-`--ss-accent` `#277d49`):
 ```css
 [data-theme="light"] body.ss-body {
  background:radial-gradient(1100px 500px at 50% -10%, rgba(39,125,73,.08), transparent 60%), #eef6f0;
 }
 [data-theme="light"] body.ss-body::before {
  background:repeating-linear-gradient(0deg, rgba(16,64,40,.05) 0 1px, transparent 1px 4px);
 }
 ```
 ### R2c. CodeEscape: Terminal-Eingaben & Dark-Inks (kritisch)
 - `.esc-input, .esc-select` (`#080604`): Light-Override `[data-theme="light"] .esc-input, [data-theme="light"] .esc-select { background:#fffaf0; color:var(--text); border-color:var(--border); }` — Dark behält den Terminal-Look.
 - Hardcodierte Dark-Inks auf Akzentflächen durch das Token ersetzen (funktioniert in beiden Themes): `.esc-btn:hover`/`.primary` `#160d00` → `var(--accent-ink)`; `codeescape-guide.css` `.esc-fragment small` `#160d00` → `var(--accent-ink)`; `.esc-how .done b` `#06120a` → `var(--accent-ink)`.
 - Tote Scanlines `rgba(255,255,255,.018)` (`codeescape.css`, `theme.css:138`): im Light-Override auf `rgba(67,48,26,.04)` drehen oder streichen.
 ### R2d. NetWorker-Guide: dunkles Panel (kritisch)
 `networker-guide.css` (`.nw-guide` `color-mix(#0b2540 74%, var(--surface))`): Light-Block ergänzen:
 ```css
 [data-theme="light"] .nw-guide { background:var(--surface); border-color:#d3e2f0; box-shadow:var(--g-soft); }
 ```
 (Textfarben laufen dort über `var(--muted)`/`var(--text)` und stimmen dann automatisch.)
 ### R2e. Farbenblind-Palette × Light (kritisch)
 `accessibility.css:15–23` erzwingt helle Okabe-Ito-Akzente per `!important` — auf weißen Karten < 1.5:1. Neuen Satz `html[data-theme="light"][data-mf-color="safe"]` mit **abgedunkelten** Okabe-Ito-Entsprechungen ergänzen (gleiche Zuordnung Spiel→Farbfamilie wie im Dark-Satz, Werte rechnerisch ≥ 4.5:1 auf Weiß, beim Umsetzen mit Kontrast-Tool gegenprüfen):
 | Okabe-Ito (dark) | Light-safe |
 |---|---|
 | `#e69f00` Orange | `#8a5f00` |
 | `#56b4e9` Himmelblau | `#19607f` |
 | `#009e73` Grün | `#007054` |
 | `#f0e442` Gelb | `#7a6a00` |
 | `#0072b2` Blau | `#0072b2` (bleibt) |
 | `#d55e00` Vermillion | `#a94500` |
 | `#cc79a7` Purpur | `#9c4f79` |
 Die zugehörigen Glow-Alphas entfallen im Light automatisch über die Primitives (R1).
 ### R2f. Kleinere Light-Fixes
 1. **Cancel-Hover** `mindmatch.css:128–129`, `techtacular.css:94` (`#fff` auf Blassrosa): Light-Override `[data-theme="light"] .mm-cancel:hover, …` → `background:var(--danger); color:#fff;` (Light-Danger `#be123c`, 7:1). Dark bleibt unverändert.
 2. **A11y-Widget-Inks:** `accessibility-placement.css:7–15` hardcodet dunkle `--mf-a11y-ink`-Werte — im Light sind die Akzente selbst dunkel. Eine Regel ergänzt: `html[data-theme="light"] body { --mf-a11y-ink:#fff; }` (gewinnt per Spezifität gegen die Skin-Zuweisungen). Panel-Kopf optional angleichen: `[data-theme="light"] .mf-a11y-head { background:var(--surface-2); color:var(--heading); }`.
 3. **finalflux-Altlast:** `finalflux.css:345` (`#0b0d1b`-Hardcode) funktioniert nur über die fragile `background:transparent`-Kaskade aus `platform-neural.css:61`. Hardcode durch `var(--bg)`-basierte Deklaration ersetzen, damit die Seite auch ohne `sn-platform` beide Themes überlebt.
 **Erledigt:** Login-Overlay, SyntaxSaga-Bühne, CodeEscape-Eingaben und Akzent-Inks,
 NetWorker-Guide, Farbenblind-Palette für Light Mode, A11y-Widget-Inks sowie der
 FinalProtocol-Hintergrund. Die noch offenen kleineren Cancel-Hover- und Detaileffekte
 werden zusammen mit der vollständigen CSS-Migration aus R1 abgeschlossen.
 ---
 ## AP R3 — Theme-Bootstrap (erledigt 2026-07-22)
 In `RES\static\js\theme.js`:
 1. **Erledigt:** `prefers-color-scheme` wird verwendet, wenn noch keine lokale Auswahl gespeichert ist.
 2. **Erledigt:** `theme-color` wird beim initialen Anwenden und Umschalten auf `#0a0806` bzw. `#fbf6ec` aktualisiert.
 3. **Erledigt:** `color-scheme` wird im Dark-/Light-Tokenblock gesetzt.
 4. **Teilweise erledigt:** geänderte FinalProtocol-Assets tragen neue Versionen; die übrigen Template-Referenzen werden bei ihrer jeweiligen Migration angehoben.
 ---
 ## AP R4 — Scroll: Ergebnisanzeigen & Ansichten starten oben (weitgehend erledigt 2026-07-22)
 Es gibt projektweit keinen Scroll-Reset. Drei Schichten (zentraler Helper + gezielte Aufrufe), Chat-Autoscroll `neuralnet.js:84` bleibt unangetastet:
 ### R4a. Helper in `theme.js` (läuft auf jeder Seite)
 ```js
 window.MindfluxUX = {
  toTop: function () { window.scrollTo(0, 0); },
  focusQuiet: function (el) { if (el) el.focus({ preventScroll: true }); }
 };
 ```
 **Umsetzungshinweis:** Der zentrale Helper ist vorhanden. Die vier SPA-Spiele setzen
 `history.scrollRestoration` nur auf Spielrouten auf `manual`; ein zentraler,
 ereignisbasierter Übergangs-Reset deckt Ansichtswechsel ab und lässt Antwort- bzw.
 Zeilenfeedback unverändert. FinalProtocol, SyntaxSaga, DevLab, MindMatch und
 TechTacular haben die zusätzlich beschriebenen gezielten Resets/Fokusoptionen.
 **Offen für die visuelle E2E-Prüfung:** die asynchron gerenderten Ergebniswechsel von
 CodeEscape, NetWorker und BugHunter müssen im Browser gegen die Scroll-Checkliste
 validiert und bei Bedarf direkt in den jeweiligen Render-Funktionen präzisiert werden.
 ### R4b. SPA-Spiele — Reset bei jedem Ansichtswechsel
 Muster pro Spiel: Mini-Wrapper `function setView(html){ view.innerHTML = html; window.scrollTo(0,0); }`, alle Render-Funktionen darüber. Zusätzlich **nur in diesen vier Skripten** beim Init: `if ('scrollRestoration' in history) history.scrollRestoration = 'manual'; window.scrollTo(0,0);` — verhindert, dass der Browser nach Reload/Back die alte, untere Position auf den neu aufgebauten Katalog anwendet. (Nicht global in `theme.js`: auf Lernseiten/Dashboard ist die Back-Position erwünscht.)
 | Spiel | Funktionen |
 |---|---|
 | BugHunter (`bughunter.js`) | `renderBriefing` :29, `renderHunt` :36 (nur bei Fallwechsel, nicht bei Zeilen-Re-Render), `showDebrief` :82, `renderResult` :88 |
 | CodeEscape (`codeescape.js`) | `renderLobby` :6, `renderRoom` :8, `renderResult` :17 |
 | NetWorker (`networker.js`) | `renderCatalog` :3, `renderIntro` :5, `renderLevel` :6, `finish` :11 |
 | ServiceClash (`serviceclash.js`) | `renderCatalog` :2, `renderRun` :4 (**nur bei Ticket-/Indexwechsel**, nicht beim Feedback-Re-Render), `finish` :9 |
 ### R4c. FinalProtocol-Quiz (`finalflux-test.js`)
 - `finishIfDone()` Z. 101–104: nach `testResult.hidden = false` → `elements.testResult.scrollIntoView({ block: 'start' });` (Auswertung beginnt oben im Blick, statt dass der Viewport ans geclampte Seitenende fällt).
 - `restartTest()` Z. 151–158: nach dem Wiedereinblenden → `elements.testRoot.scrollIntoView({ block: 'start' });`
 ### R4d. Fokus ohne Scroll-Sprung
 - `syntaxsaga.js`: `renderMission()` — `window.scrollTo(0,0)` vor Z. 209, dann Z. 210 `first.focus({preventScroll:true})`. (`nextBtn.focus()` Z. 297 bleibt — Nutzeraktion am selben Ort.)
 - `devlabgame.js`: `renderTask()` Z. 243 — `window.scrollTo(0,0)` am Ende; Z. 83 und Z. 233 `focus({preventScroll:true})`.
 - `codeescape.js:8/15` bleiben (Fokus am Türterminal ist dort korrekt).
 ### R4e. Niedrige Prio (nur Mobile relevant)
 `mindmatch.js` `newGame()` :332 und `techtacular.js` `newGame()` :265: `window.scrollTo(0,0)` — Desktop-Bodys sind `overflow:hidden`, mobil scrollt die Seite.
 ---
 ## AP R5 — Carry-over: Rest aus Refine 1 + Zusatzfunde der Verifikation
 Aus Refine 1 (dort AP 7 / offen):
 1. **Bean Validation:** `@Valid` + Constraints auf alle Request-DTOs — `BugHunterApiController:17–18`, `DevLabApiController:37/43`, `SyntaxSagaApiController:32/38`, `TechtacularApiController:50/75`, `CodeEscapeApiController` (4 DTOs), `NetworkerApiController` (2), `ServiceClashApiController` (2); `NeuralNetApiController:14/19` `Map<String,String>` → typisierte DTOs.
 2. **Spring Boot** 3.4.4 → aktuelles 3.4.x-Patch (`pom.xml:11`), Testlauf.
 3. **CSRF:** Blanket-Exemption `/api/**` (`SecurityConfig:46`) durch Cookie-basierte Tokens ersetzen.
 4. **Web-Layer-Test** für `GET /profile/export`.
 Zusatzfunde (neu):
 5. **`UserController:25/45`** bindet die **Entity `User`** direkt als `@RequestBody` ohne Validierung → auf DTO + `@Valid` umstellen (gehört in die Runde von Punkt 1).
 6. **5 Admin-Templates ohne Footer:** `admin\bughunter.html`, `admin\bughunter-hunt.html`, `admin\codeescape.html`, `admin\codeescape-room.html`, `admin\codeescape-scenario.html` → `th:replace="~{fragments/layout :: footer}"` ergänzen.
 7. **HSTS** explizit für Prod konfigurieren statt Spring-Default (`SecurityConfig:56–57`).
 8. Optional (unverändert Phase 2): BugHunter progressive Hinweise (Refine 1, AP 4d).
 ---
 ## Reihenfolge
 1. **AP R0** Aufräumen → 2. **AP R1** Primitives + Migration (theme.css zuerst, dann platform-neural, dann Spiele-CSS, dann Templates) → 3. **AP R2** kaputte Light-Stellen → 4. **AP R3** Bootstrap → 5. **AP R4** Scroll (unabhängig von 1–4, parallelisierbar) → 6. **AP R5** Carry-over → 7. Gesamtverifikation. STYLEGUIDE.md (Abschnitt „Glow, Schatten & Radien" → Primitives-Tabelle) und CHANGELOG nach R1–R3 nachziehen.
 ## Verifikation
 - **Build:** `mvn test` bleibt grün (54/54); App-Boot gegen Wegwerf-Postgres wie gehabt.
 - **Grep-Gates nach R1:** `grep -rnE "0 0 [0-9]+px var\(--" RES\static\css` → Treffer nur noch in den Primitive-Definitionen von `theme.css`; `grep -rn "text-shadow:0 0" RES\static\css RES\templates` → nur `--g-text`-Definition; `grep -rn "rgba(0,0,0,.5" RES\static\css` → nur Scrims/`--g-overlay`-Definition.
 - **Visuell (hell UND dunkel):** Dashboard (Karten + Hover), Login/Registrierung (insb. Overlay-Panel!), Settings, Progress, Soziales, NeuralNet, alle 9 Spiele (insb. SyntaxSaga-Bühne, CodeEscape-Eingaben, NetWorker-Guide), FinalProtocol-Lernseite + Quiz, A11y-Panel. Dark Mode muss vor/nach R1 visuell deckungsgleich sein (Stichprobe per Screenshot-Vergleich).
 - **A11y-Kombinationen:** Light × Hochkontrast (bleibt bewusst dunkel), Light × Farbenblind (neue dunkle Okabe-Ito-Werte sichtbar, Kontrast-Tool ≥ 4.5:1), Light × Mono.
 - **Native Controls:** Light Mode → helle Scrollbars und helle `<select>`-Dropdowns (Chrome + Firefox); mobile Adressleiste folgt `theme-color`.
 - **Erstbesuch:** localStorage leeren, OS auf Light stellen → Seite startet hell; OS Dark → dunkel; Umschalter persistiert weiter.
 - **Scroll:** je SPA-Spiel: langes Board nach unten scrollen → Aktion abschließen → Ergebnis-/Folge-View beginnt **oben**; ServiceClash-Antwort-Feedback und BugHunter-Zeilenauswahl dürfen **nicht** nach oben springen; FinalProtocol: langen Lernartikel bis zum Quiz scrollen, Quiz abschließen → Auswertung oben im Viewport; Reload mitten im Spiel → Katalog startet oben; SyntaxSaga/DevLab: Missions-/Taskwechsel startet oben, Fokus springt nicht; NeuralNet-Chat scrollt weiterhin ans Ende.
 ## Offene Punkte (unverändert aus Refine 1, vor Launch)
 - Echte Impressumsdaten (`impressum.html:44–52`) + §1 Datenschutzerklärung.
 - Support-/Feedback-Adressen bestätigen (`fragments/layout.html:88–89`).
 ## Nachtrag 2026-07-22 — E-Mail-Diagnose (erledigt)
 - Der Versand von Bestätigungs- und Reset-Links protokolliert nun korrelierbare
  Ereignisse: Token-Ausstellung, SMTP-Übergabe begonnen/angenommen/fehlgeschlagen,
  erneute Anforderung und erfolgreiche Verifikation. Logs enthalten User-/Token-IDs
  sowie einen gekürzten E-Mail-Fingerprint, niemals den Link oder das Roh-Token.
 - Wichtig für die Analyse: `SMTP_SUBMISSION_ACCEPTED` bedeutet nur, dass der
  konfigurierte SMTP-Server die Nachricht angenommen hat. Spamfilter, Bounces und
  die finale Postfachzustellung müssen zusätzlich im Mailserver bzw. über DSN geprüft
  werden.
 - Der Registrierungsabschluss meldet keinen Versand-Erfolg mehr, falls der gerade
  angelegte Benutzer beim Versand nicht geladen werden kann oder bereits als bestätigt
  vorliegt; der Grund erscheint als `VERIFICATION_SKIPPED` im Betriebslog.
@@ -4,6 +4,8 @@ import com.example.mindflux.service.RegistrationResult;
 import com.example.mindflux.service.AccountMailService;
 import com.example.mindflux.service.UserService;
 import org.springframework.stereotype.Controller;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PostMapping;
 import org.springframework.web.bind.annotation.RequestParam;
@@ -11,6 +13,8 @@ import org.springframework.web.bind.annotation.RequestParam;
@Controller
 public class RegisterController {
    private static final Logger log = LoggerFactory.getLogger(RegisterController.class);
    private final UserService userService;
    private final AccountMailService accountMailService;
@@ -34,9 +38,13 @@ public class RegisterController {
        return switch (result) {
            case SUCCESS -> {
                try {
-                    accountMailService.sendVerificationFor(userService.findByUsernameIgnoreCase(username.trim()));
+                    var user = userService.findByUsernameIgnoreCase(username.trim());
-                    yield "redirect:/?registerSuccess";
+                    yield accountMailService.sendVerificationFor(user)
                            ? "redirect:/?registerSuccess"
                            : "redirect:/?registerMailError";
                } catch (RuntimeException e) {
                    log.warn("mail_event=REGISTRATION_VERIFICATION_FAILED errorType={}",
                            e.getClass().getSimpleName());
                    yield "redirect:/?registerMailError";
                }
            }
@@ -10,6 +10,8 @@ import org.springframework.mail.SimpleMailMessage;
 import org.springframework.mail.javamail.JavaMailSender;
 import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
 import org.springframework.stereotype.Service;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import java.nio.charset.StandardCharsets;
 import java.security.MessageDigest;
@@ -25,6 +27,7 @@ import java.util.Optional;
 public class AccountMailService {
    private static final Duration TOKEN_LIFETIME = Duration.ofHours(24);
    private static final Logger log = LoggerFactory.getLogger(AccountMailService.class);
    private final AccountEmailTokenRepository tokenRepository;
    private final UserRepository userRepository;
    private final JavaMailSender mailSender;
@@ -48,32 +51,48 @@ public class AccountMailService {
    }
    @Transactional
-    public void sendVerificationFor(User user) {
+    public boolean sendVerificationFor(User user) {
-        if (user == null || user.isEmailVerified()) {
+        if (user == null) {
-            return;
+            log.error("mail_event=VERIFICATION_SKIPPED reason=USER_NOT_FOUND_AFTER_REGISTRATION");
            return false;
        }
-        String token = issueToken(user, AccountEmailToken.Purpose.EMAIL_VERIFICATION);
+        if (user.isEmailVerified()) {
-        send(user.getEmail(), "Bestätige deinen Mindflux-Account",
+            log.info("mail_event=VERIFICATION_SKIPPED reason=ALREADY_VERIFIED userId={}", user.getId());
            return false;
        }
        IssuedToken issued = issueToken(user, AccountEmailToken.Purpose.EMAIL_VERIFICATION);
        send(user, issued, "Bestätige deinen Mindflux-Account",
                "Hallo " + user.getUsername() + ",\n\n"
                        + "bitte bestätige deine E-Mail-Adresse, um deinen Account freizuschalten:\n"
-                        + publicUrl + "/verify-email?token=" + token + "\n\n"
+                        + publicUrl + "/verify-email?token=" + issued.rawToken() + "\n\n"
                        + "Der Link ist 24 Stunden gültig und kann nur einmal verwendet werden.\n\n"
                        + "Falls du dich nicht registriert hast, kannst du diese E-Mail ignorieren.");
        return true;
    }
    @Transactional
    public void resendVerification(String email) {
-        uniqueUserForEmail(email).filter(user -> !user.isEmailVerified()).ifPresent(this::sendVerificationFor);
+        Optional<User> user = uniqueUserForEmail(email);
        if (user.isEmpty()) {
            log.info("mail_event=VERIFICATION_RESEND_IGNORED reason=NO_UNIQUE_USER recipientFingerprint={}", recipientFingerprint(email));
            return;
        }
        if (user.get().isEmailVerified()) {
            log.info("mail_event=VERIFICATION_RESEND_IGNORED reason=ALREADY_VERIFIED userId={}", user.get().getId());
            return;
        }
        log.info("mail_event=VERIFICATION_RESEND_REQUESTED userId={}", user.get().getId());
        sendVerificationFor(user.get());
    }
    @Transactional
    public void requestPasswordReset(String email) {
        uniqueUserForEmail(email).filter(User::isEmailVerified).ifPresent(user -> {
-            String token = issueToken(user, AccountEmailToken.Purpose.PASSWORD_RESET);
+            IssuedToken issued = issueToken(user, AccountEmailToken.Purpose.PASSWORD_RESET);
-            send(user.getEmail(), "Passwort für deinen Mindflux-Account zurücksetzen",
+            send(user, issued, "Passwort für deinen Mindflux-Account zurücksetzen",
                    "Hallo " + user.getUsername() + ",\n\n"
                            + "über diesen Link kannst du ein neues Passwort vergeben:\n"
-                            + publicUrl + "/reset-password?token=" + token + "\n\n"
+                            + publicUrl + "/reset-password?token=" + issued.rawToken() + "\n\n"
                            + "Der Link ist 24 Stunden gültig und kann nur einmal verwendet werden.\n\n"
                            + "Falls du diese Anfrage nicht gestellt hast, kannst du diese E-Mail ignorieren.");
        });
@@ -91,6 +110,7 @@ public class AccountMailService {
        value.setConsumedAt(Instant.now());
        userRepository.save(user);
        tokenRepository.save(value);
        log.info("mail_event=VERIFICATION_CONFIRMED userId={} tokenId={}", user.getId(), value.getId());
        return true;
    }
@@ -124,7 +144,7 @@ public class AccountMailService {
        return users.size() == 1 ? Optional.of(users.getFirst()) : Optional.empty();
    }
-    private String issueToken(User user, AccountEmailToken.Purpose purpose) {
+    private IssuedToken issueToken(User user, AccountEmailToken.Purpose purpose) {
        tokenRepository.deleteByUserAndPurpose(user, purpose);
        byte[] bytes = new byte[32];
        secureRandom.nextBytes(bytes);
@@ -135,7 +155,9 @@ public class AccountMailService {
        token.setTokenHash(hash(rawToken));
        token.setExpiresAt(Instant.now().plus(TOKEN_LIFETIME));
        tokenRepository.save(token);
-        return rawToken;
+        log.info("mail_event=TOKEN_ISSUED purpose={} userId={} tokenId={} expiresAt={}",
                purpose, user.getId(), token.getId(), token.getExpiresAt());
        return new IssuedToken(rawToken, token.getId(), purpose);
    }
    private Optional<AccountEmailToken> validToken(String rawToken, AccountEmailToken.Purpose purpose) {
@@ -146,14 +168,42 @@ public class AccountMailService {
                .filter(token -> token.getExpiresAt().isAfter(Instant.now()));
    }
-    private void send(String recipient, String subject, String body) {
+    private void send(User user, IssuedToken issued, String subject, String body) {
        SimpleMailMessage message = new SimpleMailMessage();
        message.setFrom(fromAddress);
-        message.setTo(recipient);
+        message.setTo(user.getEmail());
        message.setSubject(subject);
        message.setText(body);
        log.info("mail_event=SMTP_SUBMISSION_STARTED purpose={} userId={} tokenId={} recipientFingerprint={}",
                issued.purpose(), user.getId(), issued.tokenId(), recipientFingerprint(user.getEmail()));
        try {
            mailSender.send(message);
            // JavaMail bestätigt hier nur die Annahme durch den konfigurierten SMTP-Server,
            // nicht die spätere Zustellung im Postfach. Für Bounces sind dessen Logs/DSN nötig.
            log.info("mail_event=SMTP_SUBMISSION_ACCEPTED purpose={} userId={} tokenId={}",
                    issued.purpose(), user.getId(), issued.tokenId());
        } catch (RuntimeException exception) {
            log.error("mail_event=SMTP_SUBMISSION_FAILED purpose={} userId={} tokenId={} errorType={} detail={}",
                    issued.purpose(), user.getId(), issued.tokenId(), exception.getClass().getSimpleName(),
                    safeFailureDetail(exception.getMessage()));
            throw exception;
        }
    }
    private String recipientFingerprint(String email) {
        return hash(email == null ? "" : email.trim().toLowerCase()).substring(0, 12);
    }
    private String safeFailureDetail(String detail) {
        if (detail == null || detail.isBlank()) {
            return "none";
        }
        String sanitized = detail.replaceAll("(?i)[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}", "[redacted-email]")
                .replaceAll("[\\r\\n]+", " ");
        return sanitized.substring(0, Math.min(sanitized.length(), 240));
    }
    private record IssuedToken(String rawToken, Long tokenId, AccountEmailToken.Purpose purpose) { }
    private String hash(String value) {
        try {
@@ -19,3 +19,4 @@ body[class*="mf-a11y-skin-"] .mf-a11y-head{background:color-mix(in srgb,var(--mf
 body[class*="mf-a11y-skin-"] .mf-a11y-close{background:var(--mf-a11y-accent);color:var(--mf-a11y-ink)}
 body[class*="mf-a11y-skin-"] .mf-a11y-option[aria-pressed="true"],body[class*="mf-a11y-skin-"] .mf-a11y-option.is-active{border-color:var(--mf-a11y-accent);background:color-mix(in srgb,var(--mf-a11y-accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--mf-a11y-accent)}
@media(max-width:700px){.mf-a11y-panel{inset:70px 6px auto 6px!important;width:auto;max-height:calc(100dvh - 82px)}}
 html[data-theme="light"] body{--mf-a11y-ink:#fff}html[data-theme="light"] .mf-a11y-head{background:var(--surface-2);color:var(--heading)}
@@ -28,3 +28,6 @@ html[data-mf-cursor="true"],html[data-mf-cursor="true"] *{cursor:url("data:image
   (Platzierung in accessibility-placement.css). Kein body-padding / Fixed-Dock mehr. */
 .mf-a11y-trigger{width:42px;height:42px;border:1px solid var(--border);border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--muted);cursor:pointer;transition:all .18s}.mf-a11y-trigger:hover{color:var(--accent);border-color:var(--border-accent);box-shadow:0 0 14px var(--glow-w)}.mf-a11y-trigger svg{width:20px;height:20px}.mf-a11y-trigger:focus-visible,.mf-a11y-panel button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
 .mf-a11y-panel{position:fixed;left:82px;bottom:18px;z-index:1801;width:min(450px,calc(100vw - 100px));max-height:calc(100dvh - 36px);overflow:auto;border:1px solid var(--border);border-radius:10px;background:var(--panel);color:var(--text);box-shadow:0 12px 45px rgba(0,0,0,.55)}.mf-a11y-panel[hidden]{display:none}.mf-a11y-head{position:sticky;top:0;display:flex;align-items:center;gap:1rem;padding:.65rem;background:#07121f;color:#fff;z-index:1}.mf-a11y-head h2{font:800 1.05rem Arial,sans-serif;margin:0 auto}.mf-a11y-close{width:44px;height:44px;border:0;border-radius:6px;background:#fff;color:#07121f;font-size:1.8rem;cursor:pointer}.mf-a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface)}.mf-a11y-option{min-height:88px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);padding:.65rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;font:inherit;cursor:pointer}.mf-a11y-option strong{font-size:1.35rem}.mf-a11y-option[aria-pressed="true"],.mf-a11y-option.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}.mf-a11y-option small{color:var(--muted)}@media(max-width:700px){.mf-a11y-panel{left:6px;bottom:74px;width:calc(100vw - 12px);max-height:calc(100dvh - 86px)}.mf-a11y-grid{grid-template-columns:1fr 1fr}.mf-a11y-option{min-height:78px;font-size:.82rem}}
 /* Okabe-Ito accents need darker values against the light page surface. */
 html[data-theme="light"][data-mf-color="safe"] body,html[data-theme="light"][data-mf-color="safe"] body *{--success:#0072b2!important;--danger:#8a5f00!important;--secondary:#9c4f79!important;--secondary-2:#19607f!important;--esc-accent:#8a5f00!important;--bh-accent:#a94500!important;--sc-accent:#19607f!important;--nw-accent:#0072b2!important;--mm-accent:#9c4f79!important;--mm-secondary:#19607f!important;--tt-accent:#7a6a00!important;--tt-secondary:#0072b2!important;--dl-accent:#007054!important;--dl-secondary:#19607f!important;--ss-accent:#0072b2!important;--ss-secondary:#8a5f00!important;--ff-accent:#a94500!important;--ff-secondary:#9c4f79!important}
 .mf-a11y-trigger:hover{box-shadow:var(--g-amb)}
@@ -1,165 +0,0 @@
 body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
    color: #ffffff;
    margin: 0;
    padding: 0;
 }
 .achievements-container {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    animation: fadeInUp 0.8s ease-out;
 }
 h1, h2 {
    color: #00e5ff;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
    text-align: center;
 }
 .slogan {
    text-align: center;
    color: #ccc;
    margin-bottom: 2rem;
    font-style: italic;
 }
 /* === Zurück-Button === */
 .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #00d9ff;
    color: #0d1117;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1rem;
    z-index: 1000;
 }
 .back-button:hover {
    background-color: #00aacc;
    transform: scale(1.05);
 }
 /* Responsives Verhalten */
@media (max-width: 768px) {
    .back-button {
        top: 10px;
        left: 10px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }
 }
 .achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
 }
 .achievement-card {
    background-color: rgba(10, 15, 25, 0.95);
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    box-shadow:
        0 0 15px rgba(0, 229, 255, 0.07),
        0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 .achievement-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.2);
 }
 .trophy-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
 }
 .achievement-card h2 {
    margin-bottom: 0.5rem;
 }
 .achievement-card p {
    margin: 0.5rem 0;
 }
 .status {
    margin-top: 1rem;
    font-weight: bold;
    color: #00e5ff;
 }
 .locked {
    opacity: 0.6;
    filter: grayscale(70%);
 }
 /* === Unlock-Effekt für freigeschaltete Achievements === */
 .achievement-card.unlocked {
    animation: unlock-glow 1s ease-out;
 }
 /* Animation für Unlock-Glow */
@keyframes unlock-glow {
    0% {
        box-shadow: 0 0 0 rgba(0, 229, 255, 0);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.7);
        transform: scale(1.05);
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
        transform: scale(1);
    }
 }
 /* Sanftes Pulsieren beim Hover über freigeschaltete Achievements */
 .achievement-card.unlocked:hover {
    animation: pulse 1.5s infinite;
 }
@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
    }
 }
 /* === Footer === */
 footer {
    background-color: #111122;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #aaa;
 }
 footer a {
    color: #66d9ef;
    text-decoration: none;
    margin: 0 0.5rem;
 }
 footer a:hover {
    text-decoration: underline;
@@ -1 +1,2 @@
 .esc-how{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin:0 0 1rem}.esc-how>div{display:flex;align-items:center;gap:.65rem;padding:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--muted)}.esc-how b{display:grid;place-items:center;min-width:1.7rem;height:1.7rem;border:1px solid var(--border);border-radius:50%;color:var(--muted)}.esc-how strong,.esc-how small{display:block}.esc-how strong{color:var(--heading);font-size:.78rem}.esc-how small{margin-top:.15rem;font-size:.65rem}.esc-how .done,.esc-how .active{border-color:var(--esc-accent)}.esc-how .done b{background:var(--success);border-color:var(--success);color:#06120a}.esc-how .active{box-shadow:0 0 18px var(--esc-glow)}.esc-puzzle:not(.done) .status{color:var(--esc-accent)}.esc-puzzle:not(.done):hover{border-color:var(--esc-accent);transform:translateY(-2px)}.esc-fragment{display:flex;align-items:center;gap:.45rem}.esc-fragment small{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--esc-accent);color:#160d00;font-size:.6rem}.esc-inventory.complete{border-style:solid;border-color:var(--success)}.esc-ready{margin:.7rem 0 0;color:var(--success);font-size:.75rem}.esc-door{flex-wrap:wrap}.esc-door.ready{border-color:var(--esc-accent);box-shadow:0 0 22px color-mix(in srgb,var(--esc-accent) 14%,transparent)}.esc-door-title{flex-basis:100%;display:flex;justify-content:space-between;align-items:center}.esc-door-title strong{color:var(--heading);font-size:.8rem}.esc-door-feedback{flex-basis:100%;min-height:1.2rem;font-size:.75rem}.esc-door-feedback.ok{color:var(--success)}.esc-door-feedback.bad{color:var(--danger)}.esc-door-feedback.wait{color:var(--esc-accent)}.esc-input.bad{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 28%,transparent)}.esc-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}@media(max-width:800px){.esc-how{grid-template-columns:1fr}.esc-door-title{align-items:flex-start}}
 .esc-how .done b,.esc-fragment small{color:var(--accent-ink)}.esc-how .active{box-shadow:var(--g-strong)}
@@ -344,3 +344,4 @@ body.finalflux-page {
 /* Prüfungszentrale: ruhige Gold-/Indigo-Konstellation statt Spielhallen-Optik. */
 body.finalflux-shell,body.finalflux-page { --accent:var(--ff-accent); --accent-2:var(--ff-secondary); --glow-s:var(--ff-glow); --glow-w:color-mix(in srgb,var(--ff-accent) 14%,transparent); background:radial-gradient(circle at 17% 13%,color-mix(in srgb,var(--ff-secondary) 17%,transparent),transparent 30%),radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--ff-accent) 13%,transparent),transparent 28%),#0b0d1b; }
 body.finalflux-shell::before,body.finalflux-page::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:radial-gradient(circle,var(--ff-accent) 0 1px,transparent 1.5px),radial-gradient(circle,var(--ff-secondary) 0 1px,transparent 1.5px); background-size:91px 91px,137px 137px; background-position:14px 22px,47px 65px; }.finalflux-sidebar,.finalflux-main,.finalflux-page { position:relative; z-index:1; }.finalflux-hero,.finalflux-panel,.finalflux-page section { border-left-color:var(--ff-secondary); box-shadow:0 10px 28px color-mix(in srgb,var(--ff-secondary) 9%,transparent); }
 body.finalflux-shell,body.finalflux-page{background:radial-gradient(circle at 17% 13%,color-mix(in srgb,var(--ff-secondary) 17%,transparent),transparent 30%),radial-gradient(circle at 82% 8%,color-mix(in srgb,var(--ff-accent) 13%,transparent),transparent 28%),var(--bg)}
@@ -1 +1,2 @@
 .nw-guide{margin:1rem 0;border:1px solid color-mix(in srgb,var(--nw-accent) 62%,var(--border));border-radius:10px;padding:1rem 1.1rem;background:color-mix(in srgb,#0b2540 74%,var(--surface));box-shadow:0 0 18px color-mix(in srgb,var(--nw-accent) 12%,transparent)}.nw-guide h2{margin:.35rem 0 .5rem;color:var(--heading);font-size:1rem}.nw-guide p,.nw-guide li{color:var(--muted);font-size:.82rem;line-height:1.5}.nw-guide ol{margin:.45rem 0;padding-left:1.25rem}.nw-guide strong{color:var(--text)}.nw-guide code{color:var(--nw-accent);font:700 .78rem "Courier New",monospace}.nw-guide details{margin-top:.7rem;border-top:1px solid var(--border);padding-top:.6rem}.nw-guide summary{color:var(--nw-accent);cursor:pointer;font:700 .72rem "Courier New",monospace;letter-spacing:.05em}.nw-guide dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem .75rem;margin:.65rem 0 0}.nw-guide dt{color:var(--nw-accent);font-weight:700}.nw-guide dd{margin:0;color:var(--muted);font-size:.8rem}
 [data-theme="light"] .nw-guide{background:var(--surface);border-color:#d3e2f0;box-shadow:var(--g-soft)}
@@ -112,3 +112,9 @@ html[data-theme="light"].sn-platform body.finalflux-shell, html[data-theme="ligh
 }
@media (max-width:820px) { html.sn-platform body .mf-sidebar { background:#061114; } }
@media (max-width:820px) { html[data-theme="light"].sn-platform body .mf-sidebar { background:#f5fbf7; } }
 /* Light-mode text must not inherit the white-on-color auth overlay treatment. */
 html[data-theme="light"].sn-platform body .mf-logo .mark,html[data-theme="light"].sn-platform body .auth-head .mark,html[data-theme="light"].sn-platform body .overlay-panel .o-emblem{filter:none}
 html[data-theme="light"].sn-platform body .overlay-panel h3{color:#10291f;text-shadow:none}
 html[data-theme="light"].sn-platform body .overlay-panel p{color:#3c554a}
 html[data-theme="light"].sn-platform body .ghost-btn{color:#167a52;border-color:rgba(22,122,82,.55)}
 html[data-theme="light"].sn-platform body .ghost-btn:hover{background:rgba(22,122,82,.10)}
@@ -1,184 +0,0 @@
 /* === Zurück-Button === */
 .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #00d9ff;
    color: #0d1117;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1rem;
    z-index: 1000;
 }
 .back-button:hover {
    background-color: #00aacc;
    transform: scale(1.05);
 }
 /* Responsives Verhalten */
@media (max-width: 768px) {
    .back-button {
        top: 10px;
        left: 10px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }
 }
 body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
    color: #ffffff;
    margin: 0;
    padding: 0;
 }
 .progress-container {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    animation: fadeInUp 0.8s ease-out;
 }
 h1, h2, h3 {
    color: #00e5ff;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
 }
 /* === Gesamtfortschritt === */
 .section-overall-progress {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 2rem;
 }
 .progress-summary {
    display: flex;
    flex: 1;
    gap: 2rem;
    background: rgba(0, 9, 22, 0.95);
    padding: 2rem;
    border-radius: 20px;
    box-shadow:
        0 0 15px rgba(0, 229, 255, 0.05),
        0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
 }
 .circular-progress {
    position: relative;
    width: 160px;
    height: 160px;
 }
 .percentage-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.6rem;
    font-weight: bold;
 }
 /* XP-Leiste */
 .xp-bar {
    background-color: #1a1a2e;
    border-radius: 10px;
    overflow: hidden;
    height: 20px;
    margin: 0.5rem 0;
 }
 .xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #00e5ff, #4cc3dd);
 }
 /* === Lernzeitbereich === */
 .section-learn-time {
    background: rgba(0, 9, 22, 0.9);
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow:
        0 0 10px rgba(0, 229, 255, 0.05),
        0 4px 10px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    margin: 0 auto;
 }
 #learnTimeChart {
    max-width: 100%;
    height: 180px !important;
 }
 /* === Spielkarten === */
 .section-game-progress {
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }
 .game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
 }
 .game-card {
    background-color: rgba(10, 15, 25, 0.95);
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow:
        0 0 15px rgba(0, 229, 255, 0.07),
        0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    transition: transform 0.2s ease;
 }
 .game-card:hover {
    transform: scale(1.02);
 }
 .game-progress-bar {
    background-color: #1a1a2e;
    border-radius: 10px;
    overflow: hidden;
    height: 10px;
    margin: 0.5rem 0;
 }
 .game-progress-bar .fill {
    height: 100%;
    background-color: #00e5ff;
 }
 /* === Footer === */
 footer {
    background-color: #111122;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #aaa;
 }
 footer a {
    color: #66d9ef;
    text-decoration: none;
    margin: 0 0.5rem;
 }
 footer a:hover {
    text-decoration: underline;
@@ -1,207 +0,0 @@
 body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(145deg, #1f1f2e, #2c2c3d);
    color: #ffffff;
    margin: 0;
    padding: 0;
 }
 header {
    position: relative; /* wichtig für .back-button */
    text-align: center;
    padding: 2rem 1rem 1rem;
    margin-bottom: 1rem;
 }
 header h1 {
    font-size: 2.5rem;
    color: #00e5ff;
    margin-bottom: 0.5rem;
 }
 header .slogan {
    font-size: 1.2rem;
    color: #ccc;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.2);
 }
 /* === Zurück-Button === */
 .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #00d9ff;
    color: #0d1117;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1rem;
    z-index: 1000;
 }
 .back-button:hover {
    background-color: #00aacc;
    transform: scale(1.05);
 }
 /* Responsives Verhalten */
@media (max-width: 768px) {
    .back-button {
        top: 10px;
        left: 10px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }
 }
@media (max-width: 480px) {
    .back-button {
        top: 8px;
        left: 8px;
        padding: 6px 10px;
        font-size: 0.8rem;
    }
 }
 .settings-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 2rem;
    background: rgba(0, 9, 22, 0.95);
    border-radius: 20px;
    box-shadow:
        0 0 15px rgba(0, 229, 255, 0.05),
        0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    gap: 2rem;
 }
 .section {
    background-color: rgba(10, 15, 25, 0.95);
    padding: 1.5rem;
    border-radius: 16px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.1);
    transition: transform 0.3s ease;
 }
 .section:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.2);
 }
 .section h2 {
    margin-bottom: 1rem;
    color: #00e5ff;
 }
 .switch-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
 }
 .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
 }
 .switch input {
    opacity: 0;
    width: 0;
    height: 0;
 }
 .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #888;
    transition: 0.4s;
    border-radius: 34px;
 }
 .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
 }
 input:checked + .slider {
    background-color: #00e5ff;
 }
 input:checked + .slider:before {
    transform: translateX(24px);
 }
 .settings-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }
 .settings-form input {
    padding: 0.8rem;
    border-radius: 8px;
    border: none;
    background: #1a1a2e;
    color: #fff;
 }
 .settings-form button {
    padding: 0.8rem;
    border: none;
    border-radius: 8px;
    background-color: #00e5ff;
    color: #00172e;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
 }
 .settings-form button:hover {
    background-color: #4cc3dd;
    transform: scale(1.02);
 }
 .danger-zone button {
    background-color: #ff4d4d;
    color: #fff;
 }
 .danger-zone button:hover {
    background-color: #cc0000;
 }
 /* === Footer === */
 footer {
    background-color: #111122;
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #aaa;
 }
 footer a {
    color: #66d9ef;
    text-decoration: none;
    margin: 0 0.5rem;
 }
 footer a:hover {
    text-decoration: underline;
 }
@@ -1,78 +0,0 @@
 body {
    background-color: #0d1117;
    color: #00d9ff;
    font-family: 'Poppins', sans-serif; /* oder deine Mindflux-Schrift */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
 }
 .container {
    padding: 40px;
    border: 1px solid #00d9ff; /* feiner als dashed */
    border-radius: 20px;
    background-color: #121826;
    box-shadow: 0 0 15px rgba(0, 217, 255, 0.5);
 }
 h1 {
    font-size: 2.2rem;
    margin-bottom: 20px;
 }
 p {
    font-size: 1.1rem;
 }
 .time-machine {
    font-size: 2.5rem;
    margin: 20px 0;
 }
 .small-hint {
    font-size: 0.9rem;
    margin-top: 20px;
    color: #7f8c8d;
 }
 .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #00d9ff;
    color: #0d1117;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1rem;
    z-index: 1000;
 }
 .back-button:hover {
    background-color: #00aacc;
    transform: scale(1.05); /* leichter "Hover-Zoom" */
 }
 /* Responsives Verhalten */
@media (max-width: 768px) {
    .back-button {
        top: 10px;
        left: 10px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }
 }
@media (max-width: 480px) {
    .back-button {
        top: 8px;
        left: 8px;
        padding: 6px 10px;
        font-size: 0.8rem;
    }
 }
@@ -1,551 +1,4 @@
-/* === Reset === */
+/* Legacy entry point retained for static FinalProtocol lessons.
-* {
+   Layout and components live in theme.css and finalflux.css. */
-    margin: 0;
+html,body{min-height:100%}
-    padding: 0;
+body{margin:0}
    box-sizing: border-box;
 }
 /* === Animationen === */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
 }
 /* Glanz-Effekt für Hover */
@keyframes shine {
    0% {
        background-position: -100%;
    }
    100% {
        background-position: 200%;
    }
 }
 /* Fade-In für Container beim Laden */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
 }
 /* === Body Hintergrund === */
 body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
    color: var(--heading);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
 }
 /* === Header === */
 header {
    text-align: center;
    padding: 2rem;
    margin: 2rem auto 1rem;
    width: 90%;
    max-width: 1200px;
    background-color: var(--panel);
    border-radius: 20px;
    box-shadow:
        0 8px 20px var(--glow-w),
        0 4px 12px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease-in-out;
    animation: fadeInUp 0.8s ease-out;
 }
 header:hover {
    box-shadow:
        0 10px 30px var(--glow-s),
        0 6px 16px rgba(0, 0, 0, 0.5);
 }
 .logo {
    max-height: 350px;
    width: auto;
    margin-bottom: 1rem;
 }
 header img {
    max-height: 80px;
    margin-bottom: 1rem;
 }
 header p.slogan {
    font-style: italic;
    color: var(--accent);
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px var(--glow-s);
 }
 /* === Main Bereich === */
 main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
    flex: 1;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease-out;
 }
 /* === Info-Textfeld === */
 .info-box {
    flex: 1 1 400px;
    max-width: 600px;
    background: rgba(0, 9, 22, 0.9);
    padding: 2rem;
    border-radius: 16px;
    box-shadow:
        0 0 15px var(--glow-w),
        0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    animation: fadeInUp 0.9s ease-out;
 }
 /* === Login/Register Box === */
 .login-box {
    flex: 1 1 300px;
    max-width: 400px;
    background: rgba(10, 15, 25, 0.95);
    padding: 2rem;
    border-radius: 16px;
    box-shadow:
        0 0 15px var(--glow-w),
        0 4px 10px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    animation: fadeInUp 1s ease-out;
 }
 .login-box h2 {
    margin-bottom: 1rem;
    color: var(--accent-2);
 }
 .login-box form {
    display: flex;
    flex-direction: column;
 }
 .login-box input,
 .login-box button {
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
 }
 /* === Input === */
 .login-box input {
    background-color: var(--heading);
    color: #000;
 }
 /* === Button mit Glanz- und Licht-Effekt === */
 .login-box button {
    background-color: var(--accent);
    color: #000;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease;
    box-shadow: 0 0 10px var(--glow-s);
 }
 .login-box button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.2) 100%
    );
    transform: skewX(-20deg);
    animation: shine 2s infinite;
 }
 .login-box button:hover {
    background-color: var(--accent-2);
    transform: scale(1.02);
    box-shadow: 0 0 15px var(--glow-s), 0 0 30px var(--glow-w) inset;
 }
 /* === Footer === */
 footer {
    background-color: var(--panel);
    padding: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--muted);
 }
 footer a {
    color: var(--accent-2);
    text-decoration: none;
    margin: 0 0.5rem;
 }
 footer a:hover {
    text-decoration: underline;
 }
 .theme-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
 }
 /* Kleinere Switch-Größe */
 .switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
 }
 .switch input {
    opacity: 0;
    width: 0;
    height: 0;
 }
 .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--muted);
    transition: 0.4s;
    border-radius: 30px;
    box-shadow: 0 0 6px var(--glow-s);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6px;
    font-size: 0.8rem;
    color: silver;
 }
 .slider:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--heading);
    transition: 0.4s;
    border-radius: 50%;
 }
 /* Bei aktiviertem Switch */
 input:checked + .slider {
    background-color: var(--accent);
    color: var(--heading);
 }
 input:checked + .slider:before {
    transform: translateX(20px);
 }
 .icon {
    pointer-events: none;
    user-select: none;
 }
 .dashboard-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 9, 22, 0.95);
    border-radius: 20px;
    padding: 2rem;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--accent);
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow:
        0 0 10px var(--glow-w),
        0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
 }
 .dashboard-tile:hover {
    background-color: var(--glow-w);
    transform: translateY(-3px);
    box-shadow:
        0 6px 16px var(--glow-s),
        0 0 20px var(--glow-w) inset;
 }
 .dashboard-tile span {
    color: var(--accent);
    text-shadow: 0 0 5px var(--glow-s);
 }
 /* === Profilbereich === */
 .profile-container {
  max-width: 800px;
  margin: 2rem auto;
  background: rgba(0, 9, 22, 0.95);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 0 20px var(--glow-w);
  animation: fadeInUp 0.8s ease-out;
 }
 .profile-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
 }
 .profile-form label {
  font-weight: bold;
  color: var(--accent);
 }
 .profile-form input {
  padding: 0.75rem;
  background-color: var(--surface-2);
  color: var(--heading);
  border: none;
  border-radius: 8px;
  font-size: 1rem;
 }
 .btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
 }
 .btn.save {
  background-color: var(--accent);
  color: var(--surface-2);
 }
 .btn.save:hover {
  background-color: var(--accent-2);
 }
 .btn.danger {
  background-color: var(--danger);
  color: white;
 }
 .btn.danger:hover {
  background-color: var(--danger);
 }
 /* Profilbild */
 .profile-picture img {
  max-height: 150px;
  border-radius: 12px;
  margin-bottom: 1rem;
 }
 /* === Tab-Navigation oben === */
 .tab-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1rem auto 2rem;
    flex-wrap: wrap;
 }
 .tab-nav .tab {
    padding: 0.6rem 1.2rem;
    background-color: var(--glow-w);
    color: var(--accent);
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 6px var(--glow-w);
 }
 .tab-nav .tab:hover {
    background-color: var(--glow-s);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px var(--glow-s);
 }
 .tab-nav .tab.active {
    background-color: var(--accent);
    color: #000;
 }
 .success-message {
    background-color: var(--accent);
    color: var(--accent-ink);
    padding: 1rem;
    margin: 1rem auto;
    max-width: 600px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0 10px var(--glow-s);
 }
 .success-message {
    background-color: var(--accent);
    color: var(--accent-ink);
    padding: 1rem;
    margin: 1rem auto;
    max-width: 600px;
    border-radius: 10px;
    text-align: center;
    font-weight: bold;
    box-shadow: 0 0 10px var(--glow-s);
    opacity: 1;
    transition: opacity 1.5s ease-out;
 }
 .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--accent);
    color: var(--accent-ink);
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 10px var(--glow-s);
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1rem;
    z-index: 1000;
 }
 .back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: var(--accent);
    color: var(--accent-ink);
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 10px var(--glow-s);
    transition: background-color 0.3s ease, transform 0.3s ease;
    font-size: 1rem;
    z-index: 1000;
 }
 .back-button:hover {
    background-color: var(--accent-2);
    transform: scale(1.05);
 }
@media (max-width: 768px) {
    .back-button {
        top: 10px;
        left: 10px;
        padding: 8px 14px;
        font-size: 0.9rem;
    }
 }
 <style>
 /* Admin-Button Stil */
 .admin-btn {
    background-color: var(--accent);
    color: var(--accent-ink);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
    box-shadow: 0 0 10px var(--glow-s);
 }
 .admin-btn:hover {
    background-color: var(--accent-2);
    box-shadow: 0 0 15px var(--glow-s), 0 0 25px var(--glow-s);
    transform: scale(1.05);
    color: var(--surface-2);
 }
 </style>
 .admin-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
 }
 .admin-card {
  display: block;
  background-color: var(--glow-w);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  color: var(--accent);
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px var(--glow-w);
 }
 .admin-card:hover {
  background-color: var(--glow-s);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--glow-w);
 }
 .admin-card.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
 }
 .admin-actions {
    text-align: left;
    margin: 1.5rem 2rem;
 }
 .btn-create {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    background-color: var(--accent);
    color: var(--accent-ink);
    border: none;
    border-radius: 10px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 4px 10px var(--glow-s);
    transition: background-color 0.3s, transform 0.2s;
 }
 .btn-create:hover {
    background-color: var(--accent);
    transform: translateY(-2px);
 }
@@ -249,3 +249,6 @@ body.ss-body {
 /* Textadventure-Terminal: phosphorige Log-Atmosphäre, Bewertung bleibt blau/rot. */
 body.ss-body { --accent:var(--ss-accent); --accent-2:var(--ss-secondary); --glow-s:var(--ss-glow); --glow-w:color-mix(in srgb,var(--ss-accent) 15%,transparent); background:radial-gradient(circle at 45% -8%,color-mix(in srgb,var(--ss-accent) 16%,transparent),transparent 42%),#07100b; }
 body.ss-body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.14; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(129,214,149,.18) 4px 5px); }.ss-shell { position:relative; z-index:1; }.ss-code { border-color:color-mix(in srgb,var(--ss-accent) 55%,var(--border)); box-shadow:inset 0 0 28px color-mix(in srgb,var(--ss-accent) 10%,transparent); }.ss-mission-no::before { content:"> "; color:var(--ss-secondary); }
 /* Daylight keeps the terminal texture without retaining a black stage. */
 [data-theme="light"] body.ss-body{background:radial-gradient(1100px 500px at 50% -10%,rgba(39,125,73,.08),transparent 60%),#eef6f0}
 [data-theme="light"] body.ss-body::before{background:repeating-linear-gradient(0deg,rgba(16,64,40,.05) 0 1px,transparent 1px 4px)}
@@ -9,6 +9,7 @@
   ============================================================ */
 :root, [data-theme="dark"] {
  color-scheme:dark;
  --bg:#0a0806; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(240,168,26,.10), transparent 60%);
  --panel:#13100b; --panel-2:#171209; --surface:#120f0a; --surface-2:#1b1610;
  --border:#2a2117; --line:#221b12;
@@ -29,9 +30,20 @@
  --fluxtimer-display:#170704; --fluxtimer-segment:#ff765f;
  --glow-s:rgba(240,168,26,.55); --glow-w:rgba(240,168,26,.16);
  --g-soft:0 0 18px var(--glow-w);
  --g-text:0 0 12px var(--glow-s);
  --g-icon:drop-shadow(0 0 8px var(--glow-s));
  --g-strong:0 0 20px var(--glow-s);
  --g-amb:0 0 14px var(--glow-w);
  --g-card:drop-shadow(0 0 7px var(--glow-w));
  --g-card-hover:drop-shadow(0 0 16px var(--glow-s));
  --g-overlay:0 24px 60px rgba(0,0,0,.5);
  --g-focus:0 0 0 3px var(--glow-w);
  --g-bar:0 0 10px var(--glow-s);
  --scroll-thumb:var(--line);
 }
 [data-theme="light"] {
-  --bg:#fbf6ec; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.10), transparent 60%);
+  color-scheme:light;
  --bg:#fbf6ec; --bg-glow: radial-gradient(900px 420px at 60% -10%, rgba(214,81,22,.05), transparent 60%);
  --panel:#ffffff; --panel-2:#fdf7ea; --surface:#ffffff; --surface-2:#fbf4e6;
  --border:#ece1cf; --line:#f1e8d8;
  --border-accent:rgba(194,65,12,.40); --accent:#c2410c; --accent-2:#b45309; --accent-ink:#ffffff;
@@ -51,6 +63,16 @@
  --fluxtimer-display:#fff5ec; --fluxtimer-segment:#a93131;
  --glow-s:rgba(214,81,22,.40); --glow-w:rgba(214,81,22,.12);
  --g-soft:0 6px 18px var(--glow-w);
  --g-text:none;
  --g-icon:none;
  --g-strong:0 2px 10px rgba(67,48,26,.18),0 1px 3px rgba(67,48,26,.10);
  --g-amb:0 1px 5px rgba(67,48,26,.10);
  --g-card:drop-shadow(0 2px 5px rgba(67,48,26,.10));
  --g-card-hover:drop-shadow(0 8px 18px rgba(67,48,26,.16));
  --g-overlay:0 18px 44px rgba(67,48,26,.20);
  --g-focus:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);
  --g-bar:none;
  --scroll-thumb:#d9cbb2;
 }
 * { box-sizing:border-box; margin:0; padding:0; }
@@ -61,7 +83,7 @@ body {
  min-height:100vh; transition:background-color .35s ease,color .35s ease;
 }
 a { color:var(--secondary); }
-::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
+::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:9px}
 /* ===== App-Shell (Sidebar | Mitte | rechte Spalte) ===== */
 .mf-shell { display:grid; grid-template-columns:264px 1fr 332px; grid-template-rows:auto 1fr; min-height:100vh; }
@@ -76,22 +98,22 @@ a { color:var(--secondary); }
 .mf-logo { display:flex; align-items:center; gap:.6rem; padding:.2rem .3rem .4rem; text-decoration:none; }
 .mf-logo .mark { width:38px; height:38px; flex:0 0 auto; background:var(--accent);
  -webkit-mask:url("/img/mindflux-emblem.png") center/contain no-repeat; mask:url("/img/mindflux-emblem.png") center/contain no-repeat;
-  filter:drop-shadow(0 0 8px var(--glow-s)); }
+  filter:var(--g-icon); }
-.mf-logo .txt b { color:var(--accent); font-weight:800; letter-spacing:.13em; font-size:1.02rem; display:block; text-shadow:0 0 12px var(--glow-s); }
+.mf-logo .txt b { color:var(--accent); font-weight:800; letter-spacing:.13em; font-size:1.02rem; display:block; text-shadow:var(--g-text); }
 .mf-logo .txt span { color:var(--muted); font-size:.56rem; letter-spacing:.22em; }
 /* ===== Sidebar-Navigation ===== */
 .mf-nav { display:flex; flex-direction:column; gap:.25rem; }
 .mf-nav a { display:flex; align-items:center; gap:.75rem; padding:.7rem .85rem; border-radius:11px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; border:1px solid transparent; transition:all .18s ease; }
 .mf-nav a:hover { color:var(--text); background:var(--surface-2); }
-.mf-nav a.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 0 20px var(--glow-s); }
+.mf-nav a.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:var(--g-strong); }
 .mf-nav a.active svg { color:var(--accent-ink); }
 .mf-nav svg { width:18px; height:18px; color:var(--accent); flex:0 0 auto; }
 /* ===== Profil / Level / Streak ===== */
 .mf-profile { border:1px solid var(--border); border-radius:13px; padding:.7rem; background:var(--surface); }
 .mf-profile .row { display:flex; align-items:center; gap:.6rem; }
-.mf-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:800; box-shadow:0 0 14px var(--glow-s); overflow:hidden; }
+.mf-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-flex; align-items:center; justify-content:center; color:var(--accent-ink); font-weight:800; box-shadow:var(--g-strong); overflow:hidden; }
 .mf-avatar img { width:100%; height:100%; object-fit:cover; }
 .mf-profile b { color:var(--heading); font-size:.86rem; display:block; }
 .mf-profile .role { color:var(--accent); font-size:.72rem; }
@@ -99,25 +121,25 @@ a { color:var(--secondary); }
 .mf-meta .lvl { color:var(--muted); letter-spacing:.04em; } .mf-meta .lvl b { color:var(--heading); }
 .mf-meta .xp { color:var(--muted); margin:.2rem 0 .35rem; }
 .mf-streak { display:flex; align-items:center; gap:.55rem; margin-top:.2rem; }
-.mf-streak .fire { font-size:1.1rem; filter:drop-shadow(0 0 6px var(--glow-s)); }
+.mf-streak .fire { font-size:1.1rem; filter:var(--g-icon); }
 .mf-streak b { color:var(--heading); font-size:.82rem; display:block; } .mf-streak small { color:var(--muted); }
-.mf-brain { margin-top:auto; opacity:.55; display:flex; justify-content:center; filter:drop-shadow(0 0 10px var(--glow-s)); }
+.mf-brain { margin-top:auto; opacity:.55; display:flex; justify-content:center; filter:var(--g-icon); }
 .mf-brain svg { width:150px; height:auto; }
 /* ===== Topbar ===== */
 .mf-hello h1 { color:var(--heading); font-size:1.85rem; font-weight:800; letter-spacing:-.01em; }
-.mf-hello h1 .nm { color:var(--accent); text-shadow:0 0 16px var(--glow-s); }
+.mf-hello h1 .nm { color:var(--accent); text-shadow:var(--g-text); }
 .mf-hello p { color:var(--muted); margin-top:.35rem; font-size:.95rem; }
 .mf-tools { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
 .mf-iconbtn { width:42px; height:42px; border-radius:10px; border:1px solid var(--border); background:var(--surface); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition:all .18s; }
-.mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:0 0 14px var(--glow-w); }
+.mf-iconbtn:hover { color:var(--accent); border-color:var(--border-accent); box-shadow:var(--g-amb); }
 .mf-iconbtn svg { width:20px; height:20px; }
 .mf-search { display:flex; align-items:center; gap:.5rem; min-height:42px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.5rem .8rem; color:var(--muted); }
 .mf-search input { background:none; border:0; outline:none; color:var(--text); font-size:.86rem; width:130px; }
 .mf-search svg { width:15px; height:15px; }
 /* ===== Theme-Umschalter ===== */
-.mf-theme { width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:0 0 14px var(--glow-w); }
+.mf-theme { width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:var(--accent); box-shadow:var(--g-amb); }
 .mf-theme svg { width:20px; height:20px; }
 /* ===== HUD-Spielkarten ===== */
@@ -125,15 +147,15 @@ a { color:var(--secondary); }
 .mf-card { position:relative; display:flex; flex-direction:column; padding:1.15rem 1.2rem 1.1rem; background:var(--surface);
  border:1px solid var(--border-accent); --n:18px;
  clip-path:polygon(0 0, calc(100% - var(--n)) 0, 100% var(--n), 100% 100%, 0 100%);
-  text-decoration:none; color:inherit; filter:drop-shadow(0 0 7px var(--glow-w)); transition:transform .16s ease, filter .25s ease, background-color .2s; }
+  text-decoration:none; color:inherit; filter:var(--g-card); transition:transform .16s ease, filter .25s ease, background-color .2s; }
 .mf-card::before { content:""; position:absolute; left:10px; top:10px; width:14px; height:14px; border-left:2px solid var(--accent); border-top:2px solid var(--accent); opacity:.7; }
-.mf-card:hover { transform:translateY(-4px); background:var(--surface-2); filter:drop-shadow(0 0 16px var(--glow-s)); }
+.mf-card:hover { transform:translateY(-4px); background:var(--surface-2); filter:var(--g-card-hover); }
-.mf-card .ico { width:58px; height:58px; color:var(--accent); margin-bottom:.7rem; filter:drop-shadow(0 0 6px var(--glow-s)); }
+.mf-card .ico { width:58px; height:58px; color:var(--accent); margin-bottom:.7rem; filter:var(--g-icon); }
 .mf-card .ico svg { width:100%; height:100%; }
 .mf-card h3 { color:var(--heading); font-size:1.06rem; font-weight:700; margin-bottom:.4rem; }
 .mf-card p { color:var(--muted); font-size:.83rem; line-height:1.5; flex:1; }
 .mf-play { margin-top:.9rem; align-self:flex-start; display:inline-flex; align-items:center; gap:.45rem; font-size:.74rem; font-weight:800; letter-spacing:.08em; color:var(--accent); border:1px solid var(--border-accent); border-radius:8px; padding:.5rem .85rem; text-decoration:none; transition:all .18s; }
-.mf-card:hover .mf-play { background:var(--accent); color:var(--accent-ink); box-shadow:0 0 16px var(--glow-s); }
+.mf-card:hover .mf-play { background:var(--accent); color:var(--accent-ink); box-shadow:var(--g-strong); }
 .mf-play svg { width:14px; height:14px; }
 .mf-card-codeescape { --accent:var(--esc-accent); --glow-s:var(--esc-glow); --glow-w:color-mix(in srgb,var(--esc-accent) 16%,transparent); background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px),var(--surface); }
 .mf-card-codeescape::after { content:"ACCESS"; position:absolute; right:12px; top:9px; color:var(--esc-accent); font:700 .52rem/1 "Courier New",monospace; letter-spacing:.12em; opacity:.6; }
@@ -143,15 +165,15 @@ a { color:var(--secondary); }
 /* ===== Panels / Widgets ===== */
 .mf-panel { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem; box-shadow:var(--g-soft); }
-.mf-panel.accent { border-color:var(--border-accent); box-shadow:0 0 20px var(--glow-w); }
+.mf-panel.accent { border-color:var(--border-accent); box-shadow:var(--g-amb); }
 .mf-panel h4 { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.9rem; }
 .mf-panel h4 svg { width:15px; height:15px; }
 .mf-eyebrow { color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
 .mf-bar { height:7px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border); overflow:hidden; }
-.mf-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--glow-s); }
+.mf-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow:var(--g-bar); }
 /* ===== Buttons ===== */
-.mf-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:800; font-size:.82rem; letter-spacing:.04em; border:0; border-radius:9px; padding:.6rem 1.1rem; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--accent-ink); box-shadow:0 0 18px var(--glow-s); transition:all .18s; }
+.mf-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; font-weight:800; font-size:.82rem; letter-spacing:.04em; border:0; border-radius:9px; padding:.6rem 1.1rem; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--accent-ink); box-shadow:var(--g-strong); transition:all .18s; }
 .mf-btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
 .mf-btn svg { width:15px; height:15px; }
 .mf-btn.outline { background:transparent; color:var(--accent); border:1px solid var(--border-accent); box-shadow:none; }
@@ -165,7 +187,7 @@ a { color:var(--secondary); }
 .mf-input, .mf-select, input.mf-input, select.mf-select, textarea.mf-input {
  width:100%; padding:.65rem .8rem; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text); font-size:.95rem; font-family:inherit; }
-.mf-input:focus, .mf-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--glow-w); }
+.mf-input:focus, .mf-select:focus { outline:none; border-color:var(--accent); box-shadow:var(--g-focus); }
 .mf-input::placeholder { color:var(--muted); }
 /* ===== Tabellen ===== */
@@ -179,7 +201,8 @@ a { color:var(--secondary); }
 /* ===== Standalone-Karte (Login/Auth, einzelne Inhaltsseiten) ===== */
 .mf-center { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem; }
-.mf-cardbox { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-accent); border-radius:18px; padding:2rem; box-shadow:0 0 30px var(--glow-w); }
+.mf-cardbox { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border-accent); border-radius:18px; padding:2rem; box-shadow:var(--g-strong); }
 [data-theme="dark"] .mf-cardbox { box-shadow:0 0 30px var(--glow-w); }
 .mf-container { max-width:1000px; margin:0 auto; padding:1.5rem; }
 .mf-page-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
 .mf-back { color:var(--accent); text-decoration:none; font-weight:700; font-size:.88rem; }
@@ -199,7 +222,7 @@ a { color:var(--secondary); }
 .mf-footer a + a::before { content:"·"; position:absolute; left:-.6rem; color:var(--border); }
 /* ===== Mobile-Nav (Off-Canvas-Drawer; Button/Backdrop per theme.js injiziert) ===== */
-.mf-burger { display:none; position:fixed; top:.7rem; left:.7rem; z-index:1300; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); color:var(--accent); align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 14px var(--glow-w); }
+.mf-burger { display:none; position:fixed; top:.7rem; left:.7rem; z-index:1300; width:42px; height:42px; border-radius:10px; border:1px solid var(--border-accent); background:var(--surface); color:var(--accent); align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--g-amb); }
 .mf-burger svg { width:20px; height:20px; }
 .mf-nav-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .28s ease; z-index:1100; }
 body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
@@ -220,7 +243,7 @@ body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
  .mf-sidebar {
    position:fixed; top:0; left:0; height:100dvh; width:min(284px,82vw); z-index:1200;
    transform:translateX(-100%); transition:transform .28s ease; overflow-y:auto;
-    box-shadow:0 18px 50px rgba(0,0,0,.55);
+    box-shadow:var(--g-overlay);
  }
  body.mf-nav-open .mf-sidebar { transform:translateX(0); }
  .mf-burger { display:inline-flex; }
@@ -235,4 +258,4 @@ body.mf-nav-open .mf-nav-backdrop { opacity:1; pointer-events:auto; }
 .mf-tab-nav { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.4rem; }
 .mf-tab { padding:.55rem .95rem; border-radius:10px; border:1px solid var(--border); color:var(--muted); text-decoration:none; font-size:.85rem; font-weight:700; transition:all .18s ease; }
 .mf-tab:hover { color:var(--text); background:var(--surface-2); }
-.mf-tab.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:0 0 18px var(--glow-s); border-color:transparent; }
+.mf-tab.active { color:var(--accent-ink); background:linear-gradient(100deg,var(--accent),var(--accent-2)); box-shadow:var(--g-strong); border-color:transparent; }
@@ -80,7 +80,7 @@
      if (last < tpl.length) code.appendChild(document.createTextNode(tpl.slice(last)));
      pre.appendChild(code);
      r.playfield.appendChild(pre);
-      const first = Object.values(inputs)[0]; if (first) first.focus();
+      const first = Object.values(inputs)[0]; if (first) first.focus({ preventScroll: true });
      return {
        collect: () => ({ gaps: Object.entries(inputs).map(([pos, i]) => ({ position: Number(pos), text: i.value })) }),
        lock: () => Object.values(inputs).forEach((i) => { i.disabled = true; }),
@@ -230,7 +230,7 @@
      input.addEventListener('input', preview);
      input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); doCheck(false); } });
      const wrap = document.createElement('div'); wrap.className = 'dlg-regex';
-      wrap.append(input, list); r.playfield.appendChild(wrap); preview(); input.focus();
+      wrap.append(input, list); r.playfield.appendChild(wrap); preview(); input.focus({ preventScroll: true });
      return {
        collect: () => ({ pattern: input.value }),
        lock: () => { input.disabled = true; },
@@ -241,6 +241,7 @@
  // ---------- Ablauf ----------
  function renderTask() {
    window.scrollTo(0, 0);
    const task = session.tasks[index];
    cur = { task, attempts: 0, solved: false, revealed: false };
    r.kind.textContent = `Aufgabe ${index + 1}`;
@@ -1,29 +0,0 @@
 document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-fluxcheck]').forEach((check) => {
    const button = check.querySelector('button');
    const result = check.querySelector('.fluxcheck-result');
    if (!button || !result) {
      return;
    }
    button.addEventListener('click', () => {
      const selected = check.querySelector('input[type="radio"]:checked');
      if (!selected) {
        result.textContent = 'Wähle zuerst eine Antwort aus.';
        result.className = 'fluxcheck-result wrong';
        return;
      }
      const expected = check.dataset.answer;
      const explanation = check.dataset.explanation || '';
      const isCorrect = selected.value === expected;
      result.textContent = isCorrect
        ? 'Richtig. ' + explanation
        : 'Noch nicht. ' + explanation;
      result.className = 'fluxcheck-result ' + (isCorrect ? 'correct' : 'wrong');
    });
  });
 });
@@ -100,6 +100,7 @@ document.addEventListener('DOMContentLoaded', async () => {
    testRoot.hidden = true;
    elements.testResult.hidden = false;
    elements.testResult.scrollIntoView({ block: 'start' });
    elements.resultSummary.textContent = `Du hast ${score} von ${questions.length} Fragen richtig beantwortet.`;
    elements.categorySummary.innerHTML = '';
    Array.from(categoryStats.entries()).forEach(([category, stats]) => {
@@ -154,6 +155,7 @@ document.addEventListener('DOMContentLoaded', async () => {
    categoryStats.clear();
    testRoot.hidden = false;
    elements.testResult.hidden = true;
    testRoot.scrollIntoView({ block: 'start' });
    renderQuestion();
  });
@@ -330,6 +330,7 @@
  }
  function newGame() {
    window.scrollTo(0, 0);
    const slug = deckSelect.value;
    const deckPairs = decksBySlug.get(slug);
@@ -111,6 +111,7 @@
  // ---------- Mission rendern ----------
  function renderMission() {
    window.scrollTo(0, 0);
    const mission = story.missions[missionIndex];
    cur = { mission, attempts: {}, revealed: {}, solved: {}, scored: {} };
    curGaps = {};
@@ -207,7 +208,7 @@
    storyEl.appendChild(scene);
    updateHud();
    const first = Object.values(curInputs)[0];
-    if (first) first.focus();
+    if (first) first.focus({ preventScroll: true });
  }
  // ---------- Prüfen / Auflösen ----------
@@ -263,6 +263,7 @@
  }
  async function newGame() {
    window.scrollTo(0, 0);
    stopTimer();
    seconds = 0; score = 0; answeredCount = 0; current = null; jokerUsed = false;
    submitted.length = 0;
@@ -3,8 +3,20 @@
   Jeder Button mit Klasse .mf-theme wird automatisch zum Umschalter. */
 (function () {
  var KEY = 'mf-theme';
-  function read() { try { return localStorage.getItem(KEY) || 'dark'; } catch (e) { return 'dark'; } }
+  function preferredTheme() {
-  function apply(mode) { document.documentElement.setAttribute('data-theme', mode); }
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
  }
  function read() { try { return localStorage.getItem(KEY) || preferredTheme(); } catch (e) { return preferredTheme(); } }
  function apply(mode) {
    document.documentElement.setAttribute('data-theme', mode);
    var meta = document.querySelector('meta[name="theme-color"]');
    if (!meta) {
      meta = document.createElement('meta');
      meta.name = 'theme-color';
      document.head.appendChild(meta);
    }
    meta.content = mode === 'light' ? '#fbf6ec' : '#0a0806';
  }
  apply(read()); // früh -> kein Aufblitzen
@@ -15,6 +27,10 @@
  var isGameRoute = ['/mindmatch', '/techtacular', '/devlab', '/syntaxsaga', '/codeescape', '/bughunter', '/serviceclash', '/networker']
    .some(function (route) { return path === route || path.indexOf(route + '/') === 0; });
  if (!isGameRoute) document.documentElement.classList.add('sn-platform');
  if (isGameRoute && 'scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
    window.scrollTo(0, 0);
  }
  // Globale, rein clientseitige Komfortfunktionen. FluxTimer bleibt auf öffentlichen
  // Seiten inaktiv, läuft bei aktivierter Einstellung aber über Seitennavigationen weiter.
@@ -96,6 +112,10 @@
    set: set,
    current: function () { return document.documentElement.getAttribute('data-theme'); }
  };
  window.MindfluxUX = {
    toTop: function () { window.scrollTo(0, 0); },
    focusQuiet: function (el) { if (el) el.focus({ preventScroll: true }); }
  };
  // Mobile-Nav: Off-Canvas-Drawer für Seiten mit App-Sidebar (.mf-shell)
  function initMobileNav() {
@@ -130,5 +150,12 @@
    });
    paint();
    initMobileNav();
    // SPA-Spiele ersetzen ihre Ansicht per innerHTML. Nur echte Übergänge werden
    // zurück an den Seitenanfang gesetzt; Antwort-/Zeilenfeedback bleibt stabil.
    document.addEventListener('click', function (event) {
      if (!isGameRoute) return;
      var transition = event.target.closest('[data-start], #bhStart, #bhNext, #bhAgain, #again, #nwStart, #nwAgain, #scStart, #scNext, #scAgain');
      if (transition) window.setTimeout(function () { window.scrollTo(0, 0); }, 0);
    });
  });
 })();
@@ -4,10 +4,9 @@
  <meta charset="UTF-8">
  <title>FinalProtocol - SysnaptiK Neural</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/theme.css?v=5">
  <link rel="stylesheet" href="/css/theme.css?v=4">
  <link rel="stylesheet" href="/css/finalflux.css?v=2">
-  <script src="/js/theme.js?v=5"></script>
+  <script src="/js/theme.js?v=6"></script>
 </head>
 <body class="finalflux-shell">
  <aside class="finalflux-sidebar">
`@@ -1 +1,2 @@`
	.esc-how{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin:0 0 1rem}.esc-how>div{display:flex;align-items:center;gap:.65rem;padding:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--muted)}.esc-how b{display:grid;place-items:center;min-width:1.7rem;height:1.7rem;border:1px solid var(--border);border-radius:50%;color:var(--muted)}.esc-how strong,.esc-how small{display:block}.esc-how strong{color:var(--heading);font-size:.78rem}.esc-how small{margin-top:.15rem;font-size:.65rem}.esc-how .done,.esc-how .active{border-color:var(--esc-accent)}.esc-how .done b{background:var(--success);border-color:var(--success);color:#06120a}.esc-how .active{box-shadow:0 0 18px var(--esc-glow)}.esc-puzzle:not(.done) .status{color:var(--esc-accent)}.esc-puzzle:not(.done):hover{border-color:var(--esc-accent);transform:translateY(-2px)}.esc-fragment{display:flex;align-items:center;gap:.45rem}.esc-fragment small{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--esc-accent);color:#160d00;font-size:.6rem}.esc-inventory.complete{border-style:solid;border-color:var(--success)}.esc-ready{margin:.7rem 0 0;color:var(--success);font-size:.75rem}.esc-door{flex-wrap:wrap}.esc-door.ready{border-color:var(--esc-accent);box-shadow:0 0 22px color-mix(in srgb,var(--esc-accent) 14%,transparent)}.esc-door-title{flex-basis:100%;display:flex;justify-content:space-between;align-items:center}.esc-door-title strong{color:var(--heading);font-size:.8rem}.esc-door-feedback{flex-basis:100%;min-height:1.2rem;font-size:.75rem}.esc-door-feedback.ok{color:var(--success)}.esc-door-feedback.bad{color:var(--danger)}.esc-door-feedback.wait{color:var(--esc-accent)}.esc-input.bad{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 28%,transparent)}.esc-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}@media(max-width:800px){.esc-how{grid-template-columns:1fr}.esc-door-title{align-items:flex-start}}	.esc-how{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin:0 0 1rem}.esc-how>div{display:flex;align-items:center;gap:.65rem;padding:.7rem;background:var(--surface);border:1px solid var(--border);border-radius:9px;color:var(--muted)}.esc-how b{display:grid;place-items:center;min-width:1.7rem;height:1.7rem;border:1px solid var(--border);border-radius:50%;color:var(--muted)}.esc-how strong,.esc-how small{display:block}.esc-how strong{color:var(--heading);font-size:.78rem}.esc-how small{margin-top:.15rem;font-size:.65rem}.esc-how .done,.esc-how .active{border-color:var(--esc-accent)}.esc-how .done b{background:var(--success);border-color:var(--success);color:#06120a}.esc-how .active{box-shadow:0 0 18px var(--esc-glow)}.esc-puzzle:not(.done) .status{color:var(--esc-accent)}.esc-puzzle:not(.done):hover{border-color:var(--esc-accent);transform:translateY(-2px)}.esc-fragment{display:flex;align-items:center;gap:.45rem}.esc-fragment small{display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--esc-accent);color:#160d00;font-size:.6rem}.esc-inventory.complete{border-style:solid;border-color:var(--success)}.esc-ready{margin:.7rem 0 0;color:var(--success);font-size:.75rem}.esc-door{flex-wrap:wrap}.esc-door.ready{border-color:var(--esc-accent);box-shadow:0 0 22px color-mix(in srgb,var(--esc-accent) 14%,transparent)}.esc-door-title{flex-basis:100%;display:flex;justify-content:space-between;align-items:center}.esc-door-title strong{color:var(--heading);font-size:.8rem}.esc-door-feedback{flex-basis:100%;min-height:1.2rem;font-size:.75rem}.esc-door-feedback.ok{color:var(--success)}.esc-door-feedback.bad{color:var(--danger)}.esc-door-feedback.wait{color:var(--esc-accent)}.esc-input.bad{border-color:var(--danger);box-shadow:0 0 0 2px color-mix(in srgb,var(--danger) 28%,transparent)}.esc-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}@media(max-width:800px){.esc-how{grid-template-columns:1fr}.esc-door-title{align-items:flex-start}}
		`.esc-how .done b,.esc-fragment small{color:var(--accent-ink)}.esc-how .active{box-shadow:var(--g-strong)}`
`@@ -1 +1,2 @@`
	.nw-guide{margin:1rem 0;border:1px solid color-mix(in srgb,var(--nw-accent) 62%,var(--border));border-radius:10px;padding:1rem 1.1rem;background:color-mix(in srgb,#0b2540 74%,var(--surface));box-shadow:0 0 18px color-mix(in srgb,var(--nw-accent) 12%,transparent)}.nw-guide h2{margin:.35rem 0 .5rem;color:var(--heading);font-size:1rem}.nw-guide p,.nw-guide li{color:var(--muted);font-size:.82rem;line-height:1.5}.nw-guide ol{margin:.45rem 0;padding-left:1.25rem}.nw-guide strong{color:var(--text)}.nw-guide code{color:var(--nw-accent);font:700 .78rem "Courier New",monospace}.nw-guide details{margin-top:.7rem;border-top:1px solid var(--border);padding-top:.6rem}.nw-guide summary{color:var(--nw-accent);cursor:pointer;font:700 .72rem "Courier New",monospace;letter-spacing:.05em}.nw-guide dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem .75rem;margin:.65rem 0 0}.nw-guide dt{color:var(--nw-accent);font-weight:700}.nw-guide dd{margin:0;color:var(--muted);font-size:.8rem}	.nw-guide{margin:1rem 0;border:1px solid color-mix(in srgb,var(--nw-accent) 62%,var(--border));border-radius:10px;padding:1rem 1.1rem;background:color-mix(in srgb,#0b2540 74%,var(--surface));box-shadow:0 0 18px color-mix(in srgb,var(--nw-accent) 12%,transparent)}.nw-guide h2{margin:.35rem 0 .5rem;color:var(--heading);font-size:1rem}.nw-guide p,.nw-guide li{color:var(--muted);font-size:.82rem;line-height:1.5}.nw-guide ol{margin:.45rem 0;padding-left:1.25rem}.nw-guide strong{color:var(--text)}.nw-guide code{color:var(--nw-accent);font:700 .78rem "Courier New",monospace}.nw-guide details{margin-top:.7rem;border-top:1px solid var(--border);padding-top:.6rem}.nw-guide summary{color:var(--nw-accent);cursor:pointer;font:700 .72rem "Courier New",monospace;letter-spacing:.05em}.nw-guide dl{display:grid;grid-template-columns:max-content 1fr;gap:.35rem .75rem;margin:.65rem 0 0}.nw-guide dt{color:var(--nw-accent);font-weight:700}.nw-guide dd{margin:0;color:var(--muted);font-size:.8rem}
		`[data-theme="light"] .nw-guide{background:var(--surface);border-color:#d3e2f0;box-shadow:var(--g-soft)}`