tischlerei-staffenberger/pictures.html
mrwhiski f2507033c3 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

411 lines
36 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 ========== -->
<header class="site-header">
<div class="hero-banner">
<div class="hero-image" aria-hidden="true"></div>
<div class="hero-overlay" aria-hidden="true"></div>
<div class="hero-text">
<img src="stafflogo06.svg" alt="" class="hero-logo" aria-hidden="true">
<h1>Tischlerei Staffenberger</h1>
<p class="hero-subtitle">Handwerk mit Tradition</p>
</div>
<nav class="main-nav">
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="pictures.html">Bilder</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="layout">
<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 ========== -->
<footer class="site-footer">
<div class="layout">
<div class="footer-contact">
<img src="stafflogo06.svg" alt="" class="footer-logo" aria-hidden="true">
<p><strong>Tischlerei Staffenberger</strong></p>
<p>Hauptstraße 3a · 3443 Kreuth</p>
<p>Tel.: 02274 / 8874</p>
</div>
<div class="footer-links">
<a href="impressum.html">Impressum</a>
<a href="index.html">Start</a>
</div>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>