diff --git a/AUSFUELLEN.md b/AUSFUELLEN.md
index c13c8e1..848f484 100644
--- a/AUSFUELLEN.md
+++ b/AUSFUELLEN.md
@@ -173,3 +173,29 @@ template/
 
 Die Farbe des Designs (Akzentfarbe) lässt sich oben im `<script>`-Datenblock bzw. über
 `--accent` steuern (Voreinstellung Blau `#2FA4F0`).
+
+---
+
+## Farbwelt (ab Anreicherung 2.0)
+
+Alle markentragenden Farben stehen als CSS-Variablen im Block zwischen
+`/* WK-THEME-START */` und `/* WK-THEME-END */` ganz oben im `<style>`.
+Wer das Template von Hand einfärben will, ändert nur diesen Block — der Rest
+der Seite folgt automatisch (Sektionen, dekorative Bänder, Buttons, Overlays
+und der `hue-rotate`-Winkel der Hintergrundfotos).
+
+Die Anreicherungs-Routine ersetzt genau diesen Block pro Betrieb mit einer aus
+dem Logo abgeleiteten, kontrastgeprüften Palette und legt sie zusätzlich als
+`.webklar-theme.json` im Repo ab.
+
+## Texte pro Betrieb (`data-wk-copy`)
+
+Elemente mit `data-wk-copy="…"` (Hero-Subline, Leistungskarten, Über-uns,
+Philosophie, Kontakt-Intro) sind die Stellen, die pro Betrieb neu geschrieben
+werden. Der Inhalt darf komplett ersetzt werden; die Struktur bleibt.
+
+## Leere Bereiche (`data-wk-section`)
+
+`data-wk-section="referenzen"` und `data-wk-section="inhaber-foto"` werden
+ausgeblendet (`hidden`), wenn dafür keine echten Bilder vorliegen — statt ein
+leeres Gerüst zu zeigen.
diff --git a/index.html b/index.html
index d179715..600f217 100644
--- a/index.html
+++ b/index.html
@@ -12,12 +12,44 @@
 <link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet">
 <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
 <style>
