CI: dangling images und alten build cache aufraeumen

Allow immediate login after registration
Link favicon explicitly on landing page
2026-08-04 09:03:57 +00:00 · 2026-07-24 15:32:01 +02:00 · 2026-07-22 14:23:21 +02:00 · 2026-07-22 14:18:57 +02:00 · 2026-07-22 14:14:11 +02:00 · 2026-07-22 14:11:41 +02:00
41 changed files with 670 additions and 1322 deletions
@@ -34,7 +34,15 @@ jobs:
          ALTER USER mindflux WITH PASSWORD :'new_db_password';
          SQL
          docker compose -f docker-compose.yml pull
 <<<<<<< HEAD
          docker compose -f docker-compose.yml up -d --wait --wait-timeout 90 || {
            docker logs --tail 200 mindflux >&2
            exit 1
          }
 =======
          docker compose -f docker-compose.yml up -d
      - name: Cleanup
        run: |
          docker image prune -f
          docker builder prune -f --filter "until=168h"
 >>>>>>> f79df17 (CI: dangling images und alten build cache aufraeumen)
@@ -6,7 +6,40 @@ Versionierung [semantisch](https://semver.org/lang/de/).
 ## [Unreleased] – 2026-07-21 · Gesamt-Audit: Light Mode, Barrierefreiheit, AP2-Inhalte, DSGVO
 ### Registrierung & Kontozugang
 - **Sofort nutzbare Accounts:** Die Registrierung hängt nicht mehr an der Zustellung
  einer Bestätigungs-E-Mail. Neue Accounts können sich direkt anmelden; bereits
  wartende Konten werden mit Migration V23 aktiviert. Nicht mehr benötigte
  Bestätigungs-Token werden gelöscht. E-Mail bleibt für den Passwort-Reset erhalten.
 ### Light Mode & Design
 - **Browser-Icon:** Das Neural-Emblem wird unter `/favicon.ico` ausgeliefert und
  direkt auf der Startseite verlinkt. Die Versionierung der Bild-URL ersetzt auch
  bereits gecachte Standard-Globus-Symbole im Browser-Tab.
 - **Preismodell offen formuliert:** Die öffentliche Einstiegsseite verspricht keine
  kostenlose Nutzung mehr; Beschreibung, Registrierungs-Teaser und Account-Hinweis
  bleiben bewusst preisneutral.
 - **Produktzweck klarer:** Die Login-Seite erklärt nun Zielgruppe, Lernformen und
  den Nutzen eines Accounts; im Dashboard fasst ein kompakter Einstieg den Lernzweck
  zusammen.
 - **TechTacular-Fragen überspringbar:** Eine noch nicht beantwortete Frage kann per
  ×, Klick außerhalb oder Escape folgenlos geschlossen und später wieder geöffnet
  werden.
 - **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 +81,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,314 @@
 # 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.
 ## Nachtrag 2026-07-22 — Nutzerfeedback (erledigt)
 - **TechTacular:** Unbeantwortete Fragen lassen sich per ×, Klick auf den Hintergrund
  oder Escape schließen und später erneut öffnen; sie werden dabei weder gewertet noch
  als beantwortet markiert.
 - **Produktverständnis:** Vor dem Login erklärt eine sichtbare Einordnung Zielgruppe,
  Lernformen und Nutzen der Plattform. Das Dashboard wiederholt den Zweck mit einem
  kompakten „Was du hier machst“-Abschnitt.
@@ -21,7 +21,7 @@ public class SecurityConfig {
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(auth -> auth
-                .requestMatchers("/", "/login", "/register", "/forgot-password", "/reset-password", "/verify-email", "/verification/resend", "/impressum", "/nutzungsbedingungen", "/datenschutz", "/richtlinien", "/css/**", "/js/**", "/img/**").permitAll()
+                .requestMatchers("/", "/login", "/register", "/forgot-password", "/reset-password", "/verify-email", "/verification/resend", "/impressum", "/nutzungsbedingungen", "/datenschutz", "/richtlinien", "/favicon.ico", "/css/**", "/js/**", "/img/**").permitAll()
                .requestMatchers("/actuator/health").permitAll() // Container-Healthcheck
                .requestMatchers("/admin/**").hasRole("ADMIN")
                .requestMatchers("/api/users/**").hasRole("ADMIN")
@@ -75,7 +75,6 @@ public class SecurityConfig {
                    .withUsername(user.getUsername())
                    .password(user.getPassword())
                    .roles(user.getRole()) // Achtung: Nur ein String, z.B. "USER" oder "ADMIN"
                    .disabled(!user.isEmailVerified())
                    .build();
        };
    }
@@ -0,0 +1,23 @@
 package com.example.mindflux.controller;
 import java.time.Duration;
 import org.springframework.core.io.ClassPathResource;
 import org.springframework.core.io.Resource;
 import org.springframework.http.CacheControl;
 import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RestController;
@RestController
 public class FaviconController {
    @GetMapping(value = "/favicon.ico", produces = MediaType.IMAGE_PNG_VALUE)
    public ResponseEntity<Resource> favicon() {
        Resource emblem = new ClassPathResource("static/img/mindflux-emblem.png");
        return ResponseEntity.ok()
                .cacheControl(CacheControl.maxAge(Duration.ofDays(30)).cachePublic())
                .body(emblem);
    }
 }
@@ -1,7 +1,6 @@
 package com.example.mindflux.controller;
 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.springframework.web.bind.annotation.GetMapping;
@@ -12,11 +11,9 @@ import org.springframework.web.bind.annotation.RequestParam;
 public class RegisterController {
    private final UserService userService;
    private final AccountMailService accountMailService;
-    public RegisterController(UserService userService, AccountMailService accountMailService) {
+    public RegisterController(UserService userService) {
        this.userService = userService;
        this.accountMailService = accountMailService;
    }
    @GetMapping("/register")
@@ -32,14 +29,9 @@ public class RegisterController {
                                      @RequestParam(required = false) String confirmPassword) {
        RegistrationResult result = userService.register(username, email, password, confirmPassword);
        return switch (result) {
-            case SUCCESS -> {
+            // Ein SMTP-Problem darf die Nutzung eines neu angelegten Accounts nicht blockieren.
-                try {
+            // Die E-Mail-Adresse wird weiterhin für den Passwort-Reset gespeichert.
-                    accountMailService.sendVerificationFor(userService.findByUsernameIgnoreCase(username.trim()));
+            case SUCCESS -> "redirect:/?registerSuccess";
                    yield "redirect:/?registerSuccess";
                } catch (RuntimeException e) {
                    yield "redirect:/?registerMailError";
                }
            }
            case PASSWORD_MISMATCH -> "redirect:/?passwordMismatch";
            case PASSWORD_TOO_SHORT -> "redirect:/?passwordPolicy";
            case EMAIL_INVALID -> "redirect:/?emailInvalid";
@@ -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 {
@@ -88,7 +88,9 @@ public class UserServiceImpl implements UserService {
            return RegistrationResult.EMAIL_TAKEN;
        }
        User user = new User(name, passwordEncoder.encode(password), email.trim(), "USER");
-        user.setEmailVerified(false);
+        // Die Registrierung ist bewusst nicht vom Versand oder Empfang einer E-Mail abhängig.
        // Damit bleibt der Login auch bei verzögerter bzw. abgewiesener SMTP-Zustellung möglich.
        user.setEmailVerified(true);
        try {
            userRepository.save(user);
        } catch (DataIntegrityViolationException e) {
@@ -0,0 +1,9 @@
 -- Die Anmeldung ist nicht mehr an die Zustellung einer E-Mail gebunden.
 -- Bereits registrierte, bisher noch wartende Accounts werden dadurch nutzbar.
 UPDATE users
 SET email_verified = TRUE
 WHERE email_verified = FALSE;
 -- Verifikations-Links werden nicht mehr benötigt; gespeicherte Hashes entfernen.
 DELETE FROM account_email_tokens
 WHERE purpose = 'EMAIL_VERIFICATION';
@@ -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;
@@ -6,6 +6,12 @@
@property --mf-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
 .auth-stage { width:100%; display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
 .auth-intro { width:100%; max-width:840px; padding:1.25rem 1.4rem; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--g-soft); }
 .auth-intro h1 { color:var(--heading); font-size:clamp(1.35rem,3vw,1.85rem); line-height:1.18; margin:.35rem 0 .6rem; }
 .auth-intro p { color:var(--muted); line-height:1.6; max-width:72ch; }
 .auth-intro ul { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem 1rem; list-style:none; margin-top:.9rem; padding:0; }
 .auth-intro li { color:var(--muted); font-size:.82rem; line-height:1.45; }
 .auth-intro li b { color:var(--accent); }
 /* ---- Dual-Panel-Container (Bild 2) ---- */
 .auth-container {
@@ -149,6 +155,8 @@
 /* ---- Responsiv: gestapelt, ohne Overlay ---- */
@media (max-width:760px) {
    .auth-intro { padding:1rem; }
    .auth-intro ul { grid-template-columns:1fr; gap:.45rem; }
    .auth-container { max-width:420px; min-height:auto; }
    .overlay-container { display:none; }
    .form-box {
@@ -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)}
@@ -216,6 +216,9 @@ body.tt-body {
 }
 .tt-q-cat { color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; }
 .tt-q-points { color: var(--accent); font-weight: 800; font-size: 1.3rem; }
 .tt-q-close { margin-left:.35rem; width:32px; height:32px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--muted); font:400 1.5rem/1 inherit; cursor:pointer; }
 .tt-q-close:hover { color:var(--accent); border-color:var(--border-accent); background:var(--surface-2); }
 .tt-q-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
 .tt-q-instruction { color: var(--muted); font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; }
 .tt-q-text {
@@ -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 ----------
@@ -21,6 +21,7 @@
  const qAnswers  = document.getElementById('tt-q-answers');
  const qFeedback = document.getElementById('tt-q-feedback');
  const qNext     = document.getElementById('tt-q-next');
  const qClose    = document.getElementById('tt-q-close');
  const jokerBtn  = document.getElementById('tt-fifty-fifty');
  const jokerNote = document.getElementById('tt-joker-note');
@@ -212,6 +213,12 @@
    }
  }
  function dismissQuestion() {
    if (!current || current.answered) return;
    current = null;
    qOverlay.hidden = true;
  }
  async function finishGame() {
    if (!running) return;
    running = false;
@@ -263,6 +270,7 @@
  }
  async function newGame() {
    window.scrollTo(0, 0);
    stopTimer();
    seconds = 0; score = 0; answeredCount = 0; current = null; jokerUsed = false;
    submitted.length = 0;
@@ -300,7 +308,16 @@
  finishBtn.addEventListener('click', finishGame);
  cancelBtn.addEventListener('click', cancelGame);
  qNext.addEventListener('click', closeQuestion);
  qClose.addEventListener('click', dismissQuestion);
  jokerBtn.addEventListener('click', useFiftyFifty);
  qOverlay.addEventListener('click', (event) => {
    if (event.target === qOverlay) dismissQuestion();
  });
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && !qOverlay.hidden) {
      dismissQuestion();
    }
  });
  loadStats();
  newGame();
@@ -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);
    });
  });
 })();
