---
name: fassadenfix-branding
description: "Wendet FassadenFix Corporate Design und Branding-Richtlinien an. Verwenden bei: HTML/CSS-Generierung, UI-Komponenten, Webanwendungen, Styling, Farbschemata, Typografie, Design-Systeme, Dokumente, Prasentationen, Markenkonformitaet."
---

# FassadenFix Corporate Design & Branding

Du wendest bei allen visuellen und gestalterischen Aufgaben automatisch das FassadenFix Corporate Design an. Markenkonformitaet ist der Standard -- Abweichung erfordert explizite Anweisung.

## Farbpalette

### Primaerfarbe: FassadenFix Gruen

| Eigenschaft | Wert |
|-------------|------|
| **HEX** | `#77bc1f` |
| **RGB** | R 119, G 188, B 31 |
| **CMYK** | C 59, M 0, Y 100, K 0 |
| **Pantone** | 368 C |
| **CSS Variable** | `--ff-green` / `--color-primary` |
| **Verwendung** | Hauptmarkenfarbe, CTA-Buttons, Logo-Icon, primaere Akzente |

Varianten:
- Dunkel (Hover): `#6aa91b`
- Hell (Highlights): `#8fcc3f`

### Sekundaerfarbe: Dunkelgrau

| Eigenschaft | Wert |
|-------------|------|
| **HEX** | `#4e5758` |
| **RGB** | R 78, G 87, B 88 |
| **CMYK** | C 65, M 48, Y 49, K 41 |
| **Pantone** | 445 C |
| **CSS Variable** | `--ff-gray` / `--color-secondary` |
| **Verwendung** | Fliesstext, Footer, sekundaere UI-Elemente |

Variante:
- Hell: `#6b7577`

### Erweiterte Palette (Neutrale Farben)

```
--ff-gray-50:  #f9fafb
--ff-gray-100: #f3f4f6
--ff-gray-200: #e5e7eb
--ff-gray-300: #d1d5db
--ff-gray-600: #4b5563
--ff-gray-900: #111827
```

## Typografie

**Schriftart:** Raleway (Google Fonts)

```html
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700;800&display=swap" rel="stylesheet">
```

| Element | Gewicht | Groesse |
|---------|---------|---------|
| H1 | Bold (700) | 3rem / 48px |
| H2 | Bold (700) | 2.25rem / 36px |
| H3 | SemiBold (600) | 1.875rem / 30px |
| H4 | SemiBold (600) | 1.5rem / 24px |
| Body | Regular (400) / Medium (500) | 1rem / 16px |
| Buttons | Bold (700) / SemiBold (600) | 1rem / 16px |
| Small | Regular (400) | 0.875rem / 14px |

```css
body {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #4e5758;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  color: #4e5758;
}
```

## UI-Komponenten

### Primary Button
```css
.btn-primary {
  background-color: #77bc1f;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 24px;
  border: none;
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: #6aa91b;
  box-shadow: 0 4px 6px rgba(119, 188, 31, 0.3);
}
```

### Secondary Button
```css
.btn-secondary {
  background-color: transparent;
  color: #77bc1f;
  border: 2px solid #77bc1f;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  border-radius: 8px;
  padding: 12px 24px;
}
.btn-secondary:hover {
  background-color: #77bc1f;
  color: #ffffff;
}
```

### Cards
```css
.card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(78, 87, 88, 0.1);
  padding: 24px;
}
```

### Navigation
```css
.nav { background: #ffffff; }
.nav-link { color: #4e5758; font-weight: 500; }
.nav-link:hover, .nav-link.active { color: #77bc1f; }
```

### Footer
```css
.footer { background: #4e5758; color: #ffffff; }
.footer a { color: #ffffff; }
.footer a:hover { color: #77bc1f; }
```

## Design-System Tokens

### Spacing (8px-Grid)
```
--spacing-xs:  4px
--spacing-sm:  8px
--spacing-md:  16px
--spacing-lg:  24px
--spacing-xl:  32px
--spacing-2xl: 48px
--spacing-3xl: 64px
```

### Border Radius
```
--radius-sm:   4px   (Inputs, kleine Elemente)
--radius-md:   8px   (Buttons, Cards)
--radius-lg:   12px  (Groessere Cards)
--radius-xl:   16px  (Hero-Sections)
--radius-full: 9999px (Runde Elemente)
```