+  /* WK-THEME-START */
+  :root{
+    --wk-accent:#F0912F;
+    --wk-accent-dark:#b96d1f;
+    --wk-on-accent:#0d0f12;
+    --wk-deep:#0D2A46;
+    --wk-deep-2:#10151b;
+    --wk-page:#0d0f12;
+    --wk-band-1:#164a7d;
+    --wk-band-2:#123a63;
+    --wk-band-3:#1d5c99;
+    --wk-band-4:#0f3154;
+    --wk-glow:#2FA4F0;
+    --wk-glow-soft:#9FD1F5;
+    --wk-ink:#f5f4f0;
+    --wk-body:#c9d6e2;
+    --wk-body-2:#e7e9ec;
+    --wk-body-soft:#c5c9ce;
+    --wk-muted:#8fa4b8;
+    --wk-card:#F1F0EB;
+    --wk-card-ink:#0D2A46;
+    --wk-card-body:#45535f;
+    --wk-card-tag:#1b72af;
+    --wk-tint-soft:rgba(18,60,120,0.32);
+    --wk-tint-strong:rgba(18,60,120,0.38);
+    --wk-veil-strong:rgba(13,42,70,.45);
+    --wk-veil-soft:rgba(13,42,70,.10);
+    --wk-hero-hue:85deg;
+  }
+  /* WK-THEME-END */
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { background: #0d0f12; font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
+  body { background: var(--wk-page); font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
   a { color: #f0f0ec; text-decoration: none; }
   a:hover { color: var(--accent, #F0912F); }
   @keyframes lw-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
   @keyframes lw-fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
+  [data-wk-section][hidden] { display: none !important; }
+  .lw-about:has(> [data-wk-section="inhaber-foto"][hidden]) { grid-template-columns: 1fr !important; }
   @media (max-width: 1080px) {
     .lw-review { display: none !important; }
   }
@@ -52,18 +84,18 @@
   }
 </style>
 </helmet>
-<div ref="{{ rootRef }}" style="width: 100%; --accent: #F0912F; background: #0d0f12;">
+<div ref="{{ rootRef }}" style="width: 100%; --accent: var(--wk-accent); background: var(--wk-page);">
 
   <!-- HERO -->
   <div style="position: relative; min-height: 100vh; overflow: hidden;">
 
   <!-- BACKGROUND -->
   <div style="position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 78% 12%, #1c2530 0%, #12161b 42%, #0a0c0f 100%);"></div>
-  <div style="position: absolute; inset: 0; z-index: 1; filter: hue-rotate(85deg) saturate(1.15);">
+  <div style="position: absolute; inset: 0; z-index: 1; filter: hue-rotate(var(--wk-hero-hue, 85deg)) saturate(1.15);">
     <img src="assets/hero-tankklappe.jpg" alt="" style="display: block; width: 100%; height: 100%; object-fit: cover;">
   </div>
   <!-- blue tint -->
-  <div style="position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(18,60,120,0.32); mix-blend-mode: multiply;"></div>
+  <div style="position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--wk-tint-soft); mix-blend-mode: multiply;"></div>
   <!-- legibility overlay (click-through) -->
   <div style="position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(9,11,14,0.82) 0%, rgba(9,11,14,0.34) 30%, rgba(9,11,14,0.30) 55%, rgba(9,11,14,0.86) 100%);"></div>
   <div style="position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(90% 70% at 22% 42%, rgba(9,11,14,0.55) 0%, rgba(9,11,14,0) 60%);"></div>
@@ -103,7 +135,7 @@
 
       <!-- headline block -->
       <div style="max-width: 720px; margin: 0 auto; text-align: center; animation: lw-fadein .7s ease both;">
-        <h1 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.08; letter-spacing: -0.005em; color: #f5f4f0; font-size: clamp(36px, 4.8vw, 64px); margin-bottom: 22px;">
+        <h1 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.08; letter-spacing: -0.005em; color: var(--wk-ink); font-size: clamp(36px, 4.8vw, 64px); margin-bottom: 22px;">
           <span style="display: block;">Rein mit
             <span ref="{{ wordSlotRef }}" style="display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; text-align: left;">
               <span ref="{{ wordRef }}" style="display: inline-block; color: var(--accent, #F0912F); font-style: italic; will-change: transform, opacity;">Kratzer</span>
@@ -112,7 +144,7 @@
           <span style="display: block;">Raus wie neu.</span>
         </h1>
 
-        <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: #c5c9ce; max-width: 560px; margin: 0 auto; font-weight: 500;">
+        <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: var(--wk-body-soft); max-width: 560px; margin: 0 auto; font-weight: 500;" data-wk-copy="hero-subline">
           Wir reparieren alles! Mit Originalteilen und neuester Technik zu fairen Preisen. Als wäre nichts passiert.
         </p>
       </div>
@@ -124,17 +156,17 @@
       <div class="lw-benefits" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 48px); padding: 28px 0 46px;">
 
         <div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
-          <p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Fahrzeug-Reparatur wie in der Vertragswerkstatt — nur günstiger</p>
+          <p style="font-size: 15.5px; line-height: 1.4; color: var(--wk-body-2); font-weight: 600;" data-wk-copy="benefit-1">Fahrzeug-Reparatur wie in der Vertragswerkstatt — nur günstiger</p>
         </div>
 
         <div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
           <img src="assets/benefit01.svg" alt="" width="22" height="27" style="opacity: .95;">
-          <p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Wir nutzen Premium-Lacke</p>
+          <p style="font-size: 15.5px; line-height: 1.4; color: var(--wk-body-2); font-weight: 600;" data-wk-copy="benefit-2">Wir nutzen Premium-Lacke</p>
         </div>
 
         <div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
           <img src="assets/benefit02.svg" alt="" width="30" height="24" style="opacity: .95;">
-          <p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Wir verbauen nur Originalteile</p>
+          <p style="font-size: 15.5px; line-height: 1.4; color: var(--wk-body-2); font-weight: 600;" data-wk-copy="benefit-3">Wir verbauen nur Originalteile</p>
         </div>
 
         <div style="display: flex; flex-direction: column; gap: 14px;">
@@ -148,7 +180,7 @@
             </span>
           </a>
           <img src="assets/benefit03.svg" alt="" width="20" height="30" style="opacity: .95;">
-          <p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Wir arbeiten mit der gleichen Genauigkeit</p>
+          <p style="font-size: 15.5px; line-height: 1.4; color: var(--wk-body-2); font-weight: 600;" data-wk-copy="benefit-4">Wir arbeiten mit der gleichen Genauigkeit</p>
         </div>
       </div>
     </div>
@@ -156,52 +188,52 @@
   </div>
 
   <!-- LEISTUNGEN SECTION -->
-  <section id="services" data-screen-label="Leistungen" style="position: relative; overflow: hidden; background: #0D2A46; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
+  <section id="services" data-screen-label="Leistungen" style="position: relative; overflow: hidden; background: var(--wk-deep); padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
     <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;">
-      <path d="M-100,780 C300,620 500,930 900,760 C1180,640 1350,700 1540,560" fill="none" stroke="#164a7d" stroke-width="150" stroke-linecap="round" opacity="0.75"></path>
-      <path d="M-120,320 C260,480 620,120 980,300 C1240,430 1380,320 1560,400" fill="none" stroke="#123a63" stroke-width="190" stroke-linecap="round" opacity="0.8"></path>
-      <path d="M-80,90 C380,220 760,-40 1120,120 C1330,215 1450,140 1560,190" fill="none" stroke="#1d5c99" stroke-width="110" stroke-linecap="round" opacity="0.55"></path>
-      <path d="M-100,560 C340,420 700,660 1080,500 C1300,410 1420,470 1560,410" fill="none" stroke="#0f3154" stroke-width="230" stroke-linecap="round" opacity="0.9"></path>
+      <path d="M-100,780 C300,620 500,930 900,760 C1180,640 1350,700 1540,560" fill="none" stroke="var(--wk-band-1)" stroke-width="150" stroke-linecap="round" opacity="0.75"></path>
+      <path d="M-120,320 C260,480 620,120 980,300 C1240,430 1380,320 1560,400" fill="none" stroke="var(--wk-band-2)" stroke-width="190" stroke-linecap="round" opacity="0.8"></path>
+      <path d="M-80,90 C380,220 760,-40 1120,120 C1330,215 1450,140 1560,190" fill="none" stroke="var(--wk-band-3)" stroke-width="110" stroke-linecap="round" opacity="0.55"></path>
+      <path d="M-100,560 C340,420 700,660 1080,500 C1300,410 1420,470 1560,410" fill="none" stroke="var(--wk-band-4)" stroke-width="230" stroke-linecap="round" opacity="0.9"></path>
     </svg>
-    <div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,42,70,.45) 0%, rgba(13,42,70,.10) 40%, rgba(13,42,70,.45) 100%); pointer-events: none;"></div>
+    <div style="position: absolute; inset: 0; background: linear-gradient(180deg, var(--wk-veil-strong) 0%, var(--wk-veil-soft) 40%, var(--wk-veil-strong) 100%); pointer-events: none;"></div>
 
     <div style="position: relative; max-width: 1320px; margin: 0 auto;">
       <div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);">