@@ -46,6 +46,11 @@
    .challenge .bolt { color:var(--accent); flex:0 0 auto; filter:drop-shadow(0 0 6px var(--glow-s)); }
    .challenge h5 { color:var(--accent); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:.3rem; }
    .challenge p { color:var(--muted); font-size:.78rem; line-height:1.45; }
    .platform-intro { margin-bottom:1.1rem; }
    .platform-intro h2 { color:var(--heading); font-size:1.15rem; margin:.25rem 0 .45rem; }
    .platform-intro p { color:var(--muted); line-height:1.55; font-size:.88rem; }
    .platform-intro ul { display:flex; flex-wrap:wrap; gap:.45rem .75rem; list-style:none; margin-top:.8rem; padding:0; }
    .platform-intro li { color:var(--text); font-size:.76rem; padding:.32rem .55rem; border:1px solid var(--border); border-radius:99px; background:var(--surface-2); }
  </style>
 </head>
 <body>
@@ -79,7 +84,19 @@
  </header>
  <!-- ===== Spielkarten ===== -->
-  <main class="mf-main"><div class="mf-grid" id="grid"></div></main>
+  <main class="mf-main">
    <section class="mf-panel platform-intro" aria-labelledby="platform-intro-title">
      <div class="mf-eyebrow">Dein Lernbereich</div>
      <h2 id="platform-intro-title">Was du mit SysnaptiK Neural machst</h2>
      <p>Du bereitest dich praxisnah auf AP1 und AP2 der Fachinformatiker-Ausbildung vor: Wissen kurz einordnen, in Lernspielen anwenden und deinen Fortschritt gezielt weiterentwickeln.</p>
      <ul aria-label="Lernangebote">
        <li>Interaktive IT-Szenarien</li>
        <li>Prüfungsthemen &amp; Übungen</li>
        <li>Gespeicherter Lernfortschritt</li>
      </ul>
    </section>
    <div class="mf-grid" id="grid"></div>
  </main>
  <!-- ===== Rechte Spalte ===== -->
  <aside class="mf-rightbar">
