Add distinct themes to existing games

CHANGELOG.md

@@ -6,6 +6,17 @@ Versionierung [semantisch](https://semver.org/lang/de/).
 
 ## [Unreleased] – 2026-07-13 · BugHunter, NetWorker & echter Lernfortschritt
 
+### Eigenständige Spielwelten
+- **Bestandsspiele gestalterisch getrennt:** MindMatch erhielt ein Violett-/Mint-
+  „Neural Archive“, TechTacular eine Magenta-/Blaue Cyber-Quizshow, SyntaxSaga ein
+  phosphoriges Terminal und FinalFlux eine ruhige Gold-/Indigo-Prüfungszentrale.
+- **DevLab als Werkstatt:** Petrol/Orange, Schaltkreisraster und Build-Pipeline-Akzente
+  schärfen die Oberfläche nach. Die schwebende Kolben-/dlFloat-Animation bleibt
+  unverändert erhalten.
+- **Zugänglichkeit bleibt stimmig:** Das Accessibility-Widget erkennt und verwendet nun
+  auch für diese fünf Lernwelten automatisch deren lokalen Akzent; Statusfarben und
+  Spielmechaniken bleiben unverändert.
+
 ### ServiceClash
 - **Auswertung repariert:** Nach dem letzten Ticket wurde die Abschlussansicht nicht
   geöffnet, weil der Renderer noch auf ein nicht vorhandenes Folgeticket zugriff. Die

mindfluxfuture.md

@@ -45,7 +45,7 @@ Begründung Keys: Die vorhandenen Routen sind alle klein und zusammengeschrieben
 
 ---
 
-## Visuelle Identität: vier Spiele, vier Welten
+## Visuelle Identität: neun Lernwelten
 
 > ◐ **Stand 2026-07-13:** Die Dark-/Light-Akzent-Tokens für alle vier Spiele sind in
 > `theme.css` angelegt. SystemEscape, BugHunter und NetWorker haben eigene Spiel-Layouts;
@@ -68,6 +68,32 @@ Vorgabe: Die Spiele sollen **grafisch stark ausgeprägt** sein und sich **sehr d
 
 Dazu je Spiel ein eigenes Karten-Design auf dem Dashboard (Hover-Animation im jeweiligen Spiel-Akzent), damit die Unterscheidbarkeit schon in der Übersicht beginnt. Die Interaktionsformen sind ohnehin grundverschieden: Modal-Rätsel + Keypad (SystemEscape), klickbarer Code-Viewer (BugHunter), Echtzeit-Queue (ServiceClash), frei bespielbare SVG-Canvas (NetWorker).
 
+### Eigenständige Skins für die Bestandsmodule ✅ umgesetzt
+
+Die gemeinsame Mindflux-Grundlage bleibt erhalten: Typografie, Fokuszustände, Buttons,
+Fehler-/Erfolgsfarben und das Accessibility-Widget werden nicht pro Spiel neu erfunden.
+Jede Lernwelt erhält aber eigene Akzent-Tokens, Hintergrundstruktur und eine passende
+Oberflächenmetapher – im Dark- wie im Light-Theme.
+
+| Modul | Skin | Akzent & Metapher | Umsetzungshinweis |
+|---|---|---|---|
+| **MindMatch** | Neural Archive | Violett/Mint, Synapsenlinien und schwebende Gedächtniskarten | Paare bleiben klar lesbar; Verbindungen sind dekorativ, nicht alleiniger Status. |
+| **TechTacular** | Cyber-Quizshow | Magenta/Blau, LED-Raster und Punktetafel | Das Jeopardy-Board wird zur Show-Bühne, ohne die Kachelkontraste zu verlieren. |
+| **DevLab** | Werkstatt & Build-Pipeline | Petrol/Orange, Werkbank- und Schaltkreisstruktur | **Der schwebende Kolben samt \`dlFloat\`-Animation bleibt unverändert erhalten.** Nur Farben, Umgebung und Panels werden nachgeschärft. |
+| **SyntaxSaga** | Textadventure-Terminal | Phosphorgrün/Bernstein, dezente CRT-Scanlines und Log-Charakter | Grün dient ausschließlich der Atmosphäre; richtig bleibt Plattform-Blau, falsch bleibt Rot. |
+| **FinalFlux** | Prüfungszentrale | Gold/Indigo, ruhige Sternkarten-/Konstellationsstruktur | Bewusst weniger spielig: die Lernzentrale verbindet alle Welten und priorisiert Lesbarkeit. |
+
+**Technische Leitplanken:** zentrale Token in \`theme.css\`, lokale Überschreibung nur am
+jeweiligen Seiten-Root (\`mm-\`, \`tt-\`, \`dl-\`/\`dlg-\`, \`ss-\`, \`finalflux-\`), keine
+Änderung der Spielmechanik; Cache-Busting bei jeder CSS-Auslieferung. Das
+Accessibility-Widget soll anschließend jeweils den lokalen Akzent übernehmen.
+
+> ✅ **Stand 2026-07-13:** Die fünf Skins sind als lokale Token-Überschreibungen mit
+> Cache-Busting umgesetzt. MindMatch, TechTacular, DevLab samt Aufgabenraum, SyntaxSaga
+> und FinalFlux haben jeweils eigene Hintergründe und Akzente; das Accessibility-Widget
+> übernimmt die neue Farbe. Die bestehende Kolben-/dlFloat-Animation in DevLab blieb
+> unverändert.
+
 ---
 
 ## Das gemeinsame Architektur-Rezept (gilt für alle 4 Spiele)

src/main/resources/static/css/accessibility-placement.css

@@ -5,6 +5,11 @@ body{padding-left:0!important;padding-bottom:0!important}
 .mf-a11y-utility{position:sticky;top:0;z-index:1700;min-height:60px;display:flex;align-items:center;justify-content:flex-end;padding:.5rem 1rem;background:var(--panel);border-bottom:1px solid var(--border)}
 .mf-theme-float{display:flex;align-items:center;gap:.55rem}
 body.mf-a11y-skin-codeescape{--mf-a11y-accent:var(--esc-accent);--mf-a11y-glow:var(--esc-glow);--mf-a11y-ink:#1c1100}
+body.mf-a11y-skin-mindmatch{--mf-a11y-accent:var(--mm-accent);--mf-a11y-glow:var(--mm-glow);--mf-a11y-ink:#180d2b}
+body.mf-a11y-skin-techtacular{--mf-a11y-accent:var(--tt-accent);--mf-a11y-glow:var(--tt-glow);--mf-a11y-ink:#270718}
+body.mf-a11y-skin-devlab{--mf-a11y-accent:var(--dl-accent);--mf-a11y-glow:var(--dl-glow);--mf-a11y-ink:#221004}
+body.mf-a11y-skin-syntaxsaga{--mf-a11y-accent:var(--ss-accent);--mf-a11y-glow:var(--ss-glow);--mf-a11y-ink:#07170d}
+body.mf-a11y-skin-finalflux{--mf-a11y-accent:var(--ff-accent);--mf-a11y-glow:var(--ff-glow);--mf-a11y-ink:#211708}
 body.mf-a11y-skin-bughunter{--mf-a11y-accent:var(--bh-accent);--mf-a11y-glow:var(--bh-glow);--mf-a11y-ink:#210c12}
 body.mf-a11y-skin-networker{--mf-a11y-accent:var(--nw-accent);--mf-a11y-glow:var(--nw-glow);--mf-a11y-ink:#061321}
 body.mf-a11y-skin-serviceclash{--mf-a11y-accent:var(--sc-accent);--mf-a11y-glow:var(--sc-glow);--mf-a11y-ink:#06171c}

src/main/resources/static/css/devlab.css

@@ -385,3 +385,7 @@ body.dl-body {
     align-items: flex-start;
   }
 }
+
+/* Werkstatt & Build-Pipeline: die Kolben- und dlFloat-Animation darüber bleibt unverändert. */
+body.dl-body { --accent:var(--dl-accent); --accent-2:var(--dl-secondary); --glow-s:var(--dl-glow); --glow-w:color-mix(in srgb,var(--dl-accent) 15%,transparent); background:radial-gradient(circle at 78% 4%,color-mix(in srgb,var(--dl-secondary) 16%,transparent),transparent 35%),var(--bg); }
+.dl-hero { background:linear-gradient(135deg,color-mix(in srgb,var(--dl-secondary) 9%,var(--surface)),var(--surface)); border-color:color-mix(in srgb,var(--dl-accent) 55%,var(--border)); }.dl-hero::before { opacity:.34; background:linear-gradient(90deg,transparent 0 31px,color-mix(in srgb,var(--dl-secondary) 35%,transparent) 32px,transparent 33px),linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--dl-secondary) 35%,transparent) 32px,transparent 33px); background-size:34px 34px; }.dl-station.active { background:linear-gradient(145deg,color-mix(in srgb,var(--dl-accent) 13%,var(--surface-2)),var(--surface-2)); }

src/main/resources/static/css/devlabgame.css

@@ -118,3 +118,7 @@ body.dlg-body { min-height: 100vh; display: flex; flex-direction: column; color:
   .dlg-stat { font-size: 0.62rem; padding: 0.3rem 0.5rem; }
   .dlg-code, .dlg-code code { font-size: 0.82rem; }
 }
+
+/* Dieselbe Werkstatt-Palette im eigentlichen Aufgabenraum. */
+body.dlg-body { --accent:var(--dl-accent); --accent-2:var(--dl-secondary); --glow-s:var(--dl-glow); --glow-w:color-mix(in srgb,var(--dl-accent) 15%,transparent); background:radial-gradient(circle at 86% 2%,color-mix(in srgb,var(--dl-secondary) 15%,transparent),transparent 34%),var(--bg); }
+.dlg-header,.dlg-card { border-color:color-mix(in srgb,var(--dl-accent) 55%,var(--border)); }.dlg-code { border-color:color-mix(in srgb,var(--dl-secondary) 45%,var(--border)); }

src/main/resources/static/css/finalflux.css

@@ -340,3 +340,7 @@ body.finalflux-page {
     padding: 1rem;
   }
 }
+
+/* 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); }

src/main/resources/static/css/mindmatch.css

@@ -359,3 +359,8 @@ body.mm-body {
   .mm-board { height: auto; grid-auto-rows: auto; }
   .mm-card { aspect-ratio: 3 / 4; }
 }
+
+/* Neural Archive: eigene Spielwelt, Statusfarben bleiben die globalen Tokens. */
+body.mm-body { --accent:var(--mm-accent); --accent-2:var(--mm-secondary); --glow-s:var(--mm-glow); --glow-w:color-mix(in srgb,var(--mm-accent) 16%,transparent); background:radial-gradient(circle at 16% 8%,color-mix(in srgb,var(--mm-accent) 18%,transparent),transparent 31%),radial-gradient(circle at 83% 86%,color-mix(in srgb,var(--mm-secondary) 12%,transparent),transparent 30%),var(--bg); }
+body.mm-body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background:radial-gradient(circle at 12% 28%,var(--mm-secondary) 0 1px,transparent 2px),radial-gradient(circle at 77% 18%,var(--mm-accent) 0 1px,transparent 2px),repeating-linear-gradient(32deg,transparent 0 58px,color-mix(in srgb,var(--mm-accent) 14%,transparent) 59px 60px,transparent 61px 118px); }
+.mm-shell { position:relative; z-index:1; }.mm-card-front { background:linear-gradient(145deg,color-mix(in srgb,var(--mm-accent) 23%,var(--surface-2)),var(--surface)); border-color:color-mix(in srgb,var(--mm-accent) 62%,var(--border)); }.mm-card-front::after { color:var(--mm-secondary); }.mm-card-back.mm-term { border-color:color-mix(in srgb,var(--mm-secondary) 60%,var(--border)); }

src/main/resources/static/css/syntaxsaga.css

@@ -245,3 +245,7 @@ body.ss-body {
   .ss-mission-title { font-size: 1.2rem; }
   .ss-code code { font-size: 0.85rem; }
 }
+
+/* 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); }

src/main/resources/static/css/techtacular.css

@@ -275,3 +275,7 @@ body.tt-body {
   .tt-board { height: auto; }
   .tt-tile { flex: 0 0 auto; min-height: clamp(58px, 12vw, 86px); }
 }
+
+/* Cyber-Quizshow: LED-Bühne statt generischer Spieloberfläche. */
+body.tt-body { --accent:var(--tt-accent); --accent-2:var(--tt-secondary); --glow-s:var(--tt-glow); --glow-w:color-mix(in srgb,var(--tt-accent) 16%,transparent); background:radial-gradient(circle at 50% -15%,color-mix(in srgb,var(--tt-accent) 22%,transparent),transparent 42%),repeating-linear-gradient(90deg,color-mix(in srgb,var(--tt-secondary) 11%,transparent) 0 1px,transparent 1px 22px),var(--bg); }
+.tt-board { border-color:color-mix(in srgb,var(--tt-secondary) 55%,var(--border)); box-shadow:0 0 28px color-mix(in srgb,var(--tt-accent) 18%,transparent); }.tt-cat-title { color:var(--tt-secondary); text-shadow:0 0 9px color-mix(in srgb,var(--tt-secondary) 52%,transparent); }.tt-tile { background:linear-gradient(145deg,color-mix(in srgb,var(--tt-accent) 10%,var(--surface)),var(--surface-2)); }

src/main/resources/static/css/theme.css

@@ -18,6 +18,11 @@
   --bh-accent:#d94b64; --bh-glow:rgba(217,75,100,.42);
   --sc-accent:#38b9d6; --sc-glow:rgba(56,185,214,.40);
   --nw-accent:#4f8ff7; --nw-glow:rgba(79,143,247,.42);
+  --mm-accent:#a979f7; --mm-secondary:#59d6b5; --mm-glow:rgba(169,121,247,.38);
+  --tt-accent:#eb5dac; --tt-secondary:#668cff; --tt-glow:rgba(235,93,172,.38);
+  --dl-accent:#e78b39; --dl-secondary:#38bbb8; --dl-glow:rgba(231,139,57,.36);
+  --ss-accent:#81d695; --ss-secondary:#e7ad54; --ss-glow:rgba(129,214,149,.32);
+  --ff-accent:#d9ad54; --ff-secondary:#7d8ee9; --ff-glow:rgba(217,173,84,.30);
   --fluxtimer-primary:#ff5a5f; --fluxtimer-secondary:#f0a81a;
   --fluxtimer-display:#170704; --fluxtimer-segment:#ff765f;
   --glow-s:rgba(240,168,26,.55); --glow-w:rgba(240,168,26,.16);
@@ -35,6 +40,11 @@
   --bh-accent:#b42342; --bh-glow:rgba(180,35,66,.26);
   --sc-accent:#147f9e; --sc-glow:rgba(20,127,158,.26);
   --nw-accent:#2868c7; --nw-glow:rgba(40,104,199,.26);
+  --mm-accent:#7d4ac5; --mm-secondary:#127b68; --mm-glow:rgba(125,74,197,.24);
+  --tt-accent:#b42c76; --tt-secondary:#315bb8; --tt-glow:rgba(180,44,118,.22);
+  --dl-accent:#ba5d16; --dl-secondary:#147d7a; --dl-glow:rgba(186,93,22,.22);
+  --ss-accent:#277d49; --ss-secondary:#a56918; --ss-glow:rgba(39,125,73,.20);
+  --ff-accent:#a8781f; --ff-secondary:#4b59ae; --ff-glow:rgba(168,120,31,.20);
   --fluxtimer-primary:#b42342; --fluxtimer-secondary:#c96a12;
   --fluxtimer-display:#fff5ec; --fluxtimer-segment:#a93131;
   --glow-s:rgba(214,81,22,.40); --glow-w:rgba(214,81,22,.12);

src/main/resources/static/js/accessibility.js

@@ -2,7 +2,7 @@
 function load(){try{return Object.assign({},defaults,JSON.parse(localStorage.getItem(KEY)||'{}'));}catch(e){return Object.assign({},defaults);}}var state=load();
 function apply(){var h=document.documentElement;h.setAttribute('data-mf-font',String(state.font));h.setAttribute('data-mf-readable',state.readable);h.setAttribute('data-mf-contrast',state.contrast);h.setAttribute('data-mf-color',state.color?'safe':'standard');h.setAttribute('data-mf-mono',state.mono);h.setAttribute('data-mf-links',state.links);h.setAttribute('data-mf-motion',state.motion);h.setAttribute('data-mf-cursor',state.cursor);try{localStorage.setItem(KEY,JSON.stringify(state));}catch(e){}}
 apply();
-function applySkin(){var root=document.querySelector('[data-a11y-skin]'),skin=root&&root.getAttribute('data-a11y-skin');if(!skin&&document.querySelector('.esc-app'))skin='codeescape';if(!skin&&document.querySelector('.bh-app'))skin='bughunter';if(!skin&&document.querySelector('.sc-app'))skin='serviceclash';if(!skin&&document.querySelector('.nw-app'))skin='networker';if(skin)document.body.classList.add('mf-a11y-skin-'+skin);}
+function applySkin(){var root=document.querySelector('[data-a11y-skin]'),skin=root&&root.getAttribute('data-a11y-skin');if(!skin&&document.querySelector('.mm-body'))skin='mindmatch';if(!skin&&document.querySelector('.tt-body'))skin='techtacular';if(!skin&&document.querySelector('.dl-body,.dlg-body'))skin='devlab';if(!skin&&document.querySelector('.ss-body'))skin='syntaxsaga';if(!skin&&document.querySelector('.finalflux-shell,.finalflux-page'))skin='finalflux';if(!skin&&document.querySelector('.esc-app'))skin='codeescape';if(!skin&&document.querySelector('.bh-app'))skin='bughunter';if(!skin&&document.querySelector('.sc-app'))skin='serviceclash';if(!skin&&document.querySelector('.nw-app'))skin='networker';if(skin)document.body.classList.add('mf-a11y-skin-'+skin);}
 function button(id,icon,label,detail){return '<button type="button" class="mf-a11y-option" data-a11y="'+id+'"><strong aria-hidden="true">'+icon+'</strong><span>'+label+'</span>'+(detail?'<small>'+detail+'</small>':'')+'</button>';}
 function init(){if(document.querySelector('.mf-a11y-trigger'))return;var trigger=document.createElement('button');trigger.type='button';trigger.className='mf-a11y-trigger';trigger.setAttribute('aria-label','Barrierefreiheit öffnen');trigger.setAttribute('aria-expanded','false');trigger.setAttribute('aria-controls','mf-a11y-panel');trigger.innerHTML='<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><circle cx="18" cy="5" r="3" fill="currentColor"/><path d="M13 11l5-2 5 4m-7-2-2 7-6 1m8-4 6 2 3 7M13 18a7 7 0 1 0 6 7"/></svg>';
 var panel=document.createElement('section');panel.id='mf-a11y-panel';panel.className='mf-a11y-panel';panel.hidden=true;panel.setAttribute('role','dialog');panel.setAttribute('aria-modal','false');panel.setAttribute('aria-labelledby','mf-a11y-title');panel.innerHTML='<div class="mf-a11y-head"><button type="button" class="mf-a11y-close" aria-label="Barrierefreiheit schließen">×</button><h2 id="mf-a11y-title">Barrierefreiheit</h2></div><div class="mf-a11y-grid">'+button('font','T⁺','Text vergrößern','100 %')+button('contrast','◐','Hochkontrast')+button('color','◉','Farbenblind-Modus')+button('mono','◒','Monochrom')+button('readable','Aa','Lesemodus (Dyslexie)','Verdana + Abstände')+button('links','🔗','Links unterstreichen')+button('motion','Ⅱ','Animationen stoppen')+button('cursor','➤','Großer Cursor')+button('reset','↺','Alles zurücksetzen')+'</div>';

src/main/resources/static/js/theme.js

@@ -32,13 +32,13 @@
     document.head.appendChild(accessibilityCss);
     var accessibilityPlacementCss = document.createElement('link');
     accessibilityPlacementCss.rel = 'stylesheet';
-    accessibilityPlacementCss.href = '/css/accessibility-placement.css?v=8';
+    accessibilityPlacementCss.href = '/css/accessibility-placement.css?v=9';
     accessibilityPlacementCss.setAttribute('data-accessibility', '');
     document.head.appendChild(accessibilityPlacementCss);
   }
   if (!document.querySelector('script[data-accessibility]')) {
     var accessibilityScript = document.createElement('script');
-    accessibilityScript.src = '/js/accessibility.js?v=7';
+    accessibilityScript.src = '/js/accessibility.js?v=8';
     accessibilityScript.defer = true;
     accessibilityScript.setAttribute('data-accessibility', '');
     document.head.appendChild(accessibilityScript);

src/main/resources/templates/devlab-game.html

@@ -6,7 +6,7 @@
   <title>Dev Lab Spiel – Mindflux</title>
   <link rel="stylesheet" href="/css/theme.css">
   <script src="/js/theme.js"></script>
-  <link rel="stylesheet" href="/css/devlabgame.css?v=4">
+  <link rel="stylesheet" href="/css/devlabgame.css?v=5">
 </head>
 <body class="dlg-body" th:attr="data-game=${gameSlug}">
   <div class="dlg-shell">

src/main/resources/templates/devlab.html

@@ -6,7 +6,7 @@
   <title>Dev Lab - Mindflux</title>
   <link rel="stylesheet" href="/css/theme.css">
   <script src="/js/theme.js"></script>
-  <link rel="stylesheet" href="/css/devlab.css?v=2">
+  <link rel="stylesheet" href="/css/devlab.css?v=3">
 </head>
 <body class="dl-body">
   <div class="mf-shell no-right dl-shell">

src/main/resources/templates/finalflux.html

@@ -6,7 +6,7 @@
   <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">
-  <link rel="stylesheet" href="/css/finalflux.css">
+  <link rel="stylesheet" href="/css/finalflux.css?v=2">
   <script src="/js/theme.js"></script>
 </head>
 <body class="finalflux-shell">

src/main/resources/templates/mindmatch.html

@@ -6,7 +6,7 @@
   <title>MindMatch – Mindflux</title>
   <link rel="stylesheet" href="/css/theme.css">
   <script src="/js/theme.js"></script>
-  <link rel="stylesheet" href="/css/mindmatch.css?v=4">
+  <link rel="stylesheet" href="/css/mindmatch.css?v=5">
 </head>
 <body class="mm-body">
 

src/main/resources/templates/syntaxsaga.html

@@ -6,7 +6,7 @@
   <title>Syntax Saga – Mindflux</title>
   <link rel="stylesheet" href="/css/theme.css">
   <script src="/js/theme.js"></script>
-  <link rel="stylesheet" href="/css/syntaxsaga.css?v=1">
+  <link rel="stylesheet" href="/css/syntaxsaga.css?v=2">
 </head>
 <body class="ss-body">
 

src/main/resources/templates/techtacular.html

@@ -6,7 +6,7 @@
   <title>TechTacular – Mindflux</title>
   <link rel="stylesheet" href="/css/theme.css">
   <script src="/js/theme.js"></script>
-  <link rel="stylesheet" href="/css/techtacular.css?v=3">
+  <link rel="stylesheet" href="/css/techtacular.css?v=4">
 </head>
 <body class="tt-body">