-        <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Leistungen</span>
-        <h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Alles rund um den Lack – aus einer Hand</h2>
-        <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ob Neuwagen, Alltagsauto oder Klassiker: Wir bringen jede Oberfläche zurück in Bestform. Präzise vorbereitet, sauber lackiert, perfekt finiert.</p>
+        <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wk-glow-soft); margin-bottom: 16px;">Leistungen</span>
+        <h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: var(--wk-ink); font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;" data-wk-copy="services-title">Alles rund um den Lack – aus einer Hand</h2>
+        <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--wk-body); font-weight: 500;" data-wk-copy="services-intro">Ob Neuwagen, Alltagsauto oder Klassiker: Wir bringen jede Oberfläche zurück in Bestform. Präzise vorbereitet, sauber lackiert, perfekt finiert.</p>
       </div>
 
       <div class="lw-services" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px);">
 
-        <div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
-          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Lackierungen aller Art</h3>
-          <p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Vom Kotflügel bis zur Komplettlackierung – markenunabhängig, farbtongenau und in dauerhafter Qualität.</p>
-          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Uni · Metallic · Perleffekt</span>
+        <div style="background: var(--wk-card); border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
+          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: var(--wk-card-ink);" data-wk-copy="service-1-title">Lackierungen aller Art</h3>
+          <p style="font-size: 15.5px; line-height: 1.55; color: var(--wk-card-body); font-weight: 500; flex: 1;" data-wk-copy="service-1-text">Vom Kotflügel bis zur Komplettlackierung – markenunabhängig, farbtongenau und in dauerhafter Qualität.</p>
+          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-card-tag);" data-wk-copy="service-1-tag">Uni · Metallic · Perleffekt</span>
         </div>
 
-        <div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
-          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Smart Repair</h3>
-          <p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Kleine Kratzer, Steinschläge und Parkdellen punktgenau beseitigt – schnell, günstig und ohne sichtbaren Übergang.</p>
-          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Spot-Repair · Same Day</span>
+        <div style="background: var(--wk-card); border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
+          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: var(--wk-card-ink);" data-wk-copy="service-2-title">Smart Repair</h3>
+          <p style="font-size: 15.5px; line-height: 1.55; color: var(--wk-card-body); font-weight: 500; flex: 1;" data-wk-copy="service-2-text">Kleine Kratzer, Steinschläge und Parkdellen punktgenau beseitigt – schnell, günstig und ohne sichtbaren Übergang.</p>
+          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-card-tag);" data-wk-copy="service-2-tag">Spot-Repair · Same Day</span>
         </div>
 
-        <div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
-          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Oldtimer &amp; Klassiker</h3>
-          <p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Restaurierung mit Fingerspitzengefühl: originalgetreue Farbtöne und ein Finish, das dem Wert Ihres Fahrzeugs gerecht wird.</p>
-          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Restauration · Karosserie</span>
+        <div style="background: var(--wk-card); border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
+          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: var(--wk-card-ink);" data-wk-copy="service-3-title">Oldtimer &amp; Klassiker</h3>
+          <p style="font-size: 15.5px; line-height: 1.55; color: var(--wk-card-body); font-weight: 500; flex: 1;" data-wk-copy="service-3-text">Restaurierung mit Fingerspitzengefühl: originalgetreue Farbtöne und ein Finish, das dem Wert Ihres Fahrzeugs gerecht wird.</p>
+          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-card-tag);" data-wk-copy="service-3-tag">Restauration · Karosserie</span>
         </div>
 
-        <div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
-          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Lackaufbereitung &amp; Politur</h3>
-          <p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Professionelles Polieren, Versiegeln und Aufbereiten für tiefen Glanz und langanhaltenden Schutz Ihres Lacks.</p>
-          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Politur · Versiegelung</span>
+        <div style="background: var(--wk-card); border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
+          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: var(--wk-card-ink);" data-wk-copy="service-4-title">Lackaufbereitung &amp; Politur</h3>
+          <p style="font-size: 15.5px; line-height: 1.55; color: var(--wk-card-body); font-weight: 500; flex: 1;" data-wk-copy="service-4-text">Professionelles Polieren, Versiegeln und Aufbereiten für tiefen Glanz und langanhaltenden Schutz Ihres Lacks.</p>
+          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-card-tag);" data-wk-copy="service-4-tag">Politur · Versiegelung</span>
         </div>
 
-        <div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
-          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Felgen &amp; Motorrad</h3>
-          <p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Felgenaufbereitung und Motorradlackierung im gleichen hohen Standard – für den perfekten Auftritt bis ins Detail.</p>
-          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Felgen · Zweirad</span>
+        <div style="background: var(--wk-card); border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
+          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: var(--wk-card-ink);" data-wk-copy="service-5-title">Felgen &amp; Motorrad</h3>
+          <p style="font-size: 15.5px; line-height: 1.55; color: var(--wk-card-body); font-weight: 500; flex: 1;" data-wk-copy="service-5-text">Felgenaufbereitung und Motorradlackierung im gleichen hohen Standard – für den perfekten Auftritt bis ins Detail.</p>
+          <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-card-tag);" data-wk-copy="service-5-tag">Felgen · Zweirad</span>
         </div>
 
         <!-- LEISTUNGS-VIDEO — bewusst beibehalten (assets/leistungen-video.mp4) -->