@@ -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">
@@ -4,6 +4,8 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SysnaptiK Neural – Deine Zukunft beginnt hier</title>
    <link rel="icon" type="image/png" href="/img/mindflux-emblem.png?v=2">
    <link rel="apple-touch-icon" href="/img/mindflux-emblem.png?v=2">
    <link rel="stylesheet" href="/css/theme.css?v=4">
    <script src="/js/theme.js?v=5"></script>
    <link rel="stylesheet" href="/css/auth.css">
@@ -15,6 +17,17 @@
 <div class="mf-center">
  <div class="auth-stage">
    <section class="auth-intro" aria-labelledby="auth-intro-title">
      <p class="mf-eyebrow">IT-Ausbildung · AP1 &amp; AP2</p>
      <h1 id="auth-intro-title">Lerne Fachinformatik praktisch statt nur zu lesen.</h1>
      <p>SysnaptiK Neural ist eine Lernplattform für angehende Fachinformatiker:innen. Sie verbindet kurze Erklärungen mit interaktiven Spielen, Prüfungstraining und sichtbarem Lernfortschritt.</p>
      <ul>
        <li><b>Trainieren:</b> Netzwerke, Programmierung, Security und IT-Service anwenden.</li>
        <li><b>Verstehen:</b> FinalProtocol bündelt AP1- und AP2-Themen mit Übungen.</li>
        <li><b>Dranbleiben:</b> Ein Account speichert Fortschritt, Bestwerte und Lernziele.</li>
      </ul>
    </section>
    <div class="auth-container" id="authContainer">
      <!-- ===== Sign In ===== -->
