NotPika69andClaude Opus 5.5
09f40da363
Ersetzt die schematische Karte durch MapLibre GL 6.11 (lokal eingebunden, ohne React, da die Seite statisch ist). Kacheln vom OpenFreeMap-Stil "dark", auf die Nachtblau-Palette umgefärbt; Marker mit Label, lädt beim Heranscrollen und zoomt sanft auf den Standort. Die schematische Karte bleibt als Vorschau und Fallback ohne WebGL. Datenschutzerklärung um den Kartenanbieter ergänzt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
130 lines
6.9 KiB
Markdown
130 lines
6.9 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
|
||
- 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.
|
||
|
||
Zweite Runde: den Kontakt-Abschluss am Seitenende (riesiges „Kontakt" + Nummernliste, doppelt zu
|
||
Header und Footer) und das Riesen-„KIRSCHNER" im Footer entfernt.
|
||
|
||
**Regel für später:** keine Sektion nur aus Text; keine erfundenen Kennzahlen; keine Kicker-Labels.
|
||
|
||
## Karte (2026-09-30)
|
||
|
||
`assets/map.js` bindet MapLibre GL 6.11 (lokal, `assets/vendor/maplibre/`, ~300 KB gzip) ein — gleiche
|
||
Bibliothek wie die mapcn-React-Komponente, aber ohne React, weil die Seite statisch ist. Kacheln:
|
||
OpenFreeMap-Stil `dark`, per `setPaintProperty` auf die Nachtblau-Palette umgefärbt. Marker = Label-Pille
|
||
+ pulsierender Punkt. Lädt per IntersectionObserver 400px vor Sichtkontakt, fliegt dann von Zoom 12.6 auf
|
||
15 (bei reduced motion direkt 15). `cooperativeGestures`: Seite scrollt normal, Zoomen mit Strg/⌘.
|
||
Nicht Carto (aus der Komponente): Carto-Basemaps sind nur nicht-kommerziell frei.
|
||
Koordinaten aus OpenStreetMap (dort ist „Kirschner, Etzstraße 45" eingetragen).
|