# Bauplan: IT-Systemhaus: erreichbar und verlässlich

Rezept `it-systemhaus-verlaesslich` · IT-Dienstleister / Systemhaus / IT-Betreuung für kleine und mittlere Unternehmen, Praxen und Kanzleien (Managed Services, Netzwerk, Telefonie, Sicherheit) · Stimmung: verlässlich, ruhig, technisch, direkt · Stand 02.11.2026

Ein Systemhaus verkauft kein Produkt, sondern Erreichbarkeit und Verantwortung: Wen rufe ich an, wenn nichts mehr geht, wie schnell ist jemand dran, was kostet das je Arbeitsplatz. Ganz oben stehen Hotline mit Zeiten, Fernwartung und der aktuelle Status, darunter Pakete mit Reaktionszeit je Priorität, die feste Ansprechperson und Referenzen aus der Region. Host Grotesk für alles, Martian Mono für Ticketnummern, Zeiten und Reaktionszeiten. Helles Grau, Grafit, ein Kobaltblau für Anfragen; Statusfarben nur zusammen mit Wörtern. Signatur: ein feines Punktraster, auf dem Statuszeile und Pakete wie auf einer Platine sitzen. Abgrenzung zu saas-produkt-praezise (Produkt-UI, Preise pro Plan) und industrie-b2b-mittelstand (Produkte mit technischen Daten).

## 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 `it-systemhaus-verlaesslich`) und https://cecodesign.de/lab/fundus/rezepte/it-systemhaus-verlaesslich/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt

## Schrift

- Headline: `host-grotesk` · Text: `host-grotesk` · Akzent: `martian-mono`
- Größen: h1 Host Grotesk clamp(2.25rem, 1.4rem + 3.4vw, 4rem), wght 700, Laufweite -0.03em, Zeilenhöhe 1.0; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem), wght 600. Fließtext Host Grotesk 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Martian Mono für Ticketnummern, Telefonzeiten, Reaktionszeiten, Versionen und Status: 0.875rem, wdth 87, wght 400; Labels 0.75rem Versal +0.08em. Knöpfe Host Grotesk 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`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`, [Enge Laufweite und Zeilenabstand bei riesigen Headlines](https://cecodesign.de/lab/fundus/typo-techniken/headline-laufweite-zeilenabstand/demo) `headline-laufweite-zeilenabstand`, [Eine Familie, wenige Gewichte (Hierarchie über Größe)](https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/demo) `eine-familie-wenig-gewichte`

## Farbe

Hell und nüchtern wie ein aufgeräumter Serverschrank: helles Grau als Grund, etwas dunkleres Grau als Fläche für Pakete und Status, Grafit für Hotline-Band und Footer. Kobaltblau nur für Anfragen und Fernwartung starten. Statusfarben (Grün, Ocker, Rot) nur mit Wort und Symbol, nie allein. Kein Dunkelmodus mit Neon, kein Matrix-Grün, keine blauen Glow-Verläufe.

- `--farbe-grund` #F1F2F3 (Grund Hellgrau)
- `--farbe-text` #16191D (Text (15,7 : 1 auf Grund))
- `--farbe-flaeche` #E1E4E8 (Fläche Gehäuse: Pakete, Statuszeile, Formular (Text 13,8 : 1))
- `--farbe-dunkel` #1B1F24 (Dunkel Grafit: Hotline-Band, Footer (Weiß darauf 16,6 : 1))
- `--farbe-signal` #2946B0 (Signal Kobalt: Anfragen, Fernwartung starten (Weiß darauf 8,1 : 1; als Fläche auf Grund 7,2 : 1); auf Grafit stattdessen heller Knopf mit dunkler Schrift)
- `--farbe-leise` #565C64 (Leise: Meta-Angaben, Zeitstempel (6,0 : 1 auf Grund, 5,3 : 1 auf Fläche))
- `--farbe-erfolg` #1E6E43 (Erfolg: Status „läuft“ (5,6 : 1 auf Grund, immer mit Wort))
- `--farbe-warnung` #7F5400 (Warnung: Status „eingeschränkt“ (5,9 : 1 auf Grund, immer mit Wort))
- `--farbe-linie` #CDD1D6 (Linie: Haarlinien in Tabellen (nur Dekoration))

## 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); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9)
- Dauer: 70 (Hover), 110 (Kopieren-Bestätigung), 240 (Akkordeon, Panels), 160 (schließen), 400 (Einblendung einer Statusmeldung)
- Regel: Bewegung meldet nur Zustände: kopiert, gesendet, Status geändert. Kein Tippen, kein Entschlüsseln, keine pulsierenden Statuspunkte. Das Punktraster steht still. Bei prefers-reduced-motion wechseln Zustände ohne Weg. Seit 05.11.2026: ein minimales Intro einmal je Sitzung (Punktreihen füllen sich), die Seite bleibt ab 0 ms bedienbar.

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

- Hauptkurve: `cubic-bezier(0.2, 0, 0.38, 0.9)` (--ease) für nur Zustände: kopiert, gesendet, Status geändert
- Dauern: klein 70 ms, mittel 240 ms, gross 400 ms, seitenwechsel 450 ms, schliessen 160 ms (als `--dauer-klein` … in tokens.css)

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

1. Kopf mit Notfall-Nummer und Anfrage: ab 0 ms, steht
2. H1, Satz, Knöpfe: ab 0 ms, stehen
3. Punktraster (Material): ab 0 ms, steht still (Rezept)
4. Moment: Punktreihen des Status: ab 120/150/180/210/240 ms, 400 ms, einmal je Sitzung: Punkte füllen sich je Dienst von links, nur Deckkraft, höchstens fünf Reihen; der Statussatz steht ab 0 ms
- Ende nach 640 ms. Wiederholt: alles steht.
- Minimales Intro (05.11.2026, Jury-Lehre): Die Seite ist ab 0 ms bedienbar und steht; nur der Moment (rezept.moment) läuft einmal je Sitzung (sessionStorage), Klick, Taste oder Scroll beenden ihn sofort im Endzustand. Wiederholt steht alles.

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

- keine Reveals
- 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, Leistungen und Preise, Störungsmeldung und Notfall-Nummer, Statusseite

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

- Link: Unterstreichung, 70 ms Farbe
- Knopf: button-zustaende; kontur-button-zeichnen laufend nur bei Hover (höchstens ein Umlauf)
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 4 px
- Bild: kein Zoom

**Signatur** `linien-punkt-raster`: Das Raster steht still (Rezept). Der eine bewegte Moment ist die Bestätigung beim Kopieren (kopieren-feedback, 110 ms) und die Statusmeldung (400 ms, Deckkraft und 4 px). Auslöser: keiner; Wiederholung: keine.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen). Richtung: vor (Menü weiter rechts oder Übersicht → Detail): neue Seite gleitet 24 px von rechts und blendet auf, alte weicht 12 px nach links; zurück gespiegelt. Geteilt: kopf, titel (Titel der Leistungszeile → H1 der Leistungsseite). Dauer 450 ms. Kurve: `--ease (weich, ohne Überschwingen)`.