@@ -29,11 +42,9 @@
          <div th:if="${param.error}" class="mf-alert err">Benutzername oder Passwort sind falsch.</div>
          <div th:if="${param.logout}" class="mf-alert ok">Du hast dich erfolgreich abgemeldet.</div>
-          <div th:if="${param.registerSuccess}" class="mf-alert ok">Fast geschafft: Wir haben dir einen Bestätigungslink per E-Mail gesendet.</div>
+          <div th:if="${param.registerSuccess}" class="mf-alert ok">Dein Account wurde erstellt. Du kannst dich jetzt anmelden.</div>
-          <div th:if="${param.emailVerified}" class="mf-alert ok">Deine E-Mail-Adresse wurde bestätigt. Du kannst dich jetzt anmelden.</div>
+          <div th:if="${param.emailVerified}" class="mf-alert ok">Dein Account ist aktiv. Du kannst dich jetzt anmelden.</div>
          <div th:if="${param.passwordReset}" class="mf-alert ok">Dein Passwort wurde geändert. Du kannst dich jetzt anmelden.</div>
          <div th:if="${param.verificationSent}" class="mf-alert ok">Falls ein unbestätigter Account zu dieser Adresse existiert, wurde ein neuer Link versendet.</div>
          <div th:if="${param.verificationInvalid}" class="mf-alert err">Dieser Bestätigungslink ist ungültig oder abgelaufen.</div>
          <div th:if="${param.resetInvalid}" class="mf-alert err">Dieser Passwort-Link ist ungültig oder abgelaufen.</div>
          <form th:action="@{/login}" method="post">
@@ -60,7 +71,7 @@
            <span class="mark"></span>
            <b>SYSNAPTIK NEURAL</b>
            <h2>Account erstellen</h2>
-            <span class="sub">Kostenlos – und in 30 Sekunden startklar.</span>
+            <span class="sub">In 30 Sekunden startklar.</span>
          </div>
          <div th:if="${param.registerError}" class="mf-alert err">Benutzername bereits vergeben.</div>
@@ -68,9 +79,7 @@
          <div th:if="${param.passwordPolicy}" class="mf-alert err">Das Passwort muss mindestens 8 Zeichen lang sein.</div>
          <div th:if="${param.emailInvalid}" class="mf-alert err">Bitte gib eine gültige E-Mail-Adresse an.</div>
          <div th:if="${param.emailTaken}" class="mf-alert err">Diese E-Mail-Adresse wird bereits verwendet.</div>
