Bewertungs-Vorschau: EINE Skala-Darstellung + 4-stufige Triage

- Doppeldarstellung (Beispiel-Balken + Legende) zu EINER Tabelle
  zusammengefuehrt: Farbe + Bereich + Label + Beispiel-Balken je Zeile.
  Beispielwert = Bereichsschwelle (90/80/60/50), nicht willkuerlich.
- Triage jetzt 4 Felder an denselben Farbgrenzen:
  <50 Foerdern (Hilfe) / 50-79 Begleiten / 80-89 Laeuft gut /
  >=90 Fordern (herausfordern). Styleguide + Preview angeglichen.

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

App/admin-lehrer-view.html

@@ -97,7 +97,7 @@
     <p><b>Der Zeilen-Prozentwert</b> in „Ergebnisse/Aktuell" entsteht in <code>live.php · extractScore</code>: liefert die Sim einen eigenen <b>0–100-Score</b>, wird der genommen; sonst aus den Sternen: <code>% = Sterne / 5 × 100</code>.</p>
     <p><b>Die Sterne</b> berechnet jede App am Ende selbst — aus unterschiedlichen Kennzahlen und Schwellen (je Sim unten dokumentiert). Deshalb bedeuten 4★ heute nicht überall dasselbe.</p>
     <p><b>Uneinheitlichkeiten:</b> Busfahrt · Fluggesellschaft · Kofferdetektiv liefern nur <b>0–3 Sterne</b> statt 0–5. Busfahrt/Fluggesellschaft senden als <code>score</code> rohe Punkte (nicht 0–100 → Zeilen-% verzerrt). Weltküche wertet <b>pro Gericht</b> statt pro Durchgang. <b>Logistik überträgt weder Sterne noch Score</b>. Ein echter 0–100-Live-Score existiert nur bei Klima, Fluss, Heli, Kofferdetektiv, Tourismusregion (abgeleitet Tourismustal).</p>
-    <div class="rec"><b>Beschlossen:</b> <b>Sterne entfallen.</b> Jede App liefert genau <b>eine Funktion → Leistungs-% (0–100)</b> als Wahrheit, überall gezeigt als Prozent + Balken in der 5-stufigen Farbskala. Auch Fördern/Begleiten/Läuft gut leiten sich aus diesem % ab.</div>
+    <div class="rec"><b>Beschlossen:</b> <b>Sterne entfallen.</b> Jede App liefert genau <b>eine Funktion → Leistungs-% (0–100)</b> als Wahrheit, überall gezeigt als Prozent + Balken in der 5-stufigen Farbskala. Auch Fördern / Begleiten / Läuft gut / Fordern leiten sich aus diesem % ab.</div>
   </div>
 
   <div id="preview"></div>
@@ -551,12 +551,13 @@ function pctBar(pct){
     + '</div>';
 }
 // Triage aus Leistungs-% × Aktivität — Grenzen = Farbgrenzen, damit Feld ↔ Farbe stimmen.
-// <50 (Rot) → Fördern · 50–79 (Orange+Gelb) → Begleiten · ≥80 (Grün) → Läuft gut.
+// <50 Rot→Fördern · 50–79 Orange+Gelb→Begleiten · 80–89 Hellgrün→Läuft gut · ≥90 Dunkelgrün→Fordern.
 function triage(pct, active){
-  if (pct==null || !active) return {lab:'inaktiv', col:'#8a8a8a', bg:'#efeee8'};
+  if (pct==null || !active) return {lab:'inaktiv',   col:'#8a8a8a', bg:'#efeee8'};
   if (pct<50) return {lab:'Fördern',   col:'#b04a3e', bg:'#f7e2dc'};
   if (pct<80) return {lab:'Begleiten', col:'#9a6a12', bg:'#f7edd6'};
-  return          {lab:'Läuft gut',  col:'#3a6b3e', bg:'#dceadd'};
+  if (pct<90) return {lab:'Läuft gut', col:'#3a6b3e', bg:'#dceadd'};
+  return          {lab:'Fordern',    col:'#155e2a', bg:'#c8e6cd'};
 }
 function triageChip(pct, active){ var t=triage(pct,active); return '<span style="display:inline-block;font-size:.62rem;font-weight:700;color:'+t.col+';background:'+t.bg+';padding:1px 7px;border-radius:10px">'+t.lab+'</span>'; }
 
