# Gasser Website – Brand & Content Brief

Stand: nach Auftraggeber-Briefing im Topic „Gasser Website“.

## 1. Strategische Leitplanken

### Wichtigste Leistungen

Priorität 1:

- Kundenarbeiten
- Umbauten

Priorität 2:

- gelegentliche Neubauten
- Sanierungen / Anbauten / Baumeisterarbeiten als unterstützende Leistungsfelder

### Zielgruppen

Primär:

1. Private Kundschaft
   - besonders für Kundenarbeiten
   - wertvollste Anfragen

2. Architekten
   - besonders für Umbauten
   - gelegentlich Neubauten

Sekundär:

- regionale Gewerbe-/Liegenschaftskunden
- bestehende Kunden
- Empfehlungskontakte

### Einzugsgebiet

Primär:

- Windisch
- Hausen
- Brugg
- unmittelbarer Umkreis / Region Brugg / Aargau

### Kontaktziel

Primäres Conversion-Ziel:

- E-Mail-Kontaktaufnahme

Zusätzlich anbieten:

- Telefon / Click-to-call
- Kontaktformular
- optional Rückrufwunsch

### Pflege

Die Website wird durch JARVIS/Hermes via Git gepflegt.

Konsequenz:

- Content in Markdown/MDX/Content Collections
- Referenzen und Aktuelles strukturiert im Repo
- keine schwere CMS-Pflicht in Phase 1
- klare Datei- und Bildkonventionen

## 2. Markenwerte

Die Website soll vermitteln:

- hohe Qualität
- persönliche Betreuung
- Vertrauen
- Zuverlässigkeit
- „Wir kümmern uns darum“
- saubere Ausführung
- regionale Nähe
- Erfahrung
- Professionalität
- nicht primär günstig

### Tonalität

Sachlich, persönlich, verlässlich. Keine marktschreierischen Rabattsprüche. Die Haltung ist:

> Wir bauen sauber, denken mit und übernehmen Verantwortung.

## 3. Claim-Entwicklung

Der bisherige Claim „Wir realisieren Ihre Visionen“ kann ersetzt oder weiterentwickelt werden.

### Claim-Richtungen

#### Richtung A – persönlich & zuverlässig

- „Wir kümmern uns um Ihr Bauvorhaben.“
- „Bauen mit Verantwortung.“
- „Zuverlässig bauen. Persönlich betreut.“
- „Ihr Bauvorhaben in verlässlichen Händen.“

#### Richtung B – regional & handwerklich

- „Bauhandwerk aus der Region Brugg.“
- „Solides Bauhandwerk. Persönlich. Regional.“
- „Für Umbauten und Kundenarbeiten in Windisch, Brugg und Umgebung.“

#### Richtung C – hochwertig & vertrauensvoll

- „Qualität, auf die Sie bauen können.“
- „Bauen mit Präzision und Vertrauen.“
- „Sorgfältig geplant. Sauber ausgeführt.“

### Vorläufige Empfehlung

Primärer Claim für Hero-Tests:

> **Zuverlässig bauen. Persönlich betreut.**

Alternativer, etwas konkreterer Hero-Text:

> **Umbauten und Kundenarbeiten in Windisch, Brugg und Umgebung – zuverlässig, persönlich und sauber ausgeführt.**

## 4. Corporate Identity – Konzept

### Grundidee

„Sichtbeton trifft Bordeaux.“

Die visuelle Identität verbindet:

- Gasser-Bordeauxrot aus dem Logo
- Sichtbeton-/Betonflächen als Materialreferenz
- Anthrazit für technische Präzision
- warme Off-White-Flächen für Vertrauen und Lesbarkeit
- klare, kantige Architektur-Raster

### Wirkung

Die CI soll nicht billig, nicht laut und nicht beliebig wirken. Sie soll eher an hochwertige Architektur- und Baukommunikation erinnern:

- ruhig
- strukturiert
- solide
- hochwertig
- handwerklich glaubwürdig

## 5. Farbkonzept

Die exakten Farben müssen später aus dem Logo extrahiert/verifiziert werden. Vorläufige Arbeitswerte:

- Gasser Bordeaux: `#7A1F2B`
- Bordeaux Dunkel: `#4A121A`
- Sichtbeton: `#B8B4AA`
- Beton Hell: `#E7E3DA`
- Warm Off-White: `#F7F4EE`
- Anthrazit: `#1F2326`
- Stahlgrau: `#596066`
- Weiss: `#FFFFFF`

### Rollen

- Bordeaux: Marke, CTAs, aktive Zustände, kleine Akzente
- Anthrazit: Header, Footer, starke Typografie
- Sichtbeton / Beton Hell: Flächen, Cards, Hintergrundtexturen
- Off-White: Hauptflächen, Lesbarkeit
- Stahlgrau: Sekundärtext, Meta-Informationen

## 6. Typografie

Empfohlene Richtung:

- moderne, sachliche Sans-Serif
- technisch/architektonisch, aber nicht kalt
- gute Lesbarkeit auf Mobile

