Style Guide v1.0.0: Indigo-Palette + lokale Web-Fonts

Komplette visuelle Umstellung nach dem generierten Style-Guide
(3d-lehrstun-de-v1.0.0). 3D-Druck-AG bekommt eine eigene Marke,
getrennt vom Teal der arduino.lehrstun.de-Schwester.

Farben: Teal #00979D -> Indigo #5B6EAE, warmes Off-White Surface
  #F0EEE9 statt Kuehlweiss, Lavendel-Akzent #9B8EC4.
Fonts: Raleway (Headings), Lato (Body), Inconsolata (Mono) — lokal
  gehostet in static/fonts/ (DSGVO-konform, kein Google-CDN),
  via @font-face + unicode-range (latin + latin-ext).
Form: Radius/Schatten/Spacing als Tokens (--radius-*, --shadow-*).

Technik:
  - base.html :root: neue --color-*/--font-*/--radius-* Tokens,
    alte Variablennamen (--primary etc.) als Aliase -> alle 33
    Templates ziehen sofort mit, kein Template-Rewrite noetig.
  - Semantische Banner-Tokens (--info/warn/success/error-bg+text+border)
    loesen ~130 Hardcoded-Pastelle ab (per sed gemappt).
  - Komponenten (Card, Button, Badge, Flash, Table, Code) auf Tokens.

Alle 13 Hauptseiten gegengeprueft (HTTP 200, keine Render-Fehler).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

3d-lehrstun-de-v1.0.0-CLAUDE.md

@@ -0,0 +1,70 @@
+# 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.