Website-Entwurf für HEB Bauelemente (normtor.de)

Akquise-Demo mit Startseite (Tor-Intro, 24-h-Renovierung mit Uhr, Über uns, Fachbetrieb statt Discount), Galerie mit Filter und Großansicht, Kontaktseite mit Anfrageformular sowie Impressum- und Datenschutz-Entwürfen. Statisches HTML/CSS/JS, Seiten und Bilder werden über tools/ erzeugt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-04 22:52:10 +02:00
commit bec24e5bbc
@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Tore & Projekte – HEB Bauelemente Essenbach</title>
+<meta name="description" content="Garagentore aus der Region Landshut und Rottenburg: Deckensektionaltore, Seitensektionaltore, Schwingtore und Holztore von Normstahl.">
+<meta name="robots" content="noindex, nofollow">
+<link rel="canonical" href="https://normtor.de/projekte.html">
+<meta name="theme-color" content="#00569D">
+<meta property="og:type" content="website">
+<meta property="og:locale" content="de_DE">
+<meta property="og:site_name" content="HEB Bauelemente">
+<meta property="og:title" content="Tore & Projekte – HEB Bauelemente Essenbach">
+<meta property="og:description" content="Garagentore aus der Region Landshut und Rottenburg: Deckensektionaltore, Seitensektionaltore, Schwingtore und Holztore von Normstahl.">
+<meta property="og:url" content="https://normtor.de/projekte.html">
+<meta property="og:image" content="https://normtor.de/assets/img/og.jpg">
+<link rel="icon" href="assets/favicon.svg" type="image/svg+xml">
+<link rel="preload" href="assets/fonts/barlow-condensed-latin-700.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="assets/fonts/barlow-latin-400.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="assets/site.css">
+<script>(function(r){r.classList.add('js');try{if(r.hasAttribute('data-intro')&&!sessionStorage.getItem('heb-intro')&&matchMedia('(prefers-reduced-motion: no-preference)').matches)r.classList.add('has-intro')}catch(e){}setTimeout(function(){if(!r.classList.contains('ready'))r.classList.remove('has-intro')},3500)})(document.documentElement)</script>
+<script src="assets/site.js" defer></script>
+
+</head>
+<body>
+<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
+<header class="site-header">
+  <div class="wrap site-header__inner">
+    <a class="brand" href="index.html" aria-label="HEB Bauelemente, Wolfgang Haas – Startseite"><svg class="heb" viewBox="0 0 200 100" aria-hidden="true"><g fill="currentColor"><rect x="0" y="0" width="13" height="100"/><rect x="13" y="42" width="27" height="16"/><rect x="40" y="0" width="15" height="100"/><rect x="55" y="0" width="52" height="16"/><rect x="55" y="42" width="42" height="16"/><rect x="55" y="84" width="52" height="16"/><path fill-rule="evenodd" d="M116 0h58c15 0 24 9 24 23 0 11-6 19-14 22 10 3 16 11 16 23 0 19-12 32-30 32h-54zM134 16v26h36c6 0 10-5 10-13s-4-13-10-13zM134 58v26h38c7 0 11-5 11-13s-4-13-11-13z"/></g></svg><span class="brand__text"><b>Bauelemente</b><span>Wolfgang Haas · Essenbach</span></span></a>
+    <nav class="nav" aria-label="Hauptnavigation"><a class="nav__link" href="index.html#leistungen">Leistungen</a><a class="nav__link" href="index.html#renovierung">24-h-Renovierung</a><a class="nav__link" href="projekte.html" aria-current="page">Tore & Projekte</a><a class="nav__link" href="index.html#ueber-uns">Über uns</a><a class="nav__link" href="kontakt.html">Kontakt</a></nav>
+    <a class="btn btn--blue btn--sm header-call" href="tel:+4987031362"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>08703 / 13 62</span></a>
+    <button class="menu-btn" type="button" aria-expanded="false" aria-controls="mobile-nav" aria-label="Menü öffnen"><span></span><span></span></button>
+  </div>
+  <div class="mobile-nav" id="mobile-nav" hidden>
+    <ul><li><a href="index.html#leistungen">Leistungen</a></li><li><a href="index.html#renovierung">24-h-Renovierung</a></li><li><a href="projekte.html" aria-current="page">Tore & Projekte</a></li><li><a href="index.html#ueber-uns">Über uns</a></li><li><a href="kontakt.html">Kontakt</a></li></ul>
+    <a class="btn btn--blue" href="tel:+4987031362"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>Anrufen: 08703 / 13 62</span></a>
+  </div>
+</header>
+<main id="inhalt">
+
+<section class="page-hero">
+  <div class="wrap">
+    <p class="eyebrow">Galerie</p>
+    <h1 class="page-hero__title">Tore & Projekte</h1>
+    <p class="page-hero__lead">Eine Auswahl an Toren, die wir eingebaut haben, und an Modellen, die wir anbieten. Ein Klick vergrößert das Bild.</p>
+  </div>
+</section>
+<section class="section section--tight">
+  <div class="wrap">
+    <div class="filters" role="group" aria-label="Galerie filtern">
+      <button type="button" class="chip" data-filter="alle" aria-pressed="true">Alle</button><button type="button" class="chip" data-filter="region" aria-pressed="false">Aus der Region</button><button type="button" class="chip" data-filter="dst" aria-pressed="false">Deckensektionaltore</button><button type="button" class="chip" data-filter="sst" aria-pressed="false">Seitensektionaltore</button><button type="button" class="chip" data-filter="schwing" aria-pressed="false">Schwingtore</button><button type="button" class="chip" data-filter="holz" aria-pressed="false">Holz & Sonderlösungen</button>
+    </div>
+    <p class="filters__count" aria-live="polite"><span data-count>27</span> Tore</p>
+    <ul class="gallery">
+      <li class="gallery__item" id="flair-1" data-tags="dst region"><button type="button" class="gallery__btn" data-full="assets/img/flair-1-1200.webp" data-title="Normstahl Flair" data-sub="Farbe DB 703"><picture><source type="image/avif" srcset="assets/img/flair-1-800.avif 800w, assets/img/flair-1-1200.avif 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><source type="image/webp" srcset="assets/img/flair-1-800.webp 800w, assets/img/flair-1-1200.webp 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><img src="assets/img/flair-1-1200.webp" width="1200" height="900" alt="Normstahl Flair, Farbe DB 703" loading="lazy" decoding="async"></picture><span class="gallery__cap"><b>Normstahl Flair</b>Farbe DB 703</span></button></li><li class="gallery__item" id="garagenhof" data-tags="dst region"><button type="button" class="gallery__btn" data-full="assets/img/garagenhof-1200.webp" data-title="Garagenhof" data-sub="Alt und neu nebeneinander"><picture><source type="image/avif" srcset="assets/img/garagenhof-800.avif 800w, assets/img/garagenhof-1200.avif 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><source type="image/webp" srcset="assets/img/garagenhof-800.webp 800w, assets/img/garagenhof-1200.webp 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><img src="assets/img/garagenhof-1200.webp" width="1200" height="882" alt="Garagenhof, Alt und neu nebeneinander" loading="lazy" decoding="async"></picture><span class="gallery__cap"><b>Garagenhof</b>Alt und neu nebeneinander</span></button></li><li class="gallery__item" id="condor-schraegschnitt" data-tags="dst holz region"><button type="button" class="gallery__btn" data-full="assets/img/condor-schraegschnitt-1200.webp" data-title="Sektionaltor mit Schrägschnitt" data-sub="320 mm Gefälle ausgeglichen"><picture><source type="image/avif" srcset="assets/img/condor-schraegschnitt-800.avif 800w, assets/img/condor-schraegschnitt-1200.avif 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><source type="image/webp" srcset="assets/img/condor-schraegschnitt-800.webp 800w, assets/img/condor-schraegschnitt-1200.webp 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><img src="assets/img/condor-schraegschnitt-1200.webp" width="1200" height="900" alt="Sektionaltor mit Schrägschnitt, 320 mm Gefälle ausgeglichen" loading="lazy" decoding="async"></picture><span class="gallery__cap"><b>Sektionaltor mit Schrägschnitt</b>320 mm Gefälle ausgeglichen</span></button></li><li class="gallery__item" id="anthrazit-iso" data-tags="dst region"><button type="button" class="gallery__btn" data-full="assets/img/anthrazit-iso-1200.webp" data-title="Normstahl Style für Fertiggaragen" data-sub="Anthrazit, glatt"><picture><source type="image/avif" srcset="assets/img/anthrazit-iso-800.avif 800w, assets/img/anthrazit-iso-1200.avif 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><source type="image/webp" srcset="assets/img/anthrazit-iso-800.webp 800w, assets/img/anthrazit-iso-1200.webp 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><img src="assets/img/anthrazit-iso-1200.webp" width="1165" height="1000" alt="Normstahl Style für Fertiggaragen, Anthrazit, glatt" loading="lazy" decoding="async"></picture><span class="gallery__cap"><b>Normstahl Style für Fertiggaragen</b>Anthrazit, glatt</span></button></li><li class="gallery__item" id="condor-ligna" data-tags="holz region"><button type="button" class="gallery__btn" data-full="assets/img/condor-ligna-1200.webp" data-title="Condor Wood Ligna Light" data-sub="Mit Schlupftür und Glassektion"><picture><source type="image/avif" srcset="assets/img/condor-ligna-800.avif 800w, assets/img/condor-ligna-1200.avif 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><source type="image/webp" srcset="assets/img/condor-ligna-800.webp 800w, assets/img/condor-ligna-1200.webp 1200w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><img src="assets/img/condor-ligna-1200.webp" width="1200" height="900" alt="Condor Wood Ligna Light, Mit Schlupftür und Glassektion" loading="lazy" decoding="async"></picture><span class="gallery__cap"><b>Condor Wood Ligna Light</b>Mit Schlupftür und Glassektion</span></button></li><li class="gallery__item" id="essenbach-ohu" data-tags="dst region"><button type="button" class="gallery__btn" data-full="assets/img/essenbach-ohu-800.webp" data-title="Deckensektionaltor Eurostyle" data-sub="Mit Sturzblende, Essenbach-Ohu"><picture><source type="image/avif" srcset="assets/img/essenbach-ohu-800.avif 800w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><source type="image/webp" srcset="assets/img/essenbach-ohu-800.webp 800w" sizes="(min-width: 1100px) 25vw, (min-width: 640px) 33vw, 50vw"><img src="assets/img/essenbach-ohu-800.webp" width="350" height="263" alt="Deckensektionaltor Eurostyle, Mit Sturzblende, Essenbach-Ohu" loadingLine truncated
+    </ul>
+    <p class="note">Ihr Wunschmodell ist nicht dabei? Normstahl bietet viele weitere Oberflächen, Farben und Größen. Wir bringen Muster mit, wenn wir zu Ihnen kommen.</p>
+  </div>
+</section>
+<dialog class="lightbox" aria-label="Bildansicht">
+  <figure class="lightbox__fig"><img alt=""><figcaption><b></b><span></span></figcaption></figure>
+  <button type="button" class="lightbox__btn lightbox__close" aria-label="Schließen"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="square" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg></button>
+  <button type="button" class="lightbox__btn lightbox__prev" aria-label="Vorheriges Bild"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M15 5l-7 7 7 7"/></svg></button>
+  <button type="button" class="lightbox__btn lightbox__next" aria-label="Nächstes Bild"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M9 5l7 7-7 7"/></svg></button>
+</dialog>
+</main>
+<section class="cta-band">
+  <div class="wrap cta-band__inner">
+    <div>
+      <p class="eyebrow eyebrow--light">Fragen kostet nichts</p>
+      <h2 class="cta-band__title">Rufen Sie einfach an.</h2>
+      <p class="cta-band__text">Ob neues Tor, klemmender Antrieb oder gebrochene Feder: Sie sprechen direkt mit Wolfgang Haas, ganz ohne Warteschleife und Callcenter.</p>
+    </div>
+    <div class="cta-band__actions">
+      <a class="cta-band__phone" href="tel:+4987031362"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>08703 / 13 62</span></a>
+      <a class="btn btn--ghost-light" href="kontakt.html">Lieber schriftlich anfragen <svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="square" aria-hidden="true"><path d="M4 12h15M13 6l6 6-6 6"/></svg></a>
+    </div>
+  </div>
+</section>
+<footer class="site-footer">
+  <div class="wrap site-footer__grid">
+    <div class="site-footer__brand">
+      <a class="brand" href="index.html" aria-label="HEB Bauelemente, Wolfgang Haas – Startseite"><svg class="heb" viewBox="0 0 200 100" aria-hidden="true"><g fill="currentColor"><rect x="0" y="0" width="13" height="100"/><rect x="13" y="42" width="27" height="16"/><rect x="40" y="0" width="15" height="100"/><rect x="55" y="0" width="52" height="16"/><rect x="55" y="42" width="42" height="16"/><rect x="55" y="84" width="52" height="16"/><path fill-rule="evenodd" d="M116 0h58c15 0 24 9 24 23 0 11-6 19-14 22 10 3 16 11 16 23 0 19-12 32-30 32h-54zM134 16v26h36c6 0 10-5 10-13s-4-13-10-13zM134 58v26h38c7 0 11-5 11-13s-4-13-11-13z"/></g></svg><span class="brand__text"><b>Bauelemente</b><span>Wolfgang Haas · Essenbach</span></span></a>
+      <p>Garagentore, Antriebe und Ersatzteilservice im Großraum Landshut und Rottenburg.</p>
+    </div>
+    <div>
+      <h3 class="site-footer__h">Adresse</h3>
+      <address>HEB Bauelemente<br>Wolfgang Haas<br>Am Ring 20<br>84051 Essenbach / Mirskofen</address>
+      <a class="link" href="https://www.google.com/maps/search/?api=1&query=Am%20Ring%2020%2C%2084051%20Essenbach" rel="noopener" target="_blank">Route planen</a>
+    </div>
+    <div>
+      <h3 class="site-footer__h">Kontakt</h3>
+      <p><a class="link" href="tel:+4987031362">08703 / 13 62</a></p>
+      <p><a class="link" href="kontakt.html">Anfrageformular</a></p>
+      <p><a class="link link--icon" href="https://www.facebook.com/heb.bauelemente" rel="noopener" target="_blank"><svg class="i" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v8h4v-8h3l1-4h-4V8.5c0-.3.2-.5.5-.5z"/></svg>Facebook</a></p>
+    </div>
+    <div>
+      <h3 class="site-footer__h">Seiten</h3>
+      <ul class="site-footer__nav"><li><a class="link" href="index.html#leistungen">Leistungen</a></li><li><a class="link" href="index.html#renovierung">24-h-Renovierung</a></li><li><a class="link" href="projekte.html">Tore & Projekte</a></li><li><a class="link" href="index.html#ueber-uns">Über uns</a></li><li><a class="link" href="kontakt.html">Kontakt</a></li></ul>
+    </div>
+  </div>
+  <div class="wrap site-footer__bottom">
+    <span>© <span data-year>2026</span> HEB Bauelemente · Wolfgang Haas</span>
+    <span><a class="link" href="impressum.html">Impressum</a> · <a class="link" href="datenschutz.html">Datenschutz</a></span>
+    <span class="site-footer__credit">Entwurf: <a class="link" href="https://webklar.com" rel="noopener" target="_blank">webklar</a></span>
+  </div>
+</footer>
+<nav class="callbar" aria-label="Schnellkontakt">
+  <a href="tel:+4987031362"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg><span>Anrufen</span></a>
+  <a href="kontakt.html"><svg class="i" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h18v14H3z"/><path d="M3 6l9 7 9-7"/></svg><span>Anfrage</span></a>
+</nav>
+</body>
+</html>