@@ -209,9 +241,9 @@
           <video ref="{{ videoRef }}" src="assets/leistungen-video.mp4" autoplay muted loop playsinline style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;"></video>
           <div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,34,0) 45%, rgba(8,20,34,.78) 100%); pointer-events: none;"></div>
           <div style="position: absolute; left: 30px; right: 30px; bottom: 26px; display: flex; flex-direction: column; gap: 8px;">
-            <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #f5f4f0;">Design- &amp; Sonderlackierung</h3>
-            <p style="font-size: 14.5px; line-height: 1.5; color: #d8e2ec; font-weight: 500;">Individuelle Farbwünsche, Sondereffekte und Akzente – wir setzen Ihre Ideen sauber und hochwertig um.</p>
-            <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9FD1F5;">Custom · Effektlack</span>
+            <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: var(--wk-ink);" data-wk-copy="service-6-title">Design- &amp; Sonderlackierung</h3>
+            <p style="font-size: 14.5px; line-height: 1.5; color: var(--wk-body); font-weight: 500;" data-wk-copy="service-6-text">Individuelle Farbwünsche, Sondereffekte und Akzente – wir setzen Ihre Ideen sauber und hochwertig um.</p>
+            <span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wk-glow-soft);">Custom · Effektlack</span>
           </div>
         </div>
 
@@ -220,16 +252,16 @@
   </section>
 
   <!-- REFERENZEN SECTION — Vorher/Nachher-Vergleich entfernt, durch Foto-Galerie ersetzt -->
-  <section id="referenzen" data-screen-label="Referenzen" style="position: relative; overflow: hidden; background: #0D2A46; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
-    <img src="assets/bg-radkasten.jpg" alt="" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: hue-rotate(85deg) saturate(1.2); pointer-events: none;">
-    <div style="position: absolute; inset: 0; background: rgba(18,60,120,0.38); mix-blend-mode: multiply; pointer-events: none;"></div>
+  <section id="referenzen" data-wk-section="referenzen" data-screen-label="Referenzen" style="position: relative; overflow: hidden; background: var(--wk-deep); padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
+    <img src="assets/bg-radkasten.jpg" alt="" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: hue-rotate(var(--wk-hero-hue, 85deg)) saturate(1.2); pointer-events: none;">
+    <div style="position: absolute; inset: 0; background: var(--wk-tint-strong); mix-blend-mode: multiply; pointer-events: none;"></div>
     <div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,30,.8) 0%, rgba(10,18,30,.45) 45%, rgba(10,18,30,.8) 100%); pointer-events: none;"></div>
 
     <div style="position: relative; max-width: 1320px; margin: 0 auto;">
       <div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);">
-        <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Referenzen</span>
-        <h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Echte Arbeiten aus unserer Werkstatt</h2>
-        <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ein Auszug aus unseren Projekten. Ziehen Sie eigene Fotos (z.&nbsp;B. Vorher/Nachher) einfach per Drag &amp; Drop in die Platzhalter.</p>
+        <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wk-glow-soft); margin-bottom: 16px;">Referenzen</span>
+        <h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: var(--wk-ink); font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;" data-wk-copy="refs-title">Echte Arbeiten aus unserer Werkstatt</h2>
+        <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--wk-body); font-weight: 500;" data-wk-copy="refs-intro">Ein Auszug aus unseren Projekten. Ziehen Sie eigene Fotos (z.&nbsp;B. Vorher/Nachher) einfach per Drag &amp; Drop in die Platzhalter.</p>
       </div>
 
       <!-- Foto-Galerie — jeder Platzhalter ist per Drag & Drop mit einem eigenen Foto befüllbar -->
@@ -253,33 +285,33 @@
 
       </div>
 
-      <p style="margin-top: clamp(28px, 4vh, 44px); text-align: center; font-size: 15px; color: #c9d6e2; font-weight: 500;">Mehr laufende Projekte gibt es auf unserer <a href="[[FACEBOOK_URL]]" target="_blank" rel="noopener" style="color: #9FD1F5; font-weight: 700;">Facebook-Seite</a>.</p>
+      <p style="margin-top: clamp(28px, 4vh, 44px); text-align: center; font-size: 15px; color: var(--wk-body); font-weight: 500;">Mehr laufende Projekte gibt es auf unserer <a href="[[FACEBOOK_URL]]" target="_blank" rel="noopener" style="color: var(--wk-glow-soft); font-weight: 700;">Facebook-Seite</a>.</p>
     </div>
   </section>
 
   <!-- ÜBER UNS SECTION -->
-  <section id="ueber-uns" data-screen-label="Über uns" style="position: relative; overflow: hidden; background: #0D2A46; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
+  <section id="ueber-uns" data-screen-label="Über uns" style="position: relative; overflow: hidden; background: var(--wk-deep); padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
     <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;">
