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>
5.4 KiB
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.
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
— 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-mega52–136px (Hero, Philosophie) ·--fs-display42–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-pathmit „<"-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).