Merge: Syntax Saga – neues Spiel + 34 Seed-Missionen

Reviewed-on: #6

STYLEGUIDE.md

@@ -1,173 +0,0 @@
-# Mindflux – Style Guide
-
-Verbindliche Design-Referenz für **Mindflux**. **Single Source of Truth ist
-`src/main/resources/static/css/theme.css`** – diese Datei dokumentiert nur, was dort definiert
-ist. Bei Änderungen immer zuerst `theme.css` anpassen und diese Datei nachziehen.
-
-> **Grundregel:** Niemals Hex-/RGBA-Werte hart in Templates oder Spiele-CSS schreiben. **Immer**
-> die Tokens (`var(--accent)`, `var(--surface)` …) verwenden, damit Dark/Light und künftige
-> Palettenwechsel automatisch greifen.
-
-Theme-Umschaltung: über das Attribut `<html data-theme="dark|light">` (gesetzt/persistiert von
-`theme.js`; injiziert auch den mobilen Off-Canvas-Drawer). **Dark ist Default.**
-
----
-
-## Farbkonzept – „Back to the Future"
-
-- **Primärakzent = Feuer-Amber** (Dark `#f0a81a` / Light `#d65116`) + **Gelb-Glow** (`--accent-2`)
-  für Verläufe und Leuchten.
-- **Zweitakzent = Flux-Blau** (`#2d9cce`) – für **Links** und das Spiel-Feedback **„richtig"**.
-- **Warmer Bernstein-Glow** statt Matrix-Grün; dunkler bzw. sehr heller Grund je Theme.
-- **Kein Grün** im Erfolgs-Feedback: **richtig = Blau ✓**, **falsch = Rot ✗** (Rot ist ein kühles
-  Crimson, damit es sich klar vom orangen Akzent abhebt – v. a. im Light-Mode).
-
----
-
-## Token-Referenz (aus `theme.css`)
-
-| Token | Dark | Light | Verwendung |
-|---|---|---|---|
-| `--bg` | `#0a0806` | `#fbf6ec` | Seitenhintergrund (unter `--bg-glow`) |
-| `--bg-glow` | radial `rgba(240,168,26,.10)` | radial `rgba(214,81,22,.10)` | weicher Lichtschein oben |
-| `--panel` | `#13100b` | `#ffffff` | Sidebar, Topbar, Footer |
-| `--panel-2` | `#171209` | `#fdf7ea` | Panel-Variante |
-| `--surface` | `#120f0a` | `#ffffff` | Karten / Panels / Eingaben (Grundfläche) |
-| `--surface-2` | `#1b1610` | `#fbf4e6` | erhöhte Fläche, Hover, Felder |
-| `--border` | `#2a2117` | `#ece1cf` | Standard-Rahmen |
-| `--line` | `#221b12` | `#f1e8d8` | feine Linien, Scrollbar, Chart-Achsen |
-| `--border-accent` | `rgba(240,168,26,.45)` | `rgba(214,81,22,.40)` | akzentuierte Rahmen |
-| `--accent` | `#f0a81a` | `#d65116` | **Primärakzent**: Buttons, aktive Nav, Icons, Headline-Akzent |
-| `--accent-2` | `#f7dc11` | `#e4801d` | Sekundär-Akzent für Verläufe (Gelb-Glow) |
-| `--accent-ink` | `#1c1100` | `#ffffff` | Textfarbe **auf** Akzentflächen |
-| `--secondary` | `#2d9cce` | `#1f86b8` | **Flux-Blau**: Links + „richtig" |
-| `--secondary-2` | `#5cc4e8` | `#2d9cce` | helleres Blau (Hover/Variante) |
-| `--text` | `#ece3d2` | `#33271c` | Fließtext |
-| `--muted` | `#8c8170` | `#8a7d6c` | gedämpfter Text, Labels, Captions |
-| `--heading` | `#ffffff` | `#241a12` | Überschriften |
-| `--success` | `#2d9cce` | `#1f86b8` | **„richtig"** (= Flux-Blau, bewusst kein Grün) |
-| `--danger` | `#ff4d6d` | `#be123c` | **„falsch"** / Fehler / Löschen (kühles Crimson) |
-| `--glow-s` | `rgba(240,168,26,.55)` | `rgba(214,81,22,.40)` | **starker** Glow (Text-/Drop-Shadow auf Akzent) |
-| `--glow-w` | `rgba(240,168,26,.16)` | `rgba(214,81,22,.12)` | **weicher** Ambient-Glow |
-| `--g-soft` | `0 0 18px var(--glow-w)` | `0 6px 18px var(--glow-w)` | Standard-Panel-Schatten |
-
-### Semantik kurz
-- **Akzent (Amber/Orange):** alles Primäre/Interaktive. Text auf Akzent immer `--accent-ink`.
-- **`--accent` + `--accent-2`** zusammen ergeben die typischen Verläufe (`linear-gradient(…,var(--accent),var(--accent-2))`).
-- **Blau (`--secondary` / `--success`):** Links und Erfolg.
-- **Rot (`--danger`):** Fehler, Löschen-Buttons, „falsch".
-
----
-
-## Spiele-Feedback (verbindlich)
-
-In allen Spielen (FinalFlux, MindMatch, TechTacular, Syntax Saga) gilt einheitlich:
-
-- **richtig** → `var(--success)` (Blau) + Häkchen `✓`
-- **falsch** → `var(--danger)` (Rot) + Kreuz `✗`
-- aufgelöst/neutral (Syntax Saga) → `var(--secondary)`
-
-Muster (siehe z. B. `syntaxsaga.css` / `techtacular.css`):
-```css
-.x-feedback.correct { color: var(--success); }
-.x-feedback.correct::before { content: "\2713  "; }
-.x-feedback.wrong   { color: var(--danger); }
-.x-feedback.wrong::before   { content: "\2717  "; }
-```
-
----
-
-## Typografie
-
-- **UI/Fließtext:** `"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif`
-- **Code/Monospace:** `"JetBrains Mono","Fira Code","Consolas","Courier New",monospace`
-- **Überschriften:** `font-weight:800`, Farbe `--heading`.
-- **Eyebrow/Labels (`.mf-eyebrow`, Panel-`h4`):** `--accent`, `text-transform:uppercase`,
-  `letter-spacing:.08–.12em`, kleine Schrift.
-
----
-
-## Glow, Schatten & Radien
-
-- **Glow stark** `--glow-s`: `text-shadow`/`drop-shadow` auf leuchtenden Akzentelementen.
-- **Glow weich** `--glow-w`: dezenter Schein um Panels/Buttons.
-- **Panel-Schatten:** `box-shadow: var(--g-soft)`.
-- **Radien (Konvention):** Badges/Buttons ~`7–9px`, Inputs/Icon-Buttons `10px`, Nav `11px`,
-  Panels `13–14px`, Standalone-Karten `16–18px`, Pills/Bars `99px`.
-- **Spielkarten** (`.mf-card`) haben eine **abgeschrägte Ecke** via `clip-path` (`--n:18px`) statt
-  rundem Radius – ein bewusstes „HUD"-Detail.
-
----
-
-## Layout-Shell & Responsivität
-
-App-Seiten nutzen das Grid `.mf-shell` (definiert in `theme.css`):
-
-```
-┌── Sidebar 264px ──┬─────── Topbar (Spalte 2–3) ───────┐
-│                   ├──── Main 1fr ────┬─ Rightbar 332px ┤
-└───────────────────┴──────────────────┴─────────────────┘
-```
-- `.mf-shell.no-right` → nur `264px | 1fr` (ohne rechte Spalte).
-- **Breakpoints:** `≤1180px` rechte Spalte aus, 2-spaltig · `≤820px` Shell stapelt, Sidebar wird
-  zum **Off-Canvas-Drawer** (Hamburger + Backdrop, via `theme.js`) · `≤560px` Spielkarten-Grid 1-spaltig.
-- Spielseiten (MindMatch/TechTacular/Syntax Saga) haben eigene, schlankere Shells, nutzen aber
-  dieselben Tokens und sind ebenfalls mobil-tauglich.
-
----
-
-## Komponenten-Cheatsheet (`.mf-*` aus `theme.css`)
-
-| Klasse | Zweck |
-|---|---|
-| `.mf-btn` | Primär-Button (Akzent). Varianten: `.outline`, `.ghost`, `.danger` |
-| `.mf-panel` | Karte/Box; `.accent` = akzentuierter Rahmen + Glow |
-| `.mf-card` / `.mf-grid` | HUD-Spielkarte (abgeschrägte Ecke) im 3er-Grid |
-| `.mf-input`, `.mf-select`, `textarea.mf-input` | Formularfelder (Fokus = Akzentrahmen + Glow) |
-| `.mf-field`, `.mf-label` | Formular-Zeile + Label |
-| `.mf-table` | Tabellen (Kopf in Akzent, mobil horizontal scrollbar) |
-| `.mf-badge` | kleines Status-Label |
-| `.mf-eyebrow` | Kicker/Overline über Headlines |
-| `.mf-nav` / `.mf-sidebar` | linke Navigation (aktiv = Akzent-Verlauf) |
-| `.mf-bar` + `> i` | Fortschrittsbalken |
-| `.mf-center` / `.mf-cardbox` | zentrierte Standalone-Karte (Login/Rechtsseiten) |
-| `.mf-container`, `.mf-page-head`, `.mf-back` | einfache Inhaltsseiten + Zurück-Link |
-| `.mf-footer` | globale Fußzeile |
-| `.mf-theme` / `.mf-theme-float` | Dark/Light-Umschalter (Logik in `theme.js`) |
-
----
-
-## Pro-Spiel-CSS
-
-Jedes Spiel hat eine eigene CSS-Datei mit eigenem **Klassen-Prefix**, die **ausschließlich
-Theme-Tokens** verwendet (keine eigenen Farbwerte):
-
-| Spiel | Datei | Prefix |
-|---|---|---|
-| MindMatch | `mindmatch.css` | `mm-` |
-| TechTacular | `techtacular.css` | `tt-` |
-| Syntax Saga | `syntaxsaga.css` | `ss-` |
-| FinalFlux | `finalflux.css` | `finalflux-` |
-
-Neues Spiel → neue `<spiel>.css` mit eigenem Prefix anlegen, **nur** `var(--…)`-Tokens nutzen,
-Feedback-Konvention (Blau/Rot) einhalten.
-
----
-
-## Do / Don't
-
-**Do**
-- Farben/Schatten/Glow ausschließlich über Tokens.
-- 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`,
-  `settings.css`, `soziales.css` (ungenutzt) sowie alte Schrift-Deklarationen
-  (`'Segoe UI'`/`'Poppins'`) entsprechen **nicht** dem aktuellen System. Maßgeblich ist `theme.css`.
-
----
-
-*Stand: 2026-06-30 · Quelle: `src/main/resources/static/css/theme.css` (BTTF-Palette, Dark/Light).*