Neue Website Kirschner Gebäudeservice

Statische Seite ohne Build und ohne Fremdanfragen: Start, Leistungen,
Unternehmen, Karriere, Kontakt, Impressum und Datenschutz. Design
„Präzision in Blau" mit Archivo Variable, Motion über lokal eingebundenes
GSAP/ScrollTrigger/SplitText und Lenis, reduced-motion-Fallback.
Seiten entstehen aus tools/build_pages.py.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

DESIGN.md

@@ -0,0 +1,106 @@
+# 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
+- Eyebrow-Marker, 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 |
+| 4 | Kennzahlen | Zähler; „Jahre" wird aus dem aktuellen Jahr berechnet | Fakten |
+| 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, an Scroll gekoppelt | 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).