mrwhiski/tischlerei-staffenberger
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Real contact/Impressum data, SEO tags, responsive gallery images, a11y and templating fixes

Browse source 
- Impressum rewritten with real Austrian business data (ECG instead of
  German TMG references); UID, Gewerbeberechtigung and Firmenbuchnummer
  marked as pending until available
- Real contact email/phone/address across footer and Impressum
- Meta description, Open Graph tags and favicon on all pages
- Gallery images now offer both 800w and 1920w srcset candidates
- Lightbox traps focus while open and restores it on close
- Header/footer extracted into partials/, pages now built from
  templates/ via `npm run build` (scripts/build.js) to remove
  duplication across the 4 pages
This commit is contained in:
David Staffenberger 2026-07-12 18:11:11 +02:00
parent cd2ce91297
commit f2507033c3
18 changed files with 2028 additions and 1303 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1 +1,2 @@
node_modules/
.claude/

44
README.md
View file

@ -7,19 +7,45 @@ Technik: reines HTML, CSS und JavaScript ohne Frameworks.
```
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
├── 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, Shop-Anfragen
│ └── 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/
└── .gitkeep # Ordner für eigene Bilder (optional)
├── 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:
@ -57,9 +83,9 @@ 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`).
- **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

1440
css/style.css
View file

File diff suppressed because it is too large Load diff

210
impressum.html
View file

@ -1,100 +1,110 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum – Tischlerei Staffenberger</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<header class="site-header">
<div class="hero-banner">
<div class="hero-image" aria-hidden="true"></div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-text">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<h1>Tischlerei Staffenberger</h1>
<p class="hero-subtitle">Handwerk mit Tradition</p>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="layout">
<h1 class="page-title">Impressum</h1>
<div class="impressum-content">
<!-- Angaben gemäß § 5 TMG (Platzhalter) -->
<section id="anbieter">
<h2>Anbieter</h2>
<p>Tischlerei Staffenberger</p>
<address>
Musterstraße 1<br>
12345 Musterort<br>
Deutschland
</address>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<p>Telefon: 01234 / 567890</p>
<p>E-Mail: info@tischlerei-staffenberger.example</p>
<p>Bitte ersetzen Sie die Platzhalterdaten durch Ihre echten Angaben.</p>
</section>
<section>
<h2>Umsatzsteuer-ID</h2>
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</p>
<p>DE 123 456 789</p>
<p>(Platzhalter – bei fehlender USt-ID bitte weglassen oder durch „Keine“ ersetzen.)</p>
</section>
<section>
<h2>Verantwortlich für den Inhalt</h2>
<p>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</p>
<address>
Max Staffenberger<br>
Musterstraße 1<br>
12345 Musterort
</address>
</section>
<section>
<h2>Haftungsausschluss</h2>
<h3>Haftung für Inhalte</h3>
<p>Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
<h3>Haftung für Links</h3>
<p>Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.</p>
</section>
</div>
</div>
</main>
<!-- ========== Footer ========== -->
<footer class="site-footer">
<div class="layout">
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Musterstraße 1 · 12345 Musterort</p>
<p>Tel.: 01234 / 567890</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="index.html">Start</a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum – Tischlerei Staffenberger</title>
<meta name="description" content="Impressum der Tischlerei Staffenberger – Kontakt- und Anbieterinformationen.">
<link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tischlerei Staffenberger">
<meta property="og:locale" content="de_AT">
<meta property="og:title" content="Impressum – Tischlerei Staffenberger">
<meta property="og:image" content="images/optimized/banner-1920w.jpg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<header class="site-header">
<div class="hero-banner">
<div class="hero-image" aria-hidden="true"></div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-text">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<h1>Tischlerei Staffenberger</h1>
<p class="hero-subtitle">Handwerk mit Tradition</p>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="layout">
<h1 class="page-title">Impressum</h1>
<div class="impressum-content">
<!-- Angaben gemäß § 5 ECG (E-Commerce-Gesetz, Österreich) -->
<section id="anbieter">
<h2>Anbieter</h2>
<p>Tischlerei Staffenberger<br>Inhaber: Erich Staffenberger</p>
<address>
Hauptstraße 3a<br>
3443 Kreuth<br>
Österreich
</address>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<p>Telefon: 02274 / 8874</p>
<p>E-Mail: info@tischlerei-staffenberger.at</p>
</section>
<section>
<h2>Gewerberechtliche Angaben</h2>
<p>Gewerbeberechtigung derzeit in Beantragung. Angaben zu Gewerbewortlaut und zuständiger Gewerbebehörde (Bezirkshauptmannschaft) werden hier ergänzt, sobald die Berechtigung vorliegt.</p>
<p>Anwendbare Rechtsvorschrift: Gewerbeordnung 1994 (GewO), abrufbar unter <a href="https://www.ris.bka.gv.at" target="_blank" rel="noopener">www.ris.bka.gv.at</a>.</p>
</section>
<section>
<h2>Umsatzsteuer-Identifikationsnummer (UID)</h2>
<p>Liegt noch nicht vor und wird ergänzt, sobald vorhanden.</p>
</section>
<section>
<h2>Firmenbuchnummer</h2>
<p>Nicht im Firmenbuch eingetragen.</p>
</section>
<section>
<h2>EU-Streitschlichtung</h2>
<p>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit, abrufbar unter <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener">ec.europa.eu/consumers/odr</a>.</p>
</section>
<section>
<h2>Haftungsausschluss</h2>
<h3>Haftung für Inhalte</h3>
<p>Die Inhalte dieser Website wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann jedoch keine Gewähr übernommen werden.</p>
<h3>Haftung für Links</h3>
<p>Diese Website enthält Links zu externen Websites Dritter, auf deren Inhalte kein Einfluss besteht. Für diese fremden Inhalte kann daher keine Gewähr übernommen werden. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.</p>
</section>
</div>
</div>
</main>
<!-- ========== Footer ========== -->
<footer class="site-footer">
<div class="layout">
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Hauptstraße 3a · 3443 Kreuth</p>
<p>Tel.: 02274 / 8874</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="index.html">Start</a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

186
index.html
View file

