374 lines
26 KiB
HTML
374 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<script src="./support.js"></script>
|
||
</head>
|
||
<body>
|
||
<x-dc>
|
||
<helmet>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin" />
|
||
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700&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="{"startWerkzeug":{"editor":"enum","options":["Heizungsrechner","Badrechner","Fördercheck"],"default":"Heizungsrechner","tsType":"string","section":"Ansicht"}}">
|
||
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>
|