knso/SHK-vorlage
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

forlage

Browse Source
This commit is contained in:
Kenso Grimm
2026-08-17 20:59:53 +02:00
commit f4888062c1
12 changed files with 7749 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.thumbnail Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

253
SHK-Foerderung.dc.html Normal file
View File

@@ -0,0 +1,253 @@
<!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&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; }
a:hover { color: #08384D; }
:focus-visible { outline: 3px solid #C9451C; outline-offset: 2px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
</style>
</helmet>
<div style="background:#FFFFFF">
<header style="background:#FFFFFF;border-bottom:1px solid #DDE2E7;position:sticky;top:0;z-index:50">
<div style="max-width:1200px;margin:0 auto;padding:12px clamp(16px,3vw,32px);display:flex;align-items:center;justify-content:space-between;gap:20px">
<a href="SHK-Startseite.dc.html" style="display:flex;align-items:center;gap:11px;text-decoration:none">
<span style="width:34px;height:34px;border-radius:3px;background:#0B4F6C;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px">B</span>
<span style="font-weight:700;font-size:17px;letter-spacing:.02em;color:#1A1D21">BERGER Haustechnik</span>
</a>
<nav style="display:flex;gap:20px;font-size:15px;font-weight:600;align-items:center">
<a href="SHK-Waermepumpe.dc.html" style="color:#1A1D21;text-decoration:none">Wärmepumpe</a>
<a href="SHK-Notdienst.dc.html" style="color:#1A1D21;text-decoration:none">Notdienst</a>
<a href="tel:+499411234500" style="color:#0B4F6C;text-decoration:none;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums">0941 12345-0</a>
</nav>
</div>
</header>
<section data-screen-label="Förderung Kopf" style="padding:clamp(24px,3vw,36px) clamp(16px,3vw,32px) clamp(32px,4vw,48px)">
<div style="max-width:1000px;margin:0 auto">
<nav aria-label="Breadcrumb" style="font-size:15px;color:#5A6169;margin-bottom:20px">
<a href="SHK-Startseite.dc.html" style="color:#5A6169">Start</a> › <span style="color:#1A1D21">Förderung</span>
</nav>
<h1 style="margin:0 0 12px;font-size:clamp(1.875rem,3.6vw,2.75rem);line-height:1.14;font-weight:700;letter-spacing:-0.02em">Förderung für Ihre neue Heizung — Stand 21.07.2026</h1>
<p style="margin:0 0 26px;font-size:19px;color:#5A6169;max-width:40em">Die KfW-Heizungsförderung wurde zum 21. Juli 2026 neu justiert. Was heute gilt, wie viel realistisch für Sie drin ist und — wichtiger — in welcher Reihenfolge Sie vorgehen müssen.</p>
<div style="border-left:4px solid #C1121F;background:#FBF0F0;padding:20px 22px;border-radius:0 3px 3px 0">
<p style="margin:0 0 8px;font-size:21px;font-weight:700;color:#B0111D">Der Antrag muss vor der Auftragsvergabe gestellt sein.</p>
<p style="margin:0;font-size:17px">Wer zuerst den Auftrag erteilt und dann den Antrag stellt, verliert den Anspruch vollständig — das ist der Punkt, an dem Bauherren in dieser Nische real Geld verlieren. Wir stellen unsere Angebote deshalb grundsätzlich unter Fördervorbehalt aus und beginnen erst nach Ihrer Zusage.</p>
</div>
</div>
</section>
<section data-screen-label="Bausteine" style="padding:clamp(36px,4.5vw,64px) 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 8px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700">Die Bausteine — KfW 458</h2>
<p style="margin:0 0 24px;font-size:18px;color:#5A6169;max-width:44em">Die Sätze addieren sich, gedeckelt bei 70 Prozent. Bezugsgröße sind nicht Ihre Gesamtkosten, sondern die förderfähigen Kosten.</p>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden">
<table style="border-collapse:collapse;width:100%;font-size:17px">
<tbody>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:14px 20px;font-weight:600">Grundförderung</td><td style="padding:14px 20px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap">30 %</td><td style="padding:14px 20px;color:#5A6169;font-size:16px">für alle förderfähigen Heizungen</td></tr>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:14px 20px;font-weight:600">Klimageschwindigkeitsbonus</td><td style="padding:14px 20px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap">16 %</td><td style="padding:14px 20px;color:#5A6169;font-size:16px">selbstnutzend, Austausch einer alten Anlage</td></tr>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:14px 20px;font-weight:600">Einkommensbonus</td><td style="padding:14px 20px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap">bis 40 %</td><td style="padding:14px 20px;color:#5A6169;font-size:16px">40 % bis 30.000 € · 30 % bis 40.000 € · 10 % bis 50.000 € zu versteuerndes Haushaltseinkommen</td></tr>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:14px 20px;font-weight:600">Familienkomponente</td><td style="padding:14px 20px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap">−10.000 €</td><td style="padding:14px 20px;color:#5A6169;font-size:16px">anrechenbares Einkommen je minderjährigem Kind</td></tr>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:14px 20px;font-weight:600">Höchstsatz</td><td style="padding:14px 20px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap">70 %</td><td style="padding:14px 20px;color:#5A6169;font-size:16px">bis 80 % nur bei den niedrigsten Einkommen</td></tr>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:14px 20px;font-weight:600">Förderfähige Kosten</td><td style="padding:14px 20px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap">28.000 €</td><td style="padding:14px 20px;color:#5A6169;font-size:16px">erste Wohneinheit · 15.000 € für WE 2–6 · 8.000 € ab WE 7</td></tr>
<tr><td style="padding:14px 20px;font-weight:600;color:#5A6169">Entfallen zum 21.07.2026</td><td style="padding:14px 20px;text-align:right;font-weight:700;color:#5A6169;white-space:nowrap">—</td><td style="padding:14px 20px;color:#5A6169;font-size:16px">Effizienzbonus (5 %) und Emissionsminderungszuschlag (2.500 €)</td></tr>
</tbody>
</table>
</div>
<div style="margin-top:20px;background:#FFFFFF;border:1px solid #DDE2E7;border-left:4px solid #C9451C;border-radius:0 4px 4px 0;padding:20px 22px">
<p style="margin:0 0 8px;font-size:19px;font-weight:700">Ab 01.02.2027 wird es weniger — halbjährlich.</p>
<p style="margin:0;font-size:17px;color:#3D4650">Der Klimageschwindigkeitsbonus sinkt alle sechs Monate um 4 Prozentpunkte und läuft im August 2028 aus; die förderfähigen Kosten sinken im selben Takt um 750 €. Wer 2026 beantragt, bekommt schlicht mehr. Das ist keine Rabattaktion, sondern die Programmlogik — nachlesbar im KfW-Merkblatt 458.</p>
</div>
</div>
</section>
<section data-screen-label="Beispielrechnung" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px)">
<div style="max-width:1000px;margin:0 auto">
<h2 style="margin:0 0 8px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700">Beispielrechnung mit offenem Rechenweg</h2>
<p style="margin:0 0 26px;font-size:18px;color:#5A6169;max-width:44em">Wärmepumpe für 26.000 € brutto, Austausch einer 22 Jahre alten Gastherme. Stellen Sie Ihre Situation ein — der Rechenweg passt sich an.</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;align-items:start">
<div style="display:flex;flex-direction:column;gap:22px">
<sc-for list="{{ regler }}" as="r" hint-placeholder-count="3">
<div>
<p style="margin:0 0 4px;font-size:17px;font-weight:600">{{ r.frage }}</p>
<p style="margin:0 0 10px;font-size:15px;color:#5A6169">{{ r.hinweis }}</p>
<div style="display:flex;gap:8px;flex-wrap:wrap">
<sc-for list="{{ r.optionen }}" as="o" hint-placeholder-count="3">
<button type="button" onClick="{{ o.waehlen }}" style="{{ o.stil }}">{{ o.label }}</button>
</sc-for>
</div>
</div>
</sc-for>
</div>
<div style="background:#0B4F6C;color:#FFFFFF;border-radius:4px;padding:26px">
<p style="margin:0 0 4px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#9FC0CF;font-weight:700">Ihr Fördersatz</p>
<p style="margin:0 0 20px;font-size:clamp(2.5rem,6vw,3.5rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums">{{ satz }}</p>
<div style="border-top:1px solid rgba(255,255,255,.22);padding-top:16px;display:flex;flex-direction:column;gap:9px;font-size:16px;font-variant-numeric:tabular-nums">
<sc-for list="{{ rechenweg }}" as="z" hint-placeholder-count="4">
<div style="display:flex;justify-content:space-between;gap:16px">
<span style="color:#C6DAE4">{{ z.label }}</span>
<span style="font-weight:700;white-space:nowrap">{{ z.wert }}</span>
</div>
</sc-for>
</div>
<div style="border-top:1px solid rgba(255,255,255,.22);margin-top:16px;padding-top:16px">
<div style="display:flex;justify-content:space-between;gap:16px;font-size:18px;margin-bottom:6px">
<span style="color:#C6DAE4">Zuschuss</span><span style="font-weight:700;font-variant-numeric:tabular-nums">{{ zuschuss }}</span>
</div>
<div style="display:flex;justify-content:space-between;gap:16px;font-size:22px;font-weight:700">
<span>Ihr Eigenanteil</span><span style="font-variant-numeric:tabular-nums">{{ eigenanteil }}</span>
</div>
</div>
<p style="margin:18px 0 0;font-size:14px;color:#9FC0CF">Unverbindliche Beispielrechnung, kein Anspruch. Maßgeblich ist Ihr zu versteuerndes Haushaltseinkommen im zweitvorangegangenen Jahr laut Steuerbescheid.</p>
</div>
</div>
</div>
</section>
<section data-screen-label="Ablauf" style="padding:clamp(36px,4.5vw,64px) 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 8px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700">Die Reihenfolge — sieben Schritte</h2>
<p style="margin:0 0 26px;font-size:18px;color:#5A6169;max-width:44em">Der einzige Teil dieser Seite, den Sie sich merken müssen. Schritt 3 vor Schritt 5, sonst ist die Förderung weg.</p>
<ol style="margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px">
<li style="background:#FFFFFF;padding:16px 20px;display:flex;gap:18px;align-items:baseline;border-radius:3px"><span style="font-size:15px;font-weight:700;color:#5A6169;flex:none;width:22px">1</span><span style="font-size:17px"><strong>Beratung und Bestandsaufnahme</strong> — kostenlos, bei Ihnen vor Ort.</span></li>
<li style="background:#FFFFFF;padding:16px 20px;display:flex;gap:18px;align-items:baseline;border-radius:3px"><span style="font-size:15px;font-weight:700;color:#5A6169;flex:none;width:22px">2</span><span style="font-size:17px"><strong>Angebot mit Fördervorbehalt</strong> — enthält alle Angaben, die die KfW für den Antrag verlangt.</span></li>
<li style="background:#FFFFFF;padding:16px 20px;display:flex;gap:18px;align-items:baseline;border-radius:3px;border-left:4px solid #C1121F"><span style="font-size:15px;font-weight:700;color:#B0111D;flex:none;width:22px">3</span><span style="font-size:17px"><strong>Antrag im KfW-Zuschussportal</strong> — Sie stellen ihn, wir bereiten die Unterlagen vor. <strong style="color:#B0111D">Vor jeder Beauftragung.</strong></span></li>
<li style="background:#FFFFFF;padding:16px 20px;display:flex;gap:18px;align-items:baseline;border-radius:3px"><span style="font-size:15px;font-weight:700;color:#5A6169;flex:none;width:22px">4</span><span style="font-size:17px"><strong>Zusage abwarten</strong> — derzeit zwei bis vier Wochen. Wir halten Ihnen den Montagetermin frei.</span></li>
<li style="background:#FFFFFF;padding:16px 20px;display:flex;gap:18px;align-items:baseline;border-radius:3px"><span style="font-size:15px;font-weight:700;color:#5A6169;flex:none;width:22px">5</span><span style="font-size:17px"><strong>Auftrag erteilen</strong> — jetzt, und keinen Tag früher.</span></li>
<li style="background:#FFFFFF;padding:16px 20px;display:flex;gap:18px;align-items:baseline;border-radius:3px"><span style="font-size:15px;font-weight:700;color:#5A6169;flex:none;width:22px">6</span><span style="font-size:17px"><strong>Einbau und Inbetriebnahme</strong> — zwei bis vier Arbeitstage.</span></li>
<li style="background:#FFFFFF;padding:16px 20px;display:flex;gap:18px;align-items:baseline;border-radius:3px"><span style="font-size:15px;font-weight:700;color:#5A6169;flex:none;width:22px">7</span><span style="font-size:17px"><strong>Verwendungsnachweis</strong> — Rechnung und Fachunternehmererklärung bekommen Sie von uns fertig zum Hochladen.</span></li>
</ol>
<p style="margin:22px 0 0;font-size:16px;color:#5A6169;max-width:52em">Was wir <strong>nicht</strong> tun: den Antrag für Sie stellen. Antragsteller sind Sie — wir unterstützen bei den Unterlagen und prüfen sie gegen. Wer Ihnen die „komplette Förderabwicklung" verspricht, übernimmt damit eine vertragliche Nebenpflicht, die im Schadensfall teuer wird.</p>
</div>
</section>
<section data-screen-label="Weitere Programme" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px)">
<div style="max-width:1000px;margin:0 auto">
<h2 style="margin:0 0 24px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700">Nicht nur die Heizung</h2>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px">
<div style="border:1px solid #DDE2E7;border-radius:4px;padding:22px">
<p style="margin:0 0 8px;font-size:19px;font-weight:700">Barrierefreies Bad: bis 4.180 €</p>
<p style="margin:0 0 12px;font-size:16px;color:#3D4650">Die Pflegekasse zahlt nach § 40 SGB XI je Maßnahme bis zu 4.180 €, wenn ein Pflegegrad vorliegt — für bodengleiche Dusche, Haltegriffe, unterfahrbaren Waschtisch. Bei zwei pflegebedürftigen Personen im Haushalt verdoppelt sich der Betrag.</p>
<a href="SHK-Startseite.dc.html#bad" style="font-weight:700;font-size:16px">Barrierefreies Bad ansehen →</a>
</div>
<div style="border:1px solid #DDE2E7;border-radius:4px;padding:22px">
<p style="margin:0 0 8px;font-size:19px;font-weight:700">KfW 455-B: derzeit ausgeschöpft</p>
<p style="margin:0 0 12px;font-size:16px;color:#3D4650">Der Zuschuss „Altersgerecht Umbauen" nimmt aktuell keine neuen Anträge an. Wir sagen es hier, damit Sie nicht darauf planen. Sobald neue Mittel bereitstehen, steht es an dieser Stelle.</p>
<p style="margin:0;font-size:15px;color:#5A6169">Geprüft am 12.08.2026</p>
</div>
<div style="border:1px solid #DDE2E7;border-radius:4px;padding:22px">
<p style="margin:0 0 8px;font-size:19px;font-weight:700">Kommunale Programme Regensburg</p>
<p style="margin:0 0 12px;font-size:16px;color:#3D4650">Stadt und Landkreis fördern in wechselnden Programmen unter anderem Heizungsoptimierung und Solarthermie. Diese Töpfe sind klein und oft im Frühjahr leer — wir prüfen sie bei der Beratung mit.</p>
<a href="SHK-Startseite.dc.html#kontakt" style="font-weight:700;font-size:16px">Im Beratungsgespräch klären →</a>
</div>
</div>
</div>
</section>
<section data-screen-label="Disclaimer und CTA" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px);background:#F4F6F8;border-top:1px solid #DDE2E7">
<div style="max-width:1000px;margin:0 auto">
<div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:32px">
<a href="SHK-Rechner.dc.html" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:15px 26px;border-radius:3px;font-weight:700;font-size:18px" style-hover="background:#A93A17">Fördercheck starten →</a>
<a href="SHK-Startseite.dc.html#termin" style="text-decoration:none;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:14px 24px;border-radius:3px;font-weight:700;font-size:18px" style-hover="background:#EDF1F4">Beratungstermin buchen →</a>
</div>
<div style="background:#FFFFFF;border:2px solid #1A1D21;border-radius:4px;padding:24px">
<p style="margin:0 0 10px;font-size:17px;font-weight:700">Wichtiger Hinweis zu allen Förderangaben auf dieser Seite</p>
<p style="margin:0 0 10px;font-size:17px">Alle Angaben geben den Stand vom <strong>21.07.2026</strong> wieder und dienen der ersten Orientierung. Förderbedingungen ändern sich häufig und teilweise kurzfristig. Wir leisten keine Rechts-, Steuer- oder Finanzberatung. Die Förderentscheidung trifft ausschließlich die zuständige Stelle (KfW/BAFA); ein Rechtsanspruch auf Förderung besteht nicht und kann von uns nicht zugesagt werden. Verbindlich sind allein die jeweils gültigen Programmunterlagen.</p>
<p style="margin:0;font-size:16px;color:#5A6169">Diese Seite wird quartalsweise geprüft. Zuletzt geprüft am 12.08.2026 durch Michael Berger.</p>
</div>
</div>
</section>
<footer style="background:#08384D;color:#D6E4EB;padding:clamp(36px,4vw,56px) clamp(16px,3vw,32px) 24px">
<div style="max-width:1200px;margin:0 auto;display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start">
<div>
<p style="margin:0 0 8px;font-weight:700;font-size:18px;color:#FFFFFF">BERGER Haustechnik GmbH</p>
<p style="margin:0 0 8px;font-size:16px">Prüfeninger Straße 42 · 93049 Regensburg · <a href="tel:+499411234500" style="color:#FFFFFF;font-weight:700">0941 12345-0</a></p>
<p style="margin:0;font-size:15px;color:#9FC0CF">Meisterbetrieb der Handwerkskammer Niederbayern-Oberpfalz</p>
</div>
<div style="display:flex;gap:20px;flex-wrap:wrap;font-size:16px">
<a href="SHK-Startseite.dc.html" style="color:#D6E4EB;text-decoration:none">Start</a>
<a href="SHK-Waermepumpe.dc.html" style="color:#D6E4EB;text-decoration:none">Wärmepumpe</a>
<a href="SHK-Notdienst.dc.html" style="color:#D6E4EB;text-decoration:none">Notdienst</a>
<a href="SHK-Karriere.dc.html" style="color:#D6E4EB;text-decoration:none">Karriere</a>
<a href="SHK-Startseite.dc.html#impressum" style="color:#D6E4EB;text-decoration:none">Impressum</a>
<a href="SHK-Startseite.dc.html#datenschutz" style="color:#D6E4EB;text-decoration:none">Datenschutz</a>
</div>
</div>
</footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{}">
class Component extends DCLogic {
state = { nutzung: 'selbst', alt: 'ja', einkommen: 'mittel' };
basis = 'padding:10px 16px;border-radius:3px;border:1.5px solid #DDE2E7;background:#FFFFFF;color:#5A6169;font-size:16px;font-weight:600;cursor:pointer';
aktiv = 'padding:10px 16px;border-radius:3px;border:1.5px solid #0B4F6C;background:#0B4F6C;color:#FFFFFF;font-size:16px;font-weight:600;cursor:pointer';
fragen = [
{ id: 'nutzung', frage: 'Bewohnen Sie das Haus selbst?', hinweis: 'Klimageschwindigkeits- und Einkommensbonus gibt es nur für Selbstnutzende.',
optionen: [{ w: 'selbst', label: 'Ja, selbstgenutzt' }, { w: 'vermietet', label: 'Nein, vermietet' }] },
{ id: 'alt', frage: 'Wird eine alte Heizung ersetzt?', hinweis: 'Gilt für Gas- und Ölheizungen ab 20 Jahren sowie für Kohle- und Nachtspeicherheizungen.',
optionen: [{ w: 'ja', label: 'Ja, Austausch' }, { w: 'nein', label: 'Nein, Neubau' }] },
{ id: 'einkommen', frage: 'Zu versteuerndes Haushaltseinkommen', hinweis: 'Laut Steuerbescheid des zweitvorangegangenen Jahres, minus 10.000 € je minderjährigem Kind.',
optionen: [{ w: 'niedrig', label: 'bis 30.000 €' }, { w: 'mittel', label: '30 – 40.000 €' }, { w: 'hoch', label: '40 – 50.000 €' }, { w: 'sehrhoch', label: 'über 50.000 €' }] }
];
renderVals() {
const s = this.state;
const kosten = 26000;
const foerderfaehig = Math.min(kosten, 28000);
const selbst = s.nutzung === 'selbst';
const klima = selbst && s.alt === 'ja' ? 16 : 0;
const eBonus = selbst ? ({ niedrig: 40, mittel: 30, hoch: 10, sehrhoch: 0 })[s.einkommen] : 0;
const roh = 30 + klima + eBonus;
const satz = Math.min(roh, 70);
const zuschuss = Math.round((satz / 100) * foerderfaehig);
const euro = n => n.toLocaleString('de-DE') + ' €';
const weg = [
{ label: 'Förderfähige Kosten', wert: euro(foerderfaehig) },
{ label: 'Grundförderung', wert: '30 %' }
];
if (klima) weg.push({ label: 'Klimageschwindigkeitsbonus', wert: '+ 16 %' });
if (eBonus) weg.push({ label: 'Einkommensbonus', wert: '+ ' + eBonus + ' %' });
if (roh > 70) weg.push({ label: 'Deckel bei 70 %', wert: '− ' + (roh - 70) + ' %' });
if (!selbst) weg.push({ label: 'Boni entfallen (vermietet)', wert: '0 %' });
return {
regler: this.fragen.map(f => Object.assign({}, f, {
optionen: f.optionen.map(o => ({
label: o.label,
stil: s[f.id] === o.w ? this.aktiv : this.basis,
waehlen: () => this.setState({ [f.id]: o.w })
}))
})),
satz: satz + ' %',
rechenweg: weg,
zuschuss: euro(zuschuss),
eigenanteil: euro(kosten - zuschuss)
};
}
}
</script>
</body>
</html>

281
SHK-Karriere.dc.html Normal file
View File