-      <path d="M-100,120 C340,260 720,-20 1100,140 C1320,230 1450,160 1560,210" fill="none" stroke="#1d5c99" stroke-width="120" stroke-linecap="round" opacity="0.5"></path>
-      <path d="M-120,480 C280,340 640,620 1020,460 C1280,350 1400,420 1560,360" fill="none" stroke="#123a63" stroke-width="210" stroke-linecap="round" opacity="0.8"></path>
-      <path d="M-100,800 C320,660 560,940 960,780 C1220,670 1380,730 1560,610" fill="none" stroke="#164a7d" stroke-width="150" stroke-linecap="round" opacity="0.7"></path>
+      <path d="M-100,120 C340,260 720,-20 1100,140 C1320,230 1450,160 1560,210" fill="none" stroke="var(--wk-band-3)" stroke-width="120" stroke-linecap="round" opacity="0.5"></path>
+      <path d="M-120,480 C280,340 640,620 1020,460 C1280,350 1400,420 1560,360" fill="none" stroke="var(--wk-band-2)" stroke-width="210" stroke-linecap="round" opacity="0.8"></path>
+      <path d="M-100,800 C320,660 560,940 960,780 C1220,670 1380,730 1560,610" fill="none" stroke="var(--wk-band-1)" stroke-width="150" stroke-linecap="round" opacity="0.7"></path>
     </svg>
-    <div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,42,70,.45) 0%, rgba(13,42,70,.10) 40%, rgba(13,42,70,.45) 100%); pointer-events: none;"></div>
+    <div style="position: absolute; inset: 0; background: linear-gradient(180deg, var(--wk-veil-strong) 0%, var(--wk-veil-soft) 40%, var(--wk-veil-strong) 100%); pointer-events: none;"></div>
 
     <div style="position: relative; max-width: 1320px; margin: 0 auto;">
       <div style="max-width: 900px; margin-bottom: clamp(50px, 8vh, 90px);">
-        <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Über uns</span>
-        <h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.12; color: #f5f4f0; font-size: clamp(32px, 4vw, 58px);">Wir kombinieren handwerkliches Wissen und viel Erfahrung mit modernster Technik.</h2>
+        <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wk-glow-soft); margin-bottom: 16px;">Über uns</span>
+        <h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.12; color: var(--wk-ink); font-size: clamp(32px, 4vw, 58px);" data-wk-copy="about-title">Wir kombinieren handwerkliches Wissen und viel Erfahrung mit modernster Technik.</h2>
       </div>
 
       <!-- Reihe 1: Vorstellung + Profilbild-Platzhalter -->
       <div class="lw-about" style="display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(50px, 8vh, 90px);">
         <div style="display: flex; flex-direction: column; gap: 16px;">
-          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #f5f4f0;">Hallo, ich bin<br>[[INHABER_NAME]],</h3>
-          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Lack- und Karosserie-Experte und Inhaber der [[FIRMA_VOLL]] in [[ORT]].</p>
-          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Mit meinem Werkstatt-Team aus professionellen Fachkräften erfülle ich Ihre individuellen Wünsche zum bestmöglichen Preis — von der Smart-Repair bis zur kompletten Restauration.</p>
+          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: var(--wk-ink);">Hallo, ich bin<br>[[INHABER_NAME]],</h3>
+          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--wk-body); font-weight: 500;" data-wk-copy="about-lead">Lack- und Karosserie-Experte und Inhaber der [[FIRMA_VOLL]] in [[ORT]].</p>
+          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--wk-body); font-weight: 500;" data-wk-copy="about-text">Mit meinem Werkstatt-Team aus professionellen Fachkräften erfülle ich Ihre individuellen Wünsche zum bestmöglichen Preis — von der Smart-Repair bis zur kompletten Restauration.</p>
         </div>
-        <div style="justify-self: center; width: min(340px, 100%);">
+        <div data-wk-section="inhaber-foto" style="justify-self: center; width: min(340px, 100%);">
           <div style="position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.4); background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.3);">
             <x-import component-from-global-scope="image-slot" from="./assets/image-slot.js" id="profil-inhaber" shape="rect" fit="cover" placeholder="Profilbild der Inhaberin / des Inhabers hier ablegen" hint-size="100%,100%" style="display:block;width:100%;height:100%;"></x-import>
           </div>
@@ -290,65 +322,65 @@
       <div class="lw-about" style="display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: center;">
         <div style="position: relative; border-radius: 24px; padding: 28px; background: rgba(10,20,34,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: 2px 6px 24px rgba(0,0,0,.35);">
           <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
-            <span style="display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent, #2FA4F0); color: #0d0f12; font-weight: 800; font-size: 17px; flex-shrink: 0;">{{ reviewInitial }}</span>
+            <span style="display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent, #2FA4F0); color: var(--wk-on-accent); font-weight: 800; font-size: 17px; flex-shrink: 0;">{{ reviewInitial }}</span>
             <div style="display: flex; flex-direction: column; gap: 3px; min-width: 0;">
               <span style="color: #f4f3ef; font-weight: 700; font-size: 15px;">{{ reviewAuthor }}</span>
               <span style="color: #F2BD3F; font-size: 14px; letter-spacing: 2px; line-height: 1;">★★★★★</span>
             </div>
           </div>
-          <p ref="{{ reviewTextRef }}" style="color: #cdd6e0; font-size: 15px; line-height: 1.6; font-weight: 500; transition: opacity .4s ease;">{{ reviewText }}</p>
-          <span style="display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); color: #8b9cae; font-size: 12.5px; font-weight: 600;">{{ reviewMeta }}</span>
+          <p ref="{{ reviewTextRef }}" style="color: var(--wk-body); font-size: 15px; line-height: 1.6; font-weight: 500; transition: opacity .4s ease;">{{ reviewText }}</p>
+          <span style="display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); color: var(--wk-muted); font-size: 12.5px; font-weight: 600;">{{ reviewMeta }}</span>
         </div>
         <div style="display: flex; flex-direction: column; gap: 16px;">
