generated from knso/webklar-preview-template
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.
This commit is contained in:
8
.gitignore
vendored
8
.gitignore
vendored
@@ -1,8 +0,0 @@
|
|||||||
node_modules/
|
|
||||||
dist/
|
|
||||||
out/
|
|
||||||
build/
|
|
||||||
.env
|
|
||||||
.env.local
|
|
||||||
.DS_Store
|
|
||||||
*.log
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
{
|
|
||||||
"enabled": true,
|
|
||||||
"type": "static",
|
|
||||||
"branch": "main",
|
|
||||||
"displayName": "lackwerk-kl",
|
|
||||||
"templateName": "webklar-preview-template",
|
|
||||||
"projectType": "preview",
|
|
||||||
"public": false,
|
|
||||||
"template": false,
|
|
||||||
"subdomain": "lackwerk-kl"
|
|
||||||
}
|
|
||||||
BIN
Lackwerk-KL/.thumbnail
Normal file
BIN
Lackwerk-KL/.thumbnail
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
1078
Lackwerk-KL/Lackwerk Hero-print-105nrtf.dc.html
Normal file
1078
Lackwerk-KL/Lackwerk Hero-print-105nrtf.dc.html
Normal file
File diff suppressed because it is too large
Load Diff
645
Lackwerk-KL/Lackwerk Hero.dc.html
Normal file
645
Lackwerk-KL/Lackwerk Hero.dc.html
Normal file
@@ -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 & 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 & 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 & 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- & 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 & 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 & 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 & 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 & Klassiker</a>
|
||||||
|
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Felgen & 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 & 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 & 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="{"$preview":{"width":1440,"height":900},"accentColor":{"editor":"color","default":"#2FA4F0","tsType":"string","section":"Design","options":["#2FA4F0","#F0912F","#E23744","#16462C","#C9A227"]},"showReviewCard":{"editor":"boolean","default":true,"tsType":"boolean","section":"Inhalt"},"rotateWords":{"editor":"boolean","default":true,"tsType":"boolean","section":"Inhalt"}}">
|
||||||
|
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>
|
||||||
1
Lackwerk-KL/assets/benefit01.svg
Normal file
1
Lackwerk-KL/assets/benefit01.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
1
Lackwerk-KL/assets/benefit02.svg
Normal file
1
Lackwerk-KL/assets/benefit02.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
1
Lackwerk-KL/assets/benefit03.svg
Normal file
1
Lackwerk-KL/assets/benefit03.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
BIN
Lackwerk-KL/assets/bg-radkasten.jpg
Normal file
BIN
Lackwerk-KL/assets/bg-radkasten.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
Lackwerk-KL/assets/bg-vorderlicht.jpg
Normal file
BIN
Lackwerk-KL/assets/bg-vorderlicht.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
Lackwerk-KL/assets/hero-tankklappe.jpg
Normal file
BIN
Lackwerk-KL/assets/hero-tankklappe.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
Lackwerk-KL/assets/hero-tropfen.jpg
Normal file
BIN
Lackwerk-KL/assets/hero-tropfen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 900 KiB |
BIN
Lackwerk-KL/assets/hero-wassertropfen.jpg
Normal file
BIN
Lackwerk-KL/assets/hero-wassertropfen.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
1197
Lackwerk-KL/assets/image-slot.js
Normal file
1197
Lackwerk-KL/assets/image-slot.js
Normal file
File diff suppressed because it is too large
Load Diff
1
Lackwerk-KL/assets/lackbox-logo-weiss.svg
Normal file
1
Lackwerk-KL/assets/lackbox-logo-weiss.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
BIN
Lackwerk-KL/assets/leistungen-video.mp4
Normal file
BIN
Lackwerk-KL/assets/leistungen-video.mp4
Normal file
Binary file not shown.
BIN
Lackwerk-KL/assets/logo-lackwerk.png
Normal file
BIN
Lackwerk-KL/assets/logo-lackwerk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
1
Lackwerk-KL/assets/review.svg
Normal file
1
Lackwerk-KL/assets/review.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 49 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
1
Lackwerk-KL/export/assets/benefit01.svg
Normal file
1
Lackwerk-KL/export/assets/benefit01.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
1
Lackwerk-KL/export/assets/benefit02.svg
Normal file
1
Lackwerk-KL/export/assets/benefit02.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
1
Lackwerk-KL/export/assets/benefit03.svg
Normal file
1
Lackwerk-KL/export/assets/benefit03.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
BIN
Lackwerk-KL/export/assets/logo-lackwerk.png
Normal file
BIN
Lackwerk-KL/export/assets/logo-lackwerk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
1
Lackwerk-KL/export/assets/review.svg
Normal file
1
Lackwerk-KL/export/assets/review.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 1.1 KiB |
195
Lackwerk-KL/export/index.html
Normal file
195
Lackwerk-KL/export/index.html
Normal file
@@ -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 & 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>
|
||||||
1768
Lackwerk-KL/support.js
Normal file
1768
Lackwerk-KL/support.js
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
BIN
Lackwerk-KL/uploads/d76d7d5d-26e1-4e19-b61d-00ecf4be7d61.png
Normal file
BIN
Lackwerk-KL/uploads/d76d7d5d-26e1-4e19-b61d-00ecf4be7d61.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 119 KiB After Width: | Height: | Size: 119 KiB |
File diff suppressed because one or more lines are too long
60
README.md
60
README.md
@@ -1,60 +0,0 @@
|
|||||||
# webklar-preview-template
|
|
||||||
|
|
||||||
Vorlage fuer Kunden-Websites mit automatischer Preview unter `*.project.webklar.com`.
|
|
||||||
|
|
||||||
## Preview aktivieren
|
|
||||||
|
|
||||||
Dieses Repo enthaelt [`.webklar-preview.json`](.webklar-preview.json). Beim Push auf den konfigurierten Branch startet der Deploy:
|
|
||||||
|
|
||||||
- URL: `https://project.webklar.com/webhook/gitea`
|
|
||||||
- Vorschau: `https://<subdomain>.project.webklar.com`
|
|
||||||
|
|
||||||
## Konfiguration (`.webklar-preview.json`)
|
|
||||||
|
|
||||||
| Feld | Beschreibung |
|
|
||||||
|------|----------------|
|
|
||||||
| `enabled` | `true` = Preview-Deploy aktiv |
|
|
||||||
| `type` | `static` (Dateien direkt) oder `node_build` (npm build) |
|
|
||||||
| `branch` | Branch fuer Deploy, z. B. `main` |
|
|
||||||
| `displayName` | Anzeigename im Kundenportal |
|
|
||||||
| `subdomain` | Optional; Default = Repo-Name |
|
|
||||||
|
|
||||||
**Keine Passwoerter** in dieser Datei.
|
|
||||||
|
|
||||||
### Beispiel fuer statische Seite
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"enabled": true,
|
|
||||||
"type": "static",
|
|
||||||
"branch": "main",
|
|
||||||
"displayName": "Friseur Mueller",
|
|
||||||
"subdomain": "friseur-mueller"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### Beispiel fuer Vite/React (Build)
|
|
||||||
|
|
||||||
```json
|
|
||||||
{
|
|
||||||
"enabled": true,
|
|
||||||
"type": "node_build",
|
|
||||||
"branch": "main",
|
|
||||||
"displayName": "Restaurant Demo",
|
|
||||||
"subdomain": "restaurant-demo"
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
## Neues Projekt aus dieser Vorlage
|
|
||||||
|
|
||||||
1. In Gitea: **Use this template** / Repository aus Template erstellen
|
|
||||||
2. `displayName` und `subdomain` in `.webklar-preview.json` anpassen
|
|
||||||
3. Website-Inhalt ersetzen (`index.html` oder eigenes Frontend)
|
|
||||||
4. Push auf `main` <20> Webhook deployt automatisch
|
|
||||||
5. Im Admin-Portal (`project.webklar.com`) Kunde dem Projekt zuweisen
|
|
||||||
|
|
||||||
## Gitea-Webhook (einmalig pro Org/Repo)
|
|
||||||
|
|
||||||
- **URL:** `https://project.webklar.com/webhook/gitea`
|
|
||||||
- **Secret:** `GITEA_WEBHOOK_TOKEN` (Server-`.env`)
|
|
||||||
- **Events:** Push
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 828 B |
@@ -1,18 +0,0 @@
|
|||||||
[backblue.gif]
|
|
||||||
[fade.gif]
|
|
||||||
[index.html]
|
|
||||||
[www.lackwerk-kl.de/scripts/jquery.js]
|
|
||||||
[www.lackwerk-kl.de/scripts/global.js]
|
|
||||||
[www.lackwerk-kl.de/scripts/index70c6.js]
|
|
||||||
[www.lackwerk-kl.de/media/lw1_951x486.jpg]
|
|
||||||
[www.lackwerk-kl.de/media/lw2_951x141.jpg]
|
|
||||||
[www.lackwerk-kl.de/media/facebook_40x40.png]
|
|
||||||
[www.lackwerk-kl.de/media/Fotolia_55927497_M_950x630.jpg]
|
|
||||||
[www.lackwerk-kl.de/media/Fotolia_58904654_M_950x632.jpg]
|
|
||||||
[www.lackwerk-kl.de/media/Fotolia_58904662_M_1690x1124.jpg]
|
|
||||||
[www.lackwerk-kl.de/media/Fotolia_60630538_M_950x631.jpg]
|
|
||||||
[www.lackwerk-kl.de/media/Fotolia_602154532_M.jpg]
|
|
||||||
[www.lackwerk-kl.de/index.html]
|
|
||||||
[www.lackwerk-kl.de/scripts/index70c6.css]
|
|
||||||
[www.lackwerk-kl.de/scripts/global70c6.css]
|
|
||||||
[www.lackwerk-kl.de/scripts/empty]
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
date size'/'remotesize flags(request:Update,Range state:File response:Modified,Chunked,gZipped) statuscode status ('servermsg') MIME Etag|Date URL localfile (from URL)
|
|
||||||
14:02:55 34/34 ---M-- 404 error ('Not%20Found') text/plain date:Sun,%2012%20Jul%202026%2012:02:55%20GMT https://www.lackwerk-kl.de/robots.txt (from )
|
|
||||||
14:02:55 15463/15463 ---M-- 200 added ('OK') text/html etag:%220c1-uivda2-9jttbh1-0bp1fk%22 https://www.lackwerk-kl.de/ A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/index.html (from )
|
|
||||||
14:02:55 2255/2255 ---M-- 200 added ('OK') text/css etag:%220c1-pemgp2-djttbh1-o53ubo%22 https://www.lackwerk-kl.de/scripts/index.css?buildID=220701151239 A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/scripts/index70c6.css (from https://www.lackwerk-kl.de/)
|
|
||||||
14:02:56 456/456 ---M-- 200 added ('OK') text/css etag:%220c1-nemgp2-djttbh1-oqg22l%22 https://www.lackwerk-kl.de/scripts/global.css?buildID=220701151239 A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/scripts/global70c6.css (from https://www.lackwerk-kl.de/)
|
|
||||||
14:02:56 121811/121811 ---M-- 200 added ('OK') application/javascript etag:%220c1-remgp2-ejttbh1-8petpc%22 https://www.lackwerk-kl.de/scripts/jquery.js A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/scripts/jquery.js (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:00 24626/24626 ---M-- 200 added ('OK') application/javascript etag:%220c1-oemgp2-djttbh1-0tu9il%22 https://www.lackwerk-kl.de/scripts/global.js A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/scripts/global.js (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:00 2197/2197 ---M-- 200 added ('OK') application/javascript etag:%220c1-qemgp2-djttbh1-gvo1uo%22 https://www.lackwerk-kl.de/scripts/index.js?buildID=220701151239 A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/scripts/index70c6.js (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:00 121858/121858 ---M-- 200 added ('OK') image/jpg etag:%220c1-4j0052-djttbh1-0old26%22 https://www.lackwerk-kl.de/media/lw1_951x486.jpg A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/media/lw1_951x486.jpg (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:01 34571/34571 ---M-- 200 added ('OK') image/jpg etag:%220c1-5j0052-djttbh1-84utra%22 https://www.lackwerk-kl.de/media/lw2_951x141.jpg A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/media/lw2_951x141.jpg (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:01 2993/2993 ---M-- 200 added ('OK') image/png etag:%220c1-4o0ku2-9jttbh1-g1fmdj%22 https://www.lackwerk-kl.de/media/facebook_40x40.png A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/media/facebook_40x40.png (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:01 84535/84535 ---M-- 200 added ('OK') image/jpg etag:%220c1-5o0ku2-ajttbh1-oour63%22 https://www.lackwerk-kl.de/media/Fotolia_55927497_M_950x630.jpg A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/media/Fotolia_55927497_M_950x630.jpg (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:02 97601/97601 ---M-- 200 added ('OK') image/jpg etag:%220c1-6o0ku2-ajttbh1-0oev2n%22 https://www.lackwerk-kl.de/media/Fotolia_58904654_M_950x632.jpg A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/media/Fotolia_58904654_M_950x632.jpg (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:02 194218/194218 ---M-- 200 added ('OK') image/jpg etag:%220c1-7o0ku2-bjttbh1-o7jui9%22 https://www.lackwerk-kl.de/media/Fotolia_58904662_M_1690x1124.jpg A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/media/Fotolia_58904662_M_1690x1124.jpg (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:03 136638/136638 ---M-- 200 added ('OK') image/jpg etag:%220c1-9o0ku2-cjttbh1-g440rj%22 https://www.lackwerk-kl.de/media/Fotolia_60630538_M_950x631.jpg A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/media/Fotolia_60630538_M_950x631.jpg (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:03 177959/177959 ---M-- 200 added ('OK') image/jpg etag:%220c1-8o0ku2-cjttbh1-83q71a%22 https://www.lackwerk-kl.de/media/Fotolia_602154532_M.jpg A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/media/Fotolia_602154532_M.jpg (from https://www.lackwerk-kl.de/)
|
|
||||||
14:03:03 34/34 ---M-- 404 error ('Not%20Found') text/plain date:Sun,%2012%20Jul%202026%2012:03:03%20GMT https://www.lackwerk-kl.de/scripts/empty A:/developer/GitHub-desktop/lackwerk-kl/alt%20webseite/alte%20webseite/www.lackwerk-kl.de/scripts/empty.d.delayed (from https://www.lackwerk-kl.de/scripts/global.css?buildID=220701151239)
|
|
||||||
Binary file not shown.
@@ -1,12 +0,0 @@
|
|||||||
What's in this folder?
|
|
||||||
|
|
||||||
This folder (hts-cache) has been generated by WinHTTrack 3.49-2+htsswf+htsjava
|
|
||||||
and is used for updating this website.
|
|
||||||
(The HTML website structure is stored here to allow fast updates)
|
|
||||||
|
|
||||||
DO NOT delete this folder unless you do not want to update the mirror in the future!!
|
|
||||||
(you can safely delete old.zip and old.lst files, however)
|
|
||||||
|
|
||||||
note: the hts-log.txt file, and hts-cache folder, may contain sensitive information,
|
|
||||||
such as username/password authentication for websites mirrored in this project
|
|
||||||
do not share these files/folders if you want these information to remain private
|
|
||||||
@@ -1,78 +0,0 @@
|
|||||||
Near=0
|
|
||||||
Test=0
|
|
||||||
ParseAll=1
|
|
||||||
HTMLFirst=0
|
|
||||||
Cache=1
|
|
||||||
NoRecatch=0
|
|
||||||
Dos=0
|
|
||||||
Index=1
|
|
||||||
WordIndex=0
|
|
||||||
MailIndex=0
|
|
||||||
Log=1
|
|
||||||
RemoveTimeout=0
|
|
||||||
RemoveRateout=0
|
|
||||||
KeepAlive=1
|
|
||||||
FollowRobotsTxt=2
|
|
||||||
NoErrorPages=0
|
|
||||||
NoExternalPages=0
|
|
||||||
NoPwdInPages=0
|
|
||||||
NoQueryStrings=0
|
|
||||||
NoPurgeOldFiles=0
|
|
||||||
Cookies=1
|
|
||||||
CheckType=1
|
|
||||||
ParseJava=1
|
|
||||||
HTTP10=0
|
|
||||||
TolerantRequests=0
|
|
||||||
UpdateHack=1
|
|
||||||
URLHack=1
|
|
||||||
StoreAllInCache=0
|
|
||||||
LogType=0
|
|
||||||
UseHTTPProxyForFTP=1
|
|
||||||
Build=0
|
|
||||||
PrimaryScan=3
|
|
||||||
Travel=1
|
|
||||||
GlobalTravel=0
|
|
||||||
RewriteLinks=0
|
|
||||||
BuildString=%%h%%p/%%n%%q.%%t
|
|
||||||
Category=
|
|
||||||
MaxHtml=
|
|
||||||
MaxOther=
|
|
||||||
MaxAll=
|
|
||||||
MaxWait=
|
|
||||||
Sockets=
|
|
||||||
Retry=
|
|
||||||
MaxTime=
|
|
||||||
TimeOut=
|
|
||||||
RateOut=
|
|
||||||
UserID=Mozilla/4.5 (compatible; HTTrack 3.0x; Windows 98)
|
|
||||||
Footer=<!-- Mirrored from %%s%%s by HTTrack Website Copier/3.x [XR&CO'2014], %%s -->
|
|
||||||
AcceptLanguage=de, en, *
|
|
||||||
OtherHeaders=
|
|
||||||
DefaultReferer=
|
|
||||||
MaxRate=25000
|
|
||||||
WildCardFilters=+*.png +*.gif +*.jpg +*.jpeg +*.css +*.js -ad.doubleclick.net/* -mime:application/foobar
|
|
||||||
Proxy=
|
|
||||||
Port=
|
|
||||||
Depth=
|
|
||||||
ExtDepth=
|
|
||||||
MaxConn=
|
|
||||||
MaxLinks=
|
|
||||||
MIMEDefsExt1=
|
|
||||||
MIMEDefsExt2=
|
|
||||||
MIMEDefsExt3=
|
|
||||||
MIMEDefsExt4=
|
|
||||||
MIMEDefsExt5=
|
|
||||||
MIMEDefsExt6=
|
|
||||||
MIMEDefsExt7=
|
|
||||||
MIMEDefsExt8=
|
|
||||||
MIMEDefsMime1=
|
|
||||||
MIMEDefsMime2=
|
|
||||||
MIMEDefsMime3=
|
|
||||||
MIMEDefsMime4=
|
|
||||||
MIMEDefsMime5=
|
|
||||||
MIMEDefsMime6=
|
|
||||||
MIMEDefsMime7=
|
|
||||||
MIMEDefsMime8=
|
|
||||||
CurrentUrl=https://www.lackwerk-kl.de/%0d%0a
|
|
||||||
CurrentAction=0
|
|
||||||
CurrentURLList=
|
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
HTTrack3.49-2+htsswf+htsjava launched on Sun, 12 Jul 2026 14:02:54 at https://www.lackwerk-kl.de/ +*.png +*.gif +*.jpg +*.jpeg +*.css +*.js -ad.doubleclick.net/* -mime:application/foobar
|
|
||||||
|
|
||||||
(winhttrack -qwC2%Ps2u1%s%uN0%I0p3DaK0H0%kf2A25000%f#f -F "Mozilla/4.5 (compatible; HTTrack 3.0x; Windows 98)" -%F "<!-- Mirrored from %s%s by HTTrack Website Copier/3.x [XR&CO'2014], %s -->" -%l "de, en, *" https://www.lackwerk-kl.de/ -O1 "A:\developer\GitHub-desktop\lackwerk-kl\alt webseite\alte webseite" +*.png +*.gif +*.jpg +*.jpeg +*.css +*.js -ad.doubleclick.net/* -mime:application/foobar )
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Information, Warnings and Errors reported for this mirror:
|
|
||||||
|
|
||||||
note: the hts-log.txt file, and hts-cache folder, may contain sensitive information,
|
|
||||||
|
|
||||||
such as username/password authentication for websites mirrored in this project
|
|
||||||
|
|
||||||
@@ -1,144 +0,0 @@
|
|||||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta name="description" content="HTTrack is an easy-to-use website mirror utility. It allows you to download a World Wide website from the Internet to a local directory,building recursively all structures, getting html, images, and other files from the server to your computer. Links are rebuiltrelatively so that you can freely browse to the local site (works with any browser). You can mirror several sites together so that you can jump from one toanother. You can, also, update an existing mirror site, or resume an interrupted download. The robot is fully configurable, with an integrated help" />
|
|
||||||
<meta name="keywords" content="httrack, HTTRACK, HTTrack, winhttrack, WINHTTRACK, WinHTTrack, offline browser, web mirror utility, aspirateur web, surf offline, web capture, www mirror utility, browse offline, local site builder, website mirroring, aspirateur www, internet grabber, capture de site web, internet tool, hors connexion, unix, dos, windows 95, windows 98, solaris, ibm580, AIX 4.0, HTS, HTGet, web aspirator, web aspirateur, libre, GPL, GNU, free software" />
|
|
||||||
<title>Local index - HTTrack Website Copier</title>
|
|
||||||
<!-- Mirror and index made by HTTrack Website Copier/3.49-2 [XR&CO'2014] -->
|
|
||||||
<style type="text/css">
|
|
||||||
<!--
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0; padding: 0; margin-bottom: 15px; margin-top: 8px;
|
|
||||||
background: #77b;
|
|
||||||
}
|
|
||||||
body, td {
|
|
||||||
font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#subTitle {
|
|
||||||
background: #000; color: #fff; padding: 4px; font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#siteNavigation a, #siteNavigation .current {
|
|
||||||
font-weight: bold; color: #448;
|
|
||||||
}
|
|
||||||
#siteNavigation a:link { text-decoration: none; }
|
|
||||||
#siteNavigation a:visited { text-decoration: none; }
|
|
||||||
|
|
||||||
#siteNavigation .current { background-color: #ccd; }
|
|
||||||
|
|
||||||
#siteNavigation a:hover { text-decoration: none; background-color: #fff; color: #000; }
|
|
||||||
#siteNavigation a:active { text-decoration: none; background-color: #ccc; }
|
|
||||||
|
|
||||||
|
|
||||||
a:link { text-decoration: underline; color: #00f; }
|
|
||||||
a:visited { text-decoration: underline; color: #000; }
|
|
||||||
a:hover { text-decoration: underline; color: #c00; }
|
|
||||||
a:active { text-decoration: underline; }
|
|
||||||
|
|
||||||
#pageContent {
|
|
||||||
clear: both;
|
|
||||||
border-bottom: 6px solid #000;
|
|
||||||
padding: 10px; padding-top: 20px;
|
|
||||||
line-height: 1.65em;
|
|
||||||
background-image: url(backblue.gif);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: top right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pageContent, #siteNavigation {
|
|
||||||
background-color: #ccd;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.imgLeft { float: left; margin-right: 10px; margin-bottom: 10px; }
|
|
||||||
.imgRight { float: right; margin-left: 10px; margin-bottom: 10px; }
|
|
||||||
|
|
||||||
hr { height: 1px; color: #000; background-color: #000; margin-bottom: 15px; }
|
|
||||||
|
|
||||||
h1 { margin: 0; font-weight: bold; font-size: 2em; }
|
|
||||||
h2 { margin: 0; font-weight: bold; font-size: 1.6em; }
|
|
||||||
h3 { margin: 0; font-weight: bold; font-size: 1.3em; }
|
|
||||||
h4 { margin: 0; font-weight: bold; font-size: 1.18em; }
|
|
||||||
|
|
||||||
.blak { background-color: #000; }
|
|
||||||
.hide { display: none; }
|
|
||||||
.tableWidth { min-width: 400px; }
|
|
||||||
|
|
||||||
.tblRegular { border-collapse: collapse; }
|
|
||||||
.tblRegular td { padding: 6px; background-image: url(fade.gif); border: 2px solid #99c; }
|
|
||||||
.tblHeaderColor, .tblHeaderColor td { background: #99c; }
|
|
||||||
.tblNoBorder td { border: 0; }
|
|
||||||
|
|
||||||
|
|
||||||
// -->
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<table width="76%" border="0" align="center" cellspacing="0" cellpadding="3" class="tableWidth">
|
|
||||||
<tr>
|
|
||||||
<td id="subTitle">HTTrack Website Copier - Open Source offline browser</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<table width="76%" border="0" align="center" cellspacing="0" cellpadding="0" class="tableWidth">
|
|
||||||
<tr class="blak">
|
|
||||||
<td>
|
|
||||||
<table width="100%" border="0" align="center" cellspacing="1" cellpadding="0">
|
|
||||||
<tr>
|
|
||||||
<td colspan="6">
|
|
||||||
<table width="100%" border="0" align="center" cellspacing="0" cellpadding="10">
|
|
||||||
<tr>
|
|
||||||
<td id="pageContent">
|
|
||||||
<!-- ==================== End prologue ==================== -->
|
|
||||||
|
|
||||||
<meta name="generator" content="HTTrack Website Copier/3.x">
|
|
||||||
<TITLE>Local index - HTTrack</TITLE>
|
|
||||||
</HEAD>
|
|
||||||
<BODY>
|
|
||||||
<H1 ALIGN=Center>Index of locally available sites:</H1>
|
|
||||||
<TABLE BORDER="0" WIDTH="100%" CELLSPACING="1" CELLPADDING="0">
|
|
||||||
<TR>
|
|
||||||
<TD BACKGROUND="fade.gif">
|
|
||||||
·
|
|
||||||
<A HREF="www.lackwerk-kl.de/index.html">
|
|
||||||
der Lackierer in Kaiserslautern
|
|
||||||
</A>
|
|
||||||
</TD>
|
|
||||||
</TR>
|
|
||||||
</TABLE>
|
|
||||||
<BR>
|
|
||||||
<BR>
|
|
||||||
<BR>
|
|
||||||
<H6 ALIGN="RIGHT">
|
|
||||||
<I>Mirror and index made by HTTrack Website Copier [XR&CO'2008]</I>
|
|
||||||
</H6>
|
|
||||||
<!-- Mirror and index made by HTTrack Website Copier/3.49-2 [XR&CO'2014] -->
|
|
||||||
<!-- Thanks for using HTTrack Website Copier! -->
|
|
||||||
<meta HTTP-EQUIV="Refresh" CONTENT="0; URL=www.lackwerk-kl.de/index.html">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ==================== Start epilogue ==================== -->
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<table width="76%" border="0" align="center" valign="bottom" cellspacing="0" cellpadding="0">
|
|
||||||
<tr>
|
|
||||||
<td id="footer"><small>© 2008 Xavier Roche & other contributors - Web Design: Leto Kauler.</small></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
||||||
@@ -1,149 +0,0 @@
|
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
||||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
||||||
|
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Mirrored from www.lackwerk-kl.de/ by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 12 Jul 2026 12:02:55 GMT -->
|
|
||||||
<head>
|
|
||||||
|
|
||||||
<title>der Lackierer in Kaiserslautern</title>
|
|
||||||
|
|
||||||
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
|
|
||||||
<meta name="generator" content="Xpage Internet Studio 7 (c) 2003-2013 XDEV Software Corp." />
|
|
||||||
<meta name="keywords" content="lackwerk, lackierer, lack, Lackierungen, Smart Repair,<br>Oldtimerrestauration, Lackaufbereitung" />
|
|
||||||
<meta http-equiv="content-language" content="de" />
|
|
||||||
<meta name="date" content="2014-6-13T10:17+00:00" />
|
|
||||||
<meta name="robots" content="all" />
|
|
||||||
<meta http-equiv="pragma" content="no-cache" />
|
|
||||||
<meta http-equiv="imagetoolbar" content="no" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="scripts/index70c6.css?buildID=220701151239" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="scripts/global70c6.css?buildID=220701151239" />
|
|
||||||
<!--[if gte IE 9]><style type="text/css">._xgr{filter:none;}</style><![endif]-->
|
|
||||||
<script type="text/javascript" src="scripts/jquery.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/global.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/index70c6.js?buildID=220701151239"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
$(document).ready(function() {
|
|
||||||
registerButtonHandler();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body style="background-color:rgb(255,255,255);">
|
|
||||||
|
|
||||||
<div id="X0_0" class="xdiv S0" style="position:relative; width:950px; height:900px; z-index:0;">
|
|
||||||
<div id="X5_e" class="xdiv" style="left:-2px; top:-126px; width:951px; height:486px; z-index:0;">
|
|
||||||
<div class="imglayer" style="z-index:0"><img id="X5_e_imglayer" src="media/lw1_951x486.jpg" class="imglayer" alt="lw1" /></div>
|
|
||||||
</div>
|
|
||||||
<div id="X5_f" class="xdiv" style="left:-2px; top:840px; width:951px; height:141px; z-index:1;">
|
|
||||||
<div class="imglayer" style="z-index:0"><img id="X5_f_imglayer" src="media/lw2_951x141.jpg" class="imglayer" alt="lw2" /></div>
|
|
||||||
</div>
|
|
||||||
<a href="http://facebook.com/derlackspezialist" target="_blank">
|
|
||||||
<div id="X5_5" class="xdiv" style="left:898px; top:851px; width:40px; height:40px; z-index:2;">
|
|
||||||
<div class="imglayer" style="z-index:0"><img id="X5_5_imglayer" src="media/facebook_40x40.png" class="imglayer" alt="facebook" /></div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<div id="X3_0" class="xdiv" style="left:7px; top:848px; width:137px; height:45px; z-index:3;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:137px; height:42px; z-index:0; "><div align="left"><strong class="S1">Lackwerk GmbH<br>Gienanthstr. 2-4<br>67663 Kaiserslautern</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X3_1" class="xdiv" style="left:150px; top:848px; width:137px; height:45px; z-index:4;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:137px; height:42px; z-index:0; "><div align="right"><strong class="S1"><br>Tel: 0631 / 35 78 90-6<br>Fax: 0631 / 35 78 90-8</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X3_2" class="xdiv" style="left:305px; top:848px; width:206px; height:45px; z-index:5;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:206px; height:42px; z-index:0; "><div align="left"><strong class="S1"><br>web: http://www.lackwerk-kl.de<br>mail: info@lackwerk-kl.de</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X3_3" class="xdiv" style="left:784px; top:848px; width:110px; height:45px; z-index:6;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:110px; height:42px; z-index:0; "><div align="right"><strong class="S1"><br> finden Sie uns bei<br>Facebook</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X3_4" class="xdiv" style="left:516px; top:848px; width:77px; height:45px; z-index:7;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:77px; height:42px; z-index:0; "><div align="left"><strong class="S1"><br>Inhaber:<br>Patric Hertz</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X4_0" class="xdiv" style="overflow:visible; left:-5px; top:358px; width:956px; height:484px; z-index:8;">
|
|
||||||
<div id="Xe_0" class="xdiv S2" style="width:100%; height:100%;">
|
|
||||||
<div id="X5_d" class="xdiv" style="left:5px; top:-85px; width:950px; height:630px; z-index:0;">
|
|
||||||
<div class="imglayer" style="z-index:0"><img id="X5_d_imglayer" src="media/Fotolia_55927497_M_950x630.jpg" class="imglayer" alt="Fotolia_55927497_M" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="Xe_1" class="xdiv S2" style="width:100%; height:100%; display:none;">
|
|
||||||
<div id="X5_c" class="xdiv" style="left:5px; top:-1px; width:950px; height:632px; z-index:0;">
|
|
||||||
<div class="imglayer" style="z-index:0"><img id="X5_c_imglayer" src="media/Fotolia_58904654_M_950x632.jpg" class="imglayer" alt="Fotolia_58904654_M" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="Xe_2" class="xdiv S2" style="width:100%; height:100%; display:none;">
|
|
||||||
<div id="X5_9" class="xdiv" style="left:-376px; top:-144px; width:1690px; height:1124px; z-index:0;">
|
|
||||||
<div class="imglayer" style="z-index:0"><img id="X5_9_imglayer" src="media/Fotolia_58904662_M_1690x1124.jpg" class="imglayer" alt="Fotolia_58904662_M" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="Xe_3" class="xdiv S2" style="width:100%; height:100%; display:none;">
|
|
||||||
<div id="X5_a" class="xdiv" style="left:5px; top:-1px; width:950px; height:631px; z-index:0;">
|
|
||||||
<div class="imglayer" style="z-index:0"><img id="X5_a_imglayer" src="media/Fotolia_60630538_M_950x631.jpg" class="imglayer" alt="Fotolia_60630538_M" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="Xe_4" class="xdiv S2" style="width:100%; height:100%; display:none;">
|
|
||||||
<div id="X5_b" class="xdiv" style="left:-465px; top:-270px; width:1850px; height:1230px; z-index:0;">
|
|
||||||
<div class="imglayer" style="z-index:0"><img id="X5_b_imglayer" src="media/Fotolia_602154532_M.jpg" class="imglayer" alt="Fotolia_602154532_M" /></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script type="text/javascript">startSlideShow("X4_0");</script>
|
|
||||||
<div id="X1_0" class="xdiv" style="left:-2px; top:369px; width:951px; height:46px; z-index:9;">
|
|
||||||
<div style="width:100%; height:100%; z-index:0; background-color:rgb(255,255,255); filter:alpha(opacity=59); opacity:0.59"></div>
|
|
||||||
<div id="X3_5" class="xdiv" style="left:-3px; top:9px; width:954px; height:30px; z-index:1;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:954px; height:26px; z-index:0; "><div align="center"><h1 class="S3">Lackierungen aller Art - Smart Repair - Oldtimerlackierung - Lackaufbereitung</h1></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="X3_6" onclick="startAction('X3_6_2')" class="xdiv S4" style="left:607px; top:876px; width:72px; height:19px; z-index:10;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:72px; height:14px; z-index:0; "><div align="left"><strong class="S1">Impressum</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X1_2" onclick="startAction('X1_2_2')" class="xdiv S4" style="display:none; left:10px; top:9px; width:930px; height:826px; z-index:11;">
|
|
||||||
<div style="width:100%; height:100%; z-index:0; background-color:rgb(255,255,255); filter:alpha(opacity=71); opacity:0.71"></div>
|
|
||||||
<div id="X3_7" class="xdiv" style="left:8px; top:6px; width:903px; height:812px; z-index:1;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:903px; height:357px; z-index:0; "><div align="left"><h4 class="S5">Impressum:<br>Angaben gemäß § 5 TMG und DL-InfoV:<br>Lackwerk GmbH<br>Gienanthstr. 2-4<br>67663 Kaiserslautern<br> <br>Telefon: 0631 / 35 78 90-6<br> <br></h4><h4 class="S6">Handelsregister-Nummer Kaiserslautern :­ 31677</h4><h4 class="S5"><br>Umsatzsteuer-Identifikationsnummer<br>gemäß §27 a Umsatzsteuergesetz: </h4><h4 class="S6">DE295225567</h4><h4 class="S5"><br>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:<br>Patric Hertz<br> <br>Gestaltung & Hosting:<br>ecker licht + werbung<br>merkurstraße 45, 67663 kaiserslautern<br></h4><a href="http://www.ecker-lichtwerbung.de/" target="_blank"><h4 class="S7">www.ecker-lichtwerbung.de</h4></a><h4 class="S5"><br>Bilder: dermonaco / Fotolia</h4></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="X3_9" onclick="startAction('X3_9_2')" class="xdiv S4" style="left:607px; top:862px; width:72px; height:19px; z-index:12;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:72px; height:14px; z-index:0; "><div align="left"><strong class="S1">Anfahrt</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X1_3" onmousedown="startAction('X1_3_4')" class="xdiv S4" style="display:none; left:17px; top:15px; width:917px; height:815px; z-index:13;">
|
|
||||||
<div style="width:100%; height:100%; z-index:0; background-color:rgb(255,255,255); filter:alpha(opacity=71); opacity:0.71"></div>
|
|
||||||
<div id="X3_a" onclick="startAction('X3_a_2')" class="xdiv S4" style="left:855px; top:791px; width:55px; height:20px; z-index:1;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:55px; height:15px; z-index:0; "><div align="right"><h6 class="S8">zurück</h6></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="Xp_0" class="xdiv" style="left:13px; top:12px; width:893px; height:777px; z-index:2;">
|
|
||||||
<iframe style="width:100%; height:100%; margin:0; border:0" frameborder="0" scrolling="no" src="http://maps.google.com/maps?f=q&source=s_d&aq=0&ie=UTF8&t=k&z=16&iwloc=A&output=embed&q=lackwerk%2C+gienanthstrasse+2-4%2C+67663+kaiserslautern(Lackwerk+GmbH)"></iframe>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="X3_b" onclick="startAction('X3_b_2')" class="xdiv S4" style="left:693px; top:862px; width:75px; height:19px; z-index:14;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:75px; height:14px; z-index:0; "><div align="left"><strong class="S1">Datenschutz</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X1_4" onclick="startAction('X1_4_2')" class="xdiv S4" style="display:none; left:10px; top:9px; width:930px; height:826px; z-index:15;">
|
|
||||||
<div style="width:100%; height:100%; z-index:0; background-color:rgb(255,255,255); filter:alpha(opacity=71); opacity:0.71"></div>
|
|
||||||
<div id="X3_c" class="xdiv" style="left:8px; top:6px; width:903px; height:813px; z-index:1;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:903px; height:720px; z-index:0; "><div align="left"><h4 class="S9">1. Haftungsbeschränkung<br> <br></h4><h4 class="S10">Die Inhalte des 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.</h4><h4 class="S9"><br></h4><h4 class="S10">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. Eine Entfernung oder Sperrung dieser Inhalte erfolgt umgehend ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung. Eine Haftung ist erst ab dem Zeitpunkt der Kenntniserlangung möglich.<br> <br></h4><h4 class="S9">2. Externe Links<br> <br></h4><h4 class="S10">Die Webseite enthält sog. &dbquo;externe Links (Verlinkungen) zu anderen Webseiten, auf deren Inhalt der Anbieter der Webseite keinen Einfluss hat. Aus diesem Grund kann der Anbieter für diese Inhalte auch keine Gewähr übernehmen.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. Bei Bekanntwerden einer solchen Rechtsverletzung wird der Link umgehend entfernen.<br> <br></h4><h4 class="S9">3. Urheberrecht/Leistungsschutzrecht<br> <br></h4><h4 class="S10">Die auf dieser Webseite veröffentlichten Inhalte, Werke und bereitgestellten Informationen unterliegen dem deutschen Urheberrecht und Leistungsschutzrecht. Jede Art der Vervielfältigung, Bearbeitung, Verbreitung, Einspeicherung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedarf der vorherigen schriftlichen Zustimmung des jeweiligen Rechteinhabers. Das unerlaubte Kopieren/Speichern der bereitgestellten Informationen auf diesen Webseiten ist nicht gestattet und strafbar.<br> <br></h4><h4 class="S9">4. Datenschutz<br> <br></h4><h4 class="S10">Durch den Besuch des Internetauftritts können Informationen (Datum, Uhrzeit, aufgerufene Seite) über den Zugriff auf dem Server gespeichert werden. Es werden keine personenbezogenenen (z. B. Name, Anschrift oder E-Mail-Adresse) Daten, gespeichert.<br>Sofern personenbezogene Daten erhoben werden, erfolgt dies, sofern möglich, nur mit dem vorherigen Einverständnis des Nutzers der Webseite. Eine Weitergabe der Daten an Dritte findet ohne ausdrückliche Zustimmung des Nutzers nicht statt.<br>Der Anbieter weist darauf hin, dass die Übertragung von Daten im Internet (z. B. per E-Mail) Sicherheitslücken aufweisen und ein lückenloser Schutz der Daten vor dem Zugriff Dritter nicht gewährleistet werden kann. Der Anbieter übernimmt keine Haftung für die durch solche Sicherheitslücken entstandenen Schäden.<br>Der Verwendung der Kontaktdaten durch Dritte zur gewerblichen Nutzung wird ausdrücklich widersprochen. Es sei denn, der Anbieter hat zuvor seine schriftliche Einwilligung erteilt.Der Anbieter behält sich rechtliche Schritte für den Fall der unverlangten Zusendung von Werbeinformationen, z. B. durch Spam-Mails, vor.<br> <br> <br></h4><h4 class="S11">Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.</h4></div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="X1_5" class="xdiv S12" style="left:4px; top:134px; width:951px; height:55px; z-index:16;">
|
|
||||||
<div id="X7_0" onclick="startAction('X7_0_2')" class="xdiv S4" style="overflow:visible; left:792px; top:9px; width:153px; height:39px; z-index:0;">
|
|
||||||
<div id="Xf_0" class="xdiv S13" style="width:100%; height:100%; z-index:0;">
|
|
||||||
<div style="position:absolute; left:2px; top:11px; width:149px; height:14px; z-index:0; "><div align="center"><strong class="S1">OK</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div class="buttoncontrol"> </div>
|
|
||||||
</div>
|
|
||||||
<div id="X3_d" class="xdiv S15" style="left:16px; top:11px; width:596px; height:37px; z-index:1;">
|
|
||||||
<div style="position:absolute; left:0px; top:0px; width:596px; height:28px; z-index:0; "><div align="left"><strong class="S14">Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div id="X7_1" onclick="startAction('X7_1_2')" class="xdiv S4" style="overflow:visible; left:625px; top:9px; width:153px; height:39px; z-index:2;">
|
|
||||||
<div id="Xf_1" class="xdiv S16" style="width:100%; height:100%; z-index:0;">
|
|
||||||
<div style="position:absolute; left:2px; top:11px; width:149px; height:14px; z-index:0; "><div align="center"><strong class="S14">Datenschutzerklärung</strong></div></div>
|
|
||||||
</div>
|
|
||||||
<div class="buttoncontrol"> </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Mirrored from www.lackwerk-kl.de/ by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 12 Jul 2026 12:03:03 GMT -->
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
@@ -1 +0,0 @@
|
|||||||
The requested file does not exist.
|
|
||||||
@@ -1,866 +0,0 @@
|
|||||||
/*
|
|
||||||
* Xpage Internet Studio 7
|
|
||||||
* Copyright (c) 2004 - 2012, XDEV Software and/or its affiliates. All rights reserved.
|
|
||||||
*/
|
|
||||||
var overlayOpen = [];
|
|
||||||
|
|
||||||
function preloadImages() {
|
|
||||||
if (document.images) {
|
|
||||||
for ( var i = 0; i < preloadImages.arguments.length; i++) {
|
|
||||||
new Image().src = preloadImages.arguments[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function registerButtonHandler() {
|
|
||||||
$(".buttoncontrol").each(function() {
|
|
||||||
var buttonID = this.parentNode.id;
|
|
||||||
var buttonData = layerbuttons[buttonID];
|
|
||||||
for ( var i = 0; i < 4; i++) {
|
|
||||||
if (buttonData.layer[i] != null) {
|
|
||||||
var layer = $("#" + buttonData.layer[i]);
|
|
||||||
buttonData.layer[i] = layer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
buttonShowLayer(buttonID, showButtonSelected(buttonData) ? [ 2, 0 ] : [ 0 ]);
|
|
||||||
$(this).mouseenter(function(event) {
|
|
||||||
if (buttonData.group == null)
|
|
||||||
buttonSetOverlayVisible(buttonData, true);
|
|
||||||
buttonShowLayer(buttonID, showButtonSelected(buttonData) ? [ 3, 2, 0 ] : [ 1, 0 ]);
|
|
||||||
});
|
|
||||||
$(this).mouseout(function(event) {
|
|
||||||
if (buttonData.group == null)
|
|
||||||
buttonSetOverlayVisible(buttonData, false);
|
|
||||||
buttonShowLayer(buttonID, showButtonSelected(buttonData) ? [ 2, 0 ] : [ 0 ]);
|
|
||||||
});
|
|
||||||
$(this).mousedown(function(event) {
|
|
||||||
if (buttonData.group != null && !buttonData.isMenuButton) {
|
|
||||||
for ( var bid in layerbuttons) {
|
|
||||||
if (layerbuttons[bid].group == buttonData.group && bid != buttonID) {
|
|
||||||
layerbuttons[bid].isSelected = false;
|
|
||||||
buttonShowLayer(bid, showButtonSelected(layerbuttons[bid]) ? [ 2, 0 ] : [ 0 ]);
|
|
||||||
buttonSetOverlayVisible(layerbuttons[bid], false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
buttonData.isSelected = true;
|
|
||||||
buttonShowLayer(buttonID, [ 3, 2, 0 ]);
|
|
||||||
buttonSetOverlayVisible(buttonData, true);
|
|
||||||
} else {
|
|
||||||
buttonShowLayer(buttonID, [ 2, 1, 0 ]);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$(this).mouseup(function(event) {
|
|
||||||
if (buttonData.group == null)
|
|
||||||
buttonShowLayer(buttonID, showButtonSelected(buttonData) ? [ 3, 2, 1, 0 ] : [ 1, 0 ]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function showButtonSelected(buttonData) {
|
|
||||||
return buttonData.isSelected || (buttonData.pageLink && document.currentPage == buttonData.pageLink);
|
|
||||||
}
|
|
||||||
|
|
||||||
function buttonShowLayer(buttonID, layerIdx) {
|
|
||||||
var buttonData = layerbuttons[buttonID];
|
|
||||||
var currentLayer = 0;
|
|
||||||
if (buttonData.currentLayer)
|
|
||||||
currentLayer = buttonData.currentLayer;
|
|
||||||
var nextLayer = 0;
|
|
||||||
for ( var i = 0; i < layerIdx.length; i++) {
|
|
||||||
var index = layerIdx[i];
|
|
||||||
if (buttonData.layer[index] != null) {
|
|
||||||
nextLayer = index;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (currentLayer != nextLayer) {
|
|
||||||
buttonData.currentLayer = nextLayer;
|
|
||||||
currentLayer = buttonData.layer[currentLayer];
|
|
||||||
nextLayer = buttonData.layer[nextLayer];
|
|
||||||
switchLayers(currentLayer, nextLayer, buttonData.transitionType, buttonData.transitionDuration);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function buttonSetOverlayVisible(buttonData, visible) {
|
|
||||||
if (buttonData.overlay != null) {
|
|
||||||
var overlay = $("#" + buttonData.overlay);
|
|
||||||
if (overlay != null && overlay.is(":visible") != visible) {
|
|
||||||
overlay.stop(false, true);
|
|
||||||
if (visible) {
|
|
||||||
overlay.animate({
|
|
||||||
height : "show"
|
|
||||||
}, 400, "swing");
|
|
||||||
} else {
|
|
||||||
overlay.animate({
|
|
||||||
height : "hide"
|
|
||||||
}, 200, "swing");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function registerMenuHandler() {
|
|
||||||
overlayOpen = [];
|
|
||||||
$("div").each(function() {
|
|
||||||
var id = this.id;
|
|
||||||
if (id == null || id == "" || id.charAt(0) == "X") {
|
|
||||||
$(this).mouseenter(function(event) {
|
|
||||||
var mbDiv = getMenuButton(this, this.id);
|
|
||||||
if (mbDiv != null) {
|
|
||||||
var buttonData = layerbuttons[mbDiv.id];
|
|
||||||
var group = buttonData.group;
|
|
||||||
lwSetOverlayVisible(group, mbDiv.id);
|
|
||||||
if (jQuery.inArray(group, overlayOpen) == -1)
|
|
||||||
overlayOpen.push(group);
|
|
||||||
var last = getLastOverlay();
|
|
||||||
while (overlayOpen.length > 0 && last != group) {
|
|
||||||
lwSetOverlayVisible(last, null);
|
|
||||||
overlayOpen.pop();
|
|
||||||
last = getLastOverlay();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$(this).mouseup(function(event) {
|
|
||||||
// delay to give a-hrefs a chance
|
|
||||||
$(this).delay(1).queue(function() {
|
|
||||||
for ( var bid in layerbuttons) {
|
|
||||||
var buttonData = layerbuttons[bid];
|
|
||||||
if (buttonData.isMenuButton) {
|
|
||||||
buttonSetOverlayVisible(buttonData, false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$(this).dequeue();
|
|
||||||
});
|
|
||||||
overlayOpen = [];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function getMenuButton(div, id) {
|
|
||||||
var mb = null;
|
|
||||||
for ( var bid in layerbuttons)
|
|
||||||
if (bid == id)
|
|
||||||
mb = document.getElementById(bid);
|
|
||||||
if (mb == null) {
|
|
||||||
var parentDiv = div.parentNode;
|
|
||||||
if (parentDiv != null)
|
|
||||||
mb = getMenuButton(parentDiv, parentDiv.id);
|
|
||||||
}
|
|
||||||
return mb;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getLastOverlay() {
|
|
||||||
var length = overlayOpen.length;
|
|
||||||
if (length > 0)
|
|
||||||
return overlayOpen[length - 1];
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function lwSetOverlayVisible(group, exceptID) {
|
|
||||||
for ( var bid in layerbuttons) {
|
|
||||||
var buttonData = layerbuttons[bid];
|
|
||||||
if (buttonData.isMenuButton && buttonData.group == group) {
|
|
||||||
buttonSetOverlayVisible(buttonData, exceptID == bid);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startSlideShow(slideShowID) {
|
|
||||||
var slideShow = slideShows[slideShowID];
|
|
||||||
slideShow.running = true;
|
|
||||||
var duration = slideShow.slides[slideShow.currentSlideIndex].duration;
|
|
||||||
$("#" + slideShowID).delay(duration).queue(function() {
|
|
||||||
runSlideShow(slideShowID);
|
|
||||||
$(this).dequeue();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopSlideShow(slideShowID) {
|
|
||||||
var slideShow = slideShows[slideShowID];
|
|
||||||
slideShow.running = false;
|
|
||||||
$("#" + slideShowID).stop(true, true);
|
|
||||||
for ( var i = 0; i < slideShow.slides.length; i++)
|
|
||||||
$("#" + slideShow.slides[i].slideID).stop(true, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
function slideShowPreviousSlide(slideShowID) {
|
|
||||||
stopSlideShow(slideShowID);
|
|
||||||
var slideShow = slideShows[slideShowID];
|
|
||||||
var nextSlideIndex;
|
|
||||||
if (slideShow.currentSlideIndex > 0)
|
|
||||||
nextSlideIndex = slideShow.currentSlideIndex - 1;
|
|
||||||
else
|
|
||||||
nextSlideIndex = slideShow.slides.length - 1;
|
|
||||||
slideShowSlide(slideShow, nextSlideIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
function slideShowNextSlide(slideShowID) {
|
|
||||||
stopSlideShow(slideShowID);
|
|
||||||
var slideShow = slideShows[slideShowID];
|
|
||||||
var nextSlideIndex;
|
|
||||||
if (slideShow.currentSlideIndex < slideShow.slides.length - 1)
|
|
||||||
nextSlideIndex = slideShow.currentSlideIndex + 1;
|
|
||||||
else
|
|
||||||
nextSlideIndex = 0;
|
|
||||||
slideShowSlide(slideShow, nextSlideIndex);
|
|
||||||
}
|
|
||||||
|
|
||||||
function slideShowGotoSlide(slideShowID, nextSlideIndex) {
|
|
||||||
var slideShow = slideShows[slideShowID];
|
|
||||||
if (nextSlideIndex != slideShow.currentSlideIndex) {
|
|
||||||
stopSlideShow(slideShowID);
|
|
||||||
if (nextSlideIndex >= 0 && nextSlideIndex < slideShow.slides.length) {
|
|
||||||
slideShowSlide(slideShow, nextSlideIndex);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function runSlideShow(slideShowID) {
|
|
||||||
var slideShow = slideShows[slideShowID];
|
|
||||||
if (!slideShow.running)
|
|
||||||
return;
|
|
||||||
var nextSlideIndex = -1;
|
|
||||||
if (slideShow.randomize) {
|
|
||||||
do {
|
|
||||||
nextSlideIndex = parseInt(Math.random() * (slideShow.slides.length));
|
|
||||||
} while (nextSlideIndex == slideShow.currentSlideIndex);
|
|
||||||
} else if (slideShow.isDirectionBackwards) {
|
|
||||||
nextSlideIndex = slideShow.currentSlideIndex - 1;
|
|
||||||
if (nextSlideIndex < 0 && slideShow.pingPong) {
|
|
||||||
if (slideShow.passCount)
|
|
||||||
slideShow.passCount++;
|
|
||||||
else
|
|
||||||
slideShow.passCount = 1;
|
|
||||||
slideShow.isDirectionForward = true;
|
|
||||||
nextSlideIndex = 1;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
nextSlideIndex = slideShow.currentSlideIndex + 1;
|
|
||||||
if (nextSlideIndex == slideShow.slides.length) {
|
|
||||||
if (slideShow.pingPong) {
|
|
||||||
slideShow.isDirectionForward = false;
|
|
||||||
nextSlideIndex -= 2;
|
|
||||||
} else {
|
|
||||||
if (slideShow.passCount)
|
|
||||||
slideShow.passCount++;
|
|
||||||
else
|
|
||||||
slideShow.passCount = 1;
|
|
||||||
nextSlideIndex = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (nextSlideIndex != -1 && (slideShow.randomize || !(slideShow.fixedPassCount > 0 && slideShow.passCount >= slideShow.fixedPassCount))) {
|
|
||||||
var pause = slideShow.slides[nextSlideIndex].duration;
|
|
||||||
slideShowSlide(slideShow, nextSlideIndex, function() {
|
|
||||||
if (slideShow.running) {
|
|
||||||
$("#" + slideShowID).delay(pause).queue(function() {
|
|
||||||
runSlideShow(slideShowID);
|
|
||||||
$(this).dequeue();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function slideShowSlide(slideShow, nextSlideIndex, callback) {
|
|
||||||
var currentSlide = slideShow.slides[slideShow.currentSlideIndex];
|
|
||||||
var nextSlide = slideShow.slides[nextSlideIndex];
|
|
||||||
slideShow.currentSlideIndex = nextSlideIndex;
|
|
||||||
switchLayers($("#" + currentSlide.slideID), $("#" + nextSlide.slideID), nextSlide.transitionType, nextSlide.transitionDuration, callback);
|
|
||||||
}
|
|
||||||
|
|
||||||
function switchLayers(currentLayer, nextLayer, transitionType, transitionDuration, callback) {
|
|
||||||
switch (transitionType) {
|
|
||||||
case 0: { // no effect
|
|
||||||
currentLayer.stop(false, false);
|
|
||||||
nextLayer.stop(false, false);
|
|
||||||
nextLayer.fadeTo(0, 1);
|
|
||||||
currentLayer.fadeTo(0, 0);
|
|
||||||
if (callback) {
|
|
||||||
callback();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 1: { // fade
|
|
||||||
currentLayer.stop(false, false);
|
|
||||||
nextLayer.stop(false, false);
|
|
||||||
currentLayer.css('zIndex', 0);
|
|
||||||
nextLayer.css('zIndex', 1);
|
|
||||||
currentLayer.fadeTo(transitionDuration, 0, "easeOutQuad");
|
|
||||||
nextLayer.fadeTo(transitionDuration, 1, "easeInQuad", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 2: { // drop right to left
|
|
||||||
moveLayers(currentLayer, nextLayer, transitionDuration, "drop", "right", "left", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 3: { // drop left to right
|
|
||||||
moveLayers(currentLayer, nextLayer, transitionDuration, "drop", "left", "right", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 4: { // drop top to bottom
|
|
||||||
moveLayers(currentLayer, nextLayer, transitionDuration, "drop", "up", "down", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 5: { // drop bottom to top
|
|
||||||
moveLayers(currentLayer, nextLayer, transitionDuration, "drop", "down", "up", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 6: { // clip vertical
|
|
||||||
moveLayers(currentLayer, nextLayer, transitionDuration, "clip", "vertical", "vertical", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 7: { // clip horizontal
|
|
||||||
moveLayers(currentLayer, nextLayer, transitionDuration, "clip", "horizontal", "horizontal", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 8: { // puff / diagonal
|
|
||||||
currentLayer.stop(false, true);
|
|
||||||
nextLayer.stop(false, true);
|
|
||||||
currentLayer.css('zIndex', 1);
|
|
||||||
nextLayer.css('zIndex', 0);
|
|
||||||
nextLayer.css('opacity', 1);
|
|
||||||
nextLayer.show("puff", transitionDuration, callback);
|
|
||||||
currentLayer.hide("puff", transitionDuration);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 9: { // scale
|
|
||||||
currentLayer.stop(false, true);
|
|
||||||
nextLayer.stop(false, true);
|
|
||||||
currentLayer.css('zIndex', 1);
|
|
||||||
nextLayer.css('zIndex', 0);
|
|
||||||
nextLayer.css('opacity', 1);
|
|
||||||
nextLayer.show("scale", transitionDuration, callback);
|
|
||||||
currentLayer.hide("scale", transitionDuration);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 10: { // fold
|
|
||||||
currentLayer.stop(false, true);
|
|
||||||
nextLayer.stop(false, true);
|
|
||||||
currentLayer.css('zIndex', 1);
|
|
||||||
nextLayer.css('zIndex', 0);
|
|
||||||
nextLayer.css('opacity', 1);
|
|
||||||
nextLayer.show("fold", {
|
|
||||||
horizFirst : false
|
|
||||||
}, transitionDuration, callback);
|
|
||||||
currentLayer.hide("fold", {
|
|
||||||
horizFirst : true
|
|
||||||
}, transitionDuration);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 11: { // vertical in, horizontal out
|
|
||||||
moveLayers(currentLayer, nextLayer, transitionDuration, "blind", "vertical", "horizontal", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 12: { // horizontal in, vertical out
|
|
||||||
moveLayers(currentLayer, nextLayer, transitionDuration, "blind", "horizontal", "vertical", callback);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function moveLayers(currentLayer, nextLayer, transitionDuration, effect, from, to, callback) {
|
|
||||||
currentLayer.stop(false, true);
|
|
||||||
nextLayer.stop(false, true);
|
|
||||||
currentLayer.css('zIndex', 1);
|
|
||||||
nextLayer.css('zIndex', 0);
|
|
||||||
nextLayer.css('opacity', 1);
|
|
||||||
nextLayer.show(effect, {
|
|
||||||
direction : from
|
|
||||||
}, transitionDuration, callback);
|
|
||||||
currentLayer.hide(effect, {
|
|
||||||
direction : to
|
|
||||||
}, transitionDuration);
|
|
||||||
}
|
|
||||||
|
|
||||||
function runWebcam(wc, imgurl, ms) {
|
|
||||||
var d = new Date();
|
|
||||||
d = "?" + d.getTime();
|
|
||||||
document.images[wc].src = imgurl + d;
|
|
||||||
setTimeout("runWebcam('" + wc + "','" + imgurl + "'," + ms + ")", ms)
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXTransform(id, relative, sRect, stepRects, stepDurations) {
|
|
||||||
this.id = id;
|
|
||||||
this.relative = relative;
|
|
||||||
this.sRect = sRect;
|
|
||||||
this.stepRects = stepRects;
|
|
||||||
this.stepDurations = stepDurations;
|
|
||||||
this.curStep = -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXRect(x, y, w, h) {
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.w = w;
|
|
||||||
this.h = h;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXGoto(absolute, step, count) {
|
|
||||||
this.absolute = absolute;
|
|
||||||
this.step = step;
|
|
||||||
this.count = count;
|
|
||||||
this.stepped = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXLink(typ, s1, s2, s3, s4, s5, s6, s7) {
|
|
||||||
this.typ = typ;
|
|
||||||
this.s1 = s1;
|
|
||||||
this.s2 = s2;
|
|
||||||
this.s3 = s3;
|
|
||||||
this.s4 = s4;
|
|
||||||
this.s5 = s5;
|
|
||||||
this.s6 = s6;
|
|
||||||
this.s7 = s7;
|
|
||||||
}
|
|
||||||
|
|
||||||
function performLink(cxlink) {
|
|
||||||
var retVal = true;
|
|
||||||
if (cxlink.typ == 1 || cxlink.typ == 2) {
|
|
||||||
if (cxlink.s2 == '_blank') {
|
|
||||||
if (cxlink.s3) {
|
|
||||||
window.open(cxlink.s1, cxlink.s4, 'width=' + cxlink.s5 + ',height=' + cxlink.s6 + ',menubar=no,toolbar=no,status=no,scrollbars=yes');
|
|
||||||
} else {
|
|
||||||
window.open(cxlink.s1);
|
|
||||||
}
|
|
||||||
} else if (cxlink.s2 == '_top') {
|
|
||||||
top.location.href = cxlink.s1;
|
|
||||||
} else if (cxlink.s2 == '_parent') {
|
|
||||||
parent.location.href = cxlink.s1;
|
|
||||||
} else if (cxlink.s2 == '_self' || cxlink.s2 == '') {
|
|
||||||
window.location.href = cxlink.s1;
|
|
||||||
} else {
|
|
||||||
var target = document.getElementById(cxlink.s2);
|
|
||||||
if (target != null) {
|
|
||||||
target.src = cxlink.s1;
|
|
||||||
} else {
|
|
||||||
target = top.document.getElementById(cxlink.s2);
|
|
||||||
if (target != null)
|
|
||||||
target.src = cxlink.s1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (cxlink.typ == 3) {
|
|
||||||
window.location.href = cxlink.s1;
|
|
||||||
} else if (cxlink.typ == 4) {
|
|
||||||
var frm = document.getElementById(cxlink.s1);
|
|
||||||
if (frm != null) {
|
|
||||||
if (checkForm(cxlink)) {
|
|
||||||
frm.submit();
|
|
||||||
} else {
|
|
||||||
retVal = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (cxlink.typ == 5) {
|
|
||||||
var frm = document.getElementById(cxlink.s1);
|
|
||||||
if (frm != null)
|
|
||||||
frm.reset();
|
|
||||||
} else if (cxlink.typ == 9) {
|
|
||||||
window.print();
|
|
||||||
} else if (cxlink.typ == 10) {
|
|
||||||
window.close();
|
|
||||||
} else if (cxlink.typ == 6) {
|
|
||||||
var frmM = document.getElementById(cxlink.s1);
|
|
||||||
if (frmM != null) {
|
|
||||||
if (checkForm(cxlink)) {
|
|
||||||
var frmMoldAction = frmM.action;
|
|
||||||
frmM.action = cxlink.s7;
|
|
||||||
frmM.submit();
|
|
||||||
frmM.action = frmMoldAction;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return retVal;
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkForm(cxlink) {
|
|
||||||
for ( var i = 0; i < cxlink.s2.length; i++) {
|
|
||||||
var ok = true;
|
|
||||||
if (cxlink.s2[i].indexOf("radio_") == 0) {
|
|
||||||
if (cxlink.s3[i][1]) {
|
|
||||||
var radios = document.getElementsByName(cxlink.s2[i].substring(6));
|
|
||||||
ok = false;
|
|
||||||
for ( var ri = 0; ri < radios.length && ok == false; ri++) {
|
|
||||||
if (radios[ri].checked) {
|
|
||||||
ok = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var cpn = document.getElementById(cxlink.s2[i]);
|
|
||||||
if (cpn != null) {
|
|
||||||
if (cpn.type == "checkbox") {
|
|
||||||
if (cxlink.s3[i][1] && !cpn.checked) {
|
|
||||||
ok = false;
|
|
||||||
}
|
|
||||||
} else if (cpn.type.indexOf("select") >= 0) {
|
|
||||||
if (cxlink.s3[i][1] && cpn.value.length == 0) {
|
|
||||||
ok = false;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (cxlink.s3[i][1] && cpn.value.length == 0) {
|
|
||||||
ok = false;
|
|
||||||
} else if (cpn.value.length > 0) {
|
|
||||||
if (cxlink.s3[i][0] == 1) {
|
|
||||||
if (isNaN(cpn.value)) {
|
|
||||||
ok = false;
|
|
||||||
} else {
|
|
||||||
var intval = parseInt(cpn.value);
|
|
||||||
if (cxlink.s3[i][2] && cxlink.s3[i][4]) {
|
|
||||||
if (intval < cxlink.s3[i][3] || intval > cxlink.s3[i][5]) {
|
|
||||||
ok = false;
|
|
||||||
}
|
|
||||||
} else if (cxlink.s3[i][2]) {
|
|
||||||
if (intval < cxlink.s3[i][3]) {
|
|
||||||
ok = false;
|
|
||||||
}
|
|
||||||
} else if (cxlink.s3[i][4]) {
|
|
||||||
if (intval > cxlink.s3[i][5]) {
|
|
||||||
ok = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (cxlink.s3[i][0] == 2) {
|
|
||||||
var sl = cpn.value.length;
|
|
||||||
if (cxlink.s3[i][2] && cxlink.s3[i][4]) {
|
|
||||||
if (sl < cxlink.s3[i][3] || sl > cxlink.s3[i][5]) {
|
|
||||||
ok = false;
|
|
||||||
}
|
|
||||||
} else if (cxlink.s3[i][2]) {
|
|
||||||
if (sl < cxlink.s3[i][3]) {
|
|
||||||
ok = false;
|
|
||||||
}
|
|
||||||
} else if (cxlink.s3[i][4]) {
|
|
||||||
if (sl > cxlink.s3[i][5]) {
|
|
||||||
ok = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (cxlink.s3[i][0] == 3) {
|
|
||||||
var usr = "([a-zA-Z0-9][a-zA-Z0-9_.-]*|\"([^\\\\\x80-\xff\015\012\"]|\\\\[^\x80-\xff])+\")";
|
|
||||||
var domain = "([a-z<><7A><EFBFBD>A-Z<><5A><EFBFBD>0-9][a-z<><7A><EFBFBD>A-Z<><5A><EFBFBD>0-9._-]*\\.)*[a-z<><7A><EFBFBD>A-Z<><5A><EFBFBD>0-9][a-z<><7A><EFBFBD>A-Z<><5A><EFBFBD>0-9._-]*\\.[a-zA-Z]{2,5}";
|
|
||||||
var reg = new RegExp("^" + usr + "\@" + domain + "$");
|
|
||||||
ok = reg.test(cpn.value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var overlay = $("#" + cxlink.s4[i]);
|
|
||||||
if (overlay != null) {
|
|
||||||
if (ok)
|
|
||||||
overlay.hide();
|
|
||||||
else
|
|
||||||
overlay.show();
|
|
||||||
}
|
|
||||||
if (!ok)
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXVis(id, type) {
|
|
||||||
this.id = id;
|
|
||||||
this.type = type;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXStartPos(id, x, y, w, h) {
|
|
||||||
this.id = id;
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.w = w;
|
|
||||||
this.h = h;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXSearch(ole, oleDiv, txt, x, y, w, h) {
|
|
||||||
this.ole = ole;
|
|
||||||
this.oleDiv = oleDiv;
|
|
||||||
this.txt = txt;
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.w = w;
|
|
||||||
this.h = h;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXChange(id, key, val, op) {
|
|
||||||
this.id = id;
|
|
||||||
this.key = key;
|
|
||||||
this.val = val;
|
|
||||||
this.op = op;
|
|
||||||
}
|
|
||||||
|
|
||||||
function CXSlideShowControl(id, op, slideIndex) {
|
|
||||||
this.id = id;
|
|
||||||
this.op = op;
|
|
||||||
this.slideIndex = slideIndex;
|
|
||||||
}
|
|
||||||
|
|
||||||
function startAction(id) {
|
|
||||||
var retVal = true;
|
|
||||||
if (cxactions[id] != null && !cxactions[id][3]) {
|
|
||||||
cxactions[id][3] = true;
|
|
||||||
retVal = performAction(id);
|
|
||||||
}
|
|
||||||
return retVal;
|
|
||||||
}
|
|
||||||
|
|
||||||
function performAction(id) {
|
|
||||||
var retVal = true;
|
|
||||||
if (cxactions[id] != null) {
|
|
||||||
var curStep = cxactions[id][2];
|
|
||||||
if (cxactions[id][0].length - 1 > curStep) {
|
|
||||||
var timeout = 0;
|
|
||||||
var nextStep = true;
|
|
||||||
var data = cxactions[id][1][curStep];
|
|
||||||
switch (cxactions[id][0][curStep]) {
|
|
||||||
case 0:
|
|
||||||
for ( var i = 0; i < data.length; i++) {
|
|
||||||
var cxchange = data[i];
|
|
||||||
var elem = document.getElementById(cxchange.id);
|
|
||||||
if (elem != null) {
|
|
||||||
cxchange.val = parseInt(cxchange.val);
|
|
||||||
if (cxchange.key == "opacity") {
|
|
||||||
if ($.browser.msie) {
|
|
||||||
var init = true;
|
|
||||||
if (elem.style.filter.length > 0) {
|
|
||||||
var str = elem.style.filter;
|
|
||||||
var search = "alpha(opacity=";
|
|
||||||
var i = str.indexOf(search);
|
|
||||||
if (i >= 0) {
|
|
||||||
init = false;
|
|
||||||
var before = str.substr(0, i + search.length);
|
|
||||||
var after = str.substr(i + search.length);
|
|
||||||
i = after.indexOf(")");
|
|
||||||
var opacity = parseFloat(after.substr(0, i));
|
|
||||||
after = after.substr(i);
|
|
||||||
var val = cxchange.val / 255 * 100;
|
|
||||||
if (cxchange.op == "=")
|
|
||||||
opacity = val;
|
|
||||||
else if (cxchange.op == "+")
|
|
||||||
opacity += val;
|
|
||||||
else if (cxchange.op == "-")
|
|
||||||
opacity -= val;
|
|
||||||
if (opacity >= 0 && opacity <= 100) {
|
|
||||||
opacity = String(opacity);
|
|
||||||
if (opacity.length > 5)
|
|
||||||
opacity = opacity.substr(0, 5);
|
|
||||||
elem.style.filter = before + opacity + after;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (init) {
|
|
||||||
var opacity = 100;
|
|
||||||
var val = cxchange.val / 255 * 100;
|
|
||||||
if (cxchange.op == "=")
|
|
||||||
opacity = val;
|
|
||||||
else if (cxchange.op == "-")
|
|
||||||
opacity -= val;
|
|
||||||
if (opacity >= 0 && opacity <= 100) {
|
|
||||||
opacity = String(opacity);
|
|
||||||
if (opacity.length > 5)
|
|
||||||
opacity = opacity.substr(0, 5);
|
|
||||||
elem.style.filter = "alpha(opacity=" + opacity + ")";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (cxchange.op == "=") {
|
|
||||||
var opacity = cxchange.val / 255;
|
|
||||||
if (opacity >= 0.0 && opacity <= 1.0) {
|
|
||||||
opacity = String(opacity);
|
|
||||||
if (opacity.length > 4)
|
|
||||||
opacity = opacity.substr(0, 4);
|
|
||||||
elem.style.opacity = opacity;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
var opacity = 1.0;
|
|
||||||
if (elem.style.opacity)
|
|
||||||
opacity = parseFloat(elem.style.opacity);
|
|
||||||
if (cxchange.op == "+")
|
|
||||||
opacity += cxchange.val / 255;
|
|
||||||
else
|
|
||||||
opacity -= cxchange.val / 255;
|
|
||||||
if (opacity >= 0.0 && opacity <= 1.0) {
|
|
||||||
opacity = String(opacity);
|
|
||||||
if (opacity.length > 4)
|
|
||||||
opacity = opacity.substr(0, 4);
|
|
||||||
elem.style.opacity = opacity;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (cxchange.key == "top") {
|
|
||||||
var top = parseInt(elem.style.top);
|
|
||||||
if (cxchange.op == "=")
|
|
||||||
top = cxchange.val;
|
|
||||||
else if (cxchange.op == "+")
|
|
||||||
top += cxchange.val;
|
|
||||||
else if (cxchange.op == "-")
|
|
||||||
top -= cxchange.val;
|
|
||||||
elem.style.top = top + "px";
|
|
||||||
} else if (cxchange.key == "left") {
|
|
||||||
var left = parseInt(elem.style.left);
|
|
||||||
if (cxchange.op == "=")
|
|
||||||
left = cxchange.val;
|
|
||||||
else if (cxchange.op == "+")
|
|
||||||
left += cxchange.val;
|
|
||||||
else if (cxchange.op == "-")
|
|
||||||
left -= cxchange.val;
|
|
||||||
elem.style.left = left + "px";
|
|
||||||
} else if (cxchange.key == "width") {
|
|
||||||
var width = parseInt(elem.style.width);
|
|
||||||
if (cxchange.op == "=")
|
|
||||||
width = cxchange.val;
|
|
||||||
else if (cxchange.op == "+")
|
|
||||||
width += cxchange.val;
|
|
||||||
else if (cxchange.op == "-")
|
|
||||||
width -= cxchange.val;
|
|
||||||
elem.style.width = width + "px";
|
|
||||||
} else if (cxchange.key == "height") {
|
|
||||||
var height = parseInt(elem.style.height);
|
|
||||||
if (cxchange.op == "=")
|
|
||||||
height = cxchange.val;
|
|
||||||
else if (cxchange.op == "+")
|
|
||||||
height += cxchange.val;
|
|
||||||
else if (cxchange.op == "-")
|
|
||||||
height -= cxchange.val;
|
|
||||||
elem.style.height = height + "px";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
if (data.stepRects.length > data.curStep) {
|
|
||||||
var scpn = $("#" + data.id);
|
|
||||||
if (scpn != null) {
|
|
||||||
nextStep = false;
|
|
||||||
timeout = -1;
|
|
||||||
if (data.curStep < 0) {
|
|
||||||
data.curStep = 0;
|
|
||||||
if (!data.relative) {
|
|
||||||
scpn.css('left', data.sRect.x);
|
|
||||||
scpn.css('top', data.sRect.y);
|
|
||||||
scpn.css('width', data.sRect.w);
|
|
||||||
scpn.css('height', data.sRect.h);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
var r = data.stepRects[data.curStep];
|
|
||||||
scpn.animate({
|
|
||||||
'left' : r.x,
|
|
||||||
'top' : r.y,
|
|
||||||
'width' : r.w,
|
|
||||||
'height' : r.h
|
|
||||||
}, data.stepDurations[data.curStep], 'linear', function() {
|
|
||||||
data.curStep++;
|
|
||||||
performAction(id);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
data.curStep = -1;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
timeout = data;
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
if (data.count < 0 || data.stepped < data.count) {
|
|
||||||
data.stepped++;
|
|
||||||
nextStep = false;
|
|
||||||
var st = curStep;
|
|
||||||
if (data.absolute) {
|
|
||||||
st = data.step;
|
|
||||||
} else {
|
|
||||||
st = curStep + data.step;
|
|
||||||
}
|
|
||||||
cxactions[id][2] = st;
|
|
||||||
} else {
|
|
||||||
data.stepped = 0;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
case 8:
|
|
||||||
retVal = performLink(data);
|
|
||||||
break;
|
|
||||||
case 5:
|
|
||||||
var cpn = $("#" + data.id);
|
|
||||||
if (cpn != null) {
|
|
||||||
switch (data.type) {
|
|
||||||
case 0:
|
|
||||||
cpn.show();
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
cpn.hide();
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
if (cpn.is(":visible"))
|
|
||||||
cpn.hide();
|
|
||||||
else
|
|
||||||
cpn.show();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 6:
|
|
||||||
var cpn0 = $("#" + data.id);
|
|
||||||
if (cpn0 != null) {
|
|
||||||
cpn0.animate({
|
|
||||||
'left' : data.x,
|
|
||||||
'top' : data.y,
|
|
||||||
'width' : data.w,
|
|
||||||
'height' : data.h
|
|
||||||
},1);
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 7:
|
|
||||||
var searchString = document.getElementById(data.txt);
|
|
||||||
if (searchString != null) {
|
|
||||||
searchString = searchString.value;
|
|
||||||
var searchPath = "scripts/search.php?q=" + searchString;
|
|
||||||
var searchTarget = document.getElementById(data.ole);
|
|
||||||
if (searchTarget != null) {
|
|
||||||
var oleDiv = document.getElementById(data.oleDiv);
|
|
||||||
if (oleDiv != null) {
|
|
||||||
oleDiv.style.left = data.x + 'px';
|
|
||||||
oleDiv.style.top = data.y + 'px';
|
|
||||||
oleDiv.style.width = data.w + 'px';
|
|
||||||
oleDiv.style.height = data.h + 'px';
|
|
||||||
}
|
|
||||||
searchTarget.src = searchPath;
|
|
||||||
} else {
|
|
||||||
window.location.href = searchPath
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case 9:
|
|
||||||
var cpn = $("#" + data.id);
|
|
||||||
if (cpn != null) {
|
|
||||||
switch (data.op) {
|
|
||||||
case 0:
|
|
||||||
stopSlideShow(data.id);
|
|
||||||
break;
|
|
||||||
case 1:
|
|
||||||
startSlideShow(data.id);
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
slideShowNextSlide(data.id);
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
slideShowPreviousSlide(data.id);
|
|
||||||
break;
|
|
||||||
case 4:
|
|
||||||
slideShowGotoSlide(data.id, data.slideIndex);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (nextStep) {
|
|
||||||
cxactions[id][2]++;
|
|
||||||
}
|
|
||||||
if (timeout >= 0) {
|
|
||||||
setTimeout("performAction('" + id + "')", timeout);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
cxactions[id][2] = 0;
|
|
||||||
cxactions[id][3] = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return retVal;
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
html, body { margin:0; padding:0; height:100%; }
|
|
||||||
a:link, a:visited, a:hover, a:active, a:focus { text-decoration:none; }
|
|
||||||
.xdiv { position:absolute; overflow:hidden; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }
|
|
||||||
.buttoncontrol { position:absolute; width:100%; height:100%; z-index:4; background:url(empty) repeat; }
|
|
||||||
.imglayer { position:absolute; width:100%; height:100%; border:none; }
|
|
||||||
@@ -1,17 +0,0 @@
|
|||||||
.S0 { margin:0 auto; background-color:rgb(255,255,255); }
|
|
||||||
.S1 { line-height:13.6608px; -line-height:14px; font-family:Arial; font-size:12px; font-style:normal; font-weight:bold; color:#ffffff; text-decoration:none; }
|
|
||||||
.S10 { line-height:17.6856px; -line-height:18px; font-family:HelvLight; font-size:15px; font-style:normal; font-weight:normal; color:#2a2a2a; text-decoration:none; display:inline; }
|
|
||||||
.S11 { line-height:17.6856px; -line-height:18px; font-family:HelvLight; font-size:15px; font-style:normal; font-weight:bold; color:#8b0000; text-decoration:none; display:inline; }
|
|
||||||
.S12 { background-color:rgba(255,255,0,0.862); }
|
|
||||||
.S13 { background-color:rgb(139,37,0); border:outset 2px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; }
|
|
||||||
.S14 { line-height:13.6608px; -line-height:14px; font-family:Arial; font-size:12px; font-style:normal; font-weight:bold; color:#000000; text-decoration:none; }
|
|
||||||
.S15 { background-color:rgba(255,246,143,0); }
|
|
||||||
.S16 { background-color:rgb(255,255,0); border:outset 2px; -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; }
|
|
||||||
.S2 { background-color:rgb(223,227,229); }
|
|
||||||
.S3 { line-height:26.1833px; -line-height:26px; font-family:Arial; font-size:23px; font-style:normal; font-weight:normal; color:#595959; text-decoration:none; display:inline; }
|
|
||||||
.S4 { cursor:pointer; }
|
|
||||||
.S5 { line-height:17.0761px; -line-height:17px; font-family:Arial; font-size:15px; font-style:normal; font-weight:bold; color:#333333; text-decoration:none; display:inline; }
|
|
||||||
.S6 { line-height:17.0761px; -line-height:17px; font-family:Arial; font-size:15px; font-style:normal; font-weight:bold; color:#000000; text-decoration:none; display:inline; }
|
|
||||||
.S7 { line-height:17.0761px; -line-height:17px; font-family:Arial; font-size:15px; font-style:normal; font-weight:bold; color:#333333; text-decoration:underline; display:inline; }
|
|
||||||
.S8 { line-height:14.7992px; -line-height:15px; font-family:Arial; font-size:13px; font-style:normal; font-weight:bold; color:#333333; text-decoration:none; display:inline; }
|
|
||||||
.S9 { line-height:17.6856px; -line-height:18px; font-family:HelvLight; font-size:15px; font-style:normal; font-weight:bold; color:#2a2a2a; text-decoration:none; display:inline; }
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
document.currentPage = "index.html";
|
|
||||||
var layerbuttons = [];
|
|
||||||
layerbuttons["X7_0"] = { layer: ["Xf_0",null,null,null], transitionType: 0, transitionDuration: 250 };
|
|
||||||
layerbuttons["X7_1"] = { layer: ["Xf_1",null,null,null], transitionType: 0, transitionDuration: 250 };
|
|
||||||
var slideShows = [];
|
|
||||||
slideShows["X4_0"] = { currentSlideIndex: 0, slides: [{slideID: "Xe_0", duration: 5000, transitionType: 1, transitionDuration: 1000},{slideID: "Xe_1", duration: 5000, transitionType: 1, transitionDuration: 1000},{slideID: "Xe_2", duration: 5000, transitionType: 1, transitionDuration: 1000},{slideID: "Xe_3", duration: 5000, transitionType: 1, transitionDuration: 1000},{slideID: "Xe_4", duration: 5000, transitionType: 1, transitionDuration: 1000}] };
|
|
||||||
var cxactions = [];
|
|
||||||
cxactions['X3_6_2'] = new Array(new Array(5,5,5,-1),new Array(new CXVis('X1_2',2),new CXVis('X1_3',1),new CXVis('X1_4',1),""),0,false);
|
|
||||||
cxactions['X1_2_2'] = new Array(new Array(5,-1),new Array(new CXVis('X1_2',1),""),0,false);
|
|
||||||
cxactions['X3_7__0'] = new Array(new Array(4,-1),new Array(new CXLink(2,'http://www.ecker-lichtwerbung.de','_blank',false,'popup',300,300,''),""),0,false);
|
|
||||||
cxactions['X3_9_2'] = new Array(new Array(5,5,5,-1),new Array(new CXVis('X1_3',2),new CXVis('X1_2',1),new CXVis('X1_4',1),""),0,false);
|
|
||||||
cxactions['X1_3_4'] = new Array(new Array(5,-1),new Array(new CXVis('X1_3',1),""),0,false);
|
|
||||||
cxactions['X3_a_2'] = new Array(new Array(5,-1),new Array(new CXVis('X1_3',1),""),0,false);
|
|
||||||
cxactions['X3_b_2'] = new Array(new Array(5,5,5,-1),new Array(new CXVis('X1_4',2),new CXVis('X1_3',1),new CXVis('X1_2',1),""),0,false);
|
|
||||||
cxactions['X1_4_2'] = new Array(new Array(5,-1),new Array(new CXVis('X1_4',1),""),0,false);
|
|
||||||
cxactions['X7_0_2'] = new Array(new Array(5,-1),new Array(new CXVis('X1_5',1),""),0,false);
|
|
||||||
cxactions['X7_1_2'] = new Array(new Array(5,5,-1),new Array(new CXVis('X1_4',0),new CXVis('X1_5',1),""),0,false);
|
|
||||||
preloadImages("media/lw1_951x486.jpg","media/lw2_951x141.jpg","media/facebook_40x40.png","media/Fotolia_55927497_M_950x630.jpg","media/Fotolia_58904654_M_950x632.jpg","media/Fotolia_58904662_M_1690x1124.jpg","media/Fotolia_60630538_M_950x631.jpg","media/Fotolia_602154532_M.jpg");
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 828 B |
@@ -1,140 +0,0 @@
|
|||||||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
||||||
<meta name="description" content="HTTrack is an easy-to-use website mirror utility. It allows you to download a World Wide website from the Internet to a local directory,building recursively all structures, getting html, images, and other files from the server to your computer. Links are rebuiltrelatively so that you can freely browse to the local site (works with any browser). You can mirror several sites together so that you can jump from one toanother. You can, also, update an existing mirror site, or resume an interrupted download. The robot is fully configurable, with an integrated help" />
|
|
||||||
<meta name="keywords" content="httrack, HTTRACK, HTTrack, winhttrack, WINHTTRACK, WinHTTrack, offline browser, web mirror utility, aspirateur web, surf offline, web capture, www mirror utility, browse offline, local site builder, website mirroring, aspirateur www, internet grabber, capture de site web, internet tool, hors connexion, unix, dos, windows 95, windows 98, solaris, ibm580, AIX 4.0, HTS, HTGet, web aspirator, web aspirateur, libre, GPL, GNU, free software" />
|
|
||||||
<title>List of available projects - HTTrack Website Copier</title>
|
|
||||||
<!-- Mirror and index made by HTTrack Website Copier/3.49-2 [XR&CO'2014] -->
|
|
||||||
|
|
||||||
<style type="text/css">
|
|
||||||
<!--
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0; padding: 0; margin-bottom: 15px; margin-top: 8px;
|
|
||||||
background: #77b;
|
|
||||||
}
|
|
||||||
body, td {
|
|
||||||
font: 14px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
#subTitle {
|
|
||||||
background: #000; color: #fff; padding: 4px; font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
#siteNavigation a, #siteNavigation .current {
|
|
||||||
font-weight: bold; color: #448;
|
|
||||||
}
|
|
||||||
#siteNavigation a:link { text-decoration: none; }
|
|
||||||
#siteNavigation a:visited { text-decoration: none; }
|
|
||||||
|
|
||||||
#siteNavigation .current { background-color: #ccd; }
|
|
||||||
|
|
||||||
#siteNavigation a:hover { text-decoration: none; background-color: #fff; color: #000; }
|
|
||||||
#siteNavigation a:active { text-decoration: none; background-color: #ccc; }
|
|
||||||
|
|
||||||
|
|
||||||
a:link { text-decoration: underline; color: #00f; }
|
|
||||||
a:visited { text-decoration: underline; color: #000; }
|
|
||||||
a:hover { text-decoration: underline; color: #c00; }
|
|
||||||
a:active { text-decoration: underline; }
|
|
||||||
|
|
||||||
#pageContent {
|
|
||||||
clear: both;
|
|
||||||
border-bottom: 6px solid #000;
|
|
||||||
padding: 10px; padding-top: 20px;
|
|
||||||
line-height: 1.65em;
|
|
||||||
background-image: url(backblue.gif);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: top right;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pageContent, #siteNavigation {
|
|
||||||
background-color: #ccd;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.imgLeft { float: left; margin-right: 10px; margin-bottom: 10px; }
|
|
||||||
.imgRight { float: right; margin-left: 10px; margin-bottom: 10px; }
|
|
||||||
|
|
||||||
hr { height: 1px; color: #000; background-color: #000; margin-bottom: 15px; }
|
|
||||||
|
|
||||||
h1 { margin: 0; font-weight: bold; font-size: 2em; }
|
|
||||||
h2 { margin: 0; font-weight: bold; font-size: 1.6em; }
|
|
||||||
h3 { margin: 0; font-weight: bold; font-size: 1.3em; }
|
|
||||||
h4 { margin: 0; font-weight: bold; font-size: 1.18em; }
|
|
||||||
|
|
||||||
.blak { background-color: #000; }
|
|
||||||
.hide { display: none; }
|
|
||||||
.tableWidth { min-width: 400px; }
|
|
||||||
|
|
||||||
.tblRegular { border-collapse: collapse; }
|
|
||||||
.tblRegular td { padding: 6px; background-image: url(fade.gif); border: 2px solid #99c; }
|
|
||||||
.tblHeaderColor, .tblHeaderColor td { background: #99c; }
|
|
||||||
.tblNoBorder td { border: 0; }
|
|
||||||
|
|
||||||
|
|
||||||
// -->
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<table width="76%" border="0" align="center" cellspacing="0" cellpadding="3" class="tableWidth">
|
|
||||||
<tr>
|
|
||||||
<td id="subTitle">HTTrack Website Copier - Open Source offline browser</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<table width="76%" border="0" align="center" cellspacing="0" cellpadding="0" class="tableWidth">
|
|
||||||
<tr class="blak">
|
|
||||||
<td>
|
|
||||||
<table width="100%" border="0" align="center" cellspacing="1" cellpadding="0">
|
|
||||||
<tr>
|
|
||||||
<td colspan="6">
|
|
||||||
<table width="100%" border="0" align="center" cellspacing="0" cellpadding="10">
|
|
||||||
<tr>
|
|
||||||
<td id="pageContent">
|
|
||||||
<!-- ==================== End prologue ==================== -->
|
|
||||||
|
|
||||||
|
|
||||||
<h1 ALIGN=Center>Index of locally available projects:</H1>
|
|
||||||
<table border="0" width="100%" cellspacing="1" cellpadding="0">
|
|
||||||
<TH>
|
|
||||||
<BR/>
|
|
||||||
No categories
|
|
||||||
</TH>
|
|
||||||
<TR>
|
|
||||||
<TD BACKGROUND="fade.gif">
|
|
||||||
· <A HREF="alte%20webseite/index.html">alte webseite</A>
|
|
||||||
</TD>
|
|
||||||
</TR>
|
|
||||||
</TABLE>
|
|
||||||
<BR>
|
|
||||||
<H6 ALIGN="RIGHT">
|
|
||||||
<I>Mirror and index made by HTTrack Website Copier [XR&CO'2008]</I>
|
|
||||||
</H6>
|
|
||||||
<!-- Mirror and index made by HTTrack Website Copier/3.49-2 [XR&CO'2014] -->
|
|
||||||
<!-- Thanks for using HTTrack Website Copier! -->
|
|
||||||
|
|
||||||
<!-- ==================== Start epilogue ==================== -->
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<table width="76%" border="0" align="center" valign="bottom" cellspacing="0" cellpadding="0">
|
|
||||||
<tr>
|
|
||||||
<td id="footer"><small>© 2008 Xavier Roche & other contributors - Web Design: Leto Kauler.</small></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 119 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
857
index.html
857
index.html
@@ -1,857 +0,0 @@
|
|||||||
<!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>
|
|
||||||
Reference in New Issue
Block a user