@@ -0,0 +1,281 @@
<!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&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; }
a:hover { color: #08384D; }
:focus-visible { outline: 3px solid #C9451C; outline-offset: 2px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
</style>
</helmet>
<div style="background:#FFFFFF">
<header style="background:#FFFFFF;border-bottom:1px solid #DDE2E7">
<div style="max-width:1200px;margin:0 auto;padding:12px clamp(16px,3vw,32px);display:flex;align-items:center;justify-content:space-between;gap:20px">
<a href="SHK-Startseite.dc.html" style="display:flex;align-items:center;gap:11px;text-decoration:none">
<span style="width:34px;height:34px;border-radius:3px;background:#0B4F6C;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px">B</span>
<span style="font-weight:700;font-size:17px;letter-spacing:.02em;color:#1A1D21">BERGER Haustechnik</span>
</a>
<nav style="display:flex;gap:20px;font-size:15px;font-weight:600;align-items:center">
<a href="SHK-Waermepumpe.dc.html" style="color:#1A1D21;text-decoration:none">Wärmepumpe</a>
<a href="SHK-Notdienst.dc.html" style="color:#1A1D21;text-decoration:none">Notdienst</a>
<a href="tel:+499411234500" style="color:#0B4F6C;text-decoration:none;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums">0941 12345-0</a>
</nav>
</div>
</header>
<section data-screen-label="Karriere Kopf" style="padding:clamp(28px,3.5vw,48px) clamp(16px,3vw,32px) 0">
<div style="max-width:1100px;margin:0 auto">
<p style="margin:0 0 12px;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:600">Karriere bei Berger · Regensburg</p>
<h1 style="margin:0 0 16px;font-size:clamp(1.875rem,3.6vw,2.75rem);line-height:1.14;font-weight:700;letter-spacing:-0.02em">Drei offene Stellen. Vierzehn Kolleginnen und Kollegen, die wissen, wen sie brauchen.</h1>
<p style="margin:0 0 28px;font-size:19px;color:#5A6169;max-width:42em">Kein Anschreiben, kein Bewerbungsportal mit Passwort. Vier Felder, und wir melden uns innerhalb von zwei Werktagen.</p>
<div style="display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid #DDE2E7">
<sc-for list="{{ tabs }}" as="t" hint-placeholder-count="4">
<button type="button" onClick="{{ t.waehlen }}" style="{{ t.stil }}">{{ t.label }}</button>
</sc-for>
</div>
</div>
</section>
<sc-if value="{{ istWarum }}" hint-placeholder-val="{{ true }}">
<section data-screen-label="Warum wir" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px)">
<div style="max-width:1100px;margin:0 auto">
<h2 style="margin:0 0 8px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700">Was Sie hier bekommen — ohne Floskeln</h2>
<p style="margin:0 0 28px;font-size:18px;color:#5A6169;max-width:44em">„Attraktive Vergütung, gutes Betriebsklima, moderne Ausstattung" steht in jeder zweiten Stellenanzeige des Handwerks. Hier steht, was das bei uns konkret heißt.</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;margin-bottom:36px">
<div style="background:#FFFFFF;padding:22px"><p style="margin:0 0 6px;font-size:18px;font-weight:700">Übertariflich, plus Weihnachts- und Urlaubsgeld</p><p style="margin:0;font-size:16px;color:#5A6169">Gesellen starten bei uns bei 3.400 € brutto, Kundendienstmonteure mit Bereitschaft bei 3.800 €. Dazu 600 € Gesundheitsbudget im Jahr.</p></div>
<div style="background:#FFFFFF;padding:22px"><p style="margin:0 0 6px;font-size:18px;font-weight:700">Kein Wochenenddienst außer im Turnus</p><p style="margin:0;font-size:16px;color:#5A6169">Notdienst alle sechs Wochen, mit Zuschlag und Freizeitausgleich. Freitags ist um 14:00 Schluss, das gilt auch im Sommer.</p></div>
<div style="background:#FFFFFF;padding:22px"><p style="margin:0 0 6px;font-size:18px;font-weight:700">Meisterkurs bezahlt und in der Arbeitszeit</p><p style="margin:0;font-size:16px;color:#5A6169">Vier unserer Meister haben hier gelernt. Wer will, macht den Techniker oder die Kältetechnik-Zertifizierung — beides zahlen wir.</p></div>
<div style="background:#FFFFFF;padding:22px"><p style="margin:0 0 6px;font-size:18px;font-weight:700">Eigenes Fahrzeug, ordentliches Werkzeug</p><p style="margin:0;font-size:16px;color:#5A6169">Sie fahren morgens von zuhause los, nicht erst zum Betrieb. Tablet mit Auftragsapp — keine Zettel, keine Nachtrags-Diskussionen.</p></div>
<div style="background:#FFFFFF;padding:22px"><p style="margin:0 0 6px;font-size:18px;font-weight:700">30 Tage Urlaub und ein Arbeitszeitkonto</p><p style="margin:0;font-size:16px;color:#5A6169">Überstunden verfallen nicht. Im Winter fallen welche an, im Sommer nehmen Sie sie.</p></div>
<div style="background:#FFFFFF;padding:22px"><p style="margin:0 0 6px;font-size:18px;font-weight:700">Keine Subunternehmer-Baustellen</p><p style="margin:0;font-size:16px;color:#5A6169">Wir arbeiten mit eigener Mannschaft. Sie sehen Ihre Baustelle von der Planung bis zur Abnahme — und nicht drei Gewerke, die sich gegenseitig zumauern.</p></div>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;align-items:center;background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:26px">
<div style="aspect-ratio:16/10;border:1px solid #DDE2E7;border-radius:3px;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">Pflichtbild 2 — Team, echtes Gruppenfoto</span>
</div>
<div>
<p style="margin:0 0 10px;font-size:19px;font-weight:700">Wer schon da ist</p>
<p style="margin:0 0 10px;font-size:17px;color:#3D4650">Vierzehn Leute: acht Monteure, zwei Azubis, ein Projektleiter Bad, zwei im Büro, ein Chef, der noch selbst rausfährt. Die durchschnittliche Betriebszugehörigkeit liegt bei neun Jahren.</p>
<p style="margin:0;font-size:17px;color:#3D4650">Reden Sie mit den Kollegen, bevor Sie unterschreiben — wir stellen den Kontakt her, auch ohne dass der Chef dabeisitzt.</p>
</div>
</div>
</div>
</section>
</sc-if>
<sc-if value="{{ istStellen }}" hint-placeholder-val="{{ false }}">
<section data-screen-label="Offene Stellen" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px)">
<div style="max-width:1100px;margin:0 auto">
<h2 style="margin:0 0 8px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700">Drei konkrete Stellen</h2>
<p style="margin:0 0 28px;font-size:18px;color:#5A6169;max-width:44em">Keine Initiativbewerbungs-Sammelseite. Das hier sind Stellen, die wir heute besetzen würden.</p>
<div style="display:flex;flex-direction:column;gap:16px">
<details style="border:1px solid #DDE2E7;border-radius:4px;overflow:hidden" open="open">
<summary style="padding:20px 24px;background:#F4F6F8;display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap">
<span><span style="display:block;font-size:21px;font-weight:700">Anlagenmechaniker SHK (m/w/d)</span><span style="display:block;font-size:16px;color:#5A6169">Vollzeit · unbefristet · ab sofort · Regensburg</span></span>
<span style="font-size:17px;font-weight:700;color:#0B4F6C;white-space:nowrap">ab 3.400 € brutto</span>
</summary>
<div style="padding:22px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px">
<div><p style="margin:0 0 8px;font-weight:700;font-size:17px">Was Sie machen</p><ul style="margin:0;padding-left:20px;font-size:16px;color:#3D4650;display:flex;flex-direction:column;gap:6px"><li>Wärmepumpen und Heizungsanlagen einbauen und in Betrieb nehmen</li><li>Bäder komplett installieren, von der Rohinstallation bis zur Montage</li><li>Störungen beim Kunden aufnehmen und beheben</li></ul></div>
<div><p style="margin:0 0 8px;font-weight:700;font-size:17px">Was Sie mitbringen</p><ul style="margin:0;padding-left:20px;font-size:16px;color:#3D4650;display:flex;flex-direction:column;gap:6px"><li>Abgeschlossene Ausbildung im SHK-Handwerk</li><li>Führerschein Klasse B</li><li>Freundlicher Ton beim Kunden — das ist uns wichtiger als zehn Jahre Berufserfahrung</li></ul></div>
<div><p style="margin:0 0 8px;font-weight:700;font-size:17px">Was wir zusätzlich zahlen</p><ul style="margin:0;padding-left:20px;font-size:16px;color:#3D4650;display:flex;flex-direction:column;gap:6px"><li>Weihnachts- und Urlaubsgeld</li><li>600 € Gesundheitsbudget im Jahr</li><li>Meisterkurs komplett, in der Arbeitszeit</li></ul></div>
</div>
<div style="padding:0 24px 22px"><button type="button" onClick="{{ zurBewerbung }}" style="background:#C9451C;color:#FFFFFF;border:none;padding:13px 22px;border-radius:3px;font-weight:700;font-size:17px;cursor:pointer" style-hover="background:#A93A17">In 4 Feldern bewerben →</button></div>
</details>
<details style="border:1px solid #DDE2E7;border-radius:4px;overflow:hidden">
<summary style="padding:20px 24px;background:#F4F6F8;display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap">
<span><span style="display:block;font-size:21px;font-weight:700">Kundendienstmonteur (m/w/d)</span><span style="display:block;font-size:16px;color:#5A6169">Vollzeit · unbefristet · ab sofort · Regensburg &amp; Landkreis</span></span>
<span style="font-size:17px;font-weight:700;color:#0B4F6C;white-space:nowrap">ab 3.800 € brutto</span>
</summary>
<div style="padding:22px 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px">
<div><p style="margin:0 0 8px;font-weight:700;font-size:17px">Was Sie machen</p><ul style="margin:0;padding-left:20px;font-size:16px;color:#3D4650;display:flex;flex-direction:column;gap:6px"><li>Wartungen an Heizungen und Wärmepumpen, planbar terminiert</li><li>Störungsdienst tagsüber, Notdienst im Turnus alle sechs Wochen</li><li>Eigenes Servicefahrzeug, das Sie mit nach Hause nehmen</li></ul></div>
<div><p style="margin:0 0 8px;font-weight:700;font-size:17px">Was Sie mitbringen</p><ul style="margin:0;padding-left:20px;font-size:16px;color:#3D4650;display:flex;flex-direction:column;gap:6px"><li>Erfahrung im Kundendienst oder Lust darauf</li><li>Ruhige Hand am Telefon und beim aufgeregten Kunden</li><li>Kälteschein von Vorteil — sonst zahlen wir ihn</li></ul></div>
<div><p style="margin:0 0 8px;font-weight:700;font-size:17px">Was wir zusätzlich zahlen</p><ul style="margin:0;padding-left:20px;font-size:16px;color:#3D4650;display:flex;flex-direction:column;gap:6px"><li>Bereitschaftspauschale plus Einsatzzuschläge</li><li>Freizeitausgleich für jede Notdienstwoche</li><li>Weihnachts- und Urlaubsgeld</li></ul></div>
</div>
<div style="padding:0 24px 22px"><button type="button" onClick="{{ zurBewerbung }}" style="background:#C9451C;color:#FFFFFF;border:none;padding:13px 22px;border-radius:3px;font-weight:700;font-size:17px;cursor:pointer" style-hover="background:#A93A17">In 4 Feldern bewerben →</button></div>
</details>
<details style="border:1px solid #DDE2E7;border-radius:4px;overflow:hidden">
<summary style="padding:20px 24px;background:#F4F6F8;display:flex;justify-content:space-between;gap:20px;align-items:baseline;flex-wrap:wrap">
<span><span style="display:block;font-size:21px;font-weight:700">Auszubildende Anlagenmechanik SHK (m/w/d)</span><span style="display:block;font-size:16px;color:#5A6169">3,5 Jahre · Start 01.08.2027 · zwei Plätze</span></span>
<span style="font-size:17px;font-weight:700;color:#0B4F6C;white-space:nowrap">850 – 1.150 € im Monat</span>
</summary>
<div style="padding:22px 24px">
<p style="margin:0 0 14px;font-size:17px;color:#3D4650">Für Azubis haben wir eine eigene Seite geschrieben — mit dem, was du wirklich wissen willst: was du verdienst, was du in Woche eins machst und wie es nach der Lehre weitergeht.</p>
<button type="button" onClick="{{ zurAusbildung }}" style="background:#0B4F6C;color:#FFFFFF;border:none;padding:13px 22px;border-radius:3px;font-weight:700;font-size:17px;cursor:pointer" style-hover="background:#08384D">Zur Ausbildungsseite →</button>
</div>
</details>
</div>
<p style="margin:24px 0 0;font-size:16px;color:#5A6169">Nichts Passendes dabei, aber Sie können etwas, das wir brauchen könnten? Schreiben Sie es in das Freitextfeld der Quick-Bewerbung. Wir lesen jede.</p>
</div>
</section>
</sc-if>
<sc-if value="{{ istAusbildung }}" hint-placeholder-val="{{ false }}">
<section data-screen-label="Ausbildung" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px)">
<div style="max-width:1100px;margin:0 auto">
<h2 style="margin:0 0 8px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700">Du willst wissen, ob das was für dich ist?</h2>
<p style="margin:0 0 30px;font-size:18px;color:#5A6169;max-width:44em">Kurz gesagt: Du baust Heizungen und Bäder ein, arbeitest mit Wasser, Strom und Werkzeug, bist selten am Schreibtisch und siehst abends, was du geschafft hast.</p>
<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:32px">
<div style="background:#FFFFFF;padding:20px"><p style="margin:0 0 4px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#5A6169;font-weight:700">1. Lehrjahr</p><p style="margin:0;font-size:26px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">850 €</p></div>
<div style="background:#FFFFFF;padding:20px"><p style="margin:0 0 4px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#5A6169;font-weight:700">2. Lehrjahr</p><p style="margin:0;font-size:26px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">950 €</p></div>
<div style="background:#FFFFFF;padding:20px"><p style="margin:0 0 4px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#5A6169;font-weight:700">3. Lehrjahr</p><p style="margin:0;font-size:26px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">1.050 €</p></div>
<div style="background:#FFFFFF;padding:20px"><p style="margin:0 0 4px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#5A6169;font-weight:700">4. Lehrjahr</p><p style="margin:0;font-size:26px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">1.150 €</p></div>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:32px">
<div>
<h3 style="margin:0 0 10px;font-size:20px;font-weight:700">Was du in der ersten Woche machst</h3>
<p style="margin:0 0 10px;font-size:17px;color:#3D4650">Du fährst mit auf die Baustelle, trägst nicht nur Material und darfst am zweiten Tag den ersten Rohrschnitt setzen. Kaffee holen gehört nicht zur Ausbildung — das haben wir uns abgewöhnt, als uns zwei Azubis deswegen abgesprungen sind.</p>
<p style="margin:0;font-size:17px;color:#3D4650">Deinen Ausbilder hast du fest: Tobias, 34, war selbst hier Azubi.</p>
</div>
<div>
<h3 style="margin:0 0 10px;font-size:20px;font-weight:700">Wie es danach weitergeht</h3>
<p style="margin:0 0 10px;font-size:17px;color:#3D4650">Wir übernehmen jeden, der die Prüfung besteht — das waren in den letzten zehn Jahren alle bis auf einen. Danach: Kundendienst, Kältetechnik-Zertifizierung, Meister oder Techniker. Den Meisterkurs zahlen wir und du besuchst ihn in der Arbeitszeit.</p>
<p style="margin:0;font-size:17px;color:#3D4650">Vier unserer heutigen Meister haben genau diesen Weg genommen.</p>
</div>
</div>
<div style="background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;align-items:center;margin-bottom:28px">
<div style="aspect-ratio:4/3;border:1px solid #DDE2E7;border-radius:3px;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">Foto — unsere zwei Azubis bei der Arbeit</span>
</div>
<div>
<p style="margin:0 0 10px;font-size:19px;font-weight:700">Frag die, die schon da sind</p>
<p style="margin:0 0 8px;font-size:17px;font-style:italic;color:#3D4650">„Ich hatte Angst, dass ich nur zuschauen darf. Nach vier Wochen habe ich mein erstes Waschbecken alleine gesetzt."</p>
<p style="margin:0 0 14px;font-size:15px;color:#5A6169">Jonas, 2. Lehrjahr</p>
<p style="margin:0;font-size:17px;color:#3D4650">Praktikum geht jederzeit, auch eine Woche in den Ferien. Ruf einfach Sabine an: <a href="tel:+499411234515" style="font-weight:700">0941 12345-15</a>.</p>
</div>
</div>
<button type="button" onClick="{{ zurBewerbung }}" style="background:#C9451C;color:#FFFFFF;border:none;padding:15px 26px;border-radius:3px;font-weight:700;font-size:18px;cursor:pointer" style-hover="background:#A93A17">Bewirb dich — dauert 2 Minuten →</button>
</div>
</section>
</sc-if>
<sc-if value="{{ istBewerbung }}" hint-placeholder-val="{{ false }}">
<section data-screen-label="Quick-Bewerbung" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px)">
<div style="max-width:640px;margin:0 auto">
<sc-if value="{{ bewerbungOffen }}" hint-placeholder-val="{{ true }}">
<form onSubmit="{{ sendeBewerbung }}">
<h2 style="margin:0 0 8px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700">Quick-Bewerbung</h2>
<p style="margin:0 0 28px;font-size:18px;color:#5A6169">Kein Anschreiben nötig, Lebenslauf freiwillig. Wir melden uns innerhalb von zwei Werktagen — auch wenn es nicht passt.</p>
<div style="display:flex;flex-direction:column;gap:18px">
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Name
<input type="text" name="name" required="required" autoComplete="name" style="padding:13px 15px;border:1px solid #B9C2CA;border-radius:3px;font-size:17px;font-weight:400" />
</label>
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Telefon oder E-Mail
<input type="text" name="kontakt" required="required" style="padding:13px 15px;border:1px solid #B9C2CA;border-radius:3px;font-size:17px;font-weight:400" />
</label>
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Worauf bewerben Sie sich?
<select name="stelle" required="required" style="padding:13px 15px;border:1px solid #B9C2CA;border-radius:3px;font-size:17px;font-weight:400">
<option value="">Bitte wählen</option>
<option value="anlagenmechaniker">Anlagenmechaniker SHK</option>
<option value="kundendienst">Kundendienstmonteur</option>
<option value="ausbildung">Ausbildung ab 01.08.2027</option>
<option value="praktikum">Praktikum</option>
<option value="initiativ">Etwas anderes — steht unten</option>
</select>
</label>
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Lebenslauf anhängen <span style="font-weight:400;color:#5A6169">(optional, PDF oder Foto)</span>
<input type="file" name="datei" accept=".pdf,.jpg,.png" style="padding:11px 0;font-size:16px;font-weight:400" />
</label>
<label style="display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:600">Wollen Sie uns noch etwas sagen? <span style="font-weight:400;color:#5A6169">(optional)</span>
<textarea name="text" rows="3" style="padding:13px 15px;border:1px solid #B9C2CA;border-radius:3px;font-size:17px;font-weight:400;resize:vertical"></textarea>
</label>
<button type="submit" style="background:#C9451C;color:#FFFFFF;border:none;padding:16px 26px;border-radius:3px;font-weight:700;font-size:18px;cursor:pointer" style-hover="background:#A93A17">Bewerbung absenden</button>
<p style="margin:0;font-size:14px;color:#5A6169">Ihre Daten verwenden wir ausschließlich für dieses Bewerbungsverfahren und löschen sie spätestens sechs Monate nach dessen Abschluss. Eine Aufnahme in unseren Talentpool erfolgt nur, wenn Sie uns das ausdrücklich erlauben. Details in der <a href="SHK-Startseite.dc.html#datenschutz">Datenschutzerklärung</a>.</p>
</div>
</form>
</sc-if>
<sc-if value="{{ bewerbungGesendet }}" hint-placeholder-val="{{ false }}">
<div>
<h2 style="margin:0 0 12px;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;color:#0F6B33">Angekommen. Danke.</h2>
<p style="margin:0 0 12px;font-size:18px">Sabine oder Michael melden sich innerhalb von zwei Werktagen bei Ihnen — telefonisch, wenn Sie eine Nummer hinterlassen haben. Auch dann, wenn es nicht passt; eine unbeantwortete Bewerbung gibt es bei uns nicht.</p>
<p style="margin:0 0 24px;font-size:18px">Wenn Sie vorher etwas fragen wollen: <a href="tel:+499411234515" style="font-weight:700">0941 12345-15</a>.</p>
<button type="button" onClick="{{ neueBewerbung }}" style="background:none;border:none;color:#0B4F6C;font-size:17px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0">Noch eine Bewerbung senden</button>
</div>
</sc-if>
</div>
</section>
</sc-if>
<footer style="background:#08384D;color:#D6E4EB;padding:clamp(36px,4vw,56px) clamp(16px,3vw,32px) 24px;margin-top:clamp(24px,4vw,48px)">
<div style="max-width:1200px;margin:0 auto;display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start">
<div>
<p style="margin:0 0 8px;font-weight:700;font-size:18px;color:#FFFFFF">BERGER Haustechnik GmbH</p>
<p style="margin:0 0 8px;font-size:16px">Prüfeninger Straße 42 · 93049 Regensburg · <a href="tel:+499411234500" style="color:#FFFFFF;font-weight:700">0941 12345-0</a></p>
<p style="margin:0;font-size:15px;color:#9FC0CF">Meisterbetrieb der Handwerkskammer Niederbayern-Oberpfalz</p>
</div>
<div style="display:flex;gap:20px;flex-wrap:wrap;font-size:16px">
<a href="SHK-Startseite.dc.html" style="color:#D6E4EB;text-decoration:none">Start</a>
<a href="SHK-Waermepumpe.dc.html" style="color:#D6E4EB;text-decoration:none">Wärmepumpe</a>
<a href="SHK-Foerderung.dc.html" style="color:#D6E4EB;text-decoration:none">Förderung</a>
<a href="SHK-Notdienst.dc.html" style="color:#D6E4EB;text-decoration:none">Notdienst</a>
<a href="SHK-Startseite.dc.html#impressum" style="color:#D6E4EB;text-decoration:none">Impressum</a>
<a href="SHK-Startseite.dc.html#datenschutz" style="color:#D6E4EB;text-decoration:none">Datenschutz</a>
</div>
</div>
</footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;startTab&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;Warum wir&quot;,&quot;Offene Stellen&quot;,&quot;Ausbildung&quot;,&quot;Quick-Bewerbung&quot;],&quot;default&quot;:&quot;Warum wir&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Ansicht&quot;}}">
class Component extends DCLogic {
state = { tab: null, gesendet: false };
vonProp = { 'Warum wir': 'warum', 'Offene Stellen': 'stellen', 'Ausbildung': 'ausbildung', 'Quick-Bewerbung': 'bewerbung' };
liste = [
{ id: 'warum', label: 'Warum wir' },
{ id: 'stellen', label: 'Offene Stellen' },
{ id: 'ausbildung', label: 'Ausbildung' },
{ id: 'bewerbung', label: 'Quick-Bewerbung' }
];
basis = 'padding:13px 20px;border:none;background:none;color:#5A6169;font-size:17px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px';
aktiv = 'padding:13px 20px;border:none;background:none;color:#0B4F6C;font-size:17px;font-weight:700;cursor:pointer;border-bottom:3px solid #C9451C;margin-bottom:-2px';
renderVals() {
const t = this.state.tab || this.vonProp[this.props.startTab] || 'warum';
return {
tabs: this.liste.map(x => ({
label: x.label,
stil: t === x.id ? this.aktiv : this.basis,
waehlen: () => this.setState({ tab: x.id })
})),
istWarum: t === 'warum',
istStellen: t === 'stellen',
istAusbildung: t === 'ausbildung',
istBewerbung: t === 'bewerbung',
zurBewerbung: () => this.setState({ tab: 'bewerbung', gesendet: false }),
zurAusbildung: () => this.setState({ tab: 'ausbildung' }),
bewerbungOffen: !this.state.gesendet,
bewerbungGesendet: this.state.gesendet,
sendeBewerbung: e => { e.preventDefault(); this.setState({ gesendet: true }); },
neueBewerbung: () => this.setState({ gesendet: false })
};
}
}
</script>
</body>
</html>

