Files
SHK-vorlage/SHK-Notdienst.dc.html
2026-08-17 20:59:53 +02:00

213 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<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>