@ -1,89 +1,97 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tischlerei Staffenberger – Möbel & Küchen nach Maß</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<header class="site-header">
<div class="hero-banner">
<div class="hero-image" aria-hidden="true"></div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-text">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<h1>Tischlerei Staffenberger</h1>
<p class="hero-subtitle">Handwerk mit Tradition</p>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="layout">
<!-- ========== Hero ========== -->
<section class="hero">
<h2>Willkommen in meiner Werkstatt</h2>
<p>Seit Jahren fertige ich in meiner kleinen Tischlerei Möbel, Küchen und Objekte für Haus und Garten. Jedes Stück wird in Handarbeit geplant und umgesetzt – zuverlässig und in Ruhe.</p>
</section>
<!-- ========== About me ========== -->
<section class="section">
<h2>Über mich</h2>
<p>Ich bin gelernter Tischler und arbeite als Ein-Mann-Betrieb in der Region. Ob Reparatur, Einzelmöbel oder komplette Küche: Ich berate Sie unverbindlich und setze Ihre Wünsche fachgerecht um.</p>
</section>
<!-- ========== Services ========== -->
<section class="section">
<h2>Leistungen</h2>
<div class="services-grid">
<article class="service-card">
<h3>Möbel nach Maß</h3>
<p>Regale, Schränke, Tische und Sitzmöbel – maßgefertigt für Ihr Zuhause.</p>
</article>
<article class="service-card">
<h3>Küchen</h3>
<p>Küchenplanung und -fertigung in Massivholz und mit modernen Oberflächen.</p>
</article>
<article class="service-card">
<h3>Außenbereich</h3>
<p>Terassenmöbel, Sichtschutz, Carports und alles für Garten und Terrasse.</p>
</article>
</div>
</section>
<!-- ========== CTA ========== -->
<section class="cta-section">
<a href="impressum.html#kontakt" class="btn">Kontakt aufnehmen</a>
</section>
</div>
</main>
<!-- ========== Footer ========== -->
<footer class="site-footer">
<div class="layout">
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Musterstraße 1 · 12345 Musterort</p>
<p>Tel.: 01234 / 567890</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="index.html">Start</a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tischlerei Staffenberger – Möbel & Küchen nach Maß</title>
<meta name="description" content="Tischlerei Staffenberger: Möbel, Küchen und Objekte für Haus und Garten nach Maß – handgefertigt in einem Ein-Mann-Betrieb in Österreich.">
<link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tischlerei Staffenberger">
<meta property="og:locale" content="de_AT">
<meta property="og:title" content="Tischlerei Staffenberger – Möbel & Küchen nach Maß">
<meta property="og:description" content="Möbel, Küchen und Objekte für Haus und Garten nach Maß – handgefertigt in einem Ein-Mann-Betrieb in Österreich.">
<meta property="og:image" content="images/optimized/banner-1920w.jpg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<header class="site-header">
<div class="hero-banner">
<div class="hero-image" aria-hidden="true"></div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-text">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<h1>Tischlerei Staffenberger</h1>
<p class="hero-subtitle">Handwerk mit Tradition</p>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="layout">
<!-- ========== Hero ========== -->
<section class="hero">
<h2>Willkommen in meiner Werkstatt</h2>
<p>Seit Jahren fertige ich in meiner kleinen Tischlerei Möbel, Küchen und Objekte für Haus und Garten. Jedes Stück wird in Handarbeit geplant und umgesetzt – zuverlässig und in Ruhe.</p>
</section>
<!-- ========== About me ========== -->
<section class="section">
<h2>Über mich</h2>
<p>Ich bin gelernter Tischler und arbeite als Ein-Mann-Betrieb in der Region. Ob Reparatur, Einzelmöbel oder komplette Küche: Ich berate Sie unverbindlich und setze Ihre Wünsche fachgerecht um.</p>
</section>
<!-- ========== Services ========== -->
<section class="section">
<h2>Leistungen</h2>
<div class="services-grid">
<article class="service-card">
<h3>Möbel nach Maß</h3>
<p>Regale, Schränke, Tische und Sitzmöbel – maßgefertigt für Ihr Zuhause.</p>
</article>
<article class="service-card">
<h3>Küchen</h3>
<p>Küchenplanung und -fertigung in Massivholz und mit modernen Oberflächen.</p>
</article>
<article class="service-card">
<h3>Außenbereich</h3>
<p>Terassenmöbel, Sichtschutz, Carports und alles für Garten und Terrasse.</p>
</article>
</div>
</section>
<!-- ========== CTA ========== -->
<section class="cta-section">
<a href="impressum.html#kontakt" class="btn">Kontakt aufnehmen</a>
</section>
</div>
</main>
<!-- ========== Footer ========== -->
<footer class="site-footer">
<div class="layout">
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Hauptstraße 3a · 3443 Kreuth</p>
<p>Tel.: 02274 / 8874</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="index.html">Start</a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

400
js/script.js
View file

