Tokens und Komponenten des Entwurfs für HVIS.de. Alles hier ist in assets/hvis.css definiert; die Seiten Startseite, Projekte, Projektblatt und Kontaktanfrage bauen nur daraus.
Jede Seite ist ein Blatt, wie es der Betrieb auf der Baustelle ausfüllt: weißes Papier mit Millimeterraster in Markenrot, Tinte für Text, Bleistift für Maße, ein roter Stempel für alles, was belegbar ist, Handschrift für die persönliche Anmerkung. Der Formularkopf trägt Logo, Blatt-Nummer, Datum und die Telefonnummer, auf jeder Seite gleich.
Rot trägt ganze Flächen, nicht nur Akzente: das zweite Blatt „Hausverwaltung“, die Anfrage-Blätter der Unterseiten und der Fußrand sind rote Durchschläge. Darauf steht Text ausschließlich in Weiß.
Eine Markenfarbe, Tinte in drei Stufen, Weiß. Kontraste gegen Weiß, bei „auf Rot“ gegen Markenrot. Auf Rot bekommt Text unter 24 px immer Weiß, nie ein helles Rosa.
Drei Schriften, jede mit einer Aufgabe. Barlow Condensed ist die gedruckte Formularschrift: Titel, Beschriftungen, Knöpfe, Maßzahlen. Barlow ist der Fließtext. Nothing You Could Do ist die Handschrift des Inhabers, nur für Anmerkungen, nie für Pflichtinformation. Im Entwurf über Google Fonts geladen; in der Umsetzung selbst hosten.
Handwerksarbeiten rund ums Haus.
Was wir machen
Untergrundbehandlung: Fliese auf Fliese
Wer sind Sie?
Mirco Grahl misst vor Ort auf und bespricht die Ausführung mit Ihnen.
Der Altbelag wird auf Hohlstellen geprüft, gereinigt und mit einer Haftbrücke versehen. Was hohl klingt, kommt raus und wird gespachtelt.
Maße in Metern, Beispielwerte des Entwurfs.
Ansprechpartner
Beratung vor Ort – wir messen auf.
3.420 · 2.610 · 25.08. – 19.09.2026
| Regel | Wert |
|---|---|
| Zeilenlänge Fließtext | 66 Zeichen (--w-text), Lead 44 Zeichen |
| Zeilenhöhe | Fließtext 1,55 · Lead 1,45 · Titel 0,98 bis 1,15 |
| Laufweite | Titel −0,02 em · Beschriftungen +0,08 em · Knöpfe +0,08 em |
| Versalien | Nur Beschriftungen, Knöpfe, Registerreiter und die Kopfzeile eines Stempels. Nie Fließtext. |
| Ziffern | Tabellarisch (.num) in Maßen, Daten, Telefonnummern |
| Umbruch | Überschriften text-wrap: balance, Absätze pretty |
Das Blatt ist Millimeterpapier: eine Zelle misst 16 px (--mm), jede fünfte Linie ist stärker (--cm, 80 px). Abstände folgen einer Reihe von 4 bis 160 px. Mehr Raum über einer Überschrift als darunter; enge Gruppen, weite Trennung.
| Maß | Wert |
|---|---|
| Inhaltsbreite | 1320 px (--w-max), Seitenrand 16 bis 48 px (--gutter) |
| Blatt-Abstand (Sektion) | --s-9: 64 bis 112 px oben und unten, Trennung durch 1-px-Linie |
| Umbruchpunkte | 1100 px (Kopf-Meta reduziert, Fußrand 2 Spalten) · 980 px (Menüknopf statt Reiter) · 900 px (Spalten stapeln) · 760 px (1 Spalte) |
| Ecken | 0 px auf Blättern, 2 px auf Knöpfen und Feldern, 3 px auf Stempeln |
| Schatten | Nur für schwebende Flächen (Menü, Kurzmeldung): --shadow-lift, mit Versatz und weichem Rand |
Der Kopf bleibt beim Scrollen stehen: Logo unverändert bei 44 px Höhe, Meta-Felder (Blatt, Betrieb, Datum), roter Anruf-Knopf. Darunter die sieben Registerreiter in fester Reihenfolge. Aktiv ist rot gefüllt, beim Überfahren wächst eine rote Linie von links. Punkte ohne Zielseite stehen in Bleistift und geben beim Klick eine Kurzmeldung. Unter 980 px ersetzt ein Menüknopf die Reiter; sie klappen als Liste aus.
Ein roter Knopf pro Blatt für die Hauptaktion, meist Anruf oder Kontaktanfrage. Der zweite Knopf ist umrandet. Knöpfe drücken sich beim Klick 1 px nach unten; beim Laden ersetzt ein Ring die Beschriftung. Textlinks mit Pfeil führen zu Unterseiten.
Die Maßlinie ist das Signaturelement: eine 1-px-Linie mit schrägen Endstrichen wie auf einer Bauzeichnung, die Zahl in Barlow Condensed auf der Linie. Der Rahmen .mass-rahmen legt eine waagerechte Linie über und eine senkrechte neben ein Bild. Maße tragen echte oder als Beispiel gekennzeichnete Werte, nie Dekoration.
Markup: <span class="mass mass--h"><i></i><b>3.420</b></span>. Das <i> ist die Linie mit Endstrichen, das <b> die Zahl.
Ein Stempel steht nur für etwas, das der Betrieb belegen kann: Partnerschaft, Zertifikat, Betriebsalter, Mitarbeiter. Die Kopfzeile ist in Versalien, die zweite Zeile erklärt. Stempel stehen leicht schräg, in Reihen wechselt die Neigung. Rot für Partner und Zertifikate, Tinte für Betriebsfakten, Weiß auf roten Blättern.
Ein Feld hat die Beschriftung oben in Versalien und den Wert darunter, getrennt durch Linien wie auf einem Formular. Positionszeilen ersetzen Leistungskarten: Titel mit Unterzeile, Text, rechts ein Fakt. Beim Überfahren legt sich ein roter Wash unter die Zeile.
Verlegung großformatiger Fliesen mit Untergrundbehandlung und Nivelliersystem.
ab 60 × 120 cmWedi-Bauplatten und Duschelemente, Triflex-Flüssigabdichtung.
Wedi · TriflexEingaben haben 1-px-Rahmen in Tinte, 48 px Höhe, 2 px Ecken. Fokus: roter Rahmen und roter Wash-Ring. Fehler: 2-px-Rahmen in Rot tief und eine Zeile, die das Problem und den Weg nennt. Die Themenwahl ist eine Registerzelle, kein Radiokreis. Pflichtfelder tragen ein rotes Sternchen.
Die E-Mail-Adresse ist unvollständig. Beispiel: name@beispiel.de
Eine Meldung nennt in der ersten Zeile, was passiert ist, und in der zweiten, was jetzt zu tun ist. Erfolg in Grün, Fehler in Rot tief auf rotem Wash, Hinweise mit gestricheltem Rahmen. Kurzmeldungen erscheinen unten in der Mitte und verschwinden nach drei Sekunden.
Danke, Frau Beispiel. Ihre Anfrage zum Thema „Handwerksarbeiten“ liegt bei Mirco Grahl. Sie erhalten eine Bestätigung an name@beispiel.de.
Bitte prüfen Sie die markierten Felder. Wir brauchen Name, E-Mail, Thema und Ihre Zustimmung, um zurückzurufen.
Orte, Zeiträume und Beschreibungen ersetzt der Betrieb durch echte Projekte; Fotos werden nachgeliefert.
Jedes Projekt läuft durch vier Phasen mit festem Wortlaut: Aufmaß, Vorbereitung, Ausführung, Abnahme. Die Phase steht immer als Wort, die Marke davor unterstützt nur. Ausführung ist rot, Abnahme grün, die beiden ersten in Tinte.
Der Eintrag ist die Projektzeile in Übersicht und Startseite: Bild links, rechts Datum, Ort, Kategorie, Titel, Text, Phase und Link. Die ganze Zeile ist klickbar. Der Schritt ist die Zeile im Projektblatt: Bild links, rechts Nummer, Titel, Text und eine handschriftliche Anmerkung. Schritte sind nummeriert, weil ihre Reihenfolge Information ist.
Fliese auf Fliese nach Untergrundbehandlung. Wandflächen sind gesetzt, der Boden folgt.
Der Altbelag wird auf Hohlstellen geprüft, gereinigt und mit einer Haftbrücke versehen.
Hohlstellen: 2 Fliesen links vom Fenster.
Jede Bildfläche ist im Entwurf ein schraffiertes Feld mit Diagonalen und einer Beschriftung, die sagt, was dort hingehört. Beim Einbau echter Fotos bleibt der Rahmen, die Schraffur verschwindet. Bilder werden nie beschnitten, ohne dass das Motiv es verträgt; Hochformat-Porträts bleiben 3:4.
| Material | Wo | Format |
|---|---|---|
| Baustellenfoto Bad mit Großformatfliesen | Startseite, erstes Blatt | quer 4:3, mindestens 1600 px breit |
| Je Projekt 3 bis 5 Fotos: Bestand, Ausführung, fertig | Projektübersicht, Projektblatt | quer 4:3 und 16:9 |
| Porträt Mirco Grahl | Startseite, Kontaktanfrage | hoch 3:4, ab 600 px breit |
| Porträt Grit Müller-Grahl | Startseite, Kontaktanfrage | hoch 3:4, ab 600 px breit |
| Zertifikate Wedi W.I.P., Triflex, Schulungen | Rubrik Zertifikate (folgt) | PDF oder JPG, lesbar |
| Referenzliste mit Freigabe der Kunden | Rubrik Referenzen (folgt) | Text und Fotos |
| Echte Projektdaten für die sechs Muster | Projektübersicht | Ort, Zeitraum, Leistung, Phase |
| Impressum und Datenschutzerklärung | Fußrand | Text; USt-IdNr. wird nachgereicht |
Der Fußrand ist der rote Durchschlag am Blattende: vier Randzellen mit Wortmarke, Betriebsanschrift und Handwerkskammer-Nummer, Kontakt Handwerk, Kontakt Hausverwaltung. Darunter die Leiste mit Urheberrecht, Impressum und Datenschutz. Alles in Weiß, Zellen durch halbtransparente Linien getrennt. Unter 1100 px zwei Spalten, unter 760 px eine. Das Beispiel steht am Ende dieser Seite.
Eine Geste, orchestriert, nicht verstreut: Sobald ein Blatt mit .zeichnen ins Bild kommt, zeichnen sich die Maßlinien, dann setzt der Stempel auf, dann schreibt sich die Handschrift. Ohne JavaScript ist alles sofort sichtbar. Bei reduzierter Bewegung entfällt jede Animation.
| Element | Dauer | Verlauf |
|---|---|---|
| Maßlinie waagerecht | 900 ms | Skalierung von links, cubic-bezier(.16, 1, .3, 1) |
| Maßlinie senkrecht | 900 ms, Verzögerung 250 ms | Skalierung von oben |
| Maßzahl und Endstriche | 360 ms, Verzögerung 550 ms | Einblenden |
| Stempel | 520 ms, Verzögerung 850 ms | Von 135 % und −9° auf 100 % und −3° |
| Handschrift | 1100 ms, Verzögerung 400 ms | Freistellung von links nach rechts (clip-path) |
| Registerreiter überfahren | 360 ms | Rote Linie wächst von links |
| Knopf, Zeile, Feld | 160 ms | Farbe, Rahmen, 1 px Druck |
| Kurzmeldung | 360 ms | Einblenden und 16 px nach oben |
Der Entwurf besteht aus fünf HTML-Dateien, einer CSS-Datei mit allen Tokens und Komponenten, einem kleinen Skript und dem Logo. Er läuft ohne Build-Schritt direkt aus dem Ordner.
| Punkt | Stand im Entwurf | Für die Umsetzung |
|---|---|---|
| Schriften | Google Fonts per Link | Selbst hosten (Barlow, Barlow Condensed, Nothing You Could Do; alle SIL Open Font License), font-display: swap |
| Logo | assets/logo.png unverändert, logo-1200.png für den Kopf | Zusätzlich SVG oder WebP, gleiche Proportion 3,34:1 |
| Navigation | Wedi, Großformatfliesen, Referenzen, Zertifikate ohne Ziel, mit Kurzmeldung | Seiten anlegen; data-folgt entfernen |
| Kontaktformular | Prüfung im Browser, kein Versand | Serverseitiger Versand an info@ und hausverwaltung@ je nach Thema, Spamschutz ohne Captcha-Rätsel, Kopie an den Absender, Datenschutzhinweis |
| Projekte | Sechs Musterprojekte, statisch | Pflegbar machen (CMS oder Markdown), Filter nach Phase beibehalten, Abgeschlossenes wandert in Referenzen |
| Karte | Platzhalter | Kartendienst erst nach Klick laden; prüfen, ob damit ein Cookie-Hinweis entfällt |
| Rechtstexte | Impressum und Datenschutz als Links ohne Ziel | Impressumsdaten liegen vor (USt-IdNr. offen), Datenschutzerklärung erstellen |
| Bilder | Gekennzeichnete Platzhalter | Nachlieferliste oben; Bilder in WebP mit srcset, Alt-Texte mit Ort und Leistung |
