# 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.