# Gasser Website – Konzept für den Neubau

## 1. Zielbild

Die neue Website soll eine moderne, professionelle und gut bewirtschaftbare Plattform für die Gasser Bauunternehmen GmbH werden. Sie soll nicht nur „online präsent“ sein, sondern aktiv Vertrauen schaffen, regionale Sichtbarkeit stärken und Anfragen generieren.

Kernziele:

- moderner, hochwertiger Auftritt für ein regionales Bauunternehmen
- klare Positionierung: zuverlässig, erfahren, persönlich, handwerklich stark, regional verwurzelt
- einfache Pflege von Referenzen, Bildern und aktuellen Informationen
- starke lokale SEO für Windisch, Brugg, Hausen und Region Aargau
- bessere Conversion: Kontakt, Rückruf, Offerten-/Projektanfrage
- skalierbare technische Grundlage für spätere Erweiterungen

## 2. Strategische Positionierung

### Empfohlene Kernbotschaft

Gasser Bauunternehmen GmbH steht für präzises, verlässliches Bauen in der Region – von Neubauten über Umbauten bis zu Kundenarbeiten und Sanierungen.

### Markenwirkung

Die Seite soll nicht verspielt wirken, sondern:

- solide
- präzise
- hochwertig
- nahbar
- regional
- erfahren
- technisch kompetent

Nicht: generische Baukasten-Website mit Stockfoto-Lächeln. Davon hat die Welt bereits genug Elend gesehen.

## 3. Zielgruppen

### Primäre Zielgruppen

1. Private Bauherren
   - EFH, Umbau, Anbau, Sanierung, kleinere Kundenarbeiten
   - brauchen Vertrauen, klare Kontaktaufnahme, Beispiele ähnlicher Projekte

2. Architekten und Planer
   - suchen zuverlässige Ausführungspartner
   - brauchen Referenzen, Erfahrung, saubere Kommunikation, Kompetenznachweise

3. Gewerbe / öffentliche Auftraggeber
   - Mehrzweckgebäude, Bürogebäude, technische Gebäude, Garagen, Sanierungen
   - brauchen Seriosität, Leistungsumfang, Referenzen, Kontaktdaten

4. Bestehende Kunden / regionale Empfehlungen
   - suchen Telefonnummer, E-Mail, Adresse, aktuelle Infos

## 4. Empfohlene Seitenstruktur

### Hauptnavigation

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

### Detailstruktur

#### Startseite

Zweck: Vertrauen + Orientierung + schnelle Anfrage.

Inhalte:

- starker Hero mit echtem Baustellen-/Projektbild oder hochwertiger 3D-/Motion-Szene
- Claim / Positionierung
- primärer CTA: „Projekt besprechen“ oder „Offerte anfragen“
- sekundärer CTA: „Referenzen ansehen“
- Leistungsübersicht
- ausgewählte Referenzen
- Vorteile / Warum Gasser
- kurzer Abschnitt zur Firmengeschichte
- Kontaktbox

#### Leistungen

Übersichtsseite mit klaren Leistungskacheln:

- Neubauten
- Umbauten
- Kundenarbeiten
- Sanierungen
- Beton- und Maurerarbeiten
- Anbauten / Erweiterungen
- Garagen / Kleinbauten

Jede Leistung sollte langfristig eine eigene Unterseite bekommen.

#### Leistungsdetailseite

Beispiel: `/leistungen/neubauten`

Aufbau:

- kurze Einordnung: Für wen ist diese Leistung relevant?
- typische Arbeiten
- Ablauf der Zusammenarbeit
- passende Referenzen
- FAQ
- CTA: „Neubauprojekt besprechen“

#### Referenzen

Dies wird eine zentrale Verkaufsseite.

Empfohlene Funktionen:

- Projektkarten mit grossen Bildern
- Filter nach Typ: Neubau, Umbau, Sanierung, Kundenarbeit, Gewerbe, EFH, MFH
- Projekt-Detailseiten
- Lightbox / Galerie
- optional Vorher-Nachher-Bilder
- PDF-Referenzliste als Download, aber nicht als Hauptinhalt

Projekt-Datenmodell:

- Titel
- Ort
- Jahr
- Kategorie
- Kurzbeschreibung
- Leistungen von Gasser
- Architekt / Partner
- Bildergalerie
- Highlight / Besonderheit
- optional Kundenstimme

#### Über uns

Inhalte:

- Firmengeschichte
- Philosophie
- Team
- Werte
- Region / Standort
- Verbände / Qualifikationen / Partner, falls vorhanden

Die bisher leere Team-Seite sollte gefüllt werden. Menschen bauen Vertrauen besser als generische Slogans. Schockierend, aber wahr.

