Einheitliche Leistungs-Skala (%) + Farbcodes ueberall vereinheitlicht

- Schwellen NEU (Thomas): >=90 Dunkelgruen / >=80 Hellgruen / >=60 Gelb /
  >=50 Orange / <50 Rot. Sterne entfallen.
- teacher.html: _pctColor (kanonisch) — _tagTraffic + _liveBar + _liveBarColor
  delegieren jetzt alle daran (EINE Skala; 'niedrig-ist-gut' invertiert).
  Neu: _leistungPct(simId,state) = das eine 0-100-% je Sim (eigener Score
  oder abgeleitet), _pctBar (kompakt, schmal). Neue Spalte 'Leistung' in
  'Aktuell'. _liveMood aus _leistungPct (>=80 gut / >=50 mittel / <50) —
  deckungsgleich mit Triage Foerdern/Begleiten/Laeuft gut (50/80).
- admin-styleguide.html: neue Sektion 'Leistungs-Skala' (5 Stufen, %+Balken,
  Triage, CSS-Variablen).
- admin-lehrer-view.html: Schwellen/Triage/Preview auf neue Werte, Balken
  kompakt, Sterne-Hinweis raus.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

App/admin-styleguide.html

@@ -64,6 +64,7 @@
     <a href="#bildstil">🎨 Bildstil</a>
     <a href="#farben-bild">🌿 Bild-Farbpalette</a>
     <a href="#farben-ui">🧩 UI-Farbtokens</a>
+    <a href="#leistung">📊 Leistungs-Skala</a>
     <a href="#layout">📐 Layout &amp; Spacing</a>
     <a href="#typo">🔤 Typografie</a>
     <a href="#bilder">🖼️ Bildformate</a>
@@ -195,6 +196,50 @@
     </div>
   </div>
 
+  <!-- ============================================================== -->
+  <div class="card" id="leistung">
+    <div class="card-h">Leistungs-Skala — 5 Stufen (Standard für ALLE Sims)</div>
+    <p class="lead">EINE Skala für Schülerleistung überall im Programm: Prozentwert (0–100) + dünner Balken in der Ampelfarbe. <strong>Sterne entfallen.</strong> Die Grenzen 50 / 65 sind zugleich die Triage-Grenzen, damit Balkenfarbe und Feld (Fördern/Begleiten/Läuft gut) immer übereinstimmen. Quelle in Code: <code>pctColor()</code> = <code>_tagTraffic()</code>.</p>
+    <div class="swatches">
+      <div class="sw" data-copy-text="#1f7a3d"><div class="sw-color" style="background:#1f7a3d"></div><div class="sw-meta"><strong>≥ 90 % · sehr gut</strong><span>#1f7a3d</span></div></div>
+      <div class="sw" data-copy-text="#7cb342"><div class="sw-color" style="background:#7cb342"></div><div class="sw-meta"><strong>80–89 % · gut</strong><span>#7cb342</span></div></div>
+      <div class="sw" data-copy-text="#f9c33b"><div class="sw-color" style="background:#f9c33b"></div><div class="sw-meta"><strong>60–79 % · solide</strong><span>#f9c33b</span></div></div>
+      <div class="sw" data-copy-text="#ef8b2c"><div class="sw-color" style="background:#ef8b2c"></div><div class="sw-meta"><strong>50–59 % · wackelig</strong><span>#ef8b2c</span></div></div>
+      <div class="sw" data-copy-text="#d8453a"><div class="sw-color" style="background:#d8453a"></div><div class="sw-meta"><strong>&lt; 50 % · kritisch</strong><span>#d8453a</span></div></div>
+    </div>
+
+    <h3>Standard-Anzeige: Prozent + Balken</h3>
+    <div style="display:flex;gap:1.6rem;flex-wrap:wrap;margin:.5rem 0 1.2rem">
+      <div style="min-width:74px"><div style="font-weight:800;color:#1f7a3d;font-size:.95rem">95 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:95%;background:#1f7a3d"></div></div></div>
+      <div style="min-width:74px"><div style="font-weight:800;color:#7cb342;font-size:.95rem">84 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:84%;background:#7cb342"></div></div></div>
+      <div style="min-width:74px"><div style="font-weight:800;color:#f9c33b;font-size:.95rem">68 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:68%;background:#f9c33b"></div></div></div>
+      <div style="min-width:74px"><div style="font-weight:800;color:#ef8b2c;font-size:.95rem">54 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:54%;background:#ef8b2c"></div></div></div>
+      <div style="min-width:74px"><div style="font-weight:800;color:#d8453a;font-size:.95rem">30 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:30%;background:#d8453a"></div></div></div>
+    </div>
+
+    <h3>Triage-Felder (aus % × Fleiß)</h3>
+    <p><strong>&lt; 50 % → Fördern</strong> · <strong>50–79 % → Begleiten</strong> · <strong>≥ 80 % → Läuft gut</strong> — jeweils nur, wenn aktiv gearbeitet wurde, sonst „inaktiv".</p>
+    <div style="display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 1rem">
+      <span style="font-size:.8rem;font-weight:700;color:#b04a3e;background:#f7e2dc;padding:.25rem .7rem;border-radius:12px">Fördern</span>
+      <span style="font-size:.8rem;font-weight:700;color:#9a6a12;background:#f7edd6;padding:.25rem .7rem;border-radius:12px">Begleiten</span>
+      <span style="font-size:.8rem;font-weight:700;color:#3a6b3e;background:#dceadd;padding:.25rem .7rem;border-radius:12px">Läuft gut</span>
+      <span style="font-size:.8rem;font-weight:700;color:#8a8a8a;background:#efeee8;padding:.25rem .7rem;border-radius:12px">inaktiv</span>
+    </div>
+
+    <h3>CSS-Variablen</h3>
+    <div style="background:#1f2733;border-radius:8px;padding:1rem;overflow:auto"><pre style="margin:0;color:#e8eef4;font-size:.78rem;font-family:'Courier New',monospace">--ggs-perf-5: #1f7a3d;  /* ≥ 90 %  sehr gut  */
+--ggs-perf-4: #7cb342;  /* 80–89 % gut       */
+--ggs-perf-3: #f9c33b;  /* 60–79 % solide    */
+--ggs-perf-2: #ef8b2c;  /* 50–59 % wackelig  */
+--ggs-perf-1: #d8453a;  /* &lt; 50 %  kritisch  */
+/* Triage */
+--ggs-triage-foerdern:  #b04a3e;
+--ggs-triage-begleiten: #9a6a12;
+--ggs-triage-gut:       #3a6b3e;
+--ggs-triage-inaktiv:   #8a8a8a;</pre></div>
+    <p style="font-size:.78rem;color:#8a8a8a;margin-top:.6rem">Vorschau der Zuordnung je Sim: <a href="admin-lehrer-view.html">Lehrer-View Parameter-Überblick</a>.</p>
+  </div>
+
   <!-- ============================================================== -->
   <div class="card" id="layout">
     <div class="card-h">Layout &amp; Spacing</div>