HSK-Vorlage – Website für Heizung · Sanitär · Klima

Vorlage für Websites von HSK-/SHK-Betrieben (Heizung, Sanitär, Lüftung/Klima, regenerative Energien). Entstanden aus der Website für Olzinger Haustechnik (WEBklar/Olzinger). Alle Firmendaten sind hier durch Platzhalter ersetzt („Mustermann Haustechnik GmbH“, „Musterstadt“, example.com).

Statische Website ohne Build-Schritt: HTML, CSS und JavaScript ohne Bibliotheken, Schrift lokal eingebunden (kein CDN, keine Cookies, kein Tracking).

Neue HSK-Seite aus der Vorlage anlegen

1. In Gitea bei WEBklar/HSK-Vorlage auf „Diese Vorlage verwenden“ klicken. Besitzer: WEBklar, Name: z. B. Mueller-Haustechnik. Haken bei „Git-Inhalt (Standardbranch)“ setzen.
   • Gitea lässt dabei .webklar-preview.json weg (siehe .gitea/template). Das neue Repo bekommt also nicht die Preview der Vorlage.
   • Wird stattdessen per git clone kopiert: .webklar-preview.json vor dem ersten Push löschen. Bleibt sie drin, sperrt das Portal den Deploy (die Subdomain gehört der Vorlage), und das neue Projekt bleibt ohne Preview, bis es im WOMS eine eigene bekommt.
2. Im WOMS das Projekt dem Ticket bzw. Kunden zuordnen und „Preview einschalten“ wählen.
3. Platzhalter ersetzen (Tabelle unten), Texte anpassen und die Checkliste abarbeiten.

Platzhalter

Am schnellsten per Suchen & Ersetzen über alle Dateien. Danach nach Mustermann, Musterstadt, example.com, 12345, 01234 und TODO suchen. Es darf nichts übrig bleiben.

Platzhalter	Bedeutung	Vorkommen
Mustermann Haustechnik GmbH	Firmenname mit Rechtsform	Footer, Impressum, Datenschutz, 404, Schema.org, kontakt.php
Mustermann Haustechnik	Kurzname für Titel und Logo-Beschriftung	<title>, Open Graph, site.webmanifest
Mustermann (Logo-Wort) / Haustechnik (Zusatz)	Logo-Schriftzug	logo__word / logo__sub in allen HTML-Dateien, assets/img/logo.svg (MUSTERMANN), tools/og-template.html
Musterstraße 1, 12345 Musterstadt	Anschrift	Hero, Kontakt, Footer, Impressum, Datenschutz, 404, Schema.org, Google-Maps-Link
Musterstadt und Umgebung	Einzugsgebiet	Meta-Description, Open Graph, Schema.org (areaServed)
01234 567890 / +491234567890	Telefon (Anzeige / tel:-Link)	Navigation, Menü, Hero, Kundendienst-Karte, Kontakt, Footer, Impressum, Datenschutz, 404
01234 567891	Fax	Footer, Impressum, Schema.org
kontakt@example.com	E-Mail	Kontakt, Karriere-Links, Footer, Impressum, Datenschutz, kontakt.php, assets/js/contact.js
www.example.com	Domain	canonical, Open Graph, Schema.org, sitemap.xml, robots.txt, kontakt.php, tools/og-template.html
1990 / Max Mustermann	Gründungsjahr / Gründer	Hero, „Über uns“, Chronik, Schema.org, assets/js/main.js (nowYear - 1990)
2015 / Erika Mustermann	Chronik-Eintrag / Geschäftsführung	Chronik, Impressum, Datenschutz
Rund 20 Fachleute / "value": 20	Mitarbeiterzahl	„Über uns“, Schema.org
Amtsgericht Musterstadt, HRB 12345	Handelsregister	Impressum

Vor dem Livegang prüfen

• Firmendaten vollständig ersetzt (Suche siehe oben).
• Bundesland für die Feiertage im Öffnungsstatus: BUNDESLAND oben in assets/js/contact.js (Standard BY). Dazu addressRegion in den Schema.org-Daten von index.html.
• Öffnungszeiten: SCHEDULE in assets/js/contact.js, die Texte in allen HTML-Dateien (Status-Zeile, Kontaktbereich, Footer) und openingHoursSpecification in index.html.
• Leistungen: Die 5 Karten, die Formular-Themen und knowsAbout (Schema.org) an das Angebot des Betriebs anpassen. Bei weniger Karten den Zähler / 5 in index.html anpassen.
• Über uns und Karriere: Chronik, Mitarbeiterzahl, Ausbildungsberufe, Startmonat.
• Impressum: Geschäftsführung, Registereintrag, Umsatzsteuer-ID und berufsrechtliche Angaben (Kammer, Berufsbezeichnung). Die letzten beiden sind als Kommentar in impressum.html vorbereitet.
• Datenschutz: Hosting-Anbieter, Speicherdauer der Server-Logs, Vertrag zur Auftragsverarbeitung, zuständige Aufsichtsbehörde (Abschnitt 9). Alles als TODO markiert. Rechtstexte sind Entwürfe und ersetzen keine Rechtsberatung.
• Formular: In kontakt.php Empfänger/Absender prüfen (RECIPIENT, SENDER) und einmal testweise absenden.
• Logo und Farben: Für ein eigenes Logo die Logo-Marke (Thermostat-Bogen, logo__mark) in den HTML-Dateien, assets/img/logo.svg, die Favicons und tools/og-template.html ersetzen. Die Farben stehen als Design-Tokens am Anfang von assets/css/main.css.
• Open-Graph-Bild neu rendern (siehe „Anpassen“). Das Bild enthält Name, Ort und Domain.
• sitemap.xml: lastmod aktualisieren.
• Optional: echte Fotos (Team, Projekte, Bäder) ergänzen. Die Illustrationen tragen die Seite auch ohne Fotos.

