diff --git a/App/teacher.html b/App/teacher.html
index de4550d..50c6bd6 100644
--- a/App/teacher.html
+++ b/App/teacher.html
@@ -2115,9 +2115,11 @@ function _tsInjectCss(){
    +'.ts-reset{font-size:.66rem;padding:.2rem .5rem;border:1px solid rgba(0,0,0,.15);border-radius:6px;background:#fff;color:#4a7c8a;cursor:pointer;font-weight:600}'
    +'.ts-reset:hover{background:#f0f8fa}'
    +'.ts-slider{position:relative;height:34px;margin:0 10px}'
-   +'.ts-track{position:absolute;left:0;right:0;top:15px;height:5px;border-radius:3px;background:#e3e0d5}'
-   +'.ts-range{position:absolute;top:15px;height:5px;border-radius:3px;background:#4a7c8a}'
-   +'.ts-slider input[type=range]{position:absolute;left:0;width:100%;top:0;height:34px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}'
+   +'.ts-bg{position:absolute;left:0;right:0;top:6px;height:22px;border-radius:5px;background:#eeece3;overflow:hidden;z-index:0}'
+   +'.ts-night{position:absolute;top:0;height:100%;background:rgba(31,75,55,.17)}'          /* Nachtzeiten dunkler */
+   +'.ts-div{position:absolute;top:0;height:100%;width:1px;background:rgba(0,0,0,.10)}'      /* stündliche Trennlinie */
+   +'.ts-range{position:absolute;top:6px;height:22px;border-radius:4px;background:rgba(74,124,138,.30);border:1px solid #4a7c8a;z-index:1;box-sizing:border-box}'
+   +'.ts-slider input[type=range]{position:absolute;left:0;width:100%;top:0;height:34px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;z-index:2}'
    +'.ts-slider input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#4a7c8a;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;margin-top:0}'
    +'.ts-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#4a7c8a;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer}'
    +'.ts-slider input[type=range]::-webkit-slider-runnable-track{background:none;height:34px}'
@@ -2260,14 +2262,20 @@ async function renderLiveSummary() {
   // (erste bis letzte Aktivität). onchange committet + rendert neu, oninput nur Visual.
   _tsInjectCss();
   var _isAuto = (_liveWin.from==null && _liveWin.to==null);
-  var _ticks=''; for (var _h=0;_h<=24;_h+=3){ _ticks += '<span style="left:'+(_h/24*100)+'%">'+_pad2(_h)+'</span>'; }
+  // Hintergrund: dunklere Nachtzeiten (00–01 und 20–24, um Mitternacht = ein Bereich)
+  // + 23 stündliche Trennlinien.
+  var _bg = '<span class="ts-night" style="left:0;width:'+(1/24*100)+'%"></span>'
+          + '<span class="ts-night" style="left:'+(20/24*100)+'%;width:'+(4/24*100)+'%"></span>';
+  for (var _d=1; _d<24; _d++){ _bg += '<span class="ts-div" style="left:'+(_d/24*100)+'%"></span>'; }
+  // Stündliche Beschriftung 0–24.
+  var _ticks=''; for (var _h=0;_h<=24;_h++){ _ticks += '<span style="left:'+(_h/24*100)+'%">'+_pad2(_h)+'</span>'; }
   html += '<div class="ts-wrap">'
         + '<div class="ts-head">🕒 Zeitraum <b id="tsLbl">'+_pad2(fromH)+':00 – '+_pad2(toH)+':00</b>'
         +   (_isAuto ? '<span style="color:#8a8a8a;font-size:.66rem">Auto: erste – letzte Aktivität</span>'
                      : '<button class="ts-reset" onclick="_tsReset()">↺ ganzer Zeitraum</button>')
         + '</div>'
         + '<div class="ts-slider">'
-        +   '<div class="ts-track"></div>'
+        +   '<div class="ts-bg">'+_bg+'</div>'
         +   '<div class="ts-range" id="tsRange" style="left:'+(fromH/24*100)+'%;width:'+((toH-fromH)/24*100)+'%"></div>'
         +   '<input type="range" id="tsFrom" min="0" max="24" step="1" value="'+fromH+'" aria-label="Von" oninput="_tsVisual()" onchange="_tsCommit()">'
         +   '<input type="range" id="tsTo" min="0" max="24" step="1" value="'+toH+'" aria-label="Bis" oninput="_tsVisual()" onchange="_tsCommit()">'