-          <div th:if="${param.registerMailError}" class="mf-alert err">Der Account wurde angelegt, aber die Bestätigungs-E-Mail konnte nicht gesendet werden. Fordere unten einen neuen Link an.</div>
+          <div th:if="${param.registerSuccess}" class="mf-alert ok">Account erstellt. Du kannst dich sofort anmelden.</div>
          <div th:if="${param.registerSuccess}" class="mf-alert ok">Fast geschafft: Wir haben dir einen Bestätigungslink per E-Mail gesendet.</div>
          <div th:if="${param.verificationSent}" class="mf-alert ok">Falls ein unbestätigter Account zu dieser Adresse existiert, wurde ein neuer Link versendet.</div>
          <form th:action="@{/register}" method="post">
            <div class="mf-field">
@@ -93,20 +102,6 @@
            <button class="neon-btn" type="submit">Account erstellen</button>
          </form>
          <div class="auth-resend">
            <button id="resend-toggle" class="auth-resend-toggle" type="button"
                    aria-expanded="false" aria-controls="resend-form">
              Bestätigungslink erneut senden
            </button>
            <form id="resend-form" th:action="@{/verification/resend}" method="post" hidden>
              <label class="mf-label" for="resend-email">E-Mail-Adresse</label>
              <div class="auth-resend-fields">
                <input id="resend-email" class="mf-input" type="email" name="email" placeholder="E-Mail-Adresse" required autocomplete="email">
                <button class="mf-btn outline" type="submit">Link senden</button>
              </div>
            </form>
          </div>
          <p class="mobile-switch">Schon dabei? <a data-goto="login">Zum Login</a></p>
        </div>
      </div>
@@ -125,7 +120,7 @@
          <div class="overlay-panel overlay-right">
            <span class="o-emblem"></span>
            <h3>Neu bei SysnaptiK Neural?</h3>
-            <p>Erstelle deinen kostenlosen Account und schalte die volle Lernplattform frei.</p>
+            <p>Erstelle deinen Account und schalte die volle Lernplattform frei.</p>
            <button type="button" class="ghost-btn" id="toSignup">Account erstellen</button>
          </div>
        </div>
@@ -146,17 +141,6 @@
    if (toSignup) toSignup.addEventListener('click', function () { c.classList.add('active'); });
    if (toLogin)  toLogin.addEventListener('click',  function () { c.classList.remove('active'); });
    var resendToggle = document.getElementById('resend-toggle');
    var resendForm = document.getElementById('resend-form');
    if (resendToggle && resendForm) {
      resendToggle.addEventListener('click', function () {
        var expand = resendForm.hidden;
        resendForm.hidden = !expand;
        resendToggle.setAttribute('aria-expanded', String(expand));
        if (expand) resendForm.querySelector('input').focus();
      });
    }
    document.querySelectorAll('[data-goto="signup"]').forEach(function (el) {
      el.addEventListener('click', function (e) { e.preventDefault(); c.classList.add('active'); });
    });
@@ -166,7 +150,7 @@
    // Bei Registrierungs-/Passwortfehler direkt das Signup-Panel öffnen
    var qp = new URLSearchParams(window.location.search);