212
SHK-Notdienst.dc.html Normal file
View File

@@ -0,0 +1,212 @@
<!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&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; }
a:hover { color: #08384D; }
:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
</style>
</helmet>
<div style="background:#FFFFFF">
<header style="background:#FFFFFF;border-bottom:1px solid #DDE2E7">
<div style="max-width:1200px;margin:0 auto;padding:12px clamp(16px,3vw,32px);display:flex;align-items:center;justify-content:space-between;gap:20px">
<a href="SHK-Startseite.dc.html" style="display:flex;align-items:center;gap:11px;text-decoration:none">
<span style="width:34px;height:34px;border-radius:3px;background:#0B4F6C;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px">B</span>
<span style="font-weight:700;font-size:17px;letter-spacing:.02em;color:#1A1D21">BERGER Haustechnik</span>
</a>
<nav style="display:flex;gap:20px;font-size:15px;font-weight:600">
<a href="SHK-Waermepumpe.dc.html" style="color:#1A1D21;text-decoration:none">Wärme</a>
<a href="SHK-Foerderung.dc.html" style="color:#1A1D21;text-decoration:none">Förderung</a>
<a href="SHK-Startseite.dc.html#kontakt" style="color:#1A1D21;text-decoration:none">Kontakt</a>
</nav>
</div>
</header>
<section data-screen-label="Notruf-Hero" style="background:#C1121F;color:#FFFFFF;padding:clamp(28px,4vw,52px) clamp(16px,3vw,32px)">
<div style="max-width:1000px;margin:0 auto">
<h1 style="margin:0 0 6px;font-size:clamp(1.5rem,3vw,2.125rem);font-weight:700;line-height:1.15;letter-spacing:-0.01em">Notdienst Regensburg — Rohrbruch, Heizungsausfall, kein Warmwasser</h1>
<p style="margin:0 0 22px;font-size:clamp(1.0625rem,1.6vw,1.25rem);color:#FFD9DC">Rufen Sie an. Alles andere klärt sich am Telefon in zwei Minuten.</p>
<a href="tel:+4994112345990" style="display:inline-block;text-decoration:none;background:#FFFFFF;color:#B0111D;padding:clamp(16px,2.4vw,26px) clamp(24px,3.6vw,48px);border-radius:5px;font-size:clamp(2.25rem,6vw,4rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-0.02em" style-hover="background:#FFECEE">0941 12345-99</a>
<sc-if value="{{ erreichbar }}" hint-placeholder-val="{{ true }}">
<p style="margin:22px 0 0;font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:700;display:flex;align-items:center;gap:10px">
<span style="width:13px;height:13px;border-radius:50%;background:#7DF29B"></span>Jetzt erreichbar — {{ hinweisZeit }}
</p>
</sc-if>
<sc-if value="{{ nichtErreichbar }}" hint-placeholder-val="{{ false }}">
<div style="margin:22px 0 0">
<p style="margin:0 0 6px;font-size:clamp(1.0625rem,1.6vw,1.25rem);font-weight:700;display:flex;align-items:center;gap:10px">
<span style="width:13px;height:13px;border-radius:50%;background:#FFD9DC;border:2px solid #FFFFFF"></span>Notdienst gerade nicht besetzt — wieder ab {{ hinweisZeit }}
</p>
<p style="margin:0;font-size:17px;color:#FFD9DC;max-width:44em">Der Anrufbeantworter nimmt Ihre Nachricht auf und wir rufen zurück, sobald wir können. Bei Gasgeruch oder Wasser im Sicherungskasten wählen Sie bitte sofort die Nummern weiter unten.</p>
</div>
</sc-if>
</div>
</section>
<section data-screen-label="Erreichbarkeit und Preise" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px)">
<div style="max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,4vw,44px)">
<div>
<h2 style="margin:0 0 16px;font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:700">Wann wir kommen</h2>
<table style="border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums;width:100%;margin-bottom:16px">
<tbody>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:9px 0;color:#5A6169">Montag – Freitag</td><td style="padding:9px 0;text-align:right;font-weight:600">17:00 – 20:00 Uhr</td></tr>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:9px 0;color:#5A6169">Samstag &amp; Sonntag</td><td style="padding:9px 0;text-align:right;font-weight:600">8:00 – 20:00 Uhr</td></tr>
<tr style="border-bottom:1px solid #EDF1F4"><td style="padding:9px 0;color:#5A6169">Feiertage</td><td style="padding:9px 0;text-align:right;font-weight:600">8:00 – 20:00 Uhr</td></tr>
<tr><td style="padding:9px 0;color:#5A6169">Werktags vor 17 Uhr</td><td style="padding:9px 0;text-align:right;font-weight:600"><a href="tel:+499411234500">Zentrale 0941 12345-0</a></td></tr>
</tbody>
</table>
<p style="margin:0 0 8px;font-size:17px"><strong>Im Stadtgebiet in der Regel innerhalb von 90 Minuten.</strong> In Neutraubling, Lappersdorf und Pentling rechnen Sie 30 Minuten dazu.</p>
<p style="margin:0;font-size:16px;color:#5A6169">Zwischen 20 und 8 Uhr fahren wir nicht raus. Das schreiben wir hin, weil ein Versprechen, das nachts um drei nicht gehalten wird, mehr Schaden anrichtet als eine ehrliche Grenze.</p>
</div>
<div style="background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:24px">
<h2 style="margin:0 0 6px;font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:700">Was es kostet</h2>
<p style="margin:0 0 18px;font-size:16px;color:#5A6169">Alle Preise brutto inkl. 19 % MwSt. Sie hören die Summe am Telefon, bevor wir losfahren.</p>
<table style="border-collapse:collapse;font-size:17px;font-variant-numeric:tabular-nums;width:100%">
<tbody>
<tr style="border-bottom:1px solid #DDE2E7"><td style="padding:10px 0">Anfahrt Stadtgebiet</td><td style="padding:10px 0;text-align:right;font-weight:700">69,00 €</td></tr>
<tr style="border-bottom:1px solid #DDE2E7"><td style="padding:10px 0">Anfahrt Landkreis</td><td style="padding:10px 0;text-align:right;font-weight:700">98,00 €</td></tr>
<tr style="border-bottom:1px solid #DDE2E7"><td style="padding:10px 0">Monteurstunde</td><td style="padding:10px 0;text-align:right;font-weight:700">94,00 €</td></tr>
<tr style="border-bottom:1px solid #DDE2E7"><td style="padding:10px 0">Zuschlag ab 17 Uhr</td><td style="padding:10px 0;text-align:right;font-weight:700">+ 30 %</td></tr>
<tr style="border-bottom:1px solid #DDE2E7"><td style="padding:10px 0">Zuschlag Sa / So / Feiertag</td><td style="padding:10px 0;text-align:right;font-weight:700">+ 50 %</td></tr>
<tr><td style="padding:10px 0">Material</td><td style="padding:10px 0;text-align:right;font-weight:700">nach Aufwand</td></tr>
</tbody>
</table>
<p style="margin:16px 0 0;font-size:15px;color:#5A6169">Ein typischer Wochenendeinsatz mit einer Stunde Arbeit liegt bei rund 240 €. Bleibt es bei der Notabdichtung und Sie beauftragen die Reparatur bei uns, rechnen wir die Anfahrt an.</p>
</div>
</div>
</section>
<section data-screen-label="Wofür Notdienst" style="padding:clamp(36px,4.5vw,64px) 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 20px;font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:700">Wofür Sie uns nachts und am Wochenende rufen sollten</h2>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:26px">
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:14px 16px;font-size:17px;font-weight:600">Rohrbruch, Wasser läuft</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:14px 16px;font-size:17px;font-weight:600">Heizung komplett ausgefallen</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:14px 16px;font-size:17px;font-weight:600">Kein Warmwasser</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:14px 16px;font-size:17px;font-weight:600">Verstopfter Abfluss, Rückstau</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:14px 16px;font-size:17px;font-weight:600">Undichte Leitung, Feuchte in der Wand</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:14px 16px;font-size:17px;font-weight:600">Sicherheitsventil bläst ab</div>
</div>
<div style="background:#FBF0F0;border-left:4px solid #C1121F;border-radius:0 3px 3px 0;padding:20px 22px">
<p style="margin:0 0 8px;font-size:19px;font-weight:700;color:#B0111D">Bei Gasgeruch rufen Sie nicht uns an.</p>
<p style="margin:0 0 10px;font-size:17px">Fenster öffnen. Keinen Lichtschalter, keinen Stecker, kein Telefon in der Wohnung benutzen. Gebäude verlassen und von draußen den Entstördienst des Netzbetreibers anrufen: <a href="tel:+499413601000" style="font-weight:700;color:#B0111D">0941 3601-1000</a> (REWAG, rund um die Uhr). Bei akuter Gefahr die 112.</p>
<p style="margin:0;font-size:16px;color:#5A6169">Danach können Sie uns rufen — wir übernehmen die Reparatur, sobald die Leitung freigegeben ist.</p>
</div>
</div>
</section>
<section data-screen-label="Erste Hilfe" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px)">
<div style="max-width:1000px;margin:0 auto">
<h2 style="margin:0 0 8px;font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:700">Erste Hilfe, bevor wir da sind</h2>
<p style="margin:0 0 26px;font-size:18px;color:#5A6169;max-width:44em">Diese vier Schritte begrenzen in den meisten Fällen den Schaden mehr als jede halbe Stunde schnellere Anfahrt.</p>
<ol style="list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px">
<li style="border-top:3px solid #C1121F;padding-top:14px">
<p style="margin:0 0 6px;font-size:14px;letter-spacing:.1em;color:#5A6169;font-weight:700">SCHRITT 1</p>
<p style="margin:0 0 6px;font-size:18px;font-weight:700">Hauptwasserhahn zudrehen</p>
<p style="margin:0;font-size:16px;color:#5A6169">Er sitzt meist im Keller neben der Wasseruhr, in Wohnungen oft hinter der Revisionsklappe im Bad. Suchen Sie ihn einmal, wenn nichts passiert ist.</p>
</li>
<li style="border-top:3px solid #C1121F;padding-top:14px">
<p style="margin:0 0 6px;font-size:14px;letter-spacing:.1em;color:#5A6169;font-weight:700">SCHRITT 2</p>
<p style="margin:0 0 6px;font-size:18px;font-weight:700">Strom im nassen Bereich abschalten</p>
<p style="margin:0;font-size:16px;color:#5A6169">Sicherung raus, bevor Sie durch stehendes Wasser gehen. Ist der Sicherungskasten selbst nass: nicht anfassen, Netzbetreiber anrufen.</p>
</li>
<li style="border-top:3px solid #C1121F;padding-top:14px">
<p style="margin:0 0 6px;font-size:14px;letter-spacing:.1em;color:#5A6169;font-weight:700">SCHRITT 3</p>
<p style="margin:0 0 6px;font-size:18px;font-weight:700">Fotos für die Versicherung</p>
<p style="margin:0;font-size:16px;color:#5A6169">Vor dem Aufwischen. Schadstelle, Wasserstand, betroffene Möbel. Ohne Bilder wird die Regulierung zäh.</p>
</li>
<li style="border-top:3px solid #C1121F;padding-top:14px">
<p style="margin:0 0 6px;font-size:14px;letter-spacing:.1em;color:#5A6169;font-weight:700">SCHRITT 4</p>
<p style="margin:0 0 6px;font-size:18px;font-weight:700">Wasser aufnehmen, lüften</p>
<p style="margin:0;font-size:16px;color:#5A6169">Je schneller es trocken ist, desto geringer das Schimmelrisiko. Estrich und Wände brauchen später oft trotzdem ein Trocknungsgerät.</p>
</li>
</ol>
<div style="margin-top:32px;background:#0B4F6C;color:#FFFFFF;border-radius:4px;padding:26px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:space-between">
<div>
<p style="margin:0 0 4px;font-size:21px;font-weight:700">Kein Notfall, aber es eilt?</p>
<p style="margin:0;font-size:17px;color:#C6DAE4">Schicken Sie uns ein Foto vom Heizungsdisplay oder vom Typenschild. Oft sagen wir Ihnen am selben Tag, ob es warten kann.</p>
</div>
<div style="display:flex;gap:12px;flex-wrap:wrap">
<a href="https://wa.me/4917612345678?text=Hallo%2C%20ich%20habe%20ein%20Problem%20mit" style="text-decoration:none;background:#FFFFFF;color:#0B4F6C;padding:14px 22px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#EDF1F4">Per WhatsApp schicken</a>
<a href="SHK-Startseite.dc.html#kontakt" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:14px 22px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#A93A17">Rückruf anfordern</a>
</div>
</div>
</div>
</section>
<section data-screen-label="Wartungsvertrag" style="padding:clamp(36px,4.5vw,64px) clamp(16px,3vw,32px);background:#F4F6F8;border-top:1px solid #DDE2E7">
<div style="max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,44px);align-items:center">
<div>
<h2 style="margin:0 0 12px;font-size:clamp(1.375rem,2.4vw,1.75rem);font-weight:700">Wartungsvertrag: Vorrang im Notdienst</h2>
<p style="margin:0 0 14px;font-size:17px;color:#3D4650">Kunden mit Wartungsvertrag kommen im Notdienst zuerst dran und zahlen keinen Anfahrtszuschlag. Die jährliche Wartung Ihrer Heizung kostet 189 € brutto, für Wärmepumpen 229 € — inklusive Sichtprüfung des Kältekreises durch unseren zertifizierten Kältetechniker.</p>
<p style="margin:0;font-size:16px;color:#5A6169">Rund die Hälfte unserer Winter-Notrufe hätte eine Wartung im Herbst verhindert. Das ist kein Verkaufsargument, das ist unsere Einsatzstatistik.</p>
</div>
<div style="display:flex;flex-direction:column;gap:12px">
<a href="SHK-Startseite.dc.html#kontakt" style="text-decoration:none;text-align:center;background:#0B4F6C;color:#FFFFFF;padding:15px 24px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#08384D">Wartungsvertrag anfragen</a>
<a href="SHK-Startseite.dc.html#termin" style="text-decoration:none;text-align:center;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:14px 24px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#EDF1F4">Wartungstermin online buchen</a>
</div>
</div>
</section>
<footer style="background:#08384D;color:#D6E4EB;padding:clamp(36px,4vw,56px) clamp(16px,3vw,32px) 24px">
<div style="max-width:1200px;margin:0 auto;display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start">
<div>
<p style="margin:0 0 8px;font-weight:700;font-size:18px;color:#FFFFFF">BERGER Haustechnik GmbH</p>
<p style="margin:0 0 8px;font-size:16px">Prüfeninger Straße 42 · 93049 Regensburg · <a href="tel:+499411234500" style="color:#FFFFFF;font-weight:700">0941 12345-0</a></p>
<p style="margin:0;font-size:15px;color:#9FC0CF">Meisterbetrieb der Handwerkskammer Niederbayern-Oberpfalz</p>
</div>
<div style="display:flex;gap:20px;flex-wrap:wrap;font-size:16px">
<a href="SHK-Startseite.dc.html" style="color:#D6E4EB;text-decoration:none">Start</a>
<a href="SHK-Waermepumpe.dc.html" style="color:#D6E4EB;text-decoration:none">Wärmepumpe</a>
<a href="SHK-Foerderung.dc.html" style="color:#D6E4EB;text-decoration:none">Förderung</a>
<a href="SHK-Karriere.dc.html" style="color:#D6E4EB;text-decoration:none">Karriere</a>
<a href="SHK-Startseite.dc.html#impressum" style="color:#D6E4EB;text-decoration:none">Impressum</a>
<a href="SHK-Startseite.dc.html#datenschutz" style="color:#D6E4EB;text-decoration:none">Datenschutz</a>
</div>
</div>
</footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;notdienstStatus&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;Automatisch&quot;,&quot;Besetzt&quot;,&quot;Nicht besetzt&quot;],&quot;default&quot;:&quot;Automatisch&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Verhalten&quot;}}">
class Component extends DCLogic {
notdienst = [[8, 20], [17, 20], [17, 20], [17, 20], [17, 20], [17, 20], [8, 20]];
componentDidMount() { this.timer = setInterval(() => this.forceUpdate(), 60000); }
componentWillUnmount() { clearInterval(this.timer); }
renderVals() {
const modus = this.props.notdienstStatus ?? 'Automatisch';
const jetzt = new Date();
const tag = this.notdienst[jetzt.getDay()];
const stunde = jetzt.getHours() + jetzt.getMinutes() / 60;
let da = stunde >= tag[0] && stunde < tag[1];
if (modus === 'Besetzt') da = true;
if (modus === 'Nicht besetzt') da = false;
const morgen = this.notdienst[(jetzt.getDay() + 1) % 7];
const hinweis = da
? 'ein Monteur ist bis ' + tag[1] + ':00 Uhr im Dienst'
: (stunde < tag[0] ? 'heute ' + tag[0] + ':00 Uhr' : 'morgen ' + morgen[0] + ':00 Uhr');
return { erreichbar: da, nichtErreichbar: !da, hinweisZeit: hinweis };
}
}
</script>
</body>
</html>

202
SHK-Pitch.dc.html Normal file
View File