#### Aktuelles

Für gut bewirtschaftbare Inhalte:

- Neuigkeiten
- kurze Baustellenupdates
- abgeschlossene Projekte
- Betriebsferien / Erreichbarkeit
- offene Stellen / Lehrstellen, falls relevant

Diese Seite muss leicht pflegbar sein, sonst wird sie nach drei Monaten zur digitalen Mumie.

#### Kontakt

Inhalte:

- Adresse
- Telefonnummer mit Click-to-call
- E-Mail
- Kontaktformular
- Öffnungszeiten / Erreichbarkeit, falls gewünscht
- Karte
- Datenschutz-Hinweis
- optional Anfrage-Typ-Auswahl: Neubau, Umbau, Kundenarbeit, Referenz, Sonstiges

## 5. Bewirtschaftbarkeit / Content Management

Die Website soll leicht erweiterbar sein, besonders für:

- neue Referenzen
- neue Bilder
- aktuelle Meldungen
- Leistungsseiten
- Team-Mitglieder
- SEO-Texte

### Empfehlung: Content Collections statt schweres klassisches CMS

Für dieses Projekt würde ich keine schwere WordPress-Installation als erste Wahl nehmen. Besser:

- statische / hybride Website mit strukturierten Content-Dateien
- Inhalte in Markdown, MDX oder JSON/YAML Collections
- Bilder sauber versioniert oder in einem Medienordner
- Deployment über GitHub / Hosting-Pipeline

Vorteile:

- schnell
- sicher
- wenig Wartung
- gute Performance
- klare Inhaltsstruktur
- sehr gut erweiterbar

### Mögliche technische Varianten

#### Option A – Astro + Content Collections

Meine bevorzugte Richtung für dieses Projekt.

Vorteile:

- extrem schnell
- sehr gut für Marketing-/Content-Websites
- Markdown/MDX-Content ideal für Referenzen und Aktuelles
- SEO-freundlich
- kann bei Bedarf React-Komponenten integrieren
- Three.js / WebGL gezielt möglich
- wenig Overhead

Gut für:

- Firmenwebsite
- Referenzen
- Blog/Aktuelles
- statische Seiten
- gute Performance

#### Option B – Next.js + Headless CMS

Vorteile:

- sehr flexibel
- gut bei komplexeren dynamischen Anforderungen
- gute CMS-Integrationen

Nachteile:

- mehr Komplexität
- mehr Wartung
- für diese Website eventuell zu schwer, wenn kein echtes Login-/Admin-System nötig ist

#### Option C – WordPress modernisiert

Vorteile:

- für Nicht-Techniker bekannt
- einfacher visueller Editor

Nachteile:

- Wartung, Updates, Security
- Performance braucht Disziplin
- alte Plugin-Hölle lauert stets mit gezücktem Messer

Nur sinnvoll, wenn Gasser zwingend selbst über ein klassisches Admin-Backend pflegen will.

## 6. Empfohlener Tech-Stack

Empfehlung für Phase 1:

- Astro
- TypeScript
- Tailwind CSS oder CSS Modules mit Design Tokens
- Content Collections für Referenzen und Aktuelles
- Markdown/MDX für Seiteninhalte
- Bildoptimierung über Astro Image / Sharp
- Three.js nur gezielt und progressiv geladen
- GitHub als Source of Truth
- Deployment später via Netlify, Vercel, Cloudflare Pages oder ähnlichem

## 7. Three.js / Motion-Konzept

Three.js kann die Website hochwertiger wirken lassen, aber nur wenn es subtil und sinnvoll eingesetzt wird.

### Empfehlung

Three.js nicht als Spielerei, sondern als Akzent:

1. Hero-Visual
   - abstrakte 3D-Baustruktur
   - Linienraster / Bauplan / Beton- oder Stahl-Elemente
   - leichte Parallax-Bewegung
   - dezente Interaktion mit Maus / Scroll

2. Referenzen-Übergang
   - leichte Tiefenwirkung / Bildkarten-Parallax
   - kein überladener 3D-Zirkus

3. Ladeverhalten
   - Three.js nur auf Desktop oder bei ausreichender Leistung laden
   - Fallback-Bild für Mobile / Reduced Motion
   - Accessibility beachten: `prefers-reduced-motion`

### Stilrichtung

Passend wäre ein Mix aus:

- BMW-artige Präzision: dunkel, technisch, hochwertige Fotografie, klare Kanten
- Schweizer Bau-/Architektur-Ästhetik: ruhige Typografie, Raster, viel Struktur
- warme regionale Vertrauenssignale: echte Menschen, echte Baustellen, echte Projekte

