# 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          # Startseite (Landing Page)
├── pictures.html       # Bildergalerie mit Filter
├── shop.html           # Kleiner Shop (Anfragen per E-Mail)
├── impressum.html      # Impressum mit Platzhalterdaten
├── README.md
├── css/
│   └── style.css       # Ein zentrales Stylesheet
├── js/
│   └── script.js       # Navigation, Galerie-Filter, Shop-Anfragen
└── images/
    └── .gitkeep        # Ordner für eigene Bilder (optional)
```

## 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 `impressum.html` und im Footer aller Seiten die Platzhalterdaten (Name, Adresse, Telefon, E-Mail, USt-ID) durch echte Angaben ersetzen.
- **Shop-Anfragen:** In `js/script.js` die E-Mail-Adresse in der Zeile mit `mailto:` durch Ihre echte Adresse ersetzen.
- **Bilder:** Aktuell werden Platzhalter von [picsum.photos](https://picsum.photos) genutzt. Eigene Fotos in den Ordner `images/` legen und in `pictures.html` bzw. `shop.html` die `src`-Pfade anpassen (z.B. `images/kuche-1.jpg`).

## 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.