NotPika69andClaude Opus 5.5
bec24e5bbc
Akquise-Demo mit Startseite (Tor-Intro, 24-h-Renovierung mit Uhr, Über uns, Fachbetrieb statt Discount), Galerie mit Filter und Großansicht, Kontaktseite mit Anfrageformular sowie Impressum- und Datenschutz-Entwürfen. Statisches HTML/CSS/JS, Seiten und Bilder werden über tools/ erzeugt. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
38 lines
1.8 KiB
Markdown
38 lines
1.8 KiB
Markdown
# Design — HEB Bauelemente
|
||
|
||
## Idee: „Meisterbetrieb mit Gesicht“
|
||
|
||
Ein Ein-Mann-Fachbetrieb vom Land konkurriert mit Online-Discountern. Sein Argument ist die Person:
|
||
Beratung, Aufmaß, Montage und Hilfe im Ernstfall von Wolfgang Haas selbst. Die Seite ist deshalb hell,
|
||
warm und direkt, mit dem Porträt prominent, Telefonnummer überall und Texten in der Ich-/Wir-Form.
|
||
|
||
**Signatur:** Beim ersten Besuch liegt ein Sektionaltor aus sechs Lamellen mit HEB-Schild über dem Hero
|
||
und fährt nach oben weg, mit Lichtkante darunter. Das Lamellenmotiv kehrt als feine Linien in den
|
||
Seitenköpfen, der 24-h-Sektion und dem CTA-Band wieder.
|
||
|
||
## Tokens
|
||
|
||
| Token | Wert | Verwendung |
|
||
|---|---|---|
|
||
| `--blue` | `#00569D` | exakt aus dem HEB-Logo; Buttons, Akzente, Vertrauensleiste, CTA-Band |
|
||
| `--sky` | `#7CBCF0` | Blau auf dunklem Grund |
|
||
| `--amber` | `#F2AD33` | nur die 24-h-Uhr und die erledigten Schritte |
|
||
| `--ink` / `--text` / `--muted` | `#14202C` / `#2D3843` / `#5D6A77` | Text |
|
||
| `--paper` | `#F4F2ED` | warme Flächen (Über uns, Partner, Seitenköpfe) |
|
||
| `--steel` | `#1A232C` | 24-h-Sektion, Footer |
|
||
|
||
Schrift: **Barlow Condensed** 600/700 für Überschriften (technisch, Torbau), **Barlow** 400–600 für Text.
|
||
Lokal eingebunden, nur Latin-Subset. Radius 4 px. Breite max. 1200 px, Seitenrand `clamp(16px, 4vw, 40px)`.
|
||
|
||
## Bewegung
|
||
|
||
- Tor-Intro: einmal pro Sitzung (`sessionStorage`), nur ohne `prefers-reduced-motion`, Klick öffnet sofort,
|
||
Notbremse im Head-Script nach 3,5 s, falls `site.js` nicht lädt.
|
||
- 24-h-Uhr: Ring und Zähler füllen sich, während man an den vier Schritten vorbeiscrollt (6/12/19/24 h).
|
||
- Einblendungen beim Scrollen (`.reveal`), Bild-Zoom bei Hover. Alles ohne Bibliotheken.
|
||
|
||
## Mobil
|
||
|
||
Anrufleiste unten (Anrufen/Anfrage), Menü als Vollbreite-Liste, Hero-Ausschnitt auf das Tor verschoben,
|
||
Galerie zweispaltig, Großansicht mit Wischen.
|