# Visual Direction: Blueprint to Reality + Construction Timeline

**Goal:** Die Gasser-Website professioneller, klarer und bewegter machen, ohne die UX mit 3D-Spielereien zu überladen.

**Empfehlung:** Variante A + C kombinieren:
- Blueprint to Reality als visuelle Sprache
- Construction Timeline als UX-Struktur

## Aktuelle Probleme

1. Hero-Animation ist nicht sauber zentriert.
2. Projektfoto verdeckt die 3D-/Blueprint-Animation zu stark.
3. Header-Logo ist trotz Vergrösserung nicht markenstark genug.
4. Hover-Grow des Logos wirkt billig und muss ersetzt werden.
5. Motion ist aktuell dekorativ; sie muss die Arbeitsweise von Gasser erklären.

## Leitidee

Nicht: „Schau, wir können 3D.“

Sondern: „Schau, wie sauber Gasser Projekte von der Idee bis zur Übergabe führt.“

## Phase 1 — Hero neu denken

### Ziel
Hero wird zur hochwertigen Markenbühne: links klare Botschaft, rechts/zentral Blueprint-to-Reality-Animation.

### Änderungen
- Foto nicht mehr als grosse verdeckende rechte Karte im Hero.
- Hero als zweischichtige Bühne:
  - Hintergrund: zentrierter Blueprint-Raster + Gasser-Emblem als dezente 3D-Plakette.
  - Vordergrund: Text, CTA und kleine Material-/Projektkarten.
- Projektfoto als kleiner „Reality“-Layer, der aus Blueprint-Linien hervorgeht.
- Animation auf Desktop sichtbar, auf Mobile stark vereinfacht.

### Dateien
- `src/pages/index.astro`
- `src/components/ConstructionScene.astro`
- `src/scripts/construction-scene.ts`
- evtl. neu: `src/components/HeroRealityCard.astro`

### Akzeptanz
- Animation ist horizontal/vertikal bewusst komponiert.
- Kein Foto verdeckt den Haupt-Fokus.
- Hero wirkt auch als statisches Screenshot professionell.

## Phase 2 — Header/Logo neu lösen

### Ziel
Header wirkt ruhig, hochwertig und stabil. Kein Hover-Grow.

### Änderungen
- Header nutzt statisches, klares Wordmark-Logo als SVG/JPG-Fallback.
- Emblem wird separat als kleines Trust-/Motion-Element eingesetzt, nicht als Hover-Spielzeug.
- Hover nur als feine Bordeaux-Linie oder Lichtkante unter dem Logo.
- Optional: Header schrumpft beim Scrollen minimal, aber kontrolliert.

### Dateien
- `src/components/Header.astro`
- `src/components/AnimatedLogo.astro` eventuell zurückbauen/ersetzen
- `src/scripts/header-motion.ts` optional

### Akzeptanz
- Logo ist sofort lesbar.
- Kein sprunghafter Grössenwechsel.
- Header bleibt funktional und ruhig.

## Phase 3 — Construction Timeline als UX-Struktur

### Ziel
Die Startseite erklärt den Projektablauf hochwertig und vertrauensbildend.

### Struktur
1. Idee / Anfrage
2. Besichtigung
3. Planung / Offerte
4. Rohbau / Ausführung
5. Übergabe

### Motion
- Beim Scrollen zeichnet sich eine Linie wie auf einem Bauplan.
- Kleine Nodes aktivieren sich je Schritt.
- Dazu echte Inhalte, keine leeren Effekte.

### Dateien
- neu: `src/components/ConstructionTimeline.astro`
- neu: `src/scripts/timeline-scroll.ts`

### Akzeptanz
- Nutzer versteht sofort, wie Gasser arbeitet.
- Animation unterstützt den Inhalt.

## Phase 4 — Projektkarten professioneller machen

### Ziel
Referenzen werden hochwertiger und individueller.

### Änderungen
- Projektkarte als Blueprint → Foto Karte:
  - Default: Foto mit ruhiger Overlay-Typografie
  - Hover: dezente Planlinien/Ortsdaten/Kategorie
- Keine identischen Fotos final verwenden.
- Pixabay nur für Texturen/Materialhintergründe, nicht als falsche Referenzfotos.

### Dateien
- `src/components/ReferenceCard.astro`
- `src/pages/referenzen/index.astro`

## Phase 5 — Materialsystem

### Ziel
Beton/Sichtbeton, Bordeaux, Anthrazit und Off-White werden als konsistentes visuelles System eingesetzt.

### Mögliche Pixabay-Assets
Nur wenn echte Assets fehlen:
- Betontextur
- Baustellenstaub/Materialstruktur
- dezente Stahl-/Holz-/Glasdetails

Keine generischen lächelnden Bauarbeiter, keine fremden Baustellen als Referenzen.

## Phase 6 — Technische Optimierung

### Ziel
Motion bleibt schnell und robust.

### Änderungen
- Three.js nur lazy-loaden, wenn sichtbare Motion-Insel im Viewport ist.
- GSAP/ScrollTrigger nur bei Bedarf ergänzen; nicht blind installieren.
- Optional Lenis für Smooth Scroll, aber nur wenn mobile Performance passt.
- Astro View Transitions prüfen, bevor Barba.js eingebaut wird.

## Priorisierte nächste Umsetzung

1. Header-Logo neu: statisch, gross genug, kein Hover-Grow.
2. Hero-Komposition neu: Foto aus der dominanten rechten Karte entfernen/verkleinern, 3D/Blueprint zentrieren.
3. ConstructionScene als echte Blueprint-to-Reality-Bühne umbauen.
4. ConstructionTimeline-Komponente bauen.
5. ReferenceCard-Hover mit Blueprint-Layer verbessern.
6. Mobile QA und Performance-Check.

## Nicht tun

- Keine schwere 3D-Spielwelt.
- Keine langen Loader.
- Keine Navigation, die man lernen muss.
- Keine Fake-Referenzbilder von Pixabay.
- Keine Effekte, die Vertrauen gegen Show eintauschen.