# Kirschner Gebäudeservice — Design-System

Live-Dateien: sieben HTML-Seiten im Wurzelordner, `assets/site.css`, `assets/motion.js`.
Stand 2026-09-30. Offene Punkte: [`README.md`](README.md).

## Benannte Referenz

Workspace-Regel: *kein UI-Code ohne benannte Referenz*. Für einen Gebäudedienstleister gab es
keine Familie; deshalb am 2026-09-30 neu angelegt und gemessen:

**[`gebaeudedienstleister-de.md`](../../ASX%20Studio/design-references/entries/gebaeudedienstleister-de.md)**
— Piepenbrock + Dussmann als Branchen-Baseline, Familie *Premium Local Service / Facility*.

**Übernommen:** genau ein gesättigtes Markenblau (Piepenbrock bestätigt Blau als Vertrauensfarbe der
Branche), Body ≥ 17px (Dussmann 18px), Menschen im Hero, sobald echte Fotos da sind.
**Bewusst anders:** Headlines 3× größer als die Branche (38–40px dort), Motion als Markenträger statt
0.15s-Hover, null Fremd-Tracking und daher kein Cookie-Banner.

Ergänzend gestützt auf **BaseHub** (Dark + ein Akzent) und **Teenage Engineering**
(Industrieblau, Typo-Extreme).

## Farbe

Alle Neutraltöne sind blau getönt, kein reines Grau. Ein Akzent: das Mittelblau aus dem Logo.

| Token | Wert | Einsatz | Kontrast |
|---|---|---|---|
| `--night-950` | `#0A1424` | Grundfläche | — |
| `--night-900` / `-800` / `-700` | `#0F1D33` / `#16263F` / `#1F3354` | Tiefe Sektionen, Karten | — |
| `--paper` | `#F2F5F9` | Helle Sektionen | — |
| `--fog` | `#E8EEF6` | Text auf Nacht | 15.8 : 1 |
| `--fog-soft` | `#A9B7CC` | Fließtext auf Nacht | 9.1 : 1 |
| `--fog-mute` | `#8C9BB3` | nur Labels auf Nacht | 6.5 : 1 |
| `--ink-soft` | `#4A5873` | Fließtext auf Papier | 6.5 : 1 |
| `--kk` | `#5B8AD6` | **der Akzent** auf Nacht, Button-Fläche mit Nacht-Text | 5.3 : 1 |
| `--kk-ink` | `#2F5FAE` | Akzent als Text/Fläche auf Papier | 5.7 : 1 |

