Zum Inhalt
← Rezepte
Alle Rezepte

Gebäudedienste: sauber, pünktlich, ansprechbar

Gebäudereinigung / Unterhalts- und Glasreinigung / Hausmeisterservice / Facility Services für Büro, Praxis, Wohnanlage und Gewerbe

Verkauft wird kein Werkstück, sondern Verlässlichkeit: welche Objektart, welcher Turnus, wer ist zuständig, was kostet das je Monat. Die Seite fragt zuerst nach der Objektart und führt in vier Schritten zur Besichtigung. Turnus und Leistungsverzeichnis stehen als Tabelle, die Objektleitung mit Foto und Durchwahl. Die zweite Startseite ist die Personalgewinnung (Minijob, Teilzeit, mehrsprachig). Breite Strichpunkt Sans für Überschriften, Commissioner für Text und Tabellen, Kalkweiß und Fliesengrau, ein klares Blau nur für Anfragen und Anrufen. Signatur: Referenzfotos öffnen sich einmal mit einer waagerechten Maske, wie ein Abzieher über eine Glasscheibe. Abgrenzung zu handwerk-werkstatt-klartext (Werkstück, Vorher/Nachher, Kostenrechner) und industrie-b2b-mittelstand (Produktdaten, Fachperson je Branche).

Bauplan tokens.css Alle Techniken Beispielseite

Schrift

Sauber, pünktlich, ansprechbar

Verkauft wird kein Werkstück, sondern Verlässlichkeit: welche Objektart, welcher Turnus, wer ist zuständig, was kostet das je Monat.

Headline
Strichpunkt Sans
Text
Commissioner

Farbe

  • #F5F6F4
  • #141618
  • #E2E7E5
  • #1D2A33
  • #1F58B8
  • #566067
  • #CDD2D0

Bewegung

cubic-bezier(0.25, 1, 0.5, 1)
Dauer
200 (Hover, Farbe), 350 (Akkordeon, Reiter), 230 (schließen), 500 (Bild-Maske eines Referenzfotos, einmal); Anfrage und Dialoge 300 auf, 200 zu

Aufbau der Seite

SignaturBild-Reveal per Clip-Path/Maske

HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Split

  1. Ihre feste Ansprechperson direkt unter dem Hero (Objektleitung mit Foto, Name, Region oder Objektart, Durchwahl, Rückrufzeit und Vertretung; Foto nur mit Einwilligung)Ansprechperson-Band · Handwerk
  2. Was sollen wir reinigen? (Objektart zuerst: Büro und Verwaltung, Praxis, Treppenhaus und Wohnanlage, Glas und Fassade, Bau-Endreinigung, Gewerbe; je Objektart eine Unterseite, Antwort zuerst: was gemacht wird, in welchem Turnus, ab-Preis je m² oder Stunde und wovon er abhängt)Akkordeon mit Höhenanimation auf auto · LeistungslisteLeistungsseite: Antwort zuerst · HandwerkAnsprechperson-Band · Handwerk
  3. Turnus und Leistungsverzeichnis (Tabelle: täglich, wöchentlich, monatlich je Leistung; drei Pakete nur, wenn der Betrieb sie wirklich anbietet, sonst Beispiel-Leistungsverzeichnis; Zeitfenster wie vor 7 Uhr oder nach Büroschluss; Preise für Privatkunden inkl. MwSt.)Vergleichstabelle mit fester Kopfzeile · PaketvergleichPreisseite: Endpreise, Rechenweg, Vergleich · Mitgliedschaft
  4. Besichtigung anfragen (Objektart → Fläche in m² und Etagen → Turnus und Zeitfenster → Postleitzahl und Kontakt; Grundriss oder Fotos freiwillig; Antwortzeit nennen; Telefon und WhatsApp daneben)Mehrschritt-Anfrage mit Zusammenfassung · SenkrechtDatei-Ablage mit Vorschau und Prüfung · Lebenslauf als PDFFehlerzusammenfassung im Formular · Liste
  5. So starten wir (Besichtigung → Leistungsverzeichnis und Angebot → Einweisung und Schlüsselübergabe mit Protokoll → feste Reinigungskraft und Objektleitung → erste Qualitätskontrolle mit Termin)Prozess-/Timeline-Sektion mit wachsender Linie
  6. Referenzen nach Objektart (Branche, Fläche, Turnus, seit wann betreut; Kundenname und Logo nur mit Erlaubnis; Fotos öffnen sich einmal mit waagerechter Maske; eigene Stimmen nüchtern mit Funktion und Datum)Bild-Reveal per Clip-Path/MaskeTestimonials neu gedacht · Reihe
  7. Zertifikate und Mitgliedschaften (Innung, Gütegemeinschaft, ISO-Zertifikate nur mit Nummer, Gültigkeit und Link; Umweltzeichen nur mit Lizenznummer)Logo-Wand / Social-Proof-Band · Siegel mit Nachweis
  8. Ihre Objektleitung (Foto, Name, Zuständigkeit nach Region oder Objektart, Durchwahl, Sprachen; bei kleinen Betrieben die Inhaberin oder der Inhaber selbst)Team-/Über-mich-Layout mit Porträt-Interaktion · Raster
  9. Arbeiten bei uns (Minijob, Teilzeit, Vollzeit; Stundenlohn nach Tarif mit Lohngruppe und Stand-Datum, Einsatzzeiten, Einsatzorte, Fahrtkosten; Kurzbewerbung in mehreren Sprachen; jede Stelle mit eigener Seite)Stellenliste mit Kurzbewerbung · Viele StellenStellenseite mit Gehalt, Ablauf und JobPosting-Daten · Handwerk
  10. Kontakt, Niederlassungen, Einzugsgebiet (Adresse als Text, Bürozeiten, Einzugsgebiet als Orte; Standortliste erst ab zwei Niederlassungen; Karte per 2-Klick)Standortfinder als Liste · Nur ListeKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildFirmendaten aus einer Quelle · Kfz-WerkstattAnruf-Knopf mit Erreichbarkeit · Rufbereitschaft außerhalb
  11. Erklärung zur Barrierefreiheit (eigene Seite, Footer-Link; bei Online-Buchung für Privathaushalte nach BFSG prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Erklärung

OptionalAgentenformular mit WebMCP

Nicht verwenden

Regeln
  • Erster Bildschirm: echtes Foto aus einem Objekt, ein Satz mit Leistung und Region, die Objektart als erste Frage, Telefon als tel:-Link. Mobil eine untere Leiste Anrufen / Besichtigung / WhatsApp.
  • Objektart vor Leistung: Jede Objektart hat eine Unterseite nach leistungsseite-antwort-zuerst (Variante handwerk) mit Turnus, ab-Preis und dem Satz, wovon der Preis abhängt (Fläche, Bodenart, Verschmutzung, Zeitfenster).
  • Turnus und Leistungsverzeichnis als echte Tabelle mit Tabellenziffern; ein PDF-Leistungsverzeichnis nur als Ergänzung, nie als einzige Quelle.
  • Anfrage nach mehrschritt-anfrage (Variante senkrecht): höchstens vier Schritte, Telefon und E-Mail einzeln wählbar, Upload freiwillig mit Datenschutzhinweis. Validierung erst nach dem Verlassen eines Feldes. Die Bestätigung nennt, wer sich bis wann meldet.
  • Signatur (clip-path-bild-reveal): Referenzfotos öffnen sich einmal mit waagerechter Maske in 500 ms, Kante gerade wie ein Abzieher. Es ist immer dasselbe echte Foto, kein Vorher-Nachher-Vergleich. Höchstens drei solche Bilder pro Seite, nie zwei gleichzeitig im Bild.
  • Ein Signalton nur für Besichtigung anfragen und Anrufen. Auf Dunkel ist der Knopf kalkweiß mit dunkler Schrift.
  • Personalgewinnung ist die zweite Startseite: Stellen mit Stundenlohn nach Tarif oder Spanne, Einsatzzeiten und Orten, Kurzbewerbung ohne Anschreiben in mehreren Sprachen, Anruf und WhatsApp als zweiter Weg; jede Stelle mit JobPosting (stellenseite-mit-jobposting).
  • Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Handwerkskammer und Eintrag in das Verzeichnis der zulassungsfreien Handwerke; Löhne und Tarifangaben nur mit Stand-Datum; Zertifikate und Umweltzeichen nur mit Träger, Nummer und Gültigkeit (logo-wand-social-proof, Variante siegel-nachweis); keine Umwelt- oder Desinfektionsaussagen ohne Nachweis; Preise für Privatkunden inkl. MwSt., für Gewerbe klar als netto gekennzeichnet; Verschwiegenheit in Praxen und Kanzleien nur nennen, wenn sie vertraglich geregelt ist; Kundenlogos nur mit Erlaubnis. Vom Kunden prüfen lassen.
  • agentenformular-webmcp nur als Zusatz (Priorität F): Die Anfrage funktioniert vollständig als normales Formular.
  • Leitidee über die Seite (z. B. „Die Bahn“): Kapitelkanten als Abzieher-Strich (kapitel-kante-signatur, Variante linie) zwischen Objektart, Turnus und Referenzen; Kante gerade wie bei der Signatur, höchstens drei je Seite, nie über Tabellen.
Bild und Ton
  • Licht: Frühes Tageslicht oder Arbeitslicht im echten Objekt, kühl-neutral, nicht nachgeschärft.
  • Ausschnitt: Mitarbeitende bei der Arbeit in der Halbtotale, Glasflächen und Böden im Streiflicht, Objekt in der Totale.
  • Personen: Ja: eigenes Team mit Einwilligung, Arbeitskleidung mit Firmenlogo; keine Kundinnen und Kunden ohne Erlaubnis.
  • Formate: 3:2, 4:5, 16:9
  • Nicht: Keine Stockfotos mit Gummihandschuh und Sprühflasche, keine Glanzsterne und Seifenblasen, keine fremden Firmenlogos im Bild.
  • Anrede: Sie
  • Sätze: Kurz und sachlich: Objekt, Turnus, Uhrzeit, Preis, Ansprechperson.
  • Haltung: Verlässlich wie ein Dienstplan, freundlich, ohne Werbesprech.
  • Tonproben: Büros in [Ort], täglich vor 7 Uhr gereinigt., Ihre Objektleiterin ist [Name]. Sie erreichen sie unter [Durchwahl].
  • Nicht schreiben: „blitzblank“, „strahlend sauber“, „Ihr kompetenter Partner“, „grüne Reinigung“ ohne Nachweis.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten: Text über Spalte 1 bis 5, Foto über 6 bis 12 bis an den rechten Rand; mobil Foto oben, Text darunter.
  • Hero-Bild: Echtes Foto aus einem betreuten Objekt mit Mitarbeitenden, 3:2 Desktop, 4:5 mobil.
  • Überschrift: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem), Strichpunkt Sans wdth 140, wght 700, oben im Textblock, kein Label darüber.
  • Handlung: Objektart als vier bis sechs Knöpfe (führen in die Anfrage mit Vorauswahl), daneben „Anrufen“ als tel:-Link mit sichtbarer Nummer.
  • Zusatz: Region als Zeile unter der H1; mobil untere Leiste Anrufen / Besichtigung / WhatsApp.
  • Sektionsabstand: clamp(64px, 8vw, 112px)
  • Dichte: mittel
  • Raum: Klar und luftig wie ein leerer Flur: Tabellen dicht (12 px Zeilenabstand), Sektionen mit viel Abstand, Objektarten als Liste mit 24 px zwischen den Punkten.
  • Spalten: 12
  • Maximale Breite: 1280px
  • Raster: Hero 5/7 (Text links, Foto randabfallend rechts). Objektarten als zweispaltige Liste, Turnus-Tabelle über 12 Spalten, mobil waagerecht scrollbar mit fester erster Spalte.
  • Radius klein: 2px
  • Radius groß: 4px
  • Schatten: keiner
  • Form: Kanten fast eckig wie Fliesenfugen. Flächen trennen sich über Fliesengrau, nicht über Schatten.
Vorbilder