diff --git a/04_Tablet-Quiz/app/index.html b/04_Tablet-Quiz/app/index.html
index 02214b7..1659664 100644
--- a/04_Tablet-Quiz/app/index.html
+++ b/04_Tablet-Quiz/app/index.html
@@ -5,17 +5,17 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <title>SLC-Workshop — Companion-App</title>
 <meta name="description" content="Begleit-App zum SLC-Workshop-Tabletop: führt durch die Stationen, vermittelndes Quiz und Auflösung. Offline lauffähig." />
-<meta name="theme-color" content="#1d2430" />
+<meta name="theme-color" content="#161b24" />
 <link rel="manifest" href="manifest.webmanifest" />
 <link rel="apple-touch-icon" href="icon.svg" />
 <link rel="icon" href="icon.svg" type="image/svg+xml" />
 <style>
   :root {
-    --bg: #f4f5f7;
-    --panel: #ffffff;
-    --ink: #1d2430;
-    --muted: #6b7686;
-    --line: #e2e6ec;
+    --bg: #161b24;            /* dunkler Hintergrund (nicht voll schwarz) */
+    --panel: #1f2733;         /* Karten/Header */
+    --ink: #e8edf4;           /* heller Text */
+    --muted: #9aa7b8;
+    --line: #333d4d;
     --accent: #e2001a;        /* Freiburg-Rot */
     --ok: #1f9d57;
     --bad: #d23b3b;
@@ -25,7 +25,12 @@
     --support: #18a9a0;
     --review: #8358c6;
     --radius: 14px;
-    --shadow: 0 1px 3px rgba(20,30,50,.08), 0 6px 24px rgba(20,30,50,.06);
+    --shadow: 0 1px 3px rgba(0,0,0,.45), 0 8px 28px rgba(0,0,0,.4);
+    --soft: #28313f;          /* leicht erhöhte Fläche */
+    --okBg: rgba(31,157,87,.16);
+    --badBg: rgba(210,59,59,.18);
+    --accentBg: rgba(226,0,26,.14);
+    --blueBg: rgba(47,128,201,.16);
   }
   * { box-sizing: border-box; }
   html, body { margin: 0; height: 100%; }
@@ -300,12 +305,33 @@
   .phaseZone:hover{filter:brightness(1.06)}
   .phaseZone.bad{outline:3px solid var(--bad);outline-offset:2px}
   @media(max-width:760px){.deckRow{grid-template-columns:repeat(3,1fr)}.phaseRow{grid-template-columns:repeat(3,1fr)}}
+
+  /* ===== Dark-Theme-Flächen (v0.9) — überschreibt fest verdrahtete helle Farben ===== */
+  .scenario select, button { background:var(--soft); }
+  button.ghost { background:var(--soft); }
+  .cardForm select { background:var(--soft); }
+  .opt, .choice, .deckCard { background:var(--soft); }
+  .discuss { background:var(--soft); }
+  .legend, .raciLegend, .frageBox { background:var(--soft); }
+  .stationItem:hover, .pickerItem:hover { background:var(--soft); }
+  .stationItem.active { background:#26313f; }
+  .phaseDone, .actDone { background:var(--soft); }
+  .tourNarr { background:var(--blueBg); }
+  .tourBanner, .ctText { background:var(--accentBg); }
+  .gateReq.ok, .opt.correct, .pickerItem.correct { background:var(--okBg); color:var(--ok); border-color:rgba(31,157,87,.4); }
+  .aufBox { background:var(--okBg); border-color:rgba(31,157,87,.4); color:var(--ink); }
+  .gateReq.bad, .opt.wrong, .choice.bad, .pickerItem.wrongPick { background:var(--badBg); color:var(--bad); border-color:rgba(210,59,59,.4); }
+  .stepHead .n { background:var(--accent); color:#fff; }
+  .pickerItem .gate { background:#475061; color:#fff; }
+  .roleChip { background:var(--soft); color:var(--ink); }
+  .navBackdrop { background:rgba(0,0,0,.55); }
+  @keyframes akteFlash { 0%,55%{ background:rgba(255,206,84,.22); } 100%{ background:transparent; } }
 </style>
 </head>
 <body>
 <header>
-  <div class="brand">SLC&nbsp;<b>Companion</b></div>
-  <span class="tag">v0.7</span>
+  <div class="brand">SLC&nbsp;Workshop&nbsp;<b>Companion</b></div>
+  <span class="tag">v0.9</span>
   <div id="cardBadge" class="cardBadge"></div>
   <div class="spacer"></div>
   <button class="ghost" id="akteBtn" title="Service-Akte (gesammelte Artefakte)">📁&nbsp;Service-Akte</button>
diff --git a/04_Tablet-Quiz/app/sw.js b/04_Tablet-Quiz/app/sw.js
index fe19318..ad19a2b 100644
--- a/04_Tablet-Quiz/app/sw.js
+++ b/04_Tablet-Quiz/app/sw.js
@@ -1,5 +1,5 @@
 /* Service Worker — SLC-Workshop Companion (App-Shell, offline-first) */
-const CACHE = "slc-companion-v27";
+const CACHE = "slc-companion-v28";
 const SHELL = ["./", "index.html", "manifest.webmanifest", "icon.svg"];
 // Action-Card-Grafiken (cards/s<service>-c<change>.png) fuer Offline vorab cachen (alle 24).
 const CARDS = [];
