generated from knso/webklar-preview-template
Kenso Grimm
5acd7046d3
Im Ordner alt webseite/ lag ein HTTrack-Mirror der alten Seite von lackwerk-kl.de – eine starre 950px-Seite von 2014/2022 mit fixem Layout, Stock-Fotos und einer simplen Bildergalerie. Nicht responsive, nicht mehr zeitgemäß. Was ich Schritt für Schritt gemacht habe 1. Firma recherchiert Aus Altseite, Google, Branchenverzeichnissen und Facebook ein vollständiges Profil erstellt: Lackwerk GmbH, Gienanthstr. 2–4, Kaiserslautern · Inhaber Patric Hertz · gegründet 2014 Leistungen, Öffnungszeiten, Rechtsdaten (HRB 31677, USt DE295225567) Bewertungen: 5,0★ bei 72 Google-Bewertungen, 100 % empfohlen (Facebook), 334 Follower 2. Echte Bilder von Facebook geholt (wie von dir gewünscht) Von der öffentlichen Seite derlackspezialist die echten Arbeitsfotos extrahiert und heruntergeladen: Lackierer in der Spritzkabine → Hero-Bild komplette Porsche-911-Restauration (Rohzustand → Grundierung → frisch lackiert → Hochglanz) → Referenz-Galerie Logo + einige Werkstattmotive aus der Altseite als Ergänzung 3. Neue Webseite gebaut – ein sauberes, modernes index.html (21st-inspiriert, aber seriös): Bereich Inhalt Header Glasig, sticky, Wortmarke, Mobile-Menü Hero Dunkel-elegant, echtes Kabinen-Foto, Gradient-Text, Trust-Zahlen Trust-Leiste Meisterqualität, alle Marken, faire Preise Leistungen 6 Karten mit Icons & Hover-Effekt Über uns Firmengeschichte + Patric Hertz Prozess 4 Schritte von Anfrage bis Übergabe Referenzen Bento-Galerie mit Lightbox (echte Fotos) Bewertungen Nur belegbare Kennzahlen, keine erfundenen Zitate Kontakt Daten, Öffnungszeiten, funktionierende Google-Map Footer Impressum & Datenschutz als Modals Markenfarbe Blau (passend zum Logo), Fonts Sora/Inter, dezente Scroll-Animationen, voll responsiv. 4. Im Browser getestet & gefixt Alle Sektionen, Modal, Map und schnelles Scrollen geprüft. Zwei Details korrigiert: Header-Umbruch bei mittlerer Breite + Absicherung, damit bei schnellem Scrollen keine Sektion unsichtbar bleibt. Dateien index.html – neue Webseite (ersetzt die Platzhalter-Vorlage) assets/ – Logo + Werkstattmotive assets/work/ – echte Facebook-Arbeitsfotos Alte Seite unter alt webseite/ unberührt als Referenz
858 lines
50 KiB
HTML
858 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Lackwerk GmbH – Autolackiererei in Kaiserslautern | der Lackspezialist</title>
|
||
<meta name="description" content="Lackwerk GmbH in Kaiserslautern – Ihre Meisterlackiererei für Lackierungen aller Art, Smart Repair, Oldtimerrestauration, Lackaufbereitung und Sonderlackierungen. 5,0 ★ bei Google, 100 % empfohlen.">
|
||
<meta name="keywords" content="Autolackiererei Kaiserslautern, Lackierer, Smart Repair, Oldtimerlackierung, Lackaufbereitung, Lackwerk, der Lackspezialist">
|
||
<meta name="author" content="Lackwerk GmbH">
|
||
<meta name="theme-color" content="#0b2a52">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Lackwerk GmbH – der Lackspezialist in Kaiserslautern">
|
||
<meta property="og:description" content="Meisterhafte Fahrzeuglackierung seit 2014. Lackierungen aller Art, Smart Repair, Oldtimer & Aufbereitung.">
|
||
<meta property="og:image" content="assets/work/feature.jpg">
|
||
<meta property="og:locale" content="de_DE">
|
||
|
||
<link rel="icon" type="image/jpeg" href="assets/logo-mark.jpg">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
:root{
|
||
--bg:#ffffff;
|
||
--bg-soft:#f5f7fb;
|
||
--bg-softer:#eef2f8;
|
||
--ink:#0c1626;
|
||
--ink-2:#1d2a3d;
|
||
--muted:#5c6779;
|
||
--muted-2:#7c8798;
|
||
--line:#e4e9f1;
|
||
--line-2:#d5dce7;
|
||
--brand:#1466c7;
|
||
--brand-2:#0f4f9e;
|
||
--brand-deep:#0b2a52;
|
||
--brand-tint:#e9f1fb;
|
||
--white:#fff;
|
||
--radius:18px;
|
||
--radius-lg:26px;
|
||
--shadow-sm:0 1px 2px rgba(12,22,38,.06),0 2px 8px rgba(12,22,38,.05);
|
||
--shadow-md:0 10px 30px -12px rgba(12,22,38,.18);
|
||
--shadow-lg:0 30px 70px -30px rgba(11,42,82,.45);
|
||
--maxw:1180px;
|
||
--ease:cubic-bezier(.22,.61,.36,1);
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0}
|
||
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
|
||
body{
|
||
font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
|
||
color:var(--ink);background:var(--bg);line-height:1.65;
|
||
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
|
||
overflow-x:hidden;
|
||
}
|
||
img{display:block;max-width:100%;height:auto}
|
||
a{color:inherit;text-decoration:none}
|
||
h1,h2,h3,.display{font-family:'Sora','Inter',sans-serif;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
|
||
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
|
||
.eyebrow{
|
||
display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.8rem;
|
||
letter-spacing:.14em;text-transform:uppercase;color:var(--brand-2);
|
||
}
|
||
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--brand)}
|
||
.eyebrow.light{color:#8fc0ff}
|
||
.eyebrow.light::before{background:#4d92e6}
|
||
.btn{
|
||
display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem;
|
||
padding:14px 26px;border-radius:100px;border:1px solid transparent;cursor:pointer;
|
||
transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s,border-color .3s;
|
||
white-space:nowrap;
|
||
}
|
||
.btn svg{width:18px;height:18px}
|
||
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 12px 24px -10px rgba(20,102,199,.7)}
|
||
.btn-primary:hover{background:var(--brand-2);transform:translateY(-2px);box-shadow:0 18px 30px -10px rgba(20,102,199,.75)}
|
||
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
|
||
.btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
|
||
.btn-dark{background:var(--ink);color:#fff}
|
||
.btn-dark:hover{background:var(--brand-deep);transform:translateY(-2px)}
|
||
.btn-outline{background:#fff;color:var(--ink);border-color:var(--line-2)}
|
||
.btn-outline:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
|
||
|
||
/* ---------- Header ---------- */
|
||
.header{
|
||
position:fixed;top:0;left:0;right:0;z-index:100;
|
||
transition:background .4s,box-shadow .4s,border-color .4s,backdrop-filter .4s;
|
||
border-bottom:1px solid transparent;
|
||
}
|
||
.header.scrolled{
|
||
background:rgba(255,255,255,.82);backdrop-filter:blur(16px) saturate(1.4);
|
||
-webkit-backdrop-filter:blur(16px) saturate(1.4);
|
||
border-bottom-color:var(--line);box-shadow:0 4px 20px -14px rgba(12,22,38,.4);
|
||
}
|
||
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
|
||
.brand{display:flex;align-items:center;gap:12px;font-family:'Sora',sans-serif;font-weight:800;
|
||
font-size:1.28rem;letter-spacing:.04em;color:#fff;transition:color .4s}
|
||
.header.scrolled .brand{color:var(--ink)}
|
||
.brand .mark{
|
||
width:38px;height:38px;border-radius:11px;object-fit:cover;
|
||
box-shadow:0 4px 14px -4px rgba(11,42,82,.6);flex:none;
|
||
}
|
||
.brand small{display:block;font-family:'Inter';font-weight:500;font-size:.62rem;letter-spacing:.22em;
|
||
text-transform:uppercase;color:#9fb8d6;margin-top:1px}
|
||
.header.scrolled .brand small{color:var(--muted-2)}
|
||
.nav-links{display:flex;align-items:center;gap:6px}
|
||
.nav-links a{
|
||
font-weight:500;font-size:.95rem;color:rgba(255,255,255,.86);padding:9px 15px;border-radius:100px;
|
||
transition:color .25s,background .25s
|
||
}
|
||
.header.scrolled .nav-links a{color:var(--ink-2)}
|
||
.nav-links a:hover{background:rgba(255,255,255,.12);color:#fff}
|
||
.header.scrolled .nav-links a:hover{background:var(--brand-tint);color:var(--brand-2)}
|
||
.nav-cta{display:flex;align-items:center;gap:14px}
|
||
.nav-phone{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem;color:#fff;transition:color .4s;white-space:nowrap}
|
||
.header.scrolled .nav-phone{color:var(--ink)}
|
||
.nav-phone svg{width:17px;height:17px;color:var(--brand)}
|
||
.header.scrolled .nav-phone svg{color:var(--brand)}
|
||
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
|
||
.burger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}
|
||
.header.scrolled .burger span{background:var(--ink)}
|
||
|
||
/* ---------- Hero ---------- */
|
||
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden}
|
||
.hero-bg{position:absolute;inset:0;z-index:0}
|
||
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%}
|
||
.hero-bg::after{content:"";position:absolute;inset:0;
|
||
background:
|
||
linear-gradient(105deg,rgba(7,18,34,.94) 0%,rgba(8,24,46,.86) 38%,rgba(9,30,58,.55) 68%,rgba(10,34,66,.30) 100%),
|
||
linear-gradient(0deg,rgba(6,14,28,.85) 0%,rgba(6,14,28,0) 45%);
|
||
}
|
||
.hero-glow{position:absolute;z-index:1;width:620px;height:620px;border-radius:50%;
|
||
background:radial-gradient(circle,rgba(28,120,225,.42),transparent 62%);
|
||
right:-140px;top:-120px;filter:blur(30px);pointer-events:none}
|
||
.hero .container{position:relative;z-index:2;padding-top:100px;padding-bottom:64px}
|
||
.hero-inner{max-width:760px}
|
||
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:800;color:#fff;margin:22px 0 0}
|
||
.hero h1 .accent{
|
||
background:linear-gradient(100deg,#5fa8ff,#a9cbff);-webkit-background-clip:text;background-clip:text;color:transparent;
|
||
}
|
||
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:rgba(233,241,251,.9);max-width:560px;margin:22px 0 34px;font-weight:400}
|
||
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
|
||
.hero-badges{display:flex;flex-wrap:wrap;gap:26px;margin-top:48px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14)}
|
||
.hero-badge{display:flex;flex-direction:column;gap:2px}
|
||
.hero-badge b{font-family:'Sora';font-size:1.7rem;font-weight:700;color:#fff;line-height:1}
|
||
.hero-badge span{font-size:.82rem;color:rgba(215,228,244,.8);letter-spacing:.02em}
|
||
.stars{color:#ffc861;letter-spacing:2px;font-size:1.1rem}
|
||
.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
|
||
display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.65);font-size:.72rem;
|
||
letter-spacing:.2em;text-transform:uppercase}
|
||
.scroll-hint .mouse{width:24px;height:38px;border:2px solid rgba(255,255,255,.4);border-radius:14px;position:relative}
|
||
.scroll-hint .mouse::after{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
|
||
width:3px;height:7px;border-radius:2px;background:#fff;animation:scrolldot 1.8s infinite}
|
||
@keyframes scrolldot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,10px)}}
|
||
|
||
/* ---------- Trust strip ---------- */
|
||
.trust{background:var(--brand-deep);color:#fff;padding:22px 0}
|
||
.trust .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 40px}
|
||
.trust-item{display:flex;align-items:center;gap:11px;font-size:.95rem;color:rgba(226,236,249,.92)}
|
||
.trust-item svg{width:20px;height:20px;color:#6fb0ff;flex:none}
|
||
.trust-item b{color:#fff;font-weight:600}
|
||
.trust-sep{width:1px;height:20px;background:rgba(255,255,255,.18)}
|
||
|
||
/* ---------- Section base ---------- */
|
||
section{position:relative}
|
||
.sec{padding:104px 0}
|
||
.sec-soft{background:var(--bg-soft)}
|
||
.sec-head{max-width:680px;margin-bottom:56px}
|
||
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
|
||
.sec-head h2{font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:700;margin:16px 0 0}
|
||
.sec-head p{color:var(--muted);font-size:1.08rem;margin-top:16px}
|
||
|
||
/* ---------- Leistungen grid ---------- */
|
||
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
|
||
.card{
|
||
background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:30px;
|
||
transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;position:relative;overflow:hidden;
|
||
}
|
||
.card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;
|
||
background:linear-gradient(90deg,var(--brand),#5fa8ff);transition:transform .45s var(--ease)}
|
||
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent}
|
||
.card:hover::before{transform:scaleX(1)}
|
||
.card .ico{
|
||
width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:20px;
|
||
background:linear-gradient(140deg,var(--brand-tint),#f6faff);color:var(--brand-2);
|
||
border:1px solid #dbe8f8;transition:background .4s,color .4s,transform .4s
|
||
}
|
||
.card:hover .ico{background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;transform:scale(1.04)}
|
||
.card .ico svg{width:26px;height:26px}
|
||
.card h3{font-size:1.22rem;font-weight:700;margin-bottom:9px}
|
||
.card p{color:var(--muted);font-size:.96rem}
|
||
.card .tag{display:inline-block;margin-top:16px;font-size:.78rem;font-weight:600;letter-spacing:.04em;
|
||
color:var(--brand-2);text-transform:uppercase}
|
||
|
||
/* ---------- About / split ---------- */
|
||
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
|
||
.split-media{position:relative}
|
||
.split-media .frame{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/5;
|
||
border:1px solid var(--line)}
|
||
.split-media .frame img{width:100%;height:100%;object-fit:cover}
|
||
.split-media .float{
|
||
position:absolute;left:-26px;bottom:-26px;background:#fff;border:1px solid var(--line);
|
||
border-radius:18px;padding:20px 24px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:16px;max-width:260px
|
||
}
|
||
.split-media .float .n{font-family:'Sora';font-size:2rem;font-weight:800;color:var(--brand-2);line-height:1}
|
||
.split-media .float small{color:var(--muted);font-size:.86rem;line-height:1.4}
|
||
.about-list{list-style:none;margin:26px 0 32px;display:grid;gap:16px}
|
||
.about-list li{display:flex;gap:14px;align-items:flex-start}
|
||
.about-list .chk{width:26px;height:26px;border-radius:8px;background:var(--brand-tint);color:var(--brand-2);
|
||
display:grid;place-items:center;flex:none;margin-top:2px}
|
||
.about-list .chk svg{width:15px;height:15px}
|
||
.about-list b{font-weight:600}
|
||
.about-list span{color:var(--muted);font-size:.95rem}
|
||
.owner{display:flex;align-items:center;gap:16px;margin-top:8px;padding-top:26px;border-top:1px solid var(--line)}
|
||
.owner .sig{font-family:'Sora';font-weight:700;font-size:1.05rem}
|
||
.owner small{color:var(--muted);font-size:.86rem}
|
||
|
||
/* ---------- Prozess ---------- */
|
||
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
|
||
.step{position:relative;padding:30px 24px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);
|
||
transition:transform .4s var(--ease),box-shadow .4s}
|
||
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
|
||
.step .num{font-family:'Sora';font-size:.9rem;font-weight:700;color:var(--brand-2);
|
||
width:40px;height:40px;border-radius:11px;border:1px solid #dbe8f8;background:var(--brand-tint);
|
||
display:grid;place-items:center;margin-bottom:18px}
|
||
.step h4{font-size:1.08rem;font-weight:700;margin-bottom:7px;font-family:'Sora'}
|
||
.step p{color:var(--muted);font-size:.92rem}
|
||
|
||
/* ---------- Referenzen / gallery ---------- */
|
||
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:16px}
|
||
.gitem{position:relative;overflow:hidden;border-radius:16px;cursor:pointer;background:#0b1626;
|
||
border:1px solid var(--line)}
|
||
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
|
||
.gitem::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,14,28,.55),transparent 55%);
|
||
opacity:0;transition:opacity .4s}
|
||
.gitem img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
|
||
.gitem:hover img{transform:scale(1.07)}
|
||
.gitem:hover::after{opacity:1}
|
||
.gitem .cap{position:absolute;left:16px;bottom:14px;right:16px;color:#fff;z-index:2;opacity:0;transform:translateY(8px);
|
||
transition:opacity .4s,transform .4s;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:8px}
|
||
.gitem:hover .cap{opacity:1;transform:none}
|
||
.gitem .cap svg{width:16px;height:16px;flex:none}
|
||
.g-wide{grid-column:span 2}
|
||
.g-tall{grid-row:span 2}
|
||
.g-big{grid-column:span 2;grid-row:span 2}
|
||
.ref-note{text-align:center;margin-top:30px;color:var(--muted);font-size:.94rem}
|
||
.ref-note a{color:var(--brand-2);font-weight:600;border-bottom:1px solid transparent;transition:border-color .3s}
|
||
.ref-note a:hover{border-color:var(--brand)}
|
||
|
||
/* ---------- Reviews ---------- */
|
||
.reviews-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
|
||
.rating-hero{background:linear-gradient(150deg,var(--brand-deep),#123a70);color:#fff;border-radius:var(--radius-lg);
|
||
padding:44px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
|
||
.rating-hero::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;
|
||
background:radial-gradient(circle,rgba(95,168,255,.35),transparent 65%);right:-90px;bottom:-90px}
|
||
.rating-hero .big{font-family:'Sora';font-size:4.2rem;font-weight:800;line-height:1;position:relative}
|
||
.rating-hero .stars{font-size:1.5rem;margin:10px 0}
|
||
.rating-hero p{color:rgba(220,233,250,.85);position:relative;font-size:.98rem}
|
||
.rev-cards{display:grid;gap:18px}
|
||
.rev-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-sm);
|
||
transition:transform .4s var(--ease),box-shadow .4s}
|
||
.rev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
|
||
.rev-card .src{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
|
||
.rev-card .src .name{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1rem}
|
||
.rev-card .src .badge{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.9rem}
|
||
.rev-card .stars{color:#ffb100;font-size:.95rem;letter-spacing:1px}
|
||
.rev-card p{color:var(--ink-2);font-size:.98rem}
|
||
.rev-card .meta{margin-top:14px;font-size:.83rem;color:var(--muted-2)}
|
||
|
||
/* ---------- Kontakt ---------- */
|
||
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:stretch}
|
||
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-md)}
|
||
.contact-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
|
||
.contact-row:last-of-type{border-bottom:0}
|
||
.contact-row .ci{width:44px;height:44px;border-radius:12px;background:var(--brand-tint);color:var(--brand-2);
|
||
display:grid;place-items:center;flex:none}
|
||
.contact-row .ci svg{width:20px;height:20px}
|
||
.contact-row .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);font-weight:600}
|
||
.contact-row .val{font-weight:600;font-size:1.02rem;color:var(--ink)}
|
||
.contact-row .val a:hover{color:var(--brand-2)}
|
||
.contact-row .val span{display:block;font-weight:400;font-size:.92rem;color:var(--muted)}
|
||
.hours{margin-top:8px}
|
||
.hours .h-row{display:flex;justify-content:space-between;padding:7px 0;font-size:.95rem}
|
||
.hours .h-row span:first-child{color:var(--muted)}
|
||
.hours .h-row span:last-child{font-weight:600}
|
||
.hours .h-row.closed span:last-child{color:var(--muted-2);font-weight:500}
|
||
.map-card{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--line);min-height:460px}
|
||
.map-card iframe{width:100%;height:100%;min-height:460px;border:0;display:block;filter:grayscale(.15) contrast(1.02)}
|
||
.contact-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
|
||
|
||
/* ---------- CTA band ---------- */
|
||
.cta-band{background:linear-gradient(120deg,var(--brand-deep) 0%,#0f3f7d 55%,#155aa8 100%);color:#fff;
|
||
border-radius:var(--radius-lg);padding:60px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-lg)}
|
||
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(95,168,255,.3),transparent 45%)}
|
||
.cta-band h2{color:#fff;font-size:clamp(1.7rem,3vw,2.5rem);position:relative}
|
||
.cta-band p{color:rgba(224,236,251,.9);max-width:520px;margin:16px auto 30px;position:relative}
|
||
.cta-band .hero-actions{justify-content:center;position:relative}
|
||
|
||
/* ---------- Footer ---------- */
|
||
.footer{background:#081326;color:#aebccf;padding:70px 0 30px;font-size:.94rem}
|
||
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.09)}
|
||
.footer .brand{color:#fff;margin-bottom:16px}
|
||
.footer-about p{color:#8fa0b6;max-width:320px}
|
||
.footer h5{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;font-weight:600}
|
||
.footer ul{list-style:none;display:grid;gap:11px}
|
||
.footer ul a{color:#a7b7cb;transition:color .25s}
|
||
.footer ul a:hover{color:#fff}
|
||
.footer .fb{display:inline-flex;align-items:center;gap:9px;margin-top:16px;color:#a7b7cb;transition:color .25s}
|
||
.footer .fb:hover{color:#fff}
|
||
.footer .fb svg{width:18px;height:18px}
|
||
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;padding-top:26px;color:#7688a0;font-size:.86rem}
|
||
.footer-bottom a{color:#7688a0;cursor:pointer}
|
||
.footer-bottom a:hover{color:#fff}
|
||
.footer-bottom .legal-links{display:flex;gap:22px;flex-wrap:wrap}
|
||
|
||
/* ---------- Modal ---------- */
|
||
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
|
||
.modal.open{display:flex}
|
||
.modal-back{position:absolute;inset:0;background:rgba(6,14,28,.62);backdrop-filter:blur(4px)}
|
||
.modal-box{position:relative;background:#fff;border-radius:20px;max-width:760px;width:100%;max-height:86vh;
|
||
overflow-y:auto;box-shadow:var(--shadow-lg);animation:pop .35s var(--ease)}
|
||
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
|
||
.modal-box .m-head{position:sticky;top:0;background:#fff;padding:26px 34px;border-bottom:1px solid var(--line);
|
||
display:flex;align-items:center;justify-content:space-between;z-index:2}
|
||
.modal-box h3{font-size:1.4rem}
|
||
.modal-close{width:40px;height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;cursor:pointer;
|
||
display:grid;place-items:center;transition:background .25s,border-color .25s}
|
||
.modal-close:hover{background:var(--bg-soft);border-color:var(--line-2)}
|
||
.modal-close svg{width:20px;height:20px}
|
||
.modal-body{padding:30px 34px 40px;color:var(--ink-2)}
|
||
.modal-body h4{font-family:'Sora';font-size:1.05rem;margin:24px 0 8px;color:var(--ink)}
|
||
.modal-body h4:first-child{margin-top:0}
|
||
.modal-body p{color:var(--muted);margin-bottom:12px;font-size:.95rem}
|
||
.modal-body .kv{font-weight:600;color:var(--ink)}
|
||
|
||
/* ---------- Lightbox ---------- */
|
||
.lightbox{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;padding:32px;
|
||
background:rgba(5,11,22,.9);backdrop-filter:blur(6px)}
|
||
.lightbox.open{display:flex}
|
||
.lightbox img{max-width:92vw;max-height:88vh;border-radius:12px;box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}
|
||
.lightbox .lb-close{position:absolute;top:24px;right:28px;width:46px;height:46px;border-radius:12px;
|
||
background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;cursor:pointer;display:grid;place-items:center}
|
||
.lightbox .lb-close:hover{background:rgba(255,255,255,.22)}
|
||
|
||
/* ---------- Reveal ---------- */
|
||
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
|
||
.reveal.in{opacity:1;transform:none}
|
||
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
|
||
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}
|
||
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}
|
||
html{scroll-behavior:auto}.scroll-hint .mouse::after{animation:none}}
|
||
|
||
/* ---------- Responsive ---------- */
|
||
@media(max-width:1120px){
|
||
.nav-links{gap:2px}
|
||
.nav-links a{padding:9px 12px;font-size:.92rem}
|
||
.nav-phone{display:none}
|
||
}
|
||
@media(max-width:980px){
|
||
.split{grid-template-columns:1fr;gap:44px}
|
||
.split-media{order:-1;max-width:440px;margin:0 auto}
|
||
.steps{grid-template-columns:repeat(2,1fr)}
|
||
.services{grid-template-columns:repeat(2,1fr)}
|
||
.reviews-wrap,.contact-grid{grid-template-columns:1fr}
|
||
.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
|
||
.g-big{grid-column:span 2}
|
||
.footer-top{grid-template-columns:1fr 1fr}
|
||
}
|
||
@media(max-width:760px){
|
||
.nav-links,.nav-phone{display:none}
|
||
.burger{display:flex}
|
||
.nav-links.mobile{display:flex;position:absolute;top:76px;left:16px;right:16px;flex-direction:column;
|
||
align-items:stretch;gap:4px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;
|
||
box-shadow:var(--shadow-lg)}
|
||
.nav-links.mobile a{color:var(--ink-2);padding:12px 16px}
|
||
.nav-links.mobile a:hover{background:var(--brand-tint)}
|
||
.sec{padding:72px 0}
|
||
.hero .container{padding-top:110px}
|
||
.hero-badges{gap:20px}
|
||
.cta-band{padding:44px 26px}
|
||
.rating-hero{padding:34px}
|
||
.contact-card,.modal-body,.modal-box .m-head{padding-left:24px;padding-right:24px}
|
||
}
|
||
@media(max-width:520px){
|
||
.services{grid-template-columns:1fr}
|
||
.steps{grid-template-columns:1fr}
|
||
.gallery{grid-template-columns:1fr;grid-auto-rows:220px}
|
||
.g-wide,.g-big,.g-tall{grid-column:auto;grid-row:auto}
|
||
.trust-sep{display:none}
|
||
.split-media .float{left:12px;right:12px;bottom:-20px;max-width:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ===== Header ===== -->
|
||
<header class="header" id="header">
|
||
<div class="container">
|
||
<nav class="nav">
|
||
<a href="#top" class="brand">
|
||
<img class="mark" src="assets/logo-mark.jpg" alt="Lackwerk Logo">
|
||
<span>LACKWERK<small>Kaiserslautern</small></span>
|
||
</a>
|
||
<div class="nav-links" id="navlinks">
|
||
<a href="#leistungen">Leistungen</a>
|
||
<a href="#ueber">Über uns</a>
|
||
<a href="#referenzen">Referenzen</a>
|
||
<a href="#bewertungen">Bewertungen</a>
|
||
<a href="#kontakt">Kontakt</a>
|
||
</div>
|
||
<div class="nav-cta">
|
||
<a href="tel:+49631357890" class="nav-phone">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.32 1.85.55 2.81.68A2 2 0 0 1 22 16.92z"/></svg>
|
||
0631 / 35 78 90-6
|
||
</a>
|
||
<a href="#kontakt" class="btn btn-primary">Termin anfragen</a>
|
||
<button class="burger" id="burger" aria-label="Menü"><span></span><span></span><span></span></button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== Hero ===== -->
|
||
<section class="hero" id="top">
|
||
<div class="hero-bg"><img src="assets/work/feature.jpg" alt="Lackierer bei der Arbeit in der Spritzkabine"></div>
|
||
<div class="hero-glow"></div>
|
||
<div class="container">
|
||
<div class="hero-inner">
|
||
<span class="eyebrow light">Autolackiererei · Kaiserslautern · seit 2014</span>
|
||
<h1>Perfekter Lack.<br><span class="accent">Kompromisslos gut.</span></h1>
|
||
<p class="lead">Lackwerk ist Ihr Meisterbetrieb für Fahrzeuglackierung in Kaiserslautern – von der unsichtbaren Smart-Repair-Reparatur bis zur kompletten Oldtimer-Restauration.</p>
|
||
<div class="hero-actions">
|
||
<a href="#kontakt" class="btn btn-primary">
|
||
Kostenloses Angebot
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||
</a>
|
||
<a href="#leistungen" class="btn btn-ghost">Unsere Leistungen</a>
|
||
</div>
|
||
<div class="hero-badges">
|
||
<div class="hero-badge">
|
||
<b>5,0 <span class="stars">★★★★★</span></b>
|
||
<span>72 Google-Bewertungen</span>
|
||
</div>
|
||
<div class="hero-badge">
|
||
<b>100 %</b>
|
||
<span>Weiterempfehlung auf Facebook</span>
|
||
</div>
|
||
<div class="hero-badge">
|
||
<b>10+ Jahre</b>
|
||
<span>Erfahrung & Handwerk</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="scroll-hint"><div class="mouse"></div>Scrollen</div>
|
||
</section>
|
||
|
||
<!-- ===== Trust strip ===== -->
|
||
<div class="trust">
|
||
<div class="container">
|
||
<div class="trust-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg><b>Meisterqualität</b> in jeder Schicht</div>
|
||
<div class="trust-sep"></div>
|
||
<div class="trust-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>Alle Marken & Fabrikate</div>
|
||
<div class="trust-sep"></div>
|
||
<div class="trust-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>Faire & transparente Preise</div>
|
||
<div class="trust-sep"></div>
|
||
<div class="trust-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Farbtongenau nach Herstellervorgabe</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Leistungen ===== -->
|
||
<section class="sec" id="leistungen">
|
||
<div class="container">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">Leistungen</span>
|
||
<h2>Alles rund um den Lack – aus einer Hand</h2>
|
||
<p>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="services">
|
||
<div class="card reveal">
|
||
<div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 21h18"/><path d="M5 21V10l7-5 7 5v11"/><path d="M9 21v-6h6v6"/></svg></div>
|
||
<h3>Lackierungen aller Art</h3>
|
||
<p>Vom Kotflügel bis zur Komplettlackierung – markenunabhängig, farbtongenau und in dauerhafter Qualität.</p>
|
||
<span class="tag">Uni · Metallic · Perleffekt</span>
|
||
</div>
|
||
<div class="card reveal d1">
|
||
<div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg></div>
|
||
<h3>Smart Repair</h3>
|
||
<p>Kleine Kratzer, Steinschläge und Parkdellen punktgenau beseitigt – schnell, günstig und ohne sichtbaren Übergang.</p>
|
||
<span class="tag">Spot-Repair · Same Day</span>
|
||
</div>
|
||
<div class="card reveal d2">
|
||
<div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="17" r="2.5"/><circle cx="17" cy="17" r="2.5"/><path d="M5 17H3v-4l2-5h10l3 4h3v5h-2"/><path d="M9.5 17h5"/></svg></div>
|
||
<h3>Oldtimer & Klassiker</h3>
|
||
<p>Restaurierung mit Fingerspitzengefühl: originalgetreue Farbtöne und ein Finish, das dem Wert Ihres Fahrzeugs gerecht wird.</p>
|
||
<span class="tag">Restauration · Karosserie</span>
|
||
</div>
|
||
<div class="card reveal">
|
||
<div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v4"/><path d="M12 18v4"/><circle cx="12" cy="12" r="6"/><path d="M12 9a3 3 0 0 0 0 6"/></svg></div>
|
||
<h3>Lackaufbereitung & Politur</h3>
|
||
<p>Professionelles Polieren, Versiegeln und Aufbereiten für tiefen Glanz und langanhaltenden Schutz Ihres Lacks.</p>
|
||
<span class="tag">Politur · Versiegelung</span>
|
||
</div>
|
||
<div class="card reveal d1">
|
||
<div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19l7-7 3 3-7 7-3-3z"/><path d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z"/><path d="M2 2l7.586 7.586"/><circle cx="11" cy="11" r="2"/></svg></div>
|
||
<h3>Design- & Sonderlackierung</h3>
|
||
<p>Individuelle Farbwünsche, Sondereffekte und Akzente – wir setzen Ihre Ideen sauber und hochwertig um.</p>
|
||
<span class="tag">Custom · Effektlack</span>
|
||
</div>
|
||
<div class="card reveal d2">
|
||
<div class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2"/></svg></div>
|
||
<h3>Felgen & Motorrad</h3>
|
||
<p>Felgenaufbereitung und Motorradlackierung im gleichen hohen Standard – für den perfekten Auftritt bis ins Detail.</p>
|
||
<span class="tag">Felgen · Zweirad</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== Über uns ===== -->
|
||
<section class="sec sec-soft" id="ueber">
|
||
<div class="container">
|
||
<div class="split">
|
||
<div class="split-text">
|
||
<span class="eyebrow reveal">Über Lackwerk</span>
|
||
<h2 class="reveal d1" style="font-size:clamp(1.9rem,3.6vw,2.85rem);margin-top:16px">Handwerk, das man sieht – und das bleibt</h2>
|
||
<p class="reveal d1" style="color:var(--muted);margin-top:18px;font-size:1.06rem">
|
||
Seit der Gründung 2014 steht die Lackwerk GmbH in Kaiserslautern für kompromisslose Qualität in der Fahrzeuglackierung. In der Gienanthstraße verbinden wir modernes Equipment, hochwertige Materialien und echtes Lackierer-Handwerk zu einem Ergebnis, das überzeugt – Schicht für Schicht.
|
||
</p>
|
||
<ul class="about-list reveal d2">
|
||
<li><span class="chk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span><div><b>Farbtongenaue Ergebnisse</b> <span>– computergestützte Farbmischung nach exakter Herstellervorgabe.</span></div></li>
|
||
<li><span class="chk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span><div><b>Saubere Vorbereitung</b> <span>– die Basis für jeden perfekten Lack entsteht lange vor der Pistole.</span></div></li>
|
||
<li><span class="chk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span><div><b>Ehrliche Beratung</b> <span>– wir sagen Ihnen offen, was nötig ist und was sich lohnt.</span></div></li>
|
||
</ul>
|
||
<div class="owner reveal d2">
|
||
<img src="assets/logo-mark.jpg" alt="Lackwerk" style="width:52px;height:52px;border-radius:13px;object-fit:cover">
|
||
<div>
|
||
<div class="sig">Patric Hertz</div>
|
||
<small>Inhaber & Geschäftsführer, Lackwerk GmbH</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="split-media reveal d1">
|
||
<div class="frame"><img src="assets/detail1.jpg" alt="Farbmischung in der Lackiererei"></div>
|
||
<div class="float">
|
||
<div class="n">2014</div>
|
||
<small>Gegründet in Kaiserslautern – seither Ihr Lackspezialist der Region.</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== Prozess ===== -->
|
||
<section class="sec" id="prozess">
|
||
<div class="container">
|
||
<div class="sec-head center reveal">
|
||
<span class="eyebrow">So arbeiten wir</span>
|
||
<h2>In vier Schritten zum perfekten Ergebnis</h2>
|
||
<p>Ein klarer, transparenter Ablauf – damit Sie von der Anfrage bis zur Abholung genau wissen, woran Sie sind.</p>
|
||
</div>
|
||
<div class="steps">
|
||
<div class="step reveal"><div class="num">01</div><h4>Begutachtung</h4><p>Wir schauen uns Ihr Fahrzeug an, beraten Sie ehrlich und erstellen ein transparentes Angebot.</p></div>
|
||
<div class="step reveal d1"><div class="num">02</div><h4>Vorbereitung</h4><p>Reinigen, Schleifen, Grundieren, Abkleben – die sorgfältige Basis für ein makelloses Finish.</p></div>
|
||
<div class="step reveal d2"><div class="num">03</div><h4>Lackierung</h4><p>Farbtongenaues Lackieren in der Kabine – Basislack und Klarlack für Tiefe und Schutz.</p></div>
|
||
<div class="step reveal d3"><div class="num">04</div><h4>Finish & Übergabe</h4><p>Polieren, Kontrolle, Endabnahme – erst wenn wir zufrieden sind, sind Sie es auch.</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== Referenzen ===== -->
|
||
<section class="sec sec-soft" id="referenzen">
|
||
<div class="container">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">Referenzen</span>
|
||
<h2>Echte Arbeiten aus unserer Werkstatt</h2>
|
||
<p>Ein Blick auf eine komplette Restauration – vom entlackten Rohzustand bis zum tiefen, spiegelnden Hochglanz.</p>
|
||
</div>
|
||
<div class="gallery reveal d1">
|
||
<div class="gitem g-big" data-full="assets/work/work5.jpg">
|
||
<img src="assets/work/work5.jpg" alt="Fertig lackierter Porsche in tiefem Blau">
|
||
<span class="cap"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>Finish in tiefem Blaumetallic</span>
|
||
</div>
|
||
<div class="gitem" data-full="assets/work/work2.jpg">
|
||
<img src="assets/work/work2.jpg" alt="Fahrzeug vor der Lackierung">
|
||
<span class="cap">Ausgangszustand</span>
|
||
</div>
|
||
<div class="gitem" data-full="assets/work/work3.jpg">
|
||
<img src="assets/work/work3.jpg" alt="Zerlegte Fahrzeugfront">
|
||
<span class="cap">Demontage & Vorbereitung</span>
|
||
</div>
|
||
<div class="gitem g-wide" data-full="assets/work/work4.jpg">
|
||
<img src="assets/work/work4.jpg" alt="Frisch lackiertes Bauteil">
|
||
<span class="cap">Frisch lackiert & poliert</span>
|
||
</div>
|
||
<div class="gitem" data-full="assets/work/work1.jpg">
|
||
<img src="assets/work/work1.jpg" alt="Detail Kotflügel und Felge">
|
||
<span class="cap">Detail-Finish</span>
|
||
</div>
|
||
<div class="gitem" data-full="assets/booth1.jpg">
|
||
<img src="assets/booth1.jpg" alt="Lackierung in der Spritzkabine">
|
||
<span class="cap">In der Kabine</span>
|
||
</div>
|
||
</div>
|
||
<p class="ref-note reveal">Mehr laufende Projekte gibt es auf unserer <a href="https://www.facebook.com/derlackspezialist/" target="_blank" rel="noopener">Facebook-Seite</a>.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== Bewertungen ===== -->
|
||
<section class="sec" id="bewertungen">
|
||
<div class="container">
|
||
<div class="sec-head center reveal">
|
||
<span class="eyebrow">Bewertungen</span>
|
||
<h2>Kunden, die uns weiterempfehlen</h2>
|
||
<p>Die beste Werbung ist zufriedene Kundschaft. Unsere Bewertungen sprechen eine klare Sprache.</p>
|
||
</div>
|
||
<div class="reviews-wrap">
|
||
<div class="rating-hero reveal">
|
||
<div class="big">5,0</div>
|
||
<div class="stars">★★★★★</div>
|
||
<p>Durchschnitt aus <b style="color:#fff">72 Google-Bewertungen</b> – und 100 % Weiterempfehlung bei 15 Facebook-Bewertungen.</p>
|
||
<div style="display:flex;gap:22px;margin-top:26px;position:relative">
|
||
<div><div style="font-family:'Sora';font-size:1.6rem;font-weight:700">72</div><small style="color:rgba(220,233,250,.75);font-size:.8rem">Google-Bewertungen</small></div>
|
||
<div><div style="font-family:'Sora';font-size:1.6rem;font-weight:700">334</div><small style="color:rgba(220,233,250,.75);font-size:.8rem">Follower auf Facebook</small></div>
|
||
</div>
|
||
</div>
|
||
<div class="rev-cards">
|
||
<div class="rev-card reveal d1">
|
||
<div class="src">
|
||
<div class="name"><span class="badge" style="background:#4285F4">G</span>Google-Bewertungen</div>
|
||
<div class="stars">★★★★★</div>
|
||
</div>
|
||
<p>Über 70 Kundinnen und Kunden haben Lackwerk mit der vollen Punktzahl bewertet – für Qualität, Beratung und ein Ergebnis, das überzeugt.</p>
|
||
<div class="meta">5,0 von 5 · 72 Bewertungen auf Google</div>
|
||
</div>
|
||
<div class="rev-card reveal d2">
|
||
<div class="src">
|
||
<div class="name"><span class="badge" style="background:#1877F2">f</span>Facebook-Empfehlungen</div>
|
||
<div class="stars">★★★★★</div>
|
||
</div>
|
||
<p>Auf Facebook wird Lackwerk zu 100 % weiterempfohlen. Regelmäßig geteilte Vorher-Nachher-Ergebnisse zeigen, worauf es ankommt: sauberes Handwerk.</p>
|
||
<div class="meta">100 % empfohlen · 15 Bewertungen auf Facebook</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== Kontakt ===== -->
|
||
<section class="sec sec-soft" id="kontakt">
|
||
<div class="container">
|
||
<div class="sec-head reveal">
|
||
<span class="eyebrow">Kontakt & Anfahrt</span>
|
||
<h2>Sprechen wir über Ihr Fahrzeug</h2>
|
||
<p>Rufen Sie an, schreiben Sie uns oder kommen Sie direkt vorbei – wir beraten Sie gern und unverbindlich.</p>
|
||
</div>
|
||
<div class="contact-grid">
|
||
<div class="contact-card reveal">
|
||
<div class="contact-row">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
|
||
<div><div class="lbl">Adresse</div><div class="val">Lackwerk GmbH<span>Gienanthstr. 2–4, 67663 Kaiserslautern</span></div></div>
|
||
</div>
|
||
<div class="contact-row">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.32 1.85.55 2.81.68A2 2 0 0 1 22 16.92z"/></svg></div>
|
||
<div><div class="lbl">Telefon</div><div class="val"><a href="tel:+49631357890">0631 / 35 78 90-6</a><span>Fax: 0631 / 35 78 90-8</span></div></div>
|
||
</div>
|
||
<div class="contact-row">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/></svg></div>
|
||
<div><div class="lbl">E-Mail</div><div class="val"><a href="mailto:info@lackwerk-kl.de">info@lackwerk-kl.de</a></div></div>
|
||
</div>
|
||
<div class="contact-row" style="align-items:flex-start">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
|
||
<div style="flex:1">
|
||
<div class="lbl">Öffnungszeiten</div>
|
||
<div class="hours">
|
||
<div class="h-row"><span>Montag – Freitag</span><span>09:00 – 13:00 · 14:00 – 17:00</span></div>
|
||
<div class="h-row closed"><span>Samstag & Sonntag</span><span>Geschlossen</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-cta">
|
||
<a href="tel:+49631357890" class="btn btn-dark">Jetzt anrufen</a>
|
||
<a href="mailto:info@lackwerk-kl.de" class="btn btn-outline">E-Mail schreiben</a>
|
||
</div>
|
||
</div>
|
||
<div class="map-card reveal d1">
|
||
<iframe title="Standort Lackwerk GmbH auf Google Maps" loading="lazy" referrerpolicy="no-referrer-when-downgrade"
|
||
src="https://maps.google.com/maps?q=Lackwerk%20GmbH%2C%20Gienanthstr.%202-4%2C%2067663%20Kaiserslautern&t=m&z=15&output=embed&iwloc=near"></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== CTA band ===== -->
|
||
<section class="sec" style="padding-top:0">
|
||
<div class="container">
|
||
<div class="cta-band reveal">
|
||
<h2>Bereit für frischen Glanz?</h2>
|
||
<p>Ob kleiner Kratzer oder große Restauration – fordern Sie jetzt Ihr unverbindliches Angebot an.</p>
|
||
<div class="hero-actions">
|
||
<a href="tel:+49631357890" class="btn btn-primary">0631 / 35 78 90-6</a>
|
||
<a href="mailto:info@lackwerk-kl.de" class="btn btn-ghost">E-Mail senden</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== Footer ===== -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-top">
|
||
<div class="footer-about">
|
||
<div class="brand" style="display:flex;align-items:center;gap:12px">
|
||
<img src="assets/logo-mark.jpg" alt="Lackwerk" style="width:38px;height:38px;border-radius:11px;object-fit:cover">
|
||
<span style="font-family:'Sora';font-weight:800;font-size:1.28rem;letter-spacing:.04em;color:#fff">LACKWERK</span>
|
||
</div>
|
||
<p>Ihr Meisterbetrieb für Fahrzeuglackierung in Kaiserslautern. Lackierungen aller Art, Smart Repair, Oldtimer und Aufbereitung – seit 2014.</p>
|
||
<a class="fb" href="https://www.facebook.com/derlackspezialist/" target="_blank" rel="noopener">
|
||
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.78-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12z"/></svg>
|
||
facebook.com/derlackspezialist
|
||
</a>
|
||
</div>
|
||
<div>
|
||
<h5>Leistungen</h5>
|
||
<ul>
|
||
<li><a href="#leistungen">Lackierungen aller Art</a></li>
|
||
<li><a href="#leistungen">Smart Repair</a></li>
|
||
<li><a href="#leistungen">Oldtimerlackierung</a></li>
|
||
<li><a href="#leistungen">Lackaufbereitung</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h5>Unternehmen</h5>
|
||
<ul>
|
||
<li><a href="#ueber">Über uns</a></li>
|
||
<li><a href="#referenzen">Referenzen</a></li>
|
||
<li><a href="#bewertungen">Bewertungen</a></li>
|
||
<li><a href="#kontakt">Kontakt</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h5>Kontakt</h5>
|
||
<ul>
|
||
<li><a href="tel:+49631357890">0631 / 35 78 90-6</a></li>
|
||
<li><a href="mailto:info@lackwerk-kl.de">info@lackwerk-kl.de</a></li>
|
||
<li>Gienanthstr. 2–4</li>
|
||
<li>67663 Kaiserslautern</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<div>© <span id="year">2026</span> Lackwerk GmbH · Kaiserslautern</div>
|
||
<div class="legal-links">
|
||
<a onclick="openModal('impressum')">Impressum</a>
|
||
<a onclick="openModal('datenschutz')">Datenschutz</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ===== Impressum Modal ===== -->
|
||
<div class="modal" id="modal-impressum">
|
||
<div class="modal-back" onclick="closeModal()"></div>
|
||
<div class="modal-box">
|
||
<div class="m-head"><h3>Impressum</h3><button class="modal-close" onclick="closeModal()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button></div>
|
||
<div class="modal-body">
|
||
<h4>Angaben gemäß § 5 TMG und DL-InfoV</h4>
|
||
<p class="kv">Lackwerk GmbH<br>Gienanthstr. 2–4<br>67663 Kaiserslautern</p>
|
||
<p>Telefon: 0631 / 35 78 90-6<br>Fax: 0631 / 35 78 90-8<br>E-Mail: info@lackwerk-kl.de</p>
|
||
<h4>Vertreten durch</h4>
|
||
<p>Geschäftsführer: Patric Hertz</p>
|
||
<h4>Registereintrag</h4>
|
||
<p>Handelsregister: Amtsgericht Kaiserslautern<br>Registernummer: HRB 31677</p>
|
||
<h4>Umsatzsteuer-Identifikationsnummer</h4>
|
||
<p>Gemäß § 27a Umsatzsteuergesetz: <span class="kv">DE295225567</span></p>
|
||
<h4>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h4>
|
||
<p>Patric Hertz, Anschrift wie oben.</p>
|
||
<h4>Bildnachweise</h4>
|
||
<p>Fotos eigener Arbeiten: Lackwerk GmbH. Weitere Motive: dermonaco / Fotolia.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Datenschutz Modal ===== -->
|
||
<div class="modal" id="modal-datenschutz">
|
||
<div class="modal-back" onclick="closeModal()"></div>
|
||
<div class="modal-box">
|
||
<div class="m-head"><h3>Datenschutz</h3><button class="modal-close" onclick="closeModal()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button></div>
|
||
<div class="modal-body">
|
||
<h4>1. Haftungsbeschränkung</h4>
|
||
<p>Die Inhalte dieses Internetauftritts wurden mit größtmöglicher Sorgfalt und nach bestem Gewissen erstellt. Dennoch übernimmt der Anbieter dieser Webseite keine Gewähr für die Aktualität, Vollständigkeit und Richtigkeit der bereitgestellten Seiten und Inhalte.</p>
|
||
<p>Als Diensteanbieter ist der Anbieter dieser Webseite gemäß § 7 Abs. 1 TMG für eigene Inhalte und bereitgestellte Informationen auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich; nach den §§ 8 bis 10 TMG jedoch nicht verpflichtet, die übermittelten oder gespeicherten fremden Informationen zu überwachen.</p>
|
||
<h4>2. Externe Links</h4>
|
||
<p>Diese Webseite enthält Verlinkungen zu anderen Webseiten („externe Links"), auf deren Inhalt der Anbieter keinen Einfluss hat. Für die Inhalte und Richtigkeit der bereitgestellten Informationen ist der jeweilige Anbieter der verlinkten Webseite verantwortlich. Zum Zeitpunkt der Verlinkung waren keine Rechtsverstöße erkennbar.</p>
|
||
<h4>3. Urheberrecht / Leistungsschutzrecht</h4>
|
||
<p>Die auf dieser Webseite veröffentlichten Inhalte, Werke und bereitgestellten Informationen unterliegen dem deutschen Urheberrecht und Leistungsschutzrecht. Jede Art der Vervielfältigung, Bearbeitung, Verbreitung und Verwertung außerhalb der Grenzen des Urheberrechts bedarf der vorherigen schriftlichen Zustimmung des jeweiligen Rechteinhabers.</p>
|
||
<h4>4. Datenschutz</h4>
|
||
<p>Durch den Besuch des Internetauftritts können Informationen (Datum, Uhrzeit, aufgerufene Seite) über den Zugriff auf dem Server gespeichert werden. Es werden keine personenbezogenen Daten (z. B. Name, Anschrift oder E-Mail-Adresse) ohne Ihr Einverständnis gespeichert. Sofern personenbezogene Daten erhoben werden, erfolgt dies – soweit möglich – nur mit vorherigem Einverständnis. Eine Weitergabe der Daten an Dritte findet ohne ausdrückliche Zustimmung nicht statt.</p>
|
||
<p>Der Anbieter weist darauf hin, dass die Übertragung von Daten im Internet (z. B. per E-Mail) Sicherheitslücken aufweisen kann und ein lückenloser Schutz vor dem Zugriff Dritter nicht gewährleistet werden kann.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Lightbox ===== -->
|
||
<div class="lightbox" id="lightbox">
|
||
<button class="lb-close" onclick="closeLightbox()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
|
||
<img id="lb-img" src="" alt="Referenz in Großansicht">
|
||
</div>
|
||
|
||
<script>
|
||
// Header scroll state
|
||
const header=document.getElementById('header');
|
||
const onScroll=()=>header.classList.toggle('scrolled',window.scrollY>40);
|
||
onScroll();window.addEventListener('scroll',onScroll,{passive:true});
|
||
|
||
// Mobile nav
|
||
const burger=document.getElementById('burger'),navlinks=document.getElementById('navlinks');
|
||
burger.addEventListener('click',()=>navlinks.classList.toggle('mobile'));
|
||
navlinks.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>navlinks.classList.remove('mobile')));
|
||
|
||
// Reveal on scroll (with fast-scroll fallback so nothing stays hidden)
|
||
const revealEls=Array.from(document.querySelectorAll('.reveal'));
|
||
const io=new IntersectionObserver((entries)=>{
|
||
entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});
|
||
},{threshold:.12,rootMargin:'0px 0px -8% 0px'});
|
||
revealEls.forEach(el=>io.observe(el));
|
||
// Fallback: reveal anything already scrolled into/past view (covers fast programmatic scroll)
|
||
const revealFallback=()=>{
|
||
const vh=window.innerHeight||document.documentElement.clientHeight;
|
||
revealEls.forEach(el=>{
|
||
if(el.classList.contains('in'))return;
|
||
if(el.getBoundingClientRect().top<vh*0.92){el.classList.add('in');io.unobserve(el);}
|
||
});
|
||
};
|
||
window.addEventListener('scroll',revealFallback,{passive:true});
|
||
window.addEventListener('load',revealFallback);
|
||
revealFallback();
|
||
|
||
// Modals
|
||
function openModal(id){document.getElementById('modal-'+id).classList.add('open');document.body.style.overflow='hidden';}
|
||
function closeModal(){document.querySelectorAll('.modal').forEach(m=>m.classList.remove('open'));document.body.style.overflow='';}
|
||
|
||
// Lightbox
|
||
const lb=document.getElementById('lightbox'),lbImg=document.getElementById('lb-img');
|
||
document.querySelectorAll('.gitem').forEach(g=>g.addEventListener('click',()=>{
|
||
lbImg.src=g.dataset.full;lb.classList.add('open');document.body.style.overflow='hidden';
|
||
}));
|
||
function closeLightbox(){lb.classList.remove('open');document.body.style.overflow='';lbImg.src='';}
|
||
lb.addEventListener('click',e=>{if(e.target===lb)closeLightbox();});
|
||
|
||
// Esc closes overlays
|
||
document.addEventListener('keydown',e=>{if(e.key==='Escape'){closeModal();closeLightbox();}});
|
||
|
||
// Year
|
||
document.getElementById('year').textContent=new Date().getFullYear();
|
||
</script>
|
||
</body>
|
||
</html>
|