Mögliche Fonts:

- Inter
- DM Sans
- IBM Plex Sans
- Satoshi / ähnliche moderne Sans, falls Lizenz passend

Vorläufige Empfehlung:

- Headings: DM Sans, kräftig, leicht eng laufend
- Body: Inter oder DM Sans, ruhig und gut lesbar

## 7. Bildsprache

### Priorität

Echte Bilder vor Stockfotos.

Vorerst verwenden wir die vorhandenen Bilder aus dem alten Website-Audit. Später werden bessere Bilder geliefert.

### Gewünschte Bildwirkung

- echte Baustellen
- fertige Umbauten / Kundenarbeiten
- Detailaufnahmen von sauberer Ausführung
- Sichtbeton, Mauerwerk, Werkzeuge, Materialität
- Teamfotos: authentisch, nicht überinszeniert
- Menschen bei der Arbeit, aber hochwertig fotografiert

### Für Referenzen

Pro Referenz ideal:

- 1 Hero-Bild
- 3–8 Galerie-Bilder
- Detailbild / Materialbild
- falls vorhanden: Vorher/Nachher

## 8. Three.js / Motion

Three.js soll dezent eingesetzt werden, besonders bei Seitenwechseln oder Übergängen.

### Empfohlene Anwendungen

- animiertes Gasser-Logo im Header als dezente Three.js-Plane mit Hover-/Tiefeneffekt und statischem PNG-Fallback
- dezente Page-Transition mit Bauplan-/Rasterlinien
- leichte Material-/Beton-Partikel oder Linienbewegung
- minimaler Tiefeneffekt im Hero
- Übergänge zwischen Referenzbildern / Seitenbereichen

### Grenzen

- keine Performance-Bremse
- keine laute 3D-Spielerei
- Fallback für Mobile
- `prefers-reduced-motion` respektieren
- Inhalt und Conversion bleiben wichtiger als Effekt

## 9. Informationsarchitektur – angepasst

### Hauptnavigation

1. Startseite
2. Leistungen
3. Referenzen
4. Über uns
5. Aktuelles
6. Kontakt

### Leistungen – Priorisierung

1. Kundenarbeiten
2. Umbauten
3. Neubauten
4. Sanierungen / Baumeisterarbeiten

### Startseite – Hero-Vorschlag

Headline:

> Umbauten und Kundenarbeiten in Windisch, Brugg und Umgebung

Subline:

> Gasser Bauunternehmen GmbH steht für zuverlässige Ausführung, persönliche Betreuung und Bauqualität, auf die Sie sich verlassen können.

Primärer CTA:

> Projekt per E-Mail anfragen

Sekundäre CTAs:

> Referenzen ansehen
> Leistungen entdecken

### Startseite – Kernblöcke

- Hero mit CTA
- Drei Leistungsschwerpunkte: Kundenarbeiten, Umbauten, Neubauten
- Warum Gasser?
  - persönlich betreut
  - zuverlässig geplant und ausgeführt
  - regional verankert
  - Qualitätsanspruch statt Billiglösung
- ausgewählte Referenzen
- Team / persönlicher Ansprechpartner
- Aktuelles / Hinweise
- Kontaktbox

## 10. Content-Modelle

### Referenzen

Pfad später wahrscheinlich:

`src/content/references/*.mdx`

Felder:

- title
- slug
- category
- audience
- location
- year
- services
- architect
- summary
- body
- heroImage
- gallery
- featured
- privateVisibility / anonymizedLocation, falls nötig

### Aktuelles

Pfad später:

`src/content/news/*.mdx`

Felder:

- title
- slug
- date
- category
- summary
- body
- image
- published

Mögliche Kategorien:

- Neuigkeit
- Projektupdate
- Betriebsferien
- Referenz
- Stelle / Lehrstelle

### Team

Pfad später:

`src/content/team/*.mdx` oder `src/data/team.ts`

Felder:

- name
- role
- photo
- shortBio
- phone optional
- email optional

## 11. Vertrauen / Proof Points

Einzubinden:

- Verband: SBV
- echte Teamfotos
- echte Referenzen
- regionale Verankerung
- Firmengeschichte
- klare Kontaktmöglichkeiten
- keine Billigpositionierung

Mögliche Formulierungen:

- „Wir bleiben erreichbar, denken mit und kümmern uns um eine saubere Ausführung.“
- „Für Bauherrschaften, die Wert auf Qualität und verlässliche Betreuung legen.“
- „Persönlich betreut von der ersten Anfrage bis zur fertigen Arbeit.“

## 12. Nächster Umsetzungsschritt

Als nächstes wird erstellt:

1. formales `DESIGN.md` mit Tokens für Farben, Typografie, Layout und Komponenten
2. technische Architekturentscheidung Astro + Content Collections
3. konkrete Implementierungsplanung für Phase 1
4. initiales Astro-Projekt im Repo
5. erste Design-Prototypen für Startseite / Referenzen