@@ -0,0 +1,202 @@
<!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:wght@400;600;700&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #1A1D21; font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #0B4F6C; }
a:hover { color: #08384D; }
</style>
</helmet>
<x-import component-from-global-scope="deck-stage" from="./deck-stage.js" width="1920" height="1080" hint-size="100%,100%" style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif">
<section data-label="Titel" data-screen-label="01" data-speaker-notes="Einstieg ruhig. Der Satz ist keine Provokation, sondern eine Entlastung: Es liegt nicht am Handwerk, es liegt an einem Werkzeug, das nie richtig gebaut wurde." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#0B4F6C;color:#FFFFFF;padding:110px 130px;display:flex;flex-direction:column;justify-content:space-between">
<p style="margin:0;font-size:30px;letter-spacing:.14em;text-transform:uppercase;color:#9FC0CF;font-weight:700">Website-Analyse · Sanitär, Heizung, Klima · August 2026</p>
<div>
<h1 style="margin:0 0 34px;font-size:132px;line-height:1.02;font-weight:700;letter-spacing:-0.035em;max-width:24ch">Ihre Website arbeitet nicht.</h1>
<p style="margin:0;font-size:52px;line-height:1.25;color:#C6DAE4;max-width:30ch">Das ist die gute Nachricht — bei Ihrem Wettbewerb arbeitet sie nämlich auch nicht.</p>
</div>
<p style="margin:0;font-size:28px;color:#9FC0CF">Grundlage: 25 analysierte SHK-Websites, 500 getestete Handwerkerseiten, geprüfte Marktzahlen</p>
</section>
<section data-label="Der Befund" data-screen-label="02" data-speaker-notes="Die Zahl 2,12 von 9 zuerst wirken lassen. Dann: 69 Seiten mit null Punkten. Das ist kein Ausreißer, das ist die Norm." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#FFFFFF;color:#1A1D21;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<p style="margin:0 0 26px;font-size:30px;letter-spacing:.12em;text-transform:uppercase;color:#5A6169;font-weight:700">Der Befund</p>
<h2 style="margin:0 0 60px;font-size:88px;line-height:1.08;font-weight:700;letter-spacing:-0.03em;max-width:26ch">500 Handwerker-Websites getestet. Durchschnitt: 2,12 von 9 Punkten.</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#DDE2E7;border:1px solid #DDE2E7">
<div style="background:#FFFFFF;padding:44px"><p style="margin:0 0 10px;font-size:110px;font-weight:700;line-height:1;color:#C1121F;font-variant-numeric:tabular-nums">69</p><p style="margin:0;font-size:32px;color:#3D4650">Seiten von 500 erreichten <strong>null Punkte</strong></p></div>
<div style="background:#FFFFFF;padding:44px"><p style="margin:0 0 10px;font-size:110px;font-weight:700;line-height:1;color:#C1121F;font-variant-numeric:tabular-nums">15 %</p><p style="margin:0;font-size:32px;color:#3D4650">beantworten die typischen <strong>Kundenfragen</strong></p></div>
<div style="background:#FFFFFF;padding:44px"><p style="margin:0 0 10px;font-size:110px;font-weight:700;line-height:1;color:#C1121F;font-variant-numeric:tabular-nums">59 %</p><p style="margin:0;font-size:32px;color:#3D4650">zeigen <strong>generischen Branchentext</strong> statt eigener Inhalte</p></div>
</div>
<p style="margin:36px 0 0;font-size:26px;color:#5A6169">Webseiten-Check Handwerk 2025, Sandra &amp; Jörg Mosler · 500 Websites aus 5 Gewerken in München, Frankfurt, Düsseldorf, Leipzig, Hamburg</p>
</section>
<section data-label="Drei Fragen" data-screen-label="03" data-speaker-notes="Hier innehalten und fragen: Welche dieser drei Fragen beantwortet Ihre Seite heute? In 9 von 10 Gesprächen kommt: keine." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#F4F6F8;color:#1A1D21;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<h2 style="margin:0 0 24px;font-size:88px;line-height:1.08;font-weight:700;letter-spacing:-0.03em">Drei Fragen entscheiden. Fast niemand beantwortet sie.</h2>
<p style="margin:0 0 56px;font-size:36px;color:#5A6169;max-width:44ch">Es sind exakt die Fragen, die Ihr Kunde abends um halb neun auf dem Sofa ins Handy tippt.</p>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:28px">
<div style="background:#FFFFFF;border:1px solid #DDE2E7;padding:44px"><p style="margin:0 0 20px;font-size:44px;font-weight:700;line-height:1.2">„Was kostet das?"</p><p style="margin:0 0 18px;font-size:84px;font-weight:700;color:#C1121F;line-height:1;font-variant-numeric:tabular-nums">88 %</p><p style="margin:0;font-size:30px;color:#3D4650">nennen keinerlei Preis — auch keine Spanne</p></div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;padding:44px"><p style="margin:0 0 20px;font-size:44px;font-weight:700;line-height:1.2">„Wie viel Förderung?"</p><p style="margin:0 0 18px;font-size:84px;font-weight:700;color:#C1121F;line-height:1;font-variant-numeric:tabular-nums">89 %</p><p style="margin:0;font-size:30px;color:#3D4650">aller KfW-Heizungszusagen Q1 2026 waren Wärmepumpen — das Thema ist da</p></div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;padding:44px"><p style="margin:0 0 20px;font-size:44px;font-weight:700;line-height:1.2">„Wann könnt ihr?"</p><p style="margin:0 0 18px;font-size:84px;font-weight:700;color:#C1121F;line-height:1;font-variant-numeric:tabular-nums">0,8 %</p><p style="margin:0;font-size:30px;color:#3D4650">bieten echte Online-Terminbuchung — 4 von 500</p></div>
</div>
</section>
<section data-label="Die 48-Prozent-Lücke" data-screen-label="04" data-speaker-notes="Diese Folie ist der Wendepunkt im Gespräch. Fragen Sie: Wer geht bei Ihnen ans Telefon, wenn alle auf der Baustelle sind? Danach kommt die Rückrufbox von selbst zur Sprache." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#C1121F;color:#FFFFFF;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<p style="margin:0 0 26px;font-size:30px;letter-spacing:.12em;text-transform:uppercase;color:#FFC9CE;font-weight:700">Die teuerste Lücke sitzt hinter der Website</p>
<p style="margin:0 0 16px;font-size:250px;font-weight:700;line-height:0.9;letter-spacing:-0.04em;font-variant-numeric:tabular-nums">48 %</p>
<h2 style="margin:0 0 34px;font-size:66px;line-height:1.12;font-weight:700;letter-spacing:-0.02em;max-width:26ch">aller eingehenden Anrufe im Handwerk erreichen niemanden.</h2>
<div style="display:flex;gap:80px;flex-wrap:wrap">
<p style="margin:0;font-size:30px;max-width:34ch;color:#FFDDE0">Eine Website, die mehr Anrufe erzeugt, ohne die Erreichbarkeit zu lösen, verdoppelt nur den Verlust. Deshalb schaltet unsere Vorlage den Haupt-Button nach Feierabend automatisch von „Anrufen" auf „Rückruf mit Wunschzeitfenster".</p>
<p style="margin:0;font-size:25px;color:#FFC9CE;max-width:26ch">Invoca 2026, über 70 Mio. ausgewertete Anrufe aus neun Home-Services-Branchen inkl. Heizung und Sanitär. Keine der 25 analysierten SHK-Websites hat diese Umschaltung.</p>
</div>
</section>
<section data-label="Bewertungen" data-screen-label="05" data-speaker-notes="Wenn der Betrieb gute Bewertungen hat: Handy rausholen und die Google-Zahl gemeinsam anschauen. Der Moment, in dem der Chef merkt, dass er das Asset schon besitzt, verkauft den Rest." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#FFFFFF;color:#1A1D21;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<h2 style="margin:0 0 18px;font-size:74px;line-height:1.08;font-weight:700;letter-spacing:-0.03em;max-width:24ch">Ihr stärkstes Verkaufsargument liegt bei Google und nicht auf Ihrer Seite.</h2>
<p style="margin:0 0 38px;font-size:32px;color:#5A6169;max-width:48ch">Nur 16 Prozent der Handwerkerseiten zeigen ihre externen Bewertungen. Im analysierten Sample gab es Betriebe mit 4,7 bis 5,0 Sternen, die davon auf der eigenen Website kein Wort verlieren.</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#DDE2E7;border:1px solid #DDE2E7">
<div style="background:#FBF0F0;padding:38px">
<p style="margin:0 0 14px;font-size:26px;letter-spacing:.1em;text-transform:uppercase;color:#B0111D;font-weight:700">So sieht es heute aus</p>
<p style="margin:0 0 12px;font-size:40px;font-weight:700;color:#5A6169">„Qualität · Zuverlässigkeit · Erfahrung"</p>
<p style="margin:0;font-size:28px;color:#3D4650">Steht so auf jeder zweiten Seite dieser Branche. Ein Satz, den niemand glaubt und niemand prüfen kann.</p>
</div>
<div style="background:#EFF7F1;padding:38px">
<p style="margin:0 0 14px;font-size:26px;letter-spacing:.1em;text-transform:uppercase;color:#0F6B33;font-weight:700">So sieht es danach aus</p>
<p style="margin:0 0 6px;font-size:36px;color:#C9451C;letter-spacing:4px">★★★★★</p>
<p style="margin:0 0 8px;font-size:46px;font-weight:700;font-variant-numeric:tabular-nums">4,9 von 5</p>
<p style="margin:0;font-size:28px;color:#3D4650">aus 187 Google-Bewertungen · Stand 12.08.2026 · verlinkt aufs echte Profil. Kostet nichts außer der Entscheidung, es hinzuschreiben.</p>
</div>
</div>
</section>
<section data-label="Marktlage" data-screen-label="06" data-speaker-notes="Wichtigster Satz der Folie: Sie brauchen nicht mehr Anfragen, sondern die richtigen. Damit ist das qualifizierende Formular verkauft, bevor jemand Reibungsverlust einwendet." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#0B4F6C;color:#FFFFFF;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<p style="margin:0 0 26px;font-size:30px;letter-spacing:.12em;text-transform:uppercase;color:#9FC0CF;font-weight:700">Marktlage 2026</p>
<h2 style="margin:0 0 44px;font-size:76px;line-height:1.08;font-weight:700;letter-spacing:-0.03em;max-width:26ch">Der Markt wächst. Die Auftragsbücher werden trotzdem dünner.</h2>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22);margin-bottom:36px">
<div style="background:#0B4F6C;padding:34px"><p style="margin:0 0 8px;font-size:66px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums">+40 %</p><p style="margin:0;font-size:26px;color:#C6DAE4">Wärmepumpen H1 2026 — 194.500 Stück</p></div>
<div style="background:#0B4F6C;padding:34px"><p style="margin:0 0 8px;font-size:66px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums">11,5</p><p style="margin:0;font-size:26px;color:#C6DAE4">Wochen Auftragsbestand — vier Wochen weniger als im Vorjahr</p></div>
<div style="background:#0B4F6C;padding:34px"><p style="margin:0 0 8px;font-size:66px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums">33 %</p><p style="margin:0;font-size:26px;color:#C6DAE4">der Betriebe mit Umsatzrückgang, nur 14 % mit Wachstum</p></div>
<div style="background:#0B4F6C;padding:34px"><p style="margin:0 0 8px;font-size:66px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums">83 %</p><p style="margin:0;font-size:26px;color:#C6DAE4">des SHK-Umsatzes kommen aus Modernisierung im Bestand</p></div>
</div>
<p style="margin:0 0 12px;font-size:40px;font-weight:700;max-width:44ch">Deshalb bauen wir keine Anfrage-Maschine, sondern eine Qualifizierungs-Maschine.</p>
<p style="margin:0;font-size:26px;color:#9FC0CF">BDH 11.08.2026 · ZVSHK Frühjahrsumfrage 22.04.2026</p>
</section>
<section data-label="Digital-Player" data-screen-label="07" data-speaker-notes="Nicht als Bedrohung erzählen, sondern als Bauanleitung. thermondo und Enpal machen nichts, was ein Meisterbetrieb nicht auch kann — sie beantworten nur die drei Fragen." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#FFFFFF;color:#1A1D21;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<h2 style="margin:0 0 18px;font-size:74px;line-height:1.08;font-weight:700;letter-spacing:-0.03em;max-width:26ch">thermondo und Enpal gewinnen nicht mit besserem Handwerk.</h2>
<p style="margin:0 0 36px;font-size:32px;color:#5A6169;max-width:50ch">Sie gewinnen damit, dass sie die drei Fragen beantworten, die 88 Prozent der Handwerkerseiten offenlassen. Das ist übertragbar — und Sie haben zwei Vorteile, die die nie bekommen.</p>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:28px">
<div style="background:#F4F6F8;border:1px solid #DDE2E7;padding:38px">
<p style="margin:0 0 16px;font-size:26px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Was die machen</p>
<ul style="margin:0;padding-left:30px;font-size:29px;line-height:1.4;color:#3D4650;display:flex;flex-direction:column;gap:10px">
<li>„Wärmepumpe ab 8.700 € nach Förderung" — Preis vor dem Kontakt</li>
<li>„Ersparnis berechnen, unter 2 Minuten" — Rechner statt Formular</li>
<li>Trustpilot 4,4 aus 20.116 Bewertungen, direkt im Hero</li>
<li>Festpreis statt Kostenvoranschlag</li>
</ul>
</div>
<div style="background:#0B4F6C;color:#FFFFFF;padding:38px">
<p style="margin:0 0 16px;font-size:26px;letter-spacing:.1em;text-transform:uppercase;color:#9FC0CF;font-weight:700">Was nur Sie haben</p>
<p style="margin:0 0 18px;font-size:40px;font-weight:700;line-height:1.2">Echte lokale Google-Bewertungen. Und ein Gesicht vor Ort.</p>
<p style="margin:0;font-size:29px;color:#C6DAE4">Beides liegt bei den meisten SHK-Websites brach. Genau daraus bauen wir die Seite: die Preis-, Förder- und Termintransparenz der Digitalanbieter — mit dem Betrieb von nebenan.</p>
</div>
</div>
</section>
<section data-label="Was wir bauen" data-screen-label="08" data-speaker-notes="Sechs Punkte, jeder mit der Zahl dahinter, warum er wirkt. Nicht alle vorlesen — zwei auswählen, die zum Betrieb passen." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#F4F6F8;color:#1A1D21;padding:100px 130px;display:flex;flex-direction:column;justify-content:center">
<p style="margin:0 0 22px;font-size:30px;letter-spacing:.12em;text-transform:uppercase;color:#5A6169;font-weight:700">Was wir bauen</p>
<h2 style="margin:0 0 40px;font-size:74px;line-height:1.08;font-weight:700;letter-spacing:-0.03em">Sechs Dinge, die im Wettbewerbsumfeld niemand hat</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#DDE2E7;border:1px solid #DDE2E7">
<div style="background:#FFFFFF;padding:40px"><p style="margin:0 0 12px;font-size:34px;font-weight:700">Bewertung im Hero</p><p style="margin:0;font-size:28px;color:#3D4650">Sterne, Anzahl und Standdatum über der Falzkante, verlinkt aufs Google-Profil. Nur 16 % zeigen das.</p></div>
<div style="background:#FFFFFF;padding:40px"><p style="margin:0 0 12px;font-size:34px;font-weight:700">CTA nach Uhrzeit</p><p style="margin:0;font-size:28px;color:#3D4650">Während der Öffnungszeiten „Anrufen", danach automatisch „Rückruf mit Zeitfenster". Antwort auf die 48-%-Lücke.</p></div>
<div style="background:#FFFFFF;padding:40px"><p style="margin:0 0 12px;font-size:34px;font-weight:700">Rechner statt Formular</p><p style="margin:0;font-size:28px;color:#3D4650">Fünf Klicks, Ergebnis als Spanne — auch ohne Kontaktdaten. Der Nutzer bekommt etwas, statt etwas herzugeben.</p></div>
<div style="background:#FFFFFF;padding:40px"><p style="margin:0 0 12px;font-size:34px;font-weight:700">Vorher/Nachher-Regler</p><p style="margin:0;font-size:28px;color:#3D4650">Im gesamten Sample von 25 Seiten gibt es keinen einzigen — in einem Gewerk, dessen Kern die optische Verwandlung ist.</p></div>
<div style="background:#FFFFFF;padding:40px"><p style="margin:0 0 12px;font-size:34px;font-weight:700">Eine Seite je Leistung</p><p style="margin:0;font-size:28px;color:#3D4650">Stärkster lokal-organischer Rankingfaktor 2026 — Platz 1 von 187 (Whitespark).</p></div>
<div style="background:#FFFFFF;padding:40px"><p style="margin:0 0 12px;font-size:34px;font-weight:700">Ehrliche Preise</p><p style="margin:0;font-size:28px;color:#3D4650">Spannen, Verrechnungssätze, Notdienstzuschläge — brutto und vorher. Kostet nichts außer Mut.</p></div>
</div>
</section>
<section data-label="Karriere" data-screen-label="09" data-speaker-notes="Hier entscheidet sich oft das Budget. Eine gewonnene Fachkraft ist für den Betrieb mehr wert und leichter zurechenbar als ein einzelner Kundenlead." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#FFFFFF;color:#1A1D21;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<p style="margin:0 0 22px;font-size:30px;letter-spacing:.12em;text-transform:uppercase;color:#5A6169;font-weight:700">Der zweite Funnel</p>
<h2 style="margin:0 0 40px;font-size:76px;line-height:1.08;font-weight:700;letter-spacing:-0.03em;max-width:26ch">Ihre Website muss zwei Zielgruppen gewinnen. Die zweite fehlt fast überall.</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#DDE2E7;border:1px solid #DDE2E7;margin-bottom:36px">
<div style="background:#FFFFFF;padding:38px"><p style="margin:0 0 10px;font-size:92px;font-weight:700;line-height:1;color:#0B4F6C;font-variant-numeric:tabular-nums">83 %</p><p style="margin:0;font-size:28px;color:#3D4650">der Handwerksbetriebe spüren den <strong>Azubi-Mangel</strong></p></div>
<div style="background:#FFFFFF;padding:38px"><p style="margin:0 0 10px;font-size:92px;font-weight:700;line-height:1;color:#0B4F6C;font-variant-numeric:tabular-nums">48,8 %</p><p style="margin:0;font-size:28px;color:#3D4650">der SHK-Betriebe haben <strong>offene Stellen</strong></p></div>
<div style="background:#FBF0F0;padding:38px"><p style="margin:0 0 10px;font-size:92px;font-weight:700;line-height:1;color:#C1121F;font-variant-numeric:tabular-nums">53 %</p><p style="margin:0;font-size:28px;color:#3D4650">der Websites haben <strong>keine einzige Stellenanzeige</strong></p></div>
</div>
<p style="margin:0;font-size:34px;line-height:1.35;max-width:52ch">Azubi und Fachkraft sind verschiedene Zielgruppen mit verschiedener Sprache. Wir bauen beides getrennt — plus eine Bewerbung mit vier Feldern und ohne Anschreiben.</p>
</section>
<section data-label="Rechtliches" data-screen-label="10" data-speaker-notes="Nüchtern vortragen, nicht mit Angst arbeiten. Der OS-Link ist auf sehr vielen Bestandsseiten noch drin — das lässt sich im Termin in dreißig Sekunden gemeinsam prüfen." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#F4F6F8;color:#1A1D21;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<h2 style="margin:0 0 24px;font-size:88px;line-height:1.08;font-weight:700;letter-spacing:-0.03em">Drei Dinge, die heute abmahnbar sind</h2>
<p style="margin:0 0 52px;font-size:36px;color:#5A6169;max-width:50ch">Wir prüfen das im Erstgespräch gemeinsam an Ihrer bestehenden Seite. Das dauert fünf Minuten und ist unabhängig davon, ob wir zusammenarbeiten.</p>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:28px">
<div style="background:#FFFFFF;border-left:10px solid #C1121F;padding:40px"><p style="margin:0 0 14px;font-size:36px;font-weight:700">Der OS-Plattform-Link</p><p style="margin:0;font-size:30px;color:#3D4650">War bis 19.07.2025 Pflicht, seit dem 20.07.2025 verweist er auf eine abgeschaltete Stelle — und ist damit potenziell irreführend. Steht noch in sehr vielen Impressen.</p></div>
<div style="background:#FFFFFF;border-left:10px solid #C1121F;padding:40px"><p style="margin:0 0 14px;font-size:36px;font-weight:700">Google Fonts extern</p><p style="margin:0;font-size:30px;color:#3D4650">Überträgt die IP-Adresse Ihrer Besucher, bevor irgendjemand etwas anklickt. LG München I, 20.01.2022: 100 € Schadensersatz. Gilt genauso für CDN-Icons und -Skripte.</p></div>
<div style="background:#FFFFFF;border-left:10px solid #C1121F;padding:40px"><p style="margin:0 0 14px;font-size:36px;font-weight:700">Cookie-Banner ohne Ablehnen</p><p style="margin:0;font-size:30px;color:#3D4650">Ablehnen muss auf der ersten Ebene gleichwertig sichtbar sein. Das BayLDA prüft das automatisiert — in einer Aktion über 350 Websites.</p></div>
</div>
</section>
<section data-label="Scorecard" data-screen-label="11" data-speaker-notes="Hier die ausgefüllte Scorecard des Interessenten zeigen. Wenn sie noch nicht ausgefüllt ist: jetzt gemeinsam machen, das ist der stärkste Teil des Termins." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#0B4F6C;color:#FFFFFF;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<p style="margin:0 0 26px;font-size:30px;letter-spacing:.12em;text-transform:uppercase;color:#9FC0CF;font-weight:700">Wo Sie heute stehen</p>
<h2 style="margin:0 0 52px;font-size:88px;line-height:1.08;font-weight:700;letter-spacing:-0.03em">40 Kriterien, 80 Punkte, keine Meinung</h2>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22);margin-bottom:44px">
<div style="background:#0B4F6C;padding:40px"><p style="margin:0 0 10px;font-size:38px;font-weight:700;font-variant-numeric:tabular-nums">0 – 20</p><p style="margin:0;font-size:28px;color:#C6DAE4">Branchendurchschnitt. Hier liegt der Median der 500 getesteten Seiten.</p></div>
<div style="background:#0B4F6C;padding:40px"><p style="margin:0 0 10px;font-size:38px;font-weight:700;font-variant-numeric:tabular-nums">21 – 40</p><p style="margin:0;font-size:28px;color:#C6DAE4">Solide, aber ohne Wettbewerbsvorteil.</p></div>
<div style="background:#0B4F6C;padding:40px"><p style="margin:0 0 10px;font-size:38px;font-weight:700;font-variant-numeric:tabular-nums">41 – 60</p><p style="margin:0;font-size:28px;color:#C6DAE4">Gehört zu den besten 10 % der Nische.</p></div>
<div style="background:#FFFFFF;color:#0B4F6C;padding:40px"><p style="margin:0 0 10px;font-size:38px;font-weight:700;font-variant-numeric:tabular-nums">61 – 80</p><p style="margin:0;font-size:28px;color:#3D4650">Zielkorridor. Das ist der Abnahmemaßstab für unser Projekt.</p></div>
</div>
<p style="margin:0;font-size:34px;line-height:1.4;max-width:56ch">Die sechs Kriterien im Bereich Recht sind K.o.-Punkte, keine Punktzahl. Die kommen ins Angebot, egal wie der Rest ausfällt.</p>
</section>
<section data-label="Ablauf" data-screen-label="12" data-speaker-notes="Phase 1 betonen: Bewertungsakquise startet sofort und läuft parallel. Wenn der Betrieb unter 20 Bewertungen hat, ist das wichtiger als der Relaunch." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#FFFFFF;color:#1A1D21;padding:100px 130px;display:flex;flex-direction:column;justify-content:center">
<h2 style="margin:0 0 22px;font-size:80px;line-height:1.08;font-weight:700;letter-spacing:-0.03em">Ablauf: rund neun Wochen</h2>
<p style="margin:0 0 48px;font-size:34px;color:#5A6169;max-width:54ch">Ihr Aufwand liegt bei etwa zwei Tagen: ein Tag Fotos und Interviews, ein Tag Textfreigabe.</p>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#DDE2E7;border:1px solid #DDE2E7">
<div style="background:#F4F6F8;padding:36px"><p style="margin:0 0 8px;font-size:24px;letter-spacing:.1em;color:#5A6169;font-weight:700">WOCHE 1</p><p style="margin:0 0 8px;font-size:32px;font-weight:700">Bestandsanalyse</p><p style="margin:0;font-size:26px;color:#3D4650">Scorecard, Wettbewerbsvergleich, Rechts-Check der alten Seite</p></div>
<div style="background:#FBF0F0;padding:36px"><p style="margin:0 0 8px;font-size:24px;letter-spacing:.1em;color:#B0111D;font-weight:700">AB SOFORT, DAUERHAFT</p><p style="margin:0 0 8px;font-size:32px;font-weight:700">Bewertungsakquise</p><p style="margin:0;font-size:26px;color:#3D4650">QR auf der Rechnung, Kärtchen im Fahrzeug, Google-Profil optimieren</p></div>
<div style="background:#F4F6F8;padding:36px"><p style="margin:0 0 8px;font-size:24px;letter-spacing:.1em;color:#5A6169;font-weight:700">WOCHE 2</p><p style="margin:0 0 8px;font-size:32px;font-weight:700">Fotos &amp; Interviews</p><p style="margin:0;font-size:26px;color:#3D4650">Ein Tag vor Ort: Team, Baustelle, Vorher/Nachher, fünf Kundenstimmen</p></div>
<div style="background:#F4F6F8;padding:36px"><p style="margin:0 0 8px;font-size:24px;letter-spacing:.1em;color:#5A6169;font-weight:700">WOCHE 3–4</p><p style="margin:0 0 8px;font-size:32px;font-weight:700">Struktur &amp; Texte</p><p style="margin:0;font-size:26px;color:#3D4650">Seitenarchitektur, Texte, Preisspannen, Stellenanzeigen</p></div>
<div style="background:#F4F6F8;padding:36px"><p style="margin:0 0 8px;font-size:24px;letter-spacing:.1em;color:#5A6169;font-weight:700">WOCHE 5–7</p><p style="margin:0 0 8px;font-size:32px;font-weight:700">Umsetzung</p><p style="margin:0;font-size:26px;color:#3D4650">Seiten, Rechner, Formulare, Terminbuchung, Öffnungslogik</p></div>
<div style="background:#F4F6F8;padding:36px"><p style="margin:0 0 8px;font-size:24px;letter-spacing:.1em;color:#5A6169;font-weight:700">PARALLEL</p><p style="margin:0 0 8px;font-size:32px;font-weight:700">Rechtstexte</p><p style="margin:0;font-size:26px;color:#3D4650">Impressum, Datenschutz, Einwilligungsformulare — mit anwaltlicher Prüfung</p></div>
<div style="background:#F4F6F8;padding:36px"><p style="margin:0 0 8px;font-size:24px;letter-spacing:.1em;color:#5A6169;font-weight:700">WOCHE 8</p><p style="margin:0 0 8px;font-size:32px;font-weight:700">Tests</p><p style="margin:0;font-size:26px;color:#3D4650">Formulare, Tastaturbedienung, Ladezeit, Weiterleitungsplan</p></div>
<div style="background:#0B4F6C;color:#FFFFFF;padding:36px"><p style="margin:0 0 8px;font-size:24px;letter-spacing:.1em;color:#9FC0CF;font-weight:700">WOCHE 9</p><p style="margin:0 0 8px;font-size:32px;font-weight:700">Launch &amp; Messung</p><p style="margin:0;font-size:26px;color:#C6DAE4">Anrufklicks nach Uhrzeit — der Report, der zeigt, wann niemand da ist</p></div>
</div>
</section>
<section data-label="Was wir brauchen" data-screen-label="13" data-speaker-notes="Ehrlich sagen: Ohne diese Sachen startet das Projekt nicht. Jeder optionale Punkt fehlt am Ende — und dann landen wieder Stock-Fotos auf der Seite." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#F4F6F8;color:#1A1D21;padding:110px 130px;display:flex;flex-direction:column;justify-content:center">
<h2 style="margin:0 0 24px;font-size:88px;line-height:1.08;font-weight:700;letter-spacing:-0.03em">Was wir von Ihnen brauchen</h2>
<p style="margin:0 0 52px;font-size:36px;color:#5A6169;max-width:52ch">Nichts davon ist optional. Was optional ist, fehlt am Ende — das ist die Erfahrung aus jedem Projekt in dieser Branche.</p>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:28px">
<div style="background:#FFFFFF;border:1px solid #DDE2E7;padding:40px"><p style="margin:0 0 14px;font-size:34px;font-weight:700">Zwei Tage Zeit</p><p style="margin:0;font-size:28px;color:#3D4650">Ein Tag Fotos und Kundeninterviews, ein Tag Textfreigabe. Mehr brauchen wir nicht.</p></div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;padding:40px"><p style="margin:0 0 14px;font-size:34px;font-weight:700">Ehrliche Zahlen</p><p style="margin:0;font-size:28px;color:#3D4650">Preisspannen, Verrechnungssätze, echte Notdienstzeiten, aktuelle Vorlaufzeit.</p></div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;padding:40px"><p style="margin:0 0 14px;font-size:34px;font-weight:700">Zugang zum Google-Profil</p><p style="margin:0;font-size:28px;color:#3D4650">Inhaberschaft, nicht nur Verwalterrechte. Ohne das Profil geht die Hälfte der Wirkung verloren.</p></div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;padding:40px"><p style="margin:0 0 14px;font-size:34px;font-weight:700">Einwilligungen</p><p style="margin:0;font-size:28px;color:#3D4650">Unterschriften Ihrer Mitarbeiter für Fotos und Ihrer Kunden für Innenaufnahmen. Formulare liefern wir mit.</p></div>
</div>
</section>
<section data-label="Nächster Schritt" data-screen-label="14" data-speaker-notes="Nur eine Frage stellen und dann still sein: Sollen wir Ihre Seite gemeinsam durch die Scorecard laufen lassen? Das ist der kleinste mögliche nächste Schritt." style="font-family:'Source Sans 3','Segoe UI',system-ui,sans-serif;background:#0B4F6C;color:#FFFFFF;padding:110px 130px;display:flex;flex-direction:column;justify-content:space-between">
<p style="margin:0;font-size:30px;letter-spacing:.14em;text-transform:uppercase;color:#9FC0CF;font-weight:700">Nächster Schritt</p>
<div>
<h2 style="margin:0 0 34px;font-size:110px;line-height:1.05;font-weight:700;letter-spacing:-0.035em;max-width:24ch">Lassen Sie uns Ihre Seite gemeinsam durch die Scorecard laufen.</h2>
<p style="margin:0;font-size:44px;line-height:1.3;color:#C6DAE4;max-width:38ch">Zwanzig Minuten, am Bildschirm, kostenlos. Am Ende wissen Sie, wo Sie stehen — auch wenn wir nicht zusammenarbeiten.</p>
</div>
<p style="margin:0;font-size:28px;color:#9FC0CF">Alle Zahlen dieses Vortrags sind belegt: Mosler 2025 · Bitkom 2025 · Invoca 2026 · BDH 08/2026 · ZVSHK 04/2026 · Whitespark 2026 · BrightLocal 2026 (US-Daten)</p>
</section>
</x-import>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{}"></script>
</body>
</html>