@ -1,186 +1,214 @@
/**
* Tischlerei Staffenberger - Main JavaScript
* Handles navigation active state, gallery filtering, and lightbox on Bilder page.
*/
(function () {
'use strict';
/**
* Set active state on the current page's nav link based on URL pathname.
*/
function setActiveNav() {
var navLinks = document.querySelectorAll('.main-nav a');
var path = window.location.pathname;
var page = path.split('/').pop() || 'index.html';
navLinks.forEach(function (link) {
var href = link.getAttribute('href');
if (!href) return;
var linkPage = href.split('/').pop() || 'index.html';
if (linkPage === page || (page === '' && linkPage === 'index.html')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
/**
* Gallery filter: show/hide items by data-category.
*/
function initGalleryFilter() {
var filters = document.querySelectorAll('.gallery-filters button');
var items = document.querySelectorAll('.gallery-item');
if (!filters.length || !items.length) return;
filters.forEach(function (btn) {
btn.addEventListener('click', function () {
var category = this.getAttribute('data-filter');
// Update active button
filters.forEach(function (b) {
b.classList.toggle('active', b === btn);
});
// Show/hide items
items.forEach(function (item) {
var itemCategory = item.getAttribute('data-category');
var show = category === 'all' || itemCategory === category;
item.style.display = show ? '' : 'none';
});
});
});
}
/**
* Lightbox on Bilder page: open on gallery image click, navigate with swipe / arrow
* keys / prev+next buttons, close via X, backdrop or ESC.
* Respects the active gallery filter – only visible items are part of the sequence.
*/
function initLightbox() {
var lightbox = document.getElementById('lightbox');
var lightboxImg = document.getElementById('lightbox-img');
if (!lightbox || !lightboxImg) return;
var closeBtn = lightbox.querySelector('.lightbox-close');
var backdrop = lightbox.querySelector('.lightbox-backdrop');
var prevBtn = lightbox.querySelector('.lightbox-prev');
var nextBtn = lightbox.querySelector('.lightbox-next');
var currentIndex = 0;
var sequence = []; // visible gallery links at the time the lightbox was opened
function getVisibleLinks() {
return Array.from(document.querySelectorAll('.gallery-item'))
.filter(function (item) { return item.style.display !== 'none'; })
.map(function (item) { return item.querySelector('.gallery-image-link'); })
.filter(Boolean);
}
function showImage(index) {
var link = sequence[index];
if (!link) return;
currentIndex = index;
lightboxImg.src = link.getAttribute('data-lightbox-src') || link.getAttribute('href');
lightboxImg.alt = link.getAttribute('data-lightbox-alt') || '';
var multiple = sequence.length > 1;
if (prevBtn) prevBtn.hidden = !multiple;
if (nextBtn) nextBtn.hidden = !multiple;
}
function navigate(dir) {
showImage((currentIndex + dir + sequence.length) % sequence.length);
}
function openLightbox(index) {
sequence = getVisibleLinks();
showImage(index);
lightbox.classList.add('is-open');
document.addEventListener('keydown', onKeydown);
}
function closeLightbox() {
lightbox.classList.remove('is-open');
document.removeEventListener('keydown', onKeydown);
}
function onKeydown(e) {
if (e.key === 'Escape') closeLightbox();
if (e.key === 'ArrowRight') navigate(1);
if (e.key === 'ArrowLeft') navigate(-1);
}
// Touch swipe
var touchStartX = 0;
lightbox.addEventListener('touchstart', function (e) {
touchStartX = e.changedTouches[0].clientX;
}, { passive: true });
lightbox.addEventListener('touchend', function (e) {
var dx = e.changedTouches[0].clientX - touchStartX;
if (Math.abs(dx) > 50) navigate(dx < 0 ? 1 : -1);
}, { passive: true });
// Open on gallery click
document.querySelectorAll('.gallery-image-link').forEach(function (link) {
link.addEventListener('click', function (e) {
e.preventDefault();
var visibles = getVisibleLinks();
var idx = visibles.indexOf(link);
openLightbox(idx >= 0 ? idx : 0);
});
});
if (prevBtn) prevBtn.addEventListener('click', function () { navigate(-1); });
if (nextBtn) nextBtn.addEventListener('click', function () { navigate(1); });
if (closeBtn) closeBtn.addEventListener('click', closeLightbox);
if (backdrop) backdrop.addEventListener('click', closeLightbox);
}
/**
* "Request" buttons on shop page – open mailto with product name in subject.
*/
function initShopRequests() {
var requestBtns = document.querySelectorAll('.product-card .btn[data-product]');
requestBtns.forEach(function (btn) {
btn.addEventListener('click', function (e) {
var product = this.getAttribute('data-product');
if (product) {
// Open mail with subject line (no real checkout) – replace email with your address
var mailto = 'mailto:info@tischlerei-staffenberger.example?subject=Anfrage%20Produkt%3A%20' + encodeURIComponent(product);
window.location.href = mailto;
}
});
});
}
/**
* Shop empty state: show message when no products are present.
*/
function initShopEmptyState() {
var emptyMsg = document.getElementById('shop-empty-message');
var grid = document.getElementById('shop-grid');
if (!emptyMsg || !grid) return;
var hasCards = grid.querySelectorAll('.product-card').length > 0;
emptyMsg.hidden = hasCards;
}
/**
* Run on DOM ready.
*/
function init() {
setActiveNav();
initGalleryFilter();
initLightbox();
initShopRequests();
initShopEmptyState();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();
/**
* Tischlerei Staffenberger - Main JavaScript
* Handles navigation active state, gallery filtering, and lightbox on Bilder page.
*/
(function () {
'use strict';
/**
* Set active state on the current page's nav link based on URL pathname.
*/
function setActiveNav() {
var navLinks = document.querySelectorAll('.main-nav a');
var path = window.location.pathname;
var page = path.split('/').pop() || 'index.html';
navLinks.forEach(function (link) {
var href = link.getAttribute('href');
if (!href) return;
var linkPage = href.split('/').pop() || 'index.html';
if (linkPage === page || (page === '' && linkPage === 'index.html')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
/**
* Gallery filter: show/hide items by data-category.
*/
function initGalleryFilter() {
var filters = document.querySelectorAll('.gallery-filters button');
var items = document.querySelectorAll('.gallery-item');
if (!filters.length || !items.length) return;
filters.forEach(function (btn) {
btn.addEventListener('click', function () {
var category = this.getAttribute('data-filter');
// Update active button
filters.forEach(function (b) {
b.classList.toggle('active', b === btn);
});
// Show/hide items
items.forEach(function (item) {
var itemCategory = item.getAttribute('data-category');
var show = category === 'all' || itemCategory === category;
item.style.display = show ? '' : 'none';
});
});
});
}
/**
* Lightbox on Bilder page: open on gallery image click, navigate with swipe / arrow
* keys / prev+next buttons, close via X, backdrop or ESC.
* Respects the active gallery filter – only visible items are part of the sequence.
*/
function initLightbox() {
var lightbox = document.getElementById('lightbox');
var lightboxImg = document.getElementById('lightbox-img');
if (!lightbox || !lightboxImg) return;
var closeBtn = lightbox.querySelector('.lightbox-close');
var backdrop = lightbox.querySelector('.lightbox-backdrop');
var prevBtn = lightbox.querySelector('.lightbox-prev');
var nextBtn = lightbox.querySelector('.lightbox-next');
var currentIndex = 0;
var sequence = []; // visible gallery links at the time the lightbox was opened
var lastFocused = null; // element to restore focus to on close
function getFocusableEls() {
return [prevBtn, nextBtn, closeBtn].filter(function (el) {
return el && !el.hidden;
});
}
function onFocusTrap(e) {
if (e.key !== 'Tab') return;
var focusable = getFocusableEls();
if (!focusable.length) return;
var first = focusable[0];
var last = focusable[focusable.length - 1];
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
}
function getVisibleLinks() {
return Array.from(document.querySelectorAll('.gallery-item'))
.filter(function (item) { return item.style.display !== 'none'; })
.map(function (item) { return item.querySelector('.gallery-image-link'); })
.filter(Boolean);
}
function showImage(index) {
var link = sequence[index];
if (!link) return;
currentIndex = index;
lightboxImg.src = link.getAttribute('data-lightbox-src') || link.getAttribute('href');
lightboxImg.alt = link.getAttribute('data-lightbox-alt') || '';
var multiple = sequence.length > 1;
if (prevBtn) prevBtn.hidden = !multiple;
if (nextBtn) nextBtn.hidden = !multiple;
}
function navigate(dir) {
showImage((currentIndex + dir + sequence.length) % sequence.length);
}
function openLightbox(index, trigger) {
sequence = getVisibleLinks();
lastFocused = trigger || document.activeElement;
showImage(index);
lightbox.classList.add('is-open');
document.addEventListener('keydown', onKeydown);
var focusable = getFocusableEls();
if (focusable.length) focusable[0].focus();
}
function closeLightbox() {
lightbox.classList.remove('is-open');
document.removeEventListener('keydown', onKeydown);
if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus();
lastFocused = null;
}
function onKeydown(e) {
if (e.key === 'Escape') closeLightbox();
if (e.key === 'ArrowRight') navigate(1);
if (e.key === 'ArrowLeft') navigate(-1);
onFocusTrap(e);
}
// Touch swipe
var touchStartX = 0;
lightbox.addEventListener('touchstart', function (e) {
touchStartX = e.changedTouches[0].clientX;
}, { passive: true });
lightbox.addEventListener('touchend', function (e) {
var dx = e.changedTouches[0].clientX - touchStartX;
if (Math.abs(dx) > 50) navigate(dx < 0 ? 1 : -1);
}, { passive: true });
// Open on gallery click
document.querySelectorAll('.gallery-image-link').forEach(function (link) {
link.addEventListener('click', function (e) {
e.preventDefault();
var visibles = getVisibleLinks();
var idx = visibles.indexOf(link);
openLightbox(idx >= 0 ? idx : 0, link);
});
});
if (prevBtn) prevBtn.addEventListener('click', function () { navigate(-1); });
if (nextBtn) nextBtn.addEventListener('click', function () { navigate(1); });
if (closeBtn) closeBtn.addEventListener('click', closeLightbox);
if (backdrop) backdrop.addEventListener('click', closeLightbox);
}
/**
* "Request" buttons on shop page – open mailto with product name in subject.
*/
function initShopRequests() {
var requestBtns = document.querySelectorAll('.product-card .btn[data-product]');
requestBtns.forEach(function (btn) {
btn.addEventListener('click', function (e) {
var product = this.getAttribute('data-product');
if (product) {
// Open mail with subject line (no real checkout) – replace email with your address
var mailto = 'mailto:info@tischlerei-staffenberger.at?subject=Anfrage%20Produkt%3A%20' + encodeURIComponent(product);
window.location.href = mailto;
}
});
});
}
/**
* Shop empty state: show message when no products are present.
*/
function initShopEmptyState() {
var emptyMsg = document.getElementById('shop-empty-message');
var grid = document.getElementById('shop-grid');
if (!emptyMsg || !grid) return;
var hasCards = grid.querySelectorAll('.product-card').length > 0;
emptyMsg.hidden = hasCards;
}
/**
* Run on DOM ready.
*/
function init() {
setActiveNav();
initGalleryFilter();
initLightbox();
initShopRequests();
initShopEmptyState();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();

6
package.json
View file

@ -1,10 +1,10 @@
{
"name": "tischlerei-staffenberger",
"version": "1.0.0",
"description": "Kleine, statische Website für einen selbstständigen Tischler (Ein-Mann-Betrieb). \r Technik: reines HTML, CSS und JavaScript ohne Frameworks.",
"main": "index.js",
"description": "Kleine, statische Website für einen selbstständigen Tischler (Ein-Mann-Betrieb). Technik: reines HTML, CSS und JavaScript ohne Frameworks.",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"build": "node scripts/build.js",
"optimize-images": "node scripts/optimize-images.js"
},
"keywords": [],
"author": "",

14
partials/footer.html Normal file
View file

@ -0,0 +1,14 @@
<footer class="site-footer">
<div class="layout">
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Hauptstraße 3a · 3443 Kreuth</p>
<p>Tel.: 02274 / 8874</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="index.html">Start</a>
</div>
</div>
</footer>

19
partials/header.html Normal file
View file

@ -0,0 +1,19 @@
<header class="site-header">
<div class="hero-banner">
<div class="hero-image" aria-hidden="true"></div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-text">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<h1>Tischlerei Staffenberger</h1>
<p class="hero-subtitle">Handwerk mit Tradition</p>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</header>

222
pictures.html
View file

@ -4,6 +4,14 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bilder – Tischlerei Staffenberger</title>
<meta name="description" content="Referenzen und Bilder der Tischlerei Staffenberger: Küchen, Außenbereich und Sonderanfertigungen aus eigener Werkstatt.">
<link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tischlerei Staffenberger">
<meta property="og:locale" content="de_AT">
<meta property="og:title" content="Bilder – Tischlerei Staffenberger">
<meta property="og:description" content="Referenzen und Bilder: Küchen, Außenbereich und Sonderanfertigungen aus eigener Werkstatt.">
<meta property="og:image" content="images/optimized/banner-1920w.jpg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
@ -48,118 +56,118 @@
<!-- Küche -->
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-307-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-307-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 307">
<a href="images/optimized/kitchen/FotoPosch-307-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-307-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 307">
<picture>
<source srcset="images/optimized/küche/FotoPosch-307-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-307-800w.jpg" alt="Küche – FotoPosch 307" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-307-800w.webp 800w, images/optimized/kitchen/FotoPosch-307-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-307-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-307-800w.jpg 800w, images/optimized/kitchen/FotoPosch-307-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 307" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 307</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-317-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-317-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 317">
<a href="images/optimized/kitchen/FotoPosch-317-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-317-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 317">
<picture>
<source srcset="images/optimized/küche/FotoPosch-317-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-317-800w.jpg" alt="Küche – FotoPosch 317" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-317-800w.webp 800w, images/optimized/kitchen/FotoPosch-317-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-317-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-317-800w.jpg 800w, images/optimized/kitchen/FotoPosch-317-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 317" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 317</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-318-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-318-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 318">
<a href="images/optimized/kitchen/FotoPosch-318-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-318-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 318">
<picture>
<source srcset="images/optimized/küche/FotoPosch-318-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-318-800w.jpg" alt="Küche – FotoPosch 318" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-318-800w.webp 800w, images/optimized/kitchen/FotoPosch-318-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-318-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-318-800w.jpg 800w, images/optimized/kitchen/FotoPosch-318-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 318" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 318</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-419-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-419-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 419">
<a href="images/optimized/kitchen/FotoPosch-419-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-419-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 419">
<picture>
<source srcset="images/optimized/küche/FotoPosch-419-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-419-800w.jpg" alt="Küche – FotoPosch 419" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-419-800w.webp 800w, images/optimized/kitchen/FotoPosch-419-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-419-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-419-800w.jpg 800w, images/optimized/kitchen/FotoPosch-419-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 419" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 419</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-420-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-420-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 420">
<a href="images/optimized/kitchen/FotoPosch-420-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-420-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 420">
<picture>
<source srcset="images/optimized/küche/FotoPosch-420-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-420-800w.jpg" alt="Küche – FotoPosch 420" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-420-800w.webp 800w, images/optimized/kitchen/FotoPosch-420-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-420-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-420-800w.jpg 800w, images/optimized/kitchen/FotoPosch-420-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 420" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 420</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-421-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-421-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 421">
<a href="images/optimized/kitchen/FotoPosch-421-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-421-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 421">
<picture>
<source srcset="images/optimized/küche/FotoPosch-421-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-421-800w.jpg" alt="Küche – FotoPosch 421" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-421-800w.webp 800w, images/optimized/kitchen/FotoPosch-421-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-421-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-421-800w.jpg 800w, images/optimized/kitchen/FotoPosch-421-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 421" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 421</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-422-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-422-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 422">
<a href="images/optimized/kitchen/FotoPosch-422-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-422-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 422">
<picture>
<source srcset="images/optimized/küche/FotoPosch-422-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-422-800w.jpg" alt="Küche – FotoPosch 422" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-422-800w.webp 800w, images/optimized/kitchen/FotoPosch-422-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-422-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-422-800w.jpg 800w, images/optimized/kitchen/FotoPosch-422-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 422" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 422</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-423-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-423-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 423">
<a href="images/optimized/kitchen/FotoPosch-423-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-423-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 423">
<picture>
<source srcset="images/optimized/küche/FotoPosch-423-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-423-800w.jpg" alt="Küche – FotoPosch 423" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-423-800w.webp 800w, images/optimized/kitchen/FotoPosch-423-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-423-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-423-800w.jpg 800w, images/optimized/kitchen/FotoPosch-423-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 423" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 423</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-424-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-424-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 424">
<a href="images/optimized/kitchen/FotoPosch-424-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-424-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 424">
<picture>
<source srcset="images/optimized/küche/FotoPosch-424-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-424-800w.jpg" alt="Küche – FotoPosch 424" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-424-800w.webp 800w, images/optimized/kitchen/FotoPosch-424-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-424-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-424-800w.jpg 800w, images/optimized/kitchen/FotoPosch-424-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 424" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 424</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-425-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-425-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 425">
<a href="images/optimized/kitchen/FotoPosch-425-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-425-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 425">
<picture>
<source srcset="images/optimized/küche/FotoPosch-425-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-425-800w.jpg" alt="Küche – FotoPosch 425" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-425-800w.webp 800w, images/optimized/kitchen/FotoPosch-425-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-425-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-425-800w.jpg 800w, images/optimized/kitchen/FotoPosch-425-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 425" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 425</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-426-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-426-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 426">
<a href="images/optimized/kitchen/FotoPosch-426-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-426-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 426">
<picture>
<source srcset="images/optimized/küche/FotoPosch-426-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-426-800w.jpg" alt="Küche – FotoPosch 426" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-426-800w.webp 800w, images/optimized/kitchen/FotoPosch-426-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-426-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-426-800w.jpg 800w, images/optimized/kitchen/FotoPosch-426-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 426" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 426</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-427-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-427-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 427">
<a href="images/optimized/kitchen/FotoPosch-427-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-427-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 427">
<picture>
<source srcset="images/optimized/küche/FotoPosch-427-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-427-800w.jpg" alt="Küche – FotoPosch 427" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-427-800w.webp 800w, images/optimized/kitchen/FotoPosch-427-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-427-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-427-800w.jpg 800w, images/optimized/kitchen/FotoPosch-427-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 427" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 427</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/küche/FotoPosch-428-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/küche/FotoPosch-428-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 428">
<a href="images/optimized/kitchen/FotoPosch-428-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-428-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 428">
<picture>
<source srcset="images/optimized/küche/FotoPosch-428-800w.webp" type="image/webp">
<img src="images/optimized/küche/FotoPosch-428-800w.jpg" alt="Küche – FotoPosch 428" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-428-800w.webp 800w, images/optimized/kitchen/FotoPosch-428-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-428-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-428-800w.jpg 800w, images/optimized/kitchen/FotoPosch-428-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 428" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 428</figcaption>
@ -167,127 +175,127 @@
<!-- Außenbereich -->
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-101-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-101-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 101">
<a href="images/optimized/outdoor/FotoPosch-101-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-101-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 101">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-101-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-101-800w.jpg" alt="Außenbereich – FotoPosch 101" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-101-800w.webp 800w, images/optimized/outdoor/FotoPosch-101-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-101-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-101-800w.jpg 800w, images/optimized/outdoor/FotoPosch-101-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 101" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 101</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-102-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-102-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 102">
<a href="images/optimized/outdoor/FotoPosch-102-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-102-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 102">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-102-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-102-800w.jpg" alt="Außenbereich – FotoPosch 102" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-102-800w.webp 800w, images/optimized/outdoor/FotoPosch-102-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-102-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-102-800w.jpg 800w, images/optimized/outdoor/FotoPosch-102-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 102" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 102</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-108-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-108-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 108">
<a href="images/optimized/outdoor/FotoPosch-108-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-108-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 108">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-108-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-108-800w.jpg" alt="Außenbereich – FotoPosch 108" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-108-800w.webp 800w, images/optimized/outdoor/FotoPosch-108-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-108-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-108-800w.jpg 800w, images/optimized/outdoor/FotoPosch-108-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 108" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 108</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-109-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-109-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 109">
<a href="images/optimized/outdoor/FotoPosch-109-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-109-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 109">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-109-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-109-800w.jpg" alt="Außenbereich – FotoPosch 109" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-109-800w.webp 800w, images/optimized/outdoor/FotoPosch-109-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-109-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-109-800w.jpg 800w, images/optimized/outdoor/FotoPosch-109-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 109" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 109</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-110-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-110-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 110">
<a href="images/optimized/outdoor/FotoPosch-110-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-110-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 110">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-110-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-110-800w.jpg" alt="Außenbereich – FotoPosch 110" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-110-800w.webp 800w, images/optimized/outdoor/FotoPosch-110-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-110-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-110-800w.jpg 800w, images/optimized/outdoor/FotoPosch-110-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 110" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 110</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-111-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-111-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 111">
<a href="images/optimized/outdoor/FotoPosch-111-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-111-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 111">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-111-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-111-800w.jpg" alt="Außenbereich – FotoPosch 111" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-111-800w.webp 800w, images/optimized/outdoor/FotoPosch-111-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-111-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-111-800w.jpg 800w, images/optimized/outdoor/FotoPosch-111-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 111" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 111</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-112-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-112-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 112">
<a href="images/optimized/outdoor/FotoPosch-112-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-112-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 112">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-112-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-112-800w.jpg" alt="Außenbereich – FotoPosch 112" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-112-800w.webp 800w, images/optimized/outdoor/FotoPosch-112-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-112-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-112-800w.jpg 800w, images/optimized/outdoor/FotoPosch-112-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 112" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 112</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-204-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-204-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 204">
<a href="images/optimized/outdoor/FotoPosch-204-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-204-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 204">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-204-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-204-800w.jpg" alt="Außenbereich – FotoPosch 204" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-204-800w.webp 800w, images/optimized/outdoor/FotoPosch-204-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-204-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-204-800w.jpg 800w, images/optimized/outdoor/FotoPosch-204-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 204" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 204</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-205-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-205-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 205">
<a href="images/optimized/outdoor/FotoPosch-205-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-205-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 205">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-205-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-205-800w.jpg" alt="Außenbereich – FotoPosch 205" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-205-800w.webp 800w, images/optimized/outdoor/FotoPosch-205-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-205-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-205-800w.jpg 800w, images/optimized/outdoor/FotoPosch-205-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 205" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 205</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-213-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-213-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 213">
<a href="images/optimized/outdoor/FotoPosch-213-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-213-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 213">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-213-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-213-800w.jpg" alt="Außenbereich – FotoPosch 213" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-213-800w.webp 800w, images/optimized/outdoor/FotoPosch-213-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-213-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-213-800w.jpg 800w, images/optimized/outdoor/FotoPosch-213-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 213" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 213</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-214-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-214-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 214">
<a href="images/optimized/outdoor/FotoPosch-214-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-214-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 214">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-214-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-214-800w.jpg" alt="Außenbereich – FotoPosch 214" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-214-800w.webp 800w, images/optimized/outdoor/FotoPosch-214-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-214-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-214-800w.jpg 800w, images/optimized/outdoor/FotoPosch-214-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 214" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 214</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-215-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-215-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 215">
<a href="images/optimized/outdoor/FotoPosch-215-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-215-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 215">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-215-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-215-800w.jpg" alt="Außenbereich – FotoPosch 215" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-215-800w.webp 800w, images/optimized/outdoor/FotoPosch-215-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-215-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-215-800w.jpg 800w, images/optimized/outdoor/FotoPosch-215-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 215" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 215</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-216-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-216-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 216">
<a href="images/optimized/outdoor/FotoPosch-216-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-216-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 216">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-216-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-216-800w.jpg" alt="Außenbereich – FotoPosch 216" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-216-800w.webp 800w, images/optimized/outdoor/FotoPosch-216-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-216-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-216-800w.jpg 800w, images/optimized/outdoor/FotoPosch-216-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 216" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 216</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/aussenbereich/FotoPosch-306-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/aussenbereich/FotoPosch-306-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 306">
<a href="images/optimized/outdoor/FotoPosch-306-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-306-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 306">
<picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-306-800w.webp" type="image/webp">
<img src="images/optimized/aussenbereich/FotoPosch-306-800w.jpg" alt="Außenbereich – FotoPosch 306" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-306-800w.webp 800w, images/optimized/outdoor/FotoPosch-306-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-306-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-306-800w.jpg 800w, images/optimized/outdoor/FotoPosch-306-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 306" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 306</figcaption>
@ -295,73 +303,73 @@
<!-- Sonderanfertigungen -->
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/sonderanfertigungen/FotoPosch029-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/sonderanfertigungen/FotoPosch029-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 029">
<a href="images/optimized/custom/FotoPosch029-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch029-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 029">
<picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch029-800w.webp" type="image/webp">
<img src="images/optimized/sonderanfertigungen/FotoPosch029-800w.jpg" alt="Sonderanfertigung – FotoPosch 029" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch029-800w.webp 800w, images/optimized/custom/FotoPosch029-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch029-800w.jpg" srcset="images/optimized/custom/FotoPosch029-800w.jpg 800w, images/optimized/custom/FotoPosch029-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 029" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 029</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/sonderanfertigungen/FotoPosch103-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/sonderanfertigungen/FotoPosch103-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 103">
<a href="images/optimized/custom/FotoPosch103-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch103-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 103">
<picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch103-800w.webp" type="image/webp">
<img src="images/optimized/sonderanfertigungen/FotoPosch103-800w.jpg" alt="Sonderanfertigung – FotoPosch 103" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch103-800w.webp 800w, images/optimized/custom/FotoPosch103-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch103-800w.jpg" srcset="images/optimized/custom/FotoPosch103-800w.jpg 800w, images/optimized/custom/FotoPosch103-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 103" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 103</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/sonderanfertigungen/FotoPosch-430-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/sonderanfertigungen/FotoPosch-430-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 430">
<a href="images/optimized/custom/FotoPosch-430-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-430-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 430">
<picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-430-800w.webp" type="image/webp">
<img src="images/optimized/sonderanfertigungen/FotoPosch-430-800w.jpg" alt="Sonderanfertigung – FotoPosch 430" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-430-800w.webp 800w, images/optimized/custom/FotoPosch-430-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-430-800w.jpg" srcset="images/optimized/custom/FotoPosch-430-800w.jpg 800w, images/optimized/custom/FotoPosch-430-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 430" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 430</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/sonderanfertigungen/FotoPosch-431-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/sonderanfertigungen/FotoPosch-431-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 431">
<a href="images/optimized/custom/FotoPosch-431-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-431-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 431">
<picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-431-800w.webp" type="image/webp">
<img src="images/optimized/sonderanfertigungen/FotoPosch-431-800w.jpg" alt="Sonderanfertigung – FotoPosch 431" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-431-800w.webp 800w, images/optimized/custom/FotoPosch-431-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-431-800w.jpg" srcset="images/optimized/custom/FotoPosch-431-800w.jpg 800w, images/optimized/custom/FotoPosch-431-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 431" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 431</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/sonderanfertigungen/FotoPosch-432-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/sonderanfertigungen/FotoPosch-432-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 432">
<a href="images/optimized/custom/FotoPosch-432-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-432-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 432">
<picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-432-800w.webp" type="image/webp">
<img src="images/optimized/sonderanfertigungen/FotoPosch-432-800w.jpg" alt="Sonderanfertigung – FotoPosch 432" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-432-800w.webp 800w, images/optimized/custom/FotoPosch-432-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-432-800w.jpg" srcset="images/optimized/custom/FotoPosch-432-800w.jpg 800w, images/optimized/custom/FotoPosch-432-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 432" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 432</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/sonderanfertigungen/FotoPosch-433-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/sonderanfertigungen/FotoPosch-433-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 433">
<a href="images/optimized/custom/FotoPosch-433-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-433-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 433">
<picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-433-800w.webp" type="image/webp">
<img src="images/optimized/sonderanfertigungen/FotoPosch-433-800w.jpg" alt="Sonderanfertigung – FotoPosch 433" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-433-800w.webp 800w, images/optimized/custom/FotoPosch-433-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-433-800w.jpg" srcset="images/optimized/custom/FotoPosch-433-800w.jpg 800w, images/optimized/custom/FotoPosch-433-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 433" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 433</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/sonderanfertigungen/FotoPosch-434-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/sonderanfertigungen/FotoPosch-434-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 434">
<a href="images/optimized/custom/FotoPosch-434-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-434-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 434">
<picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-434-800w.webp" type="image/webp">
<img src="images/optimized/sonderanfertigungen/FotoPosch-434-800w.jpg" alt="Sonderanfertigung – FotoPosch 434" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-434-800w.webp 800w, images/optimized/custom/FotoPosch-434-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-434-800w.jpg" srcset="images/optimized/custom/FotoPosch-434-800w.jpg 800w, images/optimized/custom/FotoPosch-434-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 434" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 434</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/sonderanfertigungen/FotoPosch-435-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/sonderanfertigungen/FotoPosch-435-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 435">
<a href="images/optimized/custom/FotoPosch-435-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-435-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 435">
<picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-435-800w.webp" type="image/webp">
<img src="images/optimized/sonderanfertigungen/FotoPosch-435-800w.jpg" alt="Sonderanfertigung – FotoPosch 435" width="800" height="600" loading="lazy" decoding="async">
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-435-800w.webp 800w, images/optimized/custom/FotoPosch-435-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-435-800w.jpg" srcset="images/optimized/custom/FotoPosch-435-800w.jpg 800w, images/optimized/custom/FotoPosch-435-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 435" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 435</figcaption>
@ -388,8 +396,8 @@
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Musterstraße 1 · 12345 Musterort</p>
<p>Tel.: 01234 / 567890</p>
<p>Hauptstraße 3a · 3443 Kreuth</p>
<p>Tel.: 02274 / 8874</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>

39
scripts/build.js Normal file
View file

@ -0,0 +1,39 @@
/**
* Static page builder for Tischlerei Staffenberger.
* Expands <!-- include:partials/x.html --> markers in templates/*.html
* with the referenced partial's contents and writes the result to the
* project root (index.html, pictures.html, shop.html, impressum.html).
*
* Run: node scripts/build.js
*/
'use strict';
const fs = require('fs');
const path = require('path');
const PROJECT_ROOT = path.join(__dirname, '..');
const TEMPLATES_DIR = path.join(PROJECT_ROOT, 'templates');
const INCLUDE_RE = /[ \t]*<!-- include:([\w./-]+) -->/g;
function expandIncludes(content) {
return content.replace(INCLUDE_RE, (match, includePath) => {
const partialPath = path.join(PROJECT_ROOT, includePath);
return fs.readFileSync(partialPath, 'utf8').replace(/\n$/, '');
});
}
function main() {
const pages = fs.readdirSync(TEMPLATES_DIR).filter(f => f.endsWith('.html'));
for (const page of pages) {
const templatePath = path.join(TEMPLATES_DIR, page);
const outputPath = path.join(PROJECT_ROOT, page);
const content = expandIncludes(fs.readFileSync(templatePath, 'utf8'));
fs.writeFileSync(outputPath, content);
console.log(`built ${page}`);
}
}
main();

6
scripts/optimize-images.js
View file

@ -18,9 +18,9 @@ const OUTPUT_ROOT = path.join(PROJECT_ROOT, 'images', 'optimized');
// Gallery categories: [input subdir, output subdir]
const GALLERY_DIRS = [
['küche', 'küche'],
['aussenbereich', 'aussenbereich'],
['sonderanfertigungen', 'sonderanfertigungen'],
['kitchen', 'kitchen'],
['outdoor', 'outdoor'],
['custom', 'custom'],
];
const GALLERY_SIZES = [800, 1920];

48
shop-item-template.html
View file

@ -1,24 +1,24 @@
<!--
Template for one shop item/card.
Usage:
1) Copy the whole <article class="product-card"> ... </article>
2) Paste it inside <div class="shop-grid" id="shop-grid"> in `shop.html`
3) Replace placeholders (image, texts, price, data-product)
-->
<article class="product-card">
<img
class="product-image"
src="images/fotowebsite/k%C3%BCche/FotoPosch%20307.jpg"
alt="Produktbild (ersetzen)"
width="400"
height="400"
>
<div class="product-body">
<h3>Artikelname (ersetzen)</h3>
<p class="product-desc">Kurzbeschreibung (ersetzen). Maße/Material/Details hinzufügen.</p>
<p class="product-price">0,00 €</p>
<a href="#" class="btn" data-product="Artikelname (ersetzen)">Anfragen</a>
</div>
</article>
<!--
Template for one shop item/card.
Usage:
1) Copy the whole <article class="product-card"> ... </article>
2) Paste it inside <div class="shop-grid" id="shop-grid"> in `shop.html`
3) Replace placeholders (image, texts, price, data-product)
-->
<article class="product-card">
<img
class="product-image"
src="images/fotowebsite/kitchen/FotoPosch%20307.jpg"
alt="Produktbild (ersetzen)"
width="400"
height="400"
>
<div class="product-body">
<h3>Artikelname (ersetzen)</h3>
<p class="product-desc">Kurzbeschreibung (ersetzen). Maße/Material/Details hinzufügen.</p>
<p class="product-price">0,00 €</p>
<a href="#" class="btn" data-product="Artikelname (ersetzen)">Anfragen</a>
</div>
</article>

132
shop.html
View file

@ -1,62 +1,70 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop – Tischlerei Staffenberger</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<header class="site-header">
<div class="hero-banner">
<div class="hero-image" aria-hidden="true"></div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-text">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<h1>Tischlerei Staffenberger</h1>
<p class="hero-subtitle">Handwerk mit Tradition</p>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="layout">
<h1 class="page-title">Kleine Serie & Einzelstücke</h1>
<p>Ausgewählte Stücke können Sie anfragen. Kein Online-Zahlung – wir klären alles per Kontakt.</p>
<!-- ========== Product grid ========== -->
<div class="shop-grid" id="shop-grid">
<!-- Add products here (copy from shop-item-template.html) -->
</div>
<p id="shop-empty-message" class="shop-empty-message">Zurzeit sind keine Artikel verfügbar.</p>
</div>
</main>
<!-- ========== Footer ========== -->
<footer class="site-footer">
<div class="layout">
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Musterstraße 1 · 12345 Musterort</p>
<p>Tel.: 01234 / 567890</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="index.html">Start</a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop – Tischlerei Staffenberger</title>
<meta name="description" content="Kleine Serie und Einzelstücke der Tischlerei Staffenberger zum Anfragen – handgefertigte Möbel nach Maß.">
<link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tischlerei Staffenberger">
<meta property="og:locale" content="de_AT">
<meta property="og:title" content="Shop – Tischlerei Staffenberger">
<meta property="og:description" content="Kleine Serie und Einzelstücke zum Anfragen – handgefertigte Möbel nach Maß.">
<meta property="og:image" content="images/optimized/banner-1920w.jpg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<header class="site-header">
<div class="hero-banner">
<div class="hero-image" aria-hidden="true"></div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-text">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<h1>Tischlerei Staffenberger</h1>
<p class="hero-subtitle">Handwerk mit Tradition</p>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="layout">
<h1 class="page-title">Kleine Serie & Einzelstücke</h1>
<p>Ausgewählte Stücke können Sie anfragen. Kein Online-Zahlung – wir klären alles per Kontakt.</p>
<!-- ========== Product grid ========== -->
<div class="shop-grid" id="shop-grid">
<!-- Add products here (copy from shop-item-template.html) -->
</div>
<p id="shop-empty-message" class="shop-empty-message">Zurzeit sind keine Artikel verfügbar.</p>
</div>
</main>
<!-- ========== Footer ========== -->
<footer class="site-footer">
<div class="layout">
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Hauptstraße 3a · 3443 Kreuth</p>
<p>Tel.: 02274 / 8874</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="index.html">Start</a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>

79
templates/impressum.html Normal file
View file

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum – Tischlerei Staffenberger</title>
<meta name="description" content="Impressum der Tischlerei Staffenberger – Kontakt- und Anbieterinformationen.">
<link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tischlerei Staffenberger">
<meta property="og:locale" content="de_AT">
<meta property="og:title" content="Impressum – Tischlerei Staffenberger">
<meta property="og:image" content="images/optimized/banner-1920w.jpg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<!-- include:partials/header.html -->
<main>
<div class="layout">
<h1 class="page-title">Impressum</h1>
<div class="impressum-content">
<!-- Angaben gemäß § 5 ECG (E-Commerce-Gesetz, Österreich) -->
<section id="anbieter">
<h2>Anbieter</h2>
<p>Tischlerei Staffenberger<br>Inhaber: Erich Staffenberger</p>
<address>
Hauptstraße 3a<br>
3443 Kreuth<br>
Österreich
</address>
</section>
<section id="kontakt">
<h2>Kontakt</h2>
<p>Telefon: 02274 / 8874</p>
<p>E-Mail: info@tischlerei-staffenberger.at</p>
</section>
<section>
<h2>Gewerberechtliche Angaben</h2>
<p>Gewerbeberechtigung derzeit in Beantragung. Angaben zu Gewerbewortlaut und zuständiger Gewerbebehörde (Bezirkshauptmannschaft) werden hier ergänzt, sobald die Berechtigung vorliegt.</p>
<p>Anwendbare Rechtsvorschrift: Gewerbeordnung 1994 (GewO), abrufbar unter <a href="https://www.ris.bka.gv.at" target="_blank" rel="noopener">www.ris.bka.gv.at</a>.</p>
</section>
<section>
<h2>Umsatzsteuer-Identifikationsnummer (UID)</h2>
<p>Liegt noch nicht vor und wird ergänzt, sobald vorhanden.</p>
</section>
<section>
<h2>Firmenbuchnummer</h2>
<p>Nicht im Firmenbuch eingetragen.</p>
</section>
<section>
<h2>EU-Streitschlichtung</h2>
<p>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit, abrufbar unter <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noopener">ec.europa.eu/consumers/odr</a>.</p>
</section>
<section>
<h2>Haftungsausschluss</h2>
<h3>Haftung für Inhalte</h3>
<p>Die Inhalte dieser Website wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann jedoch keine Gewähr übernommen werden.</p>
<h3>Haftung für Links</h3>
<p>Diese Website enthält Links zu externen Websites Dritter, auf deren Inhalte kein Einfluss besteht. Für diese fremden Inhalte kann daher keine Gewähr übernommen werden. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.</p>
</section>
</div>
</div>
</main>
<!-- ========== Footer ========== -->
<!-- include:partials/footer.html -->
<script src="js/script.js"></script>
</body>
</html>

66
templates/index.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tischlerei Staffenberger – Möbel & Küchen nach Maß</title>
<meta name="description" content="Tischlerei Staffenberger: Möbel, Küchen und Objekte für Haus und Garten nach Maß – handgefertigt in einem Ein-Mann-Betrieb in Österreich.">
<link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tischlerei Staffenberger">
<meta property="og:locale" content="de_AT">
<meta property="og:title" content="Tischlerei Staffenberger – Möbel & Küchen nach Maß">
<meta property="og:description" content="Möbel, Küchen und Objekte für Haus und Garten nach Maß – handgefertigt in einem Ein-Mann-Betrieb in Österreich.">
<meta property="og:image" content="images/optimized/banner-1920w.jpg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<!-- include:partials/header.html -->
<main>
<div class="layout">
<!-- ========== Hero ========== -->
<section class="hero">
<h2>Willkommen in meiner Werkstatt</h2>
<p>Seit Jahren fertige ich in meiner kleinen Tischlerei Möbel, Küchen und Objekte für Haus und Garten. Jedes Stück wird in Handarbeit geplant und umgesetzt – zuverlässig und in Ruhe.</p>
</section>
<!-- ========== About me ========== -->
<section class="section">
<h2>Über mich</h2>
<p>Ich bin gelernter Tischler und arbeite als Ein-Mann-Betrieb in der Region. Ob Reparatur, Einzelmöbel oder komplette Küche: Ich berate Sie unverbindlich und setze Ihre Wünsche fachgerecht um.</p>
</section>
<!-- ========== Services ========== -->
<section class="section">
<h2>Leistungen</h2>
<div class="services-grid">
<article class="service-card">
<h3>Möbel nach Maß</h3>
<p>Regale, Schränke, Tische und Sitzmöbel – maßgefertigt für Ihr Zuhause.</p>
</article>
<article class="service-card">
<h3>Küchen</h3>
<p>Küchenplanung und -fertigung in Massivholz und mit modernen Oberflächen.</p>
</article>
<article class="service-card">
<h3>Außenbereich</h3>
<p>Terassenmöbel, Sichtschutz, Carports und alles für Garten und Terrasse.</p>
</article>
</div>
</section>
<!-- ========== CTA ========== -->
<section class="cta-section">
<a href="impressum.html#kontakt" class="btn">Kontakt aufnehmen</a>
</section>
</div>
</main>
<!-- ========== Footer ========== -->
<!-- include:partials/footer.html -->
<script src="js/script.js"></script>
</body>
</html>

380
templates/pictures.html Normal file
View file

@ -0,0 +1,380 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bilder – Tischlerei Staffenberger</title>
<meta name="description" content="Referenzen und Bilder der Tischlerei Staffenberger: Küchen, Außenbereich und Sonderanfertigungen aus eigener Werkstatt.">
<link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tischlerei Staffenberger">
<meta property="og:locale" content="de_AT">
<meta property="og:title" content="Bilder – Tischlerei Staffenberger">
<meta property="og:description" content="Referenzen und Bilder: Küchen, Außenbereich und Sonderanfertigungen aus eigener Werkstatt.">
<meta property="og:image" content="images/optimized/banner-1920w.jpg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<!-- include:partials/header.html -->
<main>
<div class="layout">
<header class="gallery-header">
<h1 class="page-title">Referenzen & Bilder</h1>
<p>Einblicke in vergangene Projekte: Küchen, Außenbereich und Sonderanfertigungen.</p>
</header>
<!-- ========== Filter buttons ========== -->
<div class="gallery-filters">
<button type="button" class="active" data-filter="all">Alle</button>
<button type="button" data-filter="kitchen">Küche</button>
<button type="button" data-filter="outdoor">Außenbereich</button>
<button type="button" data-filter="custom">Sonderanfertigung</button>
</div>
<!-- ========== Gallery grid (images are clickable; lightbox opens on click) ========== -->
<div class="gallery-grid">
<!-- Küche -->
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-307-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-307-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 307">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-307-800w.webp 800w, images/optimized/kitchen/FotoPosch-307-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-307-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-307-800w.jpg 800w, images/optimized/kitchen/FotoPosch-307-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 307" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 307</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-317-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-317-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 317">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-317-800w.webp 800w, images/optimized/kitchen/FotoPosch-317-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-317-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-317-800w.jpg 800w, images/optimized/kitchen/FotoPosch-317-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 317" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 317</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-318-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-318-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 318">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-318-800w.webp 800w, images/optimized/kitchen/FotoPosch-318-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-318-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-318-800w.jpg 800w, images/optimized/kitchen/FotoPosch-318-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 318" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 318</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-419-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-419-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 419">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-419-800w.webp 800w, images/optimized/kitchen/FotoPosch-419-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-419-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-419-800w.jpg 800w, images/optimized/kitchen/FotoPosch-419-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 419" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 419</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-420-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-420-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 420">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-420-800w.webp 800w, images/optimized/kitchen/FotoPosch-420-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-420-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-420-800w.jpg 800w, images/optimized/kitchen/FotoPosch-420-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 420" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 420</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-421-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-421-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 421">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-421-800w.webp 800w, images/optimized/kitchen/FotoPosch-421-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-421-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-421-800w.jpg 800w, images/optimized/kitchen/FotoPosch-421-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 421" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 421</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-422-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-422-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 422">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-422-800w.webp 800w, images/optimized/kitchen/FotoPosch-422-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-422-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-422-800w.jpg 800w, images/optimized/kitchen/FotoPosch-422-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 422" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 422</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-423-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-423-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 423">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-423-800w.webp 800w, images/optimized/kitchen/FotoPosch-423-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-423-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-423-800w.jpg 800w, images/optimized/kitchen/FotoPosch-423-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 423" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 423</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-424-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-424-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 424">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-424-800w.webp 800w, images/optimized/kitchen/FotoPosch-424-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-424-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-424-800w.jpg 800w, images/optimized/kitchen/FotoPosch-424-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 424" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 424</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-425-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-425-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 425">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-425-800w.webp 800w, images/optimized/kitchen/FotoPosch-425-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-425-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-425-800w.jpg 800w, images/optimized/kitchen/FotoPosch-425-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 425" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 425</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-426-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-426-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 426">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-426-800w.webp 800w, images/optimized/kitchen/FotoPosch-426-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-426-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-426-800w.jpg 800w, images/optimized/kitchen/FotoPosch-426-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 426" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 426</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-427-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-427-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 427">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-427-800w.webp 800w, images/optimized/kitchen/FotoPosch-427-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-427-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-427-800w.jpg 800w, images/optimized/kitchen/FotoPosch-427-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 427" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 427</figcaption>
</figure>
<figure class="gallery-item" data-category="kitchen">
<a href="images/optimized/kitchen/FotoPosch-428-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/kitchen/FotoPosch-428-1920w.jpg" data-lightbox-alt="Küche – FotoPosch 428">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/kitchen/FotoPosch-428-800w.webp 800w, images/optimized/kitchen/FotoPosch-428-1920w.webp 1920w">
<img src="images/optimized/kitchen/FotoPosch-428-800w.jpg" srcset="images/optimized/kitchen/FotoPosch-428-800w.jpg 800w, images/optimized/kitchen/FotoPosch-428-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Küche – FotoPosch 428" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Küche – FotoPosch 428</figcaption>
</figure>
<!-- Außenbereich -->
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-101-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-101-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 101">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-101-800w.webp 800w, images/optimized/outdoor/FotoPosch-101-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-101-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-101-800w.jpg 800w, images/optimized/outdoor/FotoPosch-101-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 101" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 101</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-102-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-102-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 102">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-102-800w.webp 800w, images/optimized/outdoor/FotoPosch-102-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-102-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-102-800w.jpg 800w, images/optimized/outdoor/FotoPosch-102-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 102" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 102</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-108-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-108-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 108">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-108-800w.webp 800w, images/optimized/outdoor/FotoPosch-108-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-108-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-108-800w.jpg 800w, images/optimized/outdoor/FotoPosch-108-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 108" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 108</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-109-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-109-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 109">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-109-800w.webp 800w, images/optimized/outdoor/FotoPosch-109-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-109-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-109-800w.jpg 800w, images/optimized/outdoor/FotoPosch-109-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 109" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 109</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-110-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-110-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 110">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-110-800w.webp 800w, images/optimized/outdoor/FotoPosch-110-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-110-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-110-800w.jpg 800w, images/optimized/outdoor/FotoPosch-110-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 110" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 110</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-111-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-111-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 111">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-111-800w.webp 800w, images/optimized/outdoor/FotoPosch-111-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-111-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-111-800w.jpg 800w, images/optimized/outdoor/FotoPosch-111-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 111" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 111</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-112-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-112-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 112">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-112-800w.webp 800w, images/optimized/outdoor/FotoPosch-112-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-112-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-112-800w.jpg 800w, images/optimized/outdoor/FotoPosch-112-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 112" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 112</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-204-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-204-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 204">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-204-800w.webp 800w, images/optimized/outdoor/FotoPosch-204-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-204-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-204-800w.jpg 800w, images/optimized/outdoor/FotoPosch-204-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 204" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 204</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-205-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-205-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 205">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-205-800w.webp 800w, images/optimized/outdoor/FotoPosch-205-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-205-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-205-800w.jpg 800w, images/optimized/outdoor/FotoPosch-205-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 205" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 205</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-213-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-213-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 213">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-213-800w.webp 800w, images/optimized/outdoor/FotoPosch-213-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-213-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-213-800w.jpg 800w, images/optimized/outdoor/FotoPosch-213-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 213" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 213</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-214-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-214-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 214">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-214-800w.webp 800w, images/optimized/outdoor/FotoPosch-214-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-214-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-214-800w.jpg 800w, images/optimized/outdoor/FotoPosch-214-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 214" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 214</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-215-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-215-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 215">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-215-800w.webp 800w, images/optimized/outdoor/FotoPosch-215-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-215-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-215-800w.jpg 800w, images/optimized/outdoor/FotoPosch-215-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 215" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 215</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-216-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-216-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 216">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-216-800w.webp 800w, images/optimized/outdoor/FotoPosch-216-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-216-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-216-800w.jpg 800w, images/optimized/outdoor/FotoPosch-216-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 216" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 216</figcaption>
</figure>
<figure class="gallery-item" data-category="outdoor">
<a href="images/optimized/outdoor/FotoPosch-306-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/outdoor/FotoPosch-306-1920w.jpg" data-lightbox-alt="Außenbereich – FotoPosch 306">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/outdoor/FotoPosch-306-800w.webp 800w, images/optimized/outdoor/FotoPosch-306-1920w.webp 1920w">
<img src="images/optimized/outdoor/FotoPosch-306-800w.jpg" srcset="images/optimized/outdoor/FotoPosch-306-800w.jpg 800w, images/optimized/outdoor/FotoPosch-306-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Außenbereich – FotoPosch 306" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Außenbereich – FotoPosch 306</figcaption>
</figure>
<!-- Sonderanfertigungen -->
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/custom/FotoPosch029-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch029-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 029">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch029-800w.webp 800w, images/optimized/custom/FotoPosch029-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch029-800w.jpg" srcset="images/optimized/custom/FotoPosch029-800w.jpg 800w, images/optimized/custom/FotoPosch029-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 029" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 029</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/custom/FotoPosch103-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch103-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 103">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch103-800w.webp 800w, images/optimized/custom/FotoPosch103-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch103-800w.jpg" srcset="images/optimized/custom/FotoPosch103-800w.jpg 800w, images/optimized/custom/FotoPosch103-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 103" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 103</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/custom/FotoPosch-430-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-430-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 430">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-430-800w.webp 800w, images/optimized/custom/FotoPosch-430-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-430-800w.jpg" srcset="images/optimized/custom/FotoPosch-430-800w.jpg 800w, images/optimized/custom/FotoPosch-430-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 430" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 430</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/custom/FotoPosch-431-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-431-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 431">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-431-800w.webp 800w, images/optimized/custom/FotoPosch-431-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-431-800w.jpg" srcset="images/optimized/custom/FotoPosch-431-800w.jpg 800w, images/optimized/custom/FotoPosch-431-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 431" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 431</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/custom/FotoPosch-432-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-432-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 432">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-432-800w.webp 800w, images/optimized/custom/FotoPosch-432-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-432-800w.jpg" srcset="images/optimized/custom/FotoPosch-432-800w.jpg 800w, images/optimized/custom/FotoPosch-432-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 432" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 432</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/custom/FotoPosch-433-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-433-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 433">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-433-800w.webp 800w, images/optimized/custom/FotoPosch-433-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-433-800w.jpg" srcset="images/optimized/custom/FotoPosch-433-800w.jpg 800w, images/optimized/custom/FotoPosch-433-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 433" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 433</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/custom/FotoPosch-434-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-434-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 434">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-434-800w.webp 800w, images/optimized/custom/FotoPosch-434-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-434-800w.jpg" srcset="images/optimized/custom/FotoPosch-434-800w.jpg 800w, images/optimized/custom/FotoPosch-434-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 434" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 434</figcaption>
</figure>
<figure class="gallery-item" data-category="custom">
<a href="images/optimized/custom/FotoPosch-435-1920w.jpg" class="gallery-image-link" data-lightbox-src="images/optimized/custom/FotoPosch-435-1920w.jpg" data-lightbox-alt="Sonderanfertigung – FotoPosch 435">
<picture>
<source type="image/webp" sizes="(min-width: 640px) 300px, 100vw" srcset="images/optimized/custom/FotoPosch-435-800w.webp 800w, images/optimized/custom/FotoPosch-435-1920w.webp 1920w">
<img src="images/optimized/custom/FotoPosch-435-800w.jpg" srcset="images/optimized/custom/FotoPosch-435-800w.jpg 800w, images/optimized/custom/FotoPosch-435-1920w.jpg 1920w" sizes="(min-width: 640px) 300px, 100vw" alt="Sonderanfertigung – FotoPosch 435" width="800" height="600" loading="lazy" decoding="async">
</picture>
</a>
<figcaption>Sonderanfertigung – FotoPosch 435</figcaption>
</figure>
</div>
</div>
</main>
<!-- ========== Lightbox modal (open on gallery image click; close via X, backdrop or ESC) ========== -->
<div id="lightbox" class="lightbox" role="dialog" aria-modal="true" aria-label="Bild vergrößert">
<div class="lightbox-backdrop" aria-hidden="true"></div>
<button type="button" class="lightbox-prev" aria-label="Vorheriges Bild">&#8249;</button>
<button type="button" class="lightbox-next" aria-label="Nächstes Bild">&#8250;</button>
<div class="lightbox-content">
<button type="button" class="lightbox-close" aria-label="Schließen">&times;</button>
<img src="" alt="" id="lightbox-img">
</div>
</div>
<!-- ========== Footer ========== -->
<!-- include:partials/footer.html -->
<script src="js/script.js"></script>
</body>
</html>

39
templates/shop.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop – Tischlerei Staffenberger</title>
<meta name="description" content="Kleine Serie und Einzelstücke der Tischlerei Staffenberger zum Anfragen – handgefertigte Möbel nach Maß.">
<link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Tischlerei Staffenberger">
<meta property="og:locale" content="de_AT">
<meta property="og:title" content="Shop – Tischlerei Staffenberger">
<meta property="og:description" content="Kleine Serie und Einzelstücke zum Anfragen – handgefertigte Möbel nach Maß.">
<meta property="og:image" content="images/optimized/banner-1920w.jpg">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- ========== Header & Widescreen Hero Banner ========== -->
<!-- include:partials/header.html -->
<main>
<div class="layout">
<h1 class="page-title">Kleine Serie & Einzelstücke</h1>
<p>Ausgewählte Stücke können Sie anfragen. Kein Online-Zahlung – wir klären alles per Kontakt.</p>
<!-- ========== Product grid ========== -->
<div class="shop-grid" id="shop-grid">
<!-- Add products here (copy from shop-item-template.html) -->
</div>
<p id="shop-empty-message" class="shop-empty-message">Zurzeit sind keine Artikel verfügbar.</p>
</div>
</main>
<!-- ========== Footer ========== -->
<!-- include:partials/footer.html -->
<script src="js/script.js"></script>
</body>
</html>