111 lines
10 KiB
HTML
111 lines
10 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: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>
|