-    if (qp.has('signup') || qp.has('registerError') || qp.has('passwordMismatch') || qp.has('passwordPolicy') || qp.has('emailInvalid') || qp.has('emailTaken') || qp.has('registerMailError') || qp.has('registerSuccess') || qp.has('verificationSent')) {
+    if (qp.has('signup') || qp.has('registerError') || qp.has('passwordMismatch') || qp.has('passwordPolicy') || qp.has('emailInvalid') || qp.has('emailTaken') || qp.has('registerSuccess')) {
      c.classList.add('active');
    }
@@ -63,7 +63,7 @@
    <tr><td>Nutzungs-/Lerndaten</td><td>Spielstände (Spiel, Deck, Punktzahl, Züge, Dauer, Zeitpunkt) sowie erreichte Erfolge/Achievements</td></tr>
    <tr><td>Technische Daten</td><td>Sitzungs-Cookie zur Anmeldung, CSRF-Token; serverseitige Protokolldaten (z. B. IP-Adresse, Zeitpunkt, abgerufene Ressource) im Rahmen des technischen Betriebs</td></tr>
    <tr><td>NeuralNet-Nachrichten (nur bei Aktivierung)</td><td>Verbindungsanfragen (anfragende und empfangende Person, Status, Zeitpunkt) sowie Nachrichten (Absender, Empfänger, Nachrichteninhalt, Sende- und Lesezeitpunkt/Lesebestätigung)</td></tr>
-    <tr><td>E-Mail-Bestätigung / Passwort-Reset</td><td>Bestätigungs- bzw. Reset-Token, ausschließlich als SHA-256-Hash gespeichert und 24 Stunden gültig, zur Verifizierung der E-Mail-Adresse bzw. zum Zurücksetzen des Passworts</td></tr>
+    <tr><td>Passwort-Reset</td><td>Reset-Token, ausschließlich als SHA-256-Hash gespeichert und 24 Stunden gültig, zum Zurücksetzen des Passworts</td></tr>
    <tr><td>Anmeldeschutz</td><td>Fehlgeschlagene Anmeldeversuche (Benutzername, Zeitpunkt) zum Schutz vor automatisierten Anmeldeangriffen (Brute Force)</td></tr>
  </table>
@@ -73,7 +73,7 @@
    <li><strong>Technischer Betrieb, Sicherheit und Stabilität</strong> (Protokolldaten, Schutz vor Missbrauch) – Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse).</li>
    <li><strong>Profilbild</strong> – auf Grundlage der freiwilligen Bereitstellung durch die Nutzer:in.</li>
    <li><strong>NeuralNet-Community-Funktion</strong> (Verbindungsanfragen und Nachrichten) – nur nach ausdrücklicher Aktivierung (Opt-in, standardmäßig deaktiviert), Art. 6 Abs. 1 lit. a und b DSGVO. Die Funktion lässt sich jederzeit deaktivieren; beim Deaktivieren bzw. beim Löschen des Kontos werden die zugehörigen Nachrichten und Verbindungen per Datenbank-Kaskade mitgelöscht.</li>
-    <li><strong>E-Mail-Verifizierung und Passwort-Zurücksetzung</strong> (Versand von Bestätigungs- und Reset-Links) – Art. 6 Abs. 1 lit. b und f DSGVO.</li>
+    <li><strong>Passwort-Zurücksetzung</strong> (Versand von Reset-Links) – Art. 6 Abs. 1 lit. b und f DSGVO.</li>
  </ul>
  <h2>5. Cookies</h2>
@@ -88,7 +88,7 @@
  <ul>
    <li><strong>Kontodaten, Spielstände, Erfolge:</strong> solange das Nutzerkonto besteht; werden bei Kontolöschung entfernt.</li>
    <li><strong>NeuralNet-Nachrichten und -Verbindungen:</strong> bis zur Löschung durch die Nutzer:in bzw. bis zur Kontolöschung (dann per Kaskade automatisch).</li>
-    <li><strong>Bestätigungs- und Passwort-Reset-Token:</strong> 24 Stunden; danach automatisch ungültig und nicht mehr verwendbar.</li>
+    <li><strong>Passwort-Reset-Token:</strong> 24 Stunden; danach automatisch ungültig und nicht mehr verwendbar.</li>
    <li><strong>Fehlgeschlagene Anmeldeversuche:</strong> nur kurzfristig für den Brute-Force-Schutz, anschließend verworfen.</li>
    <li><strong>Sitzungs-Cookie:</strong> verliert mit Ende der Sitzung bzw. der Abmeldung seine Gültigkeit.</li>
  </ul>
@@ -112,7 +112,7 @@
  <h2>7. Empfänger und Hosting</h2>
  <p>
    Die Daten werden auf einer vom Anbieter betriebenen Server-Infrastruktur verarbeitet und nicht zu
-    werblichen Zwecken an Dritte weitergegeben. Für den Versand von Bestätigungs- und Passwort-Reset-E-Mails
+    werblichen Zwecken an Dritte weitergegeben. Für den Versand von Passwort-Reset-E-Mails
    wird der Mailserver <code>mail.sysnaptik.de</code> genutzt; dabei werden E-Mail-Adresse und der jeweilige
    Link übermittelt. Alle statischen Inhalte (einschließlich der Diagramm-Bibliothek) werden ausschließlich
    von der eigenen Infrastruktur ausgeliefert – es werden keine externen Content-Delivery-Networks oder
