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-guide.md

@@ -0,0 +1,78 @@
+# Style Guide: 3d.lehrstun.de
+
+> Version 1.0.0 | Revision 1 | 2026-06-04T09:57:23.143Z
+
+## Projektinfo
+- **Typ:** website
+- **Zielgruppe:** Schülerinnen und Schüler
+- **Sprache:** de-DE
+
+## Designprinzipien
+
+### Tonalität
+- jugendlich
+- technisch
+- freundlich
+- modern
+
+### Anti-Tonalität
+- 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
+
+## Farbpalette
+| Token | Wert |
+|-------|------|
+| Primary | `#5B6EAE` |
+| Primary Hover | `#4A5B96` |
+| Secondary | `#2C3E50` |
+| Accent | `#9B8EC4` |
+| Surface | `#F0EEE9` |
+| Surface Muted | `#E8E5DF` |
+| Border | `#D5D1CC` |
+| Text | `#2C3E50` |
+| Text Muted | `#6B7C8D` |
+| Error | `#C0392B` |
+| Success | `#27AE60` |
+| Warning | `#E67E22` |
+
+## Typografie
+- **Überschriften:** Raleway
+- **Fließtext:** Lato
+- **Monospace:** Inconsolata
+
+## Formensprache
+- **Radius:** 2px / 4px / 8px
+- **Schatten:** 0 1px 2px rgba(0,0,0,0.05) / 0 2px 8px rgba(0,0,0,0.08)
+- **Spacing:** 4px / 8px / 16px / 24px / 40px
+
+## Komponenten
+
+### Button
+- Radius: 4px
+- Padding: 8px 16px
+
+### Card
+- Radius: 8px
+- Border: 1px solid #D5D1CC
+
+### Input
+- Radius: 2px
+- Border: 1px solid #D5D1CC
+
+## Assets
+- Icon-Stil: outline
+- Strichstärke: 1.75
+
+---
+*Generiert am 2026-06-04T09:57:23.143Z*