NotPika69andClaude Opus 5.5
62916fc179
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>
107 lines
5.4 KiB
Markdown
107 lines
5.4 KiB
Markdown
# 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).
|