# 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. `Autolackiererei Köse`.

---

## 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@autolackiererei-koese.de` in Kontakt-
> block und Footer). „Alle ersetzen" verwenden, damit keine Fundstelle übrig bleibt.

---

## Benötigte Daten (Platzhalter-Liste)

### Firma & Marke
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `Autolackiererei Köse` | Kurzer Markenname (Logo-Alt, Google-Badge, Footer) | Musterlack |
| `Autolackiererei Köse` | Vollständiger Firmenname inkl. Rechtsform | Musterlack GmbH |
| `München` | Standort/Stadt (Footer, Über-uns, Karte) | Musterstadt |
| `2026` | Jahr für den Copyright-Hinweis im Footer | 2026 |

### Inhaber / Über uns
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `Mehmet Köse` | Name der Inhaberin / des Inhabers (Über-uns-Abschnitt) | Max Mustermann |

### Kontakt & Anschrift
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `Bodenseestr. 222` | Straße + Hausnummer | Musterstr. 1 |
| `81243` | Postleitzahl | 12345 |
| `München` | Ort (siehe oben, gleicher Wert) | Musterstadt |
| `` | Telefonnummer, wie angezeigt | 01234 / 56 78 90 |
| `` | Telefonnummer im Link-Format (international, ohne Leerzeichen) | +4912345678900 |
| `` | Faxnummer (falls vorhanden) | 01234 / 56 78 91 |
| `info@autolackiererei-koese.de` | E-Mail-Adresse | info@musterlack.de |

### Öffnungszeiten
| Platzhalter | Bedeutung | Beispiel |
|---|---|---|
| `` | Erste Zeile: Tage | Montag – Freitag |
| `` | Erste Zeile: Zeiten | 09:00 – 13:00 · 14:00 – 17:00 |
| `` | Zweite Zeile: Tage | Samstag & Sonntag |
| `` | 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 |
|---|---|---|
| `4,8` | Durchschnittliche Sternebewertung | 4,8 |
| `13` | Anzahl der Bewertungen | 112 |
| `` | Google Place ID des Betriebs | ChIJ… |
| `Kevin H.` | Name Rezensent 1 (Demo/Fallback) | Sabine M. |
| `Super freundlich und ehrlich, die Lackierung ist top geworden. Gerne wieder!` | Text Rezension 1 | „Kratzer war komplett verschwunden …" |
| `Nadine W.` | Name Rezensent 2 | Thomas K. |
| `Faire Preise, schnelle Arbeit und ein einwandfreies Ergebnis. Sehr empfehlenswert.` | Text Rezension 2 | „Top Beratung, saubere Arbeit …" |
| `Stefan D.` | Name Rezensent 3 | Petra L. |
| `Kompetente Beratung und saubere Ausführung. Man fühlt sich gut aufgehoben.` | 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 |
| `Bodenseestr. 222, 81243 München` | 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`).