Übersicht: Cap grafisch (rote Kappe über gedeckelten Verlauf-Balken)

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

App/teacher.html

@@ -2109,6 +2109,7 @@ var IV_CSS = ''
 + '.iv-hot .iv-dotA{background:var(--ivg);animation:ivblink .55s ease-in-out infinite}.iv-on .iv-dotA{background:var(--ivg);animation:ivblink 1.2s ease-in-out infinite}.iv-mid .iv-dotA{background:var(--ivy);animation:ivblink 2.2s ease-in-out infinite}.iv-off .iv-dotA{background:var(--ivr);opacity:.5}'
 + '@keyframes ivblink{0%,100%{opacity:1}50%{opacity:.28}}'
 + '.iv-vl{display:inline-flex;align-items:flex-end;gap:2px;height:18px;justify-self:center}.iv-vl i{width:4px;border-radius:1.5px;min-height:2px}'
++ '.iv-vl i.iv-cap{box-shadow:inset 0 2px 0 0 rgba(255,255,255,.7),0 -2px 0 0 var(--ivr)}'
 + '.iv-chev{width:15px;height:15px;fill:none;stroke:var(--ivmut);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.45}.iv-prow:hover .iv-chev{opacity:1}'
 + '.iv-calm{background:#fff;border:1px solid var(--ivline);border-radius:12px;padding:11px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.iv-calm .iv-dot{width:9px;height:9px;border-radius:50%;background:var(--ivg)}.iv-calm b{font-weight:750}.iv-calm .iv-names{font-size:.8rem;color:var(--ivmut)}'
 + '.iv-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 24px;background:#fff;border:1px solid var(--ivline);border-radius:12px;padding:14px 16px;margin-top:6px;font-size:.74rem;color:var(--ivmut)}.iv-legend b{color:#2f3a34}'
@@ -2127,13 +2128,15 @@ function ivAkt(status){
   var x=m[status]||m.kalt;
   return '<span class="iv-akt '+x[0]+'" title="'+x[1]+'"><span class="iv-dotA"></span></span>';
 }
-function ivSpark(secArr, maxSec){
+function ivSpark(secArr, maxSec, cap){
   maxSec = maxSec||1;
   var bars = secArr.map(function(sec){
     var frac = sec/maxSec;                     // 0..1
     var h = Math.max(2, Math.round(frac*18));
     var cls = sec<=0 ? 'iv-z' : (frac<.2?'iv-r':frac<.4?'iv-o':frac<.62?'iv-y':frac<.82?'iv-li':'iv-g');
-    return '<i class="'+cls+'" style="height:'+h+'px"></i>';
+    var capd = (cap && sec>=cap) ? ' iv-cap' : '';           // Woche am 3-h-Deckel
+    var tt   = capd ? ' title="≥ 3 h – gedeckelt (mehr wird nicht gewertet)"' : '';
+    return '<i class="'+cls+capd+'" style="height:'+h+'px"'+tt+'></i>';
   }).join('');
   return '<span class="iv-vl">'+bars+'</span>';
 }
@@ -2212,7 +2215,7 @@ function ivBuildOverview(cockpit, weeks, studentsCount, matrix){
     h+='<div class="iv-card" style="--iva:var('+m[2]+')"><div class="iv-chead"><span class="iv-ic"><svg viewBox="0 0 24 24">'+IV_ICON[key]+'</svg></span><div class="iv-ct"><h4>'+m[0]+'</h4><p>'+m[1]+'</p></div><span class="iv-cn num">'+rows.length+'</span></div>';
     h+='<div class="iv-cols"><span></span><span title="Wie gut die Sim gemeistert wird, 0–100">Erfolg</span><span title="arbeitet gerade? blinkt live">Aktiv</span><span title="aktive Zeit pro Woche">Verlauf</span><span></span></div>';
     rows.forEach(function(r){
-      h+='<button class="iv-prow" onclick="switchTab(\'results\')"><span class="iv-nm">'+esc(r.name)+'</span><span style="display:contents">'+ivErf(r.erf)+ivAkt(r.status)+ivSpark(r.secs,maxSec)+'</span><svg class="iv-chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg></button>';
+      h+='<button class="iv-prow" onclick="switchTab(\'results\')"><span class="iv-nm">'+esc(r.name)+'</span><span style="display:contents">'+ivErf(r.erf)+ivAkt(r.status)+ivSpark(r.secs,maxSec,IV_WEEK_CAP)+'</span><svg class="iv-chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg></button>';
     });
     h+='</div>';
   });
@@ -2222,7 +2225,7 @@ function ivBuildOverview(cockpit, weeks, studentsCount, matrix){
   h+='<div class="iv-legend">'
    +'<div><b>Erfolg</b> Wie gut die Simulation gemeistert wird, 0 – 100 (grün gut … rot schwach). Normiert zwischen Scheitern und „sehr gut".</div>'
    +'<div><b>Aktuell aktiv</b> Interaktionen der letzten Minuten, live: <span class="iv-lgdot" style="background:var(--ivg)"></span>aktiv <span class="iv-lgdot" style="background:var(--ivy)"></span>teilweise <span class="iv-lgdot" style="background:var(--ivr)"></span>inaktiv</div>'
-   +'<div><b>Verlauf</b> Aktive Zeit pro Woche, letzte 10 Wochen, gleiches Raster für alle. Farbe = Aktivität der Woche.</div>'
+   +'<div><b>Verlauf</b> Aktive Zeit pro Woche, letzte 10 Wochen, gleiches Raster für alle. Farbe = Aktivität der Woche. Rote Kappe über einem Balken = bei 3 h gedeckelt (Ausreißer werden nicht überbewertet).</div>'
    +'</div>';
   h+='</div>';
   return h;