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
Der Einstieg zeigt direkt das Leistungsverzeichnis mit fünf Objektarten als Tabelle im ersten Bildschirm. Filterchips zum Ankreuzen grenzen die Liste ein, jede Zeile klappt Umfang und Turnus auf.
Passt, wenn Hausverwaltungen und Büros vor dem Anruf schriftlich nachlesen wollen, was je Objektart im Preis steckt.
handwerk/gebaeudereinigung/01-objektliste.html
Entwurf 01 öffnen→
02Glanz
Der Einstieg ist ein Vorher-Nachher-Schieber über die volle Breite, der dieselbe Fensterfront vor und nach dem Termin zeigt. Darunter blättert eine Ergebnisgalerie mit zwei Knöpfen durch sechs Leistungen.
Passt, wenn ein Betrieb mit sichtbarem Ergebnis an Glas und Böden überzeugen will.
handwerk/gebaeudereinigung/02-glanz.html
Entwurf 02 öffnen→
03Turnus
Der Einstieg ist ein Band mit der Beispielwoche von Montag bis Samstag als große klickbare Tage. Im Wochenplan wählen Tag-Reiter und zwei Blätterknöpfe den Tag, am Handy steht immer nur ein Tag offen.
Passt, wenn feste Reinigungstage und dieselbe Kraft je Objekt das stärkste Argument sind.
handwerk/gebaeudereinigung/03-turnus.html
Entwurf 03 öffnen→
04Bauphasen
Der Einstieg ist zentriert mit großer Schlagzeile und einem Zeitstrahl der vier Stationen am Bau, der sich beim Scrollen füllt. Die drei Phasen öffnen sich als Aufklapper mit Leistung, Dauer und Vorbereitung.
Passt, wenn ein Betrieb Bauendreinigung für Bauträger in mehreren Einsätzen entlang des Bauzeitenplans anbietet.
handwerk/gebaeudereinigung/04-bauphasen.html
Entwurf 04 öffnen→
05Team
Der Einstieg ist eine Portraitreihe zum Wischen mit Name und Objekt je Kraft, dazu zwei Blätterknöpfe. Im Team drehen sich die Personenkarten per Knopf um und zeigen Zuständigkeit und Vertretung.
Passt, wenn Kunden wissen wollen, wer genau zu ihnen kommt und wer im Ausfall vertritt.
handwerk/gebaeudereinigung/05-team.html
Entwurf 05 öffnen→
06Anfrage
Der Einstieg ist geteilt mit großer Rufnummer links und einem Anfrage-Stepper in drei Schritten rechts. Der Rechner nennt aus Objektart, Fläche und Turnus eine unverbindliche Richtspanne, am Handy klebt eine Anrufleiste.
Passt, wenn Anfragen am Telefon landen sollen und der Kunde vorher eine grobe Monatsspanne sehen will.
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, dessen fünf Lagen sich per Klick auf Nummer oder Schicht erklären. Reiter wechseln zwischen Kiesdach, Gründach und Photovoltaik, darunter folgen vier Leistungsblöcke mit Bildern.
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 Einstieg mit zentrierter Schlagzeile auf Schiefergrün, darunter sieben Wochenkarten der Sanierung als Leiste. Die Wochen öffnen sich als Aufklapper mit grober Spanne, ein Kostenrechner liefert eine unverbindliche Schätzung.
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 Meisterbrief-Siegel 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 in einen dunklen Schaltplan in Kupfer und Cyan. Fünf anklickbare Stromkreise zeigen daneben 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 als dunkles Band mit gelber Leitung, die beim Scrollen durch fünf Schritte vom Anruf bis zur Abnahme leuchtet. 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
Der Einstieg führt direkt in die Speisekarte mit 32 Positionen in sechs Abschnitten auf Papierfaser in Jadegrün. Bedienen lässt sie sich über Filterchips für vegetarisch, scharf, Wok und Suppe sowie über eine klebende Sprungleiste zu den Kategorien.
Passt, wenn die Karte groß ist und Gäste schon vor dem Anruf nach vegetarisch oder scharf suchen.
gastro/asiatisch/01-karte.html
Entwurf 01 öffnen→
02Dampf
Der Einstieg ist eine dunkle Vollbildbühne mit Lampe und aufsteigendem Dampf, der bei reduzierter Bewegung stillsteht. Kernstück ist eine wischbare Abendgalerie mit Pfeilen und Punkten, im Reservierungsteil stehen fünf Aufklapper von Abendzeiten bis Abholung.
Passt, wenn das Haus vor allem abends öffnet und Stimmung mehr verkauft als eine lange Karte.
gastro/asiatisch/02-dampf.html
Entwurf 02 öffnen→
03Mittagstisch
Der Einstieg ist ein helles Band mit den fünf Wochentagen an einem Bambusrohr, der heutige oder nächste Tag ist hervorgehoben. Kernstück ist die Wochenkarte mit Tag-Reitern von Montag bis Freitag samt Knöpfen für den vorherigen und nächsten Tag.
Passt, wenn das Restaurant in einer Bürolage liegt und mittags wechselnde Tagesgerichte anbietet.
gastro/asiatisch/03-mittagstisch.html
Entwurf 03 öffnen→
04Theke
Der Einstieg ist geteilt, neben der Schlagzeile steht ein Thekenplan mit 14 wählbaren Hockern und einer Anzeige zum gewählten Platz. Kernstück ist die Sicht vom Platz mit den fünf Gängen senkrecht als Aufklapper auf dunkler Holzmaserung.
Passt, wenn Gäste an einer offenen Theke sitzen und die Küche mit wenigen Plätzen arbeitet.
gastro/asiatisch/04-theke.html
Entwurf 04 öffnen→
05Abholung
Der Einstieg ist zentriert mit großer Rufnummer neben einer gezeichneten Abholuhr auf Kraftpapier. Kernstück ist der Abholrechner mit Schieber für die Anrufzeit und Mengenknöpfen je Gericht, dazu eine Zeitleiste, die ihn per Knopf auf eine Stunde setzt.
Passt, wenn das Haus viel zum Mitnehmen verkauft und Bestellungen am Telefon annimmt.
gastro/asiatisch/05-abholung.html
Entwurf 05 öffnen→
06Gastraum
Der Einstieg zeigt die vier Sitzbereiche als Karten im ersten Bildschirm unter warmem Laternenlicht. Kernstück ist ein Grundriss mit vier anklickbaren Bereichen und passender Beschreibung, dazu ein Aufklapper mit den Öffnungszeiten der Woche.
Passt, wenn der Gastraum unterschiedliche Plätze bietet und Gäste vorab ihren Tisch wählen wollen.
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 Reservierungsplakat zeigt die Schlagzeile mit neun Uhrzeit-Chips. Die Uhrzeitwahl sagt zu jeder Zeit, was am Telefon gilt, dazu gibt es einen Anrufknopf und aufklappbare Fragen.
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
Vollbild mit Neonschild vor dem nächtlichen Diner-Fenster, darauf Name, Öffnungsstatus und Anrufknopf. Vier Tageszeit-Reiter zeigen Frühstück bis Nacht, dazu ein Grundriss der Plätze und ein Musikbox-Aufklapper.
Passt, wenn der Laden vom Frühstück bis in die Nacht offen hat und Gäste zwischen Theke, Nische und Fenster wählen.
gastro/burger/01-diner.html
Entwurf 01 öffnen→
02Bauen
Geteilter Einstieg mit gezeichnetem Burgerstapel neben sechs Lagen zum Aufklappen. Im Bauplan wählen Gäste Brötchen, Patty, Käse, Sauce und Beläge, die Zeichnung baut mit und eine unverbindliche Schätzung nennt den Preis.
Passt, wenn Gäste ihren Burger Lage für Lage selbst zusammenstellen und der Preis von der Auswahl abhängt.
gastro/burger/02-bauen.html
Entwurf 02 öffnen→
03Smokehouse
Dunkles Band über die volle Breite mit Schlagzeile und den Garzeiten von Brisket, Pulled Pork und Ribs. Eine Radiowahl zeigt je Stück Garzeit, Hitze und Holz, dazu Belegungsplan der Kammer, Karte mit Zeichen und Richtwerte für Runden.
Passt, wenn Fleisch stundenlang im Smoker gart und der Vorrat am Tag begrenzt ist.
gastro/burger/03-smokehouse.html
Entwurf 03 öffnen→
04Tafel
Die Kreidetafel steht direkt im ersten Bildschirm mit allen Burgern, Beilagen und Getränken samt Preisen. Filterchips für Rind, Schwein, Pflanzlich und Scharf blenden Gerichte aus, dazu Schärfeleiter und Fragen als Aufklapper.
Passt, wenn die Karte täglich wechselt und Gäste schnell nach Rind, pflanzlich oder scharf suchen wollen.
gastro/burger/04-tafel.html
Entwurf 04 öffnen→
05Tresen
Zentrierte Schlagzeile über einem großen Bestellbon mit Abholnummer und Erklärungen zum Ablauf. Eine Aufrufanzeige ruft per Knopf die nächste Nummer auf oder hält an, dazu Stoßzeiten je Wochentag als Aufklapper mit Säulen.
Passt, wenn am Tresen bestellt und per Nummer abgeholt wird.
gastro/burger/05-tresen.html
Entwurf 05 öffnen→
06Klassiker
Reihe aus drei großen Emailleschild-Karten mit Nummer, Zeichnung und Preis im ersten Bildschirm. Ein Knopf dreht jede Karte auf die Zutaten um, dazu eine Beispieltabelle für Runden und eine klebende Anrufleiste.
Passt, wenn die Karte klein ist und Gäste am Tresen nur eine Nummer sagen.
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.