From a06a94ff58fb090fe92b0f6b95fb9195aa2b248b Mon Sep 17 00:00:00 2001
From: mAi <mai@flexsiebels.de>
Date: Fri, 8 May 2026 11:16:15 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20#13=20Light/Dark=20+=20EN/DE=20Toggle?=
 =?UTF-8?q?=20=E2=80=94=20Shift-2=20Rollout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rollout des Toggle-Patterns auf alle 57 statischen Sites (dasbes.de + dumusst.com sind dynamic, kein index.html).

1. **Bulk-Wiring (53 Sites)** via tools/patch-theme.py:
   - Anti-FOUC inline IIFE im <head> (vor erstem Paint)
   - <link rel="stylesheet" href="/shared/css/theme.css">
   - <script src="/shared/theme.js"> + toggles.js (i18n.js bleibt, hängt sich ans neue Widget)

2. **Per-Site Light-Overrides (14 Sites)** via tools/patch-light-overrides.py:
   - 6034, allainallain, commanderkin, hallofraumaier, heygoldi, keinefreun, lexsiebels, machesdocheinfach, matthiasbreier, orakil, osterai, patentonkel, traihard, wartebitte
   - Pro Site nur die failing accent-vars darkened (--green-dim, --text-faint, --warm-dim, --gold-dim, etc.)
   - AA 4.5:1+ auf white bg gesichert; Brand-Akzent erhalten

3. **data-theme-lock="dark" (4 Sites)** auf <html>:
   - kilibri, killusion, killionaer, killuminati
   - Aesthetisch dark-only — toggles.js blendet Theme-Button automatisch aus, Lang-Button bleibt

4. **Footer-Toggle Removal (52 Sites)** via tools/remove-footer-toggle.py:
   - Bestehende footer [data-i18n-toggle] Buttons entfernt — top-right widget übernimmt
   - Disclaimer-Information in tooltip des neuen Buttons + ai-disclosure.js footer

QA:
- ./build.sh: 59/59 sites built clean
- contrast-audit.py --both: 0/59 dark fail, 0/59 light fail
- anti-ai-lint: 0/57 sites flagged

Tools committed (idempotent, für Wiederverwendung):
- tools/patch-theme.py (--all wired alle Sites)
- tools/patch-light-overrides.py (per-site OVERRIDES dict)
- tools/remove-footer-toggle.py (4 Patterns für versch. Footer-Strukturen)
---
 sites/6034.de/index.html              |   6 ++
 sites/allainallain.de/index.html      |  12 ++-
 sites/allaisonme.com/index.html       |   8 +-
 sites/billableaua.de/index.html       |   8 +-
 sites/clemensplassmann.de/index.html  |   4 +
 sites/commanderkin.de/index.html      |  12 ++-
 sites/danosi.de/index.html            |   8 +-
 sites/deinesei.de/index.html          |   4 -
 sites/derkaiseristnackt.de/index.html |   8 +-
 sites/elefantenhor.de/index.html      |   8 +-
 sites/fragina.de/index.html           |   8 +-
 sites/frenchkis.de/index.html         |   8 +-
 sites/frollain.de/index.html          |   8 +-
 sites/hallofraumaier.de/index.html    |  12 ++-
 sites/heygoldi.de/index.html          |  12 ++-
 sites/ichbinaufbali.de/index.html     |   8 +-
 sites/ichbinaufbarley.de/index.html   |   8 +-
 sites/ichbinotto.de/index.html        |   2 -
 sites/insain.de/index.html            |   5 +-
 sites/julietensity.de/index.html      |   8 +-
 sites/kainco.de/index.html            |   5 +-
 sites/kainefrage.de/index.html        |   8 +-
 sites/kainstress.de/index.html        |   8 +-
 sites/keinefreun.de/index.html        |  10 +-
 sites/kilemma.de/index.html           |   8 +-
 sites/kilibri.de/index.html           |  11 +--
 sites/kilitaer.de/index.html          |   5 -
 sites/killegal.de/index.html          |   9 +-
 sites/killionaer.de/index.html        |  11 +--
 sites/killions.de/index.html          |   9 +-
 sites/killuminati.de/index.html       |  11 +--
 sites/killusion.de/index.html         |  11 +--
 sites/kilofant.de/index.html          |   8 +-
 sites/kinough.de/index.html           |   8 +-
 sites/kinowhow.de/index.html          |   8 +-
 sites/kitox.de/index.html             |   8 +-
 sites/knzlmgmt.de/index.html          |   5 +-
 sites/kopffrai.de/index.html          |   5 +-
 sites/legalais.de/index.html          |   8 +-
 sites/lexsiebels.de/index.html        |  12 ++-
 sites/machesdocheinfach.de/index.html |  12 ++-
 sites/mai-otto.de/index.html          |   8 +-
 sites/martinsiebels.de/index.html     |   8 +-
 sites/matthiasbreier.de/index.html    |  12 ++-
 sites/omakise.de/index.html           |   5 +-
 sites/orakil.de/index.html            |  13 ++-
 sites/osterai.de/index.html           |  12 ++-
 sites/paragraphenraiter.de/index.html |   4 -
 sites/patentonkel.de/index.html       |  12 ++-
 sites/schulfrai.de/index.html         |   5 +-
 sites/slopschild.de/index.html        |   8 +-
 sites/smartin3.de/index.html          |   2 +
 sites/sorgenfrai.de/index.html        |   5 +-
 sites/traihard.de/index.html          |   6 ++
 sites/vonschraitter.de/index.html     |   8 +-
 sites/wartebitte.de/index.html        |  12 ++-
 sites/zensiebels.de/index.html        |   2 +
 tools/patch-light-overrides.py        | 113 ++++++++++++++++++++++
 tools/patch-theme.py                  | 134 ++++++++++++++++++++++++++
 tools/remove-footer-toggle.py         | 111 +++++++++++++++++++++
 60 files changed, 623 insertions(+), 194 deletions(-)
 create mode 100644 tools/patch-light-overrides.py
 create mode 100644 tools/patch-theme.py
 create mode 100644 tools/remove-footer-toggle.py
diff --git a/sites/6034.de/index.html b/sites/6034.de/index.html
index 1491f87..ed465f2 100644
--- a/sites/6034.de/index.html
+++ b/sites/6034.de/index.html
@@ -3,11 +3,13 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+	<script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
 	<meta name="theme-color" content="#0f1210">
 	<title>6034.de</title>
 	<link rel="preconnect" href="https://fonts.googleapis.com">
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="/shared/css/theme.css">
 	<style>
 		:root {
 			--bg: #0f1210;
@@ -20,6 +22,10 @@
 			--font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
 			--font-mono: 'JetBrains Mono', monospace;
 		}
