01 Handwerk
Gebäudereinigung
Sechs Wege zum selben Gewerk: Leistungsverzeichnis mit Filter, Vorher-Nachher-Schieber, Wochenplan, Bauphasen, Team zum Umdrehen und eine Anfrage mit Rechner.
Musterbetrieb Muster Gebäudereinigung GmbHOrt HannoverRufnummer 0511 000000, nicht zuteilbar
01Objektliste
Das Objektverzeichnis steht als Tabelle direkt im ersten Bildschirm. Filterchips grenzen die Liste nach Objektart ein und jede Zeile klappt Leistungsumfang, Turnus und Inklusivleistungen auf.
Passt, wenn der Betrieb viele Objektarten betreut und seine Leistungen wie in einem Verzeichnis zeigen will.
handwerk/gebaeudereinigung/01-objektliste.html
Entwurf 01 öffnen→
02Glanz
Ein Vorher-Nachher-Schieber durch eine Fensterfront füllt den ersten Bildschirm über die volle Breite. Darunter folgen eine blätterbare Galerie mit einem Ergebnisbild je Leistung und ein Prüflauf in vier Blöcken.
Passt, wenn Glasreinigung und sichtbare Ergebnisse das Aushängeschild des Betriebs sind.
handwerk/gebaeudereinigung/02-glanz.html
Entwurf 02 öffnen→
03Turnus
Eine Wochenleiste mit großen Tageskacheln von Montag bis Samstag eröffnet die Seite. Tag-Reiter schalten im Wochenplan durch die Leistungen des Tages, dazu gibt es Knöpfe für den vorherigen oder nächsten Tag.
Passt, wenn Unterhaltsreinigung im festen Wochenturnus das Kerngeschäft ist.
handwerk/gebaeudereinigung/03-turnus.html
Entwurf 03 öffnen→
04Bauphasen
Auf dunklem Grund steht eine zentrierte Schlagzeile über dem Zeitstrahl der vier Stationen, der sich beim Scrollen füllt. Aufklapper zeigen je Bauphase Leistung, Dauer und Vorbereitung, darunter folgt die Tabelle zum Zeitrahmen.
Passt, wenn der Betrieb vor allem Bauendreinigung für Bauträger und Handwerk anbietet.
handwerk/gebaeudereinigung/04-bauphasen.html
Entwurf 04 öffnen→
05Team
Neben der Schlagzeile läuft eine Reihe aus Portraitkarten mit Name und Objekt als Karussell. Per Knopf drehen sich die Karten um und zeigen Zuständigkeit sowie Vertretung, unten folgen Einweisung und Personalfragen.
Passt, wenn feste Reinigungskräfte und benannte Vertretungen das stärkste Argument des Betriebs sind.
handwerk/gebaeudereinigung/05-team.html
Entwurf 05 öffnen→
06Anfrage
Links steht die Rufnummer, rechts führt ein Stepper in drei Schritten durch Objekt, Fläche und Turnus. Der einzige Rechner der Kategorie macht daraus eine unverbindliche Richtspanne je Monat, danach folgen Fragen zur Anfrage.
Passt, wenn Anfragen am Telefon ankommen sollen und Kunden vorab eine Richtspanne sehen möchten.
handwerk/gebaeudereinigung/06-anfrage.html
Entwurf 06 öffnen→02 Handwerk
Dachdecker
Sechs Wege aufs Dach: Referenzgalerie, anklickbarer Dachaufbau, Checkliste für den Sturmschaden, Sanierungsrechner, Projektakte mit Filter und ein Aufmaßtermin in drei Schritten.
Musterbetrieb Dachdeckerei Mustermann GmbHOrt BielefeldRufnummer 0521 000000, nicht zuteilbar
01Firstlinie
Dunkler Vollbild-Einstieg mit Dachsilhouette in Ziegelrot, deren schräge Firstlinie über die ganze Breite läuft. Darunter blättert eine Referenzgalerie mit drei Arbeiten per Pfeil oder Wischen, die Leistungen öffnen sich als Aufklapper.
Passt, wenn ein Dachdecker vor allem mit fertigen Dächern aus der Gegend überzeugen will.
handwerk/dachdecker/01-firstlinie.html
Entwurf 01 öffnen→
02Schichten
Heller Einstieg direkt mit einem Dachquerschnitt auf Kiesgrund, dessen fünf Lagen sich per Klick auf Nummer oder Schicht erklären. Reiter wechseln zwischen Kiesdach, Gründach und Photovoltaik, eine Richtwerttabelle ordnet die Kosten ein.
Passt, wenn der Betrieb Flachdächer abdichtet und Planern den Aufbau fachlich zeigen will.
handwerk/dachdecker/02-schichten.html
Entwurf 02 öffnen→
03Sturm
Dunkles Notfallband mit großer Rufnummer und Bereitschaftsstatus in Warngelb auf Sturmblau. Kern ist eine Checkliste mit neun Punkten zum Abhaken samt Zähler, eine Notrufleiste bleibt beim Scrollen sichtbar.
Passt, wenn ein Dachdecker Notdienst bei Sturm- und Hagelschäden anbietet.
handwerk/dachdecker/03-sturm.html
Entwurf 03 öffnen→
04Sanierung
Heller zentrierter Einstieg auf Schieferdeckung in Schiefergrün, darunter sieben Wochenkarten der Sanierung als Leiste. Die Wochen öffnen sich als Aufklapper, ein Kostenrechner mit Reglern und Häkchen liefert eine grobe Spanne.
Passt, wenn ein Betrieb komplette Dachsanierungen mit Dämmung über mehrere Wochen ausführt.
handwerk/dachdecker/04-sanierung.html
Entwurf 04 öffnen→
05Bauakte
Heller Einstieg mit gefächerten Aktenblättern in Beige und Tinte direkt unter der Schlagzeile. Sechs Blätter der Projektakte lassen sich per Filterchips nach Dachart eingrenzen und einzeln aufklappen.
Passt, wenn ein Dachdecker viele Referenzen hat und sie sachlich nach Dachart ordnen will.
handwerk/dachdecker/05-bauakte.html
Entwurf 05 öffnen→
06Aufmaß
Dunkler geteilter Einstieg in Anthrazit und Kupfer mit Wochentag-Chips links und dem Aufmaßblatt rechts, das den Wunschtag übernimmt. Darunter führt ein Stepper mit Zurück und Weiter durch die drei Schritte des Termins.
Passt, wenn ein Betrieb mit einem kostenlosen Aufmaß vor Ort als erstem Schritt wirbt.
handwerk/dachdecker/06-aufmass.html
Entwurf 06 öffnen→03 Handwerk
Elektrotechnik
Sechs Wege zum Elektrobetrieb: Leistungen als Reiter, anklickbarer Schaltplan, Ladezeit-Rechner, Kacheln mit Filter, Ablauf als Leitung und eine Checkliste für den Notfall.
Musterbetrieb Elektro Musterbetrieb GmbHOrt KasselRufnummer 0561 000000, nicht zuteilbar
01Meisterbetrieb
Zentrierter Einstieg mit Serifenschlagzeile und gezeichnetem Meisterbrief auf hellem Grund in Marineblau. Bedienung über eine Reiterleiste für vier Leistungsbereiche und FAQ-Aufklapper.
Passt, wenn ein Meisterbetrieb ruhig und seriös mit klar getrennten Leistungsbereichen auftreten will.
handwerk/elektrotechnik/01-meisterbetrieb.html
Entwurf 01 öffnen→
02Schaltplan
Direkter Einstieg mit dunklem Schaltplan in Kupfer und Cyan links neben der Schlagzeile. Fünf anklickbare Stromkreise zeigen rechts die Leistung, vier Schalter blenden die Ebenen Energie, Daten, Bus und Laden ein oder aus.
Passt, wenn ein Betrieb Installation, Datennetz, Gebäudeautomation und Ladetechnik technisch zeigen will.
handwerk/elektrotechnik/02-schaltplan.html
Entwurf 02 öffnen→
03Ladepunkt
Vollbild-Einstieg mit Hauswand, Zählerschrank und Wallbox als durchgehende Leitung in hellem Grünblau. Ein Ladezeitrechner mit vier Schiebereglern und drei Beispielfällen liefert eine unverbindliche Schätzung.
Passt, wenn ein Betrieb vor allem Wallboxen und Ladepunkte für Haus, Tiefgarage und Firmenhof baut.
handwerk/elektrotechnik/03-ladepunkt.html
Entwurf 03 öffnen→
04Schalttafel
Einstieg als Reihe von Bento-Kacheln in Grau und Signalgelb über einem Klemmenraster. Filterchips für Privat, Gewerbe und Vermietung blenden Leistungskacheln ein, jede Kachel klappt ihre Einzelheiten auf.
Passt, wenn ein Betrieb viele Leistungen für Privat, Gewerbe und Vermietung übersichtlich anbieten will.
handwerk/elektrotechnik/04-schalttafel.html
Entwurf 04 öffnen→
05Stromkreis
Einstieg mit Schlagzeile über einem dunklen Band, dessen gelbe Leitung beim Scrollen fünf Schritte vom Anruf bis zur Abnahme durchläuft. Darunter folgt die Zeitleiste mit Schrittanzeige und Aufklappern je Schritt.
Passt, wenn ein Betrieb die Scheu vor Arbeiten in der Wohnung mit einem klaren Ablauf abbauen will.
handwerk/elektrotechnik/05-stromkreis.html
Entwurf 05 öffnen→
06Kurzschluss
Geteilter Einstieg mit Notdienst und Rufnummer links auf dunklem Rot, rechts eine Selbsthilfe-Checkliste mit vier Haken und Zähler. Eine klebende Anrufleiste bleibt beim Scrollen am unteren Rand.
Passt, wenn ein Betrieb Störungsdienst und schnelle Erreichbarkeit in den Vordergrund stellt.
handwerk/elektrotechnik/06-kurzschluss.html
Entwurf 06 öffnen→04 Gastronomie
Asiatisch
Sechs Wege in die asiatische Küche: Karte mit Filter, Abendgalerie, Mittagstisch nach Wochentag, Platz an der Theke, Abholzeit-Rechner und ein Grundriss des Gastraums.
Musterbetrieb Muster Wok GmbHOrt DresdenRufnummer 0351 000000, nicht zuteilbar
01Karte
Die Speisekarte steht schon im ersten Bildschirm in drei Spalten mit Nummern und Preisen. Eine Sprungleiste führt zu den Kategorien, Filterchips für vegetarisch, scharf, Wok und Suppe blenden Gerichte ein oder aus.
Passt, wenn Gäste vor allem die Karte lesen und telefonisch nach Nummer bestellen.
gastro/asiatisch/01-karte.html
Entwurf 01 öffnen→
02Dampf
Der Einstieg ist eine dunkle Bühne im Vollbild mit aufsteigendem Dampf über Ramen und Bambuskorb. Darunter folgen eine Galerie zum seitlichen Wischen, eine Preistabelle für Runden und Aufklapper mit Fragen vor der Reservierung.
Passt, wenn ein Restaurant abends Stimmung zeigen will und Gruppen zum Teilen einlädt.
gastro/asiatisch/02-dampf.html
Entwurf 02 öffnen→
03Mittagstisch
Ein helles Band zeigt die fünf Wochentage als Anhänger am Bambusrohr und hebt den heutigen oder nächsten Tag hervor. Kernstück ist die Wochenkarte mit Reitern von Montag bis Freitag und Knöpfen für den vorherigen und nächsten Tag.
Passt, wenn ein Lokal in einer Bürolage vom Mittagsgeschäft und von Vorbestellungen lebt.
gastro/asiatisch/03-mittagstisch.html
Entwurf 03 öffnen→
04Theke
Geteilter Einstieg mit der Schlagzeile links und einem Thekenplan rechts, auf dem man einen der vierzehn Plätze wählt. Weiter unten folgen die Gänge des Abends senkrecht mit Menüwahl und am Ende Aufklapper mit Fragen vor dem Service.
Passt, wenn ein Betrieb an einer offenen Theke in festen Runden mit mehreren Gängen serviert.
gastro/asiatisch/04-theke.html
Entwurf 04 öffnen→
05Abholung
Zentrierter Einstieg mit großer Rufnummer und einer Abholuhr. Ein Regler für die Anrufzeit und Zähler je Gericht ergeben im Rechner die geschätzte Abholzeit, die Zeitleiste darunter zeigt den Aufschlag je Stunde.
Passt, wenn ein Imbiss vor allem telefonische Bestellungen zum Abholen annimmt.
gastro/asiatisch/05-abholung.html
Entwurf 05 öffnen→
06Gastraum
Der Einstieg zeigt die vier Sitzbereiche als Karten nebeneinander unter einem Band mit Kennzahlen. Weiter unten führt ein Grundriss mit anklickbaren Bereichen zur Beschreibung, dazu kommen Aufklapper für Öffnungszeiten und Fragen.
Passt, wenn ein Restaurant mit verschiedenen Sitzbereichen Gäste vor Ort bewirtet.
gastro/asiatisch/06-gastraum.html
Entwurf 06 öffnen→05 Gastronomie
Italienisch
Sechs Wege zur italienischen Küche: Tageskarte als Reiter, Pizza-Rechner am Steinofen, Menü in Gängen, Liefergebiet zum Anklicken, Weinkarte nach Regionen und eine Uhrzeitwahl für den Tisch.
Musterbetrieb Osteria Muster GmbHOrt KölnRufnummer 0221 000000, nicht zuteilbar
01Trattoria
Die Tafel mit vier Tagesempfehlungen und dem Menü des Tages steht direkt im ersten Bildschirm. Darunter wechseln Reiter zwischen Mittag, Abend und Dolci, die Allergene klappen je Tageszeit auf.
Passt, wenn die Küche täglich nach dem Einkauf kocht und Gäste zuerst die Tageskarte sehen sollen.
gastro/italienisch/01-trattoria.html
Entwurf 01 öffnen→
02Forno
Der Einstieg zeigt den glühenden Steinofen als Vollbild mit der Schlagzeile darauf. Im Rechner wählen Gäste Pizza, Teig, Rand, Extras und Anzahl und sehen sofort eine unverbindliche Schätzung samt Vorlaufzeit.
Passt, wenn eine Pizzeria mit Holzofen Abholung per Telefon anbietet und Preise nachvollziehbar zeigen will.
gastro/italienisch/02-forno.html
Entwurf 02 öffnen→
03Gänge
Eine zentrierte Schlagzeile steht über einem gedeckten Tisch von oben. Die vier Gänge laufen als Bahn mit Pfeilen und Sprungknöpfen, drei Knöpfe wählen das Menü mit drei, vier oder fünf Gängen.
Passt, wenn ein Restaurant abends feste Menüfolgen anbietet und Gäste die Zahl der Gänge vorab abwägen.
gastro/italienisch/03-gaenge.html
Entwurf 03 öffnen→
04Lieferung
Links stehen Schlagzeile und Bestellnummer, rechts eine Karte mit drei antippbaren Lieferzonen. Jede Zone zeigt Mindestbestellwert, Lieferzeit und Gebühr, eine klebende Leiste hält Zone und Anrufknopf sichtbar.
Passt, wenn eine Pizzeria in Zonen ausliefert und Bestellungen am Telefon annimmt.
gastro/italienisch/04-lieferung.html
Entwurf 04 öffnen→
05Cantina
Sechs gezeichnete Flaschen stehen als Kartenreihe je Anbaugebiet im ersten Bildschirm. Filterchips für Region, Farbe und Preis grenzen die 18 Weine ein, jeder Wein klappt seine Notiz auf.
Passt, wenn Wein im Mittelpunkt steht und das Haus offen im Glas sowie flaschenweise ausschenkt.
gastro/italienisch/05-cantina.html
Entwurf 05 öffnen→
06Tisch
Ein breites Band zeigt die Schlagzeile auf Terrazzo, darunter die Rufnummer in Plakatgröße. Ein Zeitstrahl mit neun Uhrzeiten füllt eine Reservierungskarte mit dem Satz fürs Telefon und dem Anrufknopf, dazu klappen Fragen auf.
Passt, wenn Reservierungen nur telefonisch laufen und der Abend zu Stoßzeiten schnell voll ist.
gastro/italienisch/06-tisch.html
Entwurf 06 öffnen→06 Gastronomie
Burger & amerikanisch
Sechs Wege in denselben Laden: Tagesleiste im Diner, Burger zum Selberbauen, Fleischwahl im Smokehouse, Kreidetafel mit Filter, Aufrufanzeige am Tresen und drei Karten zum Umdrehen.
Musterbetrieb Muster Burgerladen GmbHOrt LeipzigRufnummer 0341 000000, nicht zuteilbar
01Diner
Ein Neonschild über die volle Bildschirmbreite eröffnet die Seite, darunter stehen Öffnungszeiten und Plätze in vier Chromzahlen. Reiter für Frühstück, Mittag, Abend und Nacht wechseln Gerichte und Stimmung, die Fragen klappen wie eine Musikbox auf.
Passt, wenn ein Diner vom Frühstück bis spät in die Nacht geöffnet hat.
gastro/burger/01-diner.html
Entwurf 01 öffnen→
02Bauen
Der Einstieg zeigt den Burger als Stapel aus sechs Lagen, jede Lage klappt daneben mit ihrer Beschreibung auf. Im Bauplan wählen Gäste Brötchen, Patty, Käse, Saucen und Auflagen, die Zeichnung baut mit und eine Schätzung rechnet den Preis.
Passt, wenn Gäste ihren Burger aus festen Zutaten mit Aufpreis selbst zusammenstellen.
gastro/burger/02-bauen.html
Entwurf 02 öffnen→
03Smokehouse
Ein dunkles Rauchband zeigt gleich oben die Garzeiten von Brisket, Pulled Pork und Ribs als Balken. Darunter wählen Gäste ein Stück aus oder blättern mit zwei Knöpfen weiter, daneben stehen Garzeit, Hitze und Holz.
Passt, wenn ein Grill Fleisch lange räuchert und die Garzeiten zeigen möchte.
gastro/burger/03-smokehouse.html
Entwurf 03 öffnen→
04Tafel
Die Kreidetafel mit der ganzen Karte füllt schon den ersten Bildschirm. Filterchips für Rind, Schwein, pflanzlich und scharf blenden Gerichte aus, die Schärfeleiter und die Fragen klappen einzeln auf.
Passt, wenn die Karte täglich wechselt und Gäste nach Fleisch oder Schärfe suchen.
gastro/burger/04-tafel.html
Entwurf 04 öffnen→
05Tresen
Oben steht zentriert ein Bestellbon mit Abholnummer, darunter der Laden in vier Zahlen. Die Aufrufanzeige lässt sich anhalten oder zur nächsten Nummer schalten, zwei Aufklapper nennen je Wochentag die ruhigsten Zeiten.
Passt, wenn am Tresen bestellt wird und Gäste ihr Tablett nach Nummer abholen.
gastro/burger/05-tresen.html
Entwurf 05 öffnen→
06Klassiker
Drei Schilder mit Burger und Preis stehen im Einstieg nebeneinander. Ein Knopf dreht jedes Schild um und zeigt auf der Rückseite die Zutaten, weiter unten folgen Küche, Fragen und Zeiten.
Passt, wenn ein Laden nur wenige Burger anbietet und diese groß zeigen will.
gastro/burger/06-klassiker.html
Entwurf 06 öffnen→07 Befüllen
Vom Entwurf zur fertigen Seite
Die Karten oben öffnen Beispielansichten mit Musterdaten. Befüllt werden immer die Vorlagen mit Platzhaltern, die als eigenes Paket kommen. Darin liegen alle 36 Vorlagen, die Befüllregeln als BEFUELLUNG.md, dieselben Regeln maschinenlesbar als befuellung.json und eine Liste der Prüfsummen.
Jede Vorlage ist eine einzelne HTML-Datei ohne Bauschritt und ohne fremde Server. Beispielinhalte wie Leistungen, Gerichte und Preise stehen im Kopfkommentar jeder Datei und werden durch die echten Angaben des Betriebs ersetzt.
{{firma}}Voller Firmenname mit Rechtsform, steht im Seitentitel und im Fuß.{{firmaKurz}}Kurzform ohne Rechtsform für Logo und Fließtext. Fehlt sie, den vollen Namen einsetzen.{{stadt}}Ort des Betriebs, steht im Titel und in den Vorzeilen.{{telefon}}Rufnummer im Text wie gewohnt geschrieben, im Verweis tel: ohne Leerzeichen.{{ansprechpartner}}Person für den Kontakt. Darf leer bleiben, die Zeile verschwindet dann von selbst.{{gewerk}} / {{kueche}}Kategorie, zum Beispiel Dachdeckerei oder Italienische Küche.{{farbe}}Hausfarbe als Hexwert wie #1b4f8f. Alle weiteren Töne leiten sich daraus ab.Eine Farbe genügt
Die Hausfarbe wird an genau einer Stelle eingesetzt. Bleibt {{farbe}} leer, greift der Vorschauton des Entwurfs.
Fotos nach Liste
Jeder Bildplatz trägt data-motiv mit der Beschreibung des gewünschten Fotos. Die vollständige Liste steht in befuellung.json.
Nichts erfinden
Bewertungen, Sterne, Auszeichnungen und Gründungsjahre kommen nur auf die Seite, wenn der Betrieb sie belegt.
Vor der Abgabe ansehen
Jede befüllte Seite einmal am Rechner und am Handy öffnen. Kein Platzhalter darf stehen bleiben.