# Bauplan: Sicherheitsdienst: wach und genau

Rezept `sicherheitsdienst-bewachung` · Sicherheitsdienst / Bewachungsunternehmen / Objekt- und Werkschutz / Revier- und Interventionsdienst / Empfangs- und Pfortendienst / Veranstaltungsschutz / Notruf- und Serviceleitstelle · Stimmung: wach, genau, verlässlich, nüchtern · Stand 02.11.2026

Wer einen Sicherheitsdienst sucht, ist Facility-Manager, Bauleiterin, Veranstalter oder Hausverwaltung und will wissen: Was genau übernehmt ihr, wie schnell seid ihr da, wer steht nachts vor Ort, welche Nachweise habt ihr, und wie erreiche ich die Leitstelle? Deshalb steht die Leitstelle mit 24-Stunden-Nummer getrennt vom Büro im ersten Blick, Leistungen mit Antwort zuerst und Reaktionszeit als Spanne, das Einsatzgebiet per Postleitzahl, Nachweise mit Nummer und Gültigkeit, der Ablauf vom Sicherheitskonzept bis zum Bericht, und Karriere ehrlich mit Schichten und Unterrichtung. Science Gothic breit für Überschriften, Geist für Text, Geist Mono für Uhrzeiten. Beton, Stahl und Nachtblau, Signalgelb nur für „Angebot anfragen“ und die Leitstelle. Signatur: das Wachbuch. Einmal je Seite schreibt sich eine Zeile wie im Wachbuch („22:14 Rundgang Halle 3 · ohne Befund“), gekennzeichnet als Beispiel (typewriter-natural); die Seite liest sich in Schichten von Tag zu Nacht.

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `sicherheitsdienst-bewachung`) und https://cecodesign.de/lab/fundus/rezepte/sicherheitsdienst-bewachung/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `science-gothic` · Text: `geist` · Akzent: `geist-mono`
- Größen: h1 Science Gothic clamp(2.5rem, 1.2rem + 5vw, 5.5rem), wdth 125, wght 700, Laufweite -0.01em, Zeilenhöhe 0.95; Kapitel-H2 clamp(1.75rem, 1.2rem + 2.2vw, 3rem), wdth 112. H3 und Gebrauchsüberschriften Geist 600, 1.25rem. Fließtext Geist 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Uhrzeiten, Wachbuch, Nachweisnummern und Reaktionszeiten Geist Mono 0.9375rem, Tabellenziffern; Labels in Datenzeilen Geist Mono Versal +0.08em ab 0.875rem. Knöpfe Geist 600, 1rem.
- Techniken: [Mono als Label- und Metaschrift (kleine Versalien)](https://cecodesign.de/lab/fundus/typo-techniken/mono-labels-versal/demo) `mono-labels-versal`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Deutscher Satz für Zahlen, Datum, Telefon und Preise](https://cecodesign.de/lab/fundus/typo-techniken/zahlen-datum-telefon-satz/demo) `zahlen-datum-telefon-satz`

## Farbe

Tag und Nacht: Beton als Grund für Tag-Kapitel, Nachtblau für Hero, Nacht-Kapitel, Leitstelle und Fuß, Stahl hell als Fläche für Nachweise und Tabellen. Signalgelb nur für „Angebot anfragen“ und die Leitstellen-Nummer, immer mit dunkler Schrift. Kein Polizeiblau, kein Blaulicht-Rot, keine Tarnfarben.

- `--farbe-grund` #EDEEEA (Grund Beton)
- `--farbe-text` #111417 (Text (15,9 : 1 auf Grund))
- `--farbe-flaeche` #D6DCDF (Fläche Stahl hell: Nachweise, Tabellen (Text 13,3 : 1))
- `--farbe-dunkel` #0E1A24 (Dunkel Nachtblau: Hero, Nacht-Kapitel, Leitstelle, Footer (Weiß darauf 17,6 : 1, Gelb darauf 9,7 : 1))
- `--farbe-signal` #F2B705 (Signal Gelb: Angebot anfragen, Leitstelle (Text darauf 10,2 : 1; auf Beton nur 1,6 : 1, deshalb Knopf mit 2 px Rand in Textfarbe))
- `--farbe-leise` #565B60 (Leise: Stand-Daten, Meta auf Beton (5,9 : 1 auf Grund, 5,0 : 1 auf Stahl))
- `--farbe-leise-2` #A9B4BD (Leise hell (Meta auf Nachtblau, 8,4 : 1))

## Bewegung

- Animationsstil: [Animationsstil „Tech präzise“ (Produkt-UI)](https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/demo) `token-tech-praezise`
- Kurve: cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise); ein cubic-bezier(0, 0, 0.38, 0.9), aus cubic-bezier(0.2, 0, 1, 0.9)
- Dauer: 110 (Hover, Farbe), 240 (Akkordeon, Reiter, Dialog öffnen), 150 (schließen), 400 (H1-Zeilen einmal), 900 (Seitenwechsel als Jalousie mit Seitenname), 30 (Takt je Zeichen im Wachbuch, höchstens 1200 je Zeile)
- Regel: Leitstellen-Nummer, Büro, Nachweise und Einsatzgebiet stehen sofort. Die H1 steigt einmal aus der Zeilenmaske. Je Seite schreibt sich höchstens eine Wachbuch-Zeile, wenn sie in den Blick kommt, danach steht sie; der Endtext steht für Screenreader von Anfang an im DOM. Beim Seitenwechsel schließen fünf Bahnen in Nachtblau, setzen den Namen der neuen Seite zusammen und öffnen sich wieder. Bei prefers-reduced-motion steht die Zeile fertig, Seitenwechsel als Überblendung.
- Hinweis: Kurz und ohne Federn: 110 ms Hover, 240 ms öffnen, 150 ms schließen, Wege 4 bis 8 px. Die Wachbuch-Zeile tippt mit 30 ms je Zeichen ohne Zufall und ist nach höchstens 1,2 s fertig. Die Jalousie beim Seitenwechsel ist gegenüber spalten-shutter-wipe gekürzt (5 Bahnen, 240 ms je Bahn, 40 ms Versatz, 120 ms halten).

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.2, 0, 0.38, 0.9)` (--ease) für H1, Akkordeon, Reiter, Dialoge, Jalousie; die Wachbuch-Zeile läuft linear im Takt
- Dauern: klein 110 ms, mittel 240 ms, gross 1200 ms, seitenwechsel 900 ms, schliessen 150 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit Leitstelle 24 h und „Angebot anfragen“: ab 0 ms, steht
2. Hero-Foto (Objekt bei Nacht): ab 0 ms, steht (LCP)
3. H1 (zwei Zeilen): ab 0/30 ms, 400 ms, Zeilenmaske translateY 100 % → 0, --ease-ein
4. Leitstelle und Büro (zwei Nummern): ab 0 ms, steht
5. Wachbuch-Zeile im Hero (typewriter-natural): ab 160 ms, 900 ms, höchstens 30 Zeichen im Takt 30 ms, linear, ohne Zufall; Endtext von Anfang an im DOM, Klick oder Taste zeigt sie sofort fertig
- Ende nach 1060 ms. Wiederholt: H1 und Wachbuch-Zeile stehen (sessionStorage).

**Scrollen** (höchstens drei Reveal-Arten):

- Wachbuch-Zeile (`typewriter-natural`): eine Zeile je Unterseite: Leistungsseiten unter der Antwort, Seite Wachbuch; auf der Startseite läuft sie im Hero beim Laden; 1200ms, Versatz 0 ms, Zeichen erscheinen im Takt 30 ms ohne Zufall, Cursor als Block ohne Blinken, nach dem Ende steht die Zeile; einmal, wenn die Zeile zu 60 % im Blick ist; Endtext von Anfang an im DOM (aria-hidden nur für die tippende Kopie)
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Leitstellen-Nummer und Büro, Nachweise und Erlaubnis, Reaktionszeiten und Einsatzgebiet

**Hover** (240 ms ein, 150 ms aus, --ease-ein / --ease-aus; nur mit Zeiger):

- Link: Unterstreichung läuft durch (unterstreichung-varianten durchlauf)
- Knopf: button-zustaende: Gelb mit Rand, Fläche eine Stufe dunkler; kontur-button-zeichnen ecken: Klammern schließen sich
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 8 px, Haarlinie oben wird Gelb
- Bild: kein Zoom

**Signatur** `typewriter-natural`: Das Wachbuch: eine Zeile in Geist Mono mit Uhrzeit, Ort und Befund („22:14 · Rundgang Halle 3 · ohne Befund“) schreibt sich einmal, wenn sie in den Blick kommt, im festen Takt von 30 ms je Zeichen und steht danach. Darunter klein „Beispiel aus einem Wachbericht“. Die Startseite ist in Schichten gegliedert: Tag-Kapitel auf Beton, Nacht-Kapitel in Nachtblau. Auslöser: Startseite: Laden (einmal je Tab); Unterseiten: einmal beim Einscrollen; Wiederholung: einmal je Seitenaufruf.

**Seitenwechsel** `spalten-shutter-wipe` (Variante kurz). Richtung: vorwaerts und zurueck gleich: fünf senkrechte Bahnen in Nachtblau schließen von links mit 40 ms Versatz, der Name der neuen Seite steht 120 ms in Science Gothic in den Bahnen, dann öffnen sie nach oben; gleiche Seite ohne Übergang. Geteilt: kopf, seitenname (Linktext → Name in den Bahnen → H1 der neuen Seite). Dauer 900 ms.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Höchstens eine Wachbuch-Zeile je Seite, nie für Kernaussagen (wann_nicht von typewriter-natural). Kein Blinken: Cursor als ruhiger Block, höchstens drei Wechsel pro Sekunde in allem. Die Jalousie nur zwischen Hauptseiten, nicht bei Reitern, Filtern oder Formularschritten.

**Reduzierte Bewegung:** Wachbuch-Zeile steht fertig; H1 steht; Seitenwechsel als Überblendung 150 ms ohne Bahnen. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Blaulicht, Fadenkreuz, Radar-Scanner; Glitch- und Hacker-Effekte; Countdown, Alarmton, blinkende Warnfarben.

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms, regel und animationsstil_hinweis; Wachbuch nach typewriter-natural (takt_brief 30 ms), Jalousie nach spalten-shutter-wipe (gekürzt auf 900 ms). Begrenzungen eigene Festlegung.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128
- Sektionsabstand: clamp(64px, 8vw, 128px)
- Dichte: mittel
- Hinweis: Genau: Nachweise und Tabellen dicht mit Haarlinien, Nacht-Kapitel mit viel Dunkel, Wachbuch-Zeile mit 48 px Rand.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 64px)
- Spaltenabstand: clamp(16px, 2vw, 28px)
- Maximale Breite: 1280px
- Raster: Hero randlos, Text unten links über 7 Spalten. Leistungen als Liste über 8 Spalten mit Reaktionszeit rechts; Nachweise als Tabelle; Wachbuch-Zeile über die volle Inhaltsbreite.
- Radius klein: 2px
- Radius groß: 4px
- Pillenform für Buttons: False
- Linie: 1px #11141726 in Tabellen, auf Nachtblau 1px #A9B4BD40; gelber Knopf mit 2px #111417; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Kantig und knapp: fast keine Rundung, Haarlinien statt Kästen, Klammern am Kontur-Knopf.

## Bildsprache

- Licht: Dämmerung und Nacht mit vorhandenem Licht (Laternen, Hallenlicht), Tagbilder für Empfang und Team.
- Ausschnitt: Objekt in der Totalen, Streife von hinten, Hände am Kontrollpunkt, Leitstelle mit Bildschirmen ohne lesbare Daten.
- Personen: Mitarbeitende nur mit Einwilligung, gern von hinten; Gesichter von Passant:innen nie erkennbar.
- Formate: 16:9, 3:2, 4:5
- Nicht: Keine Bodyguards mit Sonnenbrille, keine Waffen, keine Polizei-Anmutung, keine erkennbaren Kundenobjekte ohne Freigabe.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: Sie
- Sätze: Kurz, sachlich, mit Zahlen: was, wo, wie schnell, mit welchem Nachweis.
- Haltung: Wie eine Schichtleiterin beim Briefing: ruhig, genau, ohne Drohkulisse.
- Tonproben: Revierdienst im Kreis [Ort]: Kontrolle zweimal je Nacht, Bericht am Morgen., Leitstelle rund um die Uhr: [Nummer]. Für Anfragen erreichen Sie das Büro werktags von 8 bis 17 Uhr.
- Nicht: „Ihre Sicherheit ist unsere Mission“, Angstbilder, Kriminalstatistik als Verkaufsargument.

## Hero

Foto-Hero randlos (foto-hero, Variante randlos-unten-links): ein echtes Foto eines bewachten Objekts oder einer Streife bei Dämmerung bzw. Nacht, Gesichter nicht erkennbar, Objekt nur mit Freigabe. Unten links H1 in Science Gothic breit, darunter die eine Wachbuch-Zeile, die sich beim ersten Aufruf schreibt, ein Satz zu Leistung und Gebiet, „Angebot anfragen“ (Signalgelb) und darunter zwei Nummern getrennt: Leitstelle rund um die Uhr für Kund:innen und Alarm, Büro mit Zeiten. Kein Stockfoto mit Bodyguard und Sonnenbrille.

- Raster: Foto randlos über 12 Spalten, dunkle Zone unten links; H1, Satz, Handlung und zwei Nummern über Spalte 1 bis 7; mobil Foto oben, Text darunter auf Nachtblau.
- Bild: Echtes Foto eines Objekts oder einer Streife bei Dämmerung, 16:9 Desktop, 4:5 mobil.
- Überschrift: clamp(2.5rem, 1.2rem + 5vw, 5.5rem), Science Gothic breit; Name oder ein Satz zu Leistung und Gebiet, kein Label darüber.
- Handlung: „Angebot anfragen“ (Signalgelb mit Rand) und die Büronummer als tel:-Link.
- Zusatz: Wachbuch-Zeile in Geist Mono unter der H1 (einmal je Tab, als Beispiel gekennzeichnet); Leitstelle rund um die Uhr als eigene Zeile mit Nummer; mobil untere Leiste Leitstelle / Büro / Anfragen.

- Hero: [Foto-Hero: echtes Foto, ein Satz, ein Weg](https://cecodesign.de/lab/fundus/hero-layouts/foto-hero/demo?v=randlos-unten-links) `foto-hero` · Variante „Vollbild, Satz unten links“

## Sektionen in dieser Reihenfolge

1. **Notfall und Leitstelle (direkt unter dem Hero; zwei Nummern getrennt: Leitstelle rund um die Uhr für Kund:innen und Alarm, Büro für Anfragen mit Zeiten; Status nur aus echten Zeiten)**: [Anruf-Knopf mit Erreichbarkeit](https://cecodesign.de/lab/fundus/buttons/erreichbarkeits-button/demo?v=bereitschaft) `erreichbarkeits-button` · Variante „Rufbereitschaft außerhalb der Bürozeit“, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=termin) `oeffnungszeiten-status` · Variante „Termin nach Vereinbarung“
2. **Leistungen (Objektschutz, Revierdienst, Alarmverfolgung, Empfang und Pforte, Baustellenbewachung, Veranstaltungsschutz; je Leistung eine Seite mit Antwort zuerst: was übernommen wird, Reaktionszeit als Spanne, Einsatzgebiet, Mindesteinsatz)**: [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk) `leistungsseite-antwort-zuerst` · Variante „Handwerk“, [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
3. **Das Wachbuch (wie ein Einsatz dokumentiert wird: Rundgänge mit Kontrollpunkten, Befund, Bericht an den Kunden; eine Beispielzeile schreibt sich; Tag- und Nacht-Kapitel)**: [Schreibmaschine mit natürlichem Takt](https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/demo?v=wachbuch) `typewriter-natural` · Variante „Wachbuch (eine Zeile, fester Takt, einmal)“, [Sektion schaltet ihren Ton per Style Query](https://cecodesign.de/lab/fundus/hero-layouts/sektion-stil-abfrage/demo?v=kapitel) `sektion-stil-abfrage` · Variante „Kapitel“
4. **Einsatzgebiet und Reaktionszeit (Kommen wir zu Ihnen? Postleitzahl zuerst, Antwort mit Revierdienst ja oder nein und Reaktionszeit als Spanne; Gebiet als eigene Skizze ohne Dritte)**: [Mehrschritt-Anfrage mit Zusammenfassung](https://cecodesign.de/lab/fundus/sektionen/mehrschritt-anfrage/demo?v=plz) `mehrschritt-anfrage` · Variante „PLZ zuerst“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=skizze) `karte-zwei-klick` · Variante „Lageskizze“
5. **Nachweise (Erlaubnis nach § 34a GewO, Zertifizierungen und Anerkennungen nur mit Träger, Nummer, Gültigkeit und Link; Verbandsmitgliedschaft)**: [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=siegel-nachweis) `logo-wand-social-proof` · Variante „Siegel mit Nachweis“
6. **So läuft ein Auftrag ab (Anfrage → Sicherheitsanalyse vor Ort → Konzept und Angebot → Dienstanweisung und Einweisung → Einsatz → Bericht; Dauer je Schritt ehrlich)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo?v=unterstrich) `prozess-timeline-wachsende-linie` · Variante „Unterstrich je Schritt“
7. **Referenzen (nur mit Freigabe, sonst anonym nach Branche und Ort: Logistikzentrum bei [Ort], Wohnanlage, Baustelle; Stimmen sachlich mit Funktion und Datum)**: [Testimonials neu gedacht](https://cecodesign.de/lab/fundus/hero-layouts/testimonials-neu-gedacht/demo?v=stimmen-reihe) `testimonials-neu-gedacht` · Variante „Stimmen-Reihe mit Höhe der aktiven Stimme“
8. **Karriere (Sicherheitsmitarbeiter:in, Schichtleitung, Leitstelle; Unterrichtung oder Sachkundeprüfung, Bewacherregister, Schichten und Nächte ehrlich, Stundenlohn als Spanne; Kurzbewerbung ohne Anschreiben)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=kurzbewerbung) `stellen-karriere` · Variante „Kurzbewerbung mit Rückruf“, [Stellenseite mit Gehalt, Ablauf und JobPosting-Daten](https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=handwerk) `stellenseite-mit-jobposting` · Variante „Handwerk mit Stundenlohn“
9. **Anfrage: Angebot, Alarm oder Bewerbung (Anliegen wählen: Alarm oder Notfall → Telefon der Leitstelle; Angebot; Bewerbung; dann Objekt, Zeitraum, Leistung, Lageplan als Datei)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=weiche) `kontakt-anfrage-formular` · Variante „Anliegen-Weiche“, [Datei-Ablage mit Vorschau und Prüfung](https://cecodesign.de/lab/fundus/sektionen/datei-upload-ablage/demo?v=dokument) `datei-upload-ablage` · Variante „Lebenslauf als PDF“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=liste) `formular-fehlerzusammenfassung` · Variante „Liste mit Sprunglinks“, [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=anfrage) `danke-seite-naechste-schritte` · Variante „Offene Anfrage“
10. **Büro und Anfahrt (Adresse als Text, Besuch nach Termin, Karte per 2-Klick)**: [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=bild) `karte-zwei-klick` · Variante „Kartenbild mit 2-Klick“
11. **Erklärung zur Barrierefreiheit (eigene Seite; freiwillig im bewährten Aufbau, vom Kunden prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=erklaerung) `barrierefreiheit-seite` · Variante „Erklärung (EU-Muster)“

## Signatur (Pflicht)

- [Schreibmaschine mit natürlichem Takt](https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/demo?v=wachbuch) `typewriter-natural` · Variante „Wachbuch (eine Zeile, fester Takt, einmal)“

## Moment (Pflicht: woran man sich erinnert)

- Was: Das Wachbuch: eine Zeile mit Uhrzeit, Ort und Befund schreibt sich groß im festen Takt, wenn sie in den Blick kommt, und steht danach.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß: Zeile in H2-Größe über 8 Spalten
- Muster: [Schreibmaschine mit natürlichem Takt](https://cecodesign.de/lab/fundus/schrift-animationen/typewriter-natural/demo?v=wachbuch) `typewriter-natural` · Variante „Wachbuch (eine Zeile, fester Takt, einmal)“
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## Buttons

- Haupthandlung: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=ecken) `kontur-button-zeichnen` · Variante „Eckklammern schließen sich“

## Weitere Bausteine

- Seitenwechsel: [Spalten-, Streifen- und Jalousie-Wipe](https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/demo) `spalten-shutter-wipe`
- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt) `mobile-bottom-navigation` · Variante „Kontaktleiste (Elektrobetrieb)“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Absenden wird Bestätigung](https://cecodesign.de/lab/fundus/mikroanimationen/absenden-zu-bestaetigung/demo?v=zeile) `absenden-zu-bestaetigung` · Variante „Zeile: Rückruf wird Bestätigungszeile“, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo) `firmendaten-strukturiert`
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo?v=anfrage) `danke-seite-naechste-schritte` · Variante „Offene Anfrage“
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Nicht verwenden

- scramble-decode – Hacker-Optik statt Verlässlichkeit
- crosshair-coordinates-cursor / blend-difference-cursor – Fadenkreuz und Zielfernrohr gehören nicht auf eine Dienstleisterseite
- theme-farbwechsel-scroll – Signatur von eventlocation-hochzeit; Tag und Nacht über sektion-stil-abfrage
- zahlen-odometer – keine hochgezählten Einsätze oder Kilometer
- marquee-laufband – keine durchlaufenden Kundenlogos
- smooth-scroll-lenis – Leitstellen-Nummer muss sofort erreichbar sein
- token-brutal-hart – laut wann_nicht nicht für Inhalte, die Vertrauen aufbauen müssen
- Bodyguard-Stockfotos, Waffen, Polizei-Anmutung (Blaulicht, „Polizei“-ähnliche Schriftzüge und Uniformen) – Verwechslungsgefahr und Einschüchterung

## Regeln

- Erster Bildschirm: Objektfoto bei Nacht, H1, „Angebot anfragen“ und zwei getrennte Nummern (Leitstelle rund um die Uhr, Büro mit Zeiten). Mobil untere Leiste Leitstelle / Büro / Anfragen.
- Signatur (typewriter-natural): höchstens eine Wachbuch-Zeile je Seite, als Beispiel gekennzeichnet, nie mit echten Kundendaten; Takt 30 ms ohne Zufall, fertig nach höchstens 1,2 s, Endtext von Anfang an im DOM. Bei reduzierter Bewegung steht die Zeile.
- Erlaubnis nach § 34a GewO mit zuständiger Behörde im Impressum (§ 5 DDG); Registrierung im Bewacherregister; Berufshaftpflicht nach der Bewachungsverordnung. Vom Kunden prüfen lassen.
- Nachweise nur echt: Zertifizierungen (z. B. nach DIN 77200 oder ISO 9001) und Anerkennungen der Leitstelle nur mit Träger, Nummer, Gültigkeit und Link zu den Kriterien (logo-wand-social-proof, Variante siegel-nachweis); keine Eigensiegel, keine „geprüfte Sicherheit“ ohne Prüfstelle.
- Keine Verwechslung mit der Polizei: Fotos von Dienstkleidung, Fahrzeugen und Schriftzügen nur, wenn sie nicht polizeiähnlich wirken; keine Waffen in der Werbung. Vom Kunden prüfen lassen.
- Referenzen und Objektfotos nur mit Freigabe der Auftraggeber; ohne Freigabe anonym nach Branche und Ort. Videoaufschaltung und Videoüberwachung nur mit Hinweis auf den Datenschutz beim Kunden. Vom Kunden prüfen lassen.
- Stellen ehrlich: Unterrichtung bzw. Sachkundeprüfung nach § 34a GewO, Eintrag im Bewacherregister, Nachtschichten, Wochenenden, Stundenlohn als Spanne und Tarif, Führerschein nur, wenn nötig. Jede Stelle mit eigener Seite und JobPosting nur für sichtbare Inhalte.
- Knöpfe: Signalgelb mit 2 px Rand in Textfarbe (button-zustaende) für „Angebot anfragen“; Nebenwege als Kontur mit Klammern (kontur-button-zeichnen, Variante ecken).

## Rezept-Varianten

- **Veranstaltungsschutz und Ordnungsdienst**: Schrift, Farbe, Stil und Signatur bleiben; die Wachbuch-Zeile wird zur Einsatzzeile einer Veranstaltung („19:30 · Einlass Nord · 1.240 Gäste“, als Beispiel). Statt Revierdienst: Einlass und Kontrolle, Ordnungsdienst, Backstage, Crowd-Management mit Konzept. Anfrage mit Datum, Ort, Gästezahl, Art der Veranstaltung (termin-verfuegbarkeit-anfrage, Variante leiste). Einlasskontrolle in gastgewerblichen Diskotheken braucht die Sachkundeprüfung; Sicherheitskonzepte stimmen Veranstalter und Behörden ab. Vom Kunden prüfen lassen.
- **Notruf- und Serviceleitstelle (Alarm- und Videoaufschaltung für Gewerbe)**: Schrift, Farbe, Stil und Signatur bleiben; die Wachbuch-Zeile zeigt eine Alarmbearbeitung („03:12 · Alarm Lager 2 · Intervention vor Ort 03:27“, Beispiel). Leistungen: Aufschaltung, Interventionsdienst, Videoaufschaltung, Aufzugsnotruf, Alleinarbeiter-Schutz. Technische Voraussetzungen und Ablauf der Aufschaltung als akkordeon-hoehe-auto (Variante faq). Anerkennungen der Leitstelle nur mit Nummer und Gültigkeit. Datenschutz bei Videoaufschaltung: Auftragsverarbeitung und Hinweise beim Kunden. Vom Kunden prüfen lassen.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.