Lackwerk GmbH — Moderne One-Page-Website für Autolackiererei & Karosserie

Für die Lackwerk GmbH in Kaiserslautern wurde eine komplette One-Page-Website entwickelt, die sich visuell an einem hochwertigen Referenz-Template orientiert, aber eine eigenständige blaue Farbwelt mit eleganter Serifen-Typografie erhält. Die Hero-Section empfängt Besucher mit einem vollflächigen, blau getönten Hintergrundbild, dem echten Lackwerk-Logo in der Navigation und einer animierten Headline, bei der die Wörter Unfall, Delle, Beule und Kratzer rotierend eingeblendet werden — ergänzt um eine Vorteilsleiste mit Live-Google-Bewertung (4,8 Sterne, angebunden über die Google Places API mit Fallback). Darunter präsentiert die Leistungen-Section sechs Angebote — von Lackierungen aller Art über Smart Repair bis Oldtimer-Restauration — in abgerundeten Karten vor blauem Keyvisual-Hintergrund, wobei die letzte Karte ein Video der Keramikversiegelung zeigt. Die Referenzen-Section macht die Werkstattarbeit erlebbar: Ein interaktiver Vorher-Nachher-Schieberegler vergleicht einen Karosserieschaden mit dem fertigen Hochglanz-Finish, gespeist aus echten Werkstattfotos eines Porsche-911-Projekts. Im Über-uns-Bereich stellt sich Inhaber Patric Hertz mit persönlicher Philosophie vor, flankiert von rotierenden Kundenstimmen und einem Platzhalter für sein Profilbild. Die Kontakt-Section bündelt Adresse, Telefon, E-Mail und Öffnungszeiten neben einer interaktiven dunklen Karte (MapLibre) mit Marker und Routenplanung zur Gienanthstraße 2–4. Den Abschluss bildet ein Sticky-Reveal-Footer, der sich beim Scrollen unter der Seite hervorschiebt — mit Navigationslinks, Leistungsübersicht, Kontaktdaten und großem Logo-Schriftzug. Die Seite ist durchgehend responsiv, startet immer am Seitenanfang und funktioniert dank lokal eingebetteter Bilder auch offline.
2026-07-12 19:49:12 +02:00
parent 90238789ec
commit 2dbf840238
70 changed files with 6904 additions and 2570 deletions
--- a/Lackwerk-KL/.thumbnail
+++ b/Lackwerk-KL/.thumbnail
--- a/Hero-print-105nrtf.dc.html
+++ b/Hero-print-105nrtf.dc.html
--- a/Lackwerk-KL/Lackwerk
+++ b/Lackwerk-KL/Lackwerk
@@ -0,0 +1,645 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<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=Archivo:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,500;1,8..60,600&display=swap" rel="stylesheet">
+<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>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: #0d0f12; 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); } }
+  @media (max-width: 1080px) {
+    .lw-review { display: none !important; }
+  }
+  @media (max-width: 860px) {
+    .lw-navlinks { display: none !important; }
+    .lw-burger { display: inline-flex !important; }
+    .lw-benefits { grid-template-columns: repeat(2, 1fr) !important; row-gap: 26px !important; }
+  }
+  @media (max-width: 520px) {
+    .lw-benefits { grid-template-columns: 1fr !important; }
+  }
+  @media (max-width: 980px) {
+    .lw-services { grid-template-columns: repeat(2, 1fr) !important; }
+  }
+  @media (max-width: 620px) {
+    .lw-services { grid-template-columns: 1fr !important; }
+  }
+  @media (max-width: 980px) {
+    .lw-refs { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 200px !important; }
+  }
+  @media (max-width: 620px) {
+    .lw-refs { grid-template-columns: 1fr !important; grid-auto-rows: 220px !important; }
+    .lw-ref-wide { grid-column: auto !important; }
+  }
+  @media (max-width: 860px) {
+    .lw-about { grid-template-columns: 1fr !important; }
+    .lw-contact { grid-template-columns: 1fr !important; }
+    .lw-footer-cols { grid-template-columns: repeat(2, 1fr) !important; }
+    .lw-footer-bottom { flex-direction: column !important; align-items: flex-start !important; }
+    .lw-footer-bottom > div:last-child { text-align: left !important; }
+    .lw-footer-bottom > div:last-child > div { justify-content: flex-start !important; }
+  }
+</style>
+</helmet>
+<div ref="{{ rootRef }}" style="width: 100%; --accent: #F0912F; background: #0d0f12;">
+
+  <!-- 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);">
+    <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>
+  <!-- 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>
+  <!-- thin accent glow top -->
+  <div style="position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, transparent, var(--accent, #F0912F), transparent); opacity: 0.5;"></div>
+
+  <!-- NAV -->
+  <nav ref="{{ navRef }}" style="position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease; padding: 22px clamp(20px, 4vw, 56px); border-bottom: 1px solid transparent;">
+    <div style="max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;">
+      <!-- left links -->
+      <div class="lw-navlinks" style="display: flex; gap: 34px; align-items: center;">
+        <a href="#services" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Services</a>
+        <a href="#referenzen" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Referenzen</a>
+      </div>
+      <!-- logo -->
+      <a href="#top" style="display: flex; align-items: center; justify-self: center;">
+        <img src="assets/logo-lackwerk.png" alt="Lackwerk" style="height: 26px; width: auto; display: block;">
+      </a>
+      <!-- right links -->
+      <div class="lw-navlinks" style="display: flex; gap: 34px; align-items: center; justify-content: flex-end;">
+        <a href="#ueber-uns" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Über uns</a>
+        <a href="#kontakt" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Kontakt</a>
+      </div>
+      <!-- mobile menu button -->
+      <button class="lw-burger" aria-label="Menü" style="display: none; grid-column: 3; justify-self: end; background: transparent; border: 1.5px solid rgba(255,255,255,.28); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: #f4f3ef; align-items: center; gap: 8px;">
+        <span style="display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;"></span>
+      </button>
+    </div>
+  </nav>
+
+  <!-- HERO CONTENT -->
+  <div style="position: relative; z-index: 10; display: flex; flex-direction: column; min-height: 100vh; padding: clamp(120px, 16vh, 190px) clamp(20px, 4vw, 56px) 0;">
+    <div style="max-width: 1320px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; flex: 1;">
+
+      <!-- spacer -->
+      <div style="flex: 1; min-height: 40px;"></div>
+
+      <!-- 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;">
+          <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>
+            </span>
+          </span>
+          <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;">
+          Wir reparieren alles! Mit Originalteilen und neuester Technik zu fairen Preisen. Als wäre nichts passiert.
+        </p>
+      </div>
+
+      <!-- spacer -->
+      <div style="flex: 1; min-height: 40px;"></div>
+
+      <!-- BENEFIT STRIP -->
+      <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>
+        </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>
+        </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>
+        </div>
+
+        <div style="display: flex; flex-direction: column; gap: 14px;">
+          <!-- Google badge -->
+          <a href="{{ googleUrl }}" target="_blank" rel="noopener" style="display: inline-flex; flex-direction: column; gap: 3px; align-self: flex-start; background: #000; border: 1px solid rgba(255,255,255,.12); border-radius: 44px; padding: 11px 20px; transition: transform .3s ease, box-shadow .3s ease;" style-hover="transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.4);">
+            <span style="color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .01em;">Lackwerk</span>
+            <span style="display: inline-flex; align-items: center; gap: 7px;">
+              <span style="color: #DBDED9; font-weight: 600; font-size: 15px;">{{ ratingLabel }}</span>
+              <img src="assets/review.svg" alt="Bewertung" width="66" height="10">
+              <span style="color: #DBDED9; font-weight: 300; font-size: 15px;">{{ countLabel }}</span>
+            </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>
+        </div>
+      </div>
+    </div>
+  </div>
+  </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);">
+    <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>
+    </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: 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>
+      </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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
+          <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>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </section>
+
+  <!-- REFERENZEN SECTION -->
+  <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>
+    <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;">Karosserieschaden? Ziehen Sie den Regler und sehen Sie den Unterschied – vorher und nachher.</p>
+      </div>
+
+      <!-- Vorher/Nachher-Vergleich -->
+      <div ref="{{ cmpRef }}" onMouseDown="{{ cmpDown }}" onTouchStart="{{ cmpDown }}" style="position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 3/2; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.45); user-select: none; touch-action: pan-y; cursor: ew-resize; background: #0a0e13;">
+        <!-- Vorher (untere Ebene) -->
+        <img src="assets/work/work5.jpg" alt="Kotflügel mit Karosserieschaden vor der Reparatur" draggable="false" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;">
+        <!-- Nachher (obere Ebene, per clip-path beschnitten) -->
+        <div ref="{{ cmpAfterRef }}" style="position: absolute; inset: 0; overflow: hidden; clip-path: inset(0 50% 0 0);">
+          <img src="assets/work/work1.jpg" alt="Kotflügel nach Reparatur und Lackierung in Hochglanz" draggable="false" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;">
+        </div>
+        <!-- Labels -->
+        <span style="position: absolute; top: 18px; left: 18px; padding: 6px 14px; border-radius: 20px; background: rgba(8,20,34,.75); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none;">Nachher</span>
+        <span style="position: absolute; top: 18px; right: 18px; padding: 6px 14px; border-radius: 20px; background: rgba(8,20,34,.75); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none;">Vorher</span>
+        <!-- Griff -->
+        <div ref="{{ cmpHandleRef }}" style="position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: rgba(255,255,255,.85); pointer-events: none;">
+          <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center;">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0D2A46" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 3 12 9 6"></polyline><polyline points="15 6 21 12 15 18"></polyline></svg>
+          </div>
+        </div>
+      </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="https://www.facebook.com/derlackspezialist/" target="_blank" rel="noopener" style="color: #9FD1F5; 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);">
+    <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>
+    </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: 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>
+      </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>Patric Hertz,</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 Lackwerk GmbH in Kaiserslautern.</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>
+        </div>
+        <div 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-patric" shape="rect" fit="cover" placeholder="Profilbild von Patric Hertz hier ablegen" hint-size="100%,100%" style="display:block;width:100%;height:100%;"></x-import>
+          </div>
+        </div>
+      </div>
+
+      <!-- Reihe 2: Kundenstimmen + Philosophie -->
+      <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>
+            <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>
+        </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>
+        </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>
+    <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>
+      </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;">Lackwerk GmbH<br>Gienanthstr. 2–4, 67663 Kaiserslautern</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:+4963135789060" style="color: #e7ecf1;">0631 / 35 78 90-6</a><br><span style="font-weight: 500; color: #b8c4d0;">Fax: 0631 / 35 78 90-8</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:info@lackwerk-kl.de" style="color: #e7ecf1;">info@lackwerk-kl.de</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;">Montag – Freitag<br><span style="font-weight: 500; color: #b8c4d0;">09:00 – 13:00 · 14:00 – 17:00</span><br>Samstag &amp; Sonntag<br><span style="font-weight: 500; color: #b8c4d0;">Geschlossen</span></p>
+          </div>
+          <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;">
+            <a href="tel:+4963135789060" 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="mailto:info@lackwerk-kl.de" 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 ref="{{ mapRef }}" style="position: absolute; inset: 0;"></div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- FOOTER (sticky reveal) -->
+  <footer data-screen-label="Footer" style="position: relative; height: 70vh; clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);">
+    <div style="position: relative; height: calc(100vh + 70vh); top: -100vh;">
+      <div style="height: 70vh; position: sticky; top: calc(100vh - 70vh);">
+        <div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; background: linear-gradient(135deg, #0a1526 0%, #0D2A46 55%, #0a1526 100%); padding: clamp(32px, 6vh, 64px) clamp(20px, 4vw, 56px);">
+          <!-- Glow-Elemente -->
+          <div style="position: absolute; top: -120px; right: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(47,164,240,.09); filter: blur(70px); pointer-events: none;"></div>
+          <div style="position: absolute; bottom: -140px; left: -100px; width: 380px; height: 380px; border-radius: 50%; background: rgba(29,92,153,.12); filter: blur(70px); pointer-events: none;"></div>
+
+          <!-- 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>
+            </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>
+            </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;">Gienanthstr. 2–4<br>67663 Kaiserslautern</span>
+              <a href="tel:+4963135789060" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">0631 / 35 78 90-6</a>
+              <a href="mailto:info@lackwerk-kl.de" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">info@lackwerk-kl.de</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;">Mo – Fr<br>09:00 – 13:00 · 14:00 – 17:00</span>
+              <span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Sa &amp; So geschlossen</span>
+            </div>
+          </div>
+
+          <!-- Untere Zeile -->
+          <div class="lw-footer-bottom" style="position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: 1320px; width: 100%; margin: 0 auto;">
+            <div style="min-width: 0;">
+              <img src="assets/logo-lackwerk.png" alt="Lackwerk" style="width: min(46vw, 560px); 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 · Kaiserslautern</span>
+              </div>
+            </div>
+            <div style="text-align: right; flex-shrink: 0;">
+              <p style="font-size: 13px; color: #8fa4b8; font-weight: 500; margin-bottom: 12px;">© 2026 Lackwerk GmbH · Alle Rechte vorbehalten</p>
+              <div style="display: flex; justify-content: flex-end; align-items: center; gap: 14px;">
+                <a href="https://www.facebook.com/derlackspezialist/" 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>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1440,&quot;height&quot;:900},&quot;accentColor&quot;:{&quot;editor&quot;:&quot;color&quot;,&quot;default&quot;:&quot;#2FA4F0&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Design&quot;,&quot;options&quot;:[&quot;#2FA4F0&quot;,&quot;#F0912F&quot;,&quot;#E23744&quot;,&quot;#16462C&quot;,&quot;#C9A227&quot;]},&quot;showReviewCard&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Inhalt&quot;},&quot;rotateWords&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Inhalt&quot;}}">
+class Component extends DCLogic {
+  state = {
+    loading: true,
+    reviews: [],
+    idx: 0,
+    rating: 4.8,
+    count: 112,
+  };
+
+  // demo fallback data (used when /api/reviews is unavailable, e.g. in preview)
+  DEMO = {
+    rating: 4.8,
+    user_ratings_total: 112,
+    reviews: [
+      { author_name: "Michael Braun", rating: 5, text: "Kleiner Parkrempler an der Stoßstange — nach zwei Tagen sah der Wagen aus wie frisch vom Band. Perfekte Farbangleichung, fairer Preis." },
+      { author_name: "Sandra Keller", rating: 5, text: "Top Beratung, ehrliche Einschätzung und absolut saubere Arbeit. Der Kratzer an der Fahrertür ist komplett verschwunden. Sehr zu empfehlen!" },
+      { author_name: "Tomasz Nowak", rating: 5, text: "Delle im Kotflügel professionell instand gesetzt, Lack wie neu. Termin schnell bekommen, alles unkompliziert. Komme gerne wieder." },
+    ],
+  };
+
+  PLACE_ID = "ChIJY8mtmUUNlkcRTRMePruieWA";
+  WORDS = ["Unfall", "Delle", "Beule", "Kratzer"];
+
+  componentDidMount() {
+    this.applyAccent();
+    this.sizeWordSlot();
+    this.onResize = () => this.sizeWordSlot();
+    window.addEventListener("resize", this.onResize);
+    if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => this.sizeWordSlot());
+    this.loadReviews();
+    if (this.props.rotateWords !== false) this.startWordRotator();
+    this.onScroll = () => this.updateNav();
+    window.addEventListener("scroll", this.onScroll, { passive: true });
+    this.updateNav();
+    this.initMap();
+    // Immer oben starten (kein Wiederherstellen der Scroll-Position)
+    if ("scrollRestoration" in history) history.scrollRestoration = "manual";
+    if (!location.hash) requestAnimationFrame(() => window.scrollTo(0, 0));
+  }
+
+  initMap() {
+    if (this._map || !this.mapEl) return;
+    if (!window.maplibregl) { setTimeout(() => this.initMap(), 250); return; }
+    const LNG = 7.7269046, LAT = 49.444377;
+    const map = new maplibregl.Map({
+      container: this.mapEl,
+      style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
+      center: [LNG, LAT],
+      zoom: 14.5,
+      attributionControl: { compact: true },
+      cooperativeGestures: true,
+    });
+    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;";
+
+    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;">Lackwerk GmbH</div>' +
+      '<div style="font-size:12.5px;color:#45535f;line-height:1.45;margin-bottom:8px;">Gienanthstr. 2\u20134<br>67663 Kaiserslautern</div>' +
+      '<a href="https://www.google.com/maps/dir/?api=1&destination=Gienanthstra\u00dfe+2-4,+67663+Kaiserslautern" 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>";
+
+    const popup = new maplibregl.Popup({ offset: 20, closeButton: false }).setHTML(popupHtml);
+    new maplibregl.Marker({ element: el }).setLngLat([LNG, LAT]).setPopup(popup).addTo(map);
+    popup.setLngLat([LNG, LAT]).addTo(map);
+    this._map = map;
+  }
+
+  componentDidUpdate() { this.applyAccent(); }
+
+  componentWillUnmount() {
+    clearInterval(this._wordTimer);
+    clearInterval(this._revTimer);
+    if (this._map) { this._map.remove(); this._map = null; }
+    window.removeEventListener("scroll", this.onScroll);
+    window.removeEventListener("resize", this.onResize);
+  }
+
+  // Vorher/Nachher-Vergleich: Drag-Logik
+  cmpStart(e) {
+    e.preventDefault();
+    this.cmpMoveTo(e.touches ? e.touches[0].clientX : e.clientX);
+    this._cmpMove = (ev) => this.cmpMoveTo(ev.touches ? ev.touches[0].clientX : ev.clientX);
+    this._cmpUp = () => {
+      window.removeEventListener("mousemove", this._cmpMove);
+      window.removeEventListener("touchmove", this._cmpMove);
+      window.removeEventListener("mouseup", this._cmpUp);
+      window.removeEventListener("touchend", this._cmpUp);
+    };
+    window.addEventListener("mousemove", this._cmpMove);
+    window.addEventListener("touchmove", this._cmpMove, { passive: true });
+    window.addEventListener("mouseup", this._cmpUp);
+    window.addEventListener("touchend", this._cmpUp);
+  }
+
+  cmpMoveTo(clientX) {
+    if (!this.cmpEl || !this.cmpAfter || !this.cmpHandle) return;
+    const rect = this.cmpEl.getBoundingClientRect();
+    let p = ((clientX - rect.left) / rect.width) * 100;
+    p = Math.max(0, Math.min(100, p));
+    this.cmpAfter.style.clipPath = "inset(0 " + (100 - p) + "% 0 0)";
+    this.cmpHandle.style.left = p + "%";
+  }
+
+  // fix the rotating-word slot to the widest word so "Rein mit" never shifts
+  sizeWordSlot() {
+    const slot = this.wordSlot, word = this.word;
+    if (!slot || !word) return;
+    const probe = document.createElement("span");
+    probe.style.cssText = "position:absolute;visibility:hidden;white-space:nowrap;";
+    const cs = getComputedStyle(word);
+    probe.style.font = cs.font;
+    probe.style.fontStyle = cs.fontStyle;
+    probe.style.letterSpacing = cs.letterSpacing;
+    document.body.appendChild(probe);
+    let max = 0;
+    for (const w of this.WORDS) { probe.textContent = w; max = Math.max(max, probe.getBoundingClientRect().width); }
+    probe.remove();
+    slot.style.width = Math.ceil(max + 2) + "px";
+  }
+
+  applyAccent() {
+    if (this.root) this.root.style.setProperty("--accent", this.props.accentColor || "#F0912F");
+  }
+
+  updateNav() {
+    if (!this.nav) return;
+    const s = window.scrollY > 30;
+    this.nav.style.background = s ? "rgba(11,13,16,0.92)" : "transparent";
+    this.nav.style.backdropFilter = s ? "blur(14px)" : "none";
+    this.nav.style.borderBottomColor = s ? "rgba(255,255,255,0.10)" : "transparent";
+    this.nav.style.paddingTop = s ? "14px" : "22px";
+    this.nav.style.paddingBottom = s ? "14px" : "22px";
+  }
+
+  async loadReviews() {
+    let data = null;
+    try {
+      // In the production Next.js app this hits the server route handler
+      // /api/reviews (Place ID + GOOGLE_PLACES_API_KEY stay server-side).
+      const res = await fetch("/api/reviews", { cache: "no-store" });
+      if (res.ok) {
+        const j = await res.json();
+        if (j && Array.isArray(j.reviews) && j.reviews.length) data = j;
+      }
+    } catch (e) { /* fall through to demo */ }
+    if (!data) data = this.DEMO;
+    const reviews = (data.reviews || []).filter(r => r && r.text).slice(0, 5);
+    this.setState({
+      loading: false,
+      reviews,
+      rating: data.rating || this.DEMO.rating,
+      count: data.user_ratings_total || this.DEMO.user_ratings_total,
+    }, () => { if (reviews.length > 1) this.startReviewRotator(); });
+  }
+
+  startReviewRotator() {
+    this._revTimer = setInterval(() => {
+      const el = this.reviewText;
+      const next = (this.state.idx + 1) % this.state.reviews.length;
+      const swap = () => this.setState({ idx: next }, () => { if (this.reviewText) this.reviewText.style.opacity = 1; });
+      if (el) { el.style.opacity = 0; setTimeout(swap, 380); } else { swap(); }
+    }, 5200);
+  }
+
+  startWordRotator() {
+    let i = this.WORDS.indexOf("Kratzer");
+    this._wordTimer = setInterval(() => {
+      const el = this.word;
+      if (!el) return;
+      i = (i + 1) % this.WORDS.length;
+      const next = this.WORDS[i];
+      el.animate(
+        [{ transform: "translateY(0)", opacity: 1 }, { transform: "translateY(-110%)", opacity: 0 }],
+        { duration: 300, easing: "cubic-bezier(.6,0,.4,1)", fill: "forwards" }
+      ).onfinish = () => {
+        el.textContent = next;
+        el.animate(
+          [{ transform: "translateY(110%)", opacity: 0 }, { transform: "translateY(0)", opacity: 1 }],
+          { duration: 340, easing: "cubic-bezier(.2,.7,.3,1)", fill: "forwards" }
+        );
+      };
+    }, 2400);
+  }
+
+  renderVals() {
+    const st = this.state;
+    const r = st.reviews[st.idx] || null;
+    const author = r ? r.author_name : "";
+    const initial = author ? author.trim().charAt(0).toUpperCase() : "";
+    const ratingLabel = String(st.rating).replace(".", ",");
+    return {
+      rootRef: (el) => { this.root = el; },
+      videoRef: (el) => { if (el) { el.muted = true; el.volume = 0; } },
+      mapRef: (el) => { this.mapEl = el; if (el) this.initMap(); },
+      cmpRef: (el) => { this.cmpEl = el; },
+      cmpAfterRef: (el) => { this.cmpAfter = el; },
+      cmpHandleRef: (el) => { this.cmpHandle = el; },
+      cmpDown: (e) => this.cmpStart(e),
+      navRef: (el) => { this.nav = el; },
+      wordRef: (el) => { this.word = el; },
+      wordSlotRef: (el) => { this.wordSlot = el; },
+      reviewTextRef: (el) => { this.reviewText = el; },
+      dot0Ref: () => {}, dot1Ref: () => {}, dot2Ref: () => {},
+
+      showReviewCard: this.props.showReviewCard !== false,
+      loading: st.loading,
+      hasReview: !st.loading && !!r,
+      reviewAuthor: author,
+      reviewInitial: initial,
+      reviewText: r ? ("“" + r.text + "”") : "",
+      reviewMeta: "Google Bewertung",
+
+      ratingLabel: ratingLabel,
+      countLabel: "(" + st.count + ")",
+      googleUrl: "https://www.google.com/maps/place/?q=place_id:" + this.PLACE_ID,
+    };
+  }
+}
+</script>
+</body>
+</html>
--- a/Lackwerk-KL/assets/benefit01.svg
+++ b/Lackwerk-KL/assets/benefit01.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none"><path d="M7.71066 0C7.65321 1.65544e-09 7.59635 0.0115548 7.54346 0.0339771C7.49056 0.0563994 7.44272 0.089231 7.40277 0.130519C7.40277 0.130519 5.56809 2.02454 3.72983 4.43095C1.89158 6.83736 0 9.70401 0 11.9776C0 16.2401 3.45671 19.705 7.71066 19.705C11.9646 19.705 15.4213 16.2401 15.4213 11.9776C15.4213 9.70401 13.5297 6.83736 11.6915 4.43095C9.85324 2.02454 8.01855 0.130519 8.01855 0.130519C7.97861 0.089231 7.93076 0.0563994 7.87787 0.0339771C7.82498 0.0115548 7.76811 1.65544e-09 7.71066 0ZM7.71066 1.08766C7.98019 1.36927 9.3629 2.79246 11.0121 4.95136C12.815 7.3115 14.5646 10.2199 14.5646 11.9776C14.5646 15.7781 11.5005 18.8483 7.71066 18.8483C3.92082 18.8483 0.85674 15.7781 0.85674 11.9776C0.85674 10.2199 2.60631 7.3115 4.4092 4.95136C6.05842 2.79246 7.44113 1.36927 7.71066 1.08766ZM12.8511 11.9944C12.8511 13.5254 12.0352 14.9385 10.7093 15.7041L11.1376 16.4471C12.7275 15.5292 13.7078 13.8302 13.7078 11.9944H12.8511Z" fill="#F1F0EB"></path></svg>
--- a/Lackwerk-KL/assets/benefit02.svg
+++ b/Lackwerk-KL/assets/benefit02.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="19" viewBox="0 0 24 19" fill="none"><path d="M13.1574 2.13522H2.0837C1.97317 2.13522 1.86717 2.17913 1.78902 2.25728C1.71087 2.33544 1.66696 2.44144 1.66696 2.55196V8.38632C1.66696 8.49685 1.71087 8.60285 1.78902 8.681C1.86717 8.75916 1.97317 8.80306 2.0837 8.80306H20.2884C20.3744 8.80307 20.4583 8.77648 20.5286 8.72693C20.5989 8.67738 20.6521 8.6073 20.681 8.52631C20.7099 8.44531 20.713 8.35736 20.6899 8.27452C20.6668 8.19168 20.6187 8.11801 20.5521 8.0636L13.4212 2.22924C13.3467 2.16853 13.2535 2.13532 13.1574 2.13522ZM2.50044 7.96958V2.9687H13.0085L19.1208 7.96958H2.50044ZM19.17 10.8868C19.17 10.9973 19.1261 11.1033 19.048 11.1814C18.9698 11.2596 18.8638 11.3035 18.7533 11.3035H16.2529C16.1423 11.3035 16.0363 11.2596 15.9582 11.1814C15.88 11.1033 15.8361 10.9973 15.8361 10.8868C15.8361 10.7762 15.88 10.6702 15.9582 10.5921C16.0363 10.5139 16.1423 10.47 16.2529 10.47H18.7533C18.8638 10.47 18.9698 10.5139 19.048 10.5921C19.1261 10.6702 19.17 10.7762 19.17 10.8868ZM23.1844 8.0636L14.0161 0.562278C13.9417 0.501557 13.8485 0.468354 13.7524 0.468262H0.41674C0.306214 0.468262 0.200214 0.512168 0.12206 0.590322C0.0439065 0.668476 0 0.774475 0 0.885002V18.3881C0 18.4986 0.0439065 18.6046 0.12206 18.6828C0.200214 18.7609 0.306214 18.8048 0.41674 18.8048H17.0863C17.1969 18.8048 17.3029 18.7609 17.381 18.6828C17.4592 18.6046 17.5031 18.4986 17.5031 18.3881C17.5047 16.9517 18.0761 15.5747 19.0917 14.5591C20.1073 13.5434 21.4844 12.9721 22.9207 12.9705C23.0312 12.9705 23.1372 12.9266 23.2154 12.8484C23.2935 12.7702 23.3374 12.6642 23.3374 12.5537V8.38632C23.3374 8.32456 23.3237 8.26357 23.2972 8.20776C23.2707 8.15195 23.2322 8.10272 23.1844 8.0636ZM0.83348 17.9713V17.1379H16.802C16.7436 17.4127 16.704 17.6912 16.6834 17.9713H0.83348ZM22.504 12.1508C21.2856 12.234 20.1181 12.6715 19.1451 13.4094C18.1721 14.1474 17.4359 15.1536 17.0272 16.3044H0.83348V1.30174H13.6035L22.504 8.58369V12.1508Z" fill="#F1F0EB"></path></svg>
--- a/Lackwerk-KL/assets/benefit03.svg
+++ b/Lackwerk-KL/assets/benefit03.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="23" viewBox="0 0 15 23" fill="none"><path d="M7.24018 0.361328C3.30144 0.361328 0.0871235 3.48197 0.0871146 7.33451C0.087119 9.23873 0.874371 10.9609 2.14432 12.2191L0.0137677 20.6889C-0.00779518 20.7737 -0.00396177 20.8631 0.024792 20.9458C0.0535458 21.0285 0.105954 21.1009 0.175513 21.1541C0.245073 21.2073 0.32872 21.2389 0.416075 21.245C0.503431 21.2511 0.590648 21.2314 0.666904 21.1883L3.3004 19.7074L4.84593 22.313C4.89098 22.3895 4.95777 22.4508 5.0378 22.4892C5.11783 22.5275 5.20747 22.5412 5.2953 22.5285C5.38314 22.5158 5.4652 22.4772 5.53103 22.4176C5.59686 22.3581 5.64348 22.2803 5.66497 22.1942L7.19652 16.1099L8.72807 22.1942C8.74955 22.2803 8.79617 22.3581 8.862 22.4176C8.92784 22.4772 9.00989 22.5158 9.09773 22.5285C9.18557 22.5412 9.27521 22.5275 9.35523 22.4892C9.43526 22.4508 9.50205 22.3895 9.54711 22.313L11.0926 19.7074L13.7261 21.1883C13.8024 21.2314 13.8896 21.2511 13.977 21.245C14.0643 21.2389 14.148 21.2073 14.2175 21.1541C14.2871 21.1009 14.3395 21.0285 14.3682 20.9458C14.397 20.8631 14.4008 20.7737 14.3793 20.6889L12.2662 12.2889C13.5777 11.0252 14.3932 9.27391 14.3932 7.33451C14.3932 3.48197 11.1789 0.361328 7.24018 0.361328ZM7.24018 1.25546C10.7087 1.25546 13.4991 3.97857 13.4991 7.33451C13.4991 10.6904 10.7087 13.4136 7.24018 13.4136C3.77169 13.4136 0.981255 10.6904 0.981247 7.33451C0.981255 3.97857 3.77169 1.25546 7.24018 1.25546ZM7.21398 4.51415C7.14556 4.51789 7.07891 4.53665 7.01902 4.56901C6.95913 4.60138 6.90757 4.64651 6.8682 4.70101L5.94438 5.9776L4.40934 6.44038C4.34034 6.46141 4.27752 6.49817 4.22611 6.54759C4.17471 6.59701 4.13621 6.65766 4.11382 6.72448C4.09143 6.7913 4.08581 6.86235 4.09742 6.93171C4.10903 7.00107 4.13754 7.06673 4.18057 7.12321L5.14106 8.37534L5.11836 9.93658C5.11769 9.99605 5.12942 10.055 5.15283 10.11C5.17624 10.1649 5.21085 10.2147 5.25458 10.2563C5.2983 10.2979 5.35024 10.3305 5.40726 10.3521C5.46429 10.3737 5.52521 10.3838 5.58638 10.3819C5.63163 10.3802 5.67636 10.372 5.7191 10.3575L7.24018 9.8545L8.7595 10.3575C8.82812 10.3803 8.90139 10.3869 8.97316 10.3766C9.04493 10.3662 9.1131 10.3393 9.17195 10.2981C9.2308 10.2569 9.27861 10.2025 9.31138 10.1396C9.34414 10.0767 9.3609 10.0071 9.36025 9.93658L9.33929 8.37534L10.2998 7.12321C10.3428 7.06662 10.3712 7.00084 10.3827 6.93139C10.3942 6.86194 10.3885 6.79081 10.3659 6.72397C10.3433 6.65713 10.3046 6.5965 10.253 6.54717C10.2014 6.49783 10.1384 6.46122 10.0693 6.44038L8.53597 5.9776L7.6104 4.70101C7.56611 4.63969 7.50647 4.59036 7.43711 4.55766C7.36774 4.52497 7.29095 4.50999 7.21398 4.51415ZM7.24018 5.71914L7.88458 6.60629C7.94199 6.68591 8.02488 6.74485 8.12034 6.77393L9.18911 7.09701L8.51851 7.96669C8.45863 8.0442 8.42672 8.13872 8.4277 8.23563L8.44516 9.32186L7.38687 8.97259C7.29177 8.94101 7.18858 8.94101 7.09348 8.97259L6.03519 9.32186L6.05266 8.23563C6.05313 8.13853 6.0206 8.04398 5.9601 7.96669L5.2895 7.09701L6.36001 6.77393C6.45483 6.74452 6.53706 6.68561 6.59402 6.60629L7.24018 5.71914ZM2.90398 12.867C3.98301 13.6721 5.2997 14.1829 6.73373 14.2815L5.06247 20.9229L3.84701 18.8762C3.78757 18.7759 3.69132 18.7028 3.57878 18.6725C3.46624 18.6421 3.3463 18.6569 3.24452 18.7137L1.13318 19.8995L2.90398 12.867ZM11.503 12.9211L13.2599 19.8995L11.1485 18.7137C11.0467 18.6569 10.9268 18.6421 10.8142 18.6725C10.7017 18.7028 10.6055 18.7759 10.546 18.8762L9.33056 20.9229L7.66105 14.2867C9.0956 14.2048 10.4162 13.7109 11.503 12.9211Z" fill="#F1F0EB"></path></svg>
--- a/Lackwerk-KL/assets/bg-radkasten.jpg
+++ b/Lackwerk-KL/assets/bg-radkasten.jpg
--- a/Lackwerk-KL/assets/bg-vorderlicht.jpg
+++ b/Lackwerk-KL/assets/bg-vorderlicht.jpg
--- a/Lackwerk-KL/assets/hero-tankklappe.jpg
+++ b/Lackwerk-KL/assets/hero-tankklappe.jpg
--- a/Lackwerk-KL/assets/hero-tropfen.jpg
+++ b/Lackwerk-KL/assets/hero-tropfen.jpg
--- a/Lackwerk-KL/assets/hero-wassertropfen.jpg
+++ b/Lackwerk-KL/assets/hero-wassertropfen.jpg
--- a/Lackwerk-KL/assets/image-slot.js
+++ b/Lackwerk-KL/assets/image-slot.js
--- a/Lackwerk-KL/assets/lackbox-logo-weiss.svg
+++ b/Lackwerk-KL/assets/lackbox-logo-weiss.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.02 177.01"><defs></defs><title>Asset 5lackbox</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M269.86,3.45,234.59,92.39S211,91.28,194.41,97.83c-9.3,3.66-21,11.25-27.12,25-3.48,7.81-4.24,20.25-.16,30.41,6.24,15.55,27.73,27.35,52,19.63,16.15-5.14,23.78-24.52,26.48-29.52,3.72-6.88,6.92-16,10.79-23.66,4.56,1,8.51,2.18,12.61,3.36,29.39,8.49,51.17,24,61.19,50.26.16.4.72,1.94.72,1.94H364.2C363.93,174,304,3.51,304,3.51ZM198.75,150.92c-11.31-2.69-15.65-18.92-1.61-28.39,7.08-4.78,17.13-7.74,29.79-7.55C218.68,142,210.79,153.78,198.75,150.92Zm65.13-53.23c7.34-18.72,22.69-57.92,22.69-57.92s17,50.88,25.05,75.8C295.94,104.06,281.53,100.52,263.88,97.69Z"></path><polygon class="cls-1" points="31.88 2.39 0 2.39 0 174.03 135.06 174.03 135.06 147.06 31.88 147.06 31.88 2.39"></polygon><path class="cls-1" d="M480.61,28C495.52,28,524.5,35.1,530,60h33.14c-11.7-52.16-59.5-60-84-60-52.72,0-92,37-92,88.28s39.24,88.27,91.71,88.27c25.13,0,69.7-8,84-59.16l-33.47-.13c-10,24.36-32.64,31.34-48.84,31.34-35.56,0-61.31-25-61.31-60.32S445.05,28,480.61,28Z"></path><polygon class="cls-1" points="775.48 3.39 736.92 3.39 645.53 91.42 645.53 3.39 611.2 3.39 611.2 175.03 645.53 175.03 645.53 131.14 674.85 103.19 740.09 175.03 780.23 175.03 697.83 80.14 775.48 3.39"></polygon><path class="cls-1" d="M940,85.75c13.24-7.11,22.06-20.11,22.06-37.76,0-27.22-22.06-44.63-63.26-44.63H818.4V175h85.33c44.14,0,67.19-17.17,67.19-46.59C970.92,106.1,958.42,91.64,940,85.75ZM850.28,28.37H895.4c22.07,0,34.57,7.85,34.57,23.79,0,15.69-12.5,23.54-34.57,23.54H850.28ZM901.77,150H850.28V100.46h51.49c24,0,37,7.6,37,24.77S925.8,150,901.77,150Z"></path><path class="cls-1" d="M1100.56.46c-55.35,0-96.16,37.52-96.16,88.28S1045.21,177,1100.56,177s96.15-37.27,96.15-88.27S1155.91.46,1100.56.46Zm0,148.6c-36,0-62.75-25.26-62.75-60.32s26.79-60.33,62.75-60.33,62.74,25.26,62.74,60.33S1136.52,149.06,1100.56,149.06Z"></path><polygon class="cls-1" points="1327.32 86.19 1394.11 3.31 1355.67 3.31 1307.42 64.36 1258.62 3.31 1218.55 3.31 1285.61 87.41 1214.73 174.96 1255.08 174.96 1306.33 109.73 1358.13 174.96 1399.02 174.96 1327.32 86.19"></polygon></g></g></svg>
--- a/Lackwerk-KL/assets/leistungen-video.mp4
+++ b/Lackwerk-KL/assets/leistungen-video.mp4
--- a/Lackwerk-KL/assets/logo-lackwerk.png
+++ b/Lackwerk-KL/assets/logo-lackwerk.png
--- a/Lackwerk-KL/assets/review.svg
+++ b/Lackwerk-KL/assets/review.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="70" height="11" viewBox="0 0 70 11" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9091 5.45453C10.9091 8.46698 8.46701 10.9091 5.45454 10.9091C2.44208 10.9091 0 8.46698 0 5.45453C0 2.44208 2.44208 0 5.45454 0C8.46701 0 10.9091 2.44208 10.9091 5.45453ZM26.3637 5.45453C26.3637 8.46698 23.9216 10.9091 20.9091 10.9091C17.8967 10.9091 15.4546 8.46698 15.4546 5.45453C15.4546 2.44208 17.8967 0 20.9091 0C23.9216 0 26.3637 2.44208 26.3637 5.45453ZM36.3637 10.9091C39.3762 10.9091 41.8183 8.46698 41.8183 5.45453C41.8183 2.44208 39.3762 0 36.3637 0C33.3513 0 30.9092 2.44208 30.9092 5.45453C30.9092 8.46698 33.3513 10.9091 36.3637 10.9091ZM56.3637 5.45453C56.3637 8.46698 53.9216 10.9091 50.9091 10.9091C47.8967 10.9091 45.4546 8.46698 45.4546 5.45453C45.4546 2.44208 47.8967 0 50.9091 0C53.9216 0 56.3637 2.44208 56.3637 5.45453ZM64.5454 10.9091C67.5578 10.9091 69.9999 8.46698 69.9999 5.45453C69.9999 2.44208 67.5578 0 64.5454 0C61.5329 0 59.0908 2.44208 59.0908 5.45453C59.0908 8.46698 61.5329 10.9091 64.5454 10.9091Z" fill="#F2BD3F"></path></svg>
--- a/Lackwerk-KL/assets/work/feature.jpg
+++ b/Lackwerk-KL/assets/work/feature.jpg
--- a/Lackwerk-KL/assets/work/work1.jpg
+++ b/Lackwerk-KL/assets/work/work1.jpg
--- a/Lackwerk-KL/assets/work/work2.jpg
+++ b/Lackwerk-KL/assets/work/work2.jpg
--- a/Lackwerk-KL/assets/work/work3.jpg
+++ b/Lackwerk-KL/assets/work/work3.jpg
--- a/Lackwerk-KL/assets/work/work4.jpg
+++ b/Lackwerk-KL/assets/work/work4.jpg
--- a/Lackwerk-KL/assets/work/work5.jpg
+++ b/Lackwerk-KL/assets/work/work5.jpg
--- a/Lackwerk-KL/export/assets/benefit01.svg
+++ b/Lackwerk-KL/export/assets/benefit01.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none"><path d="M7.71066 0C7.65321 1.65544e-09 7.59635 0.0115548 7.54346 0.0339771C7.49056 0.0563994 7.44272 0.089231 7.40277 0.130519C7.40277 0.130519 5.56809 2.02454 3.72983 4.43095C1.89158 6.83736 0 9.70401 0 11.9776C0 16.2401 3.45671 19.705 7.71066 19.705C11.9646 19.705 15.4213 16.2401 15.4213 11.9776C15.4213 9.70401 13.5297 6.83736 11.6915 4.43095C9.85324 2.02454 8.01855 0.130519 8.01855 0.130519C7.97861 0.089231 7.93076 0.0563994 7.87787 0.0339771C7.82498 0.0115548 7.76811 1.65544e-09 7.71066 0ZM7.71066 1.08766C7.98019 1.36927 9.3629 2.79246 11.0121 4.95136C12.815 7.3115 14.5646 10.2199 14.5646 11.9776C14.5646 15.7781 11.5005 18.8483 7.71066 18.8483C3.92082 18.8483 0.85674 15.7781 0.85674 11.9776C0.85674 10.2199 2.60631 7.3115 4.4092 4.95136C6.05842 2.79246 7.44113 1.36927 7.71066 1.08766ZM12.8511 11.9944C12.8511 13.5254 12.0352 14.9385 10.7093 15.7041L11.1376 16.4471C12.7275 15.5292 13.7078 13.8302 13.7078 11.9944H12.8511Z" fill="#F1F0EB"></path></svg>
--- a/Lackwerk-KL/export/assets/benefit02.svg
+++ b/Lackwerk-KL/export/assets/benefit02.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="19" viewBox="0 0 24 19" fill="none"><path d="M13.1574 2.13522H2.0837C1.97317 2.13522 1.86717 2.17913 1.78902 2.25728C1.71087 2.33544 1.66696 2.44144 1.66696 2.55196V8.38632C1.66696 8.49685 1.71087 8.60285 1.78902 8.681C1.86717 8.75916 1.97317 8.80306 2.0837 8.80306H20.2884C20.3744 8.80307 20.4583 8.77648 20.5286 8.72693C20.5989 8.67738 20.6521 8.6073 20.681 8.52631C20.7099 8.44531 20.713 8.35736 20.6899 8.27452C20.6668 8.19168 20.6187 8.11801 20.5521 8.0636L13.4212 2.22924C13.3467 2.16853 13.2535 2.13532 13.1574 2.13522ZM2.50044 7.96958V2.9687H13.0085L19.1208 7.96958H2.50044ZM19.17 10.8868C19.17 10.9973 19.1261 11.1033 19.048 11.1814C18.9698 11.2596 18.8638 11.3035 18.7533 11.3035H16.2529C16.1423 11.3035 16.0363 11.2596 15.9582 11.1814C15.88 11.1033 15.8361 10.9973 15.8361 10.8868C15.8361 10.7762 15.88 10.6702 15.9582 10.5921C16.0363 10.5139 16.1423 10.47 16.2529 10.47H18.7533C18.8638 10.47 18.9698 10.5139 19.048 10.5921C19.1261 10.6702 19.17 10.7762 19.17 10.8868ZM23.1844 8.0636L14.0161 0.562278C13.9417 0.501557 13.8485 0.468354 13.7524 0.468262H0.41674C0.306214 0.468262 0.200214 0.512168 0.12206 0.590322C0.0439065 0.668476 0 0.774475 0 0.885002V18.3881C0 18.4986 0.0439065 18.6046 0.12206 18.6828C0.200214 18.7609 0.306214 18.8048 0.41674 18.8048H17.0863C17.1969 18.8048 17.3029 18.7609 17.381 18.6828C17.4592 18.6046 17.5031 18.4986 17.5031 18.3881C17.5047 16.9517 18.0761 15.5747 19.0917 14.5591C20.1073 13.5434 21.4844 12.9721 22.9207 12.9705C23.0312 12.9705 23.1372 12.9266 23.2154 12.8484C23.2935 12.7702 23.3374 12.6642 23.3374 12.5537V8.38632C23.3374 8.32456 23.3237 8.26357 23.2972 8.20776C23.2707 8.15195 23.2322 8.10272 23.1844 8.0636ZM0.83348 17.9713V17.1379H16.802C16.7436 17.4127 16.704 17.6912 16.6834 17.9713H0.83348ZM22.504 12.1508C21.2856 12.234 20.1181 12.6715 19.1451 13.4094C18.1721 14.1474 17.4359 15.1536 17.0272 16.3044H0.83348V1.30174H13.6035L22.504 8.58369V12.1508Z" fill="#F1F0EB"></path></svg>
--- a/Lackwerk-KL/export/assets/benefit03.svg
+++ b/Lackwerk-KL/export/assets/benefit03.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="23" viewBox="0 0 15 23" fill="none"><path d="M7.24018 0.361328C3.30144 0.361328 0.0871235 3.48197 0.0871146 7.33451C0.087119 9.23873 0.874371 10.9609 2.14432 12.2191L0.0137677 20.6889C-0.00779518 20.7737 -0.00396177 20.8631 0.024792 20.9458C0.0535458 21.0285 0.105954 21.1009 0.175513 21.1541C0.245073 21.2073 0.32872 21.2389 0.416075 21.245C0.503431 21.2511 0.590648 21.2314 0.666904 21.1883L3.3004 19.7074L4.84593 22.313C4.89098 22.3895 4.95777 22.4508 5.0378 22.4892C5.11783 22.5275 5.20747 22.5412 5.2953 22.5285C5.38314 22.5158 5.4652 22.4772 5.53103 22.4176C5.59686 22.3581 5.64348 22.2803 5.66497 22.1942L7.19652 16.1099L8.72807 22.1942C8.74955 22.2803 8.79617 22.3581 8.862 22.4176C8.92784 22.4772 9.00989 22.5158 9.09773 22.5285C9.18557 22.5412 9.27521 22.5275 9.35523 22.4892C9.43526 22.4508 9.50205 22.3895 9.54711 22.313L11.0926 19.7074L13.7261 21.1883C13.8024 21.2314 13.8896 21.2511 13.977 21.245C14.0643 21.2389 14.148 21.2073 14.2175 21.1541C14.2871 21.1009 14.3395 21.0285 14.3682 20.9458C14.397 20.8631 14.4008 20.7737 14.3793 20.6889L12.2662 12.2889C13.5777 11.0252 14.3932 9.27391 14.3932 7.33451C14.3932 3.48197 11.1789 0.361328 7.24018 0.361328ZM7.24018 1.25546C10.7087 1.25546 13.4991 3.97857 13.4991 7.33451C13.4991 10.6904 10.7087 13.4136 7.24018 13.4136C3.77169 13.4136 0.981255 10.6904 0.981247 7.33451C0.981255 3.97857 3.77169 1.25546 7.24018 1.25546ZM7.21398 4.51415C7.14556 4.51789 7.07891 4.53665 7.01902 4.56901C6.95913 4.60138 6.90757 4.64651 6.8682 4.70101L5.94438 5.9776L4.40934 6.44038C4.34034 6.46141 4.27752 6.49817 4.22611 6.54759C4.17471 6.59701 4.13621 6.65766 4.11382 6.72448C4.09143 6.7913 4.08581 6.86235 4.09742 6.93171C4.10903 7.00107 4.13754 7.06673 4.18057 7.12321L5.14106 8.37534L5.11836 9.93658C5.11769 9.99605 5.12942 10.055 5.15283 10.11C5.17624 10.1649 5.21085 10.2147 5.25458 10.2563C5.2983 10.2979 5.35024 10.3305 5.40726 10.3521C5.46429 10.3737 5.52521 10.3838 5.58638 10.3819C5.63163 10.3802 5.67636 10.372 5.7191 10.3575L7.24018 9.8545L8.7595 10.3575C8.82812 10.3803 8.90139 10.3869 8.97316 10.3766C9.04493 10.3662 9.1131 10.3393 9.17195 10.2981C9.2308 10.2569 9.27861 10.2025 9.31138 10.1396C9.34414 10.0767 9.3609 10.0071 9.36025 9.93658L9.33929 8.37534L10.2998 7.12321C10.3428 7.06662 10.3712 7.00084 10.3827 6.93139C10.3942 6.86194 10.3885 6.79081 10.3659 6.72397C10.3433 6.65713 10.3046 6.5965 10.253 6.54717C10.2014 6.49783 10.1384 6.46122 10.0693 6.44038L8.53597 5.9776L7.6104 4.70101C7.56611 4.63969 7.50647 4.59036 7.43711 4.55766C7.36774 4.52497 7.29095 4.50999 7.21398 4.51415ZM7.24018 5.71914L7.88458 6.60629C7.94199 6.68591 8.02488 6.74485 8.12034 6.77393L9.18911 7.09701L8.51851 7.96669C8.45863 8.0442 8.42672 8.13872 8.4277 8.23563L8.44516 9.32186L7.38687 8.97259C7.29177 8.94101 7.18858 8.94101 7.09348 8.97259L6.03519 9.32186L6.05266 8.23563C6.05313 8.13853 6.0206 8.04398 5.9601 7.96669L5.2895 7.09701L6.36001 6.77393C6.45483 6.74452 6.53706 6.68561 6.59402 6.60629L7.24018 5.71914ZM2.90398 12.867C3.98301 13.6721 5.2997 14.1829 6.73373 14.2815L5.06247 20.9229L3.84701 18.8762C3.78757 18.7759 3.69132 18.7028 3.57878 18.6725C3.46624 18.6421 3.3463 18.6569 3.24452 18.7137L1.13318 19.8995L2.90398 12.867ZM11.503 12.9211L13.2599 19.8995L11.1485 18.7137C11.0467 18.6569 10.9268 18.6421 10.8142 18.6725C10.7017 18.7028 10.6055 18.7759 10.546 18.8762L9.33056 20.9229L7.66105 14.2867C9.0956 14.2048 10.4162 13.7109 11.503 12.9211Z" fill="#F1F0EB"></path></svg>
--- a/Lackwerk-KL/export/assets/logo-lackwerk.png
+++ b/Lackwerk-KL/export/assets/logo-lackwerk.png
--- a/Lackwerk-KL/export/assets/review.svg
+++ b/Lackwerk-KL/export/assets/review.svg
@@ -0,0 +1 @@
+<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="70" height="11" viewBox="0 0 70 11" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9091 5.45453C10.9091 8.46698 8.46701 10.9091 5.45454 10.9091C2.44208 10.9091 0 8.46698 0 5.45453C0 2.44208 2.44208 0 5.45454 0C8.46701 0 10.9091 2.44208 10.9091 5.45453ZM26.3637 5.45453C26.3637 8.46698 23.9216 10.9091 20.9091 10.9091C17.8967 10.9091 15.4546 8.46698 15.4546 5.45453C15.4546 2.44208 17.8967 0 20.9091 0C23.9216 0 26.3637 2.44208 26.3637 5.45453ZM36.3637 10.9091C39.3762 10.9091 41.8183 8.46698 41.8183 5.45453C41.8183 2.44208 39.3762 0 36.3637 0C33.3513 0 30.9092 2.44208 30.9092 5.45453C30.9092 8.46698 33.3513 10.9091 36.3637 10.9091ZM56.3637 5.45453C56.3637 8.46698 53.9216 10.9091 50.9091 10.9091C47.8967 10.9091 45.4546 8.46698 45.4546 5.45453C45.4546 2.44208 47.8967 0 50.9091 0C53.9216 0 56.3637 2.44208 56.3637 5.45453ZM64.5454 10.9091C67.5578 10.9091 69.9999 8.46698 69.9999 5.45453C69.9999 2.44208 67.5578 0 64.5454 0C61.5329 0 59.0908 2.44208 59.0908 5.45453C59.0908 8.46698 61.5329 10.9091 64.5454 10.9091Z" fill="#F2BD3F"></path></svg>
--- a/Lackwerk-KL/export/index.html
+++ b/Lackwerk-KL/export/index.html
@@ -0,0 +1,195 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Lackwerk — Autolackiererei &amp; Karosserie</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=Archivo:wght@400;500;600;700;800;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,500;1,8..60,600&display=swap" rel="stylesheet">
+<style>
+  :root { --accent: #2FA4F0; }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { background: #0d0f12; font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
+  a { color: #f0f0ec; text-decoration: none; }
+  a:hover { color: var(--accent); }
+
+  .lw-root { position: relative; min-height: 100vh; width: 100%; overflow: hidden; background: #0d0f12; }
+  .lw-bg-base { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 78% 12%, #1c2530 0%, #12161b 42%, #0a0c0f 100%); }
+  .lw-bg-img { position: absolute; inset: 0; z-index: 1; filter: hue-rotate(85deg) saturate(1.15); }
+  .lw-bg-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .lw-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(18,60,120,0.32); mix-blend-mode: multiply; }
+  .lw-overlay-1 { 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%); }
+  .lw-overlay-2 { 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%); }
+  .lw-topline { position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .5; }
+
+  nav.lw-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; padding: 22px clamp(20px, 4vw, 56px); border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, padding .35s ease; }
+  nav.lw-nav.scrolled { background: rgba(11,13,16,.92); backdrop-filter: blur(14px); border-bottom-color: rgba(255,255,255,.10); padding-top: 14px; padding-bottom: 14px; }
+  .lw-nav-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
+  .lw-navlinks { display: flex; gap: 34px; align-items: center; }
+  .lw-navlinks.right { justify-content: flex-end; }
+  .lw-navlinks a { font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
+  .lw-logo { display: flex; align-items: center; justify-self: center; }
+  .lw-logo img { height: 26px; width: auto; display: block; }
+  .lw-burger { display: none; grid-column: 3; justify-self: end; background: transparent; border: 1.5px solid rgba(255,255,255,.28); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: #f4f3ef; align-items: center; }
+  .lw-burger span { display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }
+
+  .lw-content { position: relative; z-index: 10; display: flex; flex-direction: column; min-height: 100vh; padding: clamp(120px, 16vh, 190px) clamp(20px, 4vw, 56px) 0; }
+  .lw-container { max-width: 1320px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; flex: 1; }
+  .lw-spacer { flex: 1; min-height: 40px; }
+
+  @keyframes lw-fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
+  .lw-headline { max-width: 720px; margin: 0 auto; text-align: center; animation: lw-fadein .7s ease both; }
+  .lw-headline h1 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.08; letter-spacing: -.005em; color: #f5f4f0; font-size: clamp(36px, 4.8vw, 64px); margin-bottom: 22px; }
+  .lw-headline h1 .line { display: block; }
+  .lw-wordslot { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; text-align: left; }
+  .lw-word { display: inline-block; color: var(--accent); font-style: italic; will-change: transform, opacity; }
+  .lw-sub { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: #c5c9ce; max-width: 560px; margin: 0 auto; font-weight: 500; }
+
+  .lw-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 48px); padding: 28px 0 46px; }
+  .lw-benefit { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; }
+  .lw-benefit p { font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600; }
+  .lw-benefit img.icon { opacity: .95; }
+  .lw-benefit.last { justify-content: flex-end; gap: 14px; }
+
+  .lw-badge { display: inline-flex; flex-direction: column; gap: 3px; align-self: flex-start; background: #000; border: 1px solid rgba(255,255,255,.12); border-radius: 44px; padding: 11px 20px; transition: transform .3s ease, box-shadow .3s ease; }
+  .lw-badge:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.4); }
+  .lw-badge .name { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .01em; }
+  .lw-badge .row { display: inline-flex; align-items: center; gap: 7px; }
+  .lw-badge .grau { color: #DBDED9; font-weight: 600; font-size: 15px; }
+  .lw-badge .grau.light { font-weight: 300; }
+
+  @media (max-width: 860px) {
+    .lw-navlinks { display: none; }
+    .lw-burger { display: inline-flex; }
+    .lw-benefits { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
+  }
+  @media (max-width: 520px) {
+    .lw-benefits { grid-template-columns: 1fr; }
+  }
+</style>
+</head>
+<body>
+<div class="lw-root" id="top">
+  <div class="lw-bg-base"></div>
+  <div class="lw-bg-img">
+    <!-- TODO: eigenes Bild verwenden — aktuell Template-Bild von lack-box.de, per Filter blau -->
+    <img src="https://lack-box.de/wp-content/uploads/2020/07/startseite-01-tankklappe-squo-best.jpg" alt="">
+  </div>
+  <div class="lw-tint"></div>
+  <div class="lw-overlay-1"></div>
+  <div class="lw-overlay-2"></div>
+  <div class="lw-topline"></div>
+
+  <nav class="lw-nav" id="lwNav">
+    <div class="lw-nav-inner">
+      <div class="lw-navlinks">
+        <a href="#services">Services</a>
+        <a href="#techniken">Techniken</a>
+      </div>
+      <a href="#top" class="lw-logo"><img src="assets/logo-lackwerk.png" alt="Lackwerk"></a>
+      <div class="lw-navlinks right">
+        <a href="#ueber-uns">Über uns</a>
+        <a href="#kontakt">Kontakt</a>
+      </div>
+      <button class="lw-burger" aria-label="Menü"><span></span></button>
+    </div>
+  </nav>
+
+  <div class="lw-content">
+    <div class="lw-container">
+      <div class="lw-spacer"></div>
+
+      <div class="lw-headline">
+        <h1>
+          <span class="line">Rein mit
+            <span class="lw-wordslot" id="lwWordSlot"><span class="lw-word" id="lwWord">Kratzer</span></span>
+          </span>
+          <span class="line">Raus wie neu.</span>
+        </h1>
+        <p class="lw-sub">Wir reparieren alles! Mit Originalteilen und neuester Technik zu fairen Preisen. Als wäre nichts passiert.</p>
+      </div>
+
+      <div class="lw-spacer"></div>
+
+      <div class="lw-benefits">
+        <div class="lw-benefit">
+          <p>Fahrzeug-Reparatur wie in der Vertragswerkstatt — nur günstiger</p>
+        </div>
+        <div class="lw-benefit">
+          <img class="icon" src="assets/benefit01.svg" alt="" width="22" height="27">
+          <p>Wir nutzen Premium-Lacke</p>
+        </div>
+        <div class="lw-benefit">
+          <img class="icon" src="assets/benefit02.svg" alt="" width="30" height="24">
+          <p>Wir verbauen nur Originalteile</p>
+        </div>
+        <div class="lw-benefit last">
+          <a class="lw-badge" href="https://www.google.com/maps/place/?q=place_id:ChIJY8mtmUUNlkcRTRMePruieWA" target="_blank" rel="noopener">
+            <span class="name">Lackwerk</span>
+            <span class="row">
+              <span class="grau" id="lwRating">4,8</span>
+              <img src="assets/review.svg" alt="Bewertung" width="66" height="10">
+              <span class="grau light" id="lwCount">(112)</span>
+            </span>
+          </a>
+          <img class="icon" src="assets/benefit03.svg" alt="" width="20" height="30">
+          <p>Wir arbeiten mit der gleichen Genauigkeit</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  // Nav scroll state
+  var nav = document.getElementById('lwNav');
+  addEventListener('scroll', function () {
+    nav.classList.toggle('scrolled', scrollY > 30);
+  }, { passive: true });
+
+  // Rotating word (fixed slot width so "Rein mit" never shifts)
+  var WORDS = ['Unfall', 'Delle', 'Beule', 'Kratzer'];
+  var word = document.getElementById('lwWord');
+  var slot = document.getElementById('lwWordSlot');
+  function sizeSlot() {
+    var probe = document.createElement('span');
+    probe.style.cssText = 'position:absolute;visibility:hidden;white-space:nowrap;';
+    var cs = getComputedStyle(word);
+    probe.style.font = cs.font; probe.style.fontStyle = cs.fontStyle; probe.style.letterSpacing = cs.letterSpacing;
+    document.body.appendChild(probe);
+    var max = 0;
+    WORDS.forEach(function (w) { probe.textContent = w; max = Math.max(max, probe.getBoundingClientRect().width); });
+    probe.remove();
+    slot.style.width = Math.ceil(max + 2) + 'px';
+  }
+  sizeSlot();
+  addEventListener('resize', sizeSlot);
+  if (document.fonts && document.fonts.ready) document.fonts.ready.then(sizeSlot);
+
+  var i = WORDS.indexOf('Kratzer');
+  setInterval(function () {
+    i = (i + 1) % WORDS.length;
+    var next = WORDS[i];
+    word.animate(
+      [{ transform: 'translateY(0)', opacity: 1 }, { transform: 'translateY(-110%)', opacity: 0 }],
+      { duration: 300, easing: 'cubic-bezier(.6,0,.4,1)', fill: 'forwards' }
+    ).onfinish = function () {
+      word.textContent = next;
+      word.animate(
+        [{ transform: 'translateY(110%)', opacity: 0 }, { transform: 'translateY(0)', opacity: 1 }],
+        { duration: 340, easing: 'cubic-bezier(.2,.7,.3,1)', fill: 'forwards' }
+      );
+    };
+  }, 2400);
+
+  // Google-Bewertung: live via eigenem Backend-Endpunkt /api/reviews
+  // (Place ID: ChIJY8mtmUUNlkcRTRMePruieWA — API-Key bleibt server-seitig!)
+  fetch('/api/reviews').then(function (r) { return r.ok ? r.json() : null; }).then(function (d) {
+    if (!d) return;
+    if (d.rating) document.getElementById('lwRating').textContent = String(d.rating).replace('.', ',');
+    if (d.user_ratings_total) document.getElementById('lwCount').textContent = '(' + d.user_ratings_total + ')';
+  }).catch(function () { /* Fallback: statische Werte bleiben stehen */ });
+</script>
+</body>
+</html>
--- a/Lackwerk-KL/support.js
+++ b/Lackwerk-KL/support.js
--- a/Lackwerk-KL/uploads/Our
+++ b/Lackwerk-KL/uploads/Our
--- a/Lackwerk-KL/uploads/d76d7d5d-26e1-4e19-b61d-00ecf4be7d61.png
+++ b/Lackwerk-KL/uploads/d76d7d5d-26e1-4e19-b61d-00ecf4be7d61.png
--- a/Lackwerk-KL/uploads/lw1_951x486.jpg
+++ b/Lackwerk-KL/uploads/lw1_951x486.jpg
--- a/Lackwerk-KL/uploads/Über
+++ b/Lackwerk-KL/uploads/Über
				`@@ -0,0 +1 @@`
				<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none"><path d="M7.71066 0C7.65321 1.65544e-09 7.59635 0.0115548 7.54346 0.0339771C7.49056 0.0563994 7.44272 0.089231 7.40277 0.130519C7.40277 0.130519 5.56809 2.02454 3.72983 4.43095C1.89158 6.83736 0 9.70401 0 11.9776C0 16.2401 3.45671 19.705 7.71066 19.705C11.9646 19.705 15.4213 16.2401 15.4213 11.9776C15.4213 9.70401 13.5297 6.83736 11.6915 4.43095C9.85324 2.02454 8.01855 0.130519 8.01855 0.130519C7.97861 0.089231 7.93076 0.0563994 7.87787 0.0339771C7.82498 0.0115548 7.76811 1.65544e-09 7.71066 0ZM7.71066 1.08766C7.98019 1.36927 9.3629 2.79246 11.0121 4.95136C12.815 7.3115 14.5646 10.2199 14.5646 11.9776C14.5646 15.7781 11.5005 18.8483 7.71066 18.8483C3.92082 18.8483 0.85674 15.7781 0.85674 11.9776C0.85674 10.2199 2.60631 7.3115 4.4092 4.95136C6.05842 2.79246 7.44113 1.36927 7.71066 1.08766ZM12.8511 11.9944C12.8511 13.5254 12.0352 14.9385 10.7093 15.7041L11.1376 16.4471C12.7275 15.5292 13.7078 13.8302 13.7078 11.9944H12.8511Z" fill="#F1F0EB"></path></svg>