# Style Guide: 3d.lehrstun.de

Du arbeitest an einem Projekt mit folgendem Style Guide. **Verwende ausschließlich die unten definierten Design Tokens** für alle neuen oder geänderten Komponenten. Keine eigenen Farben, Schriften oder Abstände einführen.

## Projektkontext
- **Projekt:** 3d.lehrstun.de
- **Typ:** website
- **Zielgruppe:** Schülerinnen und Schüler
- **Sprache:** de-DE

## Tonalität
- **Soll wirken:** jugendlich, technisch, freundlich, modern
- **Soll NICHT wirken:** altmodisch, beliebig

## Do's
- Verwende abgerundete Ecken (border-radius: sm) für Karten und Buttons, um eine einladende, moderne Wirkung zu erzeugen
- Setze subtile Schatten ein, um Tiefe und Hierarchie zu schaffen, ohne die helle Cloud-Dancer-Palette zu überladen
- Nutze großzügige, komfortable Abstände zwischen Elementen, damit Inhalte für Schüler leicht scanbar und lesbar bleiben
- Kombiniere technische Akzentfarben (z. B. leuchtendes Cyan oder Electric Blue) mit der hellen Basispalette, um 3D-Themen jugendlich und modern zu inszenieren

## Don'ts
- Verwende keine harten, eckigen Container oder scharfe Drop-Shadows – das wirkt altmodisch und bricht die freundliche Formensprache
- Nutze keine generischen Stock-Illustrationen oder Clip-Art – das wirkt beliebig und verfehlt die technisch-moderne Markenpersönlichkeit
- Überhäufe Seiten nicht mit zu vielen Schriftgrößen oder Farben auf einmal – das erzeugt visuelle Unruhe und widerspricht der comfortable Dichte

## Design Tokens (CSS Custom Properties)

```css
:root {
  --color-primary: #5B6EAE;
  --color-primary-hover: #4A5B96;
  --color-secondary: #2C3E50;
  --color-accent: #9B8EC4;
  --color-surface: #F0EEE9;
  --color-surface-muted: #E8E5DF;
  --color-border: #D5D1CC;
  --color-text: #2C3E50;
  --color-text-muted: #6B7C8D;
  --color-error: #C0392B;
  --color-success: #27AE60;
  --color-warning: #E67E22;

  --font-heading: 'Raleway', system-ui, sans-serif;
  --font-body: 'Lato', Georgia, serif;
  --font-mono: 'Inconsolata', 'Courier New', monospace;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
}
```

## Komponentenregeln
- **Buttons:** Radius `4px`, Padding `8px 16px`, Schatten `0 1px 2px rgba(0,0,0,0.05)`
- **Cards:** Radius `8px`, Border via `--color-border`, Schatten `0 2px 8px rgba(0,0,0,0.08)`
- **Inputs:** Radius `2px`, Border via `--color-border`
- **Icons:** Stil `outline`, Strichstärke `1.75px`, Line-Cap `round`

## Regel für neuen Code
Wenn du eine Komponente oder ein Stylesheet änderst: nutze `var(--color-…)`, `var(--font-…)`, `var(--spacing-…)` etc. Greife nie zu Hardcoded-Werten. Wenn dir ein Token fehlt, frage nach, bevor du eines erfindest.