Modernisierung der Lackwerk-Webseite

Im Ordner alt webseite/ lag ein HTTrack-Mirror der alten Seite von lackwerk-kl.de – eine starre 950px-Seite von 2014/2022 mit fixem Layout, Stock-Fotos und einer simplen Bildergalerie. Nicht responsive, nicht mehr zeitgemäß. Was ich Schritt für Schritt gemacht habe 1. Firma recherchiert Aus Altseite, Google, Branchenverzeichnissen und Facebook ein vollständiges Profil erstellt: Lackwerk GmbH, Gienanthstr. 2–4, Kaiserslautern · Inhaber Patric Hertz · gegründet 2014 Leistungen, Öffnungszeiten, Rechtsdaten (HRB 31677, USt DE295225567) Bewertungen: 5,0★ bei 72 Google-Bewertungen, 100 % empfohlen (Facebook), 334 Follower 2. Echte Bilder von Facebook geholt (wie von dir gewünscht) Von der öffentlichen Seite derlackspezialist die echten Arbeitsfotos extrahiert und heruntergeladen: Lackierer in der Spritzkabine → Hero-Bild komplette Porsche-911-Restauration (Rohzustand → Grundierung → frisch lackiert → Hochglanz) → Referenz-Galerie Logo + einige Werkstattmotive aus der Altseite als Ergänzung 3. Neue Webseite gebaut – ein sauberes, modernes index.html (21st-inspiriert, aber seriös): Bereich Inhalt Header Glasig, sticky, Wortmarke, Mobile-Menü Hero Dunkel-elegant, echtes Kabinen-Foto, Gradient-Text, Trust-Zahlen Trust-Leiste Meisterqualität, alle Marken, faire Preise Leistungen 6 Karten mit Icons & Hover-Effekt Über uns Firmengeschichte + Patric Hertz Prozess 4 Schritte von Anfrage bis Übergabe Referenzen Bento-Galerie mit Lightbox (echte Fotos) Bewertungen Nur belegbare Kennzahlen, keine erfundenen Zitate Kontakt Daten, Öffnungszeiten, funktionierende Google-Map Footer Impressum & Datenschutz als Modals Markenfarbe Blau (passend zum Logo), Fonts Sora/Inter, dezente Scroll-Animationen, voll responsiv. 4. Im Browser getestet & gefixt Alle Sektionen, Modal, Map und schnelles Scrollen geprüft. Zwei Details korrigiert: Header-Umbruch bei mittlerer Breite + Absicherung, damit bei schnellem Scrollen keine Sektion unsichtbar bleibt. Dateien index.html – neue Webseite (ersetzt die Platzhalter-Vorlage) assets/ – Logo + Werkstattmotive assets/work/ – echte Facebook-Arbeitsfotos Alte Seite unter alt webseite/ unberührt als Referenz
2026-07-12 14:38:27 +02:00
parent 59bfd1b2d1
commit 5acd7046d3
41 changed files with 2484 additions and 36 deletions
--- a/webseite.whtt
+++ b/webseite.whtt
--- a/webseite/backblue.gif
+++ b/webseite/backblue.gif
--- a/webseite/fade.gif
+++ b/webseite/fade.gif
--- a/webseite/hts-cache/new.lst
+++ b/webseite/hts-cache/new.lst
@@ -0,0 +1,18 @@
+[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]
--- a/webseite/hts-cache/new.txt
+++ b/webseite/hts-cache/new.txt
@@ -0,0 +1,17 @@
+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)
--- a/webseite/hts-cache/new.zip
+++ b/webseite/hts-cache/new.zip
--- a/webseite/hts-cache/readme.txt
+++ b/webseite/hts-cache/readme.txt
@@ -0,0 +1,12 @@
+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
--- a/webseite/hts-cache/winprofile.ini
+++ b/webseite/hts-cache/winprofile.ini
@@ -0,0 +1,78 @@
+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=
--- a/webseite/hts-log.txt
+++ b/webseite/hts-log.txt
@@ -0,0 +1,12 @@
+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
+
--- a/webseite/index.html
+++ b/webseite/index.html
@@ -0,0 +1,144 @@
+<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">
+				&middot;
+					<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&amp;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>&copy; 2008 Xavier Roche & other contributors - Web Design: Leto Kauler.</small></td>
+	</tr>
+</table>
+
+</body>
+
+</html>
+
+
--- a/webseite/www.lackwerk-kl.de/index.html
+++ b/webseite/www.lackwerk-kl.de/index.html
@@ -0,0 +1,149 @@
+<!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&auml;&szlig; &sect; 5 TMG und DL-InfoV:<br>Lackwerk GmbH<br>Gienanthstr. 2-4<br>67663 Kaiserslautern<br>&nbsp;<br>Telefon: 0631 / 35 78 90-6<br>&nbsp;<br></h4><h4 class="S6">Handelsregister-Nummer Kaiserslautern :&shy; 31677</h4><h4 class="S5"><br>Umsatzsteuer-Identifikationsnummer<br>gem&auml;&szlig; &sect;27 a Umsatzsteuergesetz: </h4><h4 class="S6">DE295225567</h4><h4 class="S5"><br>Verantwortlich f&uuml;r den Inhalt nach &sect; 55 Abs. 2 RStV:<br>Patric Hertz<br>&nbsp;<br>Gestaltung &amp; Hosting:<br>ecker licht + werbung<br>merkurstra&szlig;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&uuml;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&amp;source=s_d&amp;aq=0&amp;ie=UTF8&amp;t=k&amp;z=16&amp;iwloc=A&amp;output=embed&amp;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&auml;nkung<br>&nbsp;<br></h4><h4 class="S10">Die Inhalte des Internetauftritts wurden mit gr&ouml;&szlig;tm&ouml;glicher Sorgfalt und nach bestem Gewissen erstellt. Dennoch &uuml;bernimmt der Anbieter  dieser Webseite keine Gew&auml;hr f&uuml;r die Aktualit&auml;t, Vollst&auml;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&auml;&szlig; &sect; 7 Abs. 1 TMG f&uuml;r eigene Inhalte und bereitgestellte Informationen auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich; nach den &sect;&sect; 8 bis 10 TMG jedoch nicht verpflichtet, die &uuml;bermittelten oder  gespeicherten fremden Informationen zu &uuml;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&ouml;glich.<br>&nbsp;<br></h4><h4 class="S9">2. Externe Links<br>&nbsp;<br></h4><h4 class="S10">Die Webseite enth&auml;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&uuml;r diese Inhalte auch keine Gew&auml;hr &uuml;bernehmen.F&uuml;r die Inhalte und Richtigkeit der bereitgestellten Informationen ist der jeweilige Anbieter der verlinkten Webseite verantwortlich. Zum Zeitpunkt der Verlinkung waren keine  Rechtsverst&ouml;&szlig;e erkennbar. Bei Bekanntwerden einer solchen Rechtsverletzung wird der Link umgehend entfernen.<br>&nbsp;<br></h4><h4 class="S9">3. Urheberrecht/Leistungsschutzrecht<br>&nbsp;<br></h4><h4 class="S10">Die auf dieser Webseite ver&ouml;ffentlichten Inhalte, Werke und bereitgestellten Informationen unterliegen dem deutschen Urheberrecht und Leistungsschutzrecht. Jede Art der Vervielf&auml;ltigung, Bearbeitung, Verbreitung, Einspeicherung und jede Art der Verwertung au&szlig;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>&nbsp;<br></h4><h4 class="S9">4. Datenschutz<br>&nbsp;<br></h4><h4 class="S10">Durch den Besuch des Internetauftritts k&ouml;nnen Informationen (Datum, Uhrzeit, aufgerufene Seite) &uuml;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&ouml;glich, nur mit dem vorherigen Einverst&auml;ndnis des Nutzers der  Webseite. Eine Weitergabe der Daten an Dritte findet ohne ausdr&uuml;ckliche Zustimmung des Nutzers nicht statt.<br>Der Anbieter weist darauf hin, dass die &Uuml;bertragung von Daten im Internet (z. B. per E-Mail) Sicherheitsl&uuml;cken aufweisen und ein l&uuml;ckenloser Schutz der Daten vor dem Zugriff Dritter nicht gew&auml;hrleistet werden kann. Der Anbieter &uuml;bernimmt keine Haftung f&uuml;r die durch solche Sicherheitsl&uuml;cken entstandenen Sch&auml;den.<br>Der Verwendung der Kontaktdaten durch Dritte zur gewerblichen Nutzung wird ausdr&uuml;cklich widersprochen. Es sei denn, der Anbieter hat zuvor seine schriftliche Einwilligung erteilt.Der Anbieter beh&auml;lt sich rechtliche Schritte f&uuml;r den Fall der unverlangten Zusendung von Werbeinformationen, z. B. durch Spam-Mails, vor.<br>&nbsp;<br>&nbsp;<br></h4><h4 class="S11">Um unsere Webseite f&uuml;r Sie optimal zu gestalten und fortlaufend verbessern zu k&ouml;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">&nbsp;</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&uuml;r Sie optimal zu gestalten und fortlaufend verbessern zu k&ouml;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&auml;rung</strong></div></div>
+			</div>
+			<div class="buttoncontrol">&nbsp;</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>
--- a/webseite/www.lackwerk-kl.de/media/Fotolia_55927497_M_950x630.jpg
+++ b/webseite/www.lackwerk-kl.de/media/Fotolia_55927497_M_950x630.jpg
--- a/webseite/www.lackwerk-kl.de/media/Fotolia_58904654_M_950x632.jpg
+++ b/webseite/www.lackwerk-kl.de/media/Fotolia_58904654_M_950x632.jpg
--- a/webseite/www.lackwerk-kl.de/media/Fotolia_58904662_M_1690x1124.jpg
+++ b/webseite/www.lackwerk-kl.de/media/Fotolia_58904662_M_1690x1124.jpg
--- a/webseite/www.lackwerk-kl.de/media/Fotolia_602154532_M.jpg
+++ b/webseite/www.lackwerk-kl.de/media/Fotolia_602154532_M.jpg
--- a/webseite/www.lackwerk-kl.de/media/Fotolia_60630538_M_950x631.jpg
+++ b/webseite/www.lackwerk-kl.de/media/Fotolia_60630538_M_950x631.jpg
--- a/webseite/www.lackwerk-kl.de/media/facebook_40x40.png
+++ b/webseite/www.lackwerk-kl.de/media/facebook_40x40.png
--- a/webseite/www.lackwerk-kl.de/media/lw1_951x486.jpg
+++ b/webseite/www.lackwerk-kl.de/media/lw1_951x486.jpg
--- a/webseite/www.lackwerk-kl.de/media/lw2_951x141.jpg
+++ b/webseite/www.lackwerk-kl.de/media/lw2_951x141.jpg
--- a/webseite/www.lackwerk-kl.de/scripts/empty
+++ b/webseite/www.lackwerk-kl.de/scripts/empty
@@ -0,0 +1 @@
+The requested file does not exist.
--- a/webseite/www.lackwerk-kl.de/scripts/global.js
+++ b/webseite/www.lackwerk-kl.de/scripts/global.js
@@ -0,0 +1,866 @@
+/*
+ * 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;
+}
--- a/webseite/www.lackwerk-kl.de/scripts/global70c6.css
+++ b/webseite/www.lackwerk-kl.de/scripts/global70c6.css
@@ -0,0 +1,5 @@
+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; }
--- a/webseite/www.lackwerk-kl.de/scripts/index70c6.css
+++ b/webseite/www.lackwerk-kl.de/scripts/index70c6.css
@@ -0,0 +1,17 @@
+.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; }
--- a/webseite/www.lackwerk-kl.de/scripts/index70c6.js
+++ b/webseite/www.lackwerk-kl.de/scripts/index70c6.js
@@ -0,0 +1,18 @@
+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");
--- a/webseite/www.lackwerk-kl.de/scripts/jquery.js
+++ b/webseite/www.lackwerk-kl.de/scripts/jquery.js
--- a/webseite/backblue.gif
+++ b/webseite/backblue.gif
--- a/webseite/fade.gif
+++ b/webseite/fade.gif
--- a/webseite/index.html
+++ b/webseite/index.html
@@ -0,0 +1,140 @@
+<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">
+                    &middot; <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>&copy; 2008 Xavier Roche & other contributors - Web Design: Leto Kauler.</small></td>
+	</tr>
+</table>
+
+</body>
+
+</html>
+
+
--- a/assets/booth1.jpg
+++ b/assets/booth1.jpg
--- a/assets/detail1.jpg
+++ b/assets/detail1.jpg
--- a/assets/detail2.jpg
+++ b/assets/detail2.jpg
--- a/assets/logo-banner.jpg
+++ b/assets/logo-banner.jpg
--- a/assets/logo-mark.jpg
+++ b/assets/logo-mark.jpg
--- a/assets/work/feature.jpg
+++ b/assets/work/feature.jpg
--- a/assets/work/profile.jpg
+++ b/assets/work/profile.jpg
--- a/assets/work/work1.jpg
+++ b/assets/work/work1.jpg
--- a/assets/work/work2.jpg
+++ b/assets/work/work2.jpg
--- a/assets/work/work3.jpg
+++ b/assets/work/work3.jpg
--- a/assets/work/work4.jpg
+++ b/assets/work/work4.jpg
--- a/assets/work/work5.jpg
+++ b/assets/work/work5.jpg
--- a/index.html
+++ b/index.html
@@ -3,41 +3,855 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Webklar Preview Vorlage</title>
+<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: #0f1419; --card: #1a2332; --text: #e7ecf3; --accent: #3b82f6; }
-    * { box-sizing: border-box; }
+: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: system-ui, -apple-system, sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      margin: 0;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 2rem;
+  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;
 }
-    main {
-      max-width: 32rem;
-      background: var(--card);
-      border-radius: 12px;
-      padding: 2rem;
-      text-align: center;
+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}
 }
-    h1 { color: var(--accent); margin-top: 0; }
-    p { line-height: 1.6; opacity: 0.9; }
-    code { background: #0f172a; padding: 0.15rem 0.4rem; border-radius: 4px; }
 </style>
 </head>
 <body>
-  <main>
-    <h1>Webklar Preview Vorlage</h1>
-    <p>Dieses Repository ist als Preview-Projekt konfiguriert.</p>
-    <p>Nach dem Push wird die Vorschau unter<br>
-      <code>webklar-preview-template.project.webklar.com</code><br>
-      bereitgestellt (Login <20>ber <code>project.webklar.com</code>).</p>
-    <p>Passe <code>.webklar-preview.json</code> und diese Seite fuer dein Kundenprojekt an.</p>
-  </main>
+
+<!-- ===== 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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- &amp; 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 &amp; 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 &amp; 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 &amp; Ü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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>