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>

templates/cockpit.html

@@ -13,8 +13,8 @@
 
 {# ====== BANNER: Lehrer-Notizen (V5-Quick-Action) ====== #}
 {% for n in status.notizen %}
-<div class="card" style="background: #FEF9E7; border-left: 5px solid var(--warning); margin-bottom: 0.5rem;">
-    <p style="margin: 0; color: #B7950B;">
+<div class="card" style="background: var(--warn-bg); border-left: 5px solid var(--warning); margin-bottom: 0.5rem;">
+    <p style="margin: 0; color: var(--warn-text);">
         <strong>📌 Lehrer-Notiz:</strong> {{ n.text }}
     </p>
     <form method="post" action="{{ url_for('profil.notiz_gelesen', notiz_id=n.id) }}" style="margin-top: 0.5rem;">
@@ -25,8 +25,8 @@
 
 {# ====== BANNER: Offene Rueckfragen zu eigenen Projekten (V6) ====== #}
 {% for r in status.rueckfragen %}
-<div class="card" style="background: #FEF9E7; border-left: 5px solid var(--warning); margin-bottom: 0.5rem;">
-    <p style="margin: 0; color: #B7950B;">
+<div class="card" style="background: var(--warn-bg); border-left: 5px solid var(--warning); margin-bottom: 0.5rem;">
+    <p style="margin: 0; color: var(--warn-text);">
         <strong>❓ Rueckfrage zu „{{ r.projekt_titel }}":</strong> {{ r.text }}
     </p>
     <p style="margin-top: 0.5rem; font-size: 0.85rem; color: var(--text-light);">
@@ -37,7 +37,7 @@
 
 {# ====== BANNER: Eingegangene Paarungs-Anfragen ====== #}
 {% for a in status.offene_anfragen %}
-<div class="card" style="background: #EBF5FB; border-left: 5px solid var(--primary); margin-bottom: 0.5rem;">
+<div class="card" style="background: var(--info-bg); border-left: 5px solid var(--primary); margin-bottom: 0.5rem;">
     <p style="margin: 0;">
         <strong>{{ tier_emoji(a.von_tier) }} {{ a.von_vorname }}</strong> moechte mit dir
         zusammenarbeiten. Magst du?
@@ -117,7 +117,7 @@
     </form>
 </div>
 {% else %}
-<div class="card" style="background: #EAFBF1; border-left: 4px solid var(--success); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;">
+<div class="card" style="background: var(--success-bg); border-left: 4px solid var(--success); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;">
     <p style="margin: 0; font-size: 0.9rem;">
         <strong>Heute eingecheckt:</strong>
         {% if status.check_in_heute.modus == 'weiter_wie_bisher' %}Arbeite weiter
@@ -151,7 +151,7 @@
                     <img src="{{ url_for('api.projekt_cover', projekt_id=status.projekt.aktiv.id) }}" alt=""
                          style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px;">
                 {% else %}
-                    <div style="width: 120px; height: 120px; background: linear-gradient(135deg, #ECF0F1, #D5DBDB);
+                    <div style="width: 120px; height: 120px; background: linear-gradient(135deg, var(--surface-muted), var(--surface-hover));
                                 border-radius: 8px; display: flex; align-items: center; justify-content: center;
                                 font-size: 2.5rem; color: var(--text-light);">🎯</div>
                 {% endif %}
@@ -173,7 +173,7 @@
         </div>
 
     {% elif status.projekt.letztes and status.projekt.letztes.freigabe_status == 'wartet_auf_freigabe' %}
-        <div style="background: #FEF9E7; padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--warning);">
+        <div style="background: var(--warn-bg); padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--warning);">
             <strong>⏳ Wartet auf Freigabe:</strong>
             <a href="{{ url_for('profil.projekt_detail', projekt_id=status.projekt.letztes.id) }}">{{ status.projekt.letztes.titel }}</a>
             <div style="font-size: 0.85rem; margin-top: 0.3rem; color: var(--text-light);">
@@ -182,7 +182,7 @@
         </div>
 
     {% elif status.projekt.letztes and status.projekt.letztes.freigabe_status == 'rueckfrage' %}
-        <div style="background: #FADBD8; padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--danger);">
+        <div style="background: var(--error-bg); padding: 0.8rem; border-radius: 6px; border-left: 4px solid var(--danger);">
             <strong>❓ Rueckfrage offen zu:</strong>
             <a href="{{ url_for('profil.projekt_detail', projekt_id=status.projekt.letztes.id) }}">{{ status.projekt.letztes.titel }}</a>
             <div style="font-size: 0.85rem; margin-top: 0.3rem;">
@@ -197,7 +197,7 @@
         {% if status.projekt.darf_neues %}
         <a href="{{ url_for('profil.projekt_neu') }}" class="btn btn-primary">+ Neues Projekt anfangen</a>
         {% else %}
-        <div style="background: #FEF9E7; padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.9rem;">
+        <div style="background: var(--warn-bg); padding: 0.6rem 0.8rem; border-radius: 6px; font-size: 0.9rem;">
             {{ status.projekt.sperr_grund }}
         </div>
         {% endif %}
@@ -324,17 +324,17 @@
     padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer;
     transition: background 0.15s;
 }
-.ci-option:hover { background: #F2F3F4; }
+.ci-option:hover { background: var(--surface-muted); }
 .ci-option input[type=radio] { margin: 0; }
 
 .onboarding-liste { display: flex; flex-direction: column; gap: 0.5rem; }
 .onb-zeile {
     display: flex; gap: 0.7rem; align-items: center;
     padding: 0.5rem 0.7rem; border-radius: 6px;
-    background: #F2F3F4;
+    background: var(--surface-muted);
 }
-.onb-zeile.onb-fertig { background: #EAFBF1; opacity: 0.8; }
-.onb-zeile.onb-aktuell { background: #EBF5FB; border-left: 4px solid var(--primary); }
+.onb-zeile.onb-fertig { background: var(--success-bg); opacity: 0.8; }
+.onb-zeile.onb-aktuell { background: var(--info-bg); border-left: 4px solid var(--primary); }
 .onb-icon { font-size: 1.2rem; }
 .onb-titel { flex: 1; }
 .onb-aktion { display: flex; gap: 0.3rem; }