373
SHK-Rechner.dc.html Normal file
View File

@@ -0,0 +1,373 @@
<!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&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #F4F6F8; 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; }
a:hover { color: #08384D; }
:focus-visible { outline: 3px solid #C9451C; outline-offset: 2px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
</style>
</helmet>
<div style="background:#F4F6F8;min-height:100vh">
<header style="background:#FFFFFF;border-bottom:1px solid #DDE2E7">
<div style="max-width:1100px;margin:0 auto;padding:12px clamp(16px,3vw,32px);display:flex;align-items:center;justify-content:space-between;gap:20px">
<a href="SHK-Startseite.dc.html" style="display:flex;align-items:center;gap:11px;text-decoration:none">
<span style="width:34px;height:34px;border-radius:3px;background:#0B4F6C;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px">B</span>
<span style="font-weight:700;font-size:17px;letter-spacing:.02em;color:#1A1D21">BERGER Haustechnik</span>
</a>
<a href="tel:+499411234500" style="color:#0B4F6C;text-decoration:none;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums">0941 12345-0</a>
</div>
</header>
<section data-screen-label="Rechner" style="padding:clamp(28px,4vw,52px) clamp(16px,3vw,32px) clamp(40px,5vw,72px)">
<div style="max-width:820px;margin:0 auto">
<h1 style="margin:0 0 10px;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.14;font-weight:700;letter-spacing:-0.02em">Preisfinder</h1>
<p style="margin:0 0 26px;font-size:18px;color:#5A6169;max-width:40em">Fünf Klicks, kein Tippen, keine Registrierung. Das Ergebnis sehen Sie in jedem Fall — auch wenn Sie uns keine Kontaktdaten geben.</p>
<div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px">
<sc-for list="{{ werkzeuge }}" as="w" hint-placeholder-count="3">
<button type="button" onClick="{{ w.waehlen }}" style="{{ w.stil }}">{{ w.label }}</button>
</sc-for>
</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;overflow:hidden">
<div style="padding:22px clamp(20px,3.5vw,32px) 18px;border-bottom:1px solid #EDF1F4">
<p style="margin:0;font-size:21px;font-weight:700">{{ toolTitel }}</p>
<p style="margin:0;font-size:16px;color:#5A6169">{{ toolUnter }}</p>
</div>
<div style="height:4px;background:#EDF1F4">
<div style="height:4px;background:#C9451C;width:{{ fortschritt }};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:700">{{ frageNr }}</p>
<h2 style="margin:0 0 6px;font-size:clamp(1.375rem,2.6vw,1.75rem);font-weight:700;letter-spacing:-0.01em">{{ frageTitel }}</h2>
<p style="margin:0 0 24px;font-size:16px;color:#5A6169">{{ frageHinweis }}</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px">
<sc-for list="{{ optionen }}" as="o" hint-placeholder-count="4">
<button type="button" onClick="{{ o.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:3px" style-hover="border-color:#0B4F6C;background:#F4F6F8">
<span style="font-size:18px;font-weight:700;color:#1A1D21">{{ o.label }}</span>
<span style="font-size:15px;color:#5A6169">{{ o.zusatz }}</span>
</button>
</sc-for>
</div>
<sc-if value="{{ kannZurueck }}" hint-placeholder-val="{{ false }}">
<button type="button" onClick="{{ zurueck }}" style="margin-top:24px;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)">
<div style="display:flex;gap:12px;align-items:flex-start;border-left:4px solid {{ ampelFarbe }};background:#F4F6F8;padding:16px 18px;border-radius:0 3px 3px 0;margin-bottom:26px">
<span style="width:12px;height:12px;border-radius:50%;background:{{ ampelFarbe }};margin-top:8px;flex:none"></span>
<div><p style="margin:0 0 4px;font-weight:700;font-size:18px">{{ ampelTitel }}</p><p style="margin:0;font-size:16px;color:#3D4650">{{ ampelText }}</p></div>
</div>
<p style="margin:0 0 4px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#5A6169;font-weight:700">{{ ergebnisLabel }}</p>
<p style="margin:0 0 4px;font-size:clamp(2rem,5vw,3rem);font-weight:700;color:#0B4F6C;line-height:1.05;font-variant-numeric:tabular-nums">{{ ergebnisWert }}</p>
<p style="margin:0 0 24px;font-size:16px;color:#5A6169">{{ ergebnisUnter }}</p>
<div style="border:1px solid #DDE2E7;border-radius:4px;overflow:hidden;margin-bottom:24px">
<sc-for list="{{ zeilen }}" as="z" hint-placeholder-count="3">
<div style="display:flex;justify-content:space-between;gap:18px;padding:13px 18px;border-bottom:1px solid #EDF1F4;font-size:17px">
<span style="color:#5A6169">{{ z.label }}</span>
<span style="font-weight:700;font-variant-numeric:tabular-nums;text-align:right">{{ z.wert }}</span>
</div>
</sc-for>
</div>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px">
<a href="SHK-Startseite.dc.html#termin" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:15px 26px;border-radius:3px;font-weight:700;font-size:17px" style-hover="background:#A93A17">Beratungstermin buchen →</a>
<a href="tel:+499411234500" style="text-decoration:none;background:#FFFFFF;color:#0B4F6C;border:1.5px solid #0B4F6C;padding:14px 24px;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>
<div style="background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:18px 20px;margin-bottom:18px">
<p style="margin:0 0 10px;font-size:17px;font-weight:700">Ergebnis per E-Mail — freiwillig</p>
<div style="display:flex;gap:10px;flex-wrap:wrap">
<input type="email" placeholder="ihre@email.de" style="flex:1 1 220px;padding:12px 14px;border:1px solid #B9C2CA;border-radius:3px;font-size:17px" />
<button type="button" style="background:#0B4F6C;color:#FFFFFF;border:none;padding:12px 22px;border-radius:3px;font-weight:700;font-size:17px;cursor:pointer" style-hover="background:#08384D">Schicken</button>
</div>
<label style="display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#5A6169;margin-top:12px">
<input type="checkbox" style="margin-top:4px;width:17px;height:17px;flex:none" />
<span>Ich bin einverstanden, dass Berger Haustechnik mich zu diesem Ergebnis einmalig kontaktiert. Jederzeit widerrufbar, kein Newsletter.</span>
</label>
</div>
<p style="margin:0;font-size:15px;color:#5A6169">{{ vorbehalt }}</p>
</div>
</sc-if>
</div>
<p style="margin:22px 0 0;font-size:16px;color:#5A6169">Lieber direkt sprechen? <a href="SHK-Startseite.dc.html#kontakt">Rückruf mit Wunschzeitfenster anfordern</a> — wir melden uns innerhalb von 24 Stunden.</p>
</div>
</section>
<footer style="background:#08384D;color:#D6E4EB;padding:clamp(32px,4vw,48px) clamp(16px,3vw,32px) 22px">
<div style="max-width:1100px;margin:0 auto;display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start">
<p style="margin:0;font-size:16px">BERGER Haustechnik GmbH · Prüfeninger Straße 42 · 93049 Regensburg · <a href="tel:+499411234500" style="color:#FFFFFF;font-weight:700">0941 12345-0</a></p>
<div style="display:flex;gap:20px;flex-wrap:wrap;font-size:16px">
<a href="SHK-Startseite.dc.html" style="color:#D6E4EB;text-decoration:none">Start</a>
<a href="SHK-Foerderung.dc.html" style="color:#D6E4EB;text-decoration:none">Förderung</a>
<a href="SHK-Startseite.dc.html#impressum" style="color:#D6E4EB;text-decoration:none">Impressum</a>
<a href="SHK-Startseite.dc.html#datenschutz" style="color:#D6E4EB;text-decoration:none">Datenschutz</a>
</div>
</div>
</footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;startWerkzeug&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;Heizungsrechner&quot;,&quot;Badrechner&quot;,&quot;Fördercheck&quot;],&quot;default&quot;:&quot;Heizungsrechner&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Ansicht&quot;}}">
class Component extends DCLogic {
state = { tool: null, schritt: 0, a: {} };
tabBasis = 'padding:11px 20px;border-radius:100px;border:1.5px solid #DDE2E7;background:#FFFFFF;color:#5A6169;font-size:16px;font-weight:600;cursor:pointer';
tabAktiv = 'padding:11px 20px;border-radius:100px;border:1.5px solid #0B4F6C;background:#0B4F6C;color:#FFFFFF;font-size:16px;font-weight:600;cursor:pointer';
tools = {
heizung: {
label: 'Heizungsrechner', titel: 'Heizungsrechner',
unter: 'Wärmepumpe im Bestandsgebäude — Größenordnung inklusive Fördereinschätzung',
fragen: [
{ k: 'typ', titel: 'Um welches Gebäude geht es?', hinweis: 'Ein Klick genügt — Sie tippen hier nichts.', o: [
{ 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: 'mit eigener Heizung', f: 0.8 }] },
{ k: 'flaeche', titel: 'Wie groß ist die beheizte Wohnfläche?', hinweis: 'Eine Schätzung reicht. Die Heizlast rechnen wir später genau.', o: [
{ label: 'bis 120 m²', zusatz: '', sp: [19000, 26000] },
{ label: '120 – 180 m²', zusatz: 'häufigster Fall', sp: [23000, 31000] },
{ label: '180 – 250 m²', zusatz: '', sp: [28000, 38000] },
{ label: 'über 250 m²', zusatz: '', sp: [34000, 48000] }] },
{ k: 'baujahr', titel: 'Aus welchem Jahr stammt das Gebäude?', hinweis: 'Das Baujahr sagt am meisten über den Dämmzustand aus.', o: [
{ label: 'vor 1978', zusatz: 'meist ungedämmt', f: 1.18, alt: true },
{ label: '1978 – 1994', zusatz: 'erste Wärmeschutzverordnungen', f: 1.08 },
{ label: '1995 – 2010', zusatz: '', f: 1 },
{ label: 'ab 2011 oder saniert', zusatz: '', f: 0.94 }] },
{ k: 'bestand', titel: 'Was heizt heute?', hinweis: 'Entscheidet über den Klimageschwindigkeitsbonus von 16 Prozent.', o: [
{ label: 'Gasheizung', zusatz: 'älter als 20 Jahre', bonus: true },
{ label: 'Ölheizung', zusatz: 'beliebiges Alter', bonus: true },
{ label: 'Nachtspeicher', zusatz: 'oder Kohle', bonus: true },
{ label: 'Nichts davon', zusatz: 'Neubau oder junge Anlage', bonus: false }] },
{ k: 'flaechen', titel: 'Heizkörper oder Fußbodenheizung?', hinweis: 'Das entscheidet über die nötige Vorlauftemperatur.', o: [
{ label: 'Klassische Heizkörper', zusatz: 'an den Wänden', f: 1.06, hk: true },
{ label: 'Fußbodenheizung', zusatz: 'überall', f: 0.96 },
{ label: 'Gemischt', zusatz: 'teils, teils', f: 1 },
{ label: 'Weiß ich nicht', zusatz: 'schauen wir uns an', f: 1 }] }
]
},
bad: {
label: 'Badrechner', titel: 'Badrechner',
unter: 'Komplettbad, Teilsanierung oder barrierefreier Umbau — Budget und Bauzeit',
fragen: [
{ k: 'groesse', titel: 'Wie groß ist das Bad?', hinweis: 'Ungefähr genügt — messen Sie nicht extra nach.', o: [
{ label: 'bis 5 m²', zusatz: 'kleines Bad oder Gäste-WC', sp: [11000, 17000] },
{ label: '6 – 8 m²', zusatz: 'typisches Familienbad', sp: [15000, 23000] },
{ label: '9 – 12 m²', zusatz: '', sp: [21000, 31000] },
{ label: 'über 12 m²', zusatz: '', sp: [28000, 42000] }] },
{ k: 'umfang', titel: 'Wie viel soll gemacht werden?', hinweis: 'Komplett heißt: alles raus, neue Leitungen, neuer Estrich.', o: [
{ label: 'Komplettsanierung', zusatz: 'alles neu, inkl. Leitungen', f: 1, zeit: '10 – 14 Arbeitstage', ohne: '7 – 9 Tage' },
{ label: 'Teilsanierung', zusatz: 'Dusche, WC, Waschtisch', f: 0.65, zeit: '6 – 9 Arbeitstage', ohne: '4 – 5 Tage' },
{ label: 'Nur die Dusche', zusatz: 'Wanne raus, Dusche rein', f: 0.35, zeit: '3 – 5 Arbeitstage', ohne: '2 – 3 Tage' },
{ label: 'Nur Sanitärobjekte', zusatz: 'ohne Fliesenarbeiten', f: 0.22, zeit: '2 – 3 Arbeitstage', ohne: '1 Tag' }] },
{ k: 'niveau', titel: 'Welche Ausstattung schwebt Ihnen vor?', hinweis: 'Die Preisspanne innerhalb einer Klasse ist groß — das ist der größte Hebel.', o: [
{ label: 'Solide Markenware', zusatz: 'Duravit, Grohe Standardlinien', f: 1 },
{ label: 'Gehoben', zusatz: 'Designarmaturen, große Formate', f: 1.28 },
{ label: 'Premium', zusatz: 'Naturstein, Sonderanfertigungen', f: 1.6 },
{ label: 'Weiß ich noch nicht', zusatz: 'zeigen wir Ihnen in der Ausstellung', f: 1.1 }] },
{ k: 'barrierefrei', titel: 'Soll das Bad altersgerecht werden?', hinweis: 'Bodengleiche Dusche, Haltegriffe, unterfahrbarer Waschtisch.', o: [
{ label: 'Ja, mit Pflegegrad', zusatz: 'Zuschuss der Pflegekasse möglich', f: 1.08, pflege: true },
{ label: 'Ja, vorsorglich', zusatz: 'ohne Pflegegrad', f: 1.08 },
{ label: 'Nein', zusatz: '', f: 1 },
{ label: 'Nur bodengleiche Dusche', zusatz: '', f: 1.04 }] },
{ k: 'fliesen', titel: 'Wie sollen die Fliesen aussehen?', hinweis: 'Format und Verlegeart bewegen den Preis stärker als der Fliesenpreis selbst.', o: [
{ label: 'Boden und Wände komplett', zusatz: 'Standardformat', f: 1 },
{ label: 'Boden, Wände teilweise', zusatz: 'Rest verputzt', f: 0.92 },
{ label: 'Großformat', zusatz: 'ab 60 × 120 cm', f: 1.12 },
{ label: 'Weiß ich noch nicht', zusatz: '', f: 1 }] }
]
},
foerderung: {
label: 'Fördercheck', titel: 'Fördercheck',
unter: 'KfW 458, Stand 21.07.2026 — Fördersatz und Antragsreihenfolge',
fragen: [
{ k: 'gebaeude', titel: 'Um welches Gebäude geht es?', hinweis: 'Die förderfähigen Kosten hängen an der Zahl der Wohneinheiten.', o: [
{ label: 'Ein- oder Zweifamilienhaus', zusatz: 'förderfähig bis 28.000 €', max: 28000 },
{ label: 'Mehrfamilienhaus', zusatz: '+ 15.000 € je WE 2–6', max: 28000 },
{ label: 'Eigentumswohnung', zusatz: 'eigene Heizung in der Wohnung', max: 28000 },
{ label: 'Gewerbeobjekt', zusatz: 'andere Programme, wir beraten', max: 28000, gewerbe: true }] },
{ k: 'nutzung', titel: 'Bewohnen Sie das Gebäude selbst?', hinweis: 'Klimageschwindigkeits- und Einkommensbonus gibt es nur für Selbstnutzende.', o: [
{ label: 'Ja, selbstgenutzt', zusatz: '', selbst: true },
{ label: 'Nein, vermietet', zusatz: 'nur Grundförderung', selbst: false }] },
{ k: 'anlage', titel: 'Was wird ersetzt?', hinweis: 'Der Klimageschwindigkeitsbonus setzt eine alte Anlage voraus.', o: [
{ label: 'Gasheizung ab 20 Jahre', zusatz: '', bonus: true },
{ label: 'Ölheizung', zusatz: 'jedes Alter', bonus: true },
{ label: 'Nachtspeicher oder Kohle', zusatz: '', bonus: true },
{ label: 'Neubau / junge Gasheizung', zusatz: 'kein Bonus', bonus: false }] },
{ k: 'einkommen', titel: 'Zu versteuerndes Haushaltseinkommen', hinweis: 'Aus dem Steuerbescheid des zweitvorangegangenen Jahres.', o: [
{ label: 'bis 30.000 €', zusatz: '', wert: 25000 },
{ label: '30.000 – 40.000 €', zusatz: '', wert: 35000 },
{ label: '40.000 – 50.000 €', zusatz: '', wert: 45000 },
{ label: 'über 50.000 €', zusatz: '', wert: 60000 },
{ label: 'Weiß ich nicht', zusatz: 'wir zeigen Ihnen die Spanne', wert: null }] },
{ k: 'kinder', titel: 'Wie viele minderjährige Kinder leben im Haushalt?', hinweis: 'Je Kind werden 10.000 € vom anrechenbaren Einkommen abgezogen.', o: [
{ label: 'Keine', zusatz: '', n: 0 },
{ label: 'Ein Kind', zusatz: '', n: 1 },
{ label: 'Zwei Kinder', zusatz: '', n: 2 },
{ label: 'Drei oder mehr', zusatz: '', n: 3 }] }
]
}
};
euro(n) { return n.toLocaleString('de-DE') + ' €'; }
runde(n, s) { return Math.round(n / s) * s; }
waehle(k, o) {
this.setState(s => ({ a: Object.assign({}, s.a, { [k]: o }), schritt: s.schritt + 1 }));
}
ergebnisHeizung(a) {
const sp = (a.flaeche && a.flaeche.sp) || [23000, 31000];
const f = ((a.typ && a.typ.f) || 1) * ((a.baujahr && a.baujahr.f) || 1) * ((a.flaechen && a.flaechen.f) || 1);
const von = this.runde(sp[0] * f, 500), bis = this.runde(sp[1] * f, 500);
const satz = (a.bestand && a.bestand.bonus) ? 46 : 30;
const nach = n => this.runde(n - (satz / 100) * Math.min(n, 28000), 100);
const streng = a.baujahr && a.baujahr.alt && a.flaechen && a.flaechen.hk;
return {
label: 'Luft-Wasser-Wärmepumpe, komplett installiert',
wert: this.euro(von) + ' – ' + this.euro(bis),
unter: 'brutto inkl. MwSt., vor Förderung',
ampel: streng
? { farbe: '#A9760F', titel: 'Machbar — mit etwas Vorbereitung', text: 'Baujahr vor 1978 mit klassischen Heizkörpern: Wir messen zuerst die nötige Vorlauftemperatur. Meist reicht der Tausch von zwei bis vier Heizkörpern, die ebenfalls förderfähig sind.' }
: { farbe: '#0F6B33', titel: 'Gute Voraussetzungen', text: 'Nach Ihren Angaben spricht nichts gegen eine Wärmepumpe. Vor dem Angebot rechnen wir die Heizlast Raum für Raum — daran hängt, ob die Anlage später sparsam läuft.' },
zeilen: [
{ label: 'Erwarteter Fördersatz', wert: satz + ' %' },
{ label: 'Eigenanteil nach Förderung', wert: this.euro(nach(von)) + ' – ' + this.euro(nach(bis)) },
{ label: 'Bauzeit vor Ort', wert: '2 – 4 Arbeitstage' },
{ label: 'Ohne Warmwasser', wert: 'höchstens 1 Tag' },
{ label: 'Aktuelle Vorlaufzeit', wert: 'rund 7 Wochen' }
],
vorbehalt: 'Unverbindliche Orientierung auf Basis Ihrer Angaben, brutto inkl. MwSt. Ein belastbares Angebot erstellen wir nach Besichtigung und Heizlastberechnung. Förderangaben Stand 21.07.2026; die Entscheidung trifft ausschließlich die KfW.'
};
}
ergebnisBad(a) {
const sp = (a.groesse && a.groesse.sp) || [15000, 23000];
const f = ((a.umfang && a.umfang.f) || 1) * ((a.niveau && a.niveau.f) || 1) * ((a.barrierefrei && a.barrierefrei.f) || 1) * ((a.fliesen && a.fliesen.f) || 1);
const von = this.runde(sp[0] * f, 500), bis = this.runde(sp[1] * f, 500);
const pflege = a.barrierefrei && a.barrierefrei.pflege;
const zeilen = [
{ label: 'Bauzeit', wert: (a.umfang && a.umfang.zeit) || '10 – 14 Arbeitstage' },
{ label: 'Davon Bad nicht nutzbar', wert: (a.umfang && a.umfang.ohne) || '7 – 9 Tage' },
{ label: 'Festpreis vor Auftragsbeginn', wert: 'ja' },
{ label: 'Aktuelle Vorlaufzeit', wert: 'rund 7 Wochen' }
];
if (pflege) zeilen.splice(2, 0, { label: 'Zuschuss Pflegekasse (§ 40 SGB XI)', wert: 'bis 4.180 €' });
return {
label: 'Badsanierung, alle Gewerke aus einer Hand',
wert: this.euro(von) + ' – ' + this.euro(bis),
unter: 'brutto inkl. MwSt., inkl. Fliesen-, Elektro- und Malerarbeiten',
ampel: pflege
? { farbe: '#0F6B33', titel: 'Zuschuss der Pflegekasse prüfen', text: 'Mit Pflegegrad zahlt die Pflegekasse nach § 40 SGB XI bis zu 4.180 € je Maßnahme — bei zwei pflegebedürftigen Personen im Haushalt entsprechend mehr. Den Antrag stellen Sie vor Beginn; wir liefern den Kostenvoranschlag in der Form, die die Kasse braucht.' }
: { farbe: '#0F6B33', titel: 'Realistische Größenordnung', text: 'Die Spanne bildet ab, was ein Bad dieser Größe in dieser Ausstattung in Regensburg tatsächlich kostet. Nach oben offen ist praktisch nur die Ausstattung — nach unten ist bei ordentlicher Arbeit wenig Luft.' },
zeilen: zeilen,
vorbehalt: 'Unverbindliche Orientierung auf Basis Ihrer Angaben, brutto inkl. MwSt. Wir messen vor Ort auf und erstellen daraus ein Festpreisangebot. Überraschungen gibt es fast nur bei Altbauten mit unbekannter Leitungsführung — darauf weisen wir bei der Besichtigung hin.'
};
}
ergebnisFoerderung(a) {
const max = (a.gebaeude && a.gebaeude.max) || 28000;
const selbst = a.nutzung ? a.nutzung.selbst : true;
const klima = selbst && a.anlage && a.anlage.bonus ? 16 : 0;
const kinder = (a.kinder && a.kinder.n) || 0;
const roh = a.einkommen ? a.einkommen.wert : null;
let satzVon, satzBis, hinweisEink;
if (roh === null || !selbst) {
satzVon = Math.min(30 + klima, 70);
satzBis = selbst ? Math.min(30 + klima + 40, 70) : 30;
hinweisEink = selbst ? 'noch offen — bringen Sie den Steuerbescheid mit' : 'entfällt bei Vermietung';
} else {
const ang = Math.max(0, roh - 10000 * kinder);
const bonus = ang <= 30000 ? 40 : (ang <= 40000 ? 30 : (ang <= 50000 ? 10 : 0));
satzVon = Math.min(30 + klima + bonus, 70);
satzBis = satzVon;
hinweisEink = bonus + ' % (anrechenbar ' + this.euro(ang) + ')';
}
const zuschussVon = this.runde((satzVon / 100) * max, 100);
const zuschussBis = this.runde((satzBis / 100) * max, 100);
const wert = satzVon === satzBis ? satzVon + ' %' : satzVon + ' – ' + satzBis + ' %';
const zuschuss = satzVon === satzBis ? this.euro(zuschussVon) : this.euro(zuschussVon) + ' – ' + this.euro(zuschussBis);
return {
label: 'Erwarteter Fördersatz KfW 458',
wert: wert,
unter: 'auf höchstens ' + this.euro(max) + ' förderfähige Kosten (erste Wohneinheit)',
ampel: { farbe: '#B0111D', titel: 'Reihenfolge beachten — sonst ist die Förderung weg',
text: 'Der Antrag muss vor der Auftragsvergabe gestellt sein. Wir geben Ihnen ein Angebot unter Fördervorbehalt, Sie beantragen, und erst nach der Zusage erteilen Sie den Auftrag. Ab 01.02.2027 sinkt der Klimageschwindigkeitsbonus halbjährlich um 4 Prozentpunkte.' },
zeilen: [
{ label: 'Grundförderung', wert: '30 %' },
{ label: 'Klimageschwindigkeitsbonus', wert: klima ? '16 %' : 'nicht anwendbar' },
{ label: 'Einkommensbonus', wert: hinweisEink },
{ label: 'Möglicher Zuschuss', wert: zuschuss },
{ label: 'Antrag vor Auftragsvergabe', wert: 'zwingend' }
],
vorbehalt: 'Angaben zur Förderung geben den Stand vom 21.07.2026 wieder und dienen der ersten Orientierung. Wir leisten keine Rechts-, Steuer- oder Finanzberatung. Die Förderentscheidung trifft ausschließlich die KfW; ein Rechtsanspruch besteht nicht. Verbindlich sind allein die jeweils gültigen Programmunterlagen.'
};
}
renderVals() {
const s = this.state;
const key = s.tool || ({ Heizungsrechner: 'heizung', Badrechner: 'bad', 'Fördercheck': 'foerderung' })[this.props.startWerkzeug] || 'heizung';
const tool = this.tools[key];
const frage = tool.fragen[s.schritt];
const erg = frage ? null : (key === 'heizung' ? this.ergebnisHeizung(s.a) : (key === 'bad' ? this.ergebnisBad(s.a) : this.ergebnisFoerderung(s.a)));
return {
werkzeuge: Object.keys(this.tools).map(id => ({
label: this.tools[id].label,
stil: id === key ? this.tabAktiv : this.tabBasis,
waehlen: () => this.setState({ tool: id, schritt: 0, a: {} })
})),
toolTitel: tool.titel,
toolUnter: tool.unter,
fortschritt: Math.round((s.schritt / tool.fragen.length) * 100) + '%',
zeigeFrage: !!frage,
zeigeErgebnis: !frage,
frageNr: 'Frage ' + Math.min(s.schritt + 1, tool.fragen.length) + ' von ' + tool.fragen.length,
frageTitel: frage ? frage.titel : '',
frageHinweis: frage ? frage.hinweis : '',
optionen: frage ? frage.o.map(o => Object.assign({ zusatz: '' }, o, { waehlen: () => this.waehle(frage.k, o) })) : [],
kannZurueck: s.schritt > 0,
zurueck: () => this.setState(x => ({ schritt: Math.max(0, x.schritt - 1) })),
neuStarten: () => this.setState({ schritt: 0, a: {} }),
ergebnisLabel: erg ? erg.label : '',
ergebnisWert: erg ? erg.wert : '',
ergebnisUnter: erg ? erg.unter : '',
ampelFarbe: erg ? erg.ampel.farbe : '#0F6B33',
ampelTitel: erg ? erg.ampel.titel : '',
ampelText: erg ? erg.ampel.text : '',
zeilen: erg ? erg.zeilen : [],
vorbehalt: erg ? erg.vorbehalt : ''
};
}
}
</script>
</body>
</html>

