Initially adds the current state of the project

README.md

@@ -0,0 +1,73 @@
+# 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.

css/style.css

@@ -0,0 +1,720 @@
+/* ============================================
+   Tischlerei Staffenberger - Main Stylesheet
+   Traditional, warm, responsive design
+   ============================================ */
+
+/* --- Google Fonts --- */
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600&display=swap');
+
+/* --- CSS Custom Properties --- */
+:root {
+  /* Warm wood & earth tones */
+  --color-wood-dark: #3d2914;
+  --color-wood-medium: #5c4033;
+  --color-wood-light: #8b7355;
+  --color-beige: #e8dfd4;
+  --color-beige-light: #f5f0e8;
+  --color-cream: #faf8f5;
+  /* Accent */
+  --color-accent: #2d4a3e;
+  --color-accent-hover: #3d5a4e;
+  /* Neutrals */
+  --color-text: #2c2419;
+  --color-text-muted: #5a5248;
+  --color-border: #d4c9bc;
+  /* Typography */
+  --font-heading: 'Cormorant Garamond', Georgia, serif;
+  --font-body: 'Source Sans 3', 'Segoe UI', sans-serif;
+  /* Spacing & layout */
+  --max-width: 960px;
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 1rem;
+  --spacing-md: 1.5rem;
+  --spacing-lg: 2rem;
+  --spacing-xl: 3rem;
+  --radius: 4px;
+  --shadow: 0 2px 8px rgba(61, 41, 20, 0.08);
+}
+
+/* --- Reset & Base --- */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-body);
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--color-text);
+  background-color: var(--color-cream);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-accent-hover);
+  text-decoration: underline;
+}
+
+/* --- Layout wrapper --- */
+.layout {
+  max-width: var(--max-width);
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+}
+
+/* ============================================
+   Header & Hero Banner (widescreen image)
+   ============================================ */
+.site-header {
+  position: relative;
+  color: var(--color-beige);
+  border-bottom: 3px solid var(--color-wood-light);
+}
+
+/* Full-width hero image container; fixed aspect/height for responsive look */
+.hero-banner {
+  position: relative;
+  width: 100%;
+  min-height: 40vh;
+  max-height: 60vh;
+  height: 50vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+/* Background image: carpentry/woodworking – optimized WebP with JPEG fallback */
+.hero-banner .hero-image {
+  position: absolute;
+  inset: 0;
+  background-image: url('../images/optimized/banner-1920w.jpg');
+  background-image: image-set(
+    url('../images/optimized/banner-1920w.webp') type('image/webp'),
+    url('../images/optimized/banner-1920w.jpg') type('image/jpeg')
+  );
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: 640px) {
+  .hero-banner .hero-image {
+    background-image: url('../images/optimized/banner-800w.jpg');
+    background-image: image-set(
+      url('../images/optimized/banner-800w.webp') type('image/webp'),
+      url('../images/optimized/banner-800w.jpg') type('image/jpeg')
+    );
+  }
+}
+
+/* Dark overlay so title and nav stay readable */
+.hero-banner .hero-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(45, 33, 20, 0.5);
+  pointer-events: none;
+}
+
+/* Logo above title in hero banner */
+.hero-logo {
+  width: clamp(60px, 9vw, 90px);
+  height: auto;
+  margin: 0 auto var(--spacing-sm);
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
+}
+
+/* Centered title and subtitle on top of the image */
+.hero-text {
+  position: relative;
+  z-index: 1;
+  text-align: center;
+  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-md);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.hero-text h1 {
+  margin: 0;
+  font-family: var(--font-heading);
+  font-size: clamp(1.75rem, 4vw, 2.5rem);
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--color-beige-light);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.hero-text .hero-subtitle {
+  margin: var(--spacing-xs) 0 0;
+  font-size: clamp(0.9rem, 2vw, 1.05rem);
+  color: var(--color-beige);
+  opacity: 0.95;
+  font-weight: 400;
+}
+
+/* Main Navigation at bottom of banner */
+.hero-banner .main-nav {
+  position: relative;
+  z-index: 1;
+  margin-top: 0;
+}
+
+.main-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0;
+  border-top: 1px solid rgba(232, 223, 212, 0.25);
+  background: rgba(45, 33, 20, 0.4);
+}
+
+.main-nav li {
+  margin: 0;
+}
+
+.main-nav a {
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-md);
+  color: var(--color-beige);
+  text-decoration: none;
+  font-weight: 500;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.main-nav a:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: var(--color-beige-light);
+  text-decoration: none;
+}
+
+.main-nav a.active {
+  background-color: var(--color-accent);
+  color: var(--color-beige-light);
+}
+
+/* ============================================
+   Main content area
+   ============================================ */
+main {
+  padding: var(--spacing-xl) 0;
+  min-height: 50vh;
+}
+
+main .layout {
+  padding: 0 var(--spacing-md);
+}
+
+/* --- Typography in content --- */
+h2 {
+  font-family: var(--font-heading);
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  font-weight: 600;
+  color: var(--color-wood-dark);
+  margin: 0 0 var(--spacing-md);
+  border-bottom: 2px solid var(--color-border);
+  padding-bottom: var(--spacing-xs);
+}
+
+h3 {
+  font-family: var(--font-heading);
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-wood-medium);
+  margin: 0 0 var(--spacing-sm);
+}
+
+/* ============================================
+   Landing page sections
+   ============================================ */
+.hero {
+  text-align: center;
+  padding: var(--spacing-lg) 0;
+  background: var(--color-beige-light);
+  border-radius: var(--radius);
+  margin-bottom: var(--spacing-xl);
+  border: 1px solid var(--color-border);
+}
+
+.hero h2 {
+  border: none;
+  margin-bottom: var(--spacing-sm);
+}
+
+.hero p {
+  margin: 0;
+  max-width: 36em;
+  margin-left: auto;
+  margin-right: auto;
+  color: var(--color-text-muted);
+}
+
+.section {
+  margin-bottom: var(--spacing-xl);
+}
+
+.section p {
+  margin: 0 0 var(--spacing-sm);
+  color: var(--color-text-muted);
+}
+
+/* --- Services grid --- */
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--spacing-lg);
+  margin-top: var(--spacing-md);
+}
+
+.service-card {
+  background: var(--color-beige-light);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: var(--spacing-lg);
+  transition: box-shadow 0.2s ease;
+}
+
+.service-card:hover {
+  box-shadow: var(--shadow);
+}
+
+.service-card h3 {
+  margin-top: 0;
+}
+
+/* --- CTA --- */
+.cta-section {
+  text-align: center;
+  padding: var(--spacing-xl) 0;
+}
+
+.btn {
+  display: inline-block;
+  padding: var(--spacing-sm) var(--spacing-lg);
+  font-family: var(--font-body);
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-beige-light);
+  background-color: var(--color-accent);
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  text-decoration: none;
+  transition: background-color 0.2s ease;
+}
+
+.btn:hover {
+  background-color: var(--color-accent-hover);
+  text-decoration: none;
+  color: var(--color-beige-light);
+}
+
+/* ============================================
+   Pictures / Gallery page
+   ============================================ */
+.gallery-header {
+  margin-bottom: var(--spacing-lg);
+}
+
+.gallery-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-lg);
+  justify-content: center;
+}
+
+.gallery-filters button {
+  padding: var(--spacing-xs) var(--spacing-md);
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--color-wood-medium);
+  background: var(--color-beige-light);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.gallery-filters button:hover,
+.gallery-filters button.active {
+  background: var(--color-accent);
+  color: var(--color-beige-light);
+  border-color: var(--color-accent);
+}
+
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: var(--spacing-md);
+}
+
+.gallery-item {
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  background: var(--color-beige-light);
+}
+
+.gallery-item img {
+  width: 100%;
+  aspect-ratio: 4/3;
+  object-fit: cover;
+}
+
+.gallery-item figcaption {
+  display: none; /* Hide gallery item captions (file names/descriptions) */
+  padding: var(--spacing-sm);
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+/* Clickable gallery image (cursor + no drag) */
+.gallery-item .gallery-image-link {
+  display: block;
+  cursor: pointer;
+  line-height: 0;
+}
+
+.gallery-item .gallery-image-link img {
+  pointer-events: none;
+}
+
+/* ============================================
+   Lightbox / Modal (Bilder page)
+   ============================================ */
+.lightbox {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-md);
+  background: rgba(0, 0, 0, 0.85);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.lightbox.is-open {
+  display: flex;
+  opacity: 1;
+}
+
+.lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+
+.lightbox-content {
+  position: relative;
+  z-index: 1;
+  max-width: 90vw;
+  max-height: 85vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.lightbox-content img {
+  max-width: 100%;
+  max-height: 85vh;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--radius);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
+}
+
+/* Prev / Next navigation buttons */
+.lightbox-prev,
+.lightbox-next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2;
+  width: 3rem;
+  height: 3rem;
+  padding: 0;
+  font-size: 2.5rem;
+  line-height: 1;
+  color: var(--color-beige);
+  background: rgba(45, 33, 20, 0.55);
+  border: 1px solid rgba(232, 223, 212, 0.25);
+  border-radius: var(--radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+  user-select: none;
+}
+
+.lightbox-prev:hover,
+.lightbox-next:hover {
+  background: var(--color-accent);
+}
+
+.lightbox-prev { left: var(--spacing-sm); }
+.lightbox-next { right: var(--spacing-sm); }
+
+.lightbox-prev[hidden],
+.lightbox-next[hidden] { display: none; }
+
+/* Close button (X) */
+.lightbox-close {
+  position: absolute;
+  top: -2.5rem;
+  right: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: var(--color-beige);
+  background: var(--color-wood-medium);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.lightbox-close:hover {
+  background: var(--color-accent);
+  color: var(--color-beige-light);
+}
+
+/* ============================================
+   Shop page
+   ============================================ */
+.shop-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--spacing-lg);
+}
+
+.shop-empty-message {
+  margin: var(--spacing-lg) 0 0;
+  text-align: center;
+  color: var(--color-text-muted);
+  font-size: 1.05rem;
+}
+
+.product-card {
+  background: var(--color-beige-light);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: box-shadow 0.2s ease;
+}
+
+.product-card:hover {
+  box-shadow: var(--shadow);
+}
+
+.product-card .product-image {
+  aspect-ratio: 1;
+  object-fit: cover;
+  width: 100%;
+  background: var(--color-beige);
+}
+
+.product-card .product-body {
+  padding: var(--spacing-md);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.product-card h3 {
+  margin: 0 0 var(--spacing-xs);
+  font-size: 1.15rem;
+}
+
+.product-card .product-desc {
+  font-size: 0.9rem;
+  color: var(--color-text-muted);
+  margin: 0 0 var(--spacing-sm);
+  flex: 1;
+}
+
+.product-card .product-price {
+  font-weight: 600;
+  color: var(--color-wood-dark);
+  margin-bottom: var(--spacing-sm);
+}
+
+.product-card .btn {
+  margin-top: auto;
+  text-align: center;
+}
+
+/* ============================================
+   Impressum page
+   ============================================ */
+.impressum-content {
+  max-width: 640px;
+}
+
+.impressum-content section {
+  margin-bottom: var(--spacing-lg);
+}
+
+.impressum-content h2 {
+  font-size: 1.35rem;
+  margin-bottom: var(--spacing-sm);
+}
+
+.impressum-content p,
+.impressum-content address {
+  margin: 0 0 var(--spacing-sm);
+  color: var(--color-text-muted);
+  font-style: normal;
+}
+
+.impressum-content address {
+  line-height: 1.7;
+}
+
+/* ============================================
+   Footer
+   ============================================ */
+.site-footer {
+  background: var(--color-wood-medium);
+  color: var(--color-beige);
+  padding: var(--spacing-lg) var(--spacing-md);
+  margin-top: auto;
+}
+
+.site-footer .layout {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.site-footer a {
+  color: var(--color-beige);
+}
+
+.site-footer a:hover {
+  color: var(--color-beige-light);
+  text-decoration: underline;
+}
+
+.footer-contact {
+  font-size: 0.95rem;
+}
+
+.footer-logo {
+  width: 48px;
+  height: auto;
+  margin-bottom: var(--spacing-xs);
+  opacity: 0.8;
+}
+
+.footer-contact p {
+  margin: 0;
+}
+
+.footer-links {
+  display: flex;
+  gap: var(--spacing-md);
+}
+
+.footer-links a {
+  text-decoration: none;
+}
+
+.footer-links a:hover {
+  text-decoration: underline;
+}
+
+/* ============================================
+   Page title (inner pages)
+   ============================================ */
+.page-title {
+  font-family: var(--font-heading);
+  font-size: clamp(1.5rem, 3vw, 2rem);
+  color: var(--color-wood-dark);
+  margin: 0 0 var(--spacing-lg);
+  border-bottom: 2px solid var(--color-border);
+  padding-bottom: var(--spacing-sm);
+}
+
+/* ============================================
+   Responsive adjustments
+   ============================================ */
+@media (max-width: 640px) {
+  .hero-banner {
+    min-height: 35vh;
+    max-height: 55vh;
+    height: 45vh;
+  }
+
+  .hero-text {
+    padding: var(--spacing-md);
+  }
+
+
+  .main-nav ul {
+    flex-direction: column;
+  }
+
+  .main-nav a {
+    text-align: center;
+    border-bottom: 1px solid rgba(232, 223, 212, 0.15);
+  }
+
+  .lightbox-close {
+    top: var(--spacing-sm);
+    right: var(--spacing-sm);
+  }
+
+  .site-footer .layout {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .footer-links {
+    justify-content: center;
+  }
+
+  .gallery-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .shop-grid {
+    grid-template-columns: 1fr;
+  }
+}