tischlerei-staffenberger/templates/pictures.html
mrwhiski 63e3eff9da Real contact/Impressum data, SEO tags, responsive gallery images, a11y and templating fixes
- 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
2026-07-12 18:11:11 +02:00

380 lines
35 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>