knso/preview-lack-design-meisterbetrieb-inh-serkan-oezmen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Automatisch erstellte Preview-Seite

Browse Source
This commit is contained in:
webklar-automation
2026-07-15 04:07:09 +00:00
commit 5fe2db38c3
21 changed files with 4009 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
.webklar-preview.json Normal file
View File

@@ -0,0 +1,11 @@
{
"enabled": true,
"type": "static",
"branch": "main",
"displayName": "tamplate-lack",
"templateName": "webklar-preview-template",
"projectType": "template",
"public": false,
"template": true,
"subdomain": "tamplate-lack"
}

175
AUSFUELLEN.md Normal file
View File

@@ -0,0 +1,175 @@
# Website-Template für Autolackierereien — Ausfüllanleitung
## Für wen ist dieses Template?
Dieses Template ist eine fertige, moderne One-Page-Website für **Autolackierer,
Lackier- und Karosseriebetriebe**. Es entstand aus einer echten Kundenwebsite und
wurde vollständig **anonymisiert**: Alle personen- und firmenbezogenen Daten wurden
durch Platzhalter ersetzt. So kann es für **jeden beliebigen Lackierbetrieb**
wiederverwendet werden.
Die Website enthält bereits ausformulierte, branchentypische Texte (Hero, Leistungen,
Über-uns, Philosophie). Diese Texte sind allgemeingültig gehalten und können 1:1
übernommen oder nach Belieben angepasst werden. **Konkret ausgefüllt werden müssen nur
die unten aufgelisteten Platzhalter** — alles, was in doppelten eckigen Klammern steht,
z. B. `Lack & Design Meisterbetrieb (Inh. Serkan Özmen)`.
---
## So füllst du das Template aus
1. Öffne `index.html`.
2. Suche (Suchen & Ersetzen im Editor) nach den Platzhaltern `[[…]]` und ersetze sie
durch die echten Werte des Betriebs.
3. Ersetze das Logo und (optional) die Bilder — siehe Abschnitte **Logo** und **Bilder**.
4. Fertig. Die Seite ist eine statische Datei plus `support.js` (Framework) und den
Assets im Ordner `assets/`.
> **Tipp:** Jeder Platzhalter kommt teils mehrfach vor (z. B. `info@lackiererei-puchheim.de` in Kontakt-
> block und Footer). „Alle ersetzen" verwenden, damit keine Fundstelle übrig bleibt.
---
## Benötigte Daten (Platzhalter-Liste)
### Firma & Marke
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `Lack & Design Meisterbetrieb (Inh. Serkan Özmen)` | Kurzer Markenname (Logo-Alt, Google-Badge, Footer) | Musterlack |
| `Lack & Design Meisterbetrieb (Inh. Serkan Özmen)` | Vollständiger Firmenname inkl. Rechtsform | Musterlack GmbH |
| `Puchheim` | Standort/Stadt (Footer, Über-uns, Karte) | Musterstadt |
| `2026` | Jahr für den Copyright-Hinweis im Footer | 2026 |
### Inhaber / Über uns
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `Serkan Özmen` | Name der Inhaberin / des Inhabers (Über-uns-Abschnitt) | Max Mustermann |
### Kontakt & Anschrift
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `Boschstr. 14` | Straße + Hausnummer | Musterstr. 1 |
| `82178` | Postleitzahl | 12345 |
| `Puchheim` | Ort (siehe oben, gleicher Wert) | Musterstadt |
| `089 32606613` | Telefonnummer, wie angezeigt | 01234 / 56 78 90 |
| `tel:+498932606613` | Telefonnummer im Link-Format (international, ohne Leerzeichen) | +4912345678900 |
| `` | Faxnummer (falls vorhanden) | 01234 / 56 78 91 |
| `info@lackiererei-puchheim.de` | E-Mail-Adresse | info@musterlack.de |
### Öffnungszeiten
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `Mo–Fr` | Erste Zeile: Tage | Montag – Freitag |
| `08:00–18:00` | Erste Zeile: Zeiten | 09:00 – 13:00 · 14:00 – 17:00 |
| `Sa` | Zweite Zeile: Tage | Samstag & Sonntag |
| `08:00–16:00` | Zweite Zeile: Zeiten | Geschlossen |
### Social Media
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `` | Link zur Facebook-Seite (Referenzen + Footer) | https://www.facebook.com/musterlack |
### Google-Bewertungen (Badge + Bewertungskarte)
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `5,0` | Durchschnittliche Sternebewertung | 4,8 |
| `86` | Anzahl der Bewertungen | 112 |
| `` | Google Place ID des Betriebs | ChIJ… |
| `Anna K.` | Name Rezensent 1 (Demo/Fallback) | Sabine M. |
| `Schnelle und saubere Abwicklung, das Ergebnis sieht aus wie neu. Sehr zu empfehlen!` | Text Rezension 1 | „Kratzer war komplett verschwunden …" |
| `Michael B.` | Name Rezensent 2 | Thomas K. |
| `Freundliches Team, faire Preise und top handwerkliche Qualität. Gerne wieder.` | Text Rezension 2 | „Top Beratung, saubere Arbeit …" |
| `Sabine W.` | Name Rezensent 3 | Petra L. |
| `Kompetente Beratung und perfekte Lackierung. Alles pünktlich und zuverlässig erledigt.` | Text Rezension 3 | „Delle wie neu, gerne wieder …" |
> **Hinweis zu Google-Bewertungen:** Die drei Rezensionen sind nur ein Fallback für die
> Vorschau. In der produktiven Umgebung können sie über einen eigenen Backend-Endpunkt
> `/api/reviews` **live** aus Google Places geladen werden. Der Google-API-Key bleibt
> dabei server-seitig. Ohne Backend werden einfach die eingetragenen Demo-Werte gezeigt.
### Standort-Karte (MapLibre)
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `` | Längengrad des Standorts (im `<script>`, Konstante `LNG`) | 7.7269 |
| `` | Breitengrad des Standorts (im `<script>`, Konstante `LAT`) | 49.4443 |
| `Boschstr. 14, 82178 Puchheim` | Zieladresse für „Route planen" (URL-kodiert) | Musterstr.+1,+12345+Musterstadt |
> Die Karte ist als Vorbelegung auf die **geografische Mitte Deutschlands** gesetzt,
> damit sie auch ohne Eintrag funktioniert. Für den echten Standort die Werte `LNG`/`LAT`
> in der `initMap()`-Funktion in `index.html` eintragen. Koordinaten findest du z. B.,
> indem du den Standort in Google Maps mit Rechtsklick anwählst.
---
## Logo
Das Logo ist ein **Platzhalter**: `assets/logo-placeholder.svg` (zeigt „IHR LOGO").
Es wird an zwei Stellen eingebunden (Navigation oben + Footer).
- **Einfachste Variante:** Eigenes Logo als `assets/logo-placeholder.svg` (oder z. B.
`assets/logo.png`) ablegen und die beiden `src="assets/logo-placeholder.svg"` in
`index.html` anpassen.
- Empfohlen: helles/weißes Logo, da der Hintergrund dunkel ist. Höhe in der Navigation
ist auf 26 px begrenzt.
---
## Bilder & Video
**Beibehaltene Medien (bereits im Template enthalten):**
- `assets/leistungen-video.mp4` — **Video im Leistungen-Bereich (bewusst beibehalten).**
- `assets/hero-tankklappe.jpg` — Hintergrundbild Hero (stimmungsvoll, blau eingefärbt).
- `assets/bg-radkasten.jpg` — Hintergrundbild Referenzen.
- `assets/bg-vorderlicht.jpg` — Hintergrundbild Kontakt.
Diese Hintergrundbilder sind stark gefiltert und dienen als Textur/Atmosphäre. Sie
können übernommen oder durch eigene Werkstatt-/Fahrzeugfotos ersetzt werden (gleicher
Dateiname genügt).
**Entfernt:**
- Der **Vorher/Nachher-Vergleich** (Schieberegler mit Werkstattfotos) im Referenzen-
Bereich wurde entfernt und durch eine **Foto-Galerie mit leeren Platzhaltern** ersetzt.
**Zu befüllen — Foto-Platzhalter (Drag & Drop):**
Diese nutzen die Komponente `assets/image-slot.js`. Einfach ein Bild per Drag & Drop in
den Platzhalter ziehen (oder anklicken zum Auswählen).
| Slot-ID | Ort | Zweck |
|---|---|---|
| `profil-inhaber` | Über uns | Profilbild der Inhaberin / des Inhabers |
| `ref-1` | Referenzen | Großes Projektfoto (z. B. Vorher/Nachher) |
| `ref-2` … `ref-5` | Referenzen | Weitere Projektfotos |
---
## Rechtliches (nicht vergessen!)
Die Footer-Links **Impressum** und **Datenschutz** (`#impressum`, `#datenschutz`) sind
aktuell nur Anker. Vor dem Livegang müssen ein rechtskonformes **Impressum** und eine
**Datenschutzerklärung** ergänzt werden (Pflicht in Deutschland).
---
## Technische Struktur (Kurzüberblick)
```
template/
├─ index.html ← die Website (hier alle [[…]] ersetzen)
├─ support.js ← Framework (unverändert lassen)
├─ AUSFUELLEN.md ← diese Anleitung
└─ assets/
├─ logo-placeholder.svg ← Logo ersetzen
├─ leistungen-video.mp4 ← Video (beibehalten)
├─ hero-tankklappe.jpg ← Hero-Hintergrund
├─ bg-radkasten.jpg ← Referenzen-Hintergrund
├─ bg-vorderlicht.jpg ← Kontakt-Hintergrund
├─ image-slot.js ← Foto-Platzhalter-Komponente
├─ benefit01–03.svg ← Icons Hero-Benefits
└─ review.svg ← Sterne-Grafik Google-Badge
```
Die Farbe des Designs (Akzentfarbe) lässt sich oben im `<script>`-Datenblock bzw. über
`--accent` steuern (Voreinstellung Blau `#2FA4F0`).

1
assets/benefit01.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" viewBox="0 0 16 20" fill="none"><path d="M7.71066 0C7.65321 1.65544e-09 7.59635 0.0115548 7.54346 0.0339771C7.49056 0.0563994 7.44272 0.089231 7.40277 0.130519C7.40277 0.130519 5.56809 2.02454 3.72983 4.43095C1.89158 6.83736 0 9.70401 0 11.9776C0 16.2401 3.45671 19.705 7.71066 19.705C11.9646 19.705 15.4213 16.2401 15.4213 11.9776C15.4213 9.70401 13.5297 6.83736 11.6915 4.43095C9.85324 2.02454 8.01855 0.130519 8.01855 0.130519C7.97861 0.089231 7.93076 0.0563994 7.87787 0.0339771C7.82498 0.0115548 7.76811 1.65544e-09 7.71066 0ZM7.71066 1.08766C7.98019 1.36927 9.3629 2.79246 11.0121 4.95136C12.815 7.3115 14.5646 10.2199 14.5646 11.9776C14.5646 15.7781 11.5005 18.8483 7.71066 18.8483C3.92082 18.8483 0.85674 15.7781 0.85674 11.9776C0.85674 10.2199 2.60631 7.3115 4.4092 4.95136C6.05842 2.79246 7.44113 1.36927 7.71066 1.08766ZM12.8511 11.9944C12.8511 13.5254 12.0352 14.9385 10.7093 15.7041L11.1376 16.4471C12.7275 15.5292 13.7078 13.8302 13.7078 11.9944H12.8511Z" fill="#F1F0EB"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
assets/benefit02.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="19" viewBox="0 0 24 19" fill="none"><path d="M13.1574 2.13522H2.0837C1.97317 2.13522 1.86717 2.17913 1.78902 2.25728C1.71087 2.33544 1.66696 2.44144 1.66696 2.55196V8.38632C1.66696 8.49685 1.71087 8.60285 1.78902 8.681C1.86717 8.75916 1.97317 8.80306 2.0837 8.80306H20.2884C20.3744 8.80307 20.4583 8.77648 20.5286 8.72693C20.5989 8.67738 20.6521 8.6073 20.681 8.52631C20.7099 8.44531 20.713 8.35736 20.6899 8.27452C20.6668 8.19168 20.6187 8.11801 20.5521 8.0636L13.4212 2.22924C13.3467 2.16853 13.2535 2.13532 13.1574 2.13522ZM2.50044 7.96958V2.9687H13.0085L19.1208 7.96958H2.50044ZM19.17 10.8868C19.17 10.9973 19.1261 11.1033 19.048 11.1814C18.9698 11.2596 18.8638 11.3035 18.7533 11.3035H16.2529C16.1423 11.3035 16.0363 11.2596 15.9582 11.1814C15.88 11.1033 15.8361 10.9973 15.8361 10.8868C15.8361 10.7762 15.88 10.6702 15.9582 10.5921C16.0363 10.5139 16.1423 10.47 16.2529 10.47H18.7533C18.8638 10.47 18.9698 10.5139 19.048 10.5921C19.1261 10.6702 19.17 10.7762 19.17 10.8868ZM23.1844 8.0636L14.0161 0.562278C13.9417 0.501557 13.8485 0.468354 13.7524 0.468262H0.41674C0.306214 0.468262 0.200214 0.512168 0.12206 0.590322C0.0439065 0.668476 0 0.774475 0 0.885002V18.3881C0 18.4986 0.0439065 18.6046 0.12206 18.6828C0.200214 18.7609 0.306214 18.8048 0.41674 18.8048H17.0863C17.1969 18.8048 17.3029 18.7609 17.381 18.6828C17.4592 18.6046 17.5031 18.4986 17.5031 18.3881C17.5047 16.9517 18.0761 15.5747 19.0917 14.5591C20.1073 13.5434 21.4844 12.9721 22.9207 12.9705C23.0312 12.9705 23.1372 12.9266 23.2154 12.8484C23.2935 12.7702 23.3374 12.6642 23.3374 12.5537V8.38632C23.3374 8.32456 23.3237 8.26357 23.2972 8.20776C23.2707 8.15195 23.2322 8.10272 23.1844 8.0636ZM0.83348 17.9713V17.1379H16.802C16.7436 17.4127 16.704 17.6912 16.6834 17.9713H0.83348ZM22.504 12.1508C21.2856 12.234 20.1181 12.6715 19.1451 13.4094C18.1721 14.1474 17.4359 15.1536 17.0272 16.3044H0.83348V1.30174H13.6035L22.504 8.58369V12.1508Z" fill="#F1F0EB"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

1
assets/benefit03.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="23" viewBox="0 0 15 23" fill="none"><path d="M7.24018 0.361328C3.30144 0.361328 0.0871235 3.48197 0.0871146 7.33451C0.087119 9.23873 0.874371 10.9609 2.14432 12.2191L0.0137677 20.6889C-0.00779518 20.7737 -0.00396177 20.8631 0.024792 20.9458C0.0535458 21.0285 0.105954 21.1009 0.175513 21.1541C0.245073 21.2073 0.32872 21.2389 0.416075 21.245C0.503431 21.2511 0.590648 21.2314 0.666904 21.1883L3.3004 19.7074L4.84593 22.313C4.89098 22.3895 4.95777 22.4508 5.0378 22.4892C5.11783 22.5275 5.20747 22.5412 5.2953 22.5285C5.38314 22.5158 5.4652 22.4772 5.53103 22.4176C5.59686 22.3581 5.64348 22.2803 5.66497 22.1942L7.19652 16.1099L8.72807 22.1942C8.74955 22.2803 8.79617 22.3581 8.862 22.4176C8.92784 22.4772 9.00989 22.5158 9.09773 22.5285C9.18557 22.5412 9.27521 22.5275 9.35523 22.4892C9.43526 22.4508 9.50205 22.3895 9.54711 22.313L11.0926 19.7074L13.7261 21.1883C13.8024 21.2314 13.8896 21.2511 13.977 21.245C14.0643 21.2389 14.148 21.2073 14.2175 21.1541C14.2871 21.1009 14.3395 21.0285 14.3682 20.9458C14.397 20.8631 14.4008 20.7737 14.3793 20.6889L12.2662 12.2889C13.5777 11.0252 14.3932 9.27391 14.3932 7.33451C14.3932 3.48197 11.1789 0.361328 7.24018 0.361328ZM7.24018 1.25546C10.7087 1.25546 13.4991 3.97857 13.4991 7.33451C13.4991 10.6904 10.7087 13.4136 7.24018 13.4136C3.77169 13.4136 0.981255 10.6904 0.981247 7.33451C0.981255 3.97857 3.77169 1.25546 7.24018 1.25546ZM7.21398 4.51415C7.14556 4.51789 7.07891 4.53665 7.01902 4.56901C6.95913 4.60138 6.90757 4.64651 6.8682 4.70101L5.94438 5.9776L4.40934 6.44038C4.34034 6.46141 4.27752 6.49817 4.22611 6.54759C4.17471 6.59701 4.13621 6.65766 4.11382 6.72448C4.09143 6.7913 4.08581 6.86235 4.09742 6.93171C4.10903 7.00107 4.13754 7.06673 4.18057 7.12321L5.14106 8.37534L5.11836 9.93658C5.11769 9.99605 5.12942 10.055 5.15283 10.11C5.17624 10.1649 5.21085 10.2147 5.25458 10.2563C5.2983 10.2979 5.35024 10.3305 5.40726 10.3521C5.46429 10.3737 5.52521 10.3838 5.58638 10.3819C5.63163 10.3802 5.67636 10.372 5.7191 10.3575L7.24018 9.8545L8.7595 10.3575C8.82812 10.3803 8.90139 10.3869 8.97316 10.3766C9.04493 10.3662 9.1131 10.3393 9.17195 10.2981C9.2308 10.2569 9.27861 10.2025 9.31138 10.1396C9.34414 10.0767 9.3609 10.0071 9.36025 9.93658L9.33929 8.37534L10.2998 7.12321C10.3428 7.06662 10.3712 7.00084 10.3827 6.93139C10.3942 6.86194 10.3885 6.79081 10.3659 6.72397C10.3433 6.65713 10.3046 6.5965 10.253 6.54717C10.2014 6.49783 10.1384 6.46122 10.0693 6.44038L8.53597 5.9776L7.6104 4.70101C7.56611 4.63969 7.50647 4.59036 7.43711 4.55766C7.36774 4.52497 7.29095 4.50999 7.21398 4.51415ZM7.24018 5.71914L7.88458 6.60629C7.94199 6.68591 8.02488 6.74485 8.12034 6.77393L9.18911 7.09701L8.51851 7.96669C8.45863 8.0442 8.42672 8.13872 8.4277 8.23563L8.44516 9.32186L7.38687 8.97259C7.29177 8.94101 7.18858 8.94101 7.09348 8.97259L6.03519 9.32186L6.05266 8.23563C6.05313 8.13853 6.0206 8.04398 5.9601 7.96669L5.2895 7.09701L6.36001 6.77393C6.45483 6.74452 6.53706 6.68561 6.59402 6.60629L7.24018 5.71914ZM2.90398 12.867C3.98301 13.6721 5.2997 14.1829 6.73373 14.2815L5.06247 20.9229L3.84701 18.8762C3.78757 18.7759 3.69132 18.7028 3.57878 18.6725C3.46624 18.6421 3.3463 18.6569 3.24452 18.7137L1.13318 19.8995L2.90398 12.867ZM11.503 12.9211L13.2599 19.8995L11.1485 18.7137C11.0467 18.6569 10.9268 18.6421 10.8142 18.6725C10.7017 18.7028 10.6055 18.7759 10.546 18.8762L9.33056 20.9229L7.66105 14.2867C9.0956 14.2048 10.4162 13.7109 11.503 12.9211Z" fill="#F1F0EB"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
assets/bg-radkasten.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
assets/bg-vorderlicht.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

229
assets/fonts.css Normal file
View File

@@ -0,0 +1,229 @@
/* Self-hosted Google Fonts (Archivo, Source Serif 4) — DSGVO-konform, identisch zu fonts.googleapis.com. Nicht manuell editieren. */
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 800;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 900;
font-stretch: 100%;
font-display: swap;
src: url(fonts/archivo-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(fonts/source-serif-4-500-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(fonts/source-serif-4-500-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(fonts/source-serif-4-500-italic-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(fonts/source-serif-4-500-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/source-serif-4-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(fonts/source-serif-4-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/source-serif-4-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(fonts/source-serif-4-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/source-serif-4-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(fonts/source-serif-4-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/source-serif-4-400-normal-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(fonts/source-serif-4-400-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

BIN
assets/fonts/archivo-400-normal-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/archivo-400-normal-latin.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/source-serif-4-400-normal-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/source-serif-4-400-normal-latin.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/source-serif-4-500-italic-latin-ext.woff2 Normal file
View File

Binary file not shown.

BIN
assets/fonts/source-serif-4-500-italic-latin.woff2 Normal file
View File

Binary file not shown.

BIN
assets/hero-tankklappe.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

1197
assets/image-slot.js Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
assets/leistungen-video.mp4 Normal file
View File

Binary file not shown.

5
assets/logo-placeholder.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 48" role="img" aria-label="Logo-Platzhalter">
<rect x="1" y="1" width="258" height="46" rx="8" fill="none" stroke="#f0f0ec" stroke-opacity="0.35" stroke-width="1.5" stroke-dasharray="6 5"/>
<text x="130" y="25" text-anchor="middle" font-family="Archivo, system-ui, sans-serif" font-weight="800" font-size="20" letter-spacing="1" fill="#f0f0ec">IHR&#160;LOGO</text>
<text x="130" y="39" text-anchor="middle" font-family="Archivo, system-ui, sans-serif" font-weight="600" font-size="8" letter-spacing="2" fill="#f0f0ec" fill-opacity="0.55">HIER EIGENES LOGO EINSETZEN</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 643 B

1
assets/review.svg Normal file
View File

@@ -0,0 +1 @@
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" width="70" height="11" viewBox="0 0 70 11" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9091 5.45453C10.9091 8.46698 8.46701 10.9091 5.45454 10.9091C2.44208 10.9091 0 8.46698 0 5.45453C0 2.44208 2.44208 0 5.45454 0C8.46701 0 10.9091 2.44208 10.9091 5.45453ZM26.3637 5.45453C26.3637 8.46698 23.9216 10.9091 20.9091 10.9091C17.8967 10.9091 15.4546 8.46698 15.4546 5.45453C15.4546 2.44208 17.8967 0 20.9091 0C23.9216 0 26.3637 2.44208 26.3637 5.45453ZM36.3637 10.9091C39.3762 10.9091 41.8183 8.46698 41.8183 5.45453C41.8183 2.44208 39.3762 0 36.3637 0C33.3513 0 30.9092 2.44208 30.9092 5.45453C30.9092 8.46698 33.3513 10.9091 36.3637 10.9091ZM56.3637 5.45453C56.3637 8.46698 53.9216 10.9091 50.9091 10.9091C47.8967 10.9091 45.4546 8.46698 45.4546 5.45453C45.4546 2.44208 47.8967 0 50.9091 0C53.9216 0 56.3637 2.44208 56.3637 5.45453ZM64.5454 10.9091C67.5578 10.9091 69.9999 8.46698 69.9999 5.45453C69.9999 2.44208 67.5578 0 64.5454 0C61.5329 0 59.0908 2.44208 59.0908 5.45453C59.0908 8.46698 61.5329 10.9091 64.5454 10.9091Z" fill="#F2BD3F"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

620
index.html Normal file
View File

@@ -0,0 +1,620 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link href="assets/fonts.css" rel="stylesheet">
<link href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css" rel="stylesheet">
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0d0f12; font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #f0f0ec; text-decoration: none; }
a:hover { color: var(--accent, #F0912F); }
@keyframes lw-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes lw-fadein { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1080px) {
.lw-review { display: none !important; }
}
@media (max-width: 860px) {
.lw-navlinks { display: none !important; }
.lw-burger { display: inline-flex !important; }
.lw-benefits { grid-template-columns: repeat(2, 1fr) !important; row-gap: 26px !important; }
}
@media (max-width: 520px) {
.lw-benefits { grid-template-columns: 1fr !important; }
}
@media (max-width: 980px) {
.lw-services { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
.lw-services { grid-template-columns: 1fr !important; }
}
@media (max-width: 980px) {
.lw-refs { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 200px !important; }
}
@media (max-width: 620px) {
.lw-refs { grid-template-columns: 1fr !important; grid-auto-rows: 220px !important; }
.lw-ref-wide { grid-column: auto !important; grid-row: auto !important; }
}
@media (max-width: 860px) {
.lw-about { grid-template-columns: 1fr !important; }
.lw-contact { grid-template-columns: 1fr !important; }
.lw-footer-cols { grid-template-columns: repeat(2, 1fr) !important; }
.lw-footer-bottom { flex-direction: column !important; align-items: flex-start !important; }
.lw-footer-bottom > div:last-child { text-align: left !important; }
.lw-footer-bottom > div:last-child > div { justify-content: flex-start !important; }
}
</style>
</helmet>
<div ref="{{ rootRef }}" style="width: 100%; --accent: #F0912F; background: #0d0f12;">
<!-- HERO -->
<div style="position: relative; min-height: 100vh; overflow: hidden;">
<!-- BACKGROUND -->
<div style="position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 78% 12%, #1c2530 0%, #12161b 42%, #0a0c0f 100%);"></div>
<div style="position: absolute; inset: 0; z-index: 1; filter: hue-rotate(85deg) saturate(1.15);">
<img src="assets/hero-tankklappe.jpg" alt="" style="display: block; width: 100%; height: 100%; object-fit: cover;">
</div>
<!-- blue tint -->
<div style="position: absolute; inset: 0; z-index: 2; pointer-events: none; background: rgba(18,60,120,0.32); mix-blend-mode: multiply;"></div>
<!-- legibility overlay (click-through) -->
<div style="position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(9,11,14,0.82) 0%, rgba(9,11,14,0.34) 30%, rgba(9,11,14,0.30) 55%, rgba(9,11,14,0.86) 100%);"></div>
<div style="position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(90% 70% at 22% 42%, rgba(9,11,14,0.55) 0%, rgba(9,11,14,0) 60%);"></div>
<!-- thin accent glow top -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4; background: linear-gradient(90deg, transparent, var(--accent, #F0912F), transparent); opacity: 0.5;"></div>
<!-- NAV -->
<nav ref="{{ navRef }}" style="position: fixed; top: 0; left: 0; right: 0; z-index: 40; transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, padding .35s ease; padding: 22px clamp(20px, 4vw, 56px); border-bottom: 1px solid transparent;">
<div style="max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;">
<!-- left links -->
<div class="lw-navlinks" style="display: flex; gap: 34px; align-items: center;">
<a href="#services" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Services</a>
<a href="#referenzen" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Referenzen</a>
</div>
<!-- logo — PLATZHALTER: assets/logo-placeholder.svg durch Ihr Logo ersetzen -->
<a href="#top" style="display: flex; align-items: center; justify-self: center;">
<img src="assets/logo-placeholder.svg" alt="Lack & Design Meisterbetrieb (Inh. Serkan Özmen)" style="height: 26px; width: auto; display: block;">
</a>
<!-- right links -->
<div class="lw-navlinks" style="display: flex; gap: 34px; align-items: center; justify-content: flex-end;">
<a href="#ueber-uns" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Über uns</a>
<a href="#kontakt" style="font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;">Kontakt</a>
</div>
<!-- mobile menu button -->
<button class="lw-burger" aria-label="Menü" style="display: none; grid-column: 3; justify-self: end; background: transparent; border: 1.5px solid rgba(255,255,255,.28); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: #f4f3ef; align-items: center; gap: 8px;">
<span style="display: block; width: 18px; height: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;"></span>
</button>
</div>
</nav>
<!-- HERO CONTENT -->
<div style="position: relative; z-index: 10; display: flex; flex-direction: column; min-height: 100vh; padding: clamp(120px, 16vh, 190px) clamp(20px, 4vw, 56px) 0;">
<div style="max-width: 1320px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; flex: 1;">
<!-- spacer -->
<div style="flex: 1; min-height: 40px;"></div>
<!-- headline block -->
<div style="max-width: 720px; margin: 0 auto; text-align: center; animation: lw-fadein .7s ease both;">
<h1 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.08; letter-spacing: -0.005em; color: #f5f4f0; font-size: clamp(36px, 4.8vw, 64px); margin-bottom: 22px;">
<span style="display: block;">Rein mit
<span ref="{{ wordSlotRef }}" style="display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; text-align: left;">
<span ref="{{ wordRef }}" style="display: inline-block; color: var(--accent, #F0912F); font-style: italic; will-change: transform, opacity;">Kratzer</span>
</span>
</span>
<span style="display: block;">Raus wie neu.</span>
</h1>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.5; color: #c5c9ce; max-width: 560px; margin: 0 auto; font-weight: 500;">
Wir reparieren alles! Mit Originalteilen und neuester Technik zu fairen Preisen. Als wäre nichts passiert.
</p>
</div>
<!-- spacer -->
<div style="flex: 1; min-height: 40px;"></div>
<!-- BENEFIT STRIP -->
<div class="lw-benefits" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 48px); padding: 28px 0 46px;">
<div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Fahrzeug-Reparatur wie in der Vertragswerkstatt — nur günstiger</p>
</div>
<div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
<img src="assets/benefit01.svg" alt="" width="22" height="27" style="opacity: .95;">
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Wir nutzen Premium-Lacke</p>
</div>
<div style="display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;">
<img src="assets/benefit02.svg" alt="" width="30" height="24" style="opacity: .95;">
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Wir verbauen nur Originalteile</p>
</div>
<div style="display: flex; flex-direction: column; gap: 14px;">
<!-- Google badge -->
<a href="{{ googleUrl }}" target="_blank" rel="noopener" style="display: inline-flex; flex-direction: column; gap: 3px; align-self: flex-start; background: #000; border: 1px solid rgba(255,255,255,.12); border-radius: 44px; padding: 11px 20px; transition: transform .3s ease, box-shadow .3s ease;" style-hover="transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,.4);">
<span style="color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .01em;">Lack & Design Meisterbetrieb (Inh. Serkan Özmen)</span>
<span style="display: inline-flex; align-items: center; gap: 7px;">
<span style="color: #DBDED9; font-weight: 600; font-size: 15px;">{{ ratingLabel }}</span>
<img src="assets/review.svg" alt="Bewertung" width="66" height="10">
<span style="color: #DBDED9; font-weight: 300; font-size: 15px;">{{ countLabel }}</span>
</span>
</a>
<img src="assets/benefit03.svg" alt="" width="20" height="30" style="opacity: .95;">
<p style="font-size: 15.5px; line-height: 1.4; color: #e7e9ec; font-weight: 600;">Wir arbeiten mit der gleichen Genauigkeit</p>
</div>
</div>
</div>
</div>
</div>
<!-- LEISTUNGEN SECTION -->
<section id="services" data-screen-label="Leistungen" style="position: relative; overflow: hidden; background: #0D2A46; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
<svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;">
<path d="M-100,780 C300,620 500,930 900,760 C1180,640 1350,700 1540,560" fill="none" stroke="#164a7d" stroke-width="150" stroke-linecap="round" opacity="0.75"></path>
<path d="M-120,320 C260,480 620,120 980,300 C1240,430 1380,320 1560,400" fill="none" stroke="#123a63" stroke-width="190" stroke-linecap="round" opacity="0.8"></path>
<path d="M-80,90 C380,220 760,-40 1120,120 C1330,215 1450,140 1560,190" fill="none" stroke="#1d5c99" stroke-width="110" stroke-linecap="round" opacity="0.55"></path>
<path d="M-100,560 C340,420 700,660 1080,500 C1300,410 1420,470 1560,410" fill="none" stroke="#0f3154" stroke-width="230" stroke-linecap="round" opacity="0.9"></path>
</svg>
<div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,42,70,.45) 0%, rgba(13,42,70,.10) 40%, rgba(13,42,70,.45) 100%); pointer-events: none;"></div>
<div style="position: relative; max-width: 1320px; margin: 0 auto;">
<div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);">
<span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Leistungen</span>
<h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Alles rund um den Lack – aus einer Hand</h2>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ob Neuwagen, Alltagsauto oder Klassiker: Wir bringen jede Oberfläche zurück in Bestform. Präzise vorbereitet, sauber lackiert, perfekt finiert.</p>
</div>
<div class="lw-services" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px);">
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Lackierungen aller Art</h3>
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Vom Kotflügel bis zur Komplettlackierung – markenunabhängig, farbtongenau und in dauerhafter Qualität.</p>
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Uni · Metallic · Perleffekt</span>
</div>
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Smart Repair</h3>
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Kleine Kratzer, Steinschläge und Parkdellen punktgenau beseitigt – schnell, günstig und ohne sichtbaren Übergang.</p>
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Spot-Repair · Same Day</span>
</div>
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Oldtimer &amp; Klassiker</h3>
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Restaurierung mit Fingerspitzengefühl: originalgetreue Farbtöne und ein Finish, das dem Wert Ihres Fahrzeugs gerecht wird.</p>
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Restauration · Karosserie</span>
</div>
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Lackaufbereitung &amp; Politur</h3>
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Professionelles Polieren, Versiegeln und Aufbereiten für tiefen Glanz und langanhaltenden Schutz Ihres Lacks.</p>
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Politur · Versiegelung</span>
</div>
<div style="background: #F1F0EB; border-radius: 24px; padding: 34px 30px; display: flex; flex-direction: column; gap: 12px; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #0D2A46;">Felgen &amp; Motorrad</h3>
<p style="font-size: 15.5px; line-height: 1.55; color: #45535f; font-weight: 500; flex: 1;">Felgenaufbereitung und Motorradlackierung im gleichen hohen Standard – für den perfekten Auftritt bis ins Detail.</p>
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1e7fc2;">Felgen · Zweirad</span>
</div>
<!-- LEISTUNGS-VIDEO — bewusst beibehalten (assets/leistungen-video.mp4) -->
<div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 4px 14px rgba(0,0,0,.25);">
<video ref="{{ videoRef }}" src="assets/leistungen-video.mp4" autoplay muted loop playsinline style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;"></video>
<div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,20,34,0) 45%, rgba(8,20,34,.78) 100%); pointer-events: none;"></div>
<div style="position: absolute; left: 30px; right: 30px; bottom: 26px; display: flex; flex-direction: column; gap: 8px;">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 23px; color: #f5f4f0;">Design- &amp; Sonderlackierung</h3>
<p style="font-size: 14.5px; line-height: 1.5; color: #d8e2ec; font-weight: 500;">Individuelle Farbwünsche, Sondereffekte und Akzente – wir setzen Ihre Ideen sauber und hochwertig um.</p>
<span style="font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9FD1F5;">Custom · Effektlack</span>
</div>
</div>
</div>
</div>
</section>
<!-- REFERENZEN SECTION — Vorher/Nachher-Vergleich entfernt, durch Foto-Galerie ersetzt -->
<section id="referenzen" data-screen-label="Referenzen" style="position: relative; overflow: hidden; background: #0D2A46; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
<img src="assets/bg-radkasten.jpg" alt="" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: hue-rotate(85deg) saturate(1.2); pointer-events: none;">
<div style="position: absolute; inset: 0; background: rgba(18,60,120,0.38); mix-blend-mode: multiply; pointer-events: none;"></div>
<div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,30,.8) 0%, rgba(10,18,30,.45) 45%, rgba(10,18,30,.8) 100%); pointer-events: none;"></div>
<div style="position: relative; max-width: 1320px; margin: 0 auto;">
<div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);">
<span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Referenzen</span>
<h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Echte Arbeiten aus unserer Werkstatt</h2>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Ein Auszug aus unseren Projekten. Ziehen Sie eigene Fotos (z.&nbsp;B. Vorher/Nachher) einfach per Drag &amp; Drop in die Platzhalter.</p>
</div>
<!-- Foto-Galerie — jeder Platzhalter ist per Drag & Drop mit einem eigenen Foto befüllbar -->
<div class="lw-refs" style="display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: clamp(14px, 1.8vw, 22px);">
<div class="lw-ref-wide" style="position: relative; grid-column: span 2; grid-row: span 2; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.45); background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.3);">
<x-import component-from-global-scope="image-slot" from="./assets/image-slot.js" id="ref-1" shape="rect" fit="cover" placeholder="Projektfoto 1 hier ablegen" hint-size="100%,100%" style="display:block;width:100%;height:100%;"></x-import>
</div>
<div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.45); background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.3);">
<x-import component-from-global-scope="image-slot" from="./assets/image-slot.js" id="ref-2" shape="rect" fit="cover" placeholder="Foto 2" hint-size="100%,100%" style="display:block;width:100%;height:100%;"></x-import>
</div>
<div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.45); background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.3);">
<x-import component-from-global-scope="image-slot" from="./assets/image-slot.js" id="ref-3" shape="rect" fit="cover" placeholder="Foto 3" hint-size="100%,100%" style="display:block;width:100%;height:100%;"></x-import>
</div>
<div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.45); background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.3);">
<x-import component-from-global-scope="image-slot" from="./assets/image-slot.js" id="ref-4" shape="rect" fit="cover" placeholder="Foto 4" hint-size="100%,100%" style="display:block;width:100%;height:100%;"></x-import>
</div>
<div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.45); background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.3);">
<x-import component-from-global-scope="image-slot" from="./assets/image-slot.js" id="ref-5" shape="rect" fit="cover" placeholder="Foto 5" hint-size="100%,100%" style="display:block;width:100%;height:100%;"></x-import>
</div>
</div>
<p style="margin-top: clamp(28px, 4vh, 44px); text-align: center; font-size: 15px; color: #c9d6e2; font-weight: 500;">Mehr laufende Projekte gibt es auf unserer <a href="" target="_blank" rel="noopener" style="color: #9FD1F5; font-weight: 700;">Facebook-Seite</a>.</p>
</div>
</section>
<!-- ÜBER UNS SECTION -->
<section id="ueber-uns" data-screen-label="Über uns" style="position: relative; overflow: hidden; background: #0D2A46; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
<svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" aria-hidden="true" style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;">
<path d="M-100,120 C340,260 720,-20 1100,140 C1320,230 1450,160 1560,210" fill="none" stroke="#1d5c99" stroke-width="120" stroke-linecap="round" opacity="0.5"></path>
<path d="M-120,480 C280,340 640,620 1020,460 C1280,350 1400,420 1560,360" fill="none" stroke="#123a63" stroke-width="210" stroke-linecap="round" opacity="0.8"></path>
<path d="M-100,800 C320,660 560,940 960,780 C1220,670 1380,730 1560,610" fill="none" stroke="#164a7d" stroke-width="150" stroke-linecap="round" opacity="0.7"></path>
</svg>
<div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,42,70,.45) 0%, rgba(13,42,70,.10) 40%, rgba(13,42,70,.45) 100%); pointer-events: none;"></div>
<div style="position: relative; max-width: 1320px; margin: 0 auto;">
<div style="max-width: 900px; margin-bottom: clamp(50px, 8vh, 90px);">
<span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Über uns</span>
<h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.12; color: #f5f4f0; font-size: clamp(32px, 4vw, 58px);">Wir kombinieren handwerkliches Wissen und viel Erfahrung mit modernster Technik.</h2>
</div>
<!-- Reihe 1: Vorstellung + Profilbild-Platzhalter -->
<div class="lw-about" style="display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(50px, 8vh, 90px);">
<div style="display: flex; flex-direction: column; gap: 16px;">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #f5f4f0;">Hallo, ich bin<br>Serkan Özmen,</h3>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Lack- und Karosserie-Experte und Inhaber der Lack & Design Meisterbetrieb (Inh. Serkan Özmen) in Puchheim.</p>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Mit meinem Werkstatt-Team aus professionellen Fachkräften erfülle ich Ihre individuellen Wünsche zum bestmöglichen Preis — von der Smart-Repair bis zur kompletten Restauration.</p>
</div>
<div style="justify-self: center; width: min(340px, 100%);">
<div style="position: relative; width: 100%; aspect-ratio: 4/5; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.4); background: rgba(255,255,255,.05); border: 1.5px dashed rgba(255,255,255,.3);">
<x-import component-from-global-scope="image-slot" from="./assets/image-slot.js" id="profil-inhaber" shape="rect" fit="cover" placeholder="Profilbild der Inhaberin / des Inhabers hier ablegen" hint-size="100%,100%" style="display:block;width:100%;height:100%;"></x-import>
</div>
</div>
</div>
<!-- Reihe 2: Kundenstimmen + Philosophie -->
<div class="lw-about" style="display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 64px); align-items: center;">
<div style="position: relative; border-radius: 24px; padding: 28px; background: rgba(10,20,34,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: 2px 6px 24px rgba(0,0,0,.35);">
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 16px;">
<span style="display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent, #2FA4F0); color: #0d0f12; font-weight: 800; font-size: 17px; flex-shrink: 0;">{{ reviewInitial }}</span>
<div style="display: flex; flex-direction: column; gap: 3px; min-width: 0;">
<span style="color: #f4f3ef; font-weight: 700; font-size: 15px;">{{ reviewAuthor }}</span>
<span style="color: #F2BD3F; font-size: 14px; letter-spacing: 2px; line-height: 1;">★★★★★</span>
</div>
</div>
<p ref="{{ reviewTextRef }}" style="color: #cdd6e0; font-size: 15px; line-height: 1.6; font-weight: 500; transition: opacity .4s ease;">{{ reviewText }}</p>
<span style="display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); color: #8b9cae; font-size: 12.5px; font-weight: 600;">{{ reviewMeta }}</span>
</div>
<div style="display: flex; flex-direction: column; gap: 16px;">
<h3 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: #f5f4f0;">Meine Philosophie</h3>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Für Sie – meine Kunden – soll meisterhafte Arbeit bezahlbar sein. Unser Service sieht aus wie aus der Vertragswerkstatt, hat die gleiche Qualität, ist aber deutlich günstiger.</p>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Es ist für mich oberstes Gesetz, dass Sie nur 1A-Qualität bekommen, statt billiger „Pinselarbeiten". Mit hastig erledigten, minderwertigen Flickarbeiten kann ich nicht dienen.</p>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: #c9d6e2; font-weight: 500;">Mein Credo: Glückliche Kunden kommen wieder. Mein Team und ich sind unheimlich stolz auf Ihre Zufriedenheit und begeisterten Bewertungen.</p>
</div>
</div>
</div>
</section>
<!-- KONTAKT SECTION -->
<section id="kontakt" data-screen-label="Kontakt &amp; Anfahrt" style="position: relative; overflow: hidden; background: #10151b; padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);">
<img src="assets/bg-vorderlicht.jpg" alt="" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: hue-rotate(85deg) saturate(1.2); pointer-events: none;">
<div style="position: absolute; inset: 0; background: rgba(18,60,120,0.38); mix-blend-mode: multiply; pointer-events: none;"></div>
<div style="position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,30,.88) 0%, rgba(10,18,30,.55) 45%, rgba(10,18,30,.88) 100%); pointer-events: none;"></div>
<div style="position: relative; max-width: 1320px; margin: 0 auto;">
<div style="max-width: 760px; margin-bottom: clamp(40px, 6vh, 64px);">
<span style="display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9FD1F5; margin-bottom: 16px;">Kontakt &amp; Anfahrt</span>
<h2 style="font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; line-height: 1.1; color: #f5f4f0; font-size: clamp(30px, 3.6vw, 52px); margin-bottom: 18px;">Sprechen wir über Ihr Fahrzeug</h2>
<p style="font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: #c9d6e2; font-weight: 500;">Rufen Sie an, schreiben Sie uns oder kommen Sie direkt vorbei – wir beraten Sie gern und unverbindlich.</p>
</div>
<div class="lw-contact" style="display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 3vw, 40px); align-items: stretch;">
<!-- Kontakt-Infos -->
<div style="display: flex; flex-direction: column; gap: 18px; border-radius: 24px; padding: clamp(26px, 3vw, 40px); background: rgba(10,20,34,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); box-shadow: 2px 6px 24px rgba(0,0,0,.35);">
<div style="display: flex; flex-direction: column; gap: 4px;">
<span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">Adresse</span>
<p style="font-size: 16px; line-height: 1.5; color: #e7ecf1; font-weight: 600;">Lack & Design Meisterbetrieb (Inh. Serkan Özmen)<br>Boschstr. 14, 82178 Puchheim</p>
</div>
<div style="display: flex; flex-direction: column; gap: 4px;">
<span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">Telefon</span>
<p style="font-size: 16px; line-height: 1.5; color: #e7ecf1; font-weight: 600;"><a href="tel:tel:+498932606613" style="color: #e7ecf1;">089 32606613</a><br><span style="font-weight: 500; color: #b8c4d0;">Fax: </span></p>
</div>
<div style="display: flex; flex-direction: column; gap: 4px;">
<span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">E-Mail</span>
<p style="font-size: 16px; line-height: 1.5; font-weight: 600;"><a href="mailto:info@lackiererei-puchheim.de" style="color: #e7ecf1;">info@lackiererei-puchheim.de</a></p>
</div>
<div style="display: flex; flex-direction: column; gap: 4px;">
<span style="font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9FD1F5;">Öffnungszeiten</span>
<p style="font-size: 16px; line-height: 1.6; color: #e7ecf1; font-weight: 600;">Mo–Fr<br><span style="font-weight: 500; color: #b8c4d0;">08:00–18:00</span><br>Sa<br><span style="font-weight: 500; color: #b8c4d0;">08:00–16:00</span></p>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px;">
<a href="tel:tel:+498932606613" style="display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #0d0f12; background: var(--accent, #2FA4F0); padding: 13px 22px; border-radius: 44px; transition: transform .2s ease, box-shadow .2s ease;" style-hover="transform: translateY(-2px); box-shadow: 0 10px 26px rgba(47,164,240,.4);">Jetzt anrufen</a>
<a href="mailto:info@lackiererei-puchheim.de" style="display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #f4f3ef; padding: 13px 22px; border-radius: 44px; border: 1.5px solid rgba(255,255,255,.3); transition: border-color .2s ease, background .2s ease;" style-hover="border-color: var(--accent, #2FA4F0); background: rgba(255,255,255,.05);">E-Mail schreiben</a>
</div>
</div>
<!-- Karte -->
<div style="position: relative; border-radius: 24px; overflow: hidden; box-shadow: 2px 6px 24px rgba(0,0,0,.4); min-height: 420px; background: #0a0e13;">
<div ref="{{ mapRef }}" style="position: absolute; inset: 0;"></div>
</div>
</div>
</div>
</section>
<!-- FOOTER (sticky reveal) -->
<footer data-screen-label="Footer" style="position: relative; height: 70vh; clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);">
<div style="position: relative; height: calc(100vh + 70vh); top: -100vh;">
<div style="height: 70vh; position: sticky; top: calc(100vh - 70vh);">
<div style="height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; background: linear-gradient(135deg, #0a1526 0%, #0D2A46 55%, #0a1526 100%); padding: clamp(32px, 6vh, 64px) clamp(20px, 4vw, 56px);">
<!-- Glow-Elemente -->
<div style="position: absolute; top: -120px; right: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(47,164,240,.09); filter: blur(70px); pointer-events: none;"></div>
<div style="position: absolute; bottom: -140px; left: -100px; width: 380px; height: 380px; border-radius: 50%; background: rgba(29,92,153,.12); filter: blur(70px); pointer-events: none;"></div>
<!-- Link-Spalten -->
<div class="lw-footer-cols" style="position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 80px); max-width: 1320px; width: 100%; margin: 0 auto;">
<div style="display: flex; flex-direction: column; gap: 9px;">
<h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Navigation</h3>
<a href="#top" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Start</a>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Services</a>
<a href="#referenzen" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Referenzen</a>
<a href="#ueber-uns" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Über uns</a>
<a href="#kontakt" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Kontakt</a>
</div>
<div style="display: flex; flex-direction: column; gap: 9px;">
<h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Leistungen</h3>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Lackierungen aller Art</a>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Smart Repair</a>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Oldtimer &amp; Klassiker</a>
<a href="#services" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Felgen &amp; Motorrad</a>
</div>
<div style="display: flex; flex-direction: column; gap: 9px;">
<h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Kontakt</h3>
<span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Boschstr. 14<br>82178 Puchheim</span>
<a href="tel:tel:+498932606613" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">089 32606613</a>
<a href="mailto:info@lackiererei-puchheim.de" style="font-size: 14px; color: #c9d6e2; font-weight: 500;">info@lackiererei-puchheim.de</a>
</div>
<div style="display: flex; flex-direction: column; gap: 9px;">
<h3 style="font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7f97ac; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 7px; margin-bottom: 6px;">Öffnungszeiten</h3>
<span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Mo–Fr<br>08:00–18:00</span>
<span style="font-size: 14px; color: #c9d6e2; font-weight: 500;">Sa · 08:00–16:00</span>
</div>
</div>
<!-- Untere Zeile -->
<div class="lw-footer-bottom" style="position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: 1320px; width: 100%; margin: 0 auto;">
<div style="min-width: 0;">
<img src="assets/logo-placeholder.svg" alt="Lack & Design Meisterbetrieb (Inh. Serkan Özmen)" style="width: min(46vw, 360px); height: auto; display: block; opacity: .95;">
<div style="display: flex; align-items: center; gap: 14px; margin-top: 16px;">
<span style="width: 44px; height: 2px; background: linear-gradient(90deg, #2FA4F0, transparent);"></span>
<span style="font-size: 13.5px; color: #8fa4b8; font-weight: 500;">Autolackiererei &amp; Karosserie · Puchheim</span>
</div>
</div>
<div style="text-align: right; flex-shrink: 0;">
<p style="font-size: 13px; color: #8fa4b8; font-weight: 500; margin-bottom: 12px;">© 2026 Lack & Design Meisterbetrieb (Inh. Serkan Özmen) · Alle Rechte vorbehalten</p>
<div style="display: flex; justify-content: flex-end; align-items: center; gap: 14px;">
<a href="" target="_blank" rel="noopener" aria-label="Facebook" style="width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: inline-flex; align-items: center; justify-content: center; color: #c9d6e2; font-weight: 800; font-size: 15px; transition: background .2s ease, transform .2s ease;" style-hover="background: var(--accent, #2FA4F0); color: #0a1526; transform: scale(1.1);">f</a>
<a href="#impressum" style="font-size: 13px; color: #8fa4b8; font-weight: 500;">Impressum</a>
<a href="#datenschutz" style="font-size: 13px; color: #8fa4b8; font-weight: 500;">Datenschutz</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;:{&quot;width&quot;:1440,&quot;height&quot;:900},&quot;accentColor&quot;:{&quot;editor&quot;:&quot;color&quot;,&quot;default&quot;:&quot;#2FA4F0&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Design&quot;,&quot;options&quot;:[&quot;#2FA4F0&quot;,&quot;#F0912F&quot;,&quot;#E23744&quot;,&quot;#16462C&quot;,&quot;#C9A227&quot;]},&quot;showReviewCard&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Inhalt&quot;},&quot;rotateWords&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Inhalt&quot;}}">
class Component extends DCLogic {
state = {
loading: true,
reviews: [],
idx: 0,
// 5,0 / 86 — werden nur als Text angezeigt, dürfen daher Platzhalter bleiben
rating: "5,0",
count: "86",
};
// Demo-/Fallback-Bewertungen (angezeigt, wenn /api/reviews nicht erreichbar ist, z. B. in der Vorschau)
// Durch echte Beispiel-Bewertungen ersetzen ODER über das eigene /api/reviews-Backend live laden.
DEMO = {
rating: "5,0",
user_ratings_total: "86",
reviews: [
{ author_name: "Anna K.", rating: 5, text: "Schnelle und saubere Abwicklung, das Ergebnis sieht aus wie neu. Sehr zu empfehlen!" },
{ author_name: "Michael B.", rating: 5, text: "Freundliches Team, faire Preise und top handwerkliche Qualität. Gerne wieder." },
{ author_name: "Sabine W.", rating: 5, text: "Kompetente Beratung und perfekte Lackierung. Alles pünktlich und zuverlässig erledigt." },
],
};
PLACE_ID = "";
WORDS = ["Unfall", "Delle", "Beule", "Kratzer"];
componentDidMount() {
this.applyAccent();
this.sizeWordSlot();
this.onResize = () => this.sizeWordSlot();
window.addEventListener("resize", this.onResize);
if (document.fonts && document.fonts.ready) document.fonts.ready.then(() => this.sizeWordSlot());
this.loadReviews();
if (this.props.rotateWords !== false) this.startWordRotator();
this.onScroll = () => this.updateNav();
window.addEventListener("scroll", this.onScroll, { passive: true });
this.updateNav();
this.initMap();
// Immer oben starten (kein Wiederherstellen der Scroll-Position)
if ("scrollRestoration" in history) history.scrollRestoration = "manual";
if (!location.hash) requestAnimationFrame(() => window.scrollTo(0, 0));
}
initMap() {
if (this._map || !this.mapEl) return;
if (!window.maplibregl) { setTimeout(() => this.initMap(), 250); return; }
// / — Koordinaten des eigenen Standorts eintragen.
// Vorbelegt mit der geografischen Mitte Deutschlands, damit die Karte auch ohne Eintrag funktioniert.
const LNG = 10.4515, LAT = 51.1657;
const map = new maplibregl.Map({
container: this.mapEl,
style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
center: [LNG, LAT],
zoom: 14.5,
attributionControl: { compact: true },
cooperativeGestures: true,
});
map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "bottom-right");
const el = document.createElement("div");
el.style.cssText = "width:20px;height:20px;border-radius:50%;background:#2FA4F0;border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,164,240,.3),0 4px 12px rgba(0,0,0,.5);cursor:pointer;";
const popupHtml =
'<div style="font-family:Archivo,sans-serif;padding:4px 2px;min-width:190px;">' +
'<div style="font-weight:800;font-size:14px;color:#0D2A46;margin-bottom:3px;">Lack & Design Meisterbetrieb (Inh. Serkan Özmen)</div>' +
'<div style="font-size:12.5px;color:#45535f;line-height:1.45;margin-bottom:8px;">Boschstr. 14<br>82178 Puchheim</div>' +
'<a href="https://www.google.com/maps/dir/?api=1&destination=Boschstr. 14, 82178 Puchheim" target="_blank" rel="noopener" style="display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#fff;background:#2FA4F0;padding:7px 13px;border-radius:20px;text-decoration:none;">Route planen</a>' +
"</div>";
const popup = new maplibregl.Popup({ offset: 20, closeButton: false }).setHTML(popupHtml);
new maplibregl.Marker({ element: el }).setLngLat([LNG, LAT]).setPopup(popup).addTo(map);
popup.setLngLat([LNG, LAT]).addTo(map);
this._map = map;
}
componentDidUpdate() { this.applyAccent(); }
componentWillUnmount() {
clearInterval(this._wordTimer);
clearInterval(this._revTimer);
if (this._map) { this._map.remove(); this._map = null; }
window.removeEventListener("scroll", this.onScroll);
window.removeEventListener("resize", this.onResize);
}
// fix the rotating-word slot to the widest word so "Rein mit" never shifts
sizeWordSlot() {
const slot = this.wordSlot, word = this.word;
if (!slot || !word) return;
const probe = document.createElement("span");
probe.style.cssText = "position:absolute;visibility:hidden;white-space:nowrap;";
const cs = getComputedStyle(word);
probe.style.font = cs.font;
probe.style.fontStyle = cs.fontStyle;
probe.style.letterSpacing = cs.letterSpacing;
document.body.appendChild(probe);
let max = 0;
for (const w of this.WORDS) { probe.textContent = w; max = Math.max(max, probe.getBoundingClientRect().width); }
probe.remove();
slot.style.width = Math.ceil(max + 2) + "px";
}
applyAccent() {
if (this.root) this.root.style.setProperty("--accent", this.props.accentColor || "#F0912F");
}
updateNav() {
if (!this.nav) return;
const s = window.scrollY > 30;
this.nav.style.background = s ? "rgba(11,13,16,0.92)" : "transparent";
this.nav.style.backdropFilter = s ? "blur(14px)" : "none";
this.nav.style.borderBottomColor = s ? "rgba(255,255,255,0.10)" : "transparent";
this.nav.style.paddingTop = s ? "14px" : "22px";
this.nav.style.paddingBottom = s ? "14px" : "22px";
}
async loadReviews() {
let data = null;
try {
// In der produktiven Next.js-App trifft das den Server-Route-Handler
// /api/reviews (Place ID + GOOGLE_PLACES_API_KEY bleiben server-seitig).
const res = await fetch("/api/reviews", { cache: "no-store" });
if (res.ok) {
const j = await res.json();
if (j && Array.isArray(j.reviews) && j.reviews.length) data = j;
}
} catch (e) { /* fall through to demo */ }
if (!data) data = this.DEMO;
const reviews = (data.reviews || []).filter(r => r && r.text).slice(0, 5);
this.setState({
loading: false,
reviews,
rating: data.rating || this.DEMO.rating,
count: data.user_ratings_total || this.DEMO.user_ratings_total,
}, () => { if (reviews.length > 1) this.startReviewRotator(); });
}
startReviewRotator() {
this._revTimer = setInterval(() => {
const el = this.reviewText;
const next = (this.state.idx + 1) % this.state.reviews.length;
const swap = () => this.setState({ idx: next }, () => { if (this.reviewText) this.reviewText.style.opacity = 1; });
if (el) { el.style.opacity = 0; setTimeout(swap, 380); } else { swap(); }
}, 5200);
}
startWordRotator() {
let i = this.WORDS.indexOf("Kratzer");
this._wordTimer = setInterval(() => {
const el = this.word;
if (!el) return;
i = (i + 1) % this.WORDS.length;
const next = this.WORDS[i];
el.animate(
[{ transform: "translateY(0)", opacity: 1 }, { transform: "translateY(-110%)", opacity: 0 }],
{ duration: 300, easing: "cubic-bezier(.6,0,.4,1)", fill: "forwards" }
).onfinish = () => {
el.textContent = next;
el.animate(
[{ transform: "translateY(110%)", opacity: 0 }, { transform: "translateY(0)", opacity: 1 }],
{ duration: 340, easing: "cubic-bezier(.2,.7,.3,1)", fill: "forwards" }
);
};
}, 2400);
}
renderVals() {
const st = this.state;
const r = st.reviews[st.idx] || null;
const author = r ? r.author_name : "";
const initial = author ? author.trim().charAt(0).toUpperCase() : "";
const ratingLabel = String(st.rating).replace(".", ",");
return {
rootRef: (el) => { this.root = el; },
videoRef: (el) => { if (el) { el.muted = true; el.volume = 0; } },
mapRef: (el) => { this.mapEl = el; if (el) this.initMap(); },
navRef: (el) => { this.nav = el; },
wordRef: (el) => { this.word = el; },
wordSlotRef: (el) => { this.wordSlot = el; },
reviewTextRef: (el) => { this.reviewText = el; },
dot0Ref: () => {}, dot1Ref: () => {}, dot2Ref: () => {},
showReviewCard: this.props.showReviewCard !== false,
loading: st.loading,
hasReview: !st.loading && !!r,
reviewAuthor: author,
reviewInitial: initial,
reviewText: r ? ("“" + r.text + "”") : "",
reviewMeta: "Google Bewertung",
ratingLabel: ratingLabel,
countLabel: "(" + st.count + ")",
googleUrl: "https://www.google.com/maps/place/?q=place_id:" + this.PLACE_ID,
};
}
}
</script>
</body>
</html>

1768
support.js Normal file
View File

File diff suppressed because it is too large Load Diff