# Tischlerei Staffenberger – Kleine Firmenwebsite

Kleine, statische Website für einen selbstständigen Tischler (Ein-Mann-Betrieb).  
Technik: reines HTML, CSS und JavaScript ohne Frameworks.

## Ordnerstruktur

```
Tischlerei-Staffenberger/
├── index.html          # Generiert von scripts/build.js – nicht direkt bearbeiten
├── pictures.html        # (dito)
├── shop.html            # (dito)
├── impressum.html       # (dito)
├── templates/           # Editierbare Quelldateien der obigen Seiten
├── partials/            # header.html / footer.html, in alle Seiten eingebunden
├── shop-item-template.html  # Vorlage für einzelne Shop-Artikel (manuell kopieren)
├── README.md
├── css/
│   └── style.css       # Ein zentrales Stylesheet
├── js/
│   └── script.js       # Navigation, Galerie-Filter, Lightbox, Shop-Anfragen
├── scripts/
│   ├── build.js             # Baut templates/ + partials/ zu den Root-HTML-Dateien
│   └── optimize-images.js   # Erzeugt WebP/JPEG-Varianten aus images/fotowebsite/
└── images/
    ├── fotowebsite/     # Original-Fotos (Rohmaterial, unkomprimiert)
    └── optimized/       # Generierte WebP/JPEG-Varianten (von optimize-images.js)
```

### Seiten bearbeiten (Templates + Build)

Header und Footer sind identisch auf allen Seiten und liegen daher nur einmal in
`partials/header.html` bzw. `partials/footer.html`. Die eigentlichen Seiteninhalte
liegen als Quelldateien in `templates/` und enthalten an der Stelle von Header/Footer
nur eine Markierung wie `<!-- include:partials/header.html -->`.

**Wichtig:** `index.html`, `pictures.html`, `shop.html` und `impressum.html` im
Hauptverzeichnis sind generierte Dateien – Änderungen daran gehen beim nächsten Build
verloren. Bitte immer in `templates/` bzw. `partials/` bearbeiten, danach:

```bash
npm run build
```

Das schreibt die fertigen, statischen HTML-Dateien ins Hauptverzeichnis. Diese
generierten Dateien werden weiterhin mit committed – der Webhost braucht keinen
eigenen Build-Schritt, es wird nach wie vor nur reines HTML/CSS/JS ausgeliefert.

## Lokal ausführen

Die Seite besteht nur aus statischen Dateien. Sie können sie so starten:

### Option 1: Direkt im Browser öffnen

- Doppelklick auf `index.html` oder  
- Datei in den Browser ziehen  

**Hinweis:** Einige Browser blockieren bei `file://` das Laden externer Ressourcen (z.B. Google Fonts, Platzhalter-Bilder von picsum.photos). Dann Option 2 nutzen.

### Option 2: Mit lokalem Webserver (empfohlen)

Im Projektordner in der Kommandozeile:

**Mit Python 3:**
```bash
# Ab Python 3.x
python -m http.server 8000
```

**Mit Node.js (npx):**
```bash
npx serve .
```

**Mit PHP:**
```bash
php -S localhost:8000
```

Anschließend im Browser aufrufen: **http://localhost:8000**

Von dort aus funktionieren alle Links, Schriftarten und Platzhalter-Bilder.

## Anpassungen

- **Impressum & Kontakt:** In `templates/impressum.html` und `partials/footer.html` die Angaben (Name, Adresse, Telefon, E-Mail, UID-Nummer) pflegen, danach `npm run build`.
- **Shop-Anfragen:** In `js/script.js` die E-Mail-Adresse in der Zeile mit `mailto:` anpassen.
- **Bilder:** Eigene Fotos nach Kategorie in `images/fotowebsite/{kitchen,outdoor,custom}/` ablegen, dann `npm run optimize-images` ausführen, um die WebP/JPEG-Varianten in `images/optimized/` zu erzeugen. Anschließend in `templates/pictures.html` das neue `<figure class="gallery-item">`-Element ergänzen (nach vorhandenem Muster kopieren) und `npm run build` ausführen.

## Seitenüberblick

| Seite        | Inhalt |
|-------------|--------|
| **Start**   | Banner, Willkommenstext, Über mich, Leistungen (Möbel, Küchen, Außen), CTA „Kontakt“. |
| **Bilder**  | Galerie mit Filter: Alle / Küche / Außenbereich / Sonderanfertigung. |
| **Shop**    | 6 Beispielprodukte mit Bild, Beschreibung, Preis und Button „Anfragen“ (öffnet E-Mail). |
| **Impressum** | Anbieter, Kontakt, USt-ID, Verantwortlichkeit, Haftungsausschluss (Platzhalter). |

Navigation ist auf allen Seiten gleich; die aktuelle Seite wird hervorgehoben.