-          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #f5f4f0;">Meine Philosophie</h3>
-          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Für Sie – meine Kunden – soll meisterhafte Arbeit bezahlbar sein. Unser Service sieht aus wie aus der Vertragswerkstatt, hat die gleiche Qualität, ist aber deutlich günstiger.</p>
-          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Es ist für mich oberstes Gesetz, dass Sie nur 1A-Qualität bekommen, statt billiger „Pinselarbeiten". Mit hastig erledigten, minderwertigen Flickarbeiten kann ich nicht dienen.</p>
-          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Mein Credo: Glückliche Kunden kommen wieder. Mein Team und ich sind unheimlich stolz auf Ihre Zufriedenheit und begeisterten Bewertungen.</p>
+          <h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: var(--wk-ink);" data-wk-copy="philosophy-title">Meine Philosophie</h3>
+          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--wk-body); font-weight: 500;" data-wk-copy="philosophy-1">Für Sie – meine Kunden – soll meisterhafte Arbeit bezahlbar sein. Unser Service sieht aus wie aus der Vertragswerkstatt, hat die gleiche Qualität, ist aber deutlich günstiger.</p>
+          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--wk-body); font-weight: 500;" data-wk-copy="philosophy-2">Es ist für mich oberstes Gesetz, dass Sie nur 1A-Qualität bekommen, statt billiger „Pinselarbeiten". Mit hastig erledigten, minderwertigen Flickarbeiten kann ich nicht dienen.</p>
+          <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: var(--wk-body); font-weight: 500;" data-wk-copy="philosophy-3">Mein Credo: Glückliche Kunden kommen wieder. Mein Team und ich sind unheimlich stolz auf Ihre Zufriedenheit und begeisterten Bewertungen.</p>
         </div>
       </div>
     </div>
   </section>
 
   <!-- KONTAKT SECTION -->
-  <section id="kontakt" data-screen-label="Kontakt &amp; Anfahrt" style="position: relative; overflow: hidden; background: #10151b; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
-    <img src="assets/bg-vorderlicht.jpg" alt="" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: hue-rotate(85deg) saturate(1.2); pointer-events: none;">
-    <div style="position: absolute; inset: 0; background: rgba(18,60,120,0.38); mix-blend-mode: multiply; pointer-events: none;"></div>
+  <section id="kontakt" data-screen-label="Kontakt &amp; Anfahrt" style="position: relative; overflow: hidden; background: var(--wk-deep-2); padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
+    <img src="assets/bg-vorderlicht.jpg" alt="" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: hue-rotate(var(--wk-hero-hue, 85deg)) saturate(1.2); pointer-events: none;">
+    <div style="position: absolute; inset: 0; background: var(--wk-tint-strong); mix-blend-mode: multiply; pointer-events: none;"></div>
     <div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,30,.88) 0%, rgba(10,18,30,.55) 45%, rgba(10,18,30,.88) 100%); pointer-events: none;"></div>
 
     <div style="position: relative; max-width: 1320px; margin: 0 auto;">
       <div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);">
-        <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Kontakt &amp; Anfahrt</span>
-        <h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Sprechen wir über Ihr Fahrzeug</h2>
-        <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Rufen Sie an, schreiben Sie uns oder kommen Sie direkt vorbei – wir beraten Sie gern und unverbindlich.</p>
+        <span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wk-glow-soft); margin-bottom: 16px;">Kontakt &amp; Anfahrt</span>
+        <h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: var(--wk-ink); font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;" data-wk-copy="contact-title">Sprechen wir über Ihr Fahrzeug</h2>
+        <p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--wk-body); font-weight: 500;" data-wk-copy="contact-intro">Rufen Sie an, schreiben Sie uns oder kommen Sie direkt vorbei – wir beraten Sie gern und unverbindlich.</p>
       </div>
 
       <div class="lw-contact" style="display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 3vw, 40px); align-items: stretch;">
         <!-- Kontakt-Infos -->
         <div style="display: flex; flex-direction: column; gap: 18px; border-radius: 24px; padding: clamp(26px, 3vw, 40px); background: rgba(10,20,34,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: 2px 6px 24px rgba(0,0,0,.35);">
           <div style="display: flex; flex-direction: column; gap: 4px;">
-            <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">Adresse</span>
-            <p style="font-size: 16px; line-height: 1.5; color: #e7ecf1; font-weight: 600;">[[FIRMA_VOLL]]<br>[[STRASSE_HAUSNR]], [[PLZ]] [[ORT]]</p>
+            <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wk-glow-soft);">Adresse</span>
+            <p style="font-size: 16px; line-height: 1.5; color: var(--wk-body-2); font-weight: 600;">[[FIRMA_VOLL]]<br>[[STRASSE_HAUSNR]], [[PLZ]] [[ORT]]</p>
           </div>
           <div style="display: flex; flex-direction: column; gap: 4px;">
-            <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">Telefon</span>
-            <p style="font-size: 16px; line-height: 1.5; color: #e7ecf1; font-weight: 600;"><a href="tel:[[TELEFON_LINK]]" style="color: #e7ecf1;">[[TELEFON]]</a><br><span style="font-weight: 500; color: #b8c4d0;">Fax: [[FAX]]</span></p>
+            <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wk-glow-soft);">Telefon</span>
+            <p style="font-size: 16px; line-height: 1.5; color: var(--wk-body-2); font-weight: 600;"><a href="tel:[[TELEFON_LINK]]" style="color: var(--wk-body-2);">[[TELEFON]]</a><br><span style="font-weight: 500; color: var(--wk-body-soft);">Fax: [[FAX]]</span></p>
           </div>
           <div style="display: flex; flex-direction: column; gap: 4px;">