287
SHK-Scorecard.dc.html Normal file
View File

@@ -0,0 +1,287 @@
<!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:wght@400;600;700&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #F4F6F8; color: #1A1D21; font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: #0B4F6C; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #08384D; }
:focus-visible { outline: 3px solid #C9451C; outline-offset: 2px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
</style>
</helmet>
<div style="background:#F4F6F8;min-height:100vh">
<header style="background:#0B4F6C;color:#FFFFFF;padding:clamp(24px,3.5vw,44px) clamp(16px,3vw,32px)">
<div style="max-width:1280px;margin:0 auto">
<p style="margin:0 0 10px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#9FC0CF;font-weight:700">Akquise-Werkzeug · SHK-Website-Analyse</p>
<h1 style="margin:0 0 12px;font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.14;font-weight:700;letter-spacing:-0.02em">Scorecard: 40 Kriterien, 80 Punkte</h1>
<p style="margin:0 0 22px;font-size:18px;color:#C6DAE4;max-width:52em">Für das Erstgespräch: Bestandsseite des Interessenten durchgehen, Punkte vergeben, Ergebnis zeigen. Der Branchenschnitt liegt bei 24 Prozent — die meisten Gespräche verkaufen sich hier von selbst.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end">
<label style="display:flex;flex-direction:column;gap:5px;font-size:14px;color:#9FC0CF;font-weight:600">Geprüfte Website
<input type="text" value="{{ domain }}" onChange="{{ setzeDomain }}" placeholder="beispiel-shk.de" style="padding:10px 13px;border:1px solid rgba(255,255,255,.3);border-radius:3px;background:rgba(255,255,255,.12);color:#FFFFFF;font-size:17px;font-weight:600;min-width:240px" />
</label>
<label style="display:flex;flex-direction:column;gap:5px;font-size:14px;color:#9FC0CF;font-weight:600">Geprüft am
<input type="text" value="{{ datum }}" onChange="{{ setzeDatum }}" placeholder="16.08.2026" style="padding:10px 13px;border:1px solid rgba(255,255,255,.3);border-radius:3px;background:rgba(255,255,255,.12);color:#FFFFFF;font-size:17px;font-weight:600;min-width:150px" />
</label>
<button type="button" onClick="{{ zuruecksetzen }}" style="padding:11px 20px;border-radius:3px;border:1.5px solid rgba(255,255,255,.5);background:none;color:#FFFFFF;font-size:16px;font-weight:600;cursor:pointer" style-hover="background:rgba(255,255,255,.14)">Alles zurücksetzen</button>
</div>
</div>
</header>
<div style="max-width:1280px;margin:0 auto;padding:clamp(24px,3vw,40px) clamp(16px,3vw,32px) clamp(40px,5vw,72px);display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(20px,3vw,32px);align-items:start">
<div style="display:flex;flex-direction:column;gap:20px;min-width:0">
<sc-for list="{{ bloecke }}" as="b" hint-placeholder-count="6">
<section style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;overflow:hidden">
<div style="padding:16px 20px;background:#F4F6F8;border-bottom:1px solid #DDE2E7;display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap">
<div>
<p style="margin:0;font-size:19px;font-weight:700">{{ b.titel }}</p>
<p style="margin:0;font-size:15px;color:#5A6169">{{ b.unter }}</p>
</div>
<p style="margin:0;font-size:17px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums;white-space:nowrap">{{ b.stand }}</p>
</div>
<sc-for list="{{ b.zeilen }}" as="z" hint-placeholder-count="8">
<div style="display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid #EDF1F4;flex-wrap:wrap">
<p style="margin:0;font-size:16px;flex:1 1 260px;min-width:0"><strong style="color:#5A6169;font-variant-numeric:tabular-nums">{{ z.id }}</strong>&nbsp;&nbsp;{{ z.text }}</p>
<div style="display:flex;gap:6px;flex:none">
<sc-for list="{{ z.optionen }}" as="o" hint-placeholder-count="3">
<button type="button" onClick="{{ o.waehlen }}" aria-label="{{ o.aria }}" style="{{ o.stil }}">{{ o.label }}</button>
</sc-for>
</div>
</div>
</sc-for>
</section>
</sc-for>
</div>
<aside style="position:sticky;top:20px;display:flex;flex-direction:column;gap:16px">
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:24px">
<p style="margin:0 0 4px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Gesamtergebnis</p>
<p style="margin:0 0 2px;font-size:clamp(2.5rem,6vw,3.5rem);font-weight:700;line-height:1;color:#0B4F6C;font-variant-numeric:tabular-nums">{{ gesamt }}</p>
<p style="margin:0 0 18px;font-size:17px;color:#5A6169">von 80 Punkten · {{ prozent }}</p>
<div style="height:10px;background:#EDF1F4;border-radius:100px;overflow:hidden;margin-bottom:8px">
<div style="height:10px;background:{{ bandFarbe }};width:{{ balken }};transition:width .3s ease"></div>
</div>
<p style="margin:0 0 18px;font-size:18px;font-weight:700;color:{{ bandFarbe }}">{{ bandTitel }}</p>
<p style="margin:0;font-size:16px;color:#3D4650">{{ bandText }}</p>
</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:24px">
<p style="margin:0 0 16px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Nach Bereich</p>
<div style="display:flex;flex-direction:column;gap:14px">
<sc-for list="{{ bloecke }}" as="b" hint-placeholder-count="6">
<div>
<div style="display:flex;justify-content:space-between;gap:12px;font-size:16px;margin-bottom:5px">
<span style="font-weight:600">{{ b.kurz }}</span>
<span style="font-variant-numeric:tabular-nums;color:#5A6169">{{ b.stand }}</span>
</div>
<div style="height:7px;background:#EDF1F4;border-radius:100px;overflow:hidden">
<div style="height:7px;background:#0B4F6C;width:{{ b.balken }};transition:width .3s ease"></div>
</div>
</div>
</sc-for>
</div>
</div>
<sc-if value="{{ hatKo }}" hint-placeholder-val="{{ false }}">
<div style="background:#FBF0F0;border:1px solid #E8B9BD;border-left:4px solid #C1121F;border-radius:0 5px 5px 0;padding:22px">
<p style="margin:0 0 8px;font-size:18px;font-weight:700;color:#B0111D">K.-o.-Punkte im Bereich Recht</p>
<p style="margin:0 0 12px;font-size:16px;color:#3D4650">Diese Punkte sind keine Optimierung, sondern Abmahnrisiko. Sie gehören ins Angebot, egal wie der Rest ausfällt.</p>
<ul style="margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:16px">
<sc-for list="{{ koListe }}" as="k" hint-placeholder-count="3">
<li>{{ k.text }}</li>
</sc-for>
</ul>
</div>
</sc-if>
<sc-if value="{{ hatLuecken }}" hint-placeholder-val="{{ false }}">
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:24px">
<p style="margin:0 0 6px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Gesprächsstoff</p>
<p style="margin:0 0 14px;font-size:16px;color:#3D4650">{{ lueckenZahl }} Kriterien stehen auf null. Die ersten fünf sind meist die, bei denen der Interessent im Gespräch selbst nickt.</p>
<ol style="margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:16px">
<sc-for list="{{ luecken }}" as="l" hint-placeholder-count="5">
<li><strong style="color:#5A6169;font-variant-numeric:tabular-nums">{{ l.id }}</strong> {{ l.text }}</li>
</sc-for>
</ol>
</div>
</sc-if>
<p style="margin:0;font-size:15px;color:#5A6169">Eingaben bleiben in diesem Browser gespeichert — Sie können das Fenster während des Termins schließen. <a href="SHK-Startseite.dc.html">Zur Muster-Website</a> · <a href="SHK-Pitch.dc.html">Zum Pitch-Deck</a></p>
</aside>
</div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{}">
class Component extends DCLogic {
state = { p: {}, domain: '', datum: '' };
katalog = [
{ kurz: 'A · Trust', titel: 'A · Erster Eindruck & Trust', unter: 'max. 16 Punkte', zeilen: [
['A1', 'Sterne und Bewertungsanzahl oberhalb der Falzkante sichtbar'],
['A2', 'Gesicht: Inhaber- oder Teamfoto im oberen Seitendrittel'],
['A3', 'Headline nennt Nutzen und Ort, nicht nur den Firmennamen'],
['A4', 'Echte eigene Fotos statt Stock — Baustelle, Team, Fahrzeug'],
['A5', 'Mindestens drei namentliche Kundenstimmen mit Ort'],
['A6', 'Siegel und Zertifikate mit Erklärung, was sie bedeuten'],
['A7', 'Konkrete Zahlen statt Adjektive: Projekte, Jahre, Reaktionszeit'],
['A8', 'Externe Validierung: Award, Presse, prüfbare Registriernummer']
] },
{ kurz: 'B · Conversion', titel: 'B · Erreichbarkeit & Conversion', unter: 'max. 16 Punkte', zeilen: [
['B1', 'Telefonnummer als tel:-Link, sticky auf Mobil'],
['B2', 'Öffnungszeiten sichtbar, idealerweise mit Live-Status'],
['B3', 'Notdienst-Kanal getrennt und prominent, mit ehrlichen Zeiten'],
['B4', 'WhatsApp-Kanal vorhanden'],
['B5', 'Rückrufformular mit Feld „Wann sind Sie erreichbar?"'],
['B6', 'Getrennte Anfragestrecken je Gewerk statt Universalformular'],
['B7', 'Mehrstufiger Konfigurator oder Rechner als eigener CTA'],
['B8', 'Echte Online-Terminbuchung — Kalender, nicht Formular']
] },
{ kurz: 'C · Inhalt', titel: 'C · Inhalt & Struktur', unter: 'max. 16 Punkte', zeilen: [
['C1', 'Eigene URL je Leistung, nicht nur Startseiten-Sektionen'],
['C2', 'Navigation in Laiensprache, höchstens sieben Hauptpunkte'],
['C3', 'Wärmepumpe als eigenes Themencluster inklusive Förderung'],
['C4', 'Eigene Förderseite mit Standdatum und Disclaimer'],
['C5', 'Referenzen mit Vorher/Nachher'],
['C6', 'FAQ, das echte Kundenfragen beantwortet'],
['C7', 'Kosten- oder Preisorientierung in irgendeiner Form vorhanden'],
['C8', 'Standortseiten mit ortsspezifischer Substanz']
] },
{ kurz: 'D · Karriere', titel: 'D · Karriere', unter: 'max. 8 Punkte', zeilen: [
['D1', 'Karriere im Hauptmenü'],
['D2', '„Ausbildung" getrennt von „Jobs", in eigener Ansprache'],
['D3', 'Konkrete offene Stellen statt „Initiativbewerbung willkommen"'],
['D4', 'Quick-Bewerbung: höchstens vier Felder, keine Anschreiben-Pflicht']
] },
{ kurz: 'E · Technik', titel: 'E · Technik & Auffindbarkeit', unter: 'max. 12 Punkte', zeilen: [
['E1', 'Core Web Vitals mobil grün: LCP ≤ 2,5 s · INP ≤ 200 ms · CLS ≤ 0,1'],
['E2', 'Alle Assets lokal gehostet — Fonts, Icons, JavaScript'],
['E3', 'Schema Plumber + HVACBusiness, Service je Leistung, BreadcrumbList'],
['E4', 'Google-Unternehmensprofil vollständig, NAP identisch zur Website'],
['E5', 'Title und H1 mit Leistung und Ort auf jeder Leistungsseite'],
['E6', 'Barrierefreiheits-Baseline: Kontrast, Tastatur, Alt-Texte, Fokus']
] },
{ kurz: 'F · Recht', titel: 'F · Recht — jedes Kriterium ist K.o.', unter: 'max. 12 Punkte', ko: true, zeilen: [
['F1', 'OS-Plattform-Link entfernt (Pflicht seit 20.07.2025)'],
['F2', 'Impressum vollständig inkl. HWK, Berufsbezeichnung, HwO-Link, USt-IdNr.'],
['F3', 'Consent-Banner mit gleichwertigem Ablehnen-Button auf erster Ebene'],
['F4', 'Kein einwilligungspflichtiges Skript vor der Einwilligung'],
['F5', 'Bewertungen mit Hinweis zur Echtheitsprüfung (§ 5b Abs. 3 UWG)'],
['F6', 'Preise brutto inkl. MwSt., Förderaussagen mit Disclaimer und Standdatum']
] }
];
stufen = [
{ w: 0, label: '0', aria: 'fehlt', farbe: '#C1121F' },
{ w: 1, label: '1', aria: 'teilweise', farbe: '#A9760F' },
{ w: 2, label: '2', aria: 'gut gelöst', farbe: '#0F6B33' }
];
componentDidMount() {
try {
const roh = window.localStorage.getItem('shk-scorecard-v1');
if (roh) this.setState(JSON.parse(roh));
} catch (e) { /* kein Speicher verfügbar */ }
}
sichern(next) {
try { window.localStorage.setItem('shk-scorecard-v1', JSON.stringify(next)); } catch (e) { /* ignorieren */ }
}
setzen(id, wert) {
this.setState(s => {
const p = Object.assign({}, s.p);
if (p[id] === wert) { delete p[id]; } else { p[id] = wert; }
const next = { p: p, domain: s.domain, datum: s.datum };
this.sichern(next);
return { p: p };
});
}
feld(name, wert) {
this.setState(s => {
const next = { p: s.p, domain: s.domain, datum: s.datum };
next[name] = wert;
this.sichern(next);
return { [name]: wert };
});
}
knopf(aktiv, farbe) {
return aktiv
? 'width:40px;height:38px;border-radius:3px;border:1.5px solid ' + farbe + ';background:' + farbe + ';color:#FFFFFF;font-size:16px;font-weight:700;cursor:pointer'
: 'width:40px;height:38px;border-radius:3px;border:1.5px solid #DDE2E7;background:#FFFFFF;color:#8A939C;font-size:16px;font-weight:700;cursor:pointer';
}
renderVals() {
const p = this.state.p;
let gesamt = 0, maxGesamt = 0;
const ko = [], luecken = [];
const bloecke = this.katalog.map(b => {
let punkte = 0;
const max = b.zeilen.length * 2;
const zeilen = b.zeilen.map(z => {
const id = z[0], text = z[1];
const wert = p[id];
if (typeof wert === 'number') punkte += wert;
if (wert === 0) {
if (b.ko) ko.push({ text: id + ' — ' + text });
else luecken.push({ id: id, text: text });
}
return {
id: id, text: text,
optionen: this.stufen.map(st => ({
label: st.label,
aria: id + ': ' + st.aria,
stil: this.knopf(wert === st.w, st.farbe),
waehlen: () => this.setzen(id, st.w)
}))
};
});
gesamt += punkte; maxGesamt += max;
return { kurz: b.kurz, titel: b.titel, unter: b.unter, zeilen: zeilen,
stand: punkte + ' / ' + max, balken: Math.round((punkte / max) * 100) + '%' };
});
let band = { titel: 'Branchendurchschnitt', farbe: '#C1121F', text: 'Hier liegt der Median der 500 im Webseiten-Check Handwerk 2025 getesteten Seiten. Diese Website leistet aktuell nichts, was ein Wettbewerber nicht auch hätte — der Neubau rechnet sich am schnellsten.' };
if (gesamt > 20) band = { titel: 'Solide, aber ohne Wettbewerbsvorteil', farbe: '#A9760F', text: 'Das Handwerkliche stimmt, es fehlt der Grund, warum jemand hier anfragt statt beim Nachbarbetrieb. Meist reichen drei bis fünf gezielte Ergänzungen statt eines Relaunches.' };
if (gesamt > 40) band = { titel: 'Unter den besten 10 % der Nische', farbe: '#0F6B33', text: 'Diese Seite ist besser als fast alles im Wettbewerbsumfeld. Sinnvoll sind jetzt Conversion-Details: Erreichbarkeitslogik, Rechner, Terminbuchung — und die Rechtspunkte.' };
if (gesamt > 60) band = { titel: 'Zielkorridor der Vorlage', farbe: '#0F6B33', text: 'Sehr gut. Ab hier bringt Wartung mehr als Umbau: Fördersätze, Zertifikatslaufzeiten, Stellenanzeigen und Bewertungsakquise aktuell halten.' };
return {
bloecke: bloecke,
gesamt: gesamt,
prozent: Math.round((gesamt / maxGesamt) * 100) + ' %',
balken: Math.round((gesamt / maxGesamt) * 100) + '%',
bandTitel: band.titel, bandFarbe: band.farbe, bandText: band.text,
hatKo: ko.length > 0, koListe: ko,
hatLuecken: luecken.length > 0,
lueckenZahl: luecken.length + ko.length,
luecken: luecken.slice(0, 5),
domain: this.state.domain,
datum: this.state.datum,
setzeDomain: e => this.feld('domain', e.target.value),
setzeDatum: e => this.feld('datum', e.target.value),
zuruecksetzen: () => { this.sichern({ p: {}, domain: '', datum: '' }); this.setState({ p: {}, domain: '', datum: '' }); }
};
}
}
</script>
</body>
</html>

776
SHK-Startseite.dc.html Normal file
View File

@@ -0,0 +1,776 @@
<!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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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="{&quot;ausbaustufe&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;BASIS&quot;,&quot;STANDARD&quot;,&quot;PRO&quot;],&quot;default&quot;:&quot;PRO&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Ausbaustufe&quot;},&quot;oeffnungsStatus&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;Automatisch&quot;,&quot;Geöffnet&quot;,&quot;Geschlossen&quot;],&quot;default&quot;:&quot;Automatisch&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Verhalten&quot;},&quot;notdienstLeiste&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Module&quot;},&quot;bewertungImHero&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Module&quot;}}">
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>

110
SHK-Uebersicht.dc.html Normal file
View File

@@ -0,0 +1,110 @@
<!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:wght@400;600;700&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #F4F6F8; 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; }
a:hover { color: #08384D; }
:focus-visible { outline: 3px solid #C9451C; outline-offset: 2px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
</style>
</helmet>
<div style="background:#F4F6F8;min-height:100vh">
<header style="background:#0B4F6C;color:#FFFFFF;padding:clamp(36px,5vw,72px) clamp(16px,3vw,32px)">
<div style="max-width:1100px;margin:0 auto">
<p style="margin:0 0 14px;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:#9FC0CF;font-weight:700">SHK-Website-Vorlage · Ausbaustufe PRO · Musterbetrieb</p>
<h1 style="margin:0 0 16px;font-size:clamp(2rem,4vw,3.25rem);line-height:1.1;font-weight:700;letter-spacing:-0.025em;max-width:22ch">Berger Haustechnik — der klickbare Prototyp</h1>
<p style="margin:0;font-size:clamp(1.0625rem,1.6vw,1.375rem);color:#C6DAE4;max-width:46em">Acht Artefakte aus dem Bauplan: fünf Seiten der Website, die Rechner-Strecke, das Akquise-Werkzeug und das Pitch-Deck. Alles verlinkt, alles bedienbar. Musterbetrieb ist ein fiktiver 14-Mann-Betrieb in Regensburg — Name, Zahlen und Fotos sind Platzhalter.</p>
</div>
</header>
<main style="max-width:1100px;margin:0 auto;padding:clamp(28px,4vw,52px) clamp(16px,3vw,32px) clamp(48px,6vw,88px)">
<p style="margin:0 0 16px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#5A6169;font-weight:700">Die Website</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:44px">
<a href="SHK-Startseite.dc.html" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:26px;display:flex;flex-direction:column;gap:8px" style-hover="border-color:#0B4F6C">
<span style="font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Bauplan B · Sektion 0–12</span>
<span style="font-size:24px;font-weight:700">Startseite</span>
<span style="font-size:16px;color:#5A6169">Notdienst-Leiste, Bewertung im Hero, Live-Öffnungsstatus mit CTA-Umschaltung, Vorher/Nachher-Regler, Rechner-Modal, Online-Terminbuchung, Rückrufformular mit Erreichbarkeitsfeld.</span>
<span style="margin-top:auto;padding-top:12px;font-weight:700;color:#0B4F6C">Öffnen →</span>
</a>
<a href="SHK-Waermepumpe.dc.html" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:26px;display:flex;flex-direction:column;gap:8px" style-hover="border-color:#0B4F6C">
<span style="font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Bauplan C · 10.1 und 10.2</span>
<span style="font-size:24px;font-weight:700">Leistungsseite Wärmepumpe</span>
<span style="font-size:16px;color:#5A6169">Das Master-Template für alle Leistungsseiten: Eignungs-Check mit Ampel, Ablauf mit echten Zeiten, Kostenblock, Betriebskostenvergleich mit offengelegten Annahmen, Lautstärke, acht echte FAQ.</span>
<span style="margin-top:auto;padding-top:12px;font-weight:700;color:#0B4F6C">Öffnen →</span>
</a>
<a href="SHK-Notdienst.dc.html" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:26px;display:flex;flex-direction:column;gap:8px" style-hover="border-color:#0B4F6C">
<span style="font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Bauplan C · 10.3</span>
<span style="font-size:24px;font-weight:700">Notdienst-Seite</span>
<span style="font-size:16px;color:#5A6169">Die Drei-Sekunden-Seite: Nummer riesig, Live-Status, ehrliche Zeiten, offene Zuschlagstabelle, Gasgeruch-Warnung mit Netzbetreibernummer, Erste-Hilfe-Schritte.</span>
<span style="margin-top:auto;padding-top:12px;font-weight:700;color:#0B4F6C">Öffnen →</span>
</a>
<a href="SHK-Foerderung.dc.html" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:26px;display:flex;flex-direction:column;gap:8px" style-hover="border-color:#0B4F6C">
<span style="font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Bauplan C · 10.4</span>
<span style="font-size:24px;font-weight:700">Förderseite</span>
<span style="font-size:16px;color:#5A6169">KfW 458 Stand 21.07.2026, Beispielrechnung mit offenem Rechenweg, Antragsreihenfolge in sieben Schritten, § 40 SGB XI, Pflicht-Disclaimer sichtbar statt im Kleingedruckten.</span>
<span style="margin-top:auto;padding-top:12px;font-weight:700;color:#0B4F6C">Öffnen →</span>
</a>
<a href="SHK-Karriere.dc.html" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:26px;display:flex;flex-direction:column;gap:8px" style-hover="border-color:#0B4F6C">
<span style="font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Bauplan C · 10.6</span>
<span style="font-size:24px;font-weight:700">Karriere-Funnel</span>
<span style="font-size:16px;color:#5A6169">Vier Strecken in einer Seite: Warum wir, offene Stellen mit Gehalt, Ausbildung in Du-Ansprache mit Vergütung je Lehrjahr, Quick-Bewerbung mit vier Feldern.</span>
<span style="margin-top:auto;padding-top:12px;font-weight:700;color:#0B4F6C">Öffnen →</span>
</a>
<a href="SHK-Rechner.dc.html" style="text-decoration:none;color:inherit;background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:26px;display:flex;flex-direction:column;gap:8px" style-hover="border-color:#0B4F6C">
<span style="font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:700">Conversion-System · 11.4</span>
<span style="font-size:24px;font-weight:700">Rechner-Strecke</span>
<span style="font-size:16px;color:#5A6169">Heizungsrechner, Badrechner und Fördercheck. Je fünf Klickfragen, Ergebnis als Spanne mit Ampel — sichtbar auch ohne Kontaktdaten, Kontaktabfrage erst danach und freiwillig.</span>
<span style="margin-top:auto;padding-top:12px;font-weight:700;color:#0B4F6C">Öffnen →</span>
</a>
</div>
<p style="margin:0 0 16px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#5A6169;font-weight:700">Für das Verkaufsgespräch</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:44px">
<a href="SHK-Scorecard.dc.html" style="text-decoration:none;color:inherit;background:#0B4F6C;color:#FFFFFF;border-radius:5px;padding:26px;display:flex;flex-direction:column;gap:8px" style-hover="background:#08384D">
<span style="font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#9FC0CF;font-weight:700">Kapitel 7</span>
<span style="font-size:24px;font-weight:700">Scorecard — 40 Kriterien</span>
<span style="font-size:16px;color:#C6DAE4">Bestandsanalyse live im Termin: Punkte klicken, Gesamtstand, Bereichsbalken, K.-o.-Liste für die Rechtspunkte, Gesprächsstoff aus den Nullern. Eingaben bleiben im Browser gespeichert.</span>
<span style="margin-top:auto;padding-top:12px;font-weight:700;color:#FFFFFF">Öffnen →</span>
</a>
<a href="SHK-Pitch.dc.html" style="text-decoration:none;color:inherit;background:#1A1D21;color:#FFFFFF;border-radius:5px;padding:26px;display:flex;flex-direction:column;gap:8px" style-hover="background:#000000">
<span style="font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#9AA3AC;font-weight:700">14 Folien mit Sprechernotizen</span>
<span style="font-size:24px;font-weight:700">Pitch-Deck</span>
<span style="font-size:16px;color:#C9CFD5">Für das Erstgespräch beim Betrieb: Befund, die drei unbeantworteten Fragen, die 48-Prozent-Lücke, Bewertungen als brachliegendes Asset, Karriere als zweiter Funnel, Rechtsrisiken, Ablauf.</span>
<span style="margin-top:auto;padding-top:12px;font-weight:700;color:#FFFFFF">Öffnen →</span>
</a>
</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:5px;padding:clamp(22px,3vw,32px)">
<h2 style="margin:0 0 14px;font-size:22px;font-weight:700">Was in diesem Prototyp bewusst noch fehlt</h2>
<ul style="margin:0 0 18px;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:17px;color:#3D4650">
<li><strong>Mobile Ansicht mit Sticky-Leiste.</strong> Der Prototyp ist auf Desktop ausgelegt. Die kanonische Version ist mobil — Anrufen, WhatsApp und Termin gehören dort in eine feste Leiste am unteren Rand.</li>
<li><strong>Bad-, Klima- und Referenzseiten.</strong> Sie folgen dem Master-Template der Wärmepumpen-Seite; die Navigation verweist bereits darauf.</li>
<li><strong>Echte Fotos.</strong> Alle Bildflächen sind beschriftete Platzhalter nach der Pflicht-Bildliste aus Kapitel 12.3. Ohne eigene Bilder greift sonst wieder der Stock-Foto-Reflex.</li>
<li><strong>Rechtstexte.</strong> Impressum, Datenschutz und Widerrufsseite sind im Footer verlinkt, aber nicht ausformuliert — die gehören anwaltlich geprüft, nicht aus einer Vorlage.</li>
</ul>
<p style="margin:0;font-size:16px;color:#5A6169">Farben, Typografie und Abstände folgen dem Design-System aus Kapitel 12. Die Akzentfarbe wurde gegenüber dem Dokument leicht abgedunkelt (#C9451C statt #E4572E), damit sie mit weißer Schrift die geforderten 4,5:1 Kontrast erreicht.</p>
</div>
</main>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{}"></script>
</body>
</html>

375
SHK-Waermepumpe.dc.html Normal file
View File

@@ -0,0 +1,375 @@
<!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; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
</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">
<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 &amp; Zuschläge →</a>
</div>
</div>
</div>
</sc-if>
<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="SHK-Startseite.dc.html" 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:#0B4F6C;font-weight:700;font-size:15px;letter-spacing:.03em;border-bottom:2px solid #C9451C;padding-bottom:2px">WÄRME</a>
<a href="SHK-Startseite.dc.html#bad" style="text-decoration:none;color:#1A1D21;font-weight:600;font-size:15px;letter-spacing:.03em">BAD</a>
<a href="SHK-Startseite.dc.html#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="SHK-Startseite.dc.html#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="SHK-Startseite.dc.html#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>
<a href="SHK-Startseite.dc.html#termin" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:12px 20px;border-radius:3px;font-weight:700;font-size:15px" style-hover="background:#A93A17">Termin buchen</a>
</div>
</div>
</header>
</div>
<section data-screen-label="Seitenkopf" style="padding:clamp(24px,3vw,36px) clamp(16px,3vw,32px) clamp(36px,4vw,56px)">
<div style="max-width:1200px;margin:0 auto">
<nav aria-label="Breadcrumb" style="font-size:15px;color:#5A6169;margin-bottom:22px">
<a href="SHK-Startseite.dc.html" style="color:#5A6169">Start</a> › <a href="SHK-Waermepumpe.dc.html" style="color:#5A6169">Wärme</a> › <span style="color:#1A1D21">Wärmepumpe</span>
</nav>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:clamp(28px,4vw,56px);align-items:start">
<div>
<h1 style="margin:0 0 16px;font-size:clamp(1.875rem,3.6vw,2.875rem);line-height:1.14;font-weight:700;letter-spacing:-0.02em">Wärmepumpe in Regensburg — vom Meisterbetrieb geplant und installiert</h1>
<p style="margin:0 0 22px;font-size:19px;color:#5A6169;max-width:36em">Wir bauen Luft-Wasser-Wärmepumpen in Bestandsgebäude ein — auch in Häuser mit klassischen Heizkörpern. Vor dem Angebot rechnen wir die Heizlast, nicht nach dem Einbau. Den Förderantrag bereiten wir vor, bevor Sie unterschreiben.</p>
<div style="display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap;align-items:center;padding:14px 0;border-top:1px solid #DDE2E7;border-bottom:1px solid #DDE2E7;margin-bottom:26px">
<span style="display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600"><span style="color:#C9451C;letter-spacing:1px">★★★★★</span>4,9 (187)</span>
<span style="font-size:16px;font-weight:600">Fachbetrieb nach § 6 ChemKlimaschutzV</span>
<span style="font-size:16px;font-weight:600">Seit 1994 · 340 Wärmepumpen</span>
</div>
<div style="background:#F4F6F8;border:1px solid #DDE2E7;border-radius:4px;padding:22px">
<p style="margin:0 0 6px;font-size:19px;font-weight:700">Größenordnung in 60 Sekunden — dann reden wir.</p>
<p style="margin:0 0 18px;font-size:16px;color:#5A6169">Vier Klicks, Ergebnis als Spanne, ohne Kontaktdaten sichtbar.</p>
<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="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:#EDF1F4">☎ 0941 12345-0</a>
</div>
</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,Menlo,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#5A6169;background:rgba(255,255,255,.9);padding:5px 9px">Pflichtbild 4 — eigener Monteur am Außengerät</span>
</div>
</div>
</div>
</section>
<section data-screen-label="Eignungs-Check" style="padding:clamp(44px,5vw,72px) clamp(16px,3vw,32px);background:#F4F6F8;border-top:1px solid #DDE2E7;border-bottom:1px solid #DDE2E7">
<div style="max-width:900px;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">Passt eine Wärmepumpe zu Ihrem Haus?</h2>
<p style="margin:0 0 28px;font-size:18px;color:#5A6169;max-width:44em">Fünf Fragen, ehrliche Antwort. Wenn es nicht passt, sagen wir Ihnen das — dann ist eine Hybridlösung oder ein Gasbrennwertgerät die bessere Empfehlung.</p>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden">
<sc-for list="{{ kriterien }}" as="k" hint-placeholder-count="5">
<div style="display:flex;gap:20px;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #EDF1F4;flex-wrap:wrap">
<div style="flex:1 1 300px;min-width:0">
<p style="margin:0;font-size:17px;font-weight:600">{{ k.frage }}</p>
<p style="margin:0;font-size:15px;color:#5A6169">{{ k.hinweis }}</p>
</div>
<div style="display:flex;gap:8px;flex:0 0 auto">
<sc-for list="{{ k.optionen }}" as="o" hint-placeholder-count="3">
<button type="button" onClick="{{ o.waehlen }}" style="{{ o.stil }}">{{ o.label }}</button>
</sc-for>
</div>
</div>
</sc-for>
<div style="padding:22px 20px">
<sc-if value="{{ checkLeer }}" hint-placeholder-val="{{ true }}">
<p style="margin:0;font-size:16px;color:#5A6169">Beantworten Sie die Fragen — die Einschätzung erscheint sofort, ohne dass Sie etwas absenden.</p>
</sc-if>
<sc-if value="{{ checkFertig }}" hint-placeholder-val="{{ false }}">
<div style="display:flex;gap:14px;align-items:flex-start">
<span style="width:14px;height:14px;border-radius:50%;background:{{ ampelFarbe }};margin-top:8px;flex:none"></span>
<div>
<p style="margin:0 0 4px;font-size:19px;font-weight:700">{{ ampelTitel }}</p>
<p style="margin:0 0 16px;font-size:16px;color:#3D4650;max-width:52em">{{ ampelText }}</p>
<a href="SHK-Rechner.dc.html" style="text-decoration:none;background:#C9451C;color:#FFFFFF;padding:12px 20px;border-radius:3px;font-weight:700;font-size:16px" style-hover="background:#A93A17">Kosten und Förderung berechnen →</a>
</div>
</div>
</sc-if>
</div>
</div>
</div>
</section>
<section data-screen-label="Ablauf" style="padding:clamp(44px,5vw,72px) 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">Der Ablauf — mit echten Zeiten</h2>
<p style="margin:0 0 32px;font-size:18px;color:#5A6169;max-width:44em">Von der ersten Anfrage bis zur Einweisung vergehen bei uns aktuell rund sieben Wochen. Der Förderantrag liegt bewusst vor der Auftragserteilung.</p>
<ol style="list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:#DDE2E7;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden">
<li style="background:#FFFFFF;padding:20px"><span style="display:block;font-size:13px;letter-spacing:.1em;color:#5A6169;font-weight:700;margin-bottom:8px">SCHRITT 1 · 1 TAG</span><strong style="display:block;font-size:17px;margin-bottom:4px">Beratung vor Ort</strong><span style="font-size:15px;color:#5A6169">Bestandsaufnahme, Fotos, erste Größenordnung. Kostenlos.</span></li>
<li style="background:#FFFFFF;padding:20px"><span style="display:block;font-size:13px;letter-spacing:.1em;color:#5A6169;font-weight:700;margin-bottom:8px">SCHRITT 2 · 1 WOCHE</span><strong style="display:block;font-size:17px;margin-bottom:4px">Heizlastberechnung</strong><span style="font-size:15px;color:#5A6169">Raum für Raum nach DIN, nicht per Faustformel. Ergebnis bekommen Sie schriftlich.</span></li>
<li style="background:#FFFFFF;padding:20px"><span style="display:block;font-size:13px;letter-spacing:.1em;color:#5A6169;font-weight:700;margin-bottom:8px">SCHRITT 3 · 1 WOCHE</span><strong style="display:block;font-size:17px;margin-bottom:4px">Festpreisangebot</strong><span style="font-size:15px;color:#5A6169">Mit Fördervorbehalt. Nachträge nur nach Ihrer schriftlichen Freigabe.</span></li>
<li style="background:#FBF0F0;padding:20px"><span style="display:block;font-size:13px;letter-spacing:.1em;color:#B0111D;font-weight:700;margin-bottom:8px">SCHRITT 4 · 2–4 WOCHEN</span><strong style="display:block;font-size:17px;margin-bottom:4px">Förderantrag bei der KfW</strong><span style="font-size:15px;color:#5A6169">Vor der Auftragserteilung. Wer zuerst beauftragt, verliert den Anspruch.</span></li>
<li style="background:#FFFFFF;padding:20px"><span style="display:block;font-size:13px;letter-spacing:.1em;color:#5A6169;font-weight:700;margin-bottom:8px">SCHRITT 5 · 2–4 TAGE</span><strong style="display:block;font-size:17px;margin-bottom:4px">Montage</strong><span style="font-size:15px;color:#5A6169">Sie sind höchstens einen Tag ohne Warmwasser. Wir sagen vorher, welcher Tag das ist.</span></li>
<li style="background:#FFFFFF;padding:20px"><span style="display:block;font-size:13px;letter-spacing:.1em;color:#5A6169;font-weight:700;margin-bottom:8px">SCHRITT 6 · 2 STUNDEN</span><strong style="display:block;font-size:17px;margin-bottom:4px">Einweisung &amp; Nachweis</strong><span style="font-size:15px;color:#5A6169">Einstellung der Heizkurve, Bedienung, Verwendungsnachweis für die KfW.</span></li>
</ol>
</div>
</section>
<sc-if value="{{ preiseAn }}" hint-placeholder-val="{{ true }}">
<section data-screen-label="Kosten" style="padding:clamp(44px,5vw,72px) clamp(16px,3vw,32px);background:#0B4F6C;color:#FFFFFF">
<div style="max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(28px,4vw,56px)">
<div>
<h2 style="margin:0 0 14px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Was kostet das?</h2>
<p style="margin:0 0 8px;font-size:17px;color:#C6DAE4">Luft-Wasser-Wärmepumpe im Einfamilienhaus, komplett installiert</p>
<p style="margin:0 0 6px;font-size:clamp(2rem,4.4vw,3rem);font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums">22.000 – 34.000 €</p>
<p style="margin:0 0 20px;font-size:17px;color:#C6DAE4">brutto inkl. MwSt., vor Förderung</p>
<p style="margin:0 0 8px;font-size:20px;font-weight:700">Nach 46 % Förderung: 13.100 – 21.100 €</p>
<p style="margin:0 0 24px;font-size:16px;color:#C6DAE4;max-width:38em">Gerechnet mit 30 % Grundförderung und 16 % Klimageschwindigkeitsbonus auf höchstens 28.000 € förderfähige Kosten. Ein Einkommensbonus kann hinzukommen. Stand 21.07.2026, Angaben ohne Gewähr — die Förderentscheidung trifft ausschließlich die KfW.</p>
<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;display:inline-block" style-hover="background:#A93A17">Ihre Größenordnung berechnen →</a>
</div>
<div style="background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:4px;padding:24px">
<h3 style="margin:0 0 14px;font-size:19px;font-weight:700">Was den Preis bewegt</h3>
<ul style="margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:16px;color:#DCEAF1">
<li>Gebäudegröße und Dämmzustand — sie bestimmen die nötige Leistung in kW</li>
<li>Vorhandene Heizkörper oder Fußbodenheizung, und ob einzelne Heizkörper getauscht werden müssen</li>
<li>Aufstellort und Länge der Leitungswege zum Technikraum</li>
<li>Größe des Pufferspeichers und ob Warmwasser mit erzeugt wird</li>
<li>Rückbau und Entsorgung der Altanlage, bei Öl auch die Tankdemontage</li>
<li>Elektroanschluss, gegebenenfalls neuer Zählerplatz</li>
</ul>
<p style="margin:18px 0 0;font-size:15px;color:#9FC0CF;border-top:1px solid rgba(255,255,255,.2);padding-top:14px">Unsere Verrechnungssätze für Arbeiten außerhalb des Festpreises finden Sie offen ausgewiesen auf der <a href="SHK-Notdienst.dc.html" style="color:#FFFFFF">Service-Seite</a>.</p>
</div>
</div>
</section>
</sc-if>
<section data-screen-label="Betriebskosten" style="padding:clamp(44px,5vw,72px) clamp(16px,3vw,32px)">
<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">Betriebskosten im Vergleich — mit offengelegten Annahmen</h2>
<p style="margin:0 0 28px;font-size:18px;color:#5A6169;max-width:44em">Jede Rechnung, deren Annahmen nicht dabeistehen, ist wertlos. Hier stehen sie.</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:#DDE2E7;border:1px solid #DDE2E7;border-radius:4px;overflow:hidden;margin-bottom:18px">
<div style="background:#FFFFFF;padding:22px">
<p style="margin:0 0 6px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#5A6169;font-weight:700">Gasbrennwert</p>
<p style="margin:0 0 4px;font-size:32px;font-weight:700;font-variant-numeric:tabular-nums">2.180 €</p>
<p style="margin:0;font-size:15px;color:#5A6169">pro Jahr · 20.000 kWh Wärmebedarf · Gaspreis 10,9 ct/kWh · Wirkungsgrad 95 %</p>
</div>
<div style="background:#FFFFFF;padding:22px">
<p style="margin:0 0 6px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#0B4F6C;font-weight:700">Wärmepumpe</p>
<p style="margin:0 0 4px;font-size:32px;font-weight:700;color:#0B4F6C;font-variant-numeric:tabular-nums">1.280 €</p>
<p style="margin:0;font-size:15px;color:#5A6169">pro Jahr · gleicher Wärmebedarf · Jahresarbeitszahl 3,8 · Wärmepumpentarif 24,3 ct/kWh</p>
</div>
<div style="background:#FFFFFF;padding:22px">
<p style="margin:0 0 6px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#5A6169;font-weight:700">Differenz</p>
<p style="margin:0 0 4px;font-size:32px;font-weight:700;color:#0F6B33;font-variant-numeric:tabular-nums">900 €</p>
<p style="margin:0;font-size:15px;color:#5A6169">pro Jahr. Bei 15.000 € Eigenanteil rechnet sich der Tausch rechnerisch nach rund 17 Jahren — ohne Preissteigerungen.</p>
</div>
</div>
<p style="margin:0;font-size:15px;color:#5A6169;max-width:60em">Beispielrechnung für ein Einfamilienhaus, Baujahr 1996, 160 m². Ihre Werte weichen ab — Wärmebedarf, erreichbare Jahresarbeitszahl und Ihr Stromtarif entscheiden. Wir rechnen das bei der Besichtigung mit Ihren Zahlen durch und sagen Ihnen auch, wenn es sich nicht lohnt.</p>
</div>
</section>
<section data-screen-label="Kühlen und Lautstärke" style="padding:clamp(44px,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;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px">
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:26px">
<h3 style="margin:0 0 12px;font-size:22px;font-weight:700">Ihre Wärmepumpe kann im Sommer auch kühlen</h3>
<p style="margin:0 0 14px;font-size:17px;color:#3D4650">Bei Fußbodenheizung senkt die Kühlfunktion die Raumtemperatur um 2 bis 3 Grad — leise, ohne Zugluft und ohne ein zweites Gerät an der Fassade. Das muss bei der Planung mit angelegt werden; nachrüsten ist teurer.</p>
<p style="margin:0 0 16px;font-size:17px;color:#3D4650">Reicht das nicht, kombinieren wir mit einer Split-Klimaanlage in Schlaf- und Arbeitszimmer. In Regensburg lagen 2025 achtzehn Tage über 30 Grad.</p>
<a href="SHK-Startseite.dc.html#klima" style="font-weight:700">Kühlung und Klimaanlagen ansehen →</a>
</div>
<div style="background:#FFFFFF;border:1px solid #DDE2E7;border-radius:4px;padding:26px">
<h3 style="margin:0 0 12px;font-size:22px;font-weight:700">Lautstärke und Nachbarschaft</h3>
<p style="margin:0 0 14px;font-size:17px;color:#3D4650">Die häufigste Sorge, und die am seltensten beantwortete. Aktuelle Außengeräte liegen bei 35 bis 45 dB(A) in drei Metern Abstand — vergleichbar mit einem Kühlschrank. Nachts drosselt der Flüstermodus zusätzlich.</p>
<p style="margin:0 0 16px;font-size:17px;color:#3D4650">Wir prüfen vor der Montage die Immissionsrichtwerte der TA Lärm für Ihr Grundstück und dokumentieren den Abstand zur Nachbargrenze. Bei engen Grundstücken planen wir eine Schallschutzhaube mit ein.</p>
<p style="margin:0;font-size:15px;color:#5A6169">In 340 installierten Anlagen hatten wir bislang zwei Nachbarschaftsbeschwerden — beide mit einer geänderten Aufstellung gelöst.</p>
</div>
</div>
</section>
<section data-screen-label="FAQ" style="padding:clamp(44px,5vw,72px) clamp(16px,3vw,32px)">
<div style="max-width:900px;margin:0 auto">
<h2 style="margin:0 0 28px;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-0.01em">Fragen, die uns wirklich gestellt werden</h2>
<div style="border-top:1px solid #DDE2E7">
<details style="border-bottom:1px solid #DDE2E7">
<summary style="padding:18px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:baseline"><span>Muss ich meine Heizung wegen des neuen Gesetzes überhaupt tauschen?</span><span style="color:#C9451C;font-weight:700;flex:none">+</span></summary>
<p style="margin:0 0 20px;font-size:17px;color:#3D4650">Nein. Seit dem 10.07.2026 gilt das Gebäudemodernisierungsgesetz; die 65-Prozent-Regel für erneuerbare Energien bei neuen Heizungen wurde gestrichen. Sie dürfen weiterhin eine Gasheizung einbauen. Was kommt, ist ein steigender Mindestanteil klimafreundlicher Brennstoffe ab 2029 — 10 Prozent, ab 2030 15, ab 2035 30. Die Entscheidung ist damit wieder eine wirtschaftliche, keine gesetzliche. Wir rechnen beide Varianten durch.</p>
</details>
<details style="border-bottom:1px solid #DDE2E7">
<summary style="padding:18px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:baseline"><span>Funktioniert eine Wärmepumpe in meinem Altbau von 1968?</span><span style="color:#C9451C;font-weight:700;flex:none">+</span></summary>
<p style="margin:0 0 20px;font-size:17px;color:#3D4650">Meistens ja, aber nicht immer wirtschaftlich. Entscheidend ist nicht das Baujahr, sondern die nötige Vorlauftemperatur. Liegt sie unter 55 Grad, arbeitet eine moderne Wärmepumpe gut. Das messen wir an einem kalten Tag: Wir drehen die Vorlauftemperatur schrittweise herunter und schauen, ob alle Räume warm werden. Von unseren 340 Anlagen stehen 71 in Gebäuden vor 1979.</p>
</details>
<details style="border-bottom:1px solid #DDE2E7">
<summary style="padding:18px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:baseline"><span>Muss ich alle Heizkörper austauschen?</span><span style="color:#C9451C;font-weight:700;flex:none">+</span></summary>
<p style="margin:0 0 20px;font-size:17px;color:#3D4650">Fast nie alle. In der Regel sind es zwei bis vier Räume, oft Bad und Nordzimmer. Ein Heizkörpertausch kostet inklusive Montage 450 bis 900 Euro pro Stück und ist förderfähig, wenn er Teil der Maßnahme ist. Welche Heizkörper betroffen sind, steht in der Heizlastberechnung — vor dem Angebot, nicht danach.</p>
</details>
<details style="border-bottom:1px solid #DDE2E7">
<summary style="padding:18px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:baseline"><span>Was passiert bei minus 15 Grad?</span><span style="color:#C9451C;font-weight:700;flex:none">+</span></summary>
<p style="margin:0 0 20px;font-size:17px;color:#3D4650">Die Wärmepumpe heizt weiter, mit schlechterem Wirkungsgrad. Wir legen die Anlage auf die Normaußentemperatur für Regensburg aus, das sind minus 14 Grad. Unterhalb davon springt der elektrische Heizstab zu — an durchschnittlich vier bis sechs Tagen im Jahr, was in der Jahresrechnung kaum auffällt. Kalt wird es nicht.</p>
</details>
<details style="border-bottom:1px solid #DDE2E7">
<summary style="padding:18px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:baseline"><span>Wie viel Förderung bekomme ich, und wann muss ich sie beantragen?</span><span style="color:#C9451C;font-weight:700;flex:none">+</span></summary>
<p style="margin:0 0 20px;font-size:17px;color:#3D4650">30 Prozent Grundförderung plus 16 Prozent Klimageschwindigkeitsbonus beim Tausch einer alten Anlage, dazu je nach Haushaltseinkommen bis zu 40 Prozent Einkommensbonus — höchstens 70 Prozent auf maximal 28.000 Euro förderfähige Kosten. Der Antrag muss vor der Auftragsvergabe gestellt sein. Wir stellen das Angebot deshalb unter Fördervorbehalt und warten Ihre Zusage ab. Stand 21.07.2026; entscheiden tut die KfW. <a href="SHK-Foerderung.dc.html">Alle Details auf der Förderseite</a>.</p>
</details>
<details style="border-bottom:1px solid #DDE2E7">
<summary style="padding:18px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:baseline"><span>Wie lange bin ich ohne Heizung und ohne Warmwasser?</span><span style="color:#C9451C;font-weight:700;flex:none">+</span></summary>
<p style="margin:0 0 20px;font-size:17px;color:#3D4650">Die Montage dauert zwei bis vier Arbeitstage. Ohne Warmwasser sind Sie davon höchstens einen Tag, und wir sagen Ihnen vorher, welcher das ist. In der Heizperiode stellen wir auf Wunsch elektrische Heizgeräte für zwei Räume bereit, kostenlos.</p>
</details>
<details style="border-bottom:1px solid #DDE2E7">
<summary style="padding:18px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:baseline"><span>Brauche ich eine Genehmigung oder muss ich den Nachbarn fragen?</span><span style="color:#C9451C;font-weight:700;flex:none">+</span></summary>
<p style="margin:0 0 20px;font-size:17px;color:#3D4650">Für Luft-Wasser-Wärmepumpen in Bayern in der Regel keine Baugenehmigung, solange die Abstandsflächen eingehalten sind. Fragen müssen Sie den Nachbarn nicht — sinnvoll ist es trotzdem. Wir liefern Ihnen dafür das Datenblatt mit den Schallwerten, das die Diskussion meist beendet.</p>
</details>
<details style="border-bottom:1px solid #DDE2E7">
<summary style="padding:18px 0;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:baseline"><span>Was, wenn nach dem Einbau etwas nicht stimmt?</span><span style="color:#C9451C;font-weight:700;flex:none">+</span></summary>
<p style="margin:0 0 20px;font-size:17px;color:#3D4650">Nach der ersten Heizperiode kommen wir noch einmal und justieren die Heizkurve nach — das ist im Preis enthalten und der Punkt, an dem die meisten Anlagen erst wirklich sparsam werden. Störungen nimmt unser Kundendienst an, im Winter auch abends. Ersatzteile für die von uns verbauten Geräte haben wir auf Lager.</p>
</details>
</div>
<p style="margin:22px 0 0;font-size:15px;color:#5A6169">Ihre Frage ist nicht dabei? <a href="SHK-Startseite.dc.html#kontakt">Rückruf anfordern</a> oder per WhatsApp fragen — ein Foto vom Typenschild hilft uns oft mehr als eine lange Beschreibung.</p>
</div>
</section>
<section data-screen-label="Ansprechpartner und Abschluss-CTA" style="padding:clamp(44px,5vw,72px) clamp(16px,3vw,32px);background:#F4F6F8;border-top: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:center">
<div style="display:flex;gap:20px;align-items:center">
<div style="width:120px;height:120px;flex:none;border:1px solid #DDE2E7;border-radius:4px;background:repeating-linear-gradient(135deg,#EDF1F4 0 8px,#E4EAEF 8px 16px)"></div>
<div>
<p style="margin:0 0 2px;font-size:15px;color:#5A6169">Ihr Ansprechpartner für Wärmepumpen</p>
<p style="margin:0 0 2px;font-size:22px;font-weight:700">Michael Berger</p>
<p style="margin:0 0 10px;font-size:16px;color:#5A6169">Geschäftsführer &amp; Installateurmeister</p>
<a href="tel:+499411234512" style="font-size:17px;font-weight:700;font-variant-numeric:tabular-nums">0941 12345-12</a>
</div>
</div>
<div>
<h2 style="margin:0 0 12px;font-size:clamp(1.375rem,2.4vw,1.875rem);font-weight:700;letter-spacing:-0.01em">Wir melden uns innerhalb von 24 Stunden.</h2>
<p style="margin:0 0 20px;font-size:17px;color:#5A6169">Werktags meistens noch am selben Tag. Aktuelle Vorlaufzeit bis zur Montage: rund sieben Wochen.</p>
<div style="display:flex;gap:12px;flex-wrap:wrap">
<a href="SHK-Startseite.dc.html#termin" 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 buchen →</a>
<a href="SHK-Rechner.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">Erst rechnen →</a>
</div>
</div>
</div>
</section>
<section data-screen-label="Interne Links" style="padding:clamp(32px,4vw,48px) clamp(16px,3vw,32px);border-top:1px solid #DDE2E7">
<div style="max-width:1200px;margin:0 auto">
<p style="margin:0 0 14px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#5A6169;font-weight:600">Passt dazu</p>
<div style="display:flex;gap:12px;flex-wrap:wrap">
<a href="SHK-Foerderung.dc.html" style="text-decoration:none;border:1px solid #DDE2E7;border-radius:100px;padding:9px 18px;font-size:16px;font-weight:600;color:#0B4F6C" style-hover="background:#F4F6F8;border-color:#0B4F6C">Förderung für Ihre neue Heizung</a>
<a href="SHK-Rechner.dc.html" style="text-decoration:none;border:1px solid #DDE2E7;border-radius:100px;padding:9px 18px;font-size:16px;font-weight:600;color:#0B4F6C" style-hover="background:#F4F6F8;border-color:#0B4F6C">Heizungsrechner</a>
<a href="SHK-Notdienst.dc.html" style="text-decoration:none;border:1px solid #DDE2E7;border-radius:100px;padding:9px 18px;font-size:16px;font-weight:600;color:#0B4F6C" style-hover="background:#F4F6F8;border-color:#0B4F6C">Wartung &amp; Notdienst</a>
<a href="SHK-Startseite.dc.html#klima" style="text-decoration:none;border:1px solid #DDE2E7;border-radius:100px;padding:9px 18px;font-size:16px;font-weight:600;color:#0B4F6C" style-hover="background:#F4F6F8;border-color:#0B4F6C">Kühlen mit der Wärmepumpe</a>
<a href="SHK-Startseite.dc.html#referenzen" style="text-decoration:none;border:1px solid #DDE2E7;border-radius:100px;padding:9px 18px;font-size:16px;font-weight:600;color:#0B4F6C" style-hover="background:#F4F6F8;border-color:#0B4F6C">Referenzen Heizung</a>
</div>
</div>
</section>
<footer style="background:#08384D;color:#D6E4EB;padding:clamp(36px,4vw,56px) clamp(16px,3vw,32px) 24px">
<div style="max-width:1200px;margin:0 auto;display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start">
<div>
<p style="margin:0 0 8px;font-weight:700;font-size:18px;color:#FFFFFF">BERGER Haustechnik GmbH</p>
<p style="margin:0 0 8px;font-size:16px">Prüfeninger Straße 42 · 93049 Regensburg · <a href="tel:+499411234500" style="color:#FFFFFF;font-weight:700">0941 12345-0</a></p>
<p style="margin:0;font-size:15px;color:#9FC0CF">Meisterbetrieb der Handwerkskammer Niederbayern-Oberpfalz</p>
</div>
<div style="display:flex;gap:20px;flex-wrap:wrap;font-size:16px">
<a href="SHK-Startseite.dc.html" style="color:#D6E4EB;text-decoration:none">Start</a>
<a href="SHK-Foerderung.dc.html" style="color:#D6E4EB;text-decoration:none">Förderung</a>
<a href="SHK-Notdienst.dc.html" style="color:#D6E4EB;text-decoration:none">Notdienst</a>
<a href="SHK-Karriere.dc.html" style="color:#D6E4EB;text-decoration:none">Karriere</a>
<a href="SHK-Startseite.dc.html#impressum" style="color:#D6E4EB;text-decoration:none">Impressum</a>
<a href="SHK-Startseite.dc.html#datenschutz" style="color:#D6E4EB;text-decoration:none">Datenschutz</a>
</div>
</div>
</footer>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;preiseZeigen&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Pitch-Demo&quot;},&quot;notdienstLeiste&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Module&quot;}}">
class Component extends DCLogic {
state = { check: {} };
liste = [
{ id: 'baujahr', frage: 'Baujahr ab 1995 — oder Dach, Fenster und Fassade saniert?', hinweis: 'Der Dämmzustand entscheidet über die nötige Vorlauftemperatur.' },
{ id: 'flaechen', frage: 'Fußbodenheizung oder großzügig dimensionierte Heizkörper?', hinweis: 'Große Heizflächen brauchen weniger heißes Wasser.' },
{ id: 'vorlauf', frage: 'Wird das Haus auch bei 55 °C Vorlauftemperatur warm?', hinweis: 'Einfach am kalten Tag an der Heizung herunterdrehen und prüfen.' },
{ id: 'platz', frage: 'Ist außen Platz für ein Gerät von etwa 1,2 × 0,6 m?', hinweis: 'Mit drei Metern Abstand zur Nachbargrenze wird es unkompliziert.' },
{ id: 'eigentum', frage: 'Gehört Ihnen die Immobilie und bewohnen Sie sie selbst?', hinweis: 'Entscheidet über den Einkommensbonus bei der KfW-Förderung.' }
];
basis = 'padding:9px 14px;border-radius:3px;border:1.5px solid #DDE2E7;background:#FFFFFF;color:#5A6169;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap';
aktiv = 'padding:9px 14px;border-radius:3px;border:1.5px solid #0B4F6C;background:#0B4F6C;color:#FFFFFF;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap';
setzen(id, wert) {
this.setState(s => ({ check: Object.assign({}, s.check, { [id]: wert }) }));
}
renderVals() {
const c = this.state.check;
const werte = { ja: 1, unklar: 0.5, nein: 0 };
const beantwortet = this.liste.filter(k => c[k.id]).length;
const punkte = this.liste.reduce((sum, k) => sum + (c[k.id] ? werte[c[k.id]] : 0), 0);
let ampel = { farbe: '#0F6B33', titel: 'Sehr gute Voraussetzungen',
text: 'Nach Ihren Angaben lässt sich eine Luft-Wasser-Wärmepumpe hier ohne größere Vorarbeiten betreiben. Wir rechnen die Heizlast Raum für Raum und legen die Leistung danach aus — das ist der Schritt, an dem die meisten überdimensionierten Anlagen entstehen.' };
if (punkte < 4) ampel = { farbe: '#A9760F', titel: 'Machbar — mit etwas Vorbereitung',
text: 'Ein Teil der Voraussetzungen fehlt noch. In den allermeisten dieser Fälle reicht der Tausch von zwei bis vier Heizkörpern oder ein hydraulischer Abgleich. Wir messen die tatsächlich nötige Vorlauftemperatur an einem kalten Tag, bevor wir ein Angebot machen.' };
if (punkte < 2.5) ampel = { farbe: '#B0111D', titel: 'Erst prüfen, dann entscheiden',
text: 'Hier würden wir nicht ungeprüft zur Wärmepumpe raten. Sinnvoll ist zuerst ein Blick auf die Gebäudehülle — und je nach Ergebnis eine Hybridlösung oder ein Gasbrennwertgerät. Seit dem Gebäudemodernisierungsgesetz vom 10.07.2026 ist beides wieder zulässig. Wir sagen Ihnen ehrlich, was sich rechnet.' };
return {
notdienstAn: this.props.notdienstLeiste ?? true,
preiseAn: this.props.preiseZeigen ?? true,
kriterien: this.liste.map(k => Object.assign({}, k, {
optionen: [
{ label: 'Ja', stil: c[k.id] === 'ja' ? this.aktiv : this.basis, waehlen: () => this.setzen(k.id, 'ja') },
{ label: 'Nein', stil: c[k.id] === 'nein' ? this.aktiv : this.basis, waehlen: () => this.setzen(k.id, 'nein') },
{ label: 'Weiß nicht', stil: c[k.id] === 'unklar' ? this.aktiv : this.basis, waehlen: () => this.setzen(k.id, 'unklar') }
]
})),
checkLeer: beantwortet < this.liste.length,
checkFertig: beantwortet === this.liste.length,
ampelFarbe: ampel.farbe,
ampelTitel: ampel.titel,
ampelText: ampel.text
};
}
}
</script>
</body>
</html>

2969
deck-stage.js Normal file
View File

File diff suppressed because it is too large Load Diff

1911
support.js Normal file
View File

File diff suppressed because it is too large Load Diff