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/ node_modules/
.claude/

44
README.md
View file

@ -7,19 +7,45 @@ Technik: reines HTML, CSS und JavaScript ohne Frameworks.
``` ```
Tischlerei-Staffenberger/ Tischlerei-Staffenberger/
├── index.html # Startseite (Landing Page) ├── index.html # Generiert von scripts/build.js – nicht direkt bearbeiten
├── pictures.html # Bildergalerie mit Filter ├── pictures.html # (dito)
├── shop.html # Kleiner Shop (Anfragen per E-Mail) ├── shop.html # (dito)
├── impressum.html # Impressum mit Platzhalterdaten ├── 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 ├── README.md
├── css/ ├── css/
│ └── style.css # Ein zentrales Stylesheet │ └── style.css # Ein zentrales Stylesheet
├── js/ ├── 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/ └── 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 ## Lokal ausführen
Die Seite besteht nur aus statischen Dateien. Sie können sie so starten: 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 ## Anpassungen
- **Impressum & Kontakt:** In `impressum.html` und im Footer aller Seiten die Platzhalterdaten (Name, Adresse, Telefon, E-Mail, USt-ID) durch echte Angaben ersetzen. - **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:` durch Ihre echte Adresse ersetzen. - **Shop-Anfragen:** In `js/script.js` die E-Mail-Adresse in der Zeile mit `mailto:` anpassen.
- **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`). - **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 ## 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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum – Tischlerei Staffenberger</title> <title>Impressum – Tischlerei Staffenberger</title>
<link rel="stylesheet" href="css/style.css"> <meta name="description" content="Impressum der Tischlerei Staffenberger – Kontakt- und Anbieterinformationen.">
</head> <link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<body> <meta property="og:type" content="website">
<!-- ========== Header & Widescreen Hero Banner ========== --> <meta property="og:site_name" content="Tischlerei Staffenberger">
<header class="site-header"> <meta property="og:locale" content="de_AT">
<div class="hero-banner"> <meta property="og:title" content="Impressum – Tischlerei Staffenberger">
<div class="hero-image" aria-hidden="true"></div> <meta property="og:image" content="images/optimized/banner-1920w.jpg">
<div class="hero-overlay" aria-hidden="true"></div> <link rel="stylesheet" href="css/style.css">
<div class="hero-text"> </head>
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true"> <body>
<h1>Tischlerei Staffenberger</h1> <!-- ========== Header & Widescreen Hero Banner ========== -->
<p class="hero-subtitle">Handwerk mit Tradition</p> <header class="site-header">
</div> <div class="hero-banner">
<nav class="main-nav"> <div class="hero-image" aria-hidden="true"></div>
<ul> <div class="hero-overlay" aria-hidden="true"></div>
<li><a href="index.html">Start</a></li> <div class="hero-text">
<li><a href="pictures.html">Bilder</a></li> <img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<li><a href="shop.html">Shop</a></li> <h1>Tischlerei Staffenberger</h1>
<li><a href="impressum.html">Impressum</a></li> <p class="hero-subtitle">Handwerk mit Tradition</p>
</ul> </div>
</nav> <nav class="main-nav">
</div> <ul>
</header> <li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<main> <li><a href="shop.html">Shop</a></li>
<div class="layout"> <li><a href="impressum.html">Impressum</a></li>
<h1 class="page-title">Impressum</h1> </ul>
</nav>
<div class="impressum-content"> </div>
<!-- Angaben gemäß § 5 TMG (Platzhalter) --> </header>
<section id="anbieter">
<h2>Anbieter</h2> <main>
<p>Tischlerei Staffenberger</p> <div class="layout">
<address> <h1 class="page-title">Impressum</h1>
Musterstraße 1<br>
12345 Musterort<br> <div class="impressum-content">
Deutschland <!-- Angaben gemäß § 5 ECG (E-Commerce-Gesetz, Österreich) -->
</address> <section id="anbieter">
</section> <h2>Anbieter</h2>
<p>Tischlerei Staffenberger<br>Inhaber: Erich Staffenberger</p>
<section id="kontakt"> <address>
<h2>Kontakt</h2> Hauptstraße 3a<br>
<p>Telefon: 01234 / 567890</p> 3443 Kreuth<br>
<p>E-Mail: info@tischlerei-staffenberger.example</p> Österreich
<p>Bitte ersetzen Sie die Platzhalterdaten durch Ihre echten Angaben.</p> </address>
</section> </section>
<section> <section id="kontakt">
<h2>Umsatzsteuer-ID</h2> <h2>Kontakt</h2>
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</p> <p>Telefon: 02274 / 8874</p>
<p>DE 123 456 789</p> <p>E-Mail: info@tischlerei-staffenberger.at</p>
<p>(Platzhalter – bei fehlender USt-ID bitte weglassen oder durch „Keine“ ersetzen.)</p> </section>
</section>
<section>
<section> <h2>Gewerberechtliche Angaben</h2>
<h2>Verantwortlich für den Inhalt</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>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</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>
<address> </section>
Max Staffenberger<br>
Musterstraße 1<br> <section>
12345 Musterort <h2>Umsatzsteuer-Identifikationsnummer (UID)</h2>
</address> <p>Liegt noch nicht vor und wird ergänzt, sobald vorhanden.</p>
</section> </section>
<section> <section>
<h2>Haftungsausschluss</h2> <h2>Firmenbuchnummer</h2>
<h3>Haftung für Inhalte</h3> <p>Nicht im Firmenbuch eingetragen.</p>
<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> </section>
<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>
</section> <h2>EU-Streitschlichtung</h2>
</div> <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>
</div> </section>
</main>
<section>
<!-- ========== Footer ========== --> <h2>Haftungsausschluss</h2>
<footer class="site-footer"> <h3>Haftung für Inhalte</h3>
<div class="layout"> <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>
<div class="footer-contact"> <h3>Haftung für Links</h3>
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true"> <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>
<p><strong>Tischlerei Staffenberger</strong></p> </section>
<p>Musterstraße 1 · 12345 Musterort</p> </div>
<p>Tel.: 01234 / 567890</p> </div>
</div> </main>
<div class="footer-links">
<a href="impressum.html">Impressum</a> <!-- ========== Footer ========== -->
<a href="index.html">Start</a> <footer class="site-footer">
</div> <div class="layout">
</div> <div class="footer-contact">
</footer> <img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<script src="js/script.js"></script> <p>Hauptstraße 3a · 3443 Kreuth</p>
</body> <p>Tel.: 02274 / 8874</p>
</html> </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> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tischlerei Staffenberger – Möbel & Küchen nach Maß</title> <title>Tischlerei Staffenberger – Möbel & Küchen nach Maß</title>
<link rel="stylesheet" href="css/style.css"> <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.">
</head> <link rel="icon" type="image/svg+xml" href="stafflogo06.svg">
<body> <meta property="og:type" content="website">
<!-- ========== Header & Widescreen Hero Banner ========== --> <meta property="og:site_name" content="Tischlerei Staffenberger">
<header class="site-header"> <meta property="og:locale" content="de_AT">
<div class="hero-banner"> <meta property="og:title" content="Tischlerei Staffenberger – Möbel & Küchen nach Maß">
<div class="hero-image" aria-hidden="true"></div> <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.">
<div class="hero-overlay" aria-hidden="true"></div> <meta property="og:image" content="images/optimized/banner-1920w.jpg">
<div class="hero-text"> <link rel="stylesheet" href="css/style.css">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true"> </head>
<h1>Tischlerei Staffenberger</h1> <body>
<p class="hero-subtitle">Handwerk mit Tradition</p> <!-- ========== Header & Widescreen Hero Banner ========== -->
</div> <header class="site-header">
<nav class="main-nav"> <div class="hero-banner">
<ul> <div class="hero-image" aria-hidden="true"></div>
<li><a href="index.html">Start</a></li> <div class="hero-overlay" aria-hidden="true"></div>
<li><a href="pictures.html">Bilder</a></li> <div class="hero-text">
<li><a href="shop.html">Shop</a></li> <img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<li><a href="impressum.html">Impressum</a></li> <h1>Tischlerei Staffenberger</h1>
</ul> <p class="hero-subtitle">Handwerk mit Tradition</p>
</nav> </div>
</div> <nav class="main-nav">
</header> <ul>
<li><a href="index.html">Start</a></li>
<main> <li><a href="pictures.html">Bilder</a></li>
<div class="layout"> <li><a href="shop.html">Shop</a></li>
<!-- ========== Hero ========== --> <li><a href="impressum.html">Impressum</a></li>
<section class="hero"> </ul>
<h2>Willkommen in meiner Werkstatt</h2> </nav>
<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> </div>
</section> </header>
<!-- ========== About me ========== --> <main>
<section class="section"> <div class="layout">
<h2>Über mich</h2> <!-- ========== Hero ========== -->
<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 class="hero">
</section> <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>
<!-- ========== Services ========== --> </section>
<section class="section">
<h2>Leistungen</h2> <!-- ========== About me ========== -->
<div class="services-grid"> <section class="section">
<article class="service-card"> <h2>Über mich</h2>
<h3>Möbel nach Maß</h3> <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>
<p>Regale, Schränke, Tische und Sitzmöbel – maßgefertigt für Ihr Zuhause.</p> </section>
</article>
<article class="service-card"> <!-- ========== Services ========== -->
<h3>Küchen</h3> <section class="section">
<p>Küchenplanung und -fertigung in Massivholz und mit modernen Oberflächen.</p> <h2>Leistungen</h2>
</article> <div class="services-grid">
<article class="service-card"> <article class="service-card">
<h3>Außenbereich</h3> <h3>Möbel nach Maß</h3>
<p>Terassenmöbel, Sichtschutz, Carports und alles für Garten und Terrasse.</p> <p>Regale, Schränke, Tische und Sitzmöbel – maßgefertigt für Ihr Zuhause.</p>
</article> </article>
</div> <article class="service-card">
</section> <h3>Küchen</h3>
<p>Küchenplanung und -fertigung in Massivholz und mit modernen Oberflächen.</p>
<!-- ========== CTA ========== --> </article>
<section class="cta-section"> <article class="service-card">
<a href="impressum.html#kontakt" class="btn">Kontakt aufnehmen</a> <h3>Außenbereich</h3>
</section> <p>Terassenmöbel, Sichtschutz, Carports und alles für Garten und Terrasse.</p>
</div> </article>
</main> </div>
</section>
<!-- ========== Footer ========== -->
<footer class="site-footer"> <!-- ========== CTA ========== -->
<div class="layout"> <section class="cta-section">
<div class="footer-contact"> <a href="impressum.html#kontakt" class="btn">Kontakt aufnehmen</a>
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true"> </section>
<p><strong>Tischlerei Staffenberger</strong></p> </div>
<p>Musterstraße 1 · 12345 Musterort</p> </main>
<p>Tel.: 01234 / 567890</p>
</div> <!-- ========== Footer ========== -->
<div class="footer-links"> <footer class="site-footer">
<a href="impressum.html">Impressum</a> <div class="layout">
<a href="index.html">Start</a> <div class="footer-contact">
</div> <img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
</div> <p><strong>Tischlerei Staffenberger</strong></p>
</footer> <p>Hauptstraße 3a · 3443 Kreuth</p>
<p>Tel.: 02274 / 8874</p>
<script src="js/script.js"></script> </div>
</body> <div class="footer-links">
</html> <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 * Tischlerei Staffenberger - Main JavaScript
* Handles navigation active state, gallery filtering, and lightbox on Bilder page. * Handles navigation active state, gallery filtering, and lightbox on Bilder page.
*/ */
(function () { (function () {
'use strict'; 'use strict';
/** /**
* Set active state on the current page's nav link based on URL pathname. * Set active state on the current page's nav link based on URL pathname.
*/ */
function setActiveNav() { function setActiveNav() {
var navLinks = document.querySelectorAll('.main-nav a'); var navLinks = document.querySelectorAll('.main-nav a');
var path = window.location.pathname; var path = window.location.pathname;
var page = path.split('/').pop() || 'index.html'; var page = path.split('/').pop() || 'index.html';
navLinks.forEach(function (link) { navLinks.forEach(function (link) {
var href = link.getAttribute('href'); var href = link.getAttribute('href');
if (!href) return; if (!href) return;
var linkPage = href.split('/').pop() || 'index.html'; var linkPage = href.split('/').pop() || 'index.html';
if (linkPage === page || (page === '' && linkPage === 'index.html')) { if (linkPage === page || (page === '' && linkPage === 'index.html')) {
link.classList.add('active'); link.classList.add('active');
} else { } else {
link.classList.remove('active'); link.classList.remove('active');
} }
}); });
} }
/** /**
* Gallery filter: show/hide items by data-category. * Gallery filter: show/hide items by data-category.
*/ */
function initGalleryFilter() { function initGalleryFilter() {
var filters = document.querySelectorAll('.gallery-filters button'); var filters = document.querySelectorAll('.gallery-filters button');
var items = document.querySelectorAll('.gallery-item'); var items = document.querySelectorAll('.gallery-item');
if (!filters.length || !items.length) return; if (!filters.length || !items.length) return;
filters.forEach(function (btn) { filters.forEach(function (btn) {
btn.addEventListener('click', function () { btn.addEventListener('click', function () {
var category = this.getAttribute('data-filter'); var category = this.getAttribute('data-filter');
// Update active button // Update active button
filters.forEach(function (b) { filters.forEach(function (b) {
b.classList.toggle('active', b === btn); b.classList.toggle('active', b === btn);
}); });
// Show/hide items // Show/hide items
items.forEach(function (item) { items.forEach(function (item) {
var itemCategory = item.getAttribute('data-category'); var itemCategory = item.getAttribute('data-category');
var show = category === 'all' || itemCategory === category; var show = category === 'all' || itemCategory === category;
item.style.display = show ? '' : 'none'; item.style.display = show ? '' : 'none';
}); });
}); });
}); });
} }
/** /**
* Lightbox on Bilder page: open on gallery image click, navigate with swipe / arrow * Lightbox on Bilder page: open on gallery image click, navigate with swipe / arrow
* keys / prev+next buttons, close via X, backdrop or ESC. * keys / prev+next buttons, close via X, backdrop or ESC.
* Respects the active gallery filter – only visible items are part of the sequence. * Respects the active gallery filter – only visible items are part of the sequence.
*/ */
function initLightbox() { function initLightbox() {
var lightbox = document.getElementById('lightbox'); var lightbox = document.getElementById('lightbox');
var lightboxImg = document.getElementById('lightbox-img'); var lightboxImg = document.getElementById('lightbox-img');
if (!lightbox || !lightboxImg) return; if (!lightbox || !lightboxImg) return;
var closeBtn = lightbox.querySelector('.lightbox-close'); var closeBtn = lightbox.querySelector('.lightbox-close');
var backdrop = lightbox.querySelector('.lightbox-backdrop'); var backdrop = lightbox.querySelector('.lightbox-backdrop');
var prevBtn = lightbox.querySelector('.lightbox-prev'); var prevBtn = lightbox.querySelector('.lightbox-prev');
var nextBtn = lightbox.querySelector('.lightbox-next'); var nextBtn = lightbox.querySelector('.lightbox-next');
var currentIndex = 0; var currentIndex = 0;
var sequence = []; // visible gallery links at the time the lightbox was opened var sequence = []; // visible gallery links at the time the lightbox was opened
var lastFocused = null; // element to restore focus to on close
function getVisibleLinks() {
return Array.from(document.querySelectorAll('.gallery-item')) function getFocusableEls() {
.filter(function (item) { return item.style.display !== 'none'; }) return [prevBtn, nextBtn, closeBtn].filter(function (el) {
.map(function (item) { return item.querySelector('.gallery-image-link'); }) return el && !el.hidden;
.filter(Boolean); });
} }
function showImage(index) { function onFocusTrap(e) {
var link = sequence[index]; if (e.key !== 'Tab') return;
if (!link) return; var focusable = getFocusableEls();
currentIndex = index; if (!focusable.length) return;
lightboxImg.src = link.getAttribute('data-lightbox-src') || link.getAttribute('href'); var first = focusable[0];
lightboxImg.alt = link.getAttribute('data-lightbox-alt') || ''; var last = focusable[focusable.length - 1];
var multiple = sequence.length > 1; if (e.shiftKey && document.activeElement === first) {
if (prevBtn) prevBtn.hidden = !multiple; e.preventDefault();
if (nextBtn) nextBtn.hidden = !multiple; last.focus();
} } else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
function navigate(dir) { first.focus();
showImage((currentIndex + dir + sequence.length) % sequence.length); }
} }
function openLightbox(index) { function getVisibleLinks() {
sequence = getVisibleLinks(); return Array.from(document.querySelectorAll('.gallery-item'))
showImage(index); .filter(function (item) { return item.style.display !== 'none'; })
lightbox.classList.add('is-open'); .map(function (item) { return item.querySelector('.gallery-image-link'); })
document.addEventListener('keydown', onKeydown); .filter(Boolean);
} }
function closeLightbox() { function showImage(index) {
lightbox.classList.remove('is-open'); var link = sequence[index];
document.removeEventListener('keydown', onKeydown); if (!link) return;
} currentIndex = index;
lightboxImg.src = link.getAttribute('data-lightbox-src') || link.getAttribute('href');
function onKeydown(e) { lightboxImg.alt = link.getAttribute('data-lightbox-alt') || '';
if (e.key === 'Escape') closeLightbox(); var multiple = sequence.length > 1;
if (e.key === 'ArrowRight') navigate(1); if (prevBtn) prevBtn.hidden = !multiple;
if (e.key === 'ArrowLeft') navigate(-1); if (nextBtn) nextBtn.hidden = !multiple;
} }
// Touch swipe function navigate(dir) {
var touchStartX = 0; showImage((currentIndex + dir + sequence.length) % sequence.length);
lightbox.addEventListener('touchstart', function (e) { }
touchStartX = e.changedTouches[0].clientX;
}, { passive: true }); function openLightbox(index, trigger) {
lightbox.addEventListener('touchend', function (e) { sequence = getVisibleLinks();
var dx = e.changedTouches[0].clientX - touchStartX; lastFocused = trigger || document.activeElement;
if (Math.abs(dx) > 50) navigate(dx < 0 ? 1 : -1); showImage(index);
}, { passive: true }); lightbox.classList.add('is-open');
document.addEventListener('keydown', onKeydown);
// Open on gallery click var focusable = getFocusableEls();
document.querySelectorAll('.gallery-image-link').forEach(function (link) { if (focusable.length) focusable[0].focus();
link.addEventListener('click', function (e) { }
e.preventDefault();
var visibles = getVisibleLinks(); function closeLightbox() {
var idx = visibles.indexOf(link); lightbox.classList.remove('is-open');
openLightbox(idx >= 0 ? idx : 0); document.removeEventListener('keydown', onKeydown);
}); if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus();
}); lastFocused = null;
}
if (prevBtn) prevBtn.addEventListener('click', function () { navigate(-1); });
if (nextBtn) nextBtn.addEventListener('click', function () { navigate(1); }); function onKeydown(e) {
if (closeBtn) closeBtn.addEventListener('click', closeLightbox); if (e.key === 'Escape') closeLightbox();
if (backdrop) backdrop.addEventListener('click', closeLightbox); if (e.key === 'ArrowRight') navigate(1);
} if (e.key === 'ArrowLeft') navigate(-1);
onFocusTrap(e);
/** }
* "Request" buttons on shop page – open mailto with product name in subject.
*/ // Touch swipe
function initShopRequests() { var touchStartX = 0;
var requestBtns = document.querySelectorAll('.product-card .btn[data-product]'); lightbox.addEventListener('touchstart', function (e) {
requestBtns.forEach(function (btn) { touchStartX = e.changedTouches[0].clientX;
btn.addEventListener('click', function (e) { }, { passive: true });
var product = this.getAttribute('data-product'); lightbox.addEventListener('touchend', function (e) {
if (product) { var dx = e.changedTouches[0].clientX - touchStartX;
// Open mail with subject line (no real checkout) – replace email with your address if (Math.abs(dx) > 50) navigate(dx < 0 ? 1 : -1);
var mailto = 'mailto:info@tischlerei-staffenberger.example?subject=Anfrage%20Produkt%3A%20' + encodeURIComponent(product); }, { passive: true });
window.location.href = mailto;
} // 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);
* Shop empty state: show message when no products are present. openLightbox(idx >= 0 ? idx : 0, link);
*/ });
function initShopEmptyState() { });
var emptyMsg = document.getElementById('shop-empty-message');
var grid = document.getElementById('shop-grid'); if (prevBtn) prevBtn.addEventListener('click', function () { navigate(-1); });
if (!emptyMsg || !grid) return; if (nextBtn) nextBtn.addEventListener('click', function () { navigate(1); });
if (closeBtn) closeBtn.addEventListener('click', closeLightbox);
var hasCards = grid.querySelectorAll('.product-card').length > 0; if (backdrop) backdrop.addEventListener('click', closeLightbox);
emptyMsg.hidden = hasCards; }
}
/**
/** * "Request" buttons on shop page – open mailto with product name in subject.
* Run on DOM ready. */
*/ function initShopRequests() {
function init() { var requestBtns = document.querySelectorAll('.product-card .btn[data-product]');
setActiveNav(); requestBtns.forEach(function (btn) {
initGalleryFilter(); btn.addEventListener('click', function (e) {
initLightbox(); var product = this.getAttribute('data-product');
initShopRequests(); if (product) {
initShopEmptyState(); // 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;
if (document.readyState === 'loading') { }
document.addEventListener('DOMContentLoaded', init); });
} else { });
init(); }
}
})(); /**
* 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", "name": "tischlerei-staffenberger",
"version": "1.0.0", "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.", "description": "Kleine, statische Website für einen selbstständigen Tischler (Ein-Mann-Betrieb). Technik: reines HTML, CSS und JavaScript ohne Frameworks.",
"main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "build": "node scripts/build.js",
"optimize-images": "node scripts/optimize-images.js"
}, },
"keywords": [], "keywords": [],
"author": "", "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 charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bilder – Tischlerei Staffenberger</title> <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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
@ -48,118 +56,118 @@
<!-- Küche --> <!-- Küche -->
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-307-800w.webp" type="image/webp"> <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/küche/FotoPosch-307-800w.jpg" alt="Küche – FotoPosch 307" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 307</figcaption> <figcaption>Küche – FotoPosch 307</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-317-800w.webp" type="image/webp"> <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/küche/FotoPosch-317-800w.jpg" alt="Küche – FotoPosch 317" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 317</figcaption> <figcaption>Küche – FotoPosch 317</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-318-800w.webp" type="image/webp"> <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/küche/FotoPosch-318-800w.jpg" alt="Küche – FotoPosch 318" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 318</figcaption> <figcaption>Küche – FotoPosch 318</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-419-800w.webp" type="image/webp"> <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/küche/FotoPosch-419-800w.jpg" alt="Küche – FotoPosch 419" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 419</figcaption> <figcaption>Küche – FotoPosch 419</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-420-800w.webp" type="image/webp"> <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/küche/FotoPosch-420-800w.jpg" alt="Küche – FotoPosch 420" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 420</figcaption> <figcaption>Küche – FotoPosch 420</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-421-800w.webp" type="image/webp"> <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/küche/FotoPosch-421-800w.jpg" alt="Küche – FotoPosch 421" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 421</figcaption> <figcaption>Küche – FotoPosch 421</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-422-800w.webp" type="image/webp"> <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/küche/FotoPosch-422-800w.jpg" alt="Küche – FotoPosch 422" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 422</figcaption> <figcaption>Küche – FotoPosch 422</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-423-800w.webp" type="image/webp"> <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/küche/FotoPosch-423-800w.jpg" alt="Küche – FotoPosch 423" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 423</figcaption> <figcaption>Küche – FotoPosch 423</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-424-800w.webp" type="image/webp"> <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/küche/FotoPosch-424-800w.jpg" alt="Küche – FotoPosch 424" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 424</figcaption> <figcaption>Küche – FotoPosch 424</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-425-800w.webp" type="image/webp"> <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/küche/FotoPosch-425-800w.jpg" alt="Küche – FotoPosch 425" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 425</figcaption> <figcaption>Küche – FotoPosch 425</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-426-800w.webp" type="image/webp"> <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/küche/FotoPosch-426-800w.jpg" alt="Küche – FotoPosch 426" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 426</figcaption> <figcaption>Küche – FotoPosch 426</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-427-800w.webp" type="image/webp"> <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/küche/FotoPosch-427-800w.jpg" alt="Küche – FotoPosch 427" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 427</figcaption> <figcaption>Küche – FotoPosch 427</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="kitchen"> <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> <picture>
<source srcset="images/optimized/küche/FotoPosch-428-800w.webp" type="image/webp"> <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/küche/FotoPosch-428-800w.jpg" alt="Küche – FotoPosch 428" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Küche – FotoPosch 428</figcaption> <figcaption>Küche – FotoPosch 428</figcaption>
@ -167,127 +175,127 @@
<!-- Außenbereich --> <!-- Außenbereich -->
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-101-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-101-800w.jpg" alt="Außenbereich – FotoPosch 101" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 101</figcaption> <figcaption>Außenbereich – FotoPosch 101</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-102-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-102-800w.jpg" alt="Außenbereich – FotoPosch 102" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 102</figcaption> <figcaption>Außenbereich – FotoPosch 102</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-108-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-108-800w.jpg" alt="Außenbereich – FotoPosch 108" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 108</figcaption> <figcaption>Außenbereich – FotoPosch 108</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-109-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-109-800w.jpg" alt="Außenbereich – FotoPosch 109" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 109</figcaption> <figcaption>Außenbereich – FotoPosch 109</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-110-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-110-800w.jpg" alt="Außenbereich – FotoPosch 110" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 110</figcaption> <figcaption>Außenbereich – FotoPosch 110</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-111-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-111-800w.jpg" alt="Außenbereich – FotoPosch 111" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 111</figcaption> <figcaption>Außenbereich – FotoPosch 111</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-112-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-112-800w.jpg" alt="Außenbereich – FotoPosch 112" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 112</figcaption> <figcaption>Außenbereich – FotoPosch 112</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-204-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-204-800w.jpg" alt="Außenbereich – FotoPosch 204" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 204</figcaption> <figcaption>Außenbereich – FotoPosch 204</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-205-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-205-800w.jpg" alt="Außenbereich – FotoPosch 205" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 205</figcaption> <figcaption>Außenbereich – FotoPosch 205</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-213-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-213-800w.jpg" alt="Außenbereich – FotoPosch 213" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 213</figcaption> <figcaption>Außenbereich – FotoPosch 213</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-214-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-214-800w.jpg" alt="Außenbereich – FotoPosch 214" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 214</figcaption> <figcaption>Außenbereich – FotoPosch 214</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-215-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-215-800w.jpg" alt="Außenbereich – FotoPosch 215" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 215</figcaption> <figcaption>Außenbereich – FotoPosch 215</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-216-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-216-800w.jpg" alt="Außenbereich – FotoPosch 216" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 216</figcaption> <figcaption>Außenbereich – FotoPosch 216</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="outdoor"> <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> <picture>
<source srcset="images/optimized/aussenbereich/FotoPosch-306-800w.webp" type="image/webp"> <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/aussenbereich/FotoPosch-306-800w.jpg" alt="Außenbereich – FotoPosch 306" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Außenbereich – FotoPosch 306</figcaption> <figcaption>Außenbereich – FotoPosch 306</figcaption>
@ -295,73 +303,73 @@
<!-- Sonderanfertigungen --> <!-- Sonderanfertigungen -->
<figure class="gallery-item" data-category="custom"> <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> <picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch029-800w.webp" type="image/webp"> <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/sonderanfertigungen/FotoPosch029-800w.jpg" alt="Sonderanfertigung – FotoPosch 029" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Sonderanfertigung – FotoPosch 029</figcaption> <figcaption>Sonderanfertigung – FotoPosch 029</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="custom"> <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> <picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch103-800w.webp" type="image/webp"> <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/sonderanfertigungen/FotoPosch103-800w.jpg" alt="Sonderanfertigung – FotoPosch 103" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Sonderanfertigung – FotoPosch 103</figcaption> <figcaption>Sonderanfertigung – FotoPosch 103</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="custom"> <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> <picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-430-800w.webp" type="image/webp"> <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/sonderanfertigungen/FotoPosch-430-800w.jpg" alt="Sonderanfertigung – FotoPosch 430" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Sonderanfertigung – FotoPosch 430</figcaption> <figcaption>Sonderanfertigung – FotoPosch 430</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="custom"> <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> <picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-431-800w.webp" type="image/webp"> <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/sonderanfertigungen/FotoPosch-431-800w.jpg" alt="Sonderanfertigung – FotoPosch 431" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Sonderanfertigung – FotoPosch 431</figcaption> <figcaption>Sonderanfertigung – FotoPosch 431</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="custom"> <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> <picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-432-800w.webp" type="image/webp"> <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/sonderanfertigungen/FotoPosch-432-800w.jpg" alt="Sonderanfertigung – FotoPosch 432" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Sonderanfertigung – FotoPosch 432</figcaption> <figcaption>Sonderanfertigung – FotoPosch 432</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="custom"> <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> <picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-433-800w.webp" type="image/webp"> <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/sonderanfertigungen/FotoPosch-433-800w.jpg" alt="Sonderanfertigung – FotoPosch 433" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Sonderanfertigung – FotoPosch 433</figcaption> <figcaption>Sonderanfertigung – FotoPosch 433</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="custom"> <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> <picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-434-800w.webp" type="image/webp"> <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/sonderanfertigungen/FotoPosch-434-800w.jpg" alt="Sonderanfertigung – FotoPosch 434" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Sonderanfertigung – FotoPosch 434</figcaption> <figcaption>Sonderanfertigung – FotoPosch 434</figcaption>
</figure> </figure>
<figure class="gallery-item" data-category="custom"> <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> <picture>
<source srcset="images/optimized/sonderanfertigungen/FotoPosch-435-800w.webp" type="image/webp"> <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/sonderanfertigungen/FotoPosch-435-800w.jpg" alt="Sonderanfertigung – FotoPosch 435" width="800" height="600" loading="lazy" decoding="async"> <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> </picture>
</a> </a>
<figcaption>Sonderanfertigung – FotoPosch 435</figcaption> <figcaption>Sonderanfertigung – FotoPosch 435</figcaption>
@ -388,8 +396,8 @@
<div class="footer-contact"> <div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true"> <img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p> <p><strong>Tischlerei Staffenberger</strong></p>
<p>Musterstraße 1 · 12345 Musterort</p> <p>Hauptstraße 3a · 3443 Kreuth</p>
<p>Tel.: 01234 / 567890</p> <p>Tel.: 02274 / 8874</p>
</div> </div>
<div class="footer-links"> <div class="footer-links">
<a href="impressum.html">Impressum</a> <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] // Gallery categories: [input subdir, output subdir]
const GALLERY_DIRS = [ const GALLERY_DIRS = [
['küche', 'küche'], ['kitchen', 'kitchen'],
['aussenbereich', 'aussenbereich'], ['outdoor', 'outdoor'],
['sonderanfertigungen', 'sonderanfertigungen'], ['custom', 'custom'],
]; ];
const GALLERY_SIZES = [800, 1920]; const GALLERY_SIZES = [800, 1920];

48
shop-item-template.html
View file

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

132
shop.html
View file

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