-            <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">E-Mail</span>
-            <p style="font-size: 16px; line-height: 1.5; font-weight: 600;"><a href="mailto:[[EMAIL]]" style="color: #e7ecf1;">[[EMAIL]]</a></p>
+            <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wk-glow-soft);">E-Mail</span>
+            <p style="font-size: 16px; line-height: 1.5; font-weight: 600;"><a href="mailto:[[EMAIL]]" style="color: var(--wk-body-2);">[[EMAIL]]</a></p>
           </div>
           <div style="display: flex; flex-direction: column; gap: 4px;">
-            <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">Öffnungszeiten</span>
-            <p style="font-size: 16px; line-height: 1.6; color: #e7ecf1; font-weight: 600;">[[OEFFNUNG_TAGE_1]]<br><span style="font-weight: 500; color: #b8c4d0;">[[OEFFNUNG_ZEIT_1]]</span><br>[[OEFFNUNG_TAGE_2]]<br><span style="font-weight: 500; color: #b8c4d0;">[[OEFFNUNG_ZEIT_2]]</span></p>
+            <span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wk-glow-soft);">Öffnungszeiten</span>
+            <p style="font-size: 16px; line-height: 1.6; color: var(--wk-body-2); font-weight: 600;">[[OEFFNUNG_TAGE_1]]<br><span style="font-weight: 500; color: var(--wk-body-soft);">[[OEFFNUNG_ZEIT_1]]</span><br>[[OEFFNUNG_TAGE_2]]<br><span style="font-weight: 500; color: var(--wk-body-soft);">[[OEFFNUNG_ZEIT_2]]</span></p>
           </div>
           <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;">
-            <a href="tel:[[TELEFON_LINK]]" style="display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #0d0f12; background: var(--accent, #2FA4F0); padding: 13px 22px; border-radius: 44px; transition: transform .2s ease, box-shadow .2s ease;" style-hover="transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47,164,240,.4);">Jetzt anrufen</a>
+            <a href="tel:[[TELEFON_LINK]]" style="display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--wk-on-accent); background: var(--accent, #2FA4F0); padding: 13px 22px; border-radius: 44px; transition: transform .2s ease, box-shadow .2s ease;" style-hover="transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47,164,240,.4);">Jetzt anrufen</a>
             <a href="mailto:[[EMAIL]]" style="display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #f4f3ef; padding: 13px 22px; border-radius: 44px; border: 1.5px solid rgba(255,255,255,.3); transition: border-color .2s ease, background .2s ease;" style-hover="border-color: var(--accent, #2FA4F0); background: rgba(255,255,255,.05);">E-Mail schreiben</a>
           </div>
         </div>
 
         <!-- Karte -->
-        <div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.4); min-height: 420px; background: #0a0e13;">
+        <div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.4); min-height: 420px; background: var(--wk-page);">
           <div ref="{{ mapRef }}" style="position: absolute; inset: 0;"></div>
         </div>
       </div>
@@ -367,30 +399,30 @@
           <!-- Link-Spalten -->
           <div class="lw-footer-cols" style="position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 80px); max-width: 1320px; width: 100%; margin: 0 auto;">
             <div style="display: flex; flex-direction: column; gap: 9px;">
-              <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Navigation</h3>
-              <a href="#top" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Start</a>
-              <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Services</a>
-              <a href="#referenzen" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Referenzen</a>
-              <a href="#ueber-uns" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Über uns</a>
-              <a href="#kontakt" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Kontakt</a>
+              <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wk-muted); border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Navigation</h3>
+              <a href="#top" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Start</a>
+              <a href="#services" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Services</a>
+              <a href="#referenzen" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Referenzen</a>
+              <a href="#ueber-uns" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Über uns</a>
+              <a href="#kontakt" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Kontakt</a>
             </div>
             <div style="display: flex; flex-direction: column; gap: 9px;">
-              <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Leistungen</h3>
-              <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Lackierungen aller Art</a>
-              <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Smart Repair</a>
-              <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Oldtimer &amp; Klassiker</a>
-              <a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Felgen &amp; Motorrad</a>
+              <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wk-muted); border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Leistungen</h3>
+              <a href="#services" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Lackierungen aller Art</a>
+              <a href="#services" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Smart Repair</a>
+              <a href="#services" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Oldtimer &amp; Klassiker</a>
+              <a href="#services" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">Felgen &amp; Motorrad</a>
             </div>
             <div style="display: flex; flex-direction: column; gap: 9px;">
-              <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Kontakt</h3>
-              <span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">[[STRASSE_HAUSNR]]<br>[[PLZ]] [[ORT]]</span>
-              <a href="tel:[[TELEFON_LINK]]" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">[[TELEFON]]</a>
-              <a href="mailto:[[EMAIL]]" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">[[EMAIL]]</a>
+              <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wk-muted); border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Kontakt</h3>
+              <span style="font-size: 14px; color: var(--wk-body); font-weight: 500;">[[STRASSE_HAUSNR]]<br>[[PLZ]] [[ORT]]</span>
+              <a href="tel:[[TELEFON_LINK]]" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">[[TELEFON]]</a>
+              <a href="mailto:[[EMAIL]]" style="font-size: 14px; color: var(--wk-body); font-weight: 500;">[[EMAIL]]</a>
             </div>
             <div style="display: flex; flex-direction: column; gap: 9px;">