Das Karriere-Band ist die einzige volle Akzentfläche der Seite — mit Nacht-Text, nie Grau
(Guardrail „keine graue Schrift auf farbigem Grund").

## Typografie

Ein Face: **Archivo Variable** (wght 100–900, wdth 62–125, OFL), lokal in `assets/fonts/`.
Nicht Inter, kein System-Font (Guardrail).

- Display: `font-stretch: 125%`, Weight 800, Tracking −0.035em, Line-Height .92
- `--fs-mega` 52–136px (Hero, Philosophie) · `--fs-display` 42–92px (Sektionen)
- Body 17px, Lead 18–22px, Label 13px Caps +0.12em
- Keine Mittelstufe zwischen Label und Display — Typo-Extreme.

## Der eine Move: „Der Winkel"

Die zwei Chevrons des KK-Logos sind die einzige Form der Seite:

- Logo als Vektor (`chev_mark`, `assets/favicon.svg`) — aus dem Rasterlogo nachgezeichnet, **vom Kunden bestätigen lassen**
- Bild-Reveals: `clip-path` mit „<"-Spitze, gesteuert über `--x` (`.reveal-img`)
- Seitenwechsel: View-Transition-Wipe mit derselben Spitze
- Button-Hover, mobiles Menü, Kontaktkarten: Füllung wischt im selben Winkel herein
- Listenpunkte, Hero-Linien: dieselbe Form in klein bzw. als Strich

## Motion

Guardrail „Motion nur, wo sie Information trägt" ist **bewusst gelockert** — der Auftrag lautete
„Animationen sollen sehr gut sein". Ersatzregel: jede Animation hat einen benennbaren Zweck, und
bei `prefers-reduced-motion` bleibt nur Funktion.

| # | Wo | Was | Zweck |
|---|---|---|---|
| 1 | Start, 1× pro Session | Intro: Chevrons + Wortmarke, Winkel-Wipe (~1.3s, Klick überspringt) | Markenmoment |
| 2 | Hero | Zeilen aus Maske (SplitText), Chevron-Linien zeichnen sich, Scroll-Parallax | Hierarchie |
| 3 | Header | Glas ab 40px, beim Runterscrollen weg, beim Hochscrollen da | Platz |
| 5 | Leistungen Start | Desktop ≥1024px: gepinnte horizontale Strecke + Fortschritt; darunter gestapelt | Überblick |
| 6 | Osmose | Vorher/Nachher-Slider, zeigt beim ersten Sichtkontakt einmal die Ziehbarkeit | Beweis |
| 7 | Philosophie | Wort für Wort hell über einem Fassadenfoto mit Parallax | Botschaft |
| 8 | Bilder | Winkel-Reveal + Scale 1.18→1 | Signatur |
| 9 | Timeline | Linie zeichnet sich mit dem Scroll | Geschichte |
| 10 | Team | Initialen/Chevron bewegen sich bei Hover | Nähe |
| 11 | Buttons | Magnet max. 6px, nur `pointer: fine` | Affordanz |
| 12 | Notruf-Pille | erscheint nach dem Hero, verschwindet am Footer | Erreichbarkeit |
| 13 | Seitenwechsel | Cross-Document View Transitions, reines CSS | Kontinuität |
| 14 | Scroll | Lenis, synchron mit ScrollTrigger; Touch bleibt nativ | Gefühl |

Easing `expo.out` / `cubic-bezier(.16,1,.3,1)`, kein Bounce/Elastic. Nur `transform`, `opacity`,
`clip-path` werden animiert.

**Robustheit:** Versteckte Startzustände gelten nur unter `html.js` *und* `no-preference`.
Lädt GSAP nicht, entfernt `motion.js` die Klasse wieder; läuft `motion.js` gar nicht, tut es ein
3-Sekunden-Timeout im `<head>`. Das Intro hat zusätzlich einen CSS-Failsafe (2.4s).

## Bibliotheken (lokal, `assets/vendor/`)

GSAP 3.15 (Core, ScrollTrigger, SplitText — seit 3.13 frei nutzbar), Lenis 1.3.26.
Zusammen ca. 55 KB gzip. Keine CDN-Anfragen.

## Bilder

Platzhalter von Unsplash, lokal als AVIF + WebP in 800/1600px (`assets/img/`). Nachweise im
Impressum. Das Vorher/Nachher-Paar ist **aus einem Foto erzeugt** (Staub/Kalk künstlich
aufgelegt) und als „Symbolbild" gekennzeichnet — ersetzen, sobald echte Fotos da sind.
Das Team zeigt Initialen statt Fotos („Foto folgt").

## Formulare

Keine — Entscheidung vom 2026-09-30. Stattdessen `tel:`-Links und `mailto:` mit vorbereitetem
Betreff und Text (Angebotsanfrage, je Stelle eine Bewerbung).

## Überarbeitung 2026-09-30: weniger Schablone

Nach Kundenfeedback entfernt, weil textlastig oder austauschbar: Über-uns-Block mit Kennzahlen
(23 / 7 / 24/7 / 4), Zielgruppen-Leiste, Eyebrow-Labels über jeder Überschrift, Schlagwort-Pillen,
Checklisten, Drei-Spalten-Texte unter der Philosophie, Benefits-Raster auf der Karriereseite,
Privat/Gewerbe-Umschalter. Überschriften sind jetzt sachlich („Leistungen", „Unser Team") statt
Werbesprüche. Hero: nur Headline, eine Zeile, zwei Buttons. Jede Unterseite hat ein Foto im Kopf.
Layout breiter: `--max` 1680px, Gutter bis 4rem.

**Regel für später:** keine Sektion nur aus Text; keine erfundenen Kennzahlen; keine Kicker-Labels.