Feinschliff-Spalten + Kopfzeilen-Panels (Placement/Transparenz)

- teacher.html Aktuell-Spalten: Weltkueche '🏆 Punkte' (score), Fluss
  '👥 Einw.' + '🌾 Ernte' (population/food), Busfahrt '📍 Ø km' (avgTapKm).
  (Kofferdetektiv Items-% vertagt: Sim liefert live noch keine Item-Zahl.)
- admin-styleguide.html Kopfzeile: Untermenues 30% transparent (Blur);
  Tempo oeffnet links + bleibt offen, Musik klappt nach unten + schliesst
  nach Song-Auswahl; Toggle per Klick.

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

App/admin-styleguide.html

@@ -258,7 +258,7 @@
       .khz-fhd{height:120px}
       .khz-scroll{overflow-x:auto}
       /* Aufgeklappte Steuerung */
-      .khz-pop{display:inline-flex;align-items:center;gap:.25rem;height:38px;padding:0 .3rem;background:#fff;border-radius:12px;box-shadow:0 2px 9px rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.06);vertical-align:middle}
+      .khz-pop{display:inline-flex;align-items:center;gap:.25rem;height:38px;padding:0 .3rem;background:rgba(255,255,255,.7);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);border-radius:12px;box-shadow:0 2px 9px rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.5);vertical-align:middle}
       .khz-pop .ic{width:16px;height:16px;color:#1f4e5a}
       .khz-seg{height:30px;min-width:36px;padding:0 .6rem;border:none;background:transparent;border-radius:8px;font-weight:800;font-size:.82rem;color:#4a4a4a;cursor:pointer;display:flex;align-items:center;justify-content:center}
       .khz-seg.on{background:#4a7c8a;color:#fff}
@@ -322,7 +322,7 @@
       </div></div>
     </div>
 
-    <div class="khz-frame-lab">Aufgeklappt · Tempo (Klick auf das Tempo-Icon — nur Echtzeit-Sims)</div>
+    <div class="khz-frame-lab">Aufgeklappt · Tempo — öffnet LINKS vom Button, bleibt offen (nur Echtzeit-Sims) · 30 % transparent</div>
     <div class="khz-pop">
       <button class="khz-seg" title="Pause"><svg class="ic"><use href="#ic-pause"/></svg></button>
       <button class="khz-seg on">1×</button>
@@ -339,7 +339,7 @@
     </div>
     <p style="font-size:.76rem;color:#6a6a6a;margin:.5rem 0 0">Klick öffnet das Tempo-Panel und lässt es offen bis zum erneuten Klick (Toggle) — genauso beim Musik-Player. Der Button selbst zeigt jederzeit den Speed: <b>1×</b>, <b>2×</b>, <b>8× Auto</b> (z. B. Logistik) oder <b>⏸ Pause</b>. So bleibt der Zustand sichtbar, ohne dass das Panel offen bleiben muss.</p>
 
-    <div class="khz-frame-lab">Aufgeklappt · Musikplayer (Klick auf das Musik-Icon)</div>
+    <div class="khz-frame-lab">Aufgeklappt · Musikplayer — klappt nach UNTEN auf, schließt nach Song-Auswahl · 30 % transparent</div>
     <div class="khz-pop khz-music">
       <button class="khz-seg on" title="Pause"><svg class="ic"><use href="#ic-pause"/></svg></button>
       <span class="khz-select"><svg class="ic"><use href="#ic-music"/></svg> Ruhige Klänge <svg class="ic"><use href="#ic-caret"/></svg></span>
@@ -348,7 +348,7 @@
     </div>
 
     <div style="background:#f0f7f1;border:1px solid #cfe6d2;border-radius:8px;padding:.7rem .9rem;font-size:.8rem;color:#2f5e39;margin-top:1rem">
-      <b>Aufbau:</b> links die Pille Kreis-Logo · Titel · Level (gleiche Höhe) + Home — rechts Tempo (nur Echtzeit-Sims: Klima, Fluss, Tourismus, Logistik) · Musik · Ton · Neustart · Hilfe · Glossar (neuer Tab). Eigene SVG-Icons im App-Stil. Sim-eigene KPIs (Budget, Jahr …) bleiben in einer eigenen Unterzeile, nicht in der Markenzeile.
+      <b>Aufbau:</b> links die Pille Kreis-Logo · Titel · Level (gleiche Höhe) + Home — rechts Tempo (nur Echtzeit-Sims: Klima, Fluss, Tourismus, Logistik) · Musik · Ton · Neustart · Hilfe · Glossar (neuer Tab). Eigene SVG-Icons im App-Stil. <b>Untermenüs:</b> Tempo öffnet <b>links</b> vom Button und bleibt offen (Zustand steht ohnehin im Button); Musik klappt <b>nach unten</b> auf und schließt nach der Song-Auswahl; beide 30 % transparent hinterlegt als Untermenü-Signal, Toggle per Klick. Sim-eigene KPIs (Budget, Jahr …) bleiben in einer eigenen Unterzeile, nicht in der Markenzeile.
     </div>
   </div>
 

App/teacher.html

@@ -891,6 +891,7 @@ var LIVE_PRIMARY_FIELDS = {
       var done = v||0; var c = done>=t ? '#5a8a5e' : '#3d5165';
       return '<b style="color:'+c+'">'+done+'</b><span style="color:#8a8a8a"> / '+t+'</span>';
     }},
+    {k:'score', label:'🏆 Punkte', align:'center', fmt:function(v){ return v!=null ? '<b style="color:#3d5165;font-variant-numeric:tabular-nums">'+Number(v).toLocaleString('de-AT')+'</b>' : '<span style="color:#8a8a8a">—</span>'; }},
     {k:'ingSolved', label:'Zutaten akt.', fmt:function(v, row){
       var s = row.state||{}; var t = s.ingTotal||0;
       if (!s.dishName || !t) return '<span style="color:#8a8a8a">—</span>';
@@ -913,6 +914,7 @@ var LIVE_PRIMARY_FIELDS = {
     {k:'lastCityTitle', label:'Letzte Stadt', align:'left'},
     {k:'lastMargin',   label:'Letzte Marge', unit:'€'},
     {k:'quizFirstTry', label:'🧠 1.-Versuch', fmt:function(v, row){ var s=row.state||{}; var t = s.orderIndex || 0; return t ? v+' / '+t : '—'; }},
+    {k:'avgTapKm',     label:'📍 Ø km', align:'center', fmt:function(v){ if (v==null) return '<span style="color:#8a8a8a">—</span>'; var n=Math.round(v); var c = n<=50?'#5a8a5e':n<=150?'#c9913a':'#c07a6b'; return '<span style="color:'+c+';font-weight:700">'+n+' km</span>'; }},
   ],
   'fluggesellschaft': [
     {k:'levelId',       label:'Stufe', align:'center'},
@@ -991,6 +993,8 @@ var LIVE_PRIMARY_FIELDS = {
     {k:'biodiv',      label:'🌳 Biodiv.',        fmt:function(v){ return _liveBar(v, 0, 100, 'high'); }},
     {k:'economy',     label:'💰 Wirtsch.',       fmt:function(v){ return _liveBar(v, 0, 100, 'high'); }},
     {k:'flood',       label:'🛡️ Hochw.-Schutz', fmt:function(v){ return _liveBar(v, 0, 100, 'high'); }},
+    {k:'population',   label:'👥 Einw.', align:'center', fmt:function(v){ return v!=null ? '<b style="color:#3d5165;font-variant-numeric:tabular-nums">'+v+'</b>' : '<span style="color:#8a8a8a">—</span>'; }},
+    {k:'food',        label:'🌾 Ernte', fmt:function(v){ return _liveBar(v, 0, 100, 'high'); }},
     {k:'settlementsLost', label:'🏚️ Verlust', align:'center', fmt:function(v){ if (!v) return '<span style="color:#5a8a5e">0</span>'; var c = v>=3 ? '#c07a6b' : '#c9913a'; return '<span style="color:'+c+';font-weight:700">'+v+'</span>'; }},
   ],
   'kofferdetektiv': [