From 4ff6e7a0348c5553769fbff2ac4bc1e44817ff28 Mon Sep 17 00:00:00 2001
From: webklar-automation <kenso@webklar.com>
Date: Wed, 29 Jul 2026 09:30:21 +0000
Subject: [PATCH] Anreicherung: Bilder, Logo, Farbwelt, Texte (Cloud-Routine)

---
 .webklar-theme.json         | 42 +++++++++++++++++++++++++++
 assets/logo-placeholder.svg |  6 +---
 index.html                  | 58 ++++++++++++++++++-------------------
 3 files changed, 71 insertions(+), 35 deletions(-)
 create mode 100644 .webklar-theme.json

diff --git a/.webklar-theme.json b/.webklar-theme.json
new file mode 100644
index 0000000..dd11a14
--- /dev/null
+++ b/.webklar-theme.json
@@ -0,0 +1,42 @@
+{
+  "palette": {
+    "wk-accent": "#c8102e",
+    "wk-accent-dark": "#90051c",
+    "wk-on-accent": "#ffffff",
+    "wk-deep": "#450812",
+    "wk-deep-2": "#1a0f11",
+    "wk-page": "#120d0e",
+    "wk-band-1": "#4c0a15",
+    "wk-band-2": "#3d050e",
+    "wk-band-3": "#66121f",
+    "wk-band-4": "#33020a",
+    "wk-glow": "#f03553",
+    "wk-glow-soft": "#f09ca9",
+    "wk-ink": "#f5f4f0",
+    "wk-body": "#e3c8cc",
+    "wk-body-2": "#ebdddf",
+    "wk-body-soft": "#d1c0c3",
+    "wk-muted": "#ad8b90",
+    "wk-card": "#F1F0EB",
+    "wk-card-ink": "#a20d25",
+    "wk-card-body": "#58484b",
+    "wk-card-tag": "#ca2d46",
+    "wk-tint-soft": "rgba(120,12,30,0.32)",
+    "wk-tint-strong": "rgba(120,12,30,0.38)",
+    "wk-veil-strong": "rgba(69,8,18,.45)",
+    "wk-veil-soft": "rgba(69,8,18,.10)",
+    "wk-hero-hue": "226deg"
+  },
+  "contrast": {
+    "ink_on_deep": 14.72,
+    "body_on_deep": 10.34,
+    "glow_soft_on_deep": 7.74,
+    "body_2_on_page": 14.63,
+    "body_soft_on_page": 11.05,
+    "muted_on_page": 6.31,
+    "on_accent_on_accent": 5.88,
+    "card_ink_on_card": 7.02,
+    "card_body_on_card": 7.53,
+    "card_tag_on_card": 4.63
+  }
+}
\ No newline at end of file
diff --git a/assets/logo-placeholder.svg b/assets/logo-placeholder.svg
index 215aa2f..c580968 100644
--- a/assets/logo-placeholder.svg
+++ b/assets/logo-placeholder.svg
@@ -1,5 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 48" role="img" aria-label="Logo-Platzhalter">
-  <rect x="1" y="1" width="258" height="46" rx="8" fill="none" stroke="#f0f0ec" stroke-opacity="0.35" stroke-width="1.5" stroke-dasharray="6 5"/>
-  <text x="130" y="25" text-anchor="middle" font-family="Archivo, system-ui, sans-serif" font-weight="800" font-size="20" letter-spacing="1" fill="#f0f0ec">IHR&#160;LOGO</text>
-  <text x="130" y="39" text-anchor="middle" font-family="Archivo, system-ui, sans-serif" font-weight="600" font-size="8" letter-spacing="2" fill="#f0f0ec" fill-opacity="0.55">HIER EIGENES LOGO EINSETZEN</text>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 64"><rect width="320" height="64" fill="none"/><text x="8" y="44" font-family="Arial, Helvetica, sans-serif" font-size="34" font-weight="700" fill="#c8102e">MOVER</text><text x="150" y="44" font-family="Arial, Helvetica, sans-serif" font-size="20" fill="#1f3242">Auto Paint Work</text></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 91e2dbd..d6ca977 100644
--- a/index.html
+++ b/index.html
@@ -14,32 +14,32 @@
 <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-accent:#c8102e;
+    --wk-accent-dark:#90051c;
+    --wk-on-accent:#ffffff;
+    --wk-deep:#450812;
+    --wk-deep-2:#1a0f11;
+    --wk-page:#120d0e;
+    --wk-band-1:#4c0a15;
+    --wk-band-2:#3d050e;
+    --wk-band-3:#66121f;
+    --wk-band-4:#33020a;
+    --wk-glow:#f03553;
+    --wk-glow-soft:#f09ca9;
     --wk-ink:#f5f4f0;
-    --wk-body:#c9d6e2;
-    --wk-body-2:#e7e9ec;
-    --wk-body-soft:#c5c9ce;
-    --wk-muted:#8fa4b8;
+    --wk-body:#e3c8cc;
+    --wk-body-2:#ebdddf;
+    --wk-body-soft:#d1c0c3;
+    --wk-muted:#ad8b90;
     --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-card-ink:#a20d25;
+    --wk-card-body:#58484b;
+    --wk-card-tag:#ca2d46;
+    --wk-tint-soft:rgba(120,12,30,0.32);
+    --wk-tint-strong:rgba(120,12,30,0.38);
+    --wk-veil-strong:rgba(69,8,18,.45);
+    --wk-veil-soft:rgba(69,8,18,.10);
+    --wk-hero-hue:226deg;
   }
   /* WK-THEME-END */
   * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -144,9 +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: 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>
+        <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">Lack- und Karosseriearbeiten in Kaiserslautern-Siegelbach — Lackierungen, Unfallinstandsetzung, Smart Repair, Fahrzeugaufbereitung.</p>
       </div>
 
       <!-- spacer -->
@@ -252,7 +250,7 @@
   </section>
 
   <!-- REFERENZEN SECTION — Vorher/Nachher-Vergleich entfernt, durch Foto-Galerie ersetzt -->
-  <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);">
+  <section id="referenzen" data-wk-section="referenzen" data-screen-label="Referenzen" style="position: relative; overflow:; background: var(--wk-deep); padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);" hidden>
     <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>
@@ -311,7 +309,7 @@
           <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 Mover GmbH in Kaiserslautern-Siegelbach.</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 data-wk-section="inhaber-foto" style="justify-self: center; width: min(340px, 100%);">
+        <div data-wk-section="inhaber-foto" style="justify-self: center; width: min(340px, 100%);" hidden>
           <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>
@@ -351,7 +349,7 @@
       <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: 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>
+        <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 oder kommen Sie in Kaiserslautern-Siegelbach vorbei.</p>
       </div>
 
       <div class="lw-contact" style="display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 3vw, 40px); align-items: stretch;">