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

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>