Website-Entwurf für HEB Bauelemente (normtor.de)

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>

DESIGN.md

@@ -0,0 +1,37 @@
+# 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.