-              <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Öffnungszeiten</h3>
-              <span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">[[OEFFNUNG_TAGE_1]]<br>[[OEFFNUNG_ZEIT_1]]</span>
-              <span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">[[OEFFNUNG_TAGE_2]] · [[OEFFNUNG_ZEIT_2]]</span>
+              <h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wk-muted); border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Öffnungszeiten</h3>
+              <span style="font-size: 14px; color: var(--wk-body); font-weight: 500;">[[OEFFNUNG_TAGE_1]]<br>[[OEFFNUNG_ZEIT_1]]</span>
+              <span style="font-size: 14px; color: var(--wk-body); font-weight: 500;">[[OEFFNUNG_TAGE_2]] · [[OEFFNUNG_ZEIT_2]]</span>
             </div>
           </div>
 
@@ -400,15 +432,15 @@
               <img src="assets/logo-placeholder.svg" alt="[[FIRMENNAME]]" style="width: min(46vw, 360px); height: auto; display: block; opacity: .95;">
               <div style="display: flex; align-items: center; gap: 14px; margin-top: 16px;">
                 <span style="width: 44px; height: 2px; background: linear-gradient(90deg, #2FA4F0, transparent);"></span>
-                <span style="font-size: 13.5px; color: #8fa4b8; font-weight: 500;">Autolackiererei &amp; Karosserie · [[ORT]]</span>
+                <span style="font-size: 13.5px; color: var(--wk-muted); font-weight: 500;">Autolackiererei &amp; Karosserie · [[ORT]]</span>
               </div>
             </div>
             <div style="text-align: right; flex-shrink: 0;">
-              <p style="font-size: 13px; color: #8fa4b8; font-weight: 500; margin-bottom: 12px;">© [[JAHR]] [[FIRMA_VOLL]] · Alle Rechte vorbehalten</p>
+              <p style="font-size: 13px; color: var(--wk-muted); font-weight: 500; margin-bottom: 12px;">© [[JAHR]] [[FIRMA_VOLL]] · Alle Rechte vorbehalten</p>
               <div style="display: flex; justify-content: flex-end; align-items: center; gap: 14px;">
-                <a href="[[FACEBOOK_URL]]" target="_blank" rel="noopener" aria-label="Facebook" style="width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; color: #c9d6e2; font-weight: 800; font-size: 15px; transition: background .2s ease, transform .2s ease;" style-hover="background: var(--accent, #2FA4F0); color: #0a1526; transform: scale(1.1);">f</a>
-                <a href="#impressum" style="font-size: 13px; color: #8fa4b8; font-weight: 500;">Impressum</a>
-                <a href="#datenschutz" style="font-size: 13px; color: #8fa4b8; font-weight: 500;">Datenschutz</a>
+                <a href="[[FACEBOOK_URL]]" target="_blank" rel="noopener" aria-label="Facebook" style="width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; color: var(--wk-body); font-weight: 800; font-size: 15px; transition: background .2s ease, transform .2s ease;" style-hover="background: var(--accent, #2FA4F0); color: var(--wk-on-accent); transform: scale(1.1);">f</a>
+                <a href="#impressum" style="font-size: 13px; color: var(--wk-muted); font-weight: 500;">Impressum</a>
+                <a href="#datenschutz" style="font-size: 13px; color: var(--wk-muted); font-weight: 500;">Datenschutz</a>
               </div>
             </div>
           </div>
@@ -479,13 +511,13 @@ class Component extends DCLogic {
     map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "bottom-right");
 
     const el = document.createElement("div");
-    el.style.cssText = "width:20px;height:20px;border-radius:50%;background:#2FA4F0;border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,164,240,.3),0 4px 12px rgba(0,0,0,.5);cursor:pointer;";
+    el.style.cssText = "width:20px;height:20px;border-radius:50%;background:var(--wk-glow);border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,164,240,.3),0 4px 12px rgba(0,0,0,.5);cursor:pointer;";
 
     const popupHtml =
       '<div style="font-family:Archivo,sans-serif;padding:4px 2px;min-width:190px;">' +
-      '<div style="font-weight:800;font-size:14px;color:#0D2A46;margin-bottom:3px;">[[FIRMA_VOLL]]</div>' +
-      '<div style="font-size:12.5px;color:#45535f;line-height:1.45;margin-bottom:8px;">[[STRASSE_HAUSNR]]<br>[[PLZ]] [[ORT]]</div>' +
-      '<a href="https://www.google.com/maps/dir/?api=1&destination=[[MAPS_ZIELADRESSE]]" target="_blank" rel="noopener" style="display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:#2FA4F0;padding:7px 13px;border-radius:20px;text-decoration:none;">Route planen</a>' +
+      '<div style="font-weight:800;font-size:14px;color: var(--wk-card-ink);margin-bottom:3px;">[[FIRMA_VOLL]]</div>' +
+      '<div style="font-size:12.5px;color: var(--wk-card-body);line-height:1.45;margin-bottom:8px;">[[STRASSE_HAUSNR]]<br>[[PLZ]] [[ORT]]</div>' +
+      '<a href="https://www.google.com/maps/dir/?api=1&destination=[[MAPS_ZIELADRESSE]]" target="_blank" rel="noopener" style="display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:var(--wk-glow);padding:7px 13px;border-radius:20px;text-decoration:none;">Route planen</a>' +
       "</div>";
 
     const popup = new maplibregl.Popup({ offset: 20, closeButton: false }).setHTML(popupHtml);