Keine glitzernde Tech-Demo. Es geht um ein Bauunternehmen, nicht um einen Shader-Wettbewerb für nervöse Waschmaschinen.

## 8. Designrichtung

### Visuelle Leitplanken

- Farben: bestehendes Gasser-Rot/Bordeaux als Markenanker, kombiniert mit Anthrazit, Beton-Grau, Off-White
- Typografie: moderne Sans-Serif, sachlich und hochwertig
- Layout: klares Grid, grosse Bilder, saubere Abstände
- Formen: eher kantig/präzise statt rund und verspielt
- Bilder: echte Referenz-/Baustellenbilder priorisieren
- Icons: sparsam, technisch, linear

### Designprinzip

„Präzises Bauen, regionales Vertrauen.“

## 9. SEO-Konzept

### Lokale SEO-Fokusse

- Bauunternehmen Windisch
- Bauunternehmen Brugg
- Bauunternehmen Aargau
- Umbau Windisch / Brugg
- Neubau Region Brugg
- Maurerarbeiten Aargau
- Betonarbeiten Windisch
- Sanierungen Region Brugg

### Technische SEO

- eindeutige Seitentitel
- individuelle Meta Descriptions
- saubere H1-Hierarchie
- strukturierte Daten: LocalBusiness / ConstructionBusiness
- OpenGraph-Bilder
- Sitemap.xml
- robots.txt
- schnelle Ladezeiten
- Bild-Alt-Texte

## 10. Umsetzung in Phasen

### Phase 0 – Grundlagen klären

- offene Inhaltsfragen beantworten
- Branding-/Bildmaterial sammeln
- Tech-Stack final bestätigen
- Hosting-Strategie festlegen

### Phase 1 – Informationsarchitektur und Content-Modell

- finale Seitenstruktur
- Content Collections definieren
- Referenz-Datenmodell
- Aktuelles-Datenmodell
- Media-Konventionen

### Phase 2 – Designsystem

- Farben
- Typografie
- Buttons
- Cards
- Navigation
- Footer
- CTA-Blöcke
- Galerie-Komponenten
- Formular-Komponenten

### Phase 3 – Prototyp

- Startseite
- Referenzen-Übersicht
- Referenz-Detailseite
- Leistungsseite
- Kontaktseite

### Phase 4 – Content-Migration

- bestehende Inhalte überarbeiten
- Referenzen strukturieren
- Bilder optimieren
- SEO-Texte erstellen

### Phase 5 – Implementierung

- Astro-Projekt aufsetzen
- Layouts und Komponenten bauen
- Content Collections integrieren
- Three.js Hero optional einbauen
- responsive/mobile testen

### Phase 6 – Qualitätssicherung

- Performance
- SEO
- Accessibility
- Mobile UX
- Formular-Test
- Browser-Test
- Bildgrössen
- Fallbacks für Three.js

### Phase 7 – Launch

- Domain/Hosting verbinden
- Redirects prüfen
- Analytics/Search Console einrichten, falls gewünscht
- Sitemap einreichen
- Backup-/Pflegeprozess dokumentieren

## 11. Pflegeprozess nach Launch

### Neue Referenz hinzufügen

1. neue Markdown-/MDX-Datei in `src/content/references/`
2. Bilder in Projektordner ablegen
3. Metadaten ergänzen: Titel, Ort, Jahr, Kategorie
4. kurze Beschreibung schreiben
5. lokal prüfen
6. commit + deploy

Optional später: kleines Admin-Interface oder Headless CMS ergänzen, falls Nicht-Developer selbst pflegen sollen.

### Neue Aktualität hinzufügen

1. Datei in `src/content/news/`
2. Titel, Datum, Kategorie
3. Text und Bild
4. deploy

## 12. Vorläufige Empfehlung

Ich empfehle:

- **Astro + TypeScript + Content Collections**
- modernes, kantiges Design mit Gasser-Rot, Anthrazit, Beton-Grau
- echte Referenzbilder als visuelles Zentrum
- Three.js nur subtil im Hero und nur mit Fallback
- Referenzen und Aktuelles als strukturierte Inhalte
- kein schweres CMS in Phase 1
- später optional ein leichtes CMS/Admin ergänzen, wenn der Pflegebedarf das rechtfertigt

## 13. Offene Fragen an den Auftraggeber

### Inhalt / Positionierung