@@ -782,21 +783,34 @@ function renderSim(meta){
 
 // Vorschau-Karte: neues Bewertungssystem (Skala · %+Balken · Triage)
 function renderPreviewCard(){
-  var samples=[95,84,68,54,30];
+  // EINE Skala. Jede Zeile: Farbe · Bereich · Label · Beispiel-Balken.
+  var scale=[
+    {c:'#1f7a3d', r:'≥ 90 %', l:'sehr gut', v:90},
+    {c:'#7cb342', r:'80–89 %', l:'gut',      v:80},
+    {c:'#f9c33b', r:'60–79 %', l:'solide',   v:60},
+    {c:'#ef8b2c', r:'50–59 %', l:'wackelig', v:50},
+    {c:'#d8453a', r:'< 50 %',  l:'kritisch', v:40},
+  ];
   var h='<div class="gbox" style="border-left-color:#5a8a5e">';
-  h+='<h2>🎯 Neues Bewertungssystem — Vorschau zum Abnehmen</h2>';
-  h+='<p><b>Standard überall:</b> ein Leistungs-% (0–100) in der Ampelfarbe + dünner Balken darunter — Sterne fallen weg. Beispiele:</p>';
-  h+='<div style="display:flex;gap:1.4rem;flex-wrap:wrap;margin:.4rem 0 .9rem">'+samples.map(function(v){return pctBar(v);}).join('')+'</div>';
-  h+='<p><b>5-stufige Farbskala</b> (= bestehende Tag-Skala):</p>';
-  h+='<div style="display:flex;gap:.5rem;flex-wrap:wrap;margin:.3rem 0 .9rem;font-size:.72rem">'
-    +[['≥ 90','sehr gut',95],['80–89','gut',84],['60–79','solide',68],['50–59','wackelig',54],['< 50','kritisch',30]]
-      .map(function(b){var c=pctColor(b[2]);return '<span style="display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:20px;padding:.2rem .6rem"><span style="width:14px;height:14px;border-radius:4px;background:'+c+'"></span><b>'+b[0]+' %</b> · '+b[1]+'</span>';}).join('')+'</div>';
-  h+='<p><b>Triage-Felder aus %×Fleiß</b> — die Grenzen sind die Farbgrenzen, damit Balkenfarbe und Feld immer übereinstimmen:</p>';
-  h+='<div style="display:flex;gap:1.2rem;flex-wrap:wrap;margin:.3rem 0 .6rem">'
-    +[22,55,80].map(function(v){return '<div style="text-align:center">'+pctBar(v)+'<div style="margin-top:3px">'+triageChip(v,true)+'</div></div>';}).join('')
-    +'<div style="text-align:center">'+pctBar(null)+'<div style="margin-top:3px">'+triageChip(null,false)+'</div></div>'+'</div>';
-  h+='<div class="rec"><b>&lt; 50 % → Fördern</b> · <b>50–79 % → Begleiten</b> · <b>≥ 80 % → Läuft gut</b> — jeweils nur, wenn aktiv gearbeitet wurde; sonst „inaktiv".</div>';
-  h+='<p style="font-size:.72rem;color:#8a8a8a;margin-top:.6rem">Unten hat jede Tabelle die neue Spalte <b>🎯 Leistung</b> — die Vorschlags-Formel je Sim, auf die Testdaten gerechnet. Bei Busfahrt · Fluggesellschaft · Sonnensystem ist der Wert eine Näherung (Topo-/Erstversuch-Rohwerte fehlen in den Testdaten).</p>';
+  h+='<h2>🎯 Bewertung — EINE Skala</h2>';
+  h+='<p><b>Standard überall im Programm:</b> ein Leistungs-% (0–100) in der Ampelfarbe + schmaler Balken. Sterne fallen weg. Es gibt nur <b>diese eine</b> Skala mit 5 Stufen:</p>';
+  h+='<div style="display:grid;grid-template-columns:24px auto 1fr 48px;gap:.4rem .9rem;align-items:center;max-width:460px;margin:.5rem 0 1rem;font-size:.82rem">';
+  scale.forEach(function(b){
+    h+='<span style="width:20px;height:20px;border-radius:5px;background:'+b.c+'"></span>';
+    h+='<b style="font-variant-numeric:tabular-nums">'+b.r+'</b>';
+    h+='<span style="color:#5a5a5a">'+b.l+'</span>';
+    h+='<span>'+pctBar(b.v)+'</span>';
+  });
+  h+='</div>';
+  h+='<p><b>Triage</b> — dieselbe Skala, zu Handlungs-Feldern zusammengefasst (Grenzen = Farbgrenzen 50 / 80 / 90):</p>';
+  h+='<div style="display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center;margin:.3rem 0 .2rem;font-size:.78rem">'
+    +'<span>'+triageChip(30,true)+' &nbsp;<b>&lt; 50 %</b> <span style="color:#8a8a8a">(rot)</span></span>'
+    +'<span>'+triageChip(65,true)+' &nbsp;<b>50–79 %</b> <span style="color:#8a8a8a">(orange + gelb)</span></span>'
+    +'<span>'+triageChip(85,true)+' &nbsp;<b>80–89 %</b> <span style="color:#8a8a8a">(hellgrün)</span></span>'
+    +'<span>'+triageChip(95,true)+' &nbsp;<b>≥ 90 %</b> <span style="color:#8a8a8a">(dunkelgrün)</span></span>'
+    +'<span>'+triageChip(null,false)+' &nbsp;<span style="color:#8a8a8a">nicht aktiv</span></span>'
+    +'</div>';
+  h+='<p style="font-size:.72rem;color:#8a8a8a;margin-top:.8rem">Unten hat jede Tabelle die Spalte <b>🎯 Leistung</b> — die Vorschlags-Formel je Sim, auf die Testdaten gerechnet. Bei Busfahrt · Fluggesellschaft · Sonnensystem ist der Wert eine Näherung (Topo-/Erstversuch-Rohwerte fehlen in den Testdaten).</p>';
   h+='</div>';
   return h;
 }

App/admin-styleguide.html

@@ -199,30 +199,22 @@
   <!-- ============================================================== -->
   <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>
+    <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 <strong>50 / 80 / 90</strong> sind zugleich die Triage-Grenzen (ab 90 % „Fordern", ab 80 % „Läuft gut", ab 50 % „Begleiten", darunter „Fördern"), damit Balkenfarbe und Feld immer übereinstimmen. Quelle in Code: <code>pctColor()</code> = <code>_tagTraffic()</code>.</p>
+    <div style="display:grid;grid-template-columns:26px auto 1fr 90px;gap:.55rem 1rem;align-items:center;max-width:520px;margin:.7rem 0 1.3rem;font-size:.85rem">
+      <span style="width:22px;height:22px;border-radius:6px;background:#1f7a3d"></span><b>≥ 90 %</b><span style="color:#5a5a5a">sehr gut &nbsp;<code style="font-size:.72rem">#1f7a3d</code></span><div><div style="font-weight:800;color:#1f7a3d;font-size:.82rem">90 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:90%;background:#1f7a3d"></div></div></div>
+      <span style="width:22px;height:22px;border-radius:6px;background:#7cb342"></span><b>80–89 %</b><span style="color:#5a5a5a">gut &nbsp;<code style="font-size:.72rem">#7cb342</code></span><div><div style="font-weight:800;color:#7cb342;font-size:.82rem">80 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:80%;background:#7cb342"></div></div></div>
+      <span style="width:22px;height:22px;border-radius:6px;background:#f9c33b"></span><b>60–79 %</b><span style="color:#5a5a5a">solide &nbsp;<code style="font-size:.72rem">#f9c33b</code></span><div><div style="font-weight:800;color:#f9c33b;font-size:.82rem">60 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:60%;background:#f9c33b"></div></div></div>
+      <span style="width:22px;height:22px;border-radius:6px;background:#ef8b2c"></span><b>50–59 %</b><span style="color:#5a5a5a">wackelig &nbsp;<code style="font-size:.72rem">#ef8b2c</code></span><div><div style="font-weight:800;color:#ef8b2c;font-size:.82rem">50 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:50%;background:#ef8b2c"></div></div></div>
+      <span style="width:22px;height:22px;border-radius:6px;background:#d8453a"></span><b>&lt; 50 %</b><span style="color:#5a5a5a">kritisch &nbsp;<code style="font-size:.72rem">#d8453a</code></span><div><div style="font-weight:800;color:#d8453a;font-size:.82rem">40 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:40%;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>
+    <p><strong>&lt; 50 % → Fördern</strong> (Hilfe) · <strong>50–79 % → Begleiten</strong> · <strong>80–89 % → Läuft gut</strong> · <strong>≥ 90 % → Fordern</strong> (mehr herausfordern) — 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:#155e2a;background:#c8e6cd;padding:.25rem .7rem;border-radius:12px">Fordern</span>
       <span style="font-size:.8rem;font-weight:700;color:#8a8a8a;background:#efeee8;padding:.25rem .7rem;border-radius:12px">inaktiv</span>
     </div>