**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). Keine pulsierenden Statuspunkte (Rezept).

**Reduzierte Bewegung:** Zustände wechseln ohne Weg (Rezept); Seitenwechsel als Überblendung. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Tippen, Entschlüsseln, Matrix-Regen (Rezept); Schloss- oder Schild-Animationen; Datenströme oder Partikel (Rezept).

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und token-tech-praezise. Rest eigene Festlegung.

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

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 20, 24, 40, 60, 80, 120
- Sektionsabstand: clamp(60px, 8vw, 120px)
- Dichte: mittel
- Hinweis: Abstände in Vielfachen des 20-px-Punktrasters, wo das Raster sichtbar ist; Tabellen dicht.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 60px)
- Spaltenabstand: 20px
- Maximale Breite: 1280px
- Raster: Spalt gleich dem Punktraster (20 px). Hero 7/5 (Satz und Status links, Ansprechperson rechts). Pakete als Tabelle über 12 Spalten, mobil gestapelt mit fester erster Zeile.
- Radius klein: 4px
- Radius groß: 8px
- Pillenform für Buttons: False
- Linie: 1px #CDD1D6 in Tabellen; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Klare Kästen wie Module auf einer Platine; Statusfelder mit 1 px Rand in der Statusfarbe plus Wort.

## Bildsprache

- Licht: Natürliches Büro-Licht, keine blauen Neonfarben.
- Ausschnitt: Team beim Kunden, Hände am Gerät, Werkbank im Büro; keine Rechenzentren.
- Personen: Ja: eigenes Team mit Einwilligung; Kundenbüros nur mit Erlaubnis und ohne lesbare Bildschirme.
- Formate: 3:2, 1:1
- Nicht: Keine Serverraum- und Kabel-Stockfotos, keine Kapuzen-Hacker, keine Schlösser und Schilde.
- 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, konkret, ohne Fachchinesisch: wer, wie schnell, was es kostet.
- Haltung: Ruhig und verbindlich wie ein guter Support-Anruf.
- Tonproben: Priorität 1: Wir sind innerhalb von 4 Stunden dran., Ihr fester Ansprechpartner ist [Name], Durchwahl [Nummer].
- Nicht: „Digitalisierungspartner“, „ganzheitliche Lösungen“, „100 % sicher“, Anglizismen-Ketten.

