---
version: alpha
name: Gasser Bauunternehmen
description: Sichtbeton trifft Bordeaux – hochwertige, persönliche und zuverlässige Baukommunikation für Kundenarbeiten und Umbauten in der Region Brugg.
colors:
  primary: "#7A1F2B"
  secondary: "#1F2326"
  tertiary: "#B8B4AA"
  bordeaux: "#7A1F2B"
  bordeaux-dark: "#4A121A"
  concrete: "#B8B4AA"
  concrete-light: "#E7E3DA"
  off-white: "#F7F4EE"
  anthracite: "#1F2326"
  steel-gray: "#596066"
  white: "#FFFFFF"
  success: "#2F6B4F"
typography:
  display:
    fontFamily: DM Sans
    fontSize: 4rem
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: "-0.05em"
  h1:
    fontFamily: DM Sans
    fontSize: 3rem
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: "-0.04em"
  h2:
    fontFamily: DM Sans
    fontSize: 2rem
    fontWeight: 650
    lineHeight: 1.15
    letterSpacing: "-0.03em"
  h3:
    fontFamily: DM Sans
    fontSize: 1.375rem
    fontWeight: 650
    lineHeight: 1.2
    letterSpacing: "-0.02em"
  body:
    fontFamily: Inter
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: "0em"
  body-large:
    fontFamily: Inter
    fontSize: 1.1875rem
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: "-0.01em"
  label:
    fontFamily: DM Sans
    fontSize: 0.8125rem
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: "0.08em"
rounded:
  none: 0px
  sm: 2px
  md: 6px
  lg: 10px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 64px
  section: 96px
components:
  button-primary:
    backgroundColor: "{colors.bordeaux}"
    textColor: "{colors.white}"
    rounded: "{rounded.sm}"
    padding: 14px
  button-primary-hover:
    backgroundColor: "{colors.bordeaux-dark}"
    textColor: "{colors.white}"
  button-secondary:
    backgroundColor: "{colors.anthracite}"
    textColor: "{colors.white}"
    rounded: "{rounded.sm}"
    padding: 14px
  card-reference:
    backgroundColor: "{colors.white}"
    textColor: "{colors.anthracite}"
    rounded: "{rounded.md}"
    padding: 24px
  surface-concrete:
    backgroundColor: "{colors.concrete-light}"
    textColor: "{colors.anthracite}"
  surface-off-white:
    backgroundColor: "{colors.off-white}"
    textColor: "{colors.anthracite}"
  meta-text:
    backgroundColor: "{colors.off-white}"
    textColor: "{colors.steel-gray}"
  badge-sbv:
    backgroundColor: "{colors.concrete}"
    textColor: "{colors.anthracite}"
    rounded: "{rounded.sm}"
    padding: 8px
  success-note:
    backgroundColor: "{colors.success}"
    textColor: "{colors.white}"
    rounded: "{rounded.sm}"
    padding: 12px
  header-dark:
    backgroundColor: "{colors.anthracite}"
    textColor: "{colors.white}"
  footer-dark:
    backgroundColor: "{colors.anthracite}"
    textColor: "{colors.white}"
---

## Overview

Die visuelle Identität der neuen Gasser-Website folgt dem Prinzip **„Sichtbeton trifft Bordeaux“**. Sie verbindet die bestehende Bordeaux-Markenfarbe aus dem Logo mit Sichtbeton-Texturen, Anthrazit, warmen hellen Flächen und einer klaren architektonischen Rasterlogik.

Die Website soll hochwertig und ruhig wirken: persönlich, vertrauensvoll, zuverlässig und professionell. Gasser positioniert sich bewusst nicht als günstigster Anbieter, sondern als sauberer, verlässlicher Baupartner für Kundenarbeiten und Umbauten in Windisch, Hausen, Brugg und Umgebung.

## Colors

- **Bordeaux (`#7A1F2B`)** ist die zentrale Marken- und Interaktionsfarbe. Sie wird für primäre CTAs, aktive Navigationszustände, feine Linien und Akzente verwendet.
- **Bordeaux Dunkel (`#4A121A`)** dient für Hover-Zustände, dunklere Markenelemente und Kontrastflächen.
- **Sichtbeton (`#B8B4AA`)** und **Beton Hell (`#E7E3DA`)** geben der Website Materialität. Sie werden für Flächen, Kartenhintergründe, dezente Texturen und Übergänge genutzt.
- **Off-White (`#F7F4EE`)** ist die warme Grundfläche für gute Lesbarkeit.
- **Anthrazit (`#1F2326`)** trägt Header, Footer, Headlines und seriöse Kontrastbereiche.
- **Stahlgrau (`#596066`)** ist für Sekundärtext und Metadaten gedacht.