1. Was ist der wichtigste Geschäftszweig von Gasser: Neubauten, Umbauten, Kundenarbeiten, Sanierungen oder etwas anderes?
2. Welche Leistungen sollen aktiv beworben werden, und welche eher nur erwähnt?
3. Gibt es Leistungen, die nicht mehr angeboten werden oder nicht prominent erscheinen sollen?
4. Was unterscheidet Gasser von anderen Bauunternehmen in der Region?
5. Soll der Claim „Wir realisieren Ihre Visionen“ bleiben, angepasst oder ersetzt werden?

### Zielgruppen / Leads

6. Welche Anfragen sind besonders wertvoll?
7. Sollen Privatkunden, Architekten oder Gewerbekunden priorisiert werden?
8. Soll die Website primär Telefonanrufe, E-Mails oder Formularanfragen erzeugen?
9. Gibt es geografische Gebiete, die gezielt beworben werden sollen?
10. Gibt es Aufträge, die Gasser nicht mehr möchte, z. B. zu kleine Arbeiten oder bestimmte Projektarten?

### Referenzen / Bilder

11. Gibt es aktuelle Referenzen nach 2021/2022?
12. Dürfen alle bestehenden Referenzbilder weiterverwendet werden?
13. Gibt es hochwertigere Originalbilder als die Website-Versionen?
14. Können wir pro Projekt zusätzliche Infos bekommen: Ort, Jahr, Leistung, Besonderheiten, Architekt, Rolle von Gasser?
15. Sind Vorher-Nachher-Bilder vorhanden?
16. Dürfen Projektorte vollständig genannt werden, oder sollen manche anonymisiert werden?

### Team / Vertrauen

17. Soll das Team mit Fotos vorgestellt werden?
18. Gibt es Zertifikate, Verbände, Partner oder Auszeichnungen?
19. Gibt es Kundenstimmen oder dürfen wir welche einholen?
20. Soll die Firmengeschichte ausführlicher erzählt werden?

### Aktuelles / Pflege

21. Wer soll die Website später pflegen?
22. Ist Git/Markdown-Pflege akzeptabel, oder braucht es ein visuelles Admin-Backend?
23. Wie oft werden neue Referenzen oder News realistisch ergänzt?
24. Soll es eine Job-/Lehrstellen-Seite geben?
25. Soll es einen Bereich für Betriebsferien oder kurzfristige Mitteilungen geben?

### Design / Three.js

26. Soll der Stil eher traditionell-seriös, architektonisch-premium oder technisch-modern wirken?
27. Ist ein dunkler Hero-Bereich mit hochwertiger Bild-/3D-Wirkung gewünscht?
28. Soll Three.js nur dezent eingesetzt werden oder als sichtbares Signature-Element?
29. Gibt es bestehende Markenrichtlinien, Logo-Dateien, Farben oder Schriften?
30. Gibt es Websites von Bau-/Architekturunternehmen, die euch gefallen?

### Technik / Betrieb

31. Wo soll die Website später gehostet werden?
32. Wer verwaltet Domain/DNS?
33. Soll ein Kontaktformular direkt E-Mails senden?
34. Braucht es Analytics, Cookie-Banner, Search Console?
35. Gibt es rechtliche Anforderungen: Datenschutztext, Impressum, Bildrechte?

## 14. Auftraggeber-Entscheidungen / Briefing-Update

Stand: aktuelles Briefing.

- Wichtigste Leistungen: **Kundenarbeiten** und **Umbauten**.
- Zielgruppen: primär private Kundschaft für Kundenarbeiten; Architekten für Umbauten und gelegentlich Neubauten.
- Wertvollste Leads: private Anfragen.
- Pflege: JARVIS/Hermes pflegt die Website via Git.
- Bilder: vorerst vorhandenes Material aus dem Audit nutzen; bessere Bilder folgen später.
- Referenzen: weitere Referenzen werden später ergänzt.
- Three.js: dezent, insbesondere für Seitenwechsel/Transitions; kein dominantes 3D-Element.
- Team: mit Fotos auf die Website.
- Claim: darf neu entwickelt werden.
- Kontaktziel: primär E-Mail, zusätzlich Telefon/Formular anbieten.
- Einzugsgebiet: Windisch, Hausen, Brugg und Umkreis.
- Verband: SBV einbinden.
- Aktuelles/Betriebsferien/Stellen/Projektupdates: ja, ein pflegbarer Bereich ist gewünscht.
- CI-Richtung: Gasser-Bordeauxrot gemäss Logo, Sichtbeton-/Beton-Anmutung, hochwertig, persönlich, vertrauensvoll, zuverlässig.
- Positionierung: Qualität statt günstig; „wir kümmern uns darum“.

Konsequenz: Die Website wird als hochwertige, lokal fokussierte Trust- und Lead-Plattform aufgebaut, nicht als reine Visitenkarte.