Gestaltungsidee: „Wärmebild“

Haustechnik sieht man nicht – man spürt sie. Deshalb zeigt der Einstieg ein ruhiges, live berechnetes Wärmebild (WebGL) mit Isothermen wie bei einer Thermografie-Kamera. Eine langsam wandernde Wärmequelle hält das Bild in Bewegung – ohne Maus- oder Touch-Effekte. Durch die Seite zieht sich das Motiv warm trifft kalt (Vorlauf/Rücklauf): Farbverlauf Blau → Magenta → Orange, das Logo als Thermostat-Skala.

Grundsatz: wenig Text, wenig Bewegung, gut bedienbar am Handy.

Bereiche der Startseite

Bereich	Besonderheit
Hero	Ruhiges WebGL-Wärmebild, Live-Öffnungsstatus (inkl. Feiertage des Bundeslands), Anfrage- und Telefon-Button
Leistungen	5 Karten mit Illustrationen; am Desktop als Kartenstapel, unter 900 px wischbare Karten mit Zähler (1 / 5) und Pfeilen
Energie-Haus	Hausschnitt: Wärmepumpe, Solarthermie, Speicher, Fußbodenheizung, Bad, Lüftung – der gewählte Kreislauf wird hervorgehoben
Heizungs-Finder	4 Fragen → Empfehlung (Wärmepumpe / Pellets / Hybrid); Ergebnis lässt sich ins Kontaktformular übernehmen
Über uns	Kurze Chronik vom Gründungsjahr bis heute
Karriere	Ausbildung Anlagenmechaniker SHK, Initiativbewerbung
Kontakt	Kontaktkarten, Öffnungszeiten mit „Heute“-Markierung, Formular
Footer	Adresse, Kontakt, Öffnungszeiten, Links

Außerdem: impressum.html, datenschutz.html, 404.html („Kein Anschluss unter dieser Adresse“), SEO-Daten (Schema.org HVACBusiness, Open-Graph-Bild, Sitemap).

Lokal ansehen

python3 -m http.server 8000
# dann http://localhost:8000 öffnen

index.html lässt sich auch direkt per Doppelklick öffnen; das Kontaktformular nutzt dann den E-Mail-Fallback.

Veröffentlichen

Den kompletten Ordnerinhalt auf den Webspace laden (z. B. per FTP). Voraussetzungen:

• Beliebiger Webserver; für den direkten Formularversand PHP 7.4+ mit funktionierender mail()-Funktion (kontakt.php).
• Ohne PHP funktioniert das Formular trotzdem: Es öffnet dann das E-Mail-Programm des Besuchers mit vorbereiteter Nachricht.
• .htaccess (Apache) setzt die 404-Seite, Caching und Sicherheits-Header. Bei anderen Servern einfach ignorieren.
• 404.html nutzt absolute Pfade (/assets/...) – liegt die Seite in einem Unterordner, Pfade dort anpassen.
• CSS und JS werden eine Woche gecacht. Nach Änderungen an main.css oder den Skripten die Versionsnummer ?v=… in allen HTML-Dateien hochzählen, damit Besucher nicht alte Dateien sehen.

Struktur

index.html            Startseite
impressum.html        Impressum
datenschutz.html      Datenschutzerklärung
404.html              Fehlerseite
kontakt.php           Formularversand (optional, PHP)
assets/css/main.css   Design-System und alle Styles
assets/js/thermal.js  WebGL-Wärmebild
assets/js/main.js     Navigation, mobiles Menü, Einblendungen, Leistungs-Karussell/Kartenstapel
assets/js/house.js    Energie-Haus (Tabs, Hotspots)
assets/js/finder.js   Heizungs-Finder (Bewertungslogik + Ergebnis)
assets/js/contact.js  Öffnungszeiten live, Feiertage, Kontaktformular
assets/fonts/         Instrument Sans (OFL, lokal)
assets/img/           Favicon, Logo, Open-Graph-Bild
tools/og-template.html  Vorlage zum Neu-Rendern des Open-Graph-Bilds
.gitea/template       Regeln für „Diese Vorlage verwenden“ (nur in der Vorlage)

Anpassen

• Farben, Abstände, Schriften: Design-Tokens am Anfang von assets/css/main.css (--warm, --cool, --ink, --paper …).
• Öffnungszeiten: in assets/js/contact.js (SCHEDULE) sowie in den HTML-Dateien (Text und Schema.org-Daten).
• Feiertage: BUNDESLAND in assets/js/contact.js. Es zählen nur landesweite Feiertage. Die Ausnahme ist Bayern: Dort zählt Mariä Himmelfahrt mit (gilt in Gemeinden mit überwiegend katholischer Bevölkerung).
• Heizungs-Finder: Gewichtung in assets/js/finder.js (evaluate), Texte in TEXTS.
• Open-Graph-Bild: tools/og-template.html im Browser öffnen (über einen lokalen Server) und einen Screenshot mit 1200 × 630 px als assets/img/og-image.jpg speichern.

Qualität

• Barrierefreiheit: Tastaturbedienung für Menü, Tabs, Karussell und Finder; prefers-reduced-motion wird respektiert (keine Einblendungen, Wärmebild als Standbild).
• Ohne JavaScript bleiben alle Texte sichtbar; Energie-Haus und Heizungs-Finder brauchen JavaScript für die Bedienung.
• Getestet in Chromium: Desktop (1024–1920 px), Tablet (768/834 px, hoch und quer) und Smartphone (360–414 px).

Lizenzen

Instrument Sans (SIL OFL 1.1) – Lizenztext in assets/fonts/OFL-InstrumentSans.txt. Keine weiteren Bibliotheken.