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

56
impressum.html
View file

@ -4,6 +4,13 @@
<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>
<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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
@ -33,47 +40,50 @@
<h1 class="page-title">Impressum</h1> <h1 class="page-title">Impressum</h1>
<div class="impressum-content"> <div class="impressum-content">
<!-- Angaben gemäß § 5 TMG (Platzhalter) --> <!-- Angaben gemäß § 5 ECG (E-Commerce-Gesetz, Österreich) -->
<section id="anbieter"> <section id="anbieter">
<h2>Anbieter</h2> <h2>Anbieter</h2>
<p>Tischlerei Staffenberger</p> <p>Tischlerei Staffenberger<br>Inhaber: Erich Staffenberger</p>
<address> <address>
Musterstraße 1<br> Hauptstraße 3a<br>
12345 Musterort<br> 3443 Kreuth<br>
Deutschland Österreich
</address> </address>
</section> </section>
<section id="kontakt"> <section id="kontakt">
<h2>Kontakt</h2> <h2>Kontakt</h2>
<p>Telefon: 01234 / 567890</p> <p>Telefon: 02274 / 8874</p>
<p>E-Mail: info@tischlerei-staffenberger.example</p> <p>E-Mail: info@tischlerei-staffenberger.at</p>
<p>Bitte ersetzen Sie die Platzhalterdaten durch Ihre echten Angaben.</p>
</section> </section>
<section> <section>
<h2>Umsatzsteuer-ID</h2> <h2>Gewerberechtliche Angaben</h2>
<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:</p> <p>Gewerbeberechtigung derzeit in Beantragung. Angaben zu Gewerbewortlaut und zuständiger Gewerbebehörde (Bezirkshauptmannschaft) werden hier ergänzt, sobald die Berechtigung vorliegt.</p>
<p>DE 123 456 789</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>
<p>(Platzhalter – bei fehlender USt-ID bitte weglassen oder durch „Keine“ ersetzen.)</p>
</section> </section>
<section> <section>
<h2>Verantwortlich für den Inhalt</h2> <h2>Umsatzsteuer-Identifikationsnummer (UID)</h2>
<p>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:</p> <p>Liegt noch nicht vor und wird ergänzt, sobald vorhanden.</p>
<address> </section>
Max Staffenberger<br>
Musterstraße 1<br> <section>
12345 Musterort <h2>Firmenbuchnummer</h2>
</address> <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>
<section> <section>
<h2>Haftungsausschluss</h2> <h2>Haftungsausschluss</h2>
<h3>Haftung für Inhalte</h3> <h3>Haftung für Inhalte</h3>
<p>Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p> <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> <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> <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> </section>
</div> </div>
</div> </div>
@ -85,8 +95,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>

12
index.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>Tischlerei Staffenberger – Möbel & Küchen nach Maß</title> <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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
@ -74,8 +82,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>

34
js/script.js
View file

@ -71,6 +71,28 @@
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 getFocusableEls() {
return [prevBtn, nextBtn, closeBtn].filter(function (el) {
return el && !el.hidden;
});
}
function onFocusTrap(e) {
if (e.key !== 'Tab') return;
var focusable = getFocusableEls();
if (!focusable.length) return;
var first = focusable[0];
var last = focusable[focusable.length - 1];
if (e.shiftKey && document.activeElement === first) {
e.preventDefault();
last.focus();
} else if (!e.shiftKey && document.activeElement === last) {
e.preventDefault();
first.focus();
}
}
function getVisibleLinks() { function getVisibleLinks() {
return Array.from(document.querySelectorAll('.gallery-item')) return Array.from(document.querySelectorAll('.gallery-item'))
@ -94,22 +116,28 @@
showImage((currentIndex + dir + sequence.length) % sequence.length); showImage((currentIndex + dir + sequence.length) % sequence.length);
} }
function openLightbox(index) { function openLightbox(index, trigger) {
sequence = getVisibleLinks(); sequence = getVisibleLinks();
lastFocused = trigger || document.activeElement;
showImage(index); showImage(index);
lightbox.classList.add('is-open'); lightbox.classList.add('is-open');
document.addEventListener('keydown', onKeydown); document.addEventListener('keydown', onKeydown);
var focusable = getFocusableEls();
if (focusable.length) focusable[0].focus();
} }
function closeLightbox() { function closeLightbox() {
lightbox.classList.remove('is-open'); lightbox.classList.remove('is-open');
document.removeEventListener('keydown', onKeydown); document.removeEventListener('keydown', onKeydown);
if (lastFocused && typeof lastFocused.focus === 'function') lastFocused.focus();
lastFocused = null;
} }
function onKeydown(e) { function onKeydown(e) {
if (e.key === 'Escape') closeLightbox(); if (e.key === 'Escape') closeLightbox();
if (e.key === 'ArrowRight') navigate(1); if (e.key === 'ArrowRight') navigate(1);
if (e.key === 'ArrowLeft') navigate(-1); if (e.key === 'ArrowLeft') navigate(-1);
onFocusTrap(e);
} }
// Touch swipe // Touch swipe
@ -128,7 +156,7 @@
e.preventDefault(); e.preventDefault();
var visibles = getVisibleLinks(); var visibles = getVisibleLinks();
var idx = visibles.indexOf(link); var idx = visibles.indexOf(link);
openLightbox(idx >= 0 ? idx : 0); openLightbox(idx >= 0 ? idx : 0, link);
}); });
}); });
@ -148,7 +176,7 @@
var product = this.getAttribute('data-product'); var product = this.getAttribute('data-product');
if (product) { if (product) {
// Open mail with subject line (no real checkout) – replace email with your address // Open mail with subject line (no real checkout) – replace email with your address
var mailto = 'mailto:info@tischlerei-staffenberger.example?subject=Anfrage%20Produkt%3A%20' + encodeURIComponent(product); var mailto = 'mailto:info@tischlerei-staffenberger.at?subject=Anfrage%20Produkt%3A%20' + encodeURIComponent(product);
window.location.href = mailto; window.location.href = mailto;
} }
}); });

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];

2
shop-item-template.html
View file

@ -9,7 +9,7 @@ Usage:
<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"

12
shop.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>Shop – Tischlerei Staffenberger</title> <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"> <link rel="stylesheet" href="css/style.css">
</head> </head>
<body> <body>
@ -47,8 +55,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>

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>