## Hero

Kein Stockfoto mit Serverraum. Oben eine Zeile auf Grafit: Hotline mit Nummer und heutigen Zeiten, Rufbereitschaft wenn vorhanden, „Fernwartung starten“. Darunter auf dem Punktraster ein Satz, wen das Systemhaus wo betreut, der Status der betreuten Dienste als Wort mit Zeitstempel und zwei Wege: „Erstgespräch anfragen“ und „Pakete und Preise“. Direkt darunter die Ansprechperson mit Foto.

- Raster: Oben eine volle Zeile auf Grafit (Hotline, Zeiten, Fernwartung); darunter 12 Spalten auf dem Punktraster: Satz und Status über 1 bis 7, Ansprechperson über 8 bis 12.
- Bild: Kein Hero-Bild; Porträt der Ansprechperson 1:1 rechts.
- Überschrift: clamp(2.25rem, 1.4rem + 3.4vw, 4rem), Host Grotesk 700; kein Label darüber.
- Handlung: „Erstgespräch anfragen“ (Kobalt gefüllt) und „Pakete und Preise“ (Kontur); in der Grafit-Zeile „Fernwartung starten“.
- Zusatz: Status der betreuten Dienste als Wort mit Zeitstempel in Martian Mono.

- Hero: Foto-Hero ohne eigenes Muster

## Sektionen in dieser Reihenfolge

