Files
HSK-Vorlage/index.html
T
Claude 82dc9599cc Maßgeschneiderte Website für Olzinger Haustechnik
Neuer statischer Webauftritt für die Olzinger GmbH (Heizung, Sanitär,
Lüftung, regenerative Energien – Ergolding bei Landshut, seit 1985).

- Hero mit live berechnetem WebGL-„Wärmebild“: Maus als Wärmequelle,
  Wärmespur, Isothermen und Temperaturanzeige; Preloader „Thermostat“
- Gestapelte Leistungskarten mit animierten SVG-Illustrationen
- Interaktives Energie-Haus (Wärmepumpe, Solarthermie, Speicher,
  Fußbodenheizung, Bad, Lüftung) mit Tabs, Hotspots und Autoplay
- Heizungs-Finder mit Empfehlung und Übernahme ins Kontaktformular
- Ablauf als sich füllende Rohrleitung, Zeitleiste mit Zählwerk,
  Live-Öffnungsstatus inkl. bayerischer Feiertage
- Kontaktformular mit PHP-Versand (Honeypot, Zeitfalle) und
  mailto-Fallback; Impressum, Datenschutz, 404-Seite
- Smooth-Scroll (Lenis) und GSAP-Animationen, alles lokal gehostet;
  reduzierte Bewegung, Betrieb ohne JavaScript, axe ohne Befunde
- SEO: Schema.org HVACBusiness, Open-Graph-Bild, Sitemap, robots.txt

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Kjd7UMh3HKyVziCgiZ9A2i
2026-10-03 16:49:05 +00:00

