777 lines
69 KiB
HTML
777 lines
69 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="./support.js"></script>
|
||
</head>
|
||
<body>
|
||
<x-dc>
|
||
<helmet>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet" />
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
body { margin: 0; background: #FFFFFF; color: #1A1D21; font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
|
||
a { color: #0B4F6C; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
|
||
a:hover { color: #08384D; }
|
||
:focus-visible { outline: 3px solid #C9451C; outline-offset: 2px; }
|
||
p { text-wrap: pretty; }
|
||
h1, h2, h3 { text-wrap: balance; }
|
||
input, select, button, textarea { font: inherit; }
|
||
</style>
|
||
</helmet>
|
||
|
||
<div style="background:#FFFFFF">
|
||
|
||
<div style="position:sticky;top:0;z-index:60">
|
||
<sc-if value="{{ notdienstAn }}" hint-placeholder-val="{{ true }}">
|
||
<div data-screen-label="Notdienst-Leiste" style="background:#C1121F;color:#FFFFFF;height:44px;display:flex;align-items:center">
|
||
<div style="max-width:1200px;margin:0 auto;width:100%;padding:0 clamp(16px,3vw,32px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:nowrap">
|
||
<div style="display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;min-width:0">
|
||
<span style="width:8px;height:8px;border-radius:50%;background:#FFFFFF;flex:none"></span>
|
||
<span style="flex:none">Notdienst</span>
|
||
<span style="opacity:.8;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Werktags 17–20 Uhr · Sa/So 8–20 Uhr</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:18px;flex:none">
|
||
<a href="tel:+4994112345990" style="color:#FFFFFF;text-decoration:none;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums">0941 12345-99</a>
|
||
<a href="SHK-Notdienst.dc.html" style="color:#FFFFFF;font-size:14px;opacity:.85">Zeiten & Zuschläge →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</sc-if>
|
||
|
||
<header data-screen-label="Header" style="background:rgba(255,255,255,.97);border-bottom:1px solid #DDE2E7;backdrop-filter:blur(10px)">
|
||
<div style="max-width:1200px;margin:0 auto;padding:14px clamp(16px,3vw,32px);display:flex;align-items:center;gap:clamp(16px,3vw,40px)">
|
||
<a href="#" style="display:flex;align-items:center;gap:11px;text-decoration:none;flex:none">
|
||
<span style="width:38px;height:38px;border-radius:3px;background:#0B4F6C;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:19px">B</span>
|
||
<span style="display:flex;flex-direction:column;line-height:1.05">
|
||
<span style="font-weight:700;font-size:18px;letter-spacing:.02em;color:#1A1D21">BERGER</span>
|
||
<span style="font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#5A6169">Haustechnik</span>
|
||
</span>
|
||
</a>
|
||
<nav style="display:flex;gap:clamp(10px,1.6vw,24px);flex-wrap:wrap;flex:1 1 auto">
|
||
<a href="SHK-Waermepumpe.dc.html" style="text-decoration:none;color:#1A1D21;font-weight:600;font-size:15px;letter-spacing:.03em">WÄRME</a>
|
||
<a href="#bad" style="text-decoration:none;color:#1A1D21;font-weight:600;font-size:15px;letter-spacing:.03em">BAD</a>
|
||
<a href="#klima" style="text-decoration:none;color:#1A1D21;font-weight:600;font-size:15px;letter-spacing:.03em">KLIMA</a>
|
||
<a href="SHK-Notdienst.dc.html" style="text-decoration:none;color:#1A1D21;font-weight:600;font-size:15px;letter-spacing:.03em">SERVICE</a>
|
||
<a href="#referenzen" style="text-decoration:none;color:#1A1D21;font-weight:600;font-size:15px;letter-spacing:.03em">REFERENZEN</a>
|
||
<a href="SHK-Karriere.dc.html" style="text-decoration:none;color:#1A1D21;font-weight:600;font-size:15px;letter-spacing:.03em">KARRIERE</a>
|
||
<a href="#kontakt" style="text-decoration:none;color:#1A1D21;font-weight:600;font-size:15px;letter-spacing:.03em">KONTAKT</a>
|
||
</nav>
|
||
<div style="display:flex;align-items:center;gap:14px;flex:none">
|
||
<a href="tel:+499411234500" style="text-decoration:none;display:flex;flex-direction:column;line-height:1.1;text-align:right">
|
||
<span style="font-size:12px;color:#5A6169;letter-spacing:.04em">MO–DO 7:30–17:00</span>
|
||
<span style="font-size:19px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">0941 12345-0</span>
|
||
</a>
|
||
<sc-if value="{{ zeigePro }}" hint-placeholder-val="{{ false }}">
|
||
<a href="#termin" style="text-decoration:none;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:10px 16px;border-radius:3px;font-weight:700;font-size:15px">Termin buchen</a>
|
||
</sc-if>
|
||
<button type="button" onClick="{{ oeffneRechner }}" style="background:#C9451C;color:#FFFFFF;border:none;padding:12px 20px;border-radius:3px;font-weight:700;font-size:15px;cursor:pointer" style-hover="background:#A93A17">Angebot anfragen</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
</div>
|
||
|
||
<section data-screen-label="Hero" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px) clamp(48px,5vw,72px)">
|
||
<div style="max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:clamp(28px,4vw,56px);align-items:start">
|
||
<div>
|
||
<p style="margin:0 0 14px;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:600">Meisterbetrieb seit 1994 · Regensburg & 30 km Umkreis</p>
|
||
<h1 style="margin:0 0 16px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.12;font-weight:700;letter-spacing:-0.02em">Ihr Meisterbetrieb für Wärme, Bad und Klima in Regensburg.</h1>
|
||
<p style="margin:0 0 26px;font-size:clamp(1.0625rem,1.4vw,1.25rem);color:#5A6169;max-width:34em">Von der Wärmepumpe bis zur Badsanierung — Planung, Montage und Wartung aus einer Hand. Eigene Monteure, Festpreis vor Auftragsbeginn.</p>
|
||
|
||
<sc-if value="{{ bewertungAn }}" hint-placeholder-val="{{ true }}">
|
||
<div style="display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid #DDE2E7;border-radius:4px;background:#F4F6F8;margin-bottom:26px;max-width:520px;flex-wrap:wrap">
|
||
<span aria-label="4,9 von 5 Sternen" style="font-size:22px;letter-spacing:2px;color:#C9451C;line-height:1">★★★★★</span>
|
||
<div style="line-height:1.35">
|
||
<div style="font-weight:700;font-size:19px;font-variant-numeric:tabular-nums">4,9 von 5</div>
|
||
<div style="font-size:14px;color:#5A6169">aus 187 Google-Bewertungen · Stand 12.08.2026</div>
|
||
</div>
|
||
<a href="#bewertungen" style="margin-left:auto;font-size:14px;font-weight:600;white-space:nowrap">Alle Bewertungen ansehen →</a>
|
||
</div>
|
||
</sc-if>
|
||
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:14px">
|
||
<sc-if value="{{ offen }}" hint-placeholder-val="{{ true }}">
|
||
<a href="tel:+499411234500" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:16px 26px;border-radius:3px;font-weight:700;font-size:18px;display:inline-flex;align-items:center;gap:10px" style-hover="background:#A93A17">
|
||
<span style="font-size:15px">☎</span><span style="font-variant-numeric:tabular-nums">0941 12345-0 anrufen</span>
|
||
</a>
|
||
</sc-if>
|
||
<sc-if value="{{ geschlossen }}" hint-placeholder-val="{{ false }}">
|
||
<a href="#kontakt" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:16px 26px;border-radius:3px;font-weight:700;font-size:18px;display:inline-flex;align-items:center;gap:10px" style-hover="background:#A93A17">Rückruf anfordern</a>
|
||
</sc-if>
|
||
<button type="button" onClick="{{ oeffneRechner }}" style="background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:15px 24px;border-radius:3px;font-weight:700;font-size:18px;cursor:pointer" style-hover="background:#F4F6F8">Heizungsrechner starten →</button>
|
||
</div>
|
||
|
||
<sc-if value="{{ offen }}" hint-placeholder-val="{{ true }}">
|
||
<p style="margin:0 0 26px;font-size:15px;color:#0F6B33;font-weight:600;display:flex;align-items:center;gap:8px">
|
||
<span style="width:9px;height:9px;border-radius:50%;background:#0F6B33"></span>
|
||
Jetzt geöffnet — noch bis {{ schliesstUm }}. Wir melden uns innerhalb von 24 Stunden.
|
||
</p>
|
||
</sc-if>
|
||
<sc-if value="{{ geschlossen }}" hint-placeholder-val="{{ false }}">
|
||
<p style="margin:0 0 26px;font-size:15px;color:#B0111D;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap">
|
||
<span style="width:9px;height:9px;border-radius:50%;background:#B0111D"></span>
|
||
Gerade geschlossen — wieder erreichbar {{ wiederAb }}. Notfall? <a href="tel:+4994112345990" style="color:#B0111D">Notdienst 0941 12345-99</a>
|
||
</p>
|
||
</sc-if>
|
||
|
||
<ul style="list-style:none;margin:0;padding:0;display:flex;gap:clamp(14px,2vw,28px);flex-wrap:wrap">
|
||
<li style="display:flex;gap:8px;align-items:flex-start;font-size:16px;font-weight:600"><span style="color:#0F6B33">✓</span>Seit 1994 in Regensburg</li>
|
||
<li style="display:flex;gap:8px;align-items:flex-start;font-size:16px;font-weight:600"><span style="color:#0F6B33">✓</span>Eigene Monteure, keine Subunternehmer</li>
|
||
<li style="display:flex;gap:8px;align-items:flex-start;font-size:16px;font-weight:600"><span style="color:#0F6B33">✓</span>Festpreis vor Auftragsbeginn</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<div style="aspect-ratio:4/3;border-radius:4px;border:1px solid #DDE2E7;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:14px">
|
||
<span style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:5px 9px;border-radius:2px">Pflichtbild 2 — Team vor Betrieb/Fahrzeug, quer</span>
|
||
</div>
|
||
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:18px 20px;margin:-44px 20px 0 20px;position:relative;box-shadow:0 8px 24px rgba(8,56,77,.10)">
|
||
<p style="margin:0 0 10px;font-style:italic;font-size:17px;line-height:1.45">„Wenn es kompliziert wird, fahre ich selbst raus. Das war 1994 so und ist es heute noch."</p>
|
||
<p style="margin:0;font-size:14px;color:#5A6169"><strong style="color:#1A1D21">Michael Berger</strong> · Geschäftsführer & Installateur- und Heizungsbauermeister</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="waerme" data-screen-label="Leistungs-Einstieg" style="padding:clamp(40px,5vw,72px) clamp(16px,3vw,32px);background:#F4F6F8;border-top:1px solid #DDE2E7;border-bottom:1px solid #DDE2E7">
|
||
<div style="max-width:1200px;margin:0 auto">
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px">
|
||
<a href="SHK-Waermepumpe.dc.html" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden;display:flex;flex-direction:column" style-hover="border-color:#0B4F6C">
|
||
<div style="aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:10px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:4px 7px">Foto — Wärmepumpe Außengerät</span>
|
||
</div>
|
||
<div style="padding:20px">
|
||
<h3 style="margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:.01em">Wärme</h3>
|
||
<p style="margin:0 0 14px;font-size:16px;color:#5A6169">Wärmepumpe, Heizungstausch, Fußbodenheizung, hydraulischer Abgleich, Förderung</p>
|
||
<span style="font-weight:700;color:#0B4F6C;font-size:16px">Ansehen →</span>
|
||
</div>
|
||
</a>
|
||
<a href="#bad" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden;display:flex;flex-direction:column" style-hover="border-color:#0B4F6C">
|
||
<div style="aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:10px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:4px 7px">Foto — fertiges Bad, eigenes Projekt</span>
|
||
</div>
|
||
<div style="padding:20px">
|
||
<h3 style="margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:.01em">Bad</h3>
|
||
<p style="margin:0 0 14px;font-size:16px;color:#5A6169">Komplettbad, barrierefreies Bad mit Pflegekassen-Zuschuss, Gäste-WC, sauberes Wasser</p>
|
||
<span style="font-weight:700;color:#0B4F6C;font-size:16px">Ansehen →</span>
|
||
</div>
|
||
</a>
|
||
<a href="#klima" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden;display:flex;flex-direction:column" style-hover="border-color:#0B4F6C">
|
||
<div style="aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:10px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:4px 7px">Foto — Split-Innengerät montiert</span>
|
||
</div>
|
||
<div style="padding:20px">
|
||
<h3 style="margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:.01em">Klima</h3>
|
||
<p style="margin:0 0 14px;font-size:16px;color:#5A6169">Klimaanlage, Lüftung mit Wärmerückgewinnung, Kühlen mit der vorhandenen Wärmepumpe</p>
|
||
<span style="font-weight:700;color:#0B4F6C;font-size:16px">Ansehen →</span>
|
||
</div>
|
||
</a>
|
||
<a href="SHK-Notdienst.dc.html" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden;display:flex;flex-direction:column" style-hover="border-color:#0B4F6C">
|
||
<div style="aspect-ratio:16/10;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:10px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:4px 7px">Foto — Monteur im Heizraum</span>
|
||
</div>
|
||
<div style="padding:20px">
|
||
<h3 style="margin:0 0 8px;font-size:22px;font-weight:700;letter-spacing:.01em">Service</h3>
|
||
<p style="margin:0 0 14px;font-size:16px;color:#5A6169">Wartungsvertrag, Kundendienst, Notdienst, Rohrreinigung — mit festen Verrechnungssätzen</p>
|
||
<span style="font-weight:700;color:#0B4F6C;font-size:16px">Ansehen →</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<sc-if value="{{ zeigeModule }}" hint-placeholder-val="{{ true }}">
|
||
<section data-screen-label="Rechner-Einstieg" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px);background:#0B4F6C;color:#FFFFFF">
|
||
<div style="max-width:900px;margin:0 auto;text-align:center">
|
||
<h2 style="margin:0 0 14px;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;font-weight:700;letter-spacing:-0.01em">Was kostet das eigentlich?</h2>
|
||
<p style="margin:0 auto 36px;font-size:19px;color:#C6DAE4;max-width:36em">Die häufigste Frage — und die, die fast niemand in dieser Branche beantwortet. Wir schon: In etwa 60 Sekunden zu einer belastbaren Größenordnung. Ohne Registrierung, das Ergebnis sehen Sie auch ohne Kontaktdaten.</p>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;text-align:left">
|
||
<div style="background:#FFFFFF;color:#1A1D21;border-radius:4px;padding:24px">
|
||
<h3 style="margin:0 0 8px;font-size:20px;font-weight:700">Heizungsrechner</h3>
|
||
<p style="margin:0 0 18px;font-size:16px;color:#5A6169">Wärmepumpe, Gas oder Hybrid — inklusive Ampel „passt / passt mit Vorbereitung" und Fördereinschätzung.</p>
|
||
<button type="button" onClick="{{ oeffneRechner }}" style="background:#C9451C;color:#FFFFFF;border:none;padding:13px 22px;border-radius:3px;font-weight:700;font-size:17px;cursor:pointer;width:100%" style-hover="background:#A93A17">Starten — 4 Fragen →</button>
|
||
</div>
|
||
<div style="background:#FFFFFF;color:#1A1D21;border-radius:4px;padding:24px;display:flex;flex-direction:column">
|
||
<h3 style="margin:0 0 8px;font-size:20px;font-weight:700">Badrechner</h3>
|
||
<p style="margin:0 0 18px;font-size:16px;color:#5A6169">Komplettbad, Teilsanierung oder barrierefrei — mit Budgetspanne und realistischer Bauzeit.</p>
|
||
<a href="SHK-Rechner.dc.html" style="margin-top:auto;text-align:center;text-decoration:none;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:12px 22px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#F4F6F8">Starten — 5 Fragen →</a>
|
||
</div>
|
||
<div style="background:#FFFFFF;color:#1A1D21;border-radius:4px;padding:24px;display:flex;flex-direction:column">
|
||
<h3 style="margin:0 0 8px;font-size:20px;font-weight:700">Fördercheck</h3>
|
||
<p style="margin:0 0 18px;font-size:16px;color:#5A6169">Grundförderung, Klimageschwindigkeits- und Einkommensbonus — als Spanne, mit Antragsreihenfolge.</p>
|
||
<a href="SHK-Rechner.dc.html" style="margin-top:auto;text-align:center;text-decoration:none;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:12px 22px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#F4F6F8">Starten — 5 Fragen →</a>
|
||
</div>
|
||
</div>
|
||
<p style="margin:22px 0 0;font-size:15px;color:#9FC0CF">Unverbindliche Orientierung auf Basis Ihrer Angaben · ein belastbares Angebot erstellen wir nach Besichtigung</p>
|
||
</div>
|
||
</section>
|
||
</sc-if>
|
||
|
||
<section id="bewertungen" data-screen-label="Kundenstimmen" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px)">
|
||
<div style="max-width:1200px;margin:0 auto">
|
||
<h2 style="margin:0 0 10px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Was Kundinnen und Kunden nach dem Auftrag sagen</h2>
|
||
<p style="margin:0 0 34px;font-size:18px;color:#5A6169;max-width:46em">Wir fragen nach Zahlen, nicht nach Lob. Was hier steht, ist nachrechenbar.</p>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px">
|
||
<figure style="margin:0;background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:14px">
|
||
<span style="color:#C9451C;letter-spacing:2px;font-size:16px">★★★★★</span>
|
||
<blockquote style="margin:0;font-size:17px;line-height:1.5">„Nach dem Heizungstausch sind unsere Heizkosten von <strong>2.410 € auf 890 € im Jahr</strong> gefallen. Den Förderantrag hat Berger komplett vorbereitet — wir mussten nur unterschreiben."</blockquote>
|
||
<figcaption style="margin-top:auto;font-size:14px;color:#5A6169">Martina K., Burgweinting · Luft-Wasser-Wärmepumpe 11 kW · März 2026</figcaption>
|
||
</figure>
|
||
<figure style="margin:0;background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:14px">
|
||
<span style="color:#C9451C;letter-spacing:2px;font-size:16px">★★★★★</span>
|
||
<blockquote style="margin:0;font-size:17px;line-height:1.5">„Zugesagt waren 12 Arbeitstage, fertig waren sie in <strong>11</strong>. Jeden Abend war die Baustelle besenrein — mit zwei Kindern im Haus war genau das der Punkt."</blockquote>
|
||
<figcaption style="margin-top:auto;font-size:14px;color:#5A6169">Andreas F., Kumpfmühl · Komplettbad 8 m² · Januar 2026</figcaption>
|
||
</figure>
|
||
<figure style="margin:0;background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:24px;display:flex;flex-direction:column;gap:14px">
|
||
<span style="color:#C9451C;letter-spacing:2px;font-size:16px">★★★★★</span>
|
||
<blockquote style="margin:0;font-size:17px;line-height:1.5">„Samstag 8:15 Uhr Rohrbruch gemeldet, um <strong>9:40 Uhr</strong> stand der Monteur vor der Tür. Anfahrt und Wochenendzuschlag wurden vorher am Telefon genannt."</blockquote>
|
||
<figcaption style="margin-top:auto;font-size:14px;color:#5A6169">Familie Wieland, Lappersdorf · Notdienst · Juli 2026</figcaption>
|
||
</figure>
|
||
</div>
|
||
<p style="margin:20px 0 0;font-size:14px;color:#5A6169;max-width:60em">Wir veröffentlichen ausschließlich Bewertungen von Kunden, für die uns ein abgeschlossener Auftrag vorliegt; die Freigabe liegt jeweils schriftlich vor. Die Gesamtnote 4,9 stammt aus unserem <a href="#bewertungen">Google-Unternehmensprofil</a> und wird dort ungefiltert angezeigt.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<sc-if value="{{ zeigeModule }}" hint-placeholder-val="{{ true }}">
|
||
<section id="referenzen" data-screen-label="Vorher-Nachher" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px);background:#F4F6F8;border-top:1px solid #DDE2E7;border-bottom:1px solid #DDE2E7">
|
||
<div style="max-width:1000px;margin:0 auto">
|
||
<h2 style="margin:0 0 10px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Vorher / Nachher</h2>
|
||
<p style="margin:0 0 28px;font-size:18px;color:#5A6169">Ziehen Sie den Regler — oder bedienen Sie ihn mit den Pfeiltasten.</p>
|
||
<div style="position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;border:1px solid #DDE2E7;background:#FFFFFF">
|
||
<div style="position:absolute;inset:0;background:repeating-linear-gradient(135deg,#E9EFF3 0 10px,#DFE7ED 10px 20px);display:flex;align-items:flex-end;justify-content:flex-end;padding:16px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:5px 9px">Nachher — identischer Bildausschnitt</span>
|
||
</div>
|
||
<div style="position:absolute;inset:0;background:repeating-linear-gradient(135deg,#D8D3CC 0 10px,#CFC9C1 10px 20px);display:flex;align-items:flex-end;padding:16px;clip-path:inset(0 {{ sliderInv }} 0 0)">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#4A453E;background:rgba(255,255,255,.9);padding:5px 9px">Vorher — Pflichtbild 5, gleiche Position</span>
|
||
</div>
|
||
<div style="position:absolute;top:0;bottom:0;width:3px;background:#FFFFFF;left:{{ sliderPos }};transform:translateX(-1.5px);box-shadow:0 0 0 1px rgba(8,56,77,.25);pointer-events:none"></div>
|
||
<div style="position:absolute;top:50%;left:{{ sliderPos }};transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#FFFFFF;border:2px solid #0B4F6C;color:#0B4F6C;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;pointer-events:none;box-shadow:0 4px 12px rgba(8,56,77,.25)">↔</div>
|
||
<div style="position:absolute;top:16px;left:16px;background:#1A1D21;color:#FFFFFF;font-size:12px;font-weight:700;letter-spacing:.1em;padding:5px 10px;border-radius:2px">VORHER</div>
|
||
<div style="position:absolute;top:16px;right:16px;background:#0B4F6C;color:#FFFFFF;font-size:12px;font-weight:700;letter-spacing:.1em;padding:5px 10px;border-radius:2px">NACHHER</div>
|
||
<input type="range" min="0" max="100" step="1" value="{{ sliderWert }}" onChange="{{ aufSlider }}" onInput="{{ aufSlider }}" aria-label="Vergleich zwischen Vorher- und Nachher-Bild verschieben" style="position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0" />
|
||
</div>
|
||
<div style="display:flex;justify-content:space-between;gap:20px;align-items:baseline;margin-top:16px;flex-wrap:wrap">
|
||
<p style="margin:0;font-size:17px"><strong>Bad in Regensburg-Kumpfmühl</strong> · 8 m² · Komplettsanierung in 11 Arbeitstagen · barrierefreie Dusche</p>
|
||
<a href="#referenzen" style="font-weight:700;white-space:nowrap">Projekt ansehen →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</sc-if>
|
||
|
||
<sc-if value="{{ zeigeModule }}" hint-placeholder-val="{{ true }}">
|
||
<section id="foerderung" data-screen-label="Förderung" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px)">
|
||
<div style="max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,4vw,56px)">
|
||
<div>
|
||
<h2 style="margin:0 0 16px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Bis zu 70 % Förderung für Ihre neue Heizung</h2>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:#DDE2E7;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden;margin-bottom:24px">
|
||
<div style="background:#FFFFFF;padding:16px"><div style="font-size:26px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">30 %</div><div style="font-size:14px;color:#5A6169">Grundförderung</div></div>
|
||
<div style="background:#FFFFFF;padding:16px"><div style="font-size:26px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">16 %</div><div style="font-size:14px;color:#5A6169">Klimageschwindigkeitsbonus</div></div>
|
||
<div style="background:#FFFFFF;padding:16px"><div style="font-size:26px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">bis 40 %</div><div style="font-size:14px;color:#5A6169">Einkommensbonus</div></div>
|
||
<div style="background:#FFFFFF;padding:16px"><div style="font-size:26px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">28.000 €</div><div style="font-size:14px;color:#5A6169">max. förderfähige Kosten (1. WE)</div></div>
|
||
</div>
|
||
<div style="border-left:4px solid #C1121F;background:#FBF0F0;padding:16px 18px;border-radius:0 3px 3px 0;margin-bottom:22px">
|
||
<p style="margin:0 0 6px;font-weight:700">Der Antrag muss vor der Auftragsvergabe gestellt werden.</p>
|
||
<p style="margin:0;font-size:16px;color:#5A6169">Wer zuerst beauftragt, verliert den Anspruch. Wir sagen Ihnen, in welcher Reihenfolge Sie vorgehen — und stellen das Angebot unter Fördervorbehalt.</p>
|
||
</div>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap">
|
||
<a href="SHK-Rechner.dc.html" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:14px 24px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#A93A17">Fördercheck starten →</a>
|
||
<a href="SHK-Foerderung.dc.html" style="text-decoration:none;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:13px 22px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#F4F6F8">Alle Programme ansehen →</a>
|
||
</div>
|
||
</div>
|
||
<div style="background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:24px">
|
||
<h3 style="margin:0 0 14px;font-size:19px;font-weight:700">Was sich 2026 geändert hat</h3>
|
||
<ul style="margin:0 0 18px;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:16px">
|
||
<li>Seit dem <strong>10.07.2026</strong> gilt das Gebäudemodernisierungsgesetz — die 65-%-Erneuerbare-Pflicht für neue Heizungen ist gestrichen.</li>
|
||
<li>Die KfW-Heizungsförderung wurde zum <strong>21.07.2026</strong> neu justiert: Effizienzbonus und Emissionsminderungszuschlag entfallen.</li>
|
||
<li>Ab <strong>01.02.2027</strong> sinkt der Klimageschwindigkeitsbonus alle sechs Monate um 4 Prozentpunkte, die förderfähigen Kosten um 750 €.</li>
|
||
</ul>
|
||
<p style="margin:0;font-size:14px;color:#5A6169;border-top:1px solid #DDE2E7;padding-top:14px">Stand: 21.07.2026 · zuletzt geprüft am 12.08.2026. Angaben ohne Gewähr und ohne Rechts-, Steuer- oder Finanzberatung. Die Förderentscheidung trifft ausschließlich die KfW; ein Rechtsanspruch besteht nicht. Verbindlich sind allein die jeweils gültigen Programmunterlagen.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</sc-if>
|
||
|
||
<section id="service" data-screen-label="Warum wir" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px);background:#F4F6F8;border-top:1px solid #DDE2E7;border-bottom:1px solid #DDE2E7">
|
||
<div style="max-width:1200px;margin:0 auto">
|
||
<h2 style="margin:0 0 10px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Warum Berger</h2>
|
||
<p style="margin:0 0 34px;font-size:18px;color:#5A6169;max-width:46em">Fünf Aussagen, die Sie nachprüfen können. „Qualität, Zuverlässigkeit, Erfahrung" steht auf jeder Seite dieser Branche und sagt nichts.</p>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:#DDE2E7;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden">
|
||
<div style="background:#FFFFFF;padding:24px"><p style="margin:0 0 8px;font-size:18px;font-weight:700">Rückmeldung innerhalb von 24 Stunden</p><p style="margin:0;font-size:16px;color:#5A6169">Werktags meist am selben Tag. Über alle Anfragen 2025 gemessen: im Schnitt 6,4 Stunden.</p></div>
|
||
<div style="background:#FFFFFF;padding:24px"><p style="margin:0 0 8px;font-size:18px;font-weight:700">Eigene Monteure, keine Subunternehmer</p><p style="margin:0;font-size:16px;color:#5A6169">14 Festangestellte. Von der Planung bis zur Abnahme derselbe Ansprechpartner.</p></div>
|
||
<div style="background:#FFFFFF;padding:24px"><p style="margin:0 0 8px;font-size:18px;font-weight:700">Festpreis vor Auftragsbeginn</p><p style="margin:0;font-size:16px;color:#5A6169">Nachträge nur, wenn Sie ihnen vorher schriftlich zustimmen.</p></div>
|
||
<div style="background:#FFFFFF;padding:24px"><p style="margin:0 0 8px;font-size:18px;font-weight:700">Seit 1994 in Regensburg</p><p style="margin:0;font-size:16px;color:#5A6169">Über 2.300 abgeschlossene Projekte in Stadt und Landkreis.</p></div>
|
||
<div style="background:#FFFFFF;padding:24px"><p style="margin:0 0 8px;font-size:18px;font-weight:700">Im Stadtgebiet in der Regel in 90 Minuten vor Ort</p><p style="margin:0;font-size:16px;color:#5A6169">Notdienst werktags 17–20 Uhr, samstags und sonntags 8–20 Uhr. Außerhalb nehmen wir Ihre Nachricht auf.</p></div>
|
||
<div style="background:#FFFFFF;padding:24px"><p style="margin:0 0 8px;font-size:18px;font-weight:700">Aktuelle Vorlaufzeit: rund 7 Wochen</p><p style="margin:0;font-size:16px;color:#5A6169">Für Störungen und Notfälle sind wir kurzfristig da. Wir sagen Ihnen den realen Termin, nicht den schönen.</p></div>
|
||
</div>
|
||
|
||
<h3 style="margin:36px 0 16px;font-size:20px;font-weight:700">Unsere Nachweise — und was sie bedeuten</h3>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px">
|
||
<div style="display:flex;gap:14px;align-items:flex-start;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:18px">
|
||
<div style="width:56px;height:56px;flex:none;border:1px solid #DDE2E7;background:repeating-linear-gradient(135deg,#EDF1F4 0 6px,#E4EAEF 6px 12px)"></div>
|
||
<div><p style="margin:0 0 4px;font-weight:700;font-size:16px">Installateur- und Heizungsbauermeister</p><p style="margin:0;font-size:15px;color:#5A6169">Eingetragen in die Handwerksrolle der HWK Niederbayern-Oberpfalz, Anlage A Nr. 24. Ohne diesen Eintrag darf niemand in Deutschland Heizungen einbauen.</p></div>
|
||
</div>
|
||
<div style="display:flex;gap:14px;align-items:flex-start;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:18px">
|
||
<div style="width:56px;height:56px;flex:none;border:1px solid #DDE2E7;background:repeating-linear-gradient(135deg,#EDF1F4 0 6px,#E4EAEF 6px 12px)"></div>
|
||
<div><p style="margin:0 0 4px;font-weight:700;font-size:16px">Fachbetrieb nach § 6 ChemKlimaschutzV</p><p style="margin:0;font-size:15px;color:#5A6169">Gesetzlich vorgeschrieben für Arbeiten am Kältekreislauf einer Klimaanlage oder Wärmepumpe. Zertifikat-Nr. DE-2024-8841, gültig bis 03/2029.</p></div>
|
||
</div>
|
||
<div style="display:flex;gap:14px;align-items:flex-start;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:18px">
|
||
<div style="width:56px;height:56px;flex:none;border:1px solid #DDE2E7;background:repeating-linear-gradient(135deg,#EDF1F4 0 6px,#E4EAEF 6px 12px)"></div>
|
||
<div><p style="margin:0 0 4px;font-weight:700;font-size:16px">Mitglied der SHK-Innung Regensburg</p><p style="margin:0;font-size:15px;color:#5A6169">Verpflichtet uns auf die Schlichtungsordnung des Fachverbands — bei Streit haben Sie eine neutrale Anlaufstelle, die nichts kostet.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="bad" data-screen-label="Team" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px)">
|
||
<div style="max-width:1200px;margin:0 auto">
|
||
<h2 style="margin:0 0 10px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Die Menschen, die zu Ihnen kommen</h2>
|
||
<p style="margin:0 0 32px;font-size:18px;color:#5A6169;max-width:46em">Vierzehn Kolleginnen und Kollegen. Drei davon sprechen Sie am häufigsten.</p>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px">
|
||
<div>
|
||
<div style="aspect-ratio:1/1;border:1px solid #DDE2E7;border-radius:4px;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:10px;margin-bottom:14px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:4px 7px">Porträt 1 — Inhaber</span>
|
||
</div>
|
||
<p style="margin:0 0 2px;font-weight:700;font-size:18px">Michael Berger</p>
|
||
<p style="margin:0 0 8px;font-size:15px;color:#5A6169">Geschäftsführer & Installateurmeister</p>
|
||
<p style="margin:0 0 8px;font-size:16px;font-style:italic">„Seit 1994 im Betrieb. Wenn es kompliziert wird, fahre ich selbst raus."</p>
|
||
<a href="tel:+499411234512" style="font-size:15px;font-variant-numeric:tabular-nums">Durchwahl -12</a>
|
||
</div>
|
||
<div>
|
||
<div style="aspect-ratio:1/1;border:1px solid #DDE2E7;border-radius:4px;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:10px;margin-bottom:14px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:4px 7px">Porträt 2 — Kundendienst</span>
|
||
</div>
|
||
<p style="margin:0 0 2px;font-weight:700;font-size:18px">Sabine Ostermeier</p>
|
||
<p style="margin:0 0 8px;font-size:15px;color:#5A6169">Kundendienst & Terminplanung</p>
|
||
<p style="margin:0 0 8px;font-size:16px;font-style:italic">„Ich sage Ihnen einen realistischen Termin — auch wenn er Ihnen nicht gefällt."</p>
|
||
<a href="tel:+499411234515" style="font-size:15px;font-variant-numeric:tabular-nums">Durchwahl -15</a>
|
||
</div>
|
||
<div>
|
||
<div style="aspect-ratio:1/1;border:1px solid #DDE2E7;border-radius:4px;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:10px;margin-bottom:14px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:4px 7px">Porträt 3 — Projektleitung Bad</span>
|
||
</div>
|
||
<p style="margin:0 0 2px;font-weight:700;font-size:18px">Tobias Reinhardt</p>
|
||
<p style="margin:0 0 8px;font-size:15px;color:#5A6169">Projektleiter Bad</p>
|
||
<p style="margin:0 0 8px;font-size:16px;font-style:italic">„Wir planen Ihr Bad einmal richtig — und dann wird nicht mehr umgeplant."</p>
|
||
<a href="tel:+499411234521" style="font-size:15px;font-variant-numeric:tabular-nums">Durchwahl -21</a>
|
||
</div>
|
||
<div style="background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:24px;display:flex;flex-direction:column;justify-content:center">
|
||
<p style="margin:0 0 10px;font-size:18px;font-weight:700">Einzugsgebiet</p>
|
||
<p style="margin:0 0 12px;font-size:16px;color:#5A6169">Regensburg · Neutraubling · Lappersdorf · Pentling · Barbing · Obertraubling · Sinzing · Zeitlarn</p>
|
||
<p style="margin:0 0 12px;font-size:16px">Anfahrt bis 30 km ab Regensburg. Nicht dabei? <a href="#kontakt">Fragen Sie trotzdem an →</a></p>
|
||
<p style="margin:0;font-size:15px;color:#5A6169">Für Regensburg, Neutraubling und Lappersdorf gibt es eigene Seiten mit Referenzen und Ansprechpartner vor Ort.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<sc-if value="{{ zeigeModule }}" hint-placeholder-val="{{ true }}">
|
||
<section id="karriere" data-screen-label="Karriere-Teaser" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px);background:#F4F6F8;border-top:1px solid #DDE2E7;border-bottom:1px solid #DDE2E7">
|
||
<div style="max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,48px);align-items:start">
|
||
<div>
|
||
<h2 style="margin:0 0 14px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Wir suchen drei Kolleginnen und Kollegen.</h2>
|
||
<p style="margin:0 0 20px;font-size:18px;color:#5A6169">Anlagenmechaniker SHK (m/w/d) · Kundendienstmonteur (m/w/d) · Auszubildende zum 01.08.2027</p>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap">
|
||
<a href="SHK-Karriere.dc.html" style="text-decoration:none;background:#0B4F6C;color:#FFFFFF;padding:14px 24px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#08384D">Offene Stellen →</a>
|
||
<a href="SHK-Karriere.dc.html" style="text-decoration:none;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:13px 22px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#EDF1F4">Ausbildung bei uns →</a>
|
||
</div>
|
||
</div>
|
||
<ul style="list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px">
|
||
<li style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:16px;font-size:16px"><strong>30 Tage Urlaub</strong>, Arbeitszeitkonto, freitags um 14:00 Schluss</li>
|
||
<li style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:16px;font-size:16px"><strong>Kein Wochenenddienst</strong> außer im Notdienst-Turnus, alle 6 Wochen, mit Zuschlag</li>
|
||
<li style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:16px;font-size:16px"><strong>Meisterkurs bezahlt</strong> und in der Arbeitszeit — bisher 4 Meister aus dem eigenen Betrieb</li>
|
||
<li style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:16px;font-size:16px"><strong>Eigenes Fahrzeug</strong>, Werkzeug vom Fachhandel, Tablet mit Auftragsapp</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
</sc-if>
|
||
|
||
<section id="kontakt" data-screen-label="Kontakt" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px)">
|
||
<div style="max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,4vw,56px);align-items:start">
|
||
<div>
|
||
<h2 style="margin:0 0 20px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">So erreichen Sie uns</h2>
|
||
<a href="tel:+499411234500" style="text-decoration:none;display:block;font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:10px">0941 12345-0</a>
|
||
<sc-if value="{{ offen }}" hint-placeholder-val="{{ true }}">
|
||
<p style="margin:0 0 22px;font-size:17px;font-weight:600;color:#0F6B33;display:flex;align-items:center;gap:9px">
|
||
<span style="width:10px;height:10px;border-radius:50%;background:#0F6B33"></span>Jetzt geöffnet · noch bis {{ schliesstUm }}
|
||
</p>
|
||
</sc-if>
|
||
<sc-if value="{{ geschlossen }}" hint-placeholder-val="{{ false }}">
|
||
<div style="margin:0 0 22px;border-left:4px solid #C1121F;background:#FBF0F0;padding:14px 16px;border-radius:0 3px 3px 0">
|
||
<p style="margin:0 0 8px;font-size:17px;font-weight:600;color:#B0111D;display:flex;align-items:center;gap:9px">
|
||
<span style="width:10px;height:10px;border-radius:50%;background:#B0111D"></span>Gerade geschlossen · wieder erreichbar {{ wiederAb }}
|
||
</p>
|
||
<p style="margin:0;font-size:16px">Notfall? <a href="tel:+4994112345990" style="font-weight:700">Notdienst 0941 12345-99</a> — kein Notfall? Rückruf für morgen früh anfordern.</p>
|
||
</div>
|
||
</sc-if>
|
||
<div style="display:flex;flex-direction:column;gap:10px;font-size:17px;margin-bottom:24px">
|
||
<a href="https://wa.me/4917612345678?text=Hallo%2C%20ich%20habe%20eine%20Frage%20zu" style="font-weight:600">WhatsApp — Foto vom Heizungsdisplay genügt oft</a>
|
||
<a href="mailto:info@berger-haustechnik.de">info@berger-haustechnik.de</a>
|
||
<span>Prüfeninger Straße 42, 93049 Regensburg · <a href="#kontakt">Route planen →</a></span>
|
||
</div>
|
||
<table style="border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums">
|
||
<tbody>
|
||
<tr><td style="padding:3px 24px 3px 0;color:#5A6169">Mo–Do</td><td style="padding:3px 0">7:30–17:00 Uhr</td></tr>
|
||
<tr><td style="padding:3px 24px 3px 0;color:#5A6169">Fr</td><td style="padding:3px 0">7:30–14:00 Uhr</td></tr>
|
||
<tr><td style="padding:3px 24px 3px 0;color:#5A6169">Notdienst</td><td style="padding:3px 0">werktags 17–20 Uhr, Sa/So 8–20 Uhr</td></tr>
|
||
</tbody>
|
||
</table>
|
||
<div style="margin-top:20px;aspect-ratio:16/7;border:1px solid #DDE2E7;border-radius:4px;background:repeating-linear-gradient(135deg,#EDF1F4 0 10px,#E4EAEF 10px 20px);display:flex;align-items:flex-end;padding:12px">
|
||
<span style="font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:4px 7px">Statisches Kartenbild, lokal gehostet — keine eingebettete Google Map</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:clamp(20px,3vw,32px)">
|
||
<sc-if value="{{ formOffen }}" hint-placeholder-val="{{ true }}">
|
||
<form onSubmit="{{ sendeForm }}">
|
||
<h3 style="margin:0 0 6px;font-size:22px;font-weight:700">Rückruf anfordern</h3>
|
||
<p style="margin:0 0 22px;font-size:16px;color:#5A6169">Wir melden uns innerhalb von 24 Stunden — werktags meistens noch am selben Tag.</p>
|
||
<div style="display:flex;flex-direction:column;gap:16px">
|
||
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Ihr Name
|
||
<input type="text" name="name" required="required" autoComplete="name" style="padding:12px 14px;border:1px solid #B9C2CA;border-radius:3px;background:#FFFFFF;font-size:17px;font-weight:400" />
|
||
</label>
|
||
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Telefonnummer
|
||
<input type="tel" name="telefon" required="required" autoComplete="tel" style="padding:12px 14px;border:1px solid #B9C2CA;border-radius:3px;background:#FFFFFF;font-size:17px;font-weight:400;font-variant-numeric:tabular-nums" />
|
||
</label>
|
||
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Wann sind Sie erreichbar?
|
||
<select name="erreichbarkeit" required="required" style="padding:12px 14px;border:1px solid #B9C2CA;border-radius:3px;background:#FFFFFF;font-size:17px;font-weight:400">
|
||
<option value="">Bitte wählen</option>
|
||
<option value="vormittags">Vormittags, 8–12 Uhr</option>
|
||
<option value="mittags">Mittags, 12–14 Uhr</option>
|
||
<option value="nachmittags">Nachmittags, 14–17 Uhr</option>
|
||
<option value="abends">Abends nach 17 Uhr</option>
|
||
<option value="egal">Jederzeit</option>
|
||
</select>
|
||
</label>
|
||
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Worum geht es?
|
||
<select name="thema" required="required" style="padding:12px 14px;border:1px solid #B9C2CA;border-radius:3px;background:#FFFFFF;font-size:17px;font-weight:400">
|
||
<option value="">Bitte wählen</option>
|
||
<option value="heizung">Neue Heizung / Wärmepumpe</option>
|
||
<option value="bad">Badsanierung</option>
|
||
<option value="klima">Klimaanlage / Lüftung</option>
|
||
<option value="wartung">Wartung oder Wartungsvertrag</option>
|
||
<option value="stoerung">Störung (kein Notfall)</option>
|
||
<option value="bewerbung">Bewerbung</option>
|
||
<option value="sonstiges">Etwas anderes</option>
|
||
</select>
|
||
</label>
|
||
<button type="submit" style="background:#C9451C;color:#FFFFFF;border:none;padding:15px 24px;border-radius:3px;font-weight:700;font-size:18px;cursor:pointer" style-hover="background:#A93A17">Rückruf anfordern</button>
|
||
<p style="margin:0;font-size:14px;color:#5A6169">Ihre Angaben nutzen wir ausschließlich zur Bearbeitung dieser Anfrage. Kein Newsletter, keine Weitergabe. Mehr in der <a href="#datenschutz">Datenschutzerklärung</a>.</p>
|
||
</div>
|
||
</form>
|
||
</sc-if>
|
||
<sc-if value="{{ formGesendet }}" hint-placeholder-val="{{ false }}">
|
||
<div style="padding:20px 0">
|
||
<p style="margin:0 0 12px;font-size:22px;font-weight:700;color:#0F6B33">Danke — Ihre Anfrage ist da.</p>
|
||
<p style="margin:0 0 12px;font-size:17px">Wir rufen Sie in Ihrem gewählten Zeitfenster zurück, spätestens innerhalb von 24 Stunden. Eine Bestätigung mit denselben Angaben ist per E-Mail unterwegs.</p>
|
||
<p style="margin:0;font-size:17px">Wird es doch dringend: Notdienst <a href="tel:+4994112345990" style="font-weight:700">0941 12345-99</a>.</p>
|
||
</div>
|
||
</sc-if>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<sc-if value="{{ zeigePro }}" hint-placeholder-val="{{ true }}">
|
||
<section id="termin" data-screen-label="Online-Terminbuchung" style="padding:clamp(48px,6vw,88px) clamp(16px,3vw,32px);background:#F4F6F8;border-top:1px solid #DDE2E7">
|
||
<div style="max-width:860px;margin:0 auto">
|
||
<p style="margin:0 0 10px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:600">Ausbaustufe PRO</p>
|
||
<h2 style="margin:0 0 10px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Beratungstermin direkt buchen</h2>
|
||
<p style="margin:0 0 28px;font-size:18px;color:#5A6169;max-width:44em">30 Minuten, telefonisch oder bei Ihnen vor Ort. Kein Formular, keine Rückrufschleife — Sie sehen die echten freien Zeiten aus unserem Kalender.</p>
|
||
<sc-if value="{{ slotOffen }}" hint-placeholder-val="{{ true }}">
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px">
|
||
<sc-for list="{{ slots }}" as="slot" hint-placeholder-count="8">
|
||
<button type="button" onClick="{{ slot.waehlen }}" style="background:#FFFFFF;border:1.5px solid #DDE2E7;border-radius:4px;padding:14px;cursor:pointer;text-align:left" style-hover="border-color:#0B4F6C;background:#EDF1F4">
|
||
<span style="display:block;font-size:14px;color:#5A6169">{{ slot.tag }}</span>
|
||
<span style="display:block;font-size:20px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">{{ slot.zeit }}</span>
|
||
</button>
|
||
</sc-for>
|
||
</div>
|
||
</sc-if>
|
||
<sc-if value="{{ slotGewaehlt }}" hint-placeholder-val="{{ false }}">
|
||
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:24px">
|
||
<p style="margin:0 0 6px;font-size:15px;color:#5A6169">Ihr Wunschtermin</p>
|
||
<p style="margin:0 0 18px;font-size:24px;font-weight:700;color:#0B4F6C">{{ slotLabel }}</p>
|
||
<p style="margin:0 0 18px;font-size:17px">Wir bestätigen den Termin innerhalb von 24 Stunden per SMS und E-Mail. Der Termin ist kostenlos und unverbindlich; bis 24 Stunden vorher können Sie ihn selbst verschieben.</p>
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:center">
|
||
<a href="#kontakt" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:14px 24px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#A93A17">Kontaktdaten eingeben →</a>
|
||
<button type="button" onClick="{{ slotZuruecksetzen }}" style="background:none;border:none;color:#0B4F6C;font-size:16px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px">Anderen Termin wählen</button>
|
||
</div>
|
||
</div>
|
||
</sc-if>
|
||
<p style="margin:20px 0 0;font-size:15px;color:#5A6169">Störungen und Notfälle sind bewusst nicht buchbar — die laufen über <a href="SHK-Notdienst.dc.html">Telefon und Notdienst</a>, weil dort Minuten zählen.</p>
|
||
</div>
|
||
</section>
|
||
</sc-if>
|
||
|
||
<footer id="notdienst-footer" data-screen-label="Footer" style="background:#08384D;color:#D6E4EB;padding:clamp(40px,5vw,64px) clamp(16px,3vw,32px) 28px">
|
||
<div style="max-width:1200px;margin:0 auto">
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.16)">
|
||
<div>
|
||
<p style="margin:0 0 12px;font-weight:700;font-size:18px;letter-spacing:.02em;color:#FFFFFF">BERGER Haustechnik GmbH</p>
|
||
<p style="margin:0 0 12px;font-size:16px;line-height:1.5">Prüfeninger Straße 42<br />93049 Regensburg</p>
|
||
<p style="margin:0 0 12px;font-size:16px;font-variant-numeric:tabular-nums"><a href="tel:+499411234500" style="color:#FFFFFF;font-weight:700">0941 12345-0</a><br /><a href="mailto:info@berger-haustechnik.de" style="color:#D6E4EB">info@berger-haustechnik.de</a></p>
|
||
<p style="margin:0;font-size:15px;color:#9FC0CF">Meisterbetrieb der Handwerkskammer Niederbayern-Oberpfalz</p>
|
||
</div>
|
||
<div>
|
||
<p style="margin:0 0 12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#9FC0CF">Leistungen</p>
|
||
<ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:16px">
|
||
<li><a href="SHK-Waermepumpe.dc.html" style="color:#D6E4EB;text-decoration:none">Wärmepumpe</a></li>
|
||
<li><a href="SHK-Waermepumpe.dc.html" style="color:#D6E4EB;text-decoration:none">Heizungstausch</a></li>
|
||
<li><a href="#bad" style="color:#D6E4EB;text-decoration:none">Badsanierung</a></li>
|
||
<li><a href="#bad" style="color:#D6E4EB;text-decoration:none">Barrierefreies Bad</a></li>
|
||
<li><a href="#klima" style="color:#D6E4EB;text-decoration:none">Klimaanlage</a></li>
|
||
<li><a href="SHK-Notdienst.dc.html" style="color:#D6E4EB;text-decoration:none">Wartung & Notdienst</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p style="margin:0 0 12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#9FC0CF">Unternehmen</p>
|
||
<ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:16px">
|
||
<li><a href="#service" style="color:#D6E4EB;text-decoration:none">Über uns</a></li>
|
||
<li><a href="#bad" style="color:#D6E4EB;text-decoration:none">Team</a></li>
|
||
<li><a href="#referenzen" style="color:#D6E4EB;text-decoration:none">Referenzen</a></li>
|
||
<li><a href="SHK-Foerderung.dc.html" style="color:#D6E4EB;text-decoration:none">Förderung</a></li>
|
||
<li><a href="SHK-Karriere.dc.html" style="color:#D6E4EB;text-decoration:none">Karriere</a></li>
|
||
<li><a href="#kontakt" style="color:#D6E4EB;text-decoration:none">Kontakt</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<p style="margin:0 0 12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#9FC0CF">Rechtliches</p>
|
||
<ul style="list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:16px">
|
||
<li><a href="#impressum" style="color:#D6E4EB;text-decoration:none">Impressum</a></li>
|
||
<li><a href="#datenschutz" style="color:#D6E4EB;text-decoration:none">Datenschutz</a></li>
|
||
<li><a href="#agb" style="color:#D6E4EB;text-decoration:none">AGB</a></li>
|
||
<li><a href="#widerruf" style="color:#D6E4EB;text-decoration:none">Widerrufsrecht</a></li>
|
||
<li><a href="#barrierefreiheit" style="color:#D6E4EB;text-decoration:none">Barrierefreiheit</a></li>
|
||
<li><a href="#cookies" style="color:#D6E4EB;text-decoration:none">Cookie-Einstellungen</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<p style="margin:24px 0 0;font-size:15px;color:#9FC0CF">© 2026 BERGER Haustechnik GmbH · Eingetragen in die Handwerksrolle der HWK Niederbayern-Oberpfalz · Fachbetrieb nach § 6 ChemKlimaschutzV</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<sc-if value="{{ rechnerOffen }}" hint-placeholder-val="{{ false }}">
|
||
<div style="position:fixed;inset:0;z-index:100;background:rgba(8,56,77,.78);display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,32px)">
|
||
<div style="background:#FFFFFF;border-radius:5px;width:100%;max-width:760px;max-height:92vh;overflow:auto;box-shadow:0 24px 64px rgba(0,0,0,.35)">
|
||
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(20px,4vw,36px);border-bottom:1px solid #DDE2E7">
|
||
<div>
|
||
<p style="margin:0;font-size:20px;font-weight:700">Heizungsrechner</p>
|
||
<p style="margin:0;font-size:15px;color:#5A6169">Dauert etwa 60 Sekunden · ohne Registrierung</p>
|
||
</div>
|
||
<button type="button" onClick="{{ schliesseRechner }}" aria-label="Rechner schließen" style="background:none;border:1px solid #DDE2E7;border-radius:3px;width:40px;height:40px;font-size:20px;cursor:pointer;color:#5A6169;flex:none" style-hover="background:#F4F6F8">✕</button>
|
||
</div>
|
||
<div style="height:4px;background:#EDF1F4">
|
||
<div style="height:4px;background:#C9451C;width:{{ fortschrittPct }};transition:width .25s ease"></div>
|
||
</div>
|
||
|
||
<sc-if value="{{ zeigeFrage }}" hint-placeholder-val="{{ true }}">
|
||
<div style="padding:clamp(24px,4vw,36px)">
|
||
<p style="margin:0 0 8px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:600">{{ frageNr }}</p>
|
||
<h3 style="margin:0 0 6px;font-size:clamp(1.375rem,2.6vw,1.75rem);font-weight:700;letter-spacing:-0.01em">{{ frageTitel }}</h3>
|
||
<p style="margin:0 0 24px;font-size:16px;color:#5A6169">{{ frageHinweis }}</p>
|
||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px">
|
||
<sc-for list="{{ frageOptionen }}" as="opt" hint-placeholder-count="4">
|
||
<button type="button" onClick="{{ opt.waehlen }}" style="text-align:left;background:#FFFFFF;border:1.5px solid #DDE2E7;border-radius:4px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:4px" style-hover="border-color:#0B4F6C;background:#F4F6F8">
|
||
<span style="font-size:18px;font-weight:700;color:#1A1D21">{{ opt.label }}</span>
|
||
<span style="font-size:15px;color:#5A6169">{{ opt.zusatz }}</span>
|
||
</button>
|
||
</sc-for>
|
||
</div>
|
||
<sc-if value="{{ kannZurueck }}" hint-placeholder-val="{{ false }}">
|
||
<button type="button" onClick="{{ zurueck }}" style="margin-top:22px;background:none;border:none;color:#0B4F6C;font-size:16px;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px">← Eine Frage zurück</button>
|
||
</sc-if>
|
||
</div>
|
||
</sc-if>
|
||
|
||
<sc-if value="{{ zeigeErgebnis }}" hint-placeholder-val="{{ false }}">
|
||
<div style="padding:clamp(24px,4vw,36px)">
|
||
<sc-if value="{{ ampelGruen }}" hint-placeholder-val="{{ true }}">
|
||
<div style="display:flex;gap:12px;align-items:flex-start;background:#EFF7F1;border-left:4px solid #0F6B33;padding:14px 16px;border-radius:0 3px 3px 0;margin-bottom:24px">
|
||
<span style="width:12px;height:12px;border-radius:50%;background:#0F6B33;margin-top:7px;flex:none"></span>
|
||
<div><p style="margin:0 0 4px;font-weight:700;font-size:17px">{{ ampelTitel }}</p><p style="margin:0;font-size:16px;color:#3D4650">{{ ampelText }}</p></div>
|
||
</div>
|
||
</sc-if>
|
||
<sc-if value="{{ ampelGelb }}" hint-placeholder-val="{{ false }}">
|
||
<div style="display:flex;gap:12px;align-items:flex-start;background:#FDF6E8;border-left:4px solid #A9760F;padding:14px 16px;border-radius:0 3px 3px 0;margin-bottom:24px">
|
||
<span style="width:12px;height:12px;border-radius:50%;background:#A9760F;margin-top:7px;flex:none"></span>
|
||
<div><p style="margin:0 0 4px;font-weight:700;font-size:17px">{{ ampelTitel }}</p><p style="margin:0;font-size:16px;color:#3D4650">{{ ampelText }}</p></div>
|
||
</div>
|
||
</sc-if>
|
||
|
||
<p style="margin:0 0 6px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#5A6169;font-weight:600">Luft-Wasser-Wärmepumpe, komplett installiert</p>
|
||
<p style="margin:0 0 4px;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums;line-height:1.1">{{ spanne }}</p>
|
||
<p style="margin:0 0 24px;font-size:16px;color:#5A6169">vor Förderung, brutto inkl. MwSt.</p>
|
||
|
||
<div style="background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:18px;margin-bottom:22px">
|
||
<p style="margin:0 0 6px;font-size:16px;font-weight:700">Ihr Eigenanteil nach Förderung: <span style="color:#0B4F6C;font-variant-numeric:tabular-nums">{{ eigenanteil }}</span></p>
|
||
<p style="margin:0;font-size:15px;color:#5A6169">Gerechnet mit 30 % Grundförderung und 16 % Klimageschwindigkeitsbonus auf höchstens 28.000 € förderfähige Kosten (KfW 458, Stand 21.07.2026). Ein Einkommensbonus kann hinzukommen. Die Förderentscheidung trifft ausschließlich die KfW.</p>
|
||
</div>
|
||
|
||
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px">
|
||
<a href="#kontakt" onClick="{{ schliesseRechner }}" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:14px 24px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#A93A17">Beratungstermin vereinbaren</a>
|
||
<a href="tel:+499411234500" style="text-decoration:none;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:13px 22px;border-radius:3px;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums" style-hover="background:#F4F6F8">☎ 0941 12345-0</a>
|
||
<button type="button" onClick="{{ neuStarten }}" style="background:none;border:none;color:#0B4F6C;font-size:16px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px">Noch einmal rechnen</button>
|
||
</div>
|
||
|
||
<label style="display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#3D4650;margin-bottom:14px">
|
||
<input type="checkbox" name="ergebnisMail" style="margin-top:5px;width:18px;height:18px;flex:none" />
|
||
<span>Schicken Sie mir das Ergebnis per E-Mail. Ich bin damit einverstanden, dazu einmalig kontaktiert zu werden. (freiwillig, jederzeit widerrufbar)</span>
|
||
</label>
|
||
<p style="margin:0;font-size:14px;color:#5A6169">Unverbindliche Orientierung auf Basis Ihrer Angaben. Ein belastbares Angebot erstellen wir nach Besichtigung und Heizlastberechnung.</p>
|
||
</div>
|
||
</sc-if>
|
||
</div>
|
||
</div>
|
||
</sc-if>
|
||
|
||
</div>
|
||
|
||
</x-dc>
|
||
<script type="text/x-dc" data-dc-script data-props="{"ausbaustufe":{"editor":"enum","options":["BASIS","STANDARD","PRO"],"default":"PRO","tsType":"string","section":"Ausbaustufe"},"oeffnungsStatus":{"editor":"enum","options":["Automatisch","Geöffnet","Geschlossen"],"default":"Automatisch","tsType":"string","section":"Verhalten"},"notdienstLeiste":{"editor":"boolean","default":true,"tsType":"boolean","section":"Module"},"bewertungImHero":{"editor":"boolean","default":true,"tsType":"boolean","section":"Module"}}">
|
||
class Component extends DCLogic {
|
||
state = { slider: 46, rechnerOffen: false, schritt: 0, antworten: {}, formGesendet: false, slot: null };
|
||
|
||
freieSlots = [
|
||
{ tag: 'Di 18.08.', zeit: '08:00' }, { tag: 'Di 18.08.', zeit: '10:30' },
|
||
{ tag: 'Di 18.08.', zeit: '14:00' }, { tag: 'Mi 19.08.', zeit: '09:00' },
|
||
{ tag: 'Mi 19.08.', zeit: '13:30' }, { tag: 'Do 20.08.', zeit: '08:30' },
|
||
{ tag: 'Do 20.08.', zeit: '11:00' }, { tag: 'Do 20.08.', zeit: '15:30' }
|
||
];
|
||
|
||
zeiten = [null, [450, 1020], [450, 1020], [450, 1020], [450, 1020], [450, 840], null];
|
||
|
||
fragen = [
|
||
{ key: 'typ', titel: 'Um welches Gebäude geht es?', hinweis: 'Ein Klick genügt — Sie tippen in diesem Rechner nichts.', optionen: [
|
||
{ label: 'Einfamilienhaus', zusatz: 'freistehend', f: 1 },
|
||
{ label: 'Doppelhaushälfte', zusatz: 'oder Reihenhaus', f: 0.97 },
|
||
{ label: 'Mehrfamilienhaus', zusatz: 'ab 3 Wohneinheiten', f: 1.35 },
|
||
{ label: 'Eigentumswohnung', zusatz: 'eigene Heizung', f: 0.8 }
|
||
] },
|
||
{ key: 'flaeche', titel: 'Wie groß ist die beheizte Wohnfläche?', hinweis: 'Eine Schätzung reicht — die genaue Heizlast rechnen wir später.', optionen: [
|
||
{ label: 'bis 120 m²', zusatz: '', spanne: [19000, 26000] },
|
||
{ label: '120 – 180 m²', zusatz: 'häufigster Fall', spanne: [23000, 31000] },
|
||
{ label: '180 – 250 m²', zusatz: '', spanne: [28000, 38000] },
|
||
{ label: 'über 250 m²', zusatz: '', spanne: [34000, 48000] }
|
||
] },
|
||
{ key: 'baujahr', titel: 'Aus welchem Jahr stammt das Gebäude?', hinweis: 'Das Baujahr sagt am meisten über den Dämmzustand.', optionen: [
|
||
{ label: 'vor 1978', zusatz: 'meist ungedämmt', f: 1.18 },
|
||
{ label: '1978 – 1994', zusatz: 'erste Wärmeschutzverordnungen', f: 1.08 },
|
||
{ label: '1995 – 2010', zusatz: '', f: 1 },
|
||
{ label: 'ab 2011', zusatz: 'oder saniert', f: 0.94 }
|
||
] },
|
||
{ key: 'flaechen', titel: 'Womit wird aktuell geheizt — Heizkörper oder Fußboden?', hinweis: 'Das entscheidet über die nötige Vorlauftemperatur.', optionen: [
|
||
{ label: 'Klassische Heizkörper', zusatz: 'an den Wänden', k: 'hk', f: 1.06 },
|
||
{ label: 'Fußbodenheizung', zusatz: 'überall', k: 'fbh', f: 0.96 },
|
||
{ label: 'Gemischt', zusatz: 'teils Fußboden, teils Heizkörper', k: 'mix', f: 1 },
|
||
{ label: 'Weiß ich nicht', zusatz: 'schauen wir uns an', k: 'unklar', f: 1 }
|
||
] }
|
||
];
|
||
|
||
componentDidMount() { this.timer = setInterval(() => this.forceUpdate(), 60000); }
|
||
componentWillUnmount() { clearInterval(this.timer); }
|
||
|
||
fmt(min) { return Math.floor(min / 60) + ':' + String(min % 60).padStart(2, '0'); }
|
||
|
||
status() {
|
||
const modus = this.props.oeffnungsStatus ?? 'Automatisch';
|
||
const jetzt = new Date();
|
||
const tag = this.zeiten[jetzt.getDay()];
|
||
const min = jetzt.getHours() * 60 + jetzt.getMinutes();
|
||
let offen = !!tag && min >= tag[0] && min < tag[1];
|
||
if (modus === 'Geöffnet') offen = true;
|
||
if (modus === 'Geschlossen') offen = false;
|
||
const namen = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
|
||
let wieder = 'Montag ab 7:30 Uhr';
|
||
if (tag && min < tag[0]) {
|
||
wieder = 'heute ab ' + this.fmt(tag[0]) + ' Uhr';
|
||
} else {
|
||
for (let i = 1; i <= 7; i++) {
|
||
const d = (jetzt.getDay() + i) % 7;
|
||
if (this.zeiten[d]) { wieder = (i === 1 ? 'morgen' : namen[d]) + ' ab ' + this.fmt(this.zeiten[d][0]) + ' Uhr'; break; }
|
||
}
|
||
}
|
||
return { offen: offen, schliesst: this.fmt((tag || [450, 1020])[1]) + ' Uhr', wieder: wieder };
|
||
}
|
||
|
||
waehle(key, opt) {
|
||
this.setState(s => ({ antworten: Object.assign({}, s.antworten, { [key]: opt }), schritt: s.schritt + 1 }));
|
||
}
|
||
|
||
ergebnis() {
|
||
const a = this.state.antworten;
|
||
const sp = (a.flaeche && a.flaeche.spanne) || [23000, 31000];
|
||
const f = ((a.typ && a.typ.f) || 1) * ((a.baujahr && a.baujahr.f) || 1) * ((a.flaechen && a.flaechen.f) || 1);
|
||
const r = n => Math.round((n * f) / 500) * 500;
|
||
const von = r(sp[0]);
|
||
const bis = r(sp[1]);
|
||
const eigen = n => Math.round((n - 0.46 * Math.min(n, 28000)) / 100) * 100;
|
||
return { von: von, bis: bis, eigenVon: eigen(von), eigenBis: eigen(bis) };
|
||
}
|
||
|
||
ampel() {
|
||
const a = this.state.antworten;
|
||
const alt = a.baujahr && a.baujahr.f >= 1.18;
|
||
const hk = a.flaechen && a.flaechen.k === 'hk';
|
||
if (alt && hk) return { gelb: true, titel: 'Machbar — mit etwas Vorbereitung',
|
||
text: 'Bei einem Gebäude vor 1978 mit klassischen Heizkörpern prüfen wir zuerst die nötige Vorlauftemperatur. In den meisten Fällen reicht der Tausch von zwei bis drei Heizkörpern, eine Komplettsanierung ist selten nötig.' };
|
||
return { gelb: false, titel: 'Gute Voraussetzungen',
|
||
text: 'Nach Ihren Angaben spricht nichts gegen eine Luft-Wasser-Wärmepumpe. Die Heizlastberechnung machen wir vor dem Angebot — kostenlos und unverbindlich.' };
|
||
}
|
||
|
||
renderVals() {
|
||
const st = this.status();
|
||
const s = this.state;
|
||
const stufe = this.props.ausbaustufe ?? 'PRO';
|
||
const frage = this.fragen[s.schritt];
|
||
const erg = this.ergebnis();
|
||
const am = this.ampel();
|
||
const euro = n => n.toLocaleString('de-DE') + ' €';
|
||
return {
|
||
notdienstAn: this.props.notdienstLeiste ?? true,
|
||
bewertungAn: this.props.bewertungImHero ?? true,
|
||
zeigeModule: stufe !== 'BASIS',
|
||
zeigePro: stufe === 'PRO',
|
||
offen: st.offen,
|
||
geschlossen: !st.offen,
|
||
schliesstUm: st.schliesst,
|
||
wiederAb: st.wieder,
|
||
sliderWert: s.slider,
|
||
sliderPos: s.slider + '%',
|
||
sliderInv: (100 - s.slider) + '%',
|
||
aufSlider: e => this.setState({ slider: Number(e.target.value) }),
|
||
rechnerOffen: s.rechnerOffen,
|
||
oeffneRechner: () => this.setState({ rechnerOffen: true, schritt: 0, antworten: {} }),
|
||
schliesseRechner: () => this.setState({ rechnerOffen: false }),
|
||
zurueck: () => this.setState(x => ({ schritt: Math.max(0, x.schritt - 1) })),
|
||
neuStarten: () => this.setState({ schritt: 0, antworten: {} }),
|
||
kannZurueck: s.schritt > 0,
|
||
zeigeFrage: !!frage,
|
||
zeigeErgebnis: !frage,
|
||
frageTitel: frage ? frage.titel : '',
|
||
frageHinweis: frage ? frage.hinweis : '',
|
||
frageNr: 'Frage ' + Math.min(s.schritt + 1, this.fragen.length) + ' von ' + this.fragen.length,
|
||
fortschrittPct: Math.round((s.schritt / this.fragen.length) * 100) + '%',
|
||
frageOptionen: frage ? frage.optionen.map(o => Object.assign({ zusatz: '' }, o, { waehlen: () => this.waehle(frage.key, o) })) : [],
|
||
spanne: euro(erg.von) + ' – ' + euro(erg.bis),
|
||
eigenanteil: euro(erg.eigenVon) + ' – ' + euro(erg.eigenBis),
|
||
ampelGruen: !am.gelb,
|
||
ampelGelb: am.gelb,
|
||
ampelTitel: am.titel,
|
||
ampelText: am.text,
|
||
slots: this.freieSlots.map(x => Object.assign({}, x, { waehlen: () => this.setState({ slot: x }) })),
|
||
slotOffen: !s.slot,
|
||
slotGewaehlt: !!s.slot,
|
||
slotLabel: s.slot ? s.slot.tag + ' um ' + s.slot.zeit + ' Uhr · Beratungstermin, 30 Minuten' : '',
|
||
slotZuruecksetzen: () => this.setState({ slot: null }),
|
||
formOffen: !s.formGesendet,
|
||
formGesendet: s.formGesendet,
|
||
sendeForm: e => { e.preventDefault(); this.setState({ formGesendet: true }); }
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|