Automatisch erstellte Preview-Seite

AUSFUELLEN.md

@@ -0,0 +1,201 @@
+# 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. `ALT Autolackiererei Trudering`.
+
+---
+
+## 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. `alt_gmbh@t-online.de` in Kontakt-
+> block und Footer). „Alle ersetzen" verwenden, damit keine Fundstelle übrig bleibt.
+
+---
+
+## Benötigte Daten (Platzhalter-Liste)
+
+### Firma & Marke
+| Platzhalter | Bedeutung | Beispiel |
+|---|---|---|
+| `ALT Autolackiererei Trudering` | Kurzer Markenname (Logo-Alt, Google-Badge, Footer) | Musterlack |
+| `ALT Auto Lackiererei Trudering GmbH` | Vollständiger Firmenname inkl. Rechtsform | Musterlack GmbH |
+| `München-Trudering` | Standort/Stadt (Footer, Über-uns, Karte) | Musterstadt |
+| `2026` | Jahr für den Copyright-Hinweis im Footer | 2026 |
+
+### Inhaber / Über uns
+| Platzhalter | Bedeutung | Beispiel |
+|---|---|---|
+| `Ali Alt` | Name der Inhaberin / des Inhabers (Über-uns-Abschnitt) | Max Mustermann |
+
+### Kontakt & Anschrift
+| Platzhalter | Bedeutung | Beispiel |
+|---|---|---|
+| `Truderinger Str. 306` | Straße + Hausnummer | Musterstr. 1 |
+| `81825` | Postleitzahl | 12345 |
+| `München-Trudering` | Ort (siehe oben, gleicher Wert) | Musterstadt |
+| `089 42044540` | Telefonnummer, wie angezeigt | 01234 / 56 78 90 |
+| `+498942044540` | Telefonnummer im Link-Format (international, ohne Leerzeichen) | +4912345678900 |
+| `` | Faxnummer (falls vorhanden) | 01234 / 56 78 91 |
+| `alt_gmbh@t-online.de` | E-Mail-Adresse | info@musterlack.de |
+
+### Öffnungszeiten
+| Platzhalter | Bedeutung | Beispiel |
+|---|---|---|
+| `Mo-Fr` | Erste Zeile: Tage | Montag – Freitag |
+| `08:00-18:00 Uhr` | 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 |
+|---|---|---|
+| `` | Durchschnittliche Sternebewertung | 4,8 |
+| `` | Anzahl der Bewertungen | 112 |
+| `` | Google Place ID des Betriebs | ChIJ… |
+| `Markus L.` | Name Rezensent 1 (Demo/Fallback) | Sabine M. |
+| `Top Familienbetrieb! Mein Fahrzeug wurde nach dem Unfall wie neu gemacht. Freundlich, ehrlich und zu einem sehr fairen Preis.` | Text Rezension 1 | „Kratzer war komplett verschwunden …" |
+| `Petra S.` | Name Rezensent 2 | Thomas K. |
+| `Sehr saubere Lackierarbeit und eine ehrliche Beratung. Man fühlt sich hier gut aufgehoben. Komme gerne wieder.` | Text Rezension 2 | „Top Beratung, saubere Arbeit …" |
+| `Andreas K.` | Name Rezensent 3 | Petra L. |
+| `Schnelle Terminvergabe, professionelle Ausführung und ein rundum gelungenes Ergebnis. Sehr empfehlenswert.` | 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 |
+| `Truderinger Str. 306, 81825 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`).
+
+---
+
+## Farbwelt (ab Anreicherung 2.0)
+
+Alle markentragenden Farben stehen als CSS-Variablen im Block zwischen
+`/* WK-THEME-START */` und `/* WK-THEME-END */` ganz oben im `<style>`.
+Wer das Template von Hand einfärben will, ändert nur diesen Block — der Rest
+der Seite folgt automatisch (Sektionen, dekorative Bänder, Buttons, Overlays
+und der `hue-rotate`-Winkel der Hintergrundfotos).
+
+Die Anreicherungs-Routine ersetzt genau diesen Block pro Betrieb mit einer aus
+dem Logo abgeleiteten, kontrastgeprüften Palette und legt sie zusätzlich als
+`.webklar-theme.json` im Repo ab.
+
+## Texte pro Betrieb (`data-wk-copy`)
+
+Elemente mit `data-wk-copy="…"` (Hero-Subline, Leistungskarten, Über-uns,
+Philosophie, Kontakt-Intro) sind die Stellen, die pro Betrieb neu geschrieben
+werden. Der Inhalt darf komplett ersetzt werden; die Struktur bleibt.
+
+## Leere Bereiche (`data-wk-section`)
+
+`data-wk-section="referenzen"` und `data-wk-section="inhaber-foto"` werden
+ausgeblendet (`hidden`), wenn dafür keine echten Bilder vorliegen — statt ein
+leeres Gerüst zu zeigen.