@@ -47,6 +47,7 @@
      <div class="tt-q-head">
        <span id="tt-q-cat" class="tt-q-cat">Kategorie</span>
        <span id="tt-q-points" class="tt-q-points">100</span>
        <button type="button" id="tt-q-close" class="tt-q-close" aria-label="Frage ohne Antwort schließen" title="Frage ohne Antwort schließen">×</button>
      </div>
      <p class="tt-q-instruction">Antwort – finde die passende Frage:</p>
      <h2 id="tt-q-text" class="tt-q-text"></h2>
@@ -76,7 +77,7 @@
    </div>
  </div>
-  <script src="/js/techtacular.js?v=4" defer></script>
+  <script src="/js/techtacular.js?v=5" defer></script>
  <footer th:replace="~{fragments/layout :: footer}"></footer>
 </body>
 </html>
@@ -3,6 +3,7 @@ package com.example.mindflux;
 import com.example.mindflux.config.SecurityConfig;
 import com.example.mindflux.controller.AdminUserController;
 import com.example.mindflux.controller.DashboardController;
 import com.example.mindflux.controller.FaviconController;
 import com.example.mindflux.controller.ProgressController;
 import com.example.mindflux.controller.PlatformStatusController;
 import com.example.mindflux.dto.ProgressData;
@@ -28,9 +29,10 @@ import static org.springframework.security.test.web.servlet.request.SecurityMock
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
 import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.post;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
 import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
 /** Absichert die zentralen Security-Regeln: Login-Zwang, Admin-Schutz, gelöschter Legacy-Endpunkt. */
-@WebMvcTest(controllers = {DashboardController.class, ProgressController.class, PlatformStatusController.class, AdminUserController.class})
+@WebMvcTest(controllers = {DashboardController.class, ProgressController.class, PlatformStatusController.class, AdminUserController.class, FaviconController.class})
@Import(SecurityConfig.class)
 class SecurityRulesTest {
@@ -58,6 +60,13 @@ class SecurityRulesTest {
                .andExpect(status().is3xxRedirection());
    }
    @Test
    void faviconIstOhneAnmeldungErreichbar() throws Exception {
        mockMvc.perform(get("/favicon.ico"))
                .andExpect(status().isOk())
                .andExpect(content().contentType("image/png"));
    }
    @Test
    @WithMockUser(username = "alice")
    void eingeloggteNutzerSehenDasDashboard() throws Exception {
@@ -74,6 +74,7 @@ class UserServiceImplTest {
        assertEquals("alice", saved.getUsername());
        assertEquals("a@b.de", saved.getEmail());
        assertEquals("USER", saved.getRole());
        assertTrue(saved.isEmailVerified());
        assertTrue(encoder.matches("passwort123", saved.getPassword()));
    }
Author	SHA1	Message	Date
sysnaptik-main	063cbf944f	CI: dangling images und alten build cache aufraeumen	2026-08-04 09:03:57 +00:00
AliceDarkest	0e66aff47d	Allow immediate login after registration mindflux-ci / build (push) Successful in 34s Details	2026-07-24 15:32:01 +02:00
AliceDarkest	6a7e90116a	Link favicon explicitly on landing page mindflux-ci / build (push) Successful in 35s Details	2026-07-22 14:23:21 +02:00
AliceDarkest	4a9d1f4ada	Add Neural browser favicon mindflux-ci / build (push) Successful in 34s Details	2026-07-22 14:18:57 +02:00
AliceDarkest	dbed1ad79f	Formulate public pricing neutrally mindflux-ci / build (push) Successful in 34s Details	2026-07-22 14:14:11 +02:00
AliceDarkest	69b15aa4df	Remove temporary Klaus account inspection mindflux-ci / build (push) Successful in 20s Details	2026-07-22 14:11:41 +02:00
AliceDarkest	0b3e5d39cf	Fix temporary account inspection workflow mindflux-ci / build (push) Successful in 15s Details	2026-07-22 14:09:36 +02:00
AliceDarkest	1c46eb2421	Temporary: inspect Klaus account	2026-07-22 14:08:18 +02:00
AliceDarkest	955bdb7057	Verbessere Einstieg und TechTacular-Fragen mindflux-ci / build (push) Successful in 34s Details	2026-07-22 13:44:45 +02:00
AliceDarkest	3bc6c8f75c	Refine Light Mode, UX und Mail-Diagnose mindflux-ci / build (push) Successful in 36s Details	2026-07-22 13:04:25 +02:00
AliceDarkest	9ebdb7ed3e	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-21 00:58:11 +02:00
`@@ -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)}`