1316 lines
90 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Olzinger Haustechnik – Heizung, Sanitär, Lüftung &amp; Wärmepumpen in Ergolding bei Landshut</title>
<meta name="description" content="Ihr Fachbetrieb für Heizung, Sanitär, Lüftung und regenerative Heiztechnik in Ergolding bei Landshut. Wärmepumpen, Pelletheizungen, Solarthermie, Badsanierung und Kundendienst – seit 1985.">
<link rel="canonical" href="https://www.olzinger.de/">
<meta name="theme-color" content="#0B151E">
<meta name="format-detection" content="telephone=no">
<meta property="og:type" content="website">
<meta property="og:locale" content="de_DE">
<meta property="og:site_name" content="Olzinger Haustechnik">
<meta property="og:title" content="Olzinger Haustechnik – Wärme. Wasser. Luft.">
<meta property="og:description" content="Heizung, Sanitär, Lüftung und regenerative Heiztechnik aus Ergolding bei Landshut – seit 1985.">
<meta property="og:url" content="https://www.olzinger.de/">
<meta property="og:image" content="https://www.olzinger.de/assets/img/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<link rel="icon" href="assets/img/favicon.svg" type="image/svg+xml">
<link rel="icon" href="assets/img/favicon-32.png" sizes="32x32" type="image/png">
<link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
<link rel="manifest" href="site.webmanifest">
<link rel="preload" href="assets/fonts/instrument-sans-var.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/instrument-serif-italic.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="assets/css/main.css">
<script>
/* Progressive Enhancement: ohne JS bleibt alles sichtbar. */
(function (d, w) {
var h = d.documentElement;
h.className = h.className.replace('no-js', 'js');
try {
var reduce = w.matchMedia('(prefers-reduced-motion: reduce)').matches;
var internal = d.referrer && d.referrer.indexOf(location.host) > -1 && location.host !== '';
if (!reduce && !internal && !location.hash) h.classList.add('has-loader');
} catch (e) {}
w.setTimeout(function () {
if (!w.__olzReady) { w.__olzFallback = true; h.classList.remove('js', 'has-loader'); h.classList.add('no-js'); }
}, 4500);
})(document, window);
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": ["HVACBusiness", "Plumber"],
"@id": "https://www.olzinger.de/#betrieb",
"name": "Olzinger GmbH",
"alternateName": "Olzinger Haustechnik",
"description": "Fachbetrieb für Heizung, Sanitär, Lüftung und regenerative Heiztechnik in Ergolding bei Landshut – seit 1985.",
"url": "https://www.olzinger.de/",
"logo": "https://www.olzinger.de/assets/img/logo.svg",
"image": "https://www.olzinger.de/assets/img/og-image.jpg",
"telephone": "+49 871 72617",
"faxNumber": "+49 871 74963",
"email": "kontakt@olzinger.de",
"foundingDate": "1985",
"founder": { "@type": "Person", "name": "Richard Olzinger" },
"numberOfEmployees": { "@type": "QuantitativeValue", "value": 25 },
"address": {
"@type": "PostalAddress",
"streetAddress": "Ahornstraße 112",
"postalCode": "84030",
"addressLocality": "Ergolding",
"addressRegion": "Bayern",
"addressCountry": "DE"
},
"areaServed": [
{ "@type": "City", "name": "Ergolding" },
{ "@type": "City", "name": "Landshut" },
{ "@type": "AdministrativeArea", "name": "Landkreis Landshut" }
],
"openingHoursSpecification": [
{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday"], "opens": "07:00", "closes": "12:00" },
{ "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday"], "opens": "13:00", "closes": "16:30" },
{ "@type": "OpeningHoursSpecification", "dayOfWeek": "Friday", "opens": "07:00", "closes": "11:30" }
],
"knowsAbout": ["Wärmepumpe", "Pelletheizung", "Solarthermie", "Gas-Brennwerttechnik", "Fußbodenheizung", "Badsanierung", "Trinkwasserinstallation", "Kontrollierte Wohnraumlüftung"]
}
</script>
<script src="assets/vendor/gsap.min.js" defer></script>
<script src="assets/vendor/ScrollTrigger.min.js" defer></script>
<script src="assets/vendor/SplitText.min.js" defer></script>
<script src="assets/vendor/lenis.min.js" defer></script>
<script src="assets/js/thermal.js" defer></script>
<script src="assets/js/house.js" defer></script>
<script src="assets/js/finder.js" defer></script>
<script src="assets/js/contact.js" defer></script>
<script src="assets/js/main.js" defer></script>
</head>
<body>
<a class="skip-link" href="#main">Zum Inhalt springen</a>
<!-- Icon-Sprite -->
<svg class="sprite" aria-hidden="true" focusable="false">
<symbol id="i-arrow" viewBox="0 0 24 24"><path d="M4 12h15M13 6l6 6-6 6"/></symbol>
<symbol id="i-arrow-ur" viewBox="0 0 24 24"><path d="M7 17 17 7M9 7h8v8"/></symbol>
<symbol id="i-arrow-down" viewBox="0 0 24 24"><path d="M12 4v15M6 13l6 6 6-6"/></symbol>
<symbol id="i-arrow-up" viewBox="0 0 24 24"><path d="M12 20V5M6 11l6-6 6 6"/></symbol>
<symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M20 12H5M11 6l-6 6 6 6"/></symbol>
<symbol id="i-phone" viewBox="0 0 24 24"><path d="M6.5 3.5h3l1.6 4.4-2.1 1.3a11.5 11.5 0 0 0 5.8 5.8l1.3-2.1 4.4 1.6v3a2 2 0 0 1-2.2 2A17 17 0 0 1 4.5 5.7a2 2 0 0 1 2-2.2z"/></symbol>
<symbol id="i-mail" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></symbol>
<symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z"/><circle cx="12" cy="10" r="2.4"/></symbol>
<symbol id="i-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></symbol>
<symbol id="i-fax" viewBox="0 0 24 24"><path d="M7 9V4h10v5"/><rect x="3.5" y="9" width="17" height="8" rx="2"/><path d="M7 14h10v6H7z"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12.5 4.2 4.2L19 7"/></symbol>
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
<symbol id="i-x" viewBox="0 0 24 24"><path d="m6 6 12 12M18 6 6 18"/></symbol>
<symbol id="i-spark" viewBox="0 0 24 24"><path fill="currentColor" stroke="none" d="M12 1.5c.6 5.6 4.9 9.9 10.5 10.5-5.6.6-9.9 4.9-10.5 10.5C11.4 16.9 7.1 12.6 1.5 12 7.1 11.4 11.4 7.1 12 1.5z"/></symbol>
<symbol id="i-flame" viewBox="0 0 24 24"><path d="M12 2.8c.6 3.6 5.2 5.6 5.2 10.6a5.2 5.2 0 0 1-10.4 0c0-2.4 1.3-3.9 2.4-5 .2 1.7 1.1 2.8 2.3 2.8-.1-3.4.1-5.9.5-8.4z"/></symbol>
<symbol id="i-drop" viewBox="0 0 24 24"><path d="M12 3s6.2 6.6 6.2 11.2a6.2 6.2 0 0 1-12.4 0C5.8 9.6 12 3 12 3z"/></symbol>
<symbol id="i-wind" viewBox="0 0 24 24"><path d="M3 9h11.5a2.75 2.75 0 1 0-2.75-2.75M3 15h14.5a2.75 2.75 0 1 1-2.75 2.75M3 12h8"/></symbol>
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/></symbol>
<symbol id="i-leaf" viewBox="0 0 24 24"><path d="M5 19.5C5 11 10 5 20 4.5c.2 10-5.6 15-13.6 15"/><path d="M5 19.5c3.2-4.3 6.3-6.6 9.5-8"/></symbol>
<symbol id="i-heatpump" viewBox="0 0 24 24"><rect x="2.5" y="5" width="19" height="13" rx="2.5"/><circle cx="10" cy="11.5" r="3.8"/><path d="M10 9.2v4.6M7.8 11.5h4.4M16.5 8.5v6M19 8.5v6M5 18v2M19 18v2"/></symbol>
<symbol id="i-tank" viewBox="0 0 24 24"><rect x="7" y="2.5" width="10" height="19" rx="5"/><path d="M7 9h10M7 15h10"/></symbol>
<symbol id="i-floor" viewBox="0 0 24 24"><path d="M3 19h18M4 15.5c1.3 0 1.3-1.2 2.7-1.2s1.3 1.2 2.6 1.2 1.4-1.2 2.7-1.2 1.4 1.2 2.7 1.2 1.3-1.2 2.6-1.2 1.4 1.2 2.7 1.2M8 10.5c-.8-1 .8-2 0-3s.8-2 0-3M12 10.5c-.8-1 .8-2 0-3s.8-2 0-3M16 10.5c-.8-1 .8-2 0-3s.8-2 0-3"/></symbol>
<symbol id="i-shower" viewBox="0 0 24 24"><path d="M5 21V7.5A3.5 3.5 0 0 1 12 7.5V8"/><path d="M8.5 8h7a3.5 3.5 0 0 0-7 0zM10 12v.5M12.5 13v.5M15 12v.5M17.5 13v.5M11.2 15.8v.5M13.8 16.6v.5M16.3 15.8v.5"/></symbol>
<symbol id="i-gauge" viewBox="0 0 24 24"><path d="M4.6 17.5a8.5 8.5 0 1 1 14.8 0"/><path d="m12 13.5 3.6-4.2"/><circle cx="12" cy="13.5" r="1.2"/></symbol>
<symbol id="i-radiator" viewBox="0 0 24 24"><rect x="3.5" y="5" width="3.4" height="14" rx="1.7"/><rect x="8.4" y="5" width="3.4" height="14" rx="1.7"/><rect x="13.3" y="5" width="3.4" height="14" rx="1.7"/><rect x="18.2" y="5" width="2.6" height="14" rx="1.3"/></symbol>
<symbol id="i-house-new" viewBox="0 0 24 24"><path d="M3.5 11.5 11 5l7.5 6.5V20h-15z"/><path d="M9 20v-5h4v5"/><path d="M19.5 2.5v4M17.5 4.5h4"/></symbol>
<symbol id="i-house-good" viewBox="0 0 24 24"><path d="M3 11.5 12 4l9 7.5V20H3z"/><path d="M6.2 12.8 12 8l5.8 4.8V17H6.2z"/></symbol>
<symbol id="i-house-old" viewBox="0 0 24 24"><path d="M3 12.5 10 6.5l7 6V20H3z"/><path d="M19.5 9.5c-.9-1 .9-2 0-3M21.5 14c-.9-1 .9-2 0-3M19.5 18.5c-.9-1 .9-2 0-3"/></symbol>
<symbol id="i-mix" viewBox="0 0 24 24"><path d="M3 19.5h18M3.5 16.5c1.1 0 1.1-1 2.2-1s1.1 1 2.2 1 1.1-1 2.2-1"/><rect x="13" y="5" width="2.8" height="10" rx="1.4"/><rect x="17.2" y="5" width="2.8" height="10" rx="1.4"/></symbol>
<symbol id="i-box" viewBox="0 0 24 24"><path d="M4 8.5 12 4l8 4.5v9L12 22l-8-4.5z"/><path d="M4 8.5 12 13l8-4.5M12 13v9"/></symbol>
<symbol id="i-no" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="m6 6 12 12"/></symbol>
<symbol id="i-roof-sun" viewBox="0 0 24 24"><path d="M2.5 20.5 11 12l8.5 8.5"/><path d="M6 16.5 11 12"/><circle cx="17.5" cy="6.5" r="2.7"/><path d="M17.5 1.6v1.1M22.4 6.5h-1.1M21 3l-.8.8M14 3l.8.8"/></symbol>
<symbol id="i-cloud" viewBox="0 0 24 24"><path d="M7 18.5h10a4 4 0 0 0 .4-8 5.5 5.5 0 0 0-10.6 1.6A3.3 3.3 0 0 0 7 18.5z"/></symbol>
<symbol id="i-cap" viewBox="0 0 24 24"><path d="m2.5 9 9.5-4.5L21.5 9 12 13.5z"/><path d="M6.5 11v4.5c0 1.4 2.5 3 5.5 3s5.5-1.6 5.5-3V11M21.5 9v5"/></symbol>
<symbol id="i-wrench" viewBox="0 0 24 24"><path d="M15.6 3.6a5 5 0 0 0-5.3 6.7L3.8 16.8a2.1 2.1 0 0 0 3 3l6.5-6.5a5 5 0 0 0 6.7-5.3l-3 3-2.6-.6-.6-2.6z"/></symbol>
<symbol id="i-route" viewBox="0 0 24 24"><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="6" r="2.5"/><path d="M8.5 18H15a3 3 0 0 0 0-6H9a3 3 0 0 1 0-6h6.5"/></symbol>
<symbol id="i-restart" viewBox="0 0 24 24"><path d="M4 12a8 8 0 1 0 2.4-5.7M4 4v4.5h4.5"/></symbol>
<symbol id="i-team" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.2"/><path d="M3 19.5a6 6 0 0 1 12 0"/><circle cx="17" cy="9" r="2.6"/><path d="M15.8 14.2a5 5 0 0 1 5.7 5"/></symbol>
</svg>
<!-- Preloader: „Heizung hochdrehen“ -->
<div class="loader" aria-hidden="true">
<div class="loader__center">
<svg class="loader__mark" viewBox="0 0 120 120">
<defs>
<linearGradient id="g-loader" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2E9BEF"/>
<stop offset=".55" stop-color="#C2456B"/>
<stop offset="1" stop-color="#FF6A2B"/>
</linearGradient>
</defs>
<path class="loader__track" d="M35.9 94.4A42 42 0 1 1 84.1 94.4"/>
<path class="loader__arc" d="M35.9 94.4A42 42 0 1 1 84.1 94.4" stroke="url(#g-loader)"/>
<circle class="loader__dot" cx="60" cy="60" r="7"/>
</svg>
<p class="loader__year"><span data-loader-year>1985</span></p>
</div>
<p class="loader__caption loader__caption--l">Olzinger Haustechnik</p>
<p class="loader__caption loader__caption--r">Ergolding · seit 1985</p>
</div>
<!-- Navigation -->
<header class="nav" data-nav>
<div class="nav__bar">
<a class="logo" href="#top" aria-label="Olzinger Haustechnik – zum Seitenanfang">
<svg class="logo__mark" viewBox="0 0 40 40" aria-hidden="true">
<defs>
<linearGradient id="g-logo" x1="0" y1="0" x2="1" y2="0">
<stop offset="0" stop-color="#2E9BEF"/>
<stop offset=".55" stop-color="#C2456B"/>
<stop offset="1" stop-color="#FF6A2B"/>
</linearGradient>
</defs>
<path d="M11.97 31.47A14 14 0 1 1 28.03 31.47" fill="none" stroke="url(#g-logo)" stroke-width="5.5" stroke-linecap="round"/>
<circle cx="20" cy="20" r="3.4" fill="currentColor"/>
</svg>
<span class="logo__text"><span class="logo__word">Olzinger</span><span class="logo__sub">Haustechnik</span></span>
</a>
<nav class="nav__links" aria-label="Hauptnavigation">
<a href="#leistungen" data-nav-link>Leistungen</a>
<a href="#energie-haus" data-nav-link>Energie-Haus</a>
<a href="#heizungs-finder" data-nav-link>Heizungs-Finder</a>
<a href="#ueber-uns" data-nav-link>Über uns</a>
<a href="#karriere" data-nav-link>Karriere</a>
</nav>
<div class="nav__actions">
<a class="nav__phone" href="tel:+4987172617">
<svg class="icon" aria-hidden="true"><use href="#i-phone"/></svg>
<span>0871&nbsp;72617</span>
</a>
<a class="btn btn--sm btn--warm" href="#kontakt">
<span class="btn__label">Anfrage starten</span>
</a>
<button class="nav__toggle" type="button" aria-expanded="false" aria-controls="menu" data-menu-toggle>
<span class="nav__toggle-lines" aria-hidden="true"><i></i><i></i></span>
<span class="sr-only">Menü öffnen</span>
</button>
</div>
</div>
</header>
<!-- Mobiles Menü -->
<div class="menu" id="menu" data-menu hidden>
<div class="menu__glow" aria-hidden="true"></div>
<nav class="menu__links" aria-label="Mobile Navigation">
<a href="#leistungen"><span>01</span>Leistungen</a>
<a href="#energie-haus"><span>02</span>Energie-Haus</a>
<a href="#heizungs-finder"><span>03</span>Heizungs-Finder</a>
<a href="#ablauf"><span>04</span>Ablauf</a>
<a href="#ueber-uns"><span>05</span>Über uns</a>
<a href="#karriere"><span>06</span>Karriere</a>
<a href="#kontakt"><span>07</span>Kontakt</a>
</nav>
<div class="menu__foot">
<a href="tel:+4987172617"><svg class="icon" aria-hidden="true"><use href="#i-phone"/></svg>0871&nbsp;72617</a>
<a href="mailto:kontakt@olzinger.de"><svg class="icon" aria-hidden="true"><use href="#i-mail"/></svg>kontakt@olzinger.de</a>
<p class="status status--dark" data-status><span class="status__dot" aria-hidden="true"></span><span class="status__text">Mo–Do 7–16:30 Uhr · Fr 7–11:30 Uhr</span></p>
</div>
</div>
<main id="main">
<!-- ============ HERO ============ -->
<section class="hero" id="top" aria-label="Einleitung" data-hero>
<canvas class="hero__canvas" aria-hidden="true" data-thermal></canvas>
<div class="hero__shade" aria-hidden="true"></div>
<div class="probe" aria-hidden="true" data-probe>
<span class="probe__frame"></span>
<span class="probe__dot"></span>
<span class="probe__val" data-probe-val>21,0 °C</span>
</div>
<div class="container hero__inner">
<p class="eyebrow hero__eyebrow" data-hero-fade><span class="eyebrow__dot"></span>Haustechnik aus Ergolding – seit 1985</p>
<h1 class="hero__title">
<span class="sr-only">Olzinger Haustechnik: </span>
<span class="hero__line"><span class="hero__word">Wärme<i class="hero__dot hero__dot--warm"></i></span><span class="hero__tag">Heizung &amp; Regenerativ</span></span>
<span class="hero__line"><span class="hero__word">Wasser<i class="hero__dot hero__dot--cool"></i></span><span class="hero__tag">Sanitär &amp; Bad</span></span>
<span class="hero__line"><span class="hero__word">Luft<i class="hero__dot hero__dot--air"></i></span><span class="hero__tag">Lüftung</span></span>
</h1>
<div class="hero__aside" data-hero-fade>
<p class="hero__lead">Haustechnik, die man nicht sieht – aber jeden Tag spürt. Wir planen, installieren und warten Heizung, Sanitär, Lüftung und regenerative Energiesysteme in Ergolding, Landshut und der Region.</p>
<div class="hero__ctas">
<a class="btn btn--light" href="#kontakt" data-magnetic>
<span class="btn__label">Projekt anfragen</span>
<span class="btn__icon" aria-hidden="true"><svg class="icon"><use href="#i-arrow"/></svg></span>
</a>
<a class="btn btn--ghost btn--ghost-light" href="#heizungs-finder">
<span class="btn__label">Welche Heizung passt?</span>
</a>
</div>
</div>
</div>
<div class="container hero__bottom" data-hero-fade>
<p class="status status--dark" data-status><span class="status__dot" aria-hidden="true"></span><span class="status__text">Mo–Do 7–16:30 Uhr · Fr 7–11:30 Uhr</span></p>
<div class="legend" aria-hidden="true">
<span class="legend__rec"><i></i>Wärmebild</span>
<span class="legend__val">14&nbsp;°C</span>
<span class="legend__bar"><i class="legend__marker" data-legend-marker></i></span>
<span class="legend__val">28&nbsp;°C</span>
<span class="legend__hint">Maus bewegen</span>
</div>
<a class="hero__scroll" href="#intro" aria-label="Weiter nach unten scrollen">
<span>Entdecken</span>
<span class="hero__scroll-icon"><svg class="icon" aria-hidden="true"><use href="#i-arrow-down"/></svg></span>
</a>
</div>
</section>
<!-- ============ TAPES (Vorlauf / Rücklauf) ============ -->
<div class="tapes" aria-hidden="true">
<div class="tape tape--cool" data-tape="1">
<div class="tape__track">
<span>Beratung</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Planung</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Montage</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Wartung</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Seit 1985 in Ergolding</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Rund 25 Fachleute</span><svg class="icon"><use href="#i-spark"/></svg>
</div>
</div>
<div class="tape tape--warm" data-tape="-1">
<div class="tape__track">
<span>Wärmepumpen</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Pelletheizungen</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Solarthermie</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Brennwerttechnik</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Badsanierung</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Wohnraumlüftung</span><svg class="icon"><use href="#i-spark"/></svg>
<span>Kundendienst</span><svg class="icon"><use href="#i-spark"/></svg>
</div>
</div>
</div>
<!-- ============ INTRO ============ -->
<section class="intro" id="intro" aria-label="Über Olzinger Haustechnik">
<div class="container intro__grid">
<p class="label" data-reveal><span class="label__dot"></span>Olzinger Haustechnik</p>
<p class="intro__text" data-scrub-words>
Seit 1985 sorgen wir in Ergolding und rund um Landshut für ein Zuhause, in dem einfach alles stimmt: wohlige <span class="ichip ichip--warm" aria-hidden="true"><svg class="icon"><use href="#i-flame"/></svg></span> Wärme, frisches <span class="ichip ichip--cool" aria-hidden="true"><svg class="icon"><use href="#i-drop"/></svg></span> Wasser und gute <span class="ichip ichip--air" aria-hidden="true"><svg class="icon"><use href="#i-wind"/></svg></span> Luft. Wir planen, bauen und betreuen Haustechnik, die zuverlässig läuft, Energie spart und Ihr Haus fit für die Zukunft macht.
</p>
<div class="intro__aside" data-reveal>
<div class="badge" aria-hidden="true">
<svg class="badge__ring" viewBox="0 0 120 120">
<defs><path id="badge-circle" d="M60 60m-49 0a49 49 0 1 1 98 0a49 49 0 1 1-98 0"/></defs>
<text><textPath href="#badge-circle" textLength="305" lengthAdjust="spacing">Seit 1985 · Haustechnik · Ergolding · </textPath></text>
</svg>
<svg class="badge__mark" viewBox="0 0 40 40">
<path d="M11.97 31.47A14 14 0 1 1 28.03 31.47" fill="none" stroke="url(#g-logo)" stroke-width="5" stroke-linecap="round"/>
<circle cx="20" cy="20" r="3.4" fill="currentColor"/>
</svg>
</div>
<p>Ein Ansprechpartner für alle Gewerke – von der ersten Beratung bis zur jährlichen Wartung.</p>
<a class="link-arrow" href="#ueber-uns">Mehr über uns <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</div>
</div>
</section>
<!-- ============ LEISTUNGEN ============ -->
<section class="services" id="leistungen" aria-labelledby="services-title">
<div class="container">
<header class="section-head section-head--split">
<div>
<p class="label" data-reveal><span class="label__num">01</span>Leistungen</p>
<h2 class="h1" id="services-title" data-split>Alles für Ihr Haus. <em class="accent">Aus einer Hand.</em></h2>
</div>
<p class="lead" data-reveal>Ob neue Wärmepumpe, modernes Bad oder frische Luft ohne Wärmeverlust: Wir verbinden alle Gewerke der Haustechnik – sauber geplant, fachgerecht installiert und langfristig betreut.</p>
</header>
<div class="stack" data-stack>
<!-- 01 Regenerativ -->
<article class="svc svc--eco" style="--i:0" id="regenerativ">
<div class="svc__inner">
<div class="svc__body">
<div class="svc__top"><span class="svc__num">01</span><span class="svc__cat"><svg class="icon" aria-hidden="true"><use href="#i-leaf"/></svg>Regenerative Heiztechnik</span></div>
<h3 class="svc__title">Energie aus Sonne, Luft, Erde und&nbsp;Holz.</h3>
<p class="svc__text">Mit Wärmepumpe, Pelletheizung oder Solarthermie heizen Sie unabhängig von Öl und Gas – klimafreundlich und zukunftssicher. Wir finden das System, das zu Ihrem Haus passt, und begleiten Sie durch die Förderung.</p>
<ul class="svc__list">
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Luft- &amp; Sole-Wärmepumpen</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Pelletheizungen</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Solarthermie</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Hybridsysteme &amp; Pufferspeicher</li>
</ul>
<div class="svc__foot">
<a class="link-arrow" href="#kontakt" data-topic="Wärmepumpe &amp; Regenerativ">Beratung anfragen <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
<span class="svc__badge">Mit Förderberatung</span>
</div>
</div>
<div class="svc__art">
<svg class="art" viewBox="0 0 480 400" aria-hidden="true" focusable="false">
<defs>
<radialGradient id="g-eco-glow"><stop offset="0" stop-color="#46C27E" stop-opacity=".42"/><stop offset="1" stop-color="#46C27E" stop-opacity="0"/></radialGradient>
<radialGradient id="g-sun-glow"><stop offset="0" stop-color="#FFB547" stop-opacity=".5"/><stop offset="1" stop-color="#FFB547" stop-opacity="0"/></radialGradient>
<radialGradient id="g-sun-core" cx=".35" cy=".35"><stop offset="0" stop-color="#FFE3A3"/><stop offset="1" stop-color="#FF8A2A"/></radialGradient>
</defs>
<circle cx="220" cy="250" r="170" fill="url(#g-eco-glow)"/>
<g transform="translate(388 88)">
<circle r="84" fill="url(#g-sun-glow)"/>
<g class="a-spin-slow"><path class="a-ray" d="M34 0L46 0M29.4 17L39.8 23M17 29.4L23 39.8M0 34L0 46M-17 29.4L-23 39.8M-29.4 17L-39.8 23M-34 0L-46 0M-29.4 -17L-39.8 -23M-17 -29.4L-23 -39.8M0 -34L0 -46M17 -29.4L23 -39.8M29.4 -17L39.8 -23"/></g>
<circle r="24" fill="url(#g-sun-core)"/>
</g>
<!-- Umweltwärme -->
<g class="a-airflow">
<path class="a-thin" d="M22 214c28-14 56 14 86 0"/>
<path class="a-flow c-eco" d="M22 214c28-14 56 14 86 0"/>
<path class="a-thin" d="M14 254c30-14 60 14 94 0"/>
<path class="a-flow c-eco" d="M14 254c30-14 60 14 94 0" style="animation-delay:-.4s"/>
<path class="a-thin" d="M22 294c28-14 56 14 86 0"/>
<path class="a-flow c-eco" d="M22 294c28-14 56 14 86 0" style="animation-delay:-.8s"/>
</g>
<text class="a-label" x="22" y="186">Umweltwärme</text>
<path class="a-faint" d="M28 346H452" stroke-dasharray="3 7"/>
<!-- Außeneinheit -->
<rect class="a-line a-fill" x="120" y="178" width="236" height="152" rx="18"/>
<path class="a-line" d="M144 330v14M332 330v14"/>
<circle class="a-line" cx="204" cy="254" r="56"/>
<circle class="a-thin" cx="204" cy="254" r="46"/>
<g class="a-fan">
<path class="a-blade" d="M204 254C196 236 200 214 214 204C222 218 218 238 204 254Z"/>
<path class="a-blade" d="M204 254C196 236 200 214 214 204C222 218 218 238 204 254Z" transform="rotate(90 204 254)"/>
<path class="a-blade" d="M204 254C196 236 200 214 214 204C222 218 218 238 204 254Z" transform="rotate(180 204 254)"/>
<path class="a-blade" d="M204 254C196 236 200 214 214 204C222 218 218 238 204 254Z" transform="rotate(270 204 254)"/>
</g>
<circle cx="204" cy="254" r="7" class="a-hub"/>
<path class="a-thin" d="M286 200v108M300 200v108M314 200v108M328 200v108"/>
<rect class="a-led" x="286" y="316" width="22" height="4" rx="2"/>
<!-- Vorlauf / Rücklauf -->
<path class="a-pipe c-warm" d="M356 280h44a16 16 0 0 0 16-16v-62"/>
<path class="a-flow a-flow--pipe c-warm" d="M356 280h44a16 16 0 0 0 16-16v-62"/>
<path class="a-pipe c-cool" d="M446 202v80a16 16 0 0 1-16 16h-74"/>
<path class="a-flow a-flow--pipe c-cool" d="M446 202v80a16 16 0 0 1-16 16h-74"/>
<text class="a-label" x="416" y="190" text-anchor="middle">VL</text>
<text class="a-label" x="446" y="190" text-anchor="middle">RL</text>
<!-- Blatt -->
<path class="a-leaf" d="M64 334c0-34 22-56 58-58-2 36-24 58-58 58z"/>
<path class="a-leaf-vein" d="M64 334c10-16 22-28 38-38"/>
<g transform="translate(138 132)" class="a-chip">
<rect width="150" height="30" rx="15"/>
<circle cx="17" cy="15" r="4" class="a-chip-dot c-eco-fill"/>
<text class="a-label a-label--chip" x="30" y="19">Luft → Heizwärme</text>
</g>
</svg>
</div>
</div>
</article>
<!-- 02 Heizung -->
<article class="svc svc--warm" style="--i:1" id="heizung">
<div class="svc__inner">
<div class="svc__body">
<div class="svc__top"><span class="svc__num">02</span><span class="svc__cat"><svg class="icon" aria-hidden="true"><use href="#i-flame"/></svg>Heizung</span></div>
<h3 class="svc__title">Wärme, die effizient&nbsp;arbeitet.</h3>
<p class="svc__text">Vom Kesseltausch bis zur kompletten Heizungsmodernisierung: Moderne Brennwerttechnik, Flächenheizungen und eine optimal eingestellte Anlage senken Ihre Energiekosten spürbar.</p>
<ul class="svc__list">
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Gas- &amp; Öl-Brennwerttechnik</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Heizungsmodernisierung</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Fußboden- &amp; Flächenheizung</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Hydraulischer Abgleich</li>
</ul>
<div class="svc__foot">
<a class="link-arrow" href="#kontakt" data-topic="Heizung">Beratung anfragen <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
<span class="svc__badge">Vom Kesseltausch bis zum Komplettsystem</span>
</div>
</div>
<div class="svc__art">
<svg class="art" viewBox="0 0 480 400" aria-hidden="true" focusable="false">
<defs>
<radialGradient id="g-warm-glow"><stop offset="0" stop-color="#FF6A2B" stop-opacity=".4"/><stop offset="1" stop-color="#FF6A2B" stop-opacity="0"/></radialGradient>
<linearGradient id="g-rad" x1="0" y1="1" x2="0" y2="0">
<stop offset="0" stop-color="#FF6A2B" stop-opacity=".95"/>
<stop offset=".65" stop-color="#FFB547" stop-opacity=".7"/>
<stop offset="1" stop-color="#FFD27A" stop-opacity=".35"/>
</linearGradient>
<clipPath id="clip-rad">
<rect x="120" y="150" width="26" height="170" rx="13"/><rect x="152" y="150" width="26" height="170" rx="13"/>
<rect x="184" y="150" width="26" height="170" rx="13"/><rect x="216" y="150" width="26" height="170" rx="13"/>
<rect x="248" y="150" width="26" height="170" rx="13"/><rect x="280" y="150" width="26" height="170" rx="13"/>
<rect x="312" y="150" width="26" height="170" rx="13"/><rect x="344" y="150" width="26" height="170" rx="13"/>
</clipPath>
</defs>
<ellipse cx="246" cy="236" rx="220" ry="176" fill="url(#g-warm-glow)"/>
<path class="a-faint" d="M36 352H444"/>
<g class="a-waves">
<path class="a-wave" d="M172 128c-12-14 12-26 0-40s12-26 0-40"/>
<path class="a-wave" d="M245 128c-12-14 12-26 0-40s12-26 0-40" style="animation-delay:-1s"/>
<path class="a-wave" d="M318 128c-12-14 12-26 0-40s12-26 0-40" style="animation-delay:-2s"/>
</g>
<g clip-path="url(#clip-rad)">
<rect class="a-heatfill" x="118" y="148" width="254" height="174" fill="url(#g-rad)"/>
</g>
<g class="a-line">
<rect x="120" y="150" width="26" height="170" rx="13"/><rect x="152" y="150" width="26" height="170" rx="13"/>
<rect x="184" y="150" width="26" height="170" rx="13"/><rect x="216" y="150" width="26" height="170" rx="13"/>
<rect x="248" y="150" width="26" height="170" rx="13"/><rect x="280" y="150" width="26" height="170" rx="13"/>
<rect x="312" y="150" width="26" height="170" rx="13"/><rect x="344" y="150" width="26" height="170" rx="13"/>
</g>
<path class="a-thin" d="M126 170H364M126 300H364"/>
<path class="a-line" d="M150 320v32M340 320v32"/>
<!-- Vorlauf rein, Rücklauf raus -->
<path class="a-pipe c-warm" d="M30 170H120"/>
<path class="a-flow a-flow--pipe c-warm" d="M30 170H120"/>
<path class="a-pipe c-cool" d="M370 300h48a14 14 0 0 1 14 14v38"/>
<path class="a-flow a-flow--pipe c-cool" d="M370 300h48a14 14 0 0 1 14 14v38"/>
<!-- Thermostatkopf -->
<g transform="translate(86 170)">
<circle r="26" class="a-line a-fill-dark"/>
<path class="a-thin" d="M0 -20v4M14.1 -14.1l-2.8 2.8M20 0h-4M-14.1 -14.1l2.8 2.8M-20 0h4"/>
<g class="a-knob"><circle r="16" fill="none"/><path class="a-needle-line" d="M0 0V-15"/></g>
<circle r="4" class="a-hub"/>
</g>
<text class="a-label" x="34" y="156">VL</text>
<text class="a-label" x="432" y="376" text-anchor="middle">RL</text>
<g transform="translate(330 70)" class="a-chip">
<rect width="104" height="34" rx="17"/>
<circle cx="18" cy="17" r="4" class="a-chip-dot c-warm-fill"/>
<text class="a-temp" x="30" y="23">21,5 °C</text>
</g>
</svg>
</div>
</div>
</article>
<!-- 03 Sanitär -->
<article class="svc svc--cool" style="--i:2" id="sanitaer">
<div class="svc__inner">
<div class="svc__body">
<div class="svc__top"><span class="svc__num">03</span><span class="svc__cat"><svg class="icon" aria-hidden="true"><use href="#i-drop"/></svg>Sanitär &amp; Bad</span></div>
<h3 class="svc__title">Bäder, in denen man gerne&nbsp;ankommt.</h3>
<p class="svc__text">Ob Komplettsanierung, barrierefreies Bad oder neue Trinkwasserinstallation – wir planen und bauen Bäder, die schön aussehen und über Jahrzehnte zuverlässig funktionieren.</p>
<ul class="svc__list">
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Komplette Badsanierung</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Barrierefreie &amp; bodengleiche Duschen</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Trinkwasserinstallation</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Warmwasserbereitung</li>
</ul>
<div class="svc__foot">
<a class="link-arrow" href="#kontakt" data-topic="Bad &amp; Sanitär">Beratung anfragen <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
<span class="svc__badge">Planung bis Fliese – koordiniert</span>
</div>
</div>
<div class="svc__art">
<svg class="art" viewBox="0 0 480 400" aria-hidden="true" focusable="false">
<defs>
<radialGradient id="g-cool-glow"><stop offset="0" stop-color="#2E9BEF" stop-opacity=".42"/><stop offset="1" stop-color="#2E9BEF" stop-opacity="0"/></radialGradient>
<linearGradient id="g-water" gradientUnits="userSpaceOnUse" x1="0" y1="222" x2="0" y2="318"><stop offset="0" stop-color="#BDEBFF"/><stop offset="1" stop-color="#2E9BEF"/></linearGradient>
<linearGradient id="g-drop" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#9FE0FF"/><stop offset="1" stop-color="#2E7FE0"/></linearGradient>
<pattern id="p-tiles" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0H0V40" fill="none" stroke="rgba(255,255,255,.07)"/></pattern>
</defs>
<ellipse cx="240" cy="250" rx="230" ry="170" fill="url(#g-cool-glow)"/>
<rect x="56" y="26" width="368" height="246" fill="url(#p-tiles)"/>
<!-- Leitungen in der Wand -->
<path class="a-pipe c-cool" d="M30 312h176v-36"/>
<path class="a-flow a-flow--pipe c-cool" d="M30 312h176v-36"/>
<path class="a-pipe c-warm" d="M450 330H274v-54"/>
<path class="a-flow a-flow--pipe c-warm" d="M450 330H274v-54"/>
<text class="a-label" x="30" y="300">Kaltwasser</text>
<text class="a-label" x="450" y="350" text-anchor="end">Warmwasser</text>
<!-- Waschtisch -->
<path class="a-line a-fill-dark" d="M118 272H362C362 326 320 352 240 352S118 326 118 272Z"/>
<path class="a-line a-thick" d="M90 272H390"/>
<!-- Armatur -->
<rect class="a-line a-fill-dark" x="226" y="204" width="28" height="68" rx="10"/>
<path class="a-spout" d="M240 208c0-58 74-58 74-6v10"/>
<path class="a-line a-thick" d="M232 200 212 182"/>
<!-- Wasserstrahl -->
<path class="a-stream" d="M314 222V318"/>
<g class="a-ripples">
<ellipse class="a-ripple" cx="314" cy="322" rx="12" ry="3.5"/>
<ellipse class="a-ripple" cx="314" cy="322" rx="12" ry="3.5" style="animation-delay:-.6s"/>
<ellipse class="a-ripple" cx="314" cy="322" rx="12" ry="3.5" style="animation-delay:-1.2s"/>
</g>
<!-- Tropfen -->
<g transform="translate(392 96)"><g class="a-float">
<path d="M0-40C0-40 28-10 28 8A28 28 0 0 1-28 8C-28-10 0-40 0-40Z" fill="url(#g-drop)"/>
<path d="M-12 6a13 13 0 0 0 9 12" fill="none" stroke="#fff" stroke-opacity=".75" stroke-width="3" stroke-linecap="round"/>
</g></g>
<text class="a-label" x="392" y="160" text-anchor="middle">Trinkwasser</text>
</svg>
</div>
</div>
</article>
<!-- 04 Lüftung -->
<article class="svc svc--air" style="--i:3" id="lueftung">
<div class="svc__inner">
<div class="svc__body">
<div class="svc__top"><span class="svc__num">04</span><span class="svc__cat"><svg class="icon" aria-hidden="true"><use href="#i-wind"/></svg>Lüftung</span></div>
<h3 class="svc__title">Frische Luft. Ohne&nbsp;Wärmeverlust.</h3>
<p class="svc__text">Kontrollierte Wohnraumlüftung tauscht verbrauchte gegen frische Luft – und holt sich dabei die Wärme zurück. Für ein gesundes Raumklima, weniger Feuchtigkeit und spürbar weniger Heizenergie.</p>
<ul class="svc__list">
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Zentrale Wohnraumlüftung</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Dezentrale Lüftungsgeräte</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Wärmerückgewinnung</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Filterwechsel &amp; Wartung</li>
</ul>
<div class="svc__foot">
<a class="link-arrow" href="#kontakt" data-topic="Lüftung">Beratung anfragen <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
<span class="svc__badge">Für Neubau &amp; Sanierung</span>
</div>
</div>
<div class="svc__art">
<svg class="art" viewBox="0 0 480 400" aria-hidden="true" focusable="false">
<defs>
<radialGradient id="g-air-glow"><stop offset="0" stop-color="#3CCFC0" stop-opacity=".36"/><stop offset="1" stop-color="#3CCFC0" stop-opacity="0"/></radialGradient>
<linearGradient id="g-in" gradientUnits="userSpaceOnUse" x1="40" y1="100" x2="440" y2="300"><stop offset="0" stop-color="#2E9BEF"/><stop offset=".5" stop-color="#3CCFC0"/><stop offset="1" stop-color="#FFB547"/></linearGradient>
<linearGradient id="g-out" gradientUnits="userSpaceOnUse" x1="440" y1="100" x2="40" y2="300"><stop offset="0" stop-color="#FF6A2B"/><stop offset=".55" stop-color="#C98AA0"/><stop offset="1" stop-color="#7E97AD"/></linearGradient>
</defs>
<ellipse cx="240" cy="200" rx="230" ry="180" fill="url(#g-air-glow)"/>
<!-- Kanäle -->
<path class="a-duct" d="M40 100C130 100 170 150 240 200S350 300 440 300" stroke="url(#g-in)"/>
<path class="a-duct" d="M440 100C350 100 310 150 240 200S130 300 40 300" stroke="url(#g-out)"/>
<!-- Gerät -->
<rect class="a-line a-fill-dark" x="150" y="118" width="180" height="164" rx="22"/>
<path class="a-line a-fill" d="M240 140L300 200L240 260L180 200Z"/>
<path class="a-thin" d="M190 210L250 150M200 220L260 160M210 230L270 170M220 240L280 180M230 250L290 190"/>
<!-- Ströme -->
<path class="a-stream-line" d="M40 100C130 100 170 150 240 200S350 300 440 300" stroke="url(#g-in)"/>
<path class="a-stream-line" d="M440 100C350 100 310 150 240 200S130 300 40 300" stroke="url(#g-out)" style="animation-delay:-.7s"/>
<text class="a-label" x="40" y="84">Außenluft · 0 °C</text>
<text class="a-label" x="440" y="84" text-anchor="end">Abluft · 22 °C</text>
<text class="a-label" x="440" y="330" text-anchor="end">Zuluft · 18 °C</text>
<text class="a-label" x="40" y="330">Fortluft · 4 °C</text>
<g transform="translate(160 352)" class="a-chip">
<rect width="160" height="30" rx="15"/>
<circle cx="17" cy="15" r="4" class="a-chip-dot c-air-fill"/>
<text class="a-label a-label--chip" x="30" y="19">Wärmerückgewinnung</text>
</g>
</svg>
</div>
</div>
</article>
<!-- 05 Kundendienst -->
<article class="svc svc--steel" style="--i:4" id="kundendienst">
<div class="svc__inner">
<div class="svc__body">
<div class="svc__top"><span class="svc__num">05</span><span class="svc__cat"><svg class="icon" aria-hidden="true"><use href="#i-wrench"/></svg>Kundendienst &amp; Wartung</span></div>
<h3 class="svc__title">Damit alles läuft. Jahr für&nbsp;Jahr.</h3>
<p class="svc__text">Regelmäßige Wartung verlängert die Lebensdauer Ihrer Anlage, hält sie effizient und beugt teuren Ausfällen vor. Und wenn doch einmal etwas klemmt, ist unser Kundendienst für Sie da.</p>
<ul class="svc__list">
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Heizungs- &amp; Anlagenwartung</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Störungsbehebung &amp; Reparatur</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Ersatzteile &amp; Service</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Beratung zur Modernisierung</li>
</ul>
<div class="svc__foot">
<a class="link-arrow" href="#kontakt" data-topic="Wartung &amp; Störung">Termin vereinbaren <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
<a class="svc__badge svc__badge--link" href="tel:+4987172617"><svg class="icon" aria-hidden="true"><use href="#i-phone"/></svg>0871&nbsp;72617</a>
</div>
</div>
<div class="svc__art">
<svg class="art" viewBox="0 0 480 400" aria-hidden="true" focusable="false">
<defs>
<radialGradient id="g-steel-glow"><stop offset="0" stop-color="#8FB3D9" stop-opacity=".32"/><stop offset="1" stop-color="#8FB3D9" stop-opacity="0"/></radialGradient>
</defs>
<ellipse cx="240" cy="206" rx="220" ry="180" fill="url(#g-steel-glow)"/>
<circle class="a-line a-fill-dark" cx="240" cy="206" r="132"/>
<circle class="a-thin" cx="240" cy="206" r="120"/>
<path class="a-gauge-track" d="M162.2 283.8A110 110 0 1 1 317.8 283.8"/>
<path class="a-gauge-ok" d="M151 141.3A110 110 0 0 1 265.7 99"/>
<path class="a-gauge-high" d="M341.6 163.9A110 110 0 0 1 317.8 283.8"/>
<path class="a-ticks" d="M180.6 265.4L167.9 278.1M166.2 264.2L159.9 269.1M159.9 255.1L153 259.3M154.6 245.4L147.4 248.7M150.6 235L143 237.5M151.7 223.6L140 225.9M146.3 213.4L138.3 214M146.1 202.3L138.1 202M147.2 191.3L139.3 190M149.5 180.5L141.8 178.3M162.4 173.9L145.8 167M158 160.1L151 156.2M164 150.7L157.5 146M171 142.2L165.1 136.8M179 134.5L173.8 128.4M190 131.2L183.3 121.2M197.3 122.2L193.7 115.1M207.5 117.8L204.7 110.3M218.1 114.6L216.2 106.8M229 112.7L228 104.7M240 122L240 104M251 112.7L252 104.7M261.9 114.6L263.8 106.8M272.5 117.8L275.3 110.3M282.7 122.2L286.3 115.1M290 131.2L296.7 121.2M301 134.5L306.2 128.4M309 142.2L314.9 136.8M316 150.7L322.5 146M322 160.1L329 156.2M317.6 173.9L334.2 167M330.5 180.5L338.2 178.3M332.8 191.3L340.7 190M333.9 202.3L341.9 202M333.7 213.4L341.7 214M328.3 223.6L340 225.9M329.4 235L337 237.5M325.4 245.4L332.6 248.7M320.1 255.1L327 259.3M313.8 264.2L320.1 269.1M299.4 265.4L312.1 278.1"/>
<g class="a-gauge-nums"><text x="191.9" y="259.1">0</text><text x="177.2" y="185">1</text><text x="240" y="143">2</text><text x="302.8" y="185">3</text><text x="288.1" y="259.1">4</text></g>
<text class="a-label" x="240" y="300" text-anchor="middle">bar</text>
<g class="a-needle">
<circle cx="240" cy="206" r="96" fill="none"/>
<path d="M240 199L336 206L240 213Z" class="c-warm-fill"/>
</g>
<circle cx="240" cy="206" r="13" class="a-hub-ring"/>
<circle cx="240" cy="206" r="5" class="a-hub"/>
<!-- Checkliste -->
<g transform="translate(318 268)" class="a-card">
<rect width="136" height="104" rx="16"/>
<text class="a-label" x="18" y="28">Wartung</text>
<g class="a-checks">
<path d="M18 48l5 5 9-10M18 70l5 5 9-10M18 92l5 5 9-10"/>
</g>
<text class="a-card-text" x="42" y="54">Druck</text>
<text class="a-card-text" x="42" y="76">Dichtheit</text>
<text class="a-card-text" x="42" y="98">Effizienz</text>
</g>
</svg>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- ============ ENERGIE-HAUS ============ -->
<section class="house sheet sheet--dark" id="energie-haus" aria-labelledby="house-title">
<div class="container">
<header class="section-head section-head--split">
<div>
<p class="label" data-reveal><span class="label__num">02</span>Energie-Haus</p>
<h2 class="h1" id="house-title" data-split>Ein Haus. <em class="accent">Alles verbunden.</em></h2>
</div>
<p class="lead" data-reveal>Moderne Haustechnik ist Teamarbeit. Wählen Sie eine Komponente und sehen Sie, wie Wärmepumpe, Solarthermie, Speicher, Flächenheizung, Bad und Lüftung zusammenspielen.</p>
</header>
<div class="house__grid" data-house data-active="wp">
<div class="house__stage" data-reveal>
<svg class="house__svg" viewBox="0 0 900 640" role="img" aria-labelledby="house-svg-title house-svg-desc">
<title id="house-svg-title">Energie-Haus: Schnitt durch ein Einfamilienhaus</title>
<desc id="house-svg-desc">Wärmepumpe, Solarthermie, Pufferspeicher, Fußbodenheizung, Bad mit Warmwasser und kontrollierte Wohnraumlüftung arbeiten zusammen.</desc>
<defs>
<pattern id="p-earth" width="12" height="12" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><path d="M0 0V12" stroke="rgba(255,255,255,.07)" stroke-width="2"/></pattern>
<linearGradient id="g-floor-heat" x1="0" y1="1" x2="0" y2="0"><stop offset="0" stop-color="#FF6A2B" stop-opacity=".42"/><stop offset="1" stop-color="#FF6A2B" stop-opacity="0"/></linearGradient>
<linearGradient id="g-tank" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#FF6A2B"/><stop offset=".55" stop-color="#C2456B"/><stop offset="1" stop-color="#2E9BEF"/></linearGradient>
<radialGradient id="g-hsun"><stop offset="0" stop-color="#FFB547" stop-opacity=".55"/><stop offset="1" stop-color="#FFB547" stop-opacity="0"/></radialGradient>
<linearGradient id="g-panel" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#3a5d8f"/><stop offset="1" stop-color="#16263d"/></linearGradient>
</defs>
<!-- Erdreich -->
<rect x="0" y="472" width="900" height="168" fill="url(#p-earth)"/>
<rect x="203" y="472" width="434" height="119" class="h-cellar"/>
<path class="h-ground" d="M0 472H200M640 472H900"/>
<!-- Sonne -->
<g class="sys" data-sys="solar">
<g transform="translate(812 92)">
<circle r="74" fill="url(#g-hsun)"/>
<g class="a-spin-slow"><path class="h-ray" d="M24 0L33 0M20.8 12L28.6 16.5M12 20.8L16.5 28.6M0 24L0 33M-12 20.8L-16.5 28.6M-20.8 12L-28.6 16.5M-24 0L-33 0M-20.8 -12L-28.6 -16.5M-12 -20.8L-16.5 -28.6M0 -24L0 -33M12 -20.8L16.5 -28.6M20.8 -12L28.6 -16.5"/></g>
<circle r="17" class="h-sun-core"/>
</g>
</g>
<!-- Gebäudehülle -->
<g class="h-shell">
<path class="h-roof" d="M174 202L420 50L666 202"/>
<path class="h-wall" d="M200 202V594M640 202V594"/>
<path class="h-slab" d="M200 203H640M200 332H640M200 468H640M200 594H640"/>
<path class="h-wall h-wall--in" d="M440 206V328M420 336V464"/>
<!-- Fenster -->
<g class="h-thin">
<rect x="486" y="228" width="58" height="50" rx="3"/><path d="M515 228v50M486 253h58"/>
<rect x="290" y="366" width="64" height="56" rx="3"/><path d="M322 366v56M290 394h64"/>
<rect x="512" y="362" width="88" height="52" rx="3"/><path d="M556 362v52"/>
</g>
<!-- Möbel -->
<g class="h-furn">
<path d="M482 328v-22h112v22M486 306v-8a6 6 0 0 1 6-6h24a6 6 0 0 1 6 6v8M600 328v-42"/>
<path d="M296 420h86M304 420v44M374 420v44M339 336v26M326 372h26l-4-10h-18z"/>
<path d="M498 464v-22a8 8 0 0 1 8-8h96a8 8 0 0 1 8 8v22M492 464v-14a6 6 0 0 1 12 0M604 464v-14a6 6 0 0 1 12 0"/>
<path d="M448 464v-14h18v14M457 450c-10-6-12-18-4-26M457 450c8-8 16-12 18-24M457 450c0-10 2-18-6-28"/>
</g>
<g class="h-labels">
<text x="214" y="226">Bad</text>
<text x="456" y="226">Schlafen</text>
<text x="214" y="358">Küche</text>
<text x="436" y="358">Wohnen</text>
<text x="214" y="494">Technik</text>
<text x="276" y="190">Dachboden</text>
</g>
</g>
<!-- Wärmepumpe -->
<g class="sys" data-sys="wp">
<g class="h-airwaves">
<path d="M884 420c-14-8-24 8-40 0"/><path d="M884 440c-14-8-24 8-40 0"/><path d="M884 460c-14-8-24 8-40 0"/>
</g>
<rect class="h-unit" x="690" y="402" width="118" height="62" rx="9"/>
<circle class="h-unit-line" cx="730" cy="433" r="21"/>
<g class="a-fan h-fan">
<path d="M730 433c-3-8-1-15 5-18 3 6 2 13-5 18z"/>
<path d="M730 433c-3-8-1-15 5-18 3 6 2 13-5 18z" transform="rotate(90 730 433)"/>
<path d="M730 433c-3-8-1-15 5-18 3 6 2 13-5 18z" transform="rotate(180 730 433)"/>
<path d="M730 433c-3-8-1-15 5-18 3 6 2 13-5 18z" transform="rotate(270 730 433)"/>
</g>
<path class="h-unit-line" d="M770 412v42M780 412v42M790 412v42M798 412v42M704 464v8M794 464v8"/>
<path class="h-pipe c-warm" d="M690 444H666V552H500"/>
<path class="h-flow c-warm" d="M690 444H666V552H500"/>
<path class="h-pipe c-cool" d="M500 564H676V456H690"/>
<path class="h-flow c-cool" d="M500 564H676V456H690"/>
</g>
<!-- Solarthermie -->
<g class="sys" data-sys="solar">
<polygon class="h-panel" points="483.9,83.6 604.7,158.2 611,148 490.2,73.4"/>
<path class="h-panel-line" d="M524.1 108.5L530.5 98.3M564.4 133.4L570.7 123.1M490.4 80.6L604.4 151"/>
<path class="h-pipe c-amber" d="M607 154C611 158 612 162 612 172V520H500"/>
<path class="h-flow c-amber" d="M607 154C611 158 612 162 612 172V520H500"/>
<path class="h-pipe c-amber-dim" d="M500 534H624V180C624 166 620 156 612 150"/>
<path class="h-flow c-amber-dim" d="M500 534H624V180C624 166 620 156 612 150"/>
</g>
<!-- Speicher -->
<g class="sys" data-sys="tank">
<rect class="h-tank" x="432" y="482" width="64" height="90" rx="30"/>
<rect class="h-tank-glow" x="438" y="488" width="52" height="78" rx="25"/>
<path class="h-unit-line" d="M444 572v16M484 572v16"/>
</g>
<!-- Fußbodenheizung -->
<g class="sys" data-sys="fbh">
<rect x="203" y="420" width="434" height="40" fill="url(#g-floor-heat)" class="h-floorglow"/>
<rect x="203" y="286" width="434" height="38" fill="url(#g-floor-heat)" class="h-floorglow"/>
<path class="h-pipe c-warm" d="M454 482V324"/>
<path class="h-flow c-warm" d="M454 482V324"/>
<path class="h-pipe c-cool" d="M474 324V482"/>
<path class="h-flow c-cool" d="M474 324V482"/>
<g class="h-loops">
<path d="M214 459h0M228 459h0M242 459h0M256 459h0M270 459h0M284 459h0M298 459h0M312 459h0M326 459h0M340 459h0M354 459h0M368 459h0M382 459h0M396 459h0M410 459h0M432 459h0M446 459h0M488 459h0M502 459h0M516 459h0M530 459h0M544 459h0M558 459h0M572 459h0M586 459h0M600 459h0M614 459h0M628 459h0"/>
<path d="M214 323h0M228 323h0M242 323h0M256 323h0M270 323h0M284 323h0M298 323h0M312 323h0M326 323h0M340 323h0M354 323h0M368 323h0M382 323h0M396 323h0M410 323h0M424 323h0M488 323h0M502 323h0M516 323h0M530 323h0M544 323h0M558 323h0M572 323h0M586 323h0M600 323h0M614 323h0M628 323h0"/>
</g>
</g>
<!-- Bad & Warmwasser -->
<g class="sys" data-sys="bad">
<path class="h-pipe c-cool" d="M0 582H464V572"/>
<path class="h-flow c-cool" d="M0 582H464V572"/>
<path class="h-pipe c-cool" d="M266 582V304H336"/>
<path class="h-flow c-cool" d="M266 582V304H336"/>
<path class="h-pipe c-hot" d="M446 482V238H236"/>
<path class="h-flow c-hot" d="M446 482V238H236"/>
<path class="h-pipe c-hot" d="M446 300H398"/>
<circle class="h-meter" cx="232" cy="582" r="9"/>
<path class="h-unit-line" d="M232 576v6l4 3"/>
<!-- Dusche -->
<path class="h-fixture" d="M236 238v8M222 250h28a2 2 0 0 0-2-4h-24a2 2 0 0 0-2 4zM256 252v74M206 326h52"/>
<g class="h-drops"><path d="M226 258v8M236 262v8M246 258v8M231 274v8M241 278v8"/></g>
<!-- Waschtisch -->
<path class="h-fixture" d="M336 292h62v30h-62zM340 292c0 10 8 14 27 14s27-4 27-14M342 238h50v42h-50zM367 292v-8"/>
</g>
<!-- Wohnraumlüftung -->
<g class="sys" data-sys="kwl">
<path class="h-duct c-air" d="M460 170H586V340"/>
<path class="h-duct-flow c-air" d="M460 170H586V340"/>
<path class="h-duct c-exhaust" d="M330 206V188H380"/>
<path class="h-duct-flow c-exhaust" d="M330 206V188H380"/>
<path class="h-duct c-air-dim" d="M404 150V60"/>
<path class="h-duct-flow c-air-dim" d="M404 60V150"/>
<path class="h-duct c-exhaust-dim" d="M436 150V60"/>
<path class="h-duct-flow c-exhaust-dim" d="M436 150V60"/>
<path class="h-unit-line" d="M396 56h16M428 56h16M398 50h12M430 50h12"/>
<rect class="h-unit" x="380" y="150" width="80" height="38" rx="6"/>
<circle class="h-unit-line" cx="420" cy="169" r="11"/>
<path class="h-unit-line" d="M414 163l12 12M426 163l-12 12"/>
<path class="h-vent" d="M574 206h24M574 340h24M318 206h24"/>
</g>
</svg>
<button class="hotspot" type="button" style="--x:88.6%;--y:62.8%" data-part="wp"><span class="hotspot__label">Wärmepumpe</span></button>
<button class="hotspot" type="button" style="--x:60.8%;--y:18.1%" data-part="solar"><span class="hotspot__label">Solarthermie</span></button>
<button class="hotspot" type="button" style="--x:51.6%;--y:82.3%" data-part="tank"><span class="hotspot__label">Pufferspeicher</span></button>
<button class="hotspot" type="button" style="--x:28.2%;--y:71.7%" data-part="fbh"><span class="hotspot__label">Fußbodenheizung</span></button>
<button class="hotspot" type="button" style="--x:40.8%;--y:41.9%" data-part="bad"><span class="hotspot__label">Bad &amp; Warmwasser</span></button>
<button class="hotspot" type="button" style="--x:46.7%;--y:26.4%" data-part="kwl"><span class="hotspot__label">Lüftung</span></button>
</div>
<div class="house__panel" data-reveal>
<div class="house__tabs" role="tablist" aria-label="Komponenten des Energie-Hauses">
<button role="tab" type="button" id="tab-wp" aria-controls="part-wp" aria-selected="true" data-part="wp"><svg class="icon" aria-hidden="true"><use href="#i-heatpump"/></svg>Wärmepumpe</button>
<button role="tab" type="button" id="tab-solar" aria-controls="part-solar" aria-selected="false" tabindex="-1" data-part="solar"><svg class="icon" aria-hidden="true"><use href="#i-sun"/></svg>Solarthermie</button>
<button role="tab" type="button" id="tab-tank" aria-controls="part-tank" aria-selected="false" tabindex="-1" data-part="tank"><svg class="icon" aria-hidden="true"><use href="#i-tank"/></svg>Speicher</button>
<button role="tab" type="button" id="tab-fbh" aria-controls="part-fbh" aria-selected="false" tabindex="-1" data-part="fbh"><svg class="icon" aria-hidden="true"><use href="#i-floor"/></svg>Fußbodenheizung</button>
<button role="tab" type="button" id="tab-bad" aria-controls="part-bad" aria-selected="false" tabindex="-1" data-part="bad"><svg class="icon" aria-hidden="true"><use href="#i-shower"/></svg>Bad &amp; Warmwasser</button>
<button role="tab" type="button" id="tab-kwl" aria-controls="part-kwl" aria-selected="false" tabindex="-1" data-part="kwl"><svg class="icon" aria-hidden="true"><use href="#i-wind"/></svg>Lüftung</button>
</div>
<div class="house__parts">
<div class="part is-active" id="part-wp" role="tabpanel" aria-labelledby="tab-wp" data-part="wp">
<p class="part__kicker">Regenerative Heiztechnik</p>
<h3 class="part__title">Wärmepumpe</h3>
<p>Holt Wärme aus der Umgebungsluft – selbst an frostigen Tagen. Aus einer Kilowattstunde Strom werden so mehrere Kilowattstunden Heizwärme.</p>
<ul class="part__points">
<li>Nutzt kostenlose Umweltwärme</li>
<li>Heizt im Winter, kühlt auf Wunsch im Sommer</li>
<li>Ideal mit Fußbodenheizung</li>
</ul>
<a class="link-arrow" href="#regenerativ">Zur Leistung <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</div>
<div class="part" id="part-solar" role="tabpanel" aria-labelledby="tab-solar" data-part="solar" hidden>
<p class="part__kicker">Regenerative Heiztechnik</p>
<h3 class="part__title">Solarthermie</h3>
<p>Kollektoren auf dem Dach wandeln Sonnenlicht in Wärme um und unterstützen Warmwasser und Heizung – vom Frühjahr bis in den Herbst.</p>
<ul class="part__points">
<li>Kostenlose Sonnenwärme</li>
<li>Entlastet Heizung und Speicher</li>
<li>Ideal für die Warmwasserbereitung</li>
</ul>
<a class="link-arrow" href="#regenerativ">Zur Leistung <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</div>
<div class="part" id="part-tank" role="tabpanel" aria-labelledby="tab-tank" data-part="tank" hidden>
<p class="part__kicker">Herz der Anlage</p>
<h3 class="part__title">Pufferspeicher</h3>
<p>Der Speicher sammelt Wärme aus allen Quellen und gibt sie genau dann ab, wenn sie gebraucht wird – ganz gleich, ob die Sonne scheint oder die Wärmepumpe läuft.</p>
<ul class="part__points">
<li>Verbindet alle Wärmequellen</li>
<li>Weniger Taktung, längere Lebensdauer</li>
<li>Warmwasser in Reserve</li>
</ul>
<a class="link-arrow" href="#regenerativ">Zur Leistung <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</div>
<div class="part" id="part-fbh" role="tabpanel" aria-labelledby="tab-fbh" data-part="fbh" hidden>
<p class="part__kicker">Heizung</p>
<h3 class="part__title">Fußbodenheizung</h3>
<p>Große Flächen, niedrige Temperaturen: Die Flächenheizung verteilt die Wärme gleichmäßig im Raum und arbeitet perfekt mit Wärmepumpen zusammen.</p>
<ul class="part__points">
<li>Angenehme Strahlungswärme</li>
<li>Niedrige Vorlauftemperaturen</li>
<li>Unsichtbar und platzsparend</li>
</ul>
<a class="link-arrow" href="#heizung">Zur Leistung <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</div>
<div class="part" id="part-bad" role="tabpanel" aria-labelledby="tab-bad" data-part="bad" hidden>
<p class="part__kicker">Sanitär</p>
<h3 class="part__title">Bad &amp; Warmwasser</h3>
<p>Warmes Wasser, wann immer Sie es brauchen – und ein Bad, das durchdacht geplant ist und lange schön bleibt. Vom Gäste-WC bis zum Wohlfühlbad.</p>
<ul class="part__points">
<li>Planung und Umsetzung aus einer Hand</li>
<li>Barrierefrei und bodengleich</li>
<li>Hygienische Trinkwasserinstallation</li>
</ul>
<a class="link-arrow" href="#sanitaer">Zur Leistung <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</div>
<div class="part" id="part-kwl" role="tabpanel" aria-labelledby="tab-kwl" data-part="kwl" hidden>
<p class="part__kicker">Lüftung</p>
<h3 class="part__title">Wohnraumlüftung</h3>
<p>Ein zentrales Lüftungsgerät versorgt die Räume mit frischer, gefilterter Luft und gewinnt dabei den Großteil der Wärme aus der Abluft zurück.</p>
<ul class="part__points">
<li>Frische Luft bei geschlossenem Fenster</li>
<li>Wärmerückgewinnung</li>
<li>Weniger Pollen, Staub und Feuchtigkeit</li>
</ul>
<a class="link-arrow" href="#lueftung">Zur Leistung <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</div>
</div>
<div class="house__progress" aria-hidden="true"><i data-house-progress></i></div>
</div>
</div>
</div>
</section>
<!-- ============ HEIZUNGS-FINDER ============ -->
<section class="finder sheet" id="heizungs-finder" aria-labelledby="finder-title">
<div class="container finder__grid">
<header class="section-head finder__head">
<p class="label" data-reveal><span class="label__num">03</span>Heizungs-Finder</p>
<h2 class="h1" id="finder-title" data-split>Welche Heizung passt <em class="accent">zu Ihrem Haus?</em></h2>
<p class="lead" data-reveal>Vier kurze Fragen, eine erste Orientierung. Unverbindlich – die genaue Planung machen wir gemeinsam bei Ihnen vor Ort.</p>
<p class="finder__note" data-reveal><svg class="icon" aria-hidden="true"><use href="#i-check"/></svg>Kein Login, keine Daten­speicherung</p>
</header>
<div class="finder__app" data-finder data-reveal>
<div class="finder__top">
<span class="finder__count" data-finder-count aria-live="polite">Frage 1 von 4</span>
<div class="finder__progress" aria-hidden="true"><i data-finder-bar></i></div>
</div>
<div class="finder__form" data-finder-form>
<fieldset class="finder__step is-active" data-step="1">
<legend class="finder__q">Um welches Gebäude geht es?</legend>
<div class="finder__opts">
<label class="opt"><input type="radio" name="gebaeude" value="neubau"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-house-new"/></svg><strong>Neubau</strong><small>In Planung oder im Bau</small></span></label>
<label class="opt"><input type="radio" name="gebaeude" value="gedaemmt"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-house-good"/></svg><strong>Bestand, gut gedämmt</strong><small>Modernisiert, neuere Fenster</small></span></label>
<label class="opt"><input type="radio" name="gebaeude" value="unsaniert"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-house-old"/></svg><strong>Bestand, wenig gedämmt</strong><small>Älteres Haus, kaum saniert</small></span></label>
</div>
</fieldset>
<fieldset class="finder__step" data-step="2" hidden>
<legend class="finder__q">Wie wird die Wärme im Haus verteilt?</legend>
<div class="finder__opts">
<label class="opt"><input type="radio" name="verteilung" value="fbh"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-floor"/></svg><strong>Fußbodenheizung</strong><small>Überwiegend Flächenheizung</small></span></label>
<label class="opt"><input type="radio" name="verteilung" value="hk"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-radiator"/></svg><strong>Heizkörper</strong><small>Klassische Radiatoren</small></span></label>
<label class="opt"><input type="radio" name="verteilung" value="mix"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-mix"/></svg><strong>Beides</strong><small>Gemischt im Haus</small></span></label>
</div>
</fieldset>
<fieldset class="finder__step" data-step="3" hidden>
<legend class="finder__q">Gibt es Platz für einen Lagerraum?</legend>
<div class="finder__opts finder__opts--2">
<label class="opt"><input type="radio" name="lager" value="ja"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-box"/></svg><strong>Ja</strong><small>Z.&nbsp;B. ehemaliger Öltankraum</small></span></label>
<label class="opt"><input type="radio" name="lager" value="nein"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-no"/></svg><strong>Nein</strong><small>Eher wenig Platz im Keller</small></span></label>
</div>
</fieldset>
<fieldset class="finder__step" data-step="4" hidden>
<legend class="finder__q">Haben Sie eine sonnige Dachfläche?</legend>
<div class="finder__opts finder__opts--2">
<label class="opt"><input type="radio" name="dach" value="ja"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-roof-sun"/></svg><strong>Ja</strong><small>Ausrichtung Süd, Ost oder West</small></span></label>
<label class="opt"><input type="radio" name="dach" value="nein"><span class="opt__box"><svg class="icon" aria-hidden="true"><use href="#i-cloud"/></svg><strong>Nein / weiß nicht</strong><small>Verschattet oder Nordseite</small></span></label>
</div>
</fieldset>
<div class="finder__result" data-step="result" hidden tabindex="-1">
<p class="finder__result-kicker">Unsere erste Empfehlung</p>
<h3 class="finder__result-title" data-result-title>–</h3>
<p class="finder__result-text" data-result-text></p>
<p class="finder__bars-label">Passung zu Ihren Angaben</p>
<ul class="finder__bars" data-result-bars></ul>
<ul class="finder__addons" data-result-addons></ul>
<div class="finder__actions">
<a class="btn btn--dark" href="#kontakt" data-finder-apply data-magnetic>
<span class="btn__label">Ergebnis mit uns besprechen</span>
<span class="btn__icon" aria-hidden="true"><svg class="icon"><use href="#i-arrow"/></svg></span>
</a>
<button class="btn btn--ghost" type="button" data-finder-restart><svg class="icon" aria-hidden="true"><use href="#i-restart"/></svg><span class="btn__label">Neu starten</span></button>
</div>
<p class="finder__disclaimer">Erste Orientierung ohne Gewähr – ersetzt keine Heizlastberechnung und keine Beratung vor Ort.</p>
</div>
</div>
<div class="finder__nav">
<button class="finder__back" type="button" data-finder-back disabled><svg class="icon" aria-hidden="true"><use href="#i-arrow-left"/></svg>Zurück</button>
<button class="finder__next" type="button" data-finder-next disabled>Weiter<svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></button>
</div>
</div>
</div>
</section>
<!-- ============ ABLAUF ============ -->
<section class="process" id="ablauf" aria-labelledby="process-title">
<div class="container">
<header class="section-head section-head--center">
<p class="label" data-reveal><span class="label__num">04</span>Ablauf</p>
<h2 class="h1" id="process-title" data-split>Vom ersten Anruf <em class="accent">bis zur warmen Dusche.</em></h2>
<p class="lead" data-reveal>Klare Schritte, feste Ansprechpartner und ein Team, das hält, was es verspricht.</p>
</header>
<div class="steps" data-steps>
<div class="steps__pipe" aria-hidden="true"><i class="steps__fill" data-steps-fill></i></div>
<ol class="steps__list">
<li class="step" data-step-item>
<span class="step__node" aria-hidden="true"><span>01</span></span>
<h3 class="step__title">Anfrage</h3>
<p>Sie rufen an, schreiben uns oder nutzen das Formular. Wir melden uns und vereinbaren einen Termin, der Ihnen passt.</p>
</li>
<li class="step" data-step-item>
<span class="step__node" aria-hidden="true"><span>02</span></span>
<h3 class="step__title">Beratung vor Ort</h3>
<p>Wir sehen uns Ihr Haus an, hören zu und zeigen ehrlich, welche Lösung sinnvoll ist – und welche nicht.</p>
</li>
<li class="step" data-step-item>
<span class="step__node" aria-hidden="true"><span>03</span></span>
<h3 class="step__title">Planung &amp; Angebot</h3>
<p>Sie erhalten ein transparentes Angebot – auf Wunsch mit Hinweisen zu passenden Förderprogrammen.</p>
</li>
<li class="step" data-step-item>
<span class="step__node" aria-hidden="true"><span>04</span></span>
<h3 class="step__title">Montage &amp; Service</h3>
<p>Unser Team installiert sauber und termintreu. Danach bleiben wir Ihr Ansprechpartner für Wartung und Kundendienst.</p>
</li>
</ol>
</div>
</div>
</section>
<!-- ============ ÜBER UNS ============ -->
<section class="about sheet sheet--sand" id="ueber-uns" aria-labelledby="about-title">
<div class="container">
<header class="section-head section-head--split">
<div>
<p class="label" data-reveal><span class="label__num">05</span>Über uns</p>
<h2 class="h1" id="about-title" data-split>Seit 1985 in Ergolding. <em class="accent">Und kein bisschen eingerostet.</em></h2>
</div>
<p class="lead" data-reveal>Was 1985 als kleiner Betrieb begann, ist heute ein eingespieltes Team aus rund 25 Fachleuten. Geblieben ist unser Anspruch: ehrliche Beratung, saubere Arbeit und Lösungen, die lange halten.</p>
</header>
<ul class="stats" data-reveal-stagger>
<li class="stat"><span class="stat__num" data-count="1985" data-count-from="1900">1985</span><span class="stat__label">gegründet in Ergolding</span></li>
<li class="stat"><span class="stat__num"><span data-count data-years>41</span></span><span class="stat__label">Jahre Erfahrung</span></li>
<li class="stat"><span class="stat__num"><small>≈</small><span data-count="25">25</span></span><span class="stat__label">Mitarbeitende</span></li>
<li class="stat"><span class="stat__num" data-count="4">4</span><span class="stat__label">Gewerke unter einem Dach</span></li>
</ul>
<div class="history" data-history>
<div class="history__year" aria-hidden="true">
<div class="odo" data-odo>
<span class="odo__digit" data-odo-digit><span class="odo__strip">0123456789</span></span>
<span class="odo__digit" data-odo-digit><span class="odo__strip">0123456789</span></span>
<span class="odo__digit" data-odo-digit><span class="odo__strip">0123456789</span></span>
<span class="odo__digit" data-odo-digit><span class="odo__strip">0123456789</span></span>
</div>
<p class="history__caption" data-odo-caption>Die Gründung</p>
</div>
<ol class="history__list">
<li class="tl" data-year="1985">
<span class="tl__year">1985</span>
<h3 class="tl__title">Die Gründung</h3>
<p>Richard Olzinger macht sich nach der Trennung von der Firma Gleisberg selbstständig und gründet Olzinger Haustechnik in Ergolding.</p>
</li>
<li class="tl" data-year="1994">
<span class="tl__year">1994</span>
<h3 class="tl__title">Neue Partner</h3>
<p>Arno Geier und Franz Ramsauer steigen als Gesellschafter ein und bringen zusätzliches Know-how in den Betrieb.</p>
</li>
<li class="tl" data-year="2008">
<span class="tl__year">2008</span>
<h3 class="tl__title">Staffelübergabe</h3>
<p>Richard Olzinger geht in den Ruhestand und übergibt seine Anteile an Robert Straub, den kaufmännischen Leiter des Betriebs.</p>
</li>
<li class="tl" data-year="2014">
<span class="tl__year">2014</span>
<h3 class="tl__title">Gemeinsam an der Spitze</h3>
<p>Arno Geier übergibt seine Anteile an Franz Ramsauer und Robert Straub, die das Unternehmen seitdem gemeinsam führen.</p>
</li>
<li class="tl" data-year="now">
<span class="tl__year">Heute</span>
<h3 class="tl__title">Bereit für die Energiewende</h3>
<p>Mit rund 25 Mitarbeitenden und einem Schwerpunkt auf regenerativer Heiztechnik bringen wir Wärmepumpe, Solarthermie und Co. in die Häuser der Region.</p>
</li>
</ol>
</div>
<div class="leaders">
<p class="label" data-reveal><span class="label__dot"></span>Geschäftsführung</p>
<div class="leaders__grid" data-reveal-stagger>
<article class="leader">
<div class="leader__avatar leader__avatar--warm" aria-hidden="true"><span>FR</span></div>
<div>
<h3 class="leader__name">Franz Ramsauer</h3>
<p class="leader__role">Geschäftsführer</p>
<p class="leader__meta">Gesellschafter seit 1994</p>
</div>
</article>
<article class="leader">
<div class="leader__avatar leader__avatar--cool" aria-hidden="true"><span>RS</span></div>
<div>
<h3 class="leader__name">Robert Straub</h3>
<p class="leader__role">Geschäftsführer · Kaufmännische Leitung</p>
<p class="leader__meta">Gesellschafter seit 2008</p>
</div>
</article>
<article class="leader leader--team">
<div class="leader__avatar leader__avatar--team" aria-hidden="true"><svg class="icon"><use href="#i-team"/></svg></div>
<div>
<h3 class="leader__name">Unser Team</h3>
<p class="leader__role">Rund 25 Fachleute aus der Region</p>
<p class="leader__meta">Planung · Montage · Kundendienst · Büro</p>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- ============ KARRIERE ============ -->
<section class="career sheet sheet--dark" id="karriere" aria-labelledby="career-title">
<div class="career__glow" aria-hidden="true"></div>
<div class="container career__grid">
<div class="career__intro">
<p class="label" data-reveal><span class="label__num">06</span>Karriere</p>
<h2 class="h1" id="career-title" data-split>Hände, die anpacken. <em class="accent">Köpfe, die mitdenken.</em></h2>
<p class="lead" data-reveal>Haustechnik ist ein Beruf mit Zukunft – gerade jetzt, wo Wärmepumpe &amp; Co. die Energiewende direkt ins Haus bringen. Wir bilden aus und freuen uns über Verstärkung.</p>
<ul class="perks" data-reveal-stagger>
<li><svg class="icon" aria-hidden="true"><use href="#i-pin"/></svg>Regional verwurzelt</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-leaf"/></svg>Zukunftsberuf Energiewende</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-team"/></svg>Eingespieltes Team</li>
<li><svg class="icon" aria-hidden="true"><use href="#i-wrench"/></svg>Moderne Technik</li>
</ul>
</div>
<div class="jobs" data-reveal-stagger>
<article class="job">
<div class="job__head">
<span class="job__icon" aria-hidden="true"><svg class="icon"><use href="#i-cap"/></svg></span>
<span class="job__tag">Ausbildung · Start im September</span>
</div>
<h3 class="job__title">Anlagenmechaniker/in für Sanitär-, Heizungs- und Klimatechnik (m/w/d)</h3>
<p>3,5 Jahre, die sich lohnen: Du lernst Wärmepumpen, Heizungen, Bäder und Lüftungsanlagen von Grund auf kennen – mitten im Team und mit echten Projekten.</p>
<a class="link-arrow" href="mailto:kontakt@olzinger.de?subject=Bewerbung%20Ausbildung%20Anlagenmechaniker%2Fin%20SHK">Jetzt bewerben <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</article>
<article class="job">
<div class="job__head">
<span class="job__icon" aria-hidden="true"><svg class="icon"><use href="#i-wrench"/></svg></span>
<span class="job__tag">Fachkräfte · Initiativbewerbung</span>
</div>
<h3 class="job__title">Anlagenmechaniker, Monteure &amp; Kundendienst (m/w/d)</h3>
<p>Du kennst dich mit Heizung, Sanitär oder Lüftung aus und suchst ein Team, in dem gute Arbeit zählt? Dann melde dich – wir freuen uns auf deine Initiativbewerbung.</p>
<a class="link-arrow" href="mailto:kontakt@olzinger.de?subject=Initiativbewerbung">Initiativ bewerben <svg class="icon" aria-hidden="true"><use href="#i-arrow"/></svg></a>
</article>
</div>
</div>
</section>
<!-- ============ KONTAKT ============ -->
<section class="contact sheet" id="kontakt" aria-labelledby="contact-title">
<div class="container contact__grid">
<div class="contact__info">
<p class="label" data-reveal><span class="label__num">07</span>Kontakt</p>
<h2 class="h1" id="contact-title" data-split>Lassen Sie uns <em class="accent">über Ihr Projekt</em> sprechen.</h2>
<p class="lead" data-reveal>Rufen Sie uns an, schreiben Sie uns oder nutzen Sie das Formular – wir melden uns schnellstmöglich bei Ihnen.</p>
<ul class="cards" data-reveal-stagger>
<li>
<a class="ccard" href="tel:+4987172617">
<span class="ccard__icon" aria-hidden="true"><svg class="icon"><use href="#i-phone"/></svg></span>
<span class="ccard__body"><small>Telefon</small><strong>0871&nbsp;72617</strong></span>
<svg class="icon ccard__go" aria-hidden="true"><use href="#i-arrow-ur"/></svg>
</a>
</li>
<li>
<a class="ccard" href="mailto:kontakt@olzinger.de">
<span class="ccard__icon" aria-hidden="true"><svg class="icon"><use href="#i-mail"/></svg></span>
<span class="ccard__body"><small>E-Mail</small><strong>kontakt@olzinger.de</strong></span>
<svg class="icon ccard__go" aria-hidden="true"><use href="#i-arrow-ur"/></svg>
</a>
</li>
<li>
<a class="ccard" href="https://www.google.com/maps/dir/?api=1&amp;destination=Olzinger+GmbH%2C+Ahornstra%C3%9Fe+112%2C+84030+Ergolding" target="_blank" rel="noopener">
<span class="ccard__icon" aria-hidden="true"><svg class="icon"><use href="#i-pin"/></svg></span>
<span class="ccard__body"><small>Adresse · Route planen</small><strong>Ahornstraße 112, 84030 Ergolding</strong></span>
<svg class="icon ccard__go" aria-hidden="true"><use href="#i-arrow-ur"/></svg>
</a>
</li>
<li>
<div class="ccard ccard--static">
<span class="ccard__icon" aria-hidden="true"><svg class="icon"><use href="#i-fax"/></svg></span>
<span class="ccard__body"><small>Fax</small><strong>0871&nbsp;74963</strong></span>
</div>
</li>
</ul>
<div class="hours" data-reveal>
<div class="hours__head">
<h3 class="hours__title"><svg class="icon" aria-hidden="true"><use href="#i-clock"/></svg>Öffnungszeiten</h3>
<p class="status" data-status><span class="status__dot" aria-hidden="true"></span><span class="status__text">Mo–Do 7–16:30 Uhr · Fr 7–11:30 Uhr</span></p>
</div>
<dl class="hours__list">
<div data-days="1,2,3,4"><dt>Montag – Donnerstag</dt><dd>7:00 – 12:00 · 13:00 – 16:30</dd></div>
<div data-days="5"><dt>Freitag</dt><dd>7:00 – 11:30</dd></div>
<div data-days="6,0"><dt>Samstag &amp; Sonntag</dt><dd>geschlossen</dd></div>
</dl>
</div>
</div>
<form class="form" action="kontakt.php" method="post" novalidate data-contact-form data-reveal>
<fieldset class="form__topics">
<legend class="form__legend">Worum geht es?</legend>
<div class="chips">
<label class="chip"><input type="radio" name="topic" value="Heizung"><span>Heizung</span></label>
<label class="chip"><input type="radio" name="topic" value="Wärmepumpe &amp; Regenerativ"><span>Wärmepumpe &amp; Regenerativ</span></label>
<label class="chip"><input type="radio" name="topic" value="Bad &amp; Sanitär"><span>Bad &amp; Sanitär</span></label>
<label class="chip"><input type="radio" name="topic" value="Lüftung"><span>Lüftung</span></label>
<label class="chip"><input type="radio" name="topic" value="Wartung &amp; Störung"><span>Wartung &amp; Störung</span></label>
<label class="chip"><input type="radio" name="topic" value="Bewerbung"><span>Bewerbung</span></label>
<label class="chip"><input type="radio" name="topic" value="Sonstiges"><span>Sonstiges</span></label>
</div>
</fieldset>
<div class="form__row">
<div class="field">
<label for="f-name">Name <span aria-hidden="true">*</span></label>
<input id="f-name" name="name" type="text" autocomplete="name" required maxlength="120">
<p class="field__error" id="e-name">Bitte geben Sie Ihren Namen an.</p>
</div>
<div class="field">
<label for="f-email">E-Mail <span aria-hidden="true">*</span></label>
<input id="f-email" name="email" type="email" autocomplete="email" required maxlength="200">
<p class="field__error" id="e-email">Bitte geben Sie eine gültige E-Mail-Adresse an.</p>
</div>
</div>
<div class="form__row">
<div class="field">
<label for="f-phone">Telefon <small>(optional)</small></label>
<input id="f-phone" name="phone" type="tel" autocomplete="tel" maxlength="60">
</div>
<div class="field">
<label for="f-place">PLZ / Ort <small>(optional)</small></label>
<input id="f-place" name="place" type="text" autocomplete="address-level2" maxlength="120">
</div>
</div>
<div class="field">
<label for="f-message">Ihre Nachricht <span aria-hidden="true">*</span></label>
<textarea id="f-message" name="message" rows="5" required maxlength="5000"></textarea>
<p class="field__error" id="e-message">Bitte schreiben Sie uns kurz, worum es geht.</p>
</div>
<div class="field field--hp" aria-hidden="true">
<label for="f-website">Website</label>
<input id="f-website" name="website" type="text" tabindex="-1" autocomplete="off">
</div>
<input type="hidden" name="ts" value="" data-ts>
<div class="field field--check">
<label class="check">
<input type="checkbox" name="privacy" value="1" required>
<span class="check__box" aria-hidden="true"><svg class="icon"><use href="#i-check"/></svg></span>
<span class="check__text">Ich habe die <a href="datenschutz.html">Datenschutzerklärung</a> gelesen und bin mit der Verarbeitung meiner Angaben zur Bearbeitung meiner Anfrage einverstanden. <span aria-hidden="true">*</span></span>
</label>
<p class="field__error" id="e-privacy">Bitte stimmen Sie der Datenschutzerklärung zu.</p>
</div>
<div class="form__submit">
<button class="btn btn--dark" type="submit" data-magnetic>
<span class="btn__label">Anfrage senden</span>
<span class="btn__icon" aria-hidden="true"><svg class="icon"><use href="#i-arrow"/></svg></span>
</button>
<p class="form__hint">* Pflichtfelder</p>
</div>
<div class="form__status" role="status" aria-live="polite" data-form-status></div>
</form>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="footer sheet sheet--dark">
<div class="container">
<div class="footer__cta">
<p class="footer__claim">Wärme. Wasser. Luft. <em class="accent">Aus Ergolding.</em></p>
<a class="btn btn--light" href="#kontakt" data-magnetic>
<span class="btn__label">Projekt anfragen</span>
<span class="btn__icon" aria-hidden="true"><svg class="icon"><use href="#i-arrow"/></svg></span>
</a>
</div>
<div class="footer__grid">
<div class="footer__col">
<h2 class="footer__h">Olzinger GmbH</h2>
<address>Ahornstraße 112<br>84030 Ergolding</address>
</div>
<div class="footer__col">
<h2 class="footer__h">Kontakt</h2>
<p><a href="tel:+4987172617">Tel.&nbsp;0871&nbsp;72617</a><br>Fax 0871&nbsp;74963<br><a href="mailto:kontakt@olzinger.de">kontakt@olzinger.de</a></p>
</div>
<div class="footer__col">
<h2 class="footer__h">Öffnungszeiten</h2>
<p>Mo – Do 7:00 – 12:00<br>und 13:00 – 16:30<br>Fr 7:00 – 11:30</p>
</div>
<nav class="footer__col" aria-label="Footer-Navigation">
<h2 class="footer__h">Seite</h2>
<ul>
<li><a href="#leistungen">Leistungen</a></li>
<li><a href="#energie-haus">Energie-Haus</a></li>
<li><a href="#heizungs-finder">Heizungs-Finder</a></li>
<li><a href="#ueber-uns">Über uns</a></li>
<li><a href="#karriere">Karriere</a></li>
</ul>
</nav>
</div>
<div class="footer__word" aria-hidden="true" data-footer-word>
<span>Olzinger</span>
</div>
<div class="footer__bottom">
<p>© <span data-current-year>2026</span> Olzinger GmbH · Heizung · Sanitär · Lüftung · Regenerative Energien</p>
<ul>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="datenschutz.html">Datenschutz</a></li>
<li><a class="footer__top" href="#top">Nach oben <svg class="icon" aria-hidden="true"><use href="#i-arrow-up"/></svg></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>