1. **Hilfe jetzt (Hotline mit Zeiten und Rufbereitschaft, Ticket per Mail oder Portal mit Kopier-Knopf, Fernwartungs-Programm mit Hinweis, dass eine Sitzung nur mit Ihrer Zustimmung startet; aktuelle Störung als Leiste, nur wenn es eine gibt)**: [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=hinweisleiste) `oeffnungszeiten-status` · Variante „Hinweisleiste über dem Kopf“, [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`, [Linien- und Punktraster](https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/demo) `linien-punkt-raster`, [Anruf-Knopf mit Erreichbarkeit](https://cecodesign.de/lab/fundus/buttons/erreichbarkeits-button/demo?v=knopf) `erreichbarkeits-button` · Variante „Knopf mit Status und Rückruf“
2. **Status und Störungen (ein Satz, ob alles läuft; laufende Störung mit Beginn, letztem Update und Zeitleiste; betreute Dienste mit 90-Tage-Verlauf; geplante Wartung; E-Mail-Abo; nur mit echter Quelle, nie von Hand geschönt)**: [Status- und Störungsseite](https://cecodesign.de/lab/fundus/sektionen/stoerungs-statusseite/demo?v=systemhaus) `stoerungs-statusseite` · Variante „Systemhaus: Dienste mit Verlauf“
3. **Ihre Ansprechperson (feste Technikerin oder fester Techniker mit Foto, Name, Zertifizierungen mit Nachweis, Durchwahl; Vertretung genannt)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“
4. **Pakete mit Reaktionszeit (Arbeitsplatz-Betreuung, Server und Netzwerk, Backup, Microsoft 365, Telefonie, IT-Sicherheit; Preis je Arbeitsplatz und Monat, Reaktionszeit je Priorität als Tabelle in Mono; was nicht enthalten ist)**: [Vergleichstabelle mit fester Kopfzeile](https://cecodesign.de/lab/fundus/sektionen/vergleichstabelle-sticky/demo?v=pakete) `vergleichstabelle-sticky` · Variante „Paketvergleich mit Abrechnungs-Umschalter“, [Tabelle schmal und robust](https://cecodesign.de/lab/fundus/zugang/tabelle-schmal-robust/demo?v=feste) `tabelle-schmal-robust` · Variante „Feste erste Spalte“
5. **Leistungen (je Leistung eine Unterseite, Antwort zuerst: was übernommen wird, für wie viele Arbeitsplätze, ab-Preis, was der Kunde selbst tun muss)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen) `akkordeon-hoehe-auto` · Variante „Leistungsliste mit Bild“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=handwerk) `leistungsseite-antwort-zuerst` · Variante „Handwerk“, [Ansprechperson-Band](https://cecodesign.de/lab/fundus/hero-layouts/ansprechperson-band/demo?v=handwerk) `ansprechperson-band` · Variante „Handwerk“
6. **So wechseln Sie zu uns (Bestandsaufnahme vor Ort → Angebot → Übernahme mit Dokumentation und Zugangsdaten-Übergabe → Betreuung mit festen Terminen)**: [Prozess-/Timeline-Sektion mit wachsender Linie](https://cecodesign.de/lab/fundus/hero-layouts/prozess-timeline-wachsende-linie/demo) `prozess-timeline-wachsende-linie`
7. **Referenzen aus der Region (Branche, Arbeitsplätze, seit wann betreut, was gelöst wurde; Firmenname und Logo nur mit Erlaubnis)**: [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“, [Logo-Wand / Social-Proof-Band](https://cecodesign.de/lab/fundus/hero-layouts/logo-wand-social-proof/demo?v=raster) `logo-wand-social-proof` · Variante „Ruhiges Raster“
8. **Sicherheit und Datenschutz (Auftragsverarbeitung, Fernwartung nur mit Freigabe je Sitzung, Standort der Daten, Zertifizierungen mit Nummer; keine Sicherheitsversprechen)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“, [FAQ-Seite mit Suche](https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo?v=suche) `faq-seite-suche` · Variante „Mit Suche“, [Text-Hervorhebung mit ::highlight()](https://cecodesign.de/lab/fundus/typo-techniken/text-hervorhebung-highlight/demo?v=suche) `text-hervorhebung-highlight` · Variante „Suchtreffer“
9. **Downloads (Fernwartung, Anleitungen, Vorlage zur Auftragsverarbeitung; Liste ab etwa zehn Dokumenten, sonst in der FAQ)**: [Download-Center für technische Dokumente](https://cecodesign.de/lab/fundus/sektionen/download-center-dokumente/demo?v=liste) `download-center-dokumente` · Variante „Bibliothek“
10. **Karriere (Fachinformatiker:in Systemintegration, Ausbildung, Werkstudierende; Gehaltsspanne, Rufbereitschaft mit Pauschale)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige) `stellen-karriere` · Variante „Wenige Stellen“, [Stellenseite mit Gehalt, Ablauf und JobPosting-Daten](https://cecodesign.de/lab/fundus/sektionen/stellenseite-mit-jobposting/demo?v=ausbildung) `stellenseite-mit-jobposting` · Variante „Ausbildung mit Vergütung je Jahr“
11. **Kontakt und Servicegebiet (Erstgespräch mit wenigen Feldern: Firma, Arbeitsplätze, Anliegen, Rückruf; Büro mit Adresse als Text, Servicegebiet als Orte, Karte per 2-Klick)**: [Kontakt- und Anfrageformular als eigene Sektion](https://cecodesign.de/lab/fundus/hero-layouts/kontakt-anfrage-formular/demo?v=basis) `kontakt-anfrage-formular` · Variante „Anfrage-Sektion mit drei Formularen“, [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“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“
12. **Erklärung zur Barrierefreiheit (freiwillig als Aufbau; reine B2B-Angebote fallen meist nicht unter das BFSG, 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)

- [Linien- und Punktraster](https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/demo) `linien-punkt-raster`

## Moment (Pflicht: woran man sich erinnert)

- Was: Status live: ein Satz in H1-Größe sagt, ob alles läuft; darunter die betreuten Dienste als Punktreihen über die volle Breite, ein Klick zeigt den Verlauf der letzten 90 Tage. Nur mit echter Quelle, sonst die Hotline-Zeile groß.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß und interaktiv: Satz in H1-Größe, Punktreihen über 12 Spalten
- Muster: [Status- und Störungsseite](https://cecodesign.de/lab/fundus/sektionen/stoerungs-statusseite/demo?v=systemhaus) `stoerungs-statusseite` · Variante „Systemhaus: Dienste mit Verlauf“, [Linien- und Punktraster](https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/demo) `linien-punkt-raster`
- 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=laufend) `kontur-button-zeichnen` · Variante „Gestrichelte Kontur läuft“

## Weitere Bausteine

- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Sticky-Header, der schrumpft bzw. sich beim Andocken umfärbt](https://cecodesign.de/lab/fundus/navigation/sticky-shrink-header/demo) `sticky-shrink-header`, [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: [Kopieren-Feedback](https://cecodesign.de/lab/fundus/mikroanimationen/kopieren-feedback/demo) `kopieren-feedback`, [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Toast-Benachrichtigungen im Stapel](https://cecodesign.de/lab/fundus/mikroanimationen/toast-stapel/demo) `toast-stapel`
- Material: [Linien- und Punktraster](https://cecodesign.de/lab/fundus/glas-material/linien-punkt-raster/demo) `linien-punkt-raster`
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=basis) `studio-visitenkarte-footer` · Variante „Stille Visitenkarte“

## 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?v=werkstatt) `firmendaten-strukturiert` · Variante „Kfz-Werkstatt (AutoRepair)“
- [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) `danke-seite-naechste-schritte`
- [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“

## Optional (nur als Zusatz)

- [Agentenformular mit WebMCP](https://cecodesign.de/lab/fundus/sektionen/agentenformular-webmcp/demo?v=termin) `agentenformular-webmcp` · Variante „Wartungstermin“

## Nicht verwenden

- command-palette-und-ki-suche / produkt-ui-hero-perspektiv-tilt – Signaturen von saas-produkt-praezise
- blueprint-raster-sichtbar – Signatur von industrie-b2b-mittelstand; hier nur das feine Punktraster
- scramble-decode / typewriter-natural – Hacker- und Terminal-Klischee
- atmosphaere-partikel / mesh-gradient-shader / karten-spotlight-glow – Neon und Glow sind das Klischee der Branche
- interaktives-3d-hero – Server und Wolken in 3D zeigen nichts
- zahlen-odometer – „99,9 % Verfügbarkeit“ wird nicht hochgezählt und nur mit Vertrag genannt
- smooth-scroll-lenis – verzögert Hotline und Formular
- konfetti-erfolg – nach dem Ticket eine ruhige Bestätigung mit Ticketnummer
- Serverraum-Stockfotos, Schloss-Icons, Kapuzen-Hacker – eigene Fotos von Team und Kundenterminen
- „100 % sicher“, „hackerfest“, „DSGVO-zertifiziert“ – Sicherheitsversprechen ohne Nachweis sind irreführend

## Regeln

- Erster Bildschirm: Hotline mit Nummer und heutigen Zeiten, Fernwartung starten, Status als Wort mit Zeitstempel, ein Satz zu Zielgruppe und Region, zwei Wege. Ansprechperson direkt darunter.
- Signatur (linien-punkt-raster): ein feines Punktraster (20 px, Punkt 1 px, 26 % Deckkraft) nur hinter Hero, Statuszeile und Paket-Tabelle; Inhalte richten sich an den Punkten aus. Nie hinter Fließtext, nie mit Glow, im Kontrastmodus aus.
- Reaktionszeiten nur, wenn sie vertraglich zugesagt sind: Tabelle je Priorität mit Definition, was Priorität 1 ist. Erreichbarkeit mit echten Zeiten; Rufbereitschaft nur mit Preis.
- Preise: für Gewerbe netto und als netto gekennzeichnet, mit Laufzeit und Kündigungsfrist; Einrichtung und Vor-Ort-Stunden getrennt.
- Status: aus einer echten Quelle (Monitoring oder von Hand gepflegt) mit Zeitstempel; Farbe immer mit Wort („Läuft“, „Eingeschränkt“, „Störung“) und Symbol.
- Fernwartung: Download vom Hersteller oder mit Prüfsumme, Hinweis auf Freigabe je Sitzung und Protokoll; Lizenz des Fernwartungs-Programms vom Kunden prüfen lassen.
- Datenschutz und Recht: Auftragsverarbeitung nach Art. 28 DSGVO als Thema mit Vorlage, keine Garantie für Sicherheit oder Rechtskonformität der Kunden; Pflichten der Kunden aus der NIS2-Umsetzung nur als Hinweis mit Quelle; Partner-Logos von Herstellern nur nach deren Regeln; KI-Chat beim Start kennzeichnen (Art. 50 KI-VO). Vom Kunden prüfen lassen.
- Typografie: Martian Mono für jede Nummer, Zeit und Version; Host Grotesk in zwei Gewichten.
- Knöpfe: Kobalt gefüllt mit allen Zuständen (button-zustaende); Nebenwege und Downloads als Kontur, deren Striche nur bei Hover laufen (kontur-button-zeichnen, Variante laufend). Kopieren mit Rückmeldung (kopieren-feedback).
- agentenformular-webmcp nur als Zusatz (Priorität F): Das Erstgespräch funktioniert vollständig als normales Formular.

## Rezept-Varianten

- **IT für Praxen und Kanzleien**: Schrift, Farbe, Stil und Signatur bleiben. Schwerpunkt Schweigepflicht und Berufsgeheimnis (Mitwirkende nach § 203 StGB, Verpflichtung des Personals), Anbindung an Telematikinfrastruktur bzw. beA, Praxis- und Kanzleisoftware. Zertifizierungen der Anbieter nur mit Nachweis. 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“.