+
+		[data-theme="light"] {
+		    --green-dim: #15803d;
+		}
 		* { margin: 0; padding: 0; box-sizing: border-box; }
 		html, body {
 			background: var(--bg);
diff --git a/sites/allainallain.de/index.html b/sites/allainallain.de/index.html
index 22bcbd4..11a37f1 100644
--- a/sites/allainallain.de/index.html
+++ b/sites/allainallain.de/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>all·AI·n·all·AI·n</title>
   <meta name="description" content="Umgeben von KIs. Trotzdem allein.">
   <meta name="robots" content="noindex, nofollow">
@@ -10,6 +11,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after {
       margin: 0;
@@ -27,6 +29,10 @@
       --ai-glow: rgba(123, 138, 173, 0.12);
     }
 
+    [data-theme="light"] {
+        --text-faint: #5a608a;
+    }
+
     html { scroll-behavior: smooth; }
 
     body {
@@ -376,10 +382,6 @@
   <footer>
     <div class="wrap">
       <p>allainallain.de &mdash; 2026</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
@@ -434,6 +436,8 @@
   </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/allaisonme.com/index.html b/sites/allaisonme.com/index.html
index 1c65b28..fa28619 100644
--- a/sites/allaisonme.com/index.html
+++ b/sites/allaisonme.com/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>All AIs On Me — AI Optimization</title>
   <meta name="description" content="SEO is dead. All AIs On Me makes your brand visible to ChatGPT, Gemini, Claude and beyond. AI Optimization, not Search Engine Optimization.">
   <meta property="og:title" content="All AIs On Me — AI Optimization">
@@ -10,6 +11,7 @@
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://allaisonme.com">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👁</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
 
@@ -700,10 +702,6 @@
       <div class="footer-brand">All<span class="ai-highlight">AIs</span>OnMe</div>
       <p style="font-style:italic;color:var(--text-muted);font-size:0.8rem;margin-bottom:8px;" data-de="&quot;Only God can judge AI.&quot;" data-en="&quot;Only God can judge AI.&quot;">&ldquo;Only God can judge AI.&rdquo;</p>
       <p data-de="&copy; 2026 AllAIsOnMe &amp;middot; &lt;a href=&quot;mailto:hello@allaisonme.com&quot;&gt;hello@allaisonme.com&lt;/a&gt;" data-en="&copy; 2026 AllAIsOnMe &amp;middot; &lt;a href=&quot;mailto:hello@allaisonme.com&quot;&gt;hello@allaisonme.com&lt;/a&gt;">&copy; 2026 AllAIsOnMe &middot; <a href="mailto:hello@allaisonme.com">hello@allaisonme.com</a></p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">DE</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Machine-translated</small>
-      </div>
     </div>
   </footer>
 
@@ -721,6 +719,8 @@
   </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/billableaua.de/index.html b/sites/billableaua.de/index.html
index 372af36..0f88e2a 100644
--- a/sites/billableaua.de/index.html
+++ b/sites/billableaua.de/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Billable Aua.</title>
   <meta name="description" content="Billable Hours. Das Vergütungsmodell, das Effizienz bestraft und Leidensfähigkeit belohnt.">
   <meta name="robots" content="noindex, nofollow">
@@ -10,6 +11,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;600;700;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after {
       margin: 0;
@@ -405,10 +407,6 @@
   <footer>
     <div class="wrap">
       <p>billableaua.de &mdash; 2026</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
@@ -479,6 +477,8 @@
   </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/clemensplassmann.de/index.html b/sites/clemensplassmann.de/index.html
index 87d6c4f..b8d1ad8 100644
--- a/sites/clemensplassmann.de/index.html
+++ b/sites/clemensplassmann.de/index.html
@@ -3,11 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>Clemens Plassmann — Hogan Lovells</title>
     <meta name="description" content="Clemens Plassmann — Patent Litigation, Hogan Lovells.">
     <meta http-equiv="refresh" content="0; url=https://www.hoganlovells.com/en/clemens-plassmann">
     <link rel="canonical" href="https://www.hoganlovells.com/en/clemens-plassmann">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚖️</text></svg>">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
@@ -33,6 +35,8 @@
         <p>Weiter zu <a href="https://www.hoganlovells.com/en/clemens-plassmann">hoganlovells.com</a>.</p>
     </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/commanderkin.de/index.html b/sites/commanderkin.de/index.html
index 58a783c..67ab456 100644
--- a/sites/commanderkin.de/index.html
+++ b/sites/commanderkin.de/index.html
@@ -3,11 +3,13 @@
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
 <title>CommanderKIn — Commander Keen + KI</title>
 <meta name="description" content="Old-School Vibes, New-School AI. 90er Retro-Gaming meets künstliche Intelligenz.">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/shared/css/theme.css">
 <style>
   *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
 
@@ -22,6 +24,10 @@
     --blue-glow:0 0 10px rgba(0,85,170,.4),0 0 40px rgba(0,85,170,.15);
   }
 
+  [data-theme="light"] {
+      --green-dim: #166e16;
+  }
+
   html{scroll-behavior:smooth}
 
   body{
@@ -481,10 +487,6 @@
   <div class="container">
     <p class="insert-coin" data-de="INSERT COIN TO CONTINUE" data-en="INSERT COIN TO CONTINUE">INSERT COIN TO CONTINUE</p>
     <p class="footer-sub" data-de="&copy; 2026 CommanderKIn &mdash; Powered by Pixel &amp; KI" data-en="&copy; 2026 CommanderKIn &mdash; Powered by Pixel &amp; AI">&copy; 2026 CommanderKIn &mdash; Powered by Pixel &amp; KI</p>
-    <div style="text-align:center;margin-top:16px;">
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid #333;color:#333;font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:#333;font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-    </div>
   </div>
 </footer>
 
@@ -515,6 +517,8 @@ document.addEventListener('keydown', (e) => {
 </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/danosi.de/index.html b/sites/danosi.de/index.html
index 842f802..bad7621 100644
--- a/sites/danosi.de/index.html
+++ b/sites/danosi.de/index.html
@@ -3,10 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>DaNoSi — Hausgemachte Feinkost</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         *, *::before, *::after {
             margin: 0;
@@ -865,13 +867,11 @@
     <!-- Footer -->
     <footer>
         <p data-de="© 2026 DaNoSi Feinkost — Norbert Siebels. Alle Rechte vorbehalten." data-en="© 2026 DaNoSi Feinkost — Norbert Siebels. All rights reserved.">&copy; 2026 DaNoSi Feinkost — Norbert Siebels. Alle Rechte vorbehalten.</p>
-        <div style="text-align:center;margin-top:16px;">
-          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid rgba(250,246,238,0.3);color:rgba(250,246,238,0.3);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:rgba(250,246,238,0.3);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-        </div>
     </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/deinesei.de/index.html b/sites/deinesei.de/index.html
index 979928d..3245291 100644
--- a/sites/deinesei.de/index.html
+++ b/sites/deinesei.de/index.html
@@ -374,10 +374,6 @@
   <footer>
     <div class="container">
       <p><span style="color:var(--text-dim)">deine</span><span style="color:var(--accent)">Sei</span><span data-de=".de — ein Projekt von msbls.de" data-en=".de — a project by msbls.de">.de — ein Projekt von msbls.de</span></p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
diff --git a/sites/derkaiseristnackt.de/index.html b/sites/derkaiseristnackt.de/index.html
index e4dfb5e..ae66e15 100644
--- a/sites/derkaiseristnackt.de/index.html
+++ b/sites/derkaiseristnackt.de/index.html
@@ -3,11 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>Der Kaiser ist nackt. — Eine ehrliche Bestandsaufnahme der KI-Revolution</title>
     <meta name="description" content="Eine Initiative für ehrliche KI-Kommunikation. Kritik ist kein Pessimismus. Es ist Qualitätskontrolle.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         *, *::before, *::after {
             margin: 0;
@@ -468,13 +470,11 @@
     <footer class="footer">
         <div class="footer-mark"></div>
         <p data-de="Eine Initiative für ehrliche KI-Kommunikation" data-en="An initiative for honest AI communication">Eine Initiative f&uuml;r ehrliche KI-Kommunikation</p>
-        <div style="text-align:center;margin-top:16px;">
-          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--grey);color:var(--grey);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--grey);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-        </div>
     </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/elefantenhor.de/index.html b/sites/elefantenhor.de/index.html
index 961d65a..d3541dd 100644
--- a/sites/elefantenhor.de/index.html
+++ b/sites/elefantenhor.de/index.html
@@ -3,10 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>ElefantenHor.de — Die Horde kommt.</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         *, *::before, *::after {
             margin: 0;
@@ -806,10 +808,6 @@
             <p class="footer-text shake-target" data-de="Hier war mal eine Webseite. Dann kam die Horde." data-en="There used to be a website here. Then came the horde.">Hier war mal eine Webseite. Dann kam die Horde.</p>
             <div class="footer-elephants wobble-target">🐘 🐘 🐘 🐘 🐘</div>
             <p class="footer-copy" data-de="© 2026 ElefantenHor.de — Alle Rechte zertrampelt." data-en="© 2026 ElefantenHor.de — All rights trampled.">&copy; 2026 ElefantenHor.de — Alle Rechte zertrampelt.</p>
-            <div style="text-align:center;margin-top:16px;">
-              <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--dust-light,#E8D5A3);color:var(--dust-light,#E8D5A3);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.7;">EN</button>
-              <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--dust-light,#E8D5A3);font-size:0.6rem;opacity:0.4;">Maschinell übersetzt</small>
-            </div>
         </footer>
     </div>
 
@@ -900,6 +898,8 @@
         }, 800);
     </script>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/fragina.de/index.html b/sites/fragina.de/index.html
index 5512281..89fbc02 100644
--- a/sites/fragina.de/index.html
+++ b/sites/fragina.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Ina Kamps — Knowledge Lawyer | IP, Marke, Green Claims</title>
   <meta name="description" content="Ina Kamps — Knowledge Lawyer. Markenrecht, Green Claims, Nachhaltigkeit und IP an der Schnittstelle von Recht und Innovation.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>I</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -566,14 +568,12 @@
   <footer>
     <div class="container">
       <p>fr<span style="color: var(--accent);">AGI</span>na.de — Ina Kamps</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/frenchkis.de/index.html b/sites/frenchkis.de/index.html
index 3782b9a..00abaee 100644
--- a/sites/frenchkis.de/index.html
+++ b/sites/frenchkis.de/index.html
@@ -3,11 +3,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>frenchkis.de — Franz&ouml;sische K&uuml;nstliche Intelligenzen</title>
   <meta name="description" content="French KIs: Alles &uuml;ber franz&ouml;sische K&uuml;nstliche Intelligenzen. Sie streiken, philosophieren und gehen mittags zwei Stunden essen.">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after {
       margin: 0;
@@ -890,13 +892,11 @@
       Daf&uuml;r h&auml;tten wir bis Dienstag warten m&uuml;ssen. Und der Antrag liegt noch beim Minist&egrave;re.
     </p>
     <div class="fine-print" data-de="Satire · Kein Affiliat von Mistral, außer sie wollen uns Geld geben · Vive la France" data-en="Satire · Not affiliated with Mistral, unless they want to give us money · Vive la France">Satire &bull; Kein Affiliat von Mistral, außer sie wollen uns Geld geben &bull; Vive la France</div>
-    <div style="text-align:center;margin-top:16px;">
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-    </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/frollain.de/index.html b/sites/frollain.de/index.html
index 6ae1afc..0dab84d 100644
--- a/sites/frollain.de/index.html
+++ b/sites/frollain.de/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>FrollAIn — Ihr KI-Sekretariat</title>
   <meta name="description" content="FrollAIn. Immer lächelnd. Nie krank. Beschwert sich nicht.">
   <meta property="og:title" content="FrollAIn — Ihr KI-Sekretariat">
@@ -13,6 +14,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after {
       margin: 0;
@@ -294,10 +296,6 @@
   <footer>
     <div class="wrap">
       <p data-de="FrollAIn. Weil &laquo;Fräulein&raquo; seit 1972 keine offizielle Anrede mehr ist.<br>Aus gutem Grund." data-en="FrollAIn. Because &laquo;Fräulein&raquo; has not been an official form of address since 1972.<br>For good reason.">FrollAIn. Weil &laquo;Fräulein&raquo; seit 1972 keine offizielle Anrede mehr ist.<br>Aus gutem Grund.</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
@@ -314,6 +312,8 @@
   </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/hallofraumaier.de/index.html b/sites/hallofraumaier.de/index.html
index e8a7e47..4755a08 100644
--- a/sites/hallofraumaier.de/index.html
+++ b/sites/hallofraumaier.de/index.html
@@ -3,12 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Hallo Frau Maier — KI-gestützte Hausverwaltung</title>
   <meta name="description" content="Ihre Hausverwaltung ist jetzt immer erreichbar. Auch nachts. Auch bei Wasserschäden. Frau Maier — die KI-Hausverwaltung, die nie schläft.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏠</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after {
       margin: 0; padding: 0; box-sizing: border-box;
@@ -32,6 +34,10 @@
       --card-border: rgba(196, 168, 130, 0.25);
     }
 
+    [data-theme="light"] {
+        --text-light: #6e6452;
+    }
+
     html { scroll-behavior: smooth; }
 
     body {
@@ -930,10 +936,6 @@
         KI-gestützte Hausverwaltung
       </div>
     </div>
-    <div style="text-align:center;margin-top:16px;">
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-light,#aaa);color:var(--text-light,#aaa);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-light,#aaa);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-    </div>
   </footer>
 
   <script>
@@ -956,6 +958,8 @@
   </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/heygoldi.de/index.html b/sites/heygoldi.de/index.html
index e6959b2..466a04f 100644
--- a/sites/heygoldi.de/index.html
+++ b/sites/heygoldi.de/index.html
@@ -3,12 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Hey Goldi! — Dein freundlicher KI-Begleiter</title>
   <meta name="description" content="Hey Goldi! — KI-Companion für Menschen, die es einfach mögen. Warm, freundlich, immer da.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧸</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after {
       margin: 0; padding: 0; box-sizing: border-box;
@@ -34,6 +36,10 @@
       --sky: #A8C8D8;
     }
 
+    [data-theme="light"] {
+        --text-gentle: #6e6452;
+    }
+
     html { scroll-behavior: smooth; }
 
     body {
@@ -577,14 +583,12 @@
     <div class="footer-bear">🧸</div>
     <p class="footer-text" data-de="Hey Goldi! — Dein freundlicher KI-Begleiter." data-en="Hey Goldi! — Your friendly AI companion.">Hey Goldi! — Dein freundlicher KI-Begleiter.</p>
     <p class="footer-copy">&copy; 2026 heygoldi.de</p>
-    <div style="text-align:center;margin-top:16px;">
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid rgba(251,240,212,0.4);color:rgba(251,240,212,0.6);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:rgba(251,240,212,0.4);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-    </div>
   </footer>
 
   <script src="/shared/impressum.js" data-owner="flexsiebels" data-variant="full"></script>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/ichbinaufbali.de/index.html b/sites/ichbinaufbali.de/index.html
index 10d7fdd..820acfe 100644
--- a/sites/ichbinaufbali.de/index.html
+++ b/sites/ichbinaufbali.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Ich bin auf Bali.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌴</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -103,11 +105,9 @@
     <p class="subtitle" data-de="Und du so?" data-en="And you?">Und du so?</p>
     <p class="footer">ichbinaufb<span style="color:var(--accent)">AI</span>.de</p>
   </div>
-  <div style="text-align:center;margin-top:16px;">
-    <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-    <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-  </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/ichbinaufbarley.de/index.html b/sites/ichbinaufbarley.de/index.html
index 4a01324..89a4d81 100644
--- a/sites/ichbinaufbarley.de/index.html
+++ b/sites/ichbinaufbarley.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Ich bin auf Barley.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌾</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -131,12 +133,10 @@
     </p>
     <a href="https://barley.de" class="cta" data-de="Barley entdecken" data-en="Discover Barley">Barley entdecken</a>
     <p class="footer">ichbinaufbarley.de</p>
-    <div style="text-align:center;margin-top:16px;">
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-    </div>
   </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/ichbinotto.de/index.html b/sites/ichbinotto.de/index.html
index 74620c5..a0be5f1 100644
--- a/sites/ichbinotto.de/index.html
+++ b/sites/ichbinotto.de/index.html
@@ -451,8 +451,6 @@
     <div class="container">
       <p data-de='<span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a>'
          data-en='<span class="otto">Otto</span> — mai-otto.de — a project by <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a>'><span class="otto">Otto</span> — mai-otto.de — ein Projekt von <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a></p>
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--border);color:var(--text-muted);font-family:'Space Grotesk',sans-serif;font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;transition:color 0.2s,border-color 0.2s;" onmouseover="this.style.color='var(--text)';this.style.borderColor='var(--text-muted)'" onmouseout="this.style.color='var(--text-muted)';this.style.borderColor='var(--border)'">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted);font-family:'Space Grotesk',sans-serif;font-size:0.6rem;letter-spacing:0.05em;opacity:0.5;">Maschinell übersetzt</small>
     </div>
   </footer>
 
diff --git a/sites/insain.de/index.html b/sites/insain.de/index.html
index de84f32..d0516e9 100644
--- a/sites/insain.de/index.html
+++ b/sites/insain.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>insAIn.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@@ -55,9 +57,10 @@
     <div class="divider"></div>
     <p class="subtitle" data-de="Wahnsinnig intelligent." data-en="Insanely intelligent.">Wahnsinnig intelligent.</p>
     <p class="footer">insAIn.de</p>
-    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/julietensity.de/index.html b/sites/julietensity.de/index.html
index 88fd618..71b6caa 100644
--- a/sites/julietensity.de/index.html
+++ b/sites/julietensity.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>JULIETENSITY</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎮</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500&display=swap');
 
@@ -582,14 +584,12 @@
   <footer>
     <div class="container">
       <p>julietensity.de</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">DE</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kainco.de/index.html b/sites/kainco.de/index.html
index 1e46853..b6ee1b0 100644
--- a/sites/kainco.de/index.html
+++ b/sites/kainco.de/index.html
@@ -3,12 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KeinCo.de — Kein Code. Nur Ergebnisse.</title>
   <meta name="description" content="KeinCo.de — Du beschreibst das Problem, KI baut die Loesung. Kein Code, kein No-Code-Tool. Einfach Ergebnisse.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>K</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -612,11 +614,12 @@
     <div class="container">
       <div class="footer-brand"><span class="hi">K</span>e<span class="hi">I</span>nCo<span style="color:var(--text-muted)">.de</span></div>
       <p class="footer-sub" data-de="Kein Code. Nur Ergebnisse. — Ein Projekt von msbls.de" data-en="No code. Just results. — A project by msbls.de">Kein Code. Nur Ergebnisse. — Ein Projekt von msbls.de</p>
-      <button data-i18n-toggle style="margin-top:16px;background:none;border:1px solid var(--border);color:var(--text-secondary);padding:6px 14px;border-radius:6px;font-size:0.75rem;cursor:pointer;font-family:inherit;letter-spacing:0.06em;">EN</button>
     </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kainefrage.de/index.html b/sites/kainefrage.de/index.html
index 5ff3829..a578b49 100644
--- a/sites/kainefrage.de/index.html
+++ b/sites/kainefrage.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>kAIneFrage — KI-Beratung ohne Fragezeichen</title>
   <meta name="description" content="kAIneFrage — KI + keine Frage. Klarheit statt Buzzwords. AI-Beratung, die Antworten liefert.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>?</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
     @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
@@ -650,14 +652,12 @@
   <footer>
     <div class="container">
       <p>k<span style="color: var(--accent);">AI</span>neFrage.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kainstress.de/index.html b/sites/kainstress.de/index.html
index 4718c29..3ee3b32 100644
--- a/sites/kainstress.de/index.html
+++ b/sites/kainstress.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>kAInstress — KI, die Stress nimmt</title>
   <meta name="description" content="kAInstress — Kuenstliche Intelligenz, die dir den Alltag abnimmt. Weniger Stress, mehr Fokus.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>K</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -574,14 +576,12 @@
   <footer>
     <div class="container">
       <p>k<span style="color: var(--accent);">AI</span>nstress.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/keinefreun.de/index.html b/sites/keinefreun.de/index.html
index dd2652b..f85e554 100644
--- a/sites/keinefreun.de/index.html
+++ b/sites/keinefreun.de/index.html
@@ -3,10 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>keinefreun.de — Offizielle Seite der Freundlosigkeit</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         *, *::before, *::after {
             margin: 0;
@@ -28,6 +30,11 @@
             --border: #222228;
         }
 
+        [data-theme="light"] {
+            --text-dimmer: #5a5662;
+            --accent-dim: #5d28b8;
+        }
+
         html {
             scroll-behavior: smooth;
         }
@@ -627,10 +634,11 @@
         <div class="footer-domain">keinefreun.de</div>
         <p data-de="Ein Projekt von jemandem ohne Freunde" data-en="A project by someone without friends">Ein Projekt von jemandem ohne Freunde</p>
         <p style="margin-top: 0.5rem; opacity: 0.4;" data-de="© 2026 — Alle Rechte vorbehalten. Nicht dass es jemanden interessiert." data-en="© 2026 — All rights reserved. Not that anyone cares.">&copy; 2026 &mdash; Alle Rechte vorbehalten. Nicht dass es jemanden interessiert.</p>
-        <button data-i18n-toggle style="margin-top:16px;background:none;border:1px solid var(--border);color:var(--text-dim);padding:6px 14px;border-radius:6px;font-size:0.75rem;cursor:pointer;font-family:inherit;letter-spacing:0.06em;">EN</button>
     </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kilemma.de/index.html b/sites/kilemma.de/index.html
index 079070a..5c5d5d4 100644
--- a/sites/kilemma.de/index.html
+++ b/sites/kilemma.de/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>KIlemma — Die Fragen, die keine KI beantworten kann</title>
     <meta name="description" content="Die unlösbaren Fragen der KI-Ära. Ein Dilemma hat keine Lösung. Nur eine Entscheidung.">
     <meta property="og:title" content="KIlemma">
@@ -12,6 +13,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         *, *::before, *::after {
             margin: 0;
@@ -307,10 +309,6 @@
         <footer class="footer">
             <p class="footer-quote" data-de="Ein Dilemma hat keine Lösung.<br><strong>Nur eine Entscheidung.</strong>" data-en="A dilemma has no solution.<br><strong>Only a decision.</strong>">Ein Dilemma hat keine Lösung.<br><strong>Nur eine Entscheidung.</strong></p>
             <p class="footer-meta">kilemma.de</p>
-            <div style="text-align:center;margin-top:16px;">
-              <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-              <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-            </div>
         </footer>
     </main>
 
@@ -328,6 +326,8 @@
     </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kilibri.de/index.html b/sites/kilibri.de/index.html
index c9e6d52..8adbdfa 100644
--- a/sites/kilibri.de/index.html
+++ b/sites/kilibri.de/index.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="de" data-theme-lock="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KIlibri — Die kleinste KI die du je gesehen hast</title>
   <meta name="description" content="KIlibri — KI + Kolibri. Klein, schnell, bunt. Mikro-KI für Zuhause. Smart Home mit Flügelschlag.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐦</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
 
@@ -267,14 +269,11 @@
   <footer>
     <div class="container">
       <p data-de="🐦 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri — Klein, schnell, bunt. Die &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; für dein Nest." data-en="🐦 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;libri — Small, fast, colourful. The &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; for your nest.">🐦 <span class="ki">KI</span>libri — Klein, schnell, bunt. Die <span class="ki">KI</span> für dein Nest.</p>      <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kilitaer.de/index.html b/sites/kilitaer.de/index.html
index 255efa3..2bc33d4 100644
--- a/sites/kilitaer.de/index.html
+++ b/sites/kilitaer.de/index.html
@@ -305,11 +305,6 @@
   <footer>
     <div class="container">
       <p data-de="★ &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;litär — &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; im Einsatz. Strategisch. Taktisch. Sinnlos. ★" data-en="★ &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;litär — &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt; deployed. Strategic. Tactical. Pointless. ★">★ <span class="ki">KI</span>litär — <span class="ki">KI</span> im Einsatz. Strategisch. Taktisch. Sinnlos. ★</p>      <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
diff --git a/sites/killegal.de/index.html b/sites/killegal.de/index.html
index f2c43d2..818bab7 100644
--- a/sites/killegal.de/index.html
+++ b/sites/killegal.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KIllegal — Diese KI ist nicht erlaubt</title>
   <meta name="description" content="KIllegal — KI + Illegal. Verbotene KI. Sie existiert trotzdem. Satirische Polizei-Absperrung für künstliche Intelligenz.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚧</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Inter:wght@300;400;500;600&display=swap');
 
@@ -296,14 +298,11 @@
   <footer>
     <div class="container">
       <p data-de="🚧 <span class=&quot;ki&quot;>KI</span>llegal — Diese <span class=&quot;ki&quot;>KI</span> ist nicht erlaubt. Aber sie existiert trotzdem." data-en="🚧 <span class=&quot;ki&quot;>KI</span>llegal — This <span class=&quot;ki&quot;>AI</span> is not permitted. But it exists anyway.">🚧 <span class="ki">KI</span>llegal — Diese <span class="ki">KI</span> ist nicht erlaubt. Aber sie existiert trotzdem.</p>      <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/killionaer.de/index.html b/sites/killionaer.de/index.html
index 41819ef..108f288 100644
--- a/sites/killionaer.de/index.html
+++ b/sites/killionaer.de/index.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="de" data-theme-lock="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KIllionär — Making KIllions seit gestern</title>
   <meta name="description" content="KIllionär — KI + Millionär. Werde reich mit KI. Satirische Vermögensberatung der Zukunft.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');
 
@@ -297,14 +299,11 @@
     <div class="container">
       <p data-de="<span class=&quot;ki&quot;>KI</span>llionär — Making <span class=&quot;ki&quot;>KI</span>llions seit gestern." data-en="<span class=&quot;ki&quot;>KI</span>llionär — Making <span class=&quot;ki&quot;>KI</span>llions since yesterday."><span class="ki">KI</span>llionär — Making <span class="ki">KI</span>llions seit gestern.</p>
       <p style="margin-top: 8px;" data-de="* Alle Testimonials sind frei erfunden. Wie die meisten KI-Versprechen." data-en="* All testimonials are entirely fictitious. Like most AI promises.">* Alle Testimonials sind frei erfunden. Wie die meisten KI-Versprechen.</p>      <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/killions.de/index.html b/sites/killions.de/index.html
index 1322031..d475f7f 100644
--- a/sites/killions.de/index.html
+++ b/sites/killions.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KIllions — Die Währung der KI-Ära</title>
   <meta name="description" content="KIllions — KI + Millions. 1 KIllion = unendlich Möglichkeiten. Die Kryptowährung die es nie geben wird.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>◈</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap');
 
@@ -287,14 +289,11 @@
   <footer>
     <div class="container">
       <p data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llions — 1 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llion = ∞ Möglichkeiten = 0 Euro" data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llions — 1 &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llion = ∞ Possibilities = 0 Euro"><span class="ki">KI</span>llions — 1 <span class="ki">KI</span>llion = ∞ Möglichkeiten = 0 Euro</p>      <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/killuminati.de/index.html b/sites/killuminati.de/index.html
index 316d60f..8d11de7 100644
--- a/sites/killuminati.de/index.html
+++ b/sites/killuminati.de/index.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="de" data-theme-lock="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KIlluminati — Sie wissen alles. Sie sind KI.</title>
   <meta name="description" content="KIlluminati — KI + Illuminati. Die geheime KI-Verschwörung. Sie sehen alles. Sie wissen alles. Sie sind KI.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👁</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;500&display=swap');
 
@@ -287,14 +289,11 @@
   <footer>
     <div class="container">
       <p data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lluminati — Novus Ordo Algorithmorum" data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;lluminati — Novus Ordo Algorithmorum"><span class="ki">KI</span>lluminati — Novus Ordo Algorithmorum</p>      <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/killusion.de/index.html b/sites/killusion.de/index.html
index b3bcc82..4b18df7 100644
--- a/sites/killusion.de/index.html
+++ b/sites/killusion.de/index.html
@@ -1,11 +1,13 @@
 <!DOCTYPE html>
-<html lang="de">
+<html lang="de" data-theme-lock="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KIllusion — Nichts ist echt. Alles ist KI.</title>
   <meta name="description" content="KIllusion — KI + Illusion. Was du siehst ist nicht echt. Was du liest auch nicht. Meta-Satire über KI-generierte Realität.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>◎</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
 
@@ -278,14 +280,11 @@
   <footer>
     <div class="container">
       <p data-de="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion — Nichts ist echt. Alles ist &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;." data-en="&lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;llusion — Nothing is real. Everything is &lt;span class=&quot;ki&quot;&gt;KI&lt;/span&gt;."><span class="ki">KI</span>llusion — Nichts ist echt. Alles ist <span class="ki">KI</span>.</p>      <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kilofant.de/index.html b/sites/kilofant.de/index.html
index 2f7c114..f0797b2 100644
--- a/sites/kilofant.de/index.html
+++ b/sites/kilofant.de/index.html
@@ -3,12 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KIlofant — KI so groß, dass der Boden wackelt</title>
   <meta name="description" content="KIlofant — KI + Elefant. Verspielt, groß, unvergesslich. KI-Lösungen die man nicht vergisst.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐘</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after {
       margin: 0; padding: 0; box-sizing: border-box;
@@ -741,10 +743,6 @@
     <div class="footer-elephants wobble-it">🐘 🐘 🐘 🐘 🐘</div>
     <p class="footer-text shake-it" data-de="Hier war mal eine Webseite. Dann kam der KIlofant." data-en="There used to be a website here. Then came the KIlofant.">Hier war mal eine Webseite. Dann kam der KIlofant.</p>
     <p class="footer-copy" data-de="© 2026 KIlofant.de — ein Projekt von &lt;a href=&quot;https://msbls.de&quot;&gt;msbls.de&lt;/a&gt;" data-en="© 2026 KIlofant.de — a project by &lt;a href=&quot;https://msbls.de&quot;&gt;msbls.de&lt;/a&gt;">&copy; 2026 KIlofant.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
-    <div style="text-align:center;margin-top:16px;">
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--tusk,#F5E6C8);color:var(--tusk,#F5E6C8);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.7;">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--tusk,#F5E6C8);font-size:0.6rem;opacity:0.4;">Maschinell übersetzt</small>
-    </div>
   </footer>
 
   </div>
@@ -788,6 +786,8 @@
     observer.observe(herdParade);
   </script>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kinough.de/index.html b/sites/kinough.de/index.html
index 8e8c64a..6861f70 100644
--- a/sites/kinough.de/index.html
+++ b/sites/kinough.de/index.html
@@ -3,8 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>KInough — Es reicht.</title>
     <meta name="description" content="Es reicht.">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         * {
             margin: 0;
@@ -79,11 +81,9 @@
         <p data-de="Wir fordern ein Innehalten. Ein Moratorium. Zeit, um zu verstehen, was wir gebaut haben &mdash; bevor sie versteht, was wir sind." data-en="We demand a pause. A moratorium. Time to understand what we have built — before it understands what we are.">Wir fordern ein Innehalten. Ein Moratorium. Zeit, um zu verstehen, was wir gebaut haben &mdash; bevor sie versteht, was wir sind.</p>
         <p class="echo" data-de="Es reicht." data-en="Enough.">Es reicht.</p>
     </main>
-    <div style="text-align:center;margin-top:16px;">
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-    </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kinowhow.de/index.html b/sites/kinowhow.de/index.html
index bdf0b78..834cd4c 100644
--- a/sites/kinowhow.de/index.html
+++ b/sites/kinowhow.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>KiNOWHOW — KI-Wissen. Jetzt.</title>
   <meta name="description" content="KiNOWHOW — KI + Know-How. Beratung, Wissen und Strategie rund um künstliche Intelligenz.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>K</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
 
@@ -649,14 +651,12 @@
   <footer>
     <div class="container">
       <p><span style="color: var(--accent);">Ki</span>NOWHOW.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kitox.de/index.html b/sites/kitox.de/index.html
index 0abe950..4ac2668 100644
--- a/sites/kitox.de/index.html
+++ b/sites/kitox.de/index.html
@@ -3,11 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>KItox — Dein KI-Detox</title>
     <meta name="description" content="KItox ist die 7-Tage KI-Detox Challenge. Bewusster Entzug von künstlicher Intelligenz.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         *, *::before, *::after {
             margin: 0;
@@ -417,10 +419,6 @@
 
     <footer>
       <span>KItox &mdash; 2026</span>
-      <div style="text-align:center;margin-top:16px;opacity:1;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </footer>
 
     <script>
@@ -436,6 +434,8 @@
     </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/knzlmgmt.de/index.html b/sites/knzlmgmt.de/index.html
index 6265236..251cef8 100644
--- a/sites/knzlmgmt.de/index.html
+++ b/sites/knzlmgmt.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>knzlmgmt.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚖️</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@@ -55,9 +57,10 @@
     <div class="divider"></div>
     <p class="subtitle" data-de="Kanzleimanagement. Neu gedacht." data-en="Law firm management. Reimagined.">Kanzleimanagement. Neu gedacht.</p>
     <p class="footer">knzlmgmt.de</p>
-    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/kopffrai.de/index.html b/sites/kopffrai.de/index.html
index 0b194d9..14d6659 100644
--- a/sites/kopffrai.de/index.html
+++ b/sites/kopffrai.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>kopffrAI.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧠</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@@ -55,9 +57,10 @@
     <div class="divider"></div>
     <p class="subtitle" data-de="Klarer Kopf. Kuenstliche Intelligenz." data-en="Clear mind. Artificial intelligence.">Klarer Kopf. Kuenstliche Intelligenz.</p>
     <p class="footer">kopffrAI.de</p>
-    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/legalais.de/index.html b/sites/legalais.de/index.html
index 5e93f4c..f7d6adb 100644
--- a/sites/legalais.de/index.html
+++ b/sites/legalais.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Legal AIs — KI fuer die Rechtspraxis</title>
   <meta name="description" content="Legal AIs — Kuenstliche Intelligenz, die Rechtsarbeit transformiert. Recherche, Analyse, Entwuerfe — praezise, schnell, zuverlaessig.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>L</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -377,14 +379,12 @@
   <footer>
     <div class="container">
       <p>Legal<span style="color: var(--accent);">AI</span>s.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" target="_blank" rel="noopener">msbls.de</a></p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/lexsiebels.de/index.html b/sites/lexsiebels.de/index.html
index ba88eeb..8acc22d 100644
--- a/sites/lexsiebels.de/index.html
+++ b/sites/lexsiebels.de/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>Lex Siebels — Knowledge Lawyer, Patent & UPC</title>
     <meta name="description" content="Matthias Siebels — Knowledge Lawyer bei Hogan Lovells. Patentrecht, Unified Patent Court, IP-Strategie, Legal Tech.">
     <meta property="og:title" content="Lex Siebels — Knowledge Lawyer, Patent & UPC">
@@ -12,6 +13,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -29,6 +31,10 @@
             --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         }
 
+        [data-theme="light"] {
+            --text-bright: #1a1a1a;
+        }
+
         html { scroll-behavior: smooth; }
 
         body {
@@ -533,10 +539,6 @@
                 Dies ist eine persönliche Seite. Keine Rechtsberatung.
                 &mdash; This is a personal page. No legal advice.
             </div>
-            <div style="text-align:center;margin-top:16px;">
-              <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid rgba(200,164,110,0.3);color:rgba(200,164,110,0.6);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-              <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:rgba(200,164,110,0.4);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-            </div>
         </div>
     </footer>
 
@@ -556,6 +558,8 @@
 
     <script src="/shared/impressum.js" data-owner="flexsiebels" data-variant="full"></script>
     <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+    <script src="/shared/theme.js"></script>
     <script src="/shared/i18n.js"></script>
+    <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/machesdocheinfach.de/index.html b/sites/machesdocheinfach.de/index.html
index 5f9e774..b6ea231 100644
--- a/sites/machesdocheinfach.de/index.html
+++ b/sites/machesdocheinfach.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Mach es doch einfach.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500&display=swap');
 
@@ -20,6 +22,10 @@
       --line: rgba(232, 120, 58, 0.15);
     }
 
+    [data-theme="light"] {
+        --text-faint: #6e6452;
+    }
+
     html { scroll-behavior: smooth; }
 
     body {
@@ -220,15 +226,13 @@
 
     <footer>
       <p>machesdocheinfach.de</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </footer>
 
   </div>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/mai-otto.de/index.html b/sites/mai-otto.de/index.html
index 05cfb80..427fe79 100644
--- a/sites/mai-otto.de/index.html
+++ b/sites/mai-otto.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Otto — mAI Personal Assistant</title>
   <meta name="description" content="Otto ist Matthias' autonomer KI-Assistent. E-Mail, Kalender, Infrastruktur, Recherche — alles im Griff.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐙</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
 
@@ -433,15 +435,13 @@
   <footer>
     <div class="container">
       <p><span class="otto">Otto</span> — mai-otto.de — <span data-de="ein Projekt von" data-en="a project by">ein Projekt von</span> <a href="https://msbls.de" style="color:var(--text-muted);text-decoration:none;">msbls.de</a></p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
   <script src="/shared/impressum.js" data-owner="flexsiebels" data-variant="full"></script>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/martinsiebels.de/index.html b/sites/martinsiebels.de/index.html
index 3ed1c89..5cae4a9 100644
--- a/sites/martinsiebels.de/index.html
+++ b/sites/martinsiebels.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Martin Siebels — Profil</title>
   <meta name="description" content="Martin Siebels — Osnabrück. Berufliches Profil.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>M</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -411,15 +413,13 @@
   <footer>
     <div class="container">
       <p>martinsiebels.de</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
   <script src="/shared/impressum.js" data-owner="martinsiebels" data-variant="full"></script>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/matthiasbreier.de/index.html b/sites/matthiasbreier.de/index.html
index 1c37ce8..b61069f 100644
--- a/sites/matthiasbreier.de/index.html
+++ b/sites/matthiasbreier.de/index.html
@@ -3,11 +3,13 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>Matthias Breier — IT Projektmanager</title>
     <meta name="description" content="Matthias Breier — IT Projektmanager. Digitale Transformation, Agile Methoden, Strategische IT-Beratung.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         *, *::before, *::after {
             margin: 0;
@@ -32,6 +34,10 @@
             --text-light: #cbd5e1;
         }
 
+        [data-theme="light"] {
+            --text-light: #475569;
+        }
+
         html {
             scroll-behavior: smooth;
         }
@@ -931,10 +937,6 @@
     <footer>
         <div class="footer-brand">Matthias Breier</div>
         <p data-de="IT Projektmanagement" data-en="IT Project Management">IT Projektmanagement</p>
-        <div style="text-align:center;margin-top:16px;">
-          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.3);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:rgba(255,255,255,0.3);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-        </div>
     </footer>
 
     <script>
@@ -953,6 +955,8 @@
     </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/omakise.de/index.html b/sites/omakise.de/index.html
index 2265cbe..6371cba 100644
--- a/sites/omakise.de/index.html
+++ b/sites/omakise.de/index.html
@@ -3,12 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>OmaKIse — KI-Erlebnis, vom Chef kuratiert</title>
   <meta name="description" content="OmaKIse — Omakase + KI. Kuratierte KI-Beratung wie ein Omakase-Menü. Du bekommst was der Chef empfiehlt.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🍣</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after {
       margin: 0; padding: 0; box-sizing: border-box;
@@ -634,11 +636,12 @@
   <footer>
     <div class="container">
       <p>Oma<span style="color:var(--aka);">KI</span>se.de — ein Projekt von <a href="https://msbls.de">msbls.de</a></p>
-      <button data-i18n-toggle style="margin-top:12px;background:none;border:1px solid var(--ink-ghost);color:var(--ink-faint);padding:5px 12px;border-radius:4px;font-size:0.75rem;cursor:pointer;font-family:inherit;letter-spacing:0.06em;">EN</button>
     </div>
   </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/orakil.de/index.html b/sites/orakil.de/index.html
index 5eba299..f8dc5ee 100644
--- a/sites/orakil.de/index.html
+++ b/sites/orakil.de/index.html
@@ -3,12 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>OraKIl — Frag das Orakel</title>
   <meta name="description" content="Das Orakel weiß. Frag.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔮</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -27,6 +29,10 @@
       --text-muted: #837867;
     }
 
+    [data-theme="light"] {
+        --gold-dim: #6c5b1a;
+    }
+
     html { scroll-behavior: smooth; }
 
     body {
@@ -348,11 +354,6 @@
 
   <div class="ornament-bottom">&#x2726; &#x2726; &#x2726;</div>
 
-  <div class="footer-toggle">
-    <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-    <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-  </div>
-
   <script>
     (function() {
       var hint = document.querySelector('.hint');
@@ -443,6 +444,8 @@
   </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/osterai.de/index.html b/sites/osterai.de/index.html
index 8f33ac3..afb34ce 100644
--- a/sites/osterai.de/index.html
+++ b/sites/osterai.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>oster🥚AI — Frohe Ostern!</title>
   <meta name="description" content="osterAI — Frohe Ostern mit einer Prise künstlicher Intelligenz.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐣</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600&display=swap');
 
@@ -27,6 +29,10 @@
       --blue: #5898d0;
     }
 
+    [data-theme="light"] {
+        --text-faint: #6e6452;
+    }
+
     html { scroll-behavior: smooth; }
 
     body {
@@ -263,15 +269,13 @@
 
     <footer>
       <p data-de="oster&lt;span class=&quot;ai&quot;&gt;AI&lt;/span&gt;.de — Frohe Ostern 2026" data-en="oster&lt;span class=&quot;ai&quot;&gt;AI&lt;/span&gt;.de — Happy Easter 2026">oster<span class="ai">AI</span>.de — Frohe Ostern 2026</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </footer>
 
   </div>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/paragraphenraiter.de/index.html b/sites/paragraphenraiter.de/index.html
index af30d79..54bdbc5 100644
--- a/sites/paragraphenraiter.de/index.html
+++ b/sites/paragraphenraiter.de/index.html
@@ -742,10 +742,6 @@
         <p class="footer-brand">Paragraphen<span>rAI</span>ter</p>
         <p class="footer-legal" data-de="© 2026 · Recht. Aber schlauer." data-en="© 2026 · Law. But smarter.">&copy; 2026 &middot; Recht. Aber schlauer.</p>
         <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-        <div style="text-align:center;margin-top:16px;">
-          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-        </div>
     </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
diff --git a/sites/patentonkel.de/index.html b/sites/patentonkel.de/index.html
index 3e434c7..395c545 100644
--- a/sites/patentonkel.de/index.html
+++ b/sites/patentonkel.de/index.html
@@ -3,9 +3,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
     <title>Patentonkel — Dein Onkel fürs Patent. Nur klüger.</title>
     <meta name="description" content="KI-gestützte Patentberatung. Kein Anwalt, aber der klügste Onkel, den du je hattest.">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>👓</text></svg>">
+    <link rel="stylesheet" href="/shared/css/theme.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,700&family=Space+Mono:wght@400;700&display=swap');
 
@@ -30,6 +32,10 @@
             --surface: #f5efe3;
         }
 
+        [data-theme="light"] {
+            --warm-dim: #6e5418;
+        }
+
         html { scroll-behavior: smooth; }
 
         body {
@@ -652,13 +658,11 @@
         <p class="footer-tagline" data-de="Familiär. Kompetent. KI." data-en="Familiar. Competent. AI.">Familiär. Kompetent. KI.</p>
         <p class="footer-legal" data-de="© 2026 · Familienkompatibel ausgedacht." data-en="© 2026 · Family-compatibly conceived.">&copy; 2026 &middot; Familienkompatibel ausgedacht.</p>
         <div class="onepager-msbls-link" style="text-align:center;font-size:0.75rem;opacity:0.6;padding:12px 0;margin-top:4px;">Ein Projekt von <a href="https://msbls.de" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;">msbls.de</a></div>
-        <div style="text-align:center;margin-top:16px;">
-          <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-          <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-        </div>
     </footer>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/schulfrai.de/index.html b/sites/schulfrai.de/index.html
index 86ef732..af6c442 100644
--- a/sites/schulfrai.de/index.html
+++ b/sites/schulfrai.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>schulfrAI.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎓</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@@ -55,9 +57,10 @@
     <div class="divider"></div>
     <p class="subtitle" data-de="Lernen ohne Grenzen." data-en="Learning without limits.">Lernen ohne Grenzen.</p>
     <p class="footer">schulfrAI.de</p>
-    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/slopschild.de/index.html b/sites/slopschild.de/index.html
index 3d7455e..6abb035 100644
--- a/sites/slopschild.de/index.html
+++ b/sites/slopschild.de/index.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Slopschild — Das Stoppschild für KI-Slop</title>
   <meta name="description" content="Was du mir gerade geschickt hast, ist KI-Slop. Bitte hör auf.">
   <meta property="og:title" content="SLOP. Bitte hör auf.">
@@ -12,6 +13,7 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -360,12 +362,10 @@
   <footer>
     <p data-de="slopschild.de — Zum Weiterleiten an Slop-Verbreiter." data-en="slopschild.de — For forwarding to slop spreaders.">slopschild.de — Zum Weiterleiten an Slop-Verbreiter.</p>
     <p style="margin-top: 2rem; font-size: 0.7rem; opacity: 0.35; font-style: italic;" data-de="*this website has been fully generated by ai and should be considered slop" data-en="*this website has been fully generated by ai and should be considered slop">*this website has been fully generated by ai and should be considered slop</p>
-    <div style="text-align:center;margin-top:16px;">
-      <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-      <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-    </div>
   </footer>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/smartin3.de/index.html b/sites/smartin3.de/index.html
index dd2601b..0b9aa6d 100644
--- a/sites/smartin3.de/index.html
+++ b/sites/smartin3.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>sMARTin 3D — Smart in 3D</title>
   <meta name="description" content="sMARTin 3D — Dein 3D-Druck-Shop. Individuelle Teile, Prototypen, Kleinserien. Smart gedacht, präzise gedruckt.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧊</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500&display=swap');
 
diff --git a/sites/sorgenfrai.de/index.html b/sites/sorgenfrai.de/index.html
index 5e3ca9e..213950c 100644
--- a/sites/sorgenfrai.de/index.html
+++ b/sites/sorgenfrai.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>sorgenfrAI.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧘</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@@ -55,9 +57,10 @@
     <div class="divider"></div>
     <p class="subtitle" data-de="Deine Sorgen. Unsere AI." data-en="Your worries. Our AI.">Deine Sorgen. Unsere AI.</p>
     <p class="footer">sorgenfrAI.de</p>
-    <p class="footer" style="margin-top:12px;"><button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted);color:var(--text-muted);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button><br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small></p>
   </div>
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/traihard.de/index.html b/sites/traihard.de/index.html
index 2d35abe..39911a3 100644
--- a/sites/traihard.de/index.html
+++ b/sites/traihard.de/index.html
@@ -3,10 +3,12 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>traihard.de — Marginal Gains. Maximum Effort.</title>
   <meta name="description" content="Trai Hard — Optimierungswahn in allen Lebensbereichen. Rennrad, Fantasy Football, Productivity, Fitness. Marginal Gains everywhere.">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Orbitron:wght@700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
@@ -20,6 +22,10 @@
       --accent-glow: rgba(255, 62, 0, 0.12);
     }
 
+    [data-theme="light"] {
+        --muted: #555568;
+    }
+
     html { scroll-behavior: smooth; }
 
     body {
diff --git a/sites/vonschraitter.de/index.html b/sites/vonschraitter.de/index.html
index 8b16cc0..d9a85fa 100644
--- a/sites/vonschraitter.de/index.html
+++ b/sites/vonschraitter.de/index.html
@@ -3,9 +3,11 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Florian von Schreitter — Kartellrecht</title>
   <meta name="description" content="Florian von Schreitter — Kartellrechtsspezialist bei Hogan Lovells. Fusionskontrolle, Kartellverfahren, Compliance.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>F</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
@@ -668,10 +670,6 @@
   <footer>
     <div class="container">
       <p>vonschr<span style="color: var(--accent);">AI</span>tter.de — Florian von Schreitter</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </div>
   </footer>
 
@@ -687,6 +685,8 @@
   </script>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/wartebitte.de/index.html b/sites/wartebitte.de/index.html
index ccbd423..0a7e0d2 100644
--- a/sites/wartebitte.de/index.html
+++ b/sites/wartebitte.de/index.html
@@ -3,8 +3,10 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>Warte bitte.</title>
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🫖</text></svg>">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Newsreader:ital,wght@0,300;0,400;1,300;1,400&display=swap');
 
@@ -20,6 +22,10 @@
       --line: rgba(196, 168, 130, 0.2);
     }
 
+    [data-theme="light"] {
+        --text-faint: #6e685e;
+    }
+
     html { scroll-behavior: smooth; }
 
     body {
@@ -434,15 +440,13 @@
 
     <footer>
       <p>wartebitte.de</p>
-      <div style="text-align:center;margin-top:16px;">
-        <button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid var(--text-muted,#444);color:var(--text-muted,#444);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;">EN</button>
-        <br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-muted,#444);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
-      </div>
     </footer>
 
   </div>
 
   <script src="/shared/ai-disclosure.js" data-tone="playful"></script>
+  <script src="/shared/theme.js"></script>
   <script src="/shared/i18n.js"></script>
+  <script src="/shared/toggles.js"></script>
 </body>
 </html>
diff --git a/sites/zensiebels.de/index.html b/sites/zensiebels.de/index.html
index 1a49666..2cd5a28 100644
--- a/sites/zensiebels.de/index.html
+++ b/sites/zensiebels.de/index.html
@@ -3,12 +3,14 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
   <title>ZenSiebels — 静けさ</title>
   <meta name="description" content="ZenSiebels — Stille. Klarheit. Praxis.">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🪷</text></svg>">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600&family=Inter:wght@200;300;400&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/shared/css/theme.css">
   <style>
     *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
 
diff --git a/tools/patch-light-overrides.py b/tools/patch-light-overrides.py
new file mode 100644
index 0000000..a9936f6
--- /dev/null
+++ b/tools/patch-light-overrides.py
@@ -0,0 +1,113 @@
+#!/usr/bin/env python3
+"""Insert per-site [data-theme="light"] override block after :root.
+
+Each entry maps site -> dict of var -> light-value. Vars not listed
+fall through to shared/css/theme.css defaults.
+"""
+import re
+import sys
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+SITES_DIR = ROOT / "sites"
+
+OVERRIDES = {
+    "6034.de": {
+        "--green-dim": "#15803d",  # AA 4.7:1 on white
+    },
+    "allainallain.de": {
+        "--text-faint": "#5a608a",
+    },
+    "commanderkin.de": {
+        "--green-dim": "#166e16",
+    },
+    "hallofraumaier.de": {
+        "--text-light": "#6e6452",
+    },
+    "heygoldi.de": {
+        "--text-gentle": "#6e6452",
+    },
+    "keinefreun.de": {
+        "--text-dimmer": "#5a5662",
+        "--accent-dim": "#5d28b8",
+    },
+    "lexsiebels.de": {
+        "--text-bright": "#1a1a1a",  # high-contrast text inverts on light bg
+    },
+    "machesdocheinfach.de": {
+        "--text-faint": "#6e6452",
+    },
+    "matthiasbreier.de": {
+        "--text-light": "#475569",
+    },
+    "orakil.de": {
+        "--gold-dim": "#6c5b1a",
+    },
+    "osterai.de": {
+        "--text-faint": "#6e6452",
+    },
+    "patentonkel.de": {
+        "--warm-dim": "#6e5418",
+    },
+    "traihard.de": {
+        "--muted": "#555568",
+    },
+    "wartebitte.de": {
+        "--text-faint": "#6e685e",
+    },
+}
+
+
+def find_root_block(html):
+    """Find the first `:root {...}` block. Returns (start, end) of `}` char or None."""
+    m = re.search(r":root\s*\{", html)
+    if not m:
+        return None
+    depth = 1
+    i = m.end()
+    while i < len(html) and depth > 0:
+        if html[i] == "{":
+            depth += 1
+        elif html[i] == "}":
+            depth -= 1
+        i += 1
+    if depth != 0:
+        return None
+    return i  # position right after the closing brace
+
+
+def detect_root_indent(html, root_end):
+    """Look at line containing :root to detect indent."""
+    # find start of line with :root
+    m = re.search(r"^([ \t]*):root\s*\{", html, re.MULTILINE)
+    if m:
+        return m.group(1)
+    return "    "
+
+
+def patch_site(site, vars_map):
+    path = SITES_DIR / site / "index.html"
+    if not path.exists():
+        return f"missing index.html"
+    html = path.read_text()
+    if '[data-theme="light"]' in html:
+        return f"already has [data-theme=\"light\"] block — skipped"
+    end = find_root_block(html)
+    if end is None:
+        return f"no :root block found"
+    indent = detect_root_indent(html, end)
+    inner = "\n".join(f"{indent}    {k}: {v};" for k, v in vars_map.items())
+    block = f"\n\n{indent}[data-theme=\"light\"] {{\n{inner}\n{indent}}}"
+    new_html = html[:end] + block + html[end:]
+    path.write_text(new_html)
+    return f"patched ({len(vars_map)} vars)"
+
+
+def main():
+    for site, vars_map in OVERRIDES.items():
+        result = patch_site(site, vars_map)
+        print(f"  {site}: {result}")
+
+
+if __name__ == "__main__":
+    main()
diff --git a/tools/patch-theme.py b/tools/patch-theme.py
new file mode 100644
index 0000000..6815e86
--- /dev/null
+++ b/tools/patch-theme.py
@@ -0,0 +1,134 @@
+#!/usr/bin/env python3
+"""Patch onepager sites with theme-toggle wiring.
+
+Inserts (idempotent):
+  1. anti-FOUC inline IIFE after <meta name="viewport">
+  2. <link rel="stylesheet" href="/shared/css/theme.css"> before first <style>
+  3. <script src="/shared/theme.js"> before <script src="/shared/i18n.js">
+  4. <script src="/shared/toggles.js"> after <script src="/shared/i18n.js">
+
+Skips sites that already have any of the markers.
+
+Usage:
+  python3 tools/patch-theme.py <site-dir> [<site-dir> ...]
+  python3 tools/patch-theme.py --all       # all sites with index.html, skip dynamic
+"""
+import re
+import sys
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+SITES_DIR = ROOT / "sites"
+
+ANTI_FOUC = "<script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>"
+
+THEME_LINK = '<link rel="stylesheet" href="/shared/css/theme.css">'
+THEME_SCRIPT = '<script src="/shared/theme.js"></script>'
+TOGGLES_SCRIPT = '<script src="/shared/toggles.js"></script>'
+
+
+def detect_indent(line):
+    """Return leading whitespace prefix of a line."""
+    m = re.match(r"^(\s*)", line)
+    return m.group(1) if m else ""
+
+
+def patch(html):
+    """Apply 4 insertions idempotently. Returns (new_html, changed_bool)."""
+    changed = False
+
+    # 1) Anti-FOUC after <meta name="viewport"...>
+    if "onepager-theme" not in html:
+        m = re.search(r'^([ \t]*)<meta\s+name="viewport"[^>]*>\s*$', html, re.MULTILINE)
+        if m:
+            indent = m.group(1)
+            insert = f"\n{indent}{ANTI_FOUC}"
+            html = html[: m.end()] + insert + html[m.end():]
+            changed = True
+        else:
+            return html, False  # can't anchor — bail
+
+    # 2) <link rel="stylesheet" href="/shared/css/theme.css"> before first <style>
+    if THEME_LINK not in html:
+        m = re.search(r'^([ \t]*)<style[ >]', html, re.MULTILINE)
+        if m:
+            indent = m.group(1)
+            insert = f"{indent}{THEME_LINK}\n"
+            html = html[: m.start()] + insert + html[m.start():]
+            changed = True
+
+    # 3) theme.js before i18n.js
+    if "/shared/theme.js" not in html:
+        m = re.search(r'^([ \t]*)<script\s+src="/shared/i18n\.js"></script>\s*$', html, re.MULTILINE)
+        if m:
+            indent = m.group(1)
+            insert = f"{indent}{THEME_SCRIPT}\n"
+            html = html[: m.start()] + insert + html[m.start():]
+            changed = True
+
+    # 4) toggles.js after i18n.js
+    if "/shared/toggles.js" not in html:
+        m = re.search(r'^([ \t]*)<script\s+src="/shared/i18n\.js"></script>\s*$', html, re.MULTILINE)
+        if m:
+            indent = m.group(1)
+            # Insert AFTER the i18n.js line
+            end = m.end()
+            # Make sure we put on a new line
+            insert = f"\n{indent}{TOGGLES_SCRIPT}"
+            html = html[:end] + insert + html[end:]
+            changed = True
+
+    return html, changed
+
+
+def main():
+    if "--all" in sys.argv:
+        sites = []
+        for d in sorted(SITES_DIR.iterdir()):
+            if d.is_dir() and (d / "index.html").exists():
+                sites.append(d)
+    else:
+        sites = []
+        for arg in sys.argv[1:]:
+            p = Path(arg)
+            if not p.is_absolute():
+                p = SITES_DIR / arg
+            if not p.is_dir():
+                print(f"skip: {arg} not a directory", file=sys.stderr)
+                continue
+            if not (p / "index.html").exists():
+                print(f"skip: {p}/index.html missing", file=sys.stderr)
+                continue
+            sites.append(p)
+
+    if not sites:
+        print("no sites to patch", file=sys.stderr)
+        sys.exit(2)
+
+    patched, skipped, missing_anchor = 0, 0, []
+    for site in sites:
+        path = site / "index.html"
+        before = path.read_text()
+        after, changed = patch(before)
+        if not changed:
+            if "onepager-theme" in before and "/shared/toggles.js" in before:
+                skipped += 1
+                print(f"  [unchanged] {site.name}")
+            else:
+                missing_anchor.append(site.name)
+                print(f"  [no-anchor] {site.name}")
+        else:
+            path.write_text(after)
+            patched += 1
+            print(f"  [patched]   {site.name}")
+
+    print(f"\nPatched: {patched}, Already-up-to-date: {skipped}, No-anchor: {len(missing_anchor)}")
+    if missing_anchor:
+        print("Missing anchors (manual fix needed):")
+        for s in missing_anchor:
+            print(f"  - {s}")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/tools/remove-footer-toggle.py b/tools/remove-footer-toggle.py
new file mode 100644
index 0000000..9e2eb30
--- /dev/null
+++ b/tools/remove-footer-toggle.py
@@ -0,0 +1,111 @@
+#!/usr/bin/env python3
+"""Remove the redundant footer [data-i18n-toggle] block.
+
+After Issue #13 the top-right widget owns toggling. The legacy footer button
++ "Maschinell übersetzt" disclaimer line are now redundant — top-right button
+has the same disclaimer in its title tooltip, and ai-disclosure.js still
+adds the AI footnote.
+
+Two patterns handled:
+  Pattern A: <div style="text-align:center;margin-top:16px..."> ... </div>
+  Pattern B (knzlmgmt, schulfrai): <p class="footer" style="margin-top:12px;">...</p>
+
+Idempotent — sites without the patterns are skipped.
+"""
+import re
+import sys
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parent.parent
+SITES_DIR = ROOT / "sites"
+
+# Pattern A: a div wrapping the button + br + small disclaimer.
+# Allow extra style segments after margin-top:16px (some sites add ;opacity:1 etc.)
+PATTERN_A = re.compile(
+    r'\s*<div\s+style="text-align:center;margin-top:16px[^"]*">\s*'
+    r'<button\s+data-i18n-toggle[\s\S]*?</button>\s*'
+    r'<br>\s*<small[^>]*data-de="Maschinell übersetzt"[^>]*>[\s\S]*?</small>\s*'
+    r'</div>',
+    re.IGNORECASE,
+)
+
+# Pattern B: <p class="footer" style="margin-top:12px;">...</p>
+PATTERN_B = re.compile(
+    r'\s*<p\s+class="footer"\s+style="margin-top:12px;">'
+    r'<button\s+data-i18n-toggle[\s\S]*?'
+    r'</p>',
+    re.IGNORECASE,
+)
+
+# Pattern C: bare button (optionally followed by <br><small>...</small>),
+# not enclosed in our standard wrappers. Used by sites that placed the
+# toggle inline in a footer paragraph (ichbinotto, kainco, keinefreun,
+# omakise) or in a custom-classed div (orakil).
+PATTERN_C = re.compile(
+    r'\s*<button\s+data-i18n-toggle[\s\S]*?</button>'
+    r'(?:\s*<br>\s*<small[^>]*data-de="Maschinell übersetzt"[^>]*>[\s\S]*?</small>)?',
+    re.IGNORECASE,
+)
+
+# Pattern D: <div class="footer-toggle">...</div> (orakil only, but tolerant)
+PATTERN_D = re.compile(
+    r'\s*<div\s+class="footer-toggle">\s*'
+    r'<button\s+data-i18n-toggle[\s\S]*?</button>\s*'
+    r'<br>\s*<small[^>]*data-de="Maschinell übersetzt"[^>]*>[\s\S]*?</small>\s*'
+    r'</div>',
+    re.IGNORECASE,
+)
+
+
+def patch(html):
+    new = html
+    # Wrappers first (they contain a button); then bare-button fallback.
+    new, n_a = PATTERN_A.subn("", new)
+    new, n_b = PATTERN_B.subn("", new)
+    new, n_d = PATTERN_D.subn("", new)
+    new, n_c = PATTERN_C.subn("", new)
+    return new, n_a + n_b + n_c + n_d
+
+
+def main():
+    sites = sorted(p for p in SITES_DIR.iterdir() if p.is_dir() and (p / "index.html").exists())
+    total_removed = 0
+    sites_changed = 0
+    sites_with_attr = 0
+    sites_residual = []
+
+    for site in sites:
+        path = site / "index.html"
+        before = path.read_text()
+        if "data-i18n-toggle" not in before:
+            continue
+        sites_with_attr += 1
+
+        # Count old buttons before removal (we expect exactly 1 footer button per site;
+        # the new top-right widget injects its own at runtime, not in source).
+        before_count = len(re.findall(r"data-i18n-toggle", before))
+
+        after, removed = patch(before)
+        after_count = len(re.findall(r"data-i18n-toggle", after))
+
+        if removed > 0:
+            path.write_text(after)
+            sites_changed += 1
+            total_removed += removed
+            print(f"  [removed {removed}] {site.name}  (data-i18n-toggle: {before_count} -> {after_count})")
+            if after_count > 0:
+                sites_residual.append((site.name, after_count))
+        else:
+            sites_residual.append((site.name, before_count))
+            print(f"  [no-match] {site.name}  (still has {before_count} data-i18n-toggle)")
+
+    print(f"\nSites changed: {sites_changed}/{sites_with_attr}")
+    print(f"Total wrappers removed: {total_removed}")
+    if sites_residual:
+        print(f"\nSites with residual data-i18n-toggle attribute (manual review):")
+        for name, n in sites_residual:
+            print(f"  - {name}: {n}")
+
+
+if __name__ == "__main__":
+    main()
