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

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>