Bordeaux darf nicht inflationär eingesetzt werden. Es soll führen, nicht schreien.

## Typography

Die Typografie ist sachlich, modern und architektonisch. Headings nutzen **DM Sans** mit engen Laufweiten und kräftigem Schnitt. Body-Text nutzt **Inter** für sehr gute Lesbarkeit.

Headlines dürfen grosszügig und selbstbewusst sein, aber nicht laut. Die Wirkung soll präzise und hochwertig bleiben. Labels werden in Grossbuchstaben oder Small Caps eingesetzt, beispielsweise für Kategorien wie „Kundenarbeiten“, „Umbau“, „Region Brugg“.

## Layout

Das Layout basiert auf einem klaren 12-Spalten-Raster auf Desktop und einer reduzierten Einspaltenstruktur auf Mobile. Grosszügige Section-Spacings schaffen Ruhe, während Cards und Content-Blöcke präzise an einem Raster ausgerichtet werden.

Empfohlene Layout-Muster:

- dunkler Hero mit echtem Projektbild oder dezentem Three.js-/Beton-Raster
- helle Leistungssektionen auf Off-White
- Referenzkarten mit grossen Bildern
- ruhige Trust-Blöcke mit SBV, Team und regionalem Bezug
- Kontaktbereiche mit klarem Bordeaux-CTA

## Elevation & Depth

Tiefe entsteht primär durch:

- Fotografie
- Materialflächen
- Kontrast zwischen Anthrazit und Off-White
- subtile Schatten, keine übertriebenen Card-Effekte
- dezente Motion bei Seitenwechseln

Three.js oder Motion darf hochwertig wirken, aber nie die Bedienbarkeit dominieren. Für Mobile und `prefers-reduced-motion` braucht es ruhige Fallbacks.

## Shapes

Die Formensprache ist kantig und präzise. Kleine Radien sind erlaubt, aber keine stark abgerundeten SaaS-Pill-Buttons. Bau, Beton und Architektur verlangen klare Kanten.

- Buttons: 2px Radius
- Cards: 6px Radius
- grosse Bildflächen: 0–6px Radius
- technische Linien und Raster: gerade, fein, zurückhaltend

## Components

### Buttons

Primäre Buttons verwenden Bordeaux auf Weiss/Off-White oder Bordeaux auf hellen Betonflächen. Auf dunklen Flächen sind auch helle Outline-Buttons möglich.

Button-Texte sollen handlungsorientiert sein:

- „Projekt per E-Mail anfragen“
- „Kundenarbeit besprechen“
- „Umbau anfragen“
- „Referenzen ansehen“

### Reference Cards

Referenzkarten sind visuell zentral. Sie enthalten:

- grosses Bild
- Kategorie
- Titel
- Ort
- Jahr
- kurze Beschreibung
- Link zur Detailseite

### Service Cards

Leistungskarten priorisieren:

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

### Contact Blocks

Kontaktblöcke sollen E-Mail als primären Weg hervorheben, aber Telefon und Formular ebenfalls anbieten.

## Do's and Don'ts

### Do

- echte Bilder verwenden
- regionale Nähe betonen
- Kundenarbeiten und Umbauten prominent führen
- private Kundschaft und Architekten klar adressieren
- Qualität, Verlässlichkeit und persönliche Betreuung kommunizieren
- Bordeaux gezielt als Führungsfarbe nutzen
- Sichtbeton/Materialität subtil einbinden
- Three.js dezent halten und sauber fallbacken

### Don't

- nicht über Rabatte oder Billigpreise positionieren
- keine generischen Stockfoto-Bauherren als Hauptbild verwenden
- keine übertriebene 3D-Spielerei
- keine überladene Animation auf Mobile
- keine austauschbaren Werbefloskeln ohne Substanz
- keine WordPress-/Plugin-Komplexität ohne echten Bedarf