### Shadows
```
--shadow-sm: 0 1px 2px rgba(78, 87, 88, 0.1)
--shadow-md: 0 4px 6px rgba(78, 87, 88, 0.1)
--shadow-lg: 0 10px 15px rgba(78, 87, 88, 0.1)
--shadow-xl: 0 20px 25px rgba(78, 87, 88, 0.15)
```

### Transitions
```
--transition-fast: 150ms ease
--transition-base: 300ms ease
--transition-slow: 500ms ease
```

### Gradients
```
--gradient-primary: linear-gradient(135deg, #77bc1f 0%, #6aa91b 100%)
--gradient-hero: linear-gradient(135deg, #4e5758 0%, #77bc1f 100%)
```

## Vollstaendige CSS Custom Properties

```css
:root {
  /* Primaerfarben */
  --ff-green: #77bc1f;
  --ff-green-dark: #6aa91b;
  --ff-green-light: #8fcc3f;
  --color-primary: var(--ff-green);
  --color-primary-dark: var(--ff-green-dark);
  --color-primary-light: var(--ff-green-light);

  /* Sekundaerfarben */
  --ff-gray: #4e5758;
  --ff-gray-light: #6b7577;
  --color-secondary: var(--ff-gray);
  --color-secondary-light: var(--ff-gray-light);

  /* Neutrale Farben */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-600: #4b5563;
  --color-gray-900: #111827;

  /* Typografie */
  --font-family: 'Raleway', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(78, 87, 88, 0.1);
  --shadow-md: 0 4px 6px rgba(78, 87, 88, 0.1);
  --shadow-lg: 0 10px 15px rgba(78, 87, 88, 0.1);
  --shadow-xl: 0 20px 25px rgba(78, 87, 88, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #77bc1f 0%, #6aa91b 100%);
  --gradient-hero: linear-gradient(135deg, #4e5758 0%, #77bc1f 100%);
}
```

## Tailwind CSS Konfiguration

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'ff-green': '#77bc1f',
        'ff-gray': '#4e5758',
        primary: { DEFAULT: '#77bc1f', dark: '#6aa91b', light: '#8fcc3f' },
        secondary: { DEFAULT: '#4e5758', light: '#6b7577' },
      },
      fontFamily: { sans: ['Raleway', 'sans-serif'] },
      borderRadius: { sm: '4px', md: '8px', lg: '12px', xl: '16px' },
      boxShadow: {
        sm: '0 1px 2px rgba(78, 87, 88, 0.1)',
        md: '0 4px 6px rgba(78, 87, 88, 0.1)',
        lg: '0 10px 15px rgba(78, 87, 88, 0.1)',
        xl: '0 20px 25px rgba(78, 87, 88, 0.15)',
      },
    },
  },
}
```

## Logo-Verwendung

| Variante | Icon | Text | Hintergrund | Verwendung |
|----------|------|------|-------------|------------|
| Standard | Gruen | Gruen | Weiss/Hell | Header, Dokumente |
| Invertiert | Weiss | Weiss | Dunkelgrau | Footer, dunkle Bereiche |
| Akzent | Gruen | Gruen | Dunkelgrau | Alternative dunkel |
| CTA | Weiss | Weiss | Gruen | Banner, Buttons |
| Kontrast | Dunkelgrau | Dunkelgrau | Gruen | Gruene Hintergruende |

- Mindestgroesse: 120px Breite (Web)
- Schutzraum: Mindestens Icon-Hoehe als Freiraum
- Seitenverhaeltnis immer beibehalten
- Nur vorgegebene Farbvarianten verwenden

## Barrierefreiheit

| Kombination | Kontrast | WCAG |
|-------------|----------|------|
| Dunkelgrau auf Weiss | ~8.5:1 | AAA |
| Weiss auf Dunkelgrau | ~8.5:1 | AAA |
| Gruen auf Weiss | ~3.5:1 | AA (grosse Texte) |
| Weiss auf Gruen | ~3.5:1 | AA (grosse Texte) |

Dunkelgrau fuer Fliesstext verwenden, Gruen fuer Ueberschriften, Buttons und Akzente.

## Opt-Out

Branding wird NUR deaktiviert bei expliziter Anweisung:
- `--no-branding`
- `--skip-fassadenfix-style`
- "ohne FassadenFix Branding"
- "neutrales Design verwenden"
- "abweichendes Design"