src/static/css/style.css

@@ -2453,24 +2453,25 @@ a.dev-source-pill:hover {
 /* Achsen-Container */
 .ht-axis {
     position: relative;
+    height: 150px;
+}
+
+/* Stündliches Layout: höher wegen Datums-Markern oben */
+.ht-axis--hourly {
     height: 170px;
 }
 
-.ht-axis--hourly {
-    height: 190px;
-}
-
-/* Saeulen-Bereich (ueber der Linie) — verschoben nach unten, damit oben Platz fuer Datums-Marker + Themen-Labels */
+/* Saeulen-Bereich (ueber der Linie) */
 .ht-bars {
     position: absolute;
     left: 4%;
     right: 4%;
-    top: 44px;
+    top: 22px;
     bottom: 60px;
 }
 
 .ht-axis--hourly .ht-bars {
-    top: 64px;
+    top: 42px;
 }
 
 /* Achsenlinie */
@@ -2478,14 +2479,14 @@ a.dev-source-pill:hover {
     position: absolute;
     left: 2%;
     right: 2%;
-    top: 120px;
+    top: 100px;
     height: 2px;
     background: var(--border);
     z-index: 3;
 }
 
 .ht-axis--hourly .ht-axis-line {
-    top: 140px;
+    top: 120px;
 }
 
 /* Datums-Marker (vertikale Linie + Datum oben, nur bei Stunden-Granularität) */
@@ -2639,12 +2640,12 @@ a.dev-source-pill:hover {
     position: absolute;
     left: 4%;
     right: 4%;
-    top: 130px;
+    top: 110px;
     height: 20px;
 }
 
 .ht-axis--hourly .ht-axis-labels {
-    top: 150px;
+    top: 130px;
 }
 
 .ht-axis-label {
@@ -2718,20 +2719,11 @@ a.dev-source-pill:hover {
     margin-bottom: 4px;
 }
 
-/* Themen-Labels: eigene Schiene unter den Tagesmarkern, nicht mehr Kind der Bar */
-.ht-bucket-labels {
-    position: absolute;
-    left: 4%;
-    right: 4%;
-    top: 22px;
-    height: 18px;
-    pointer-events: none;
-    z-index: 6;
-}
-.ht-axis--hourly .ht-bucket-labels { top: 42px; }
+/* Themen-Label ueber aktiven Buckets */
 .ht-bucket-label {
     position: absolute;
-    top: 0;
+    bottom: calc(100% + 14px);
+    left: 50%;
     transform: translateX(-50%);
     font-size: 10px;
     font-family: var(--font-mono);
@@ -2742,6 +2734,7 @@ a.dev-source-pill:hover {
     border-radius: 8px;
     border: 1px solid var(--tint-accent-strong);
     white-space: nowrap;
+    pointer-events: none;
     opacity: 0.85;
 }
 
@@ -2800,21 +2793,16 @@ a.dev-source-pill:hover {
     font-weight: 500;
 }
 
-/* Lagebericht-Linien quer durch die Achse — gehen vom Bar-Bereich bis zur Achsenlinie,
-   Cap (Pin-Symbol) sitzt unten direkt an der Achsenlinie. */
+/* Lagebericht-Linien quer durch die Achse */
 .ht-snapshot-lines {
     position: absolute;
     left: 4%;
     right: 4%;
-    top: 44px;
-    bottom: 50px;
+    top: 0;
+    bottom: 38px;
     pointer-events: none;
     z-index: 2;
 }
-.ht-axis--hourly .ht-snapshot-lines {
-    top: 64px;
-    bottom: 50px;
-}
 .ht-snapshot-line {
     position: absolute;
     top: 0;
@@ -2830,7 +2818,7 @@ a.dev-source-pill:hover {
 .ht-snapshot-line:hover { opacity: 0.85; }
 .ht-snapshot-line-cap {
     position: absolute;
-    bottom: -7px;
+    top: -2px;
     left: 50%;
     transform: translateX(-50%);
     width: 14px;
@@ -2842,21 +2830,21 @@ a.dev-source-pill:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 4;
 }
 
-/* "Heute"-Linie (nur bei taeglicher/woechentlicher/monatlicher Granularitaet aktiv) */
+/* "Heute"-Linie */
 .ht-today-line {
     position: absolute;
     left: 4%;
-    top: 44px;
-    bottom: 50px;
-    width: 0;
+    top: 0;
+    bottom: 38px;
+    width: 1px;
     margin-left: -1px;
+    background: var(--accent);
+    opacity: 0.5;
     border-left: 1px dashed var(--accent);
-    opacity: 0.6;
     pointer-events: none;
-    z-index: 3;
+    z-index: 4;
 }
 .ht-today-label {
     position: absolute;

src/static/js/app.js

@@ -1182,35 +1182,15 @@ const App = {
         });
         html += '</div>';
 
-        // "Heute"-Linie nur bei taeglicher/woechentlicher/monatlicher Granularitaet sinnvoll —
-        // bei "hour" zeigt der Tagesmarker eh schon "Heute, ..."
+        // "Heute"-Linie wenn heute im sichtbaren Bereich liegt
         const now = Date.now();
-        if (!isHourly && rangeEnd > rangeStart && now >= rangeStart && now <= rangeEnd) {
+        if (rangeEnd > rangeStart && now >= rangeStart && now <= rangeEnd) {
             const todayPos = ((now - rangeStart) / (rangeEnd - rangeStart)) * 100;
             html += `<div class="ht-today-line" style="left:${todayPos}%;" aria-hidden="true">
                 <div class="ht-today-label">Heute</div>
             </div>`;
         }
 
-        // Themen-Labels als eigene Schiene (nicht mehr Kind der Bar) — verhindert Ueberlappung mit Datums-Markern
-        const labelEntries = [];
-        buckets.forEach((bucket, idx) => {
-            if (!topActiveIdx.has(idx)) return;
-            const articleCount = bucket.entries.filter(e => e.kind === 'article').length;
-            if (articleCount < 2) return;
-            const kw = this._extractBucketKeyword(bucket);
-            if (!kw) return;
-            const pos = this._bucketPositionPercent(bucket, rangeStart, rangeEnd, buckets.length);
-            labelEntries.push({ pos, text: kw });
-        });
-        if (labelEntries.length > 0) {
-            html += '<div class="ht-bucket-labels">';
-            labelEntries.forEach(le => {
-                html += `<div class="ht-bucket-label" style="left:${le.pos}%;">${UI.escape(le.text)}</div>`;
-            });
-            html += '</div>';
-        }
-
         // Saeulen pro Bucket
         html += '<div class="ht-bars">';
         buckets.forEach((bucket, idx) => {
@@ -1220,6 +1200,8 @@ const App = {
             // Bar-Hoehe: Anteil articleCount/articleMax, mindestens 6%, maximal 100%
             const heightPct = articleCount === 0 ? 0 : Math.max(6, Math.round((articleCount / articleMax) * 100));
             const isActive = this._activePointIndex === idx;
+            const showLabel = topActiveIdx.has(idx) && articleCount >= 2;
+            const keyword = showLabel ? this._extractBucketKeyword(bucket) : null;
             const top3 = this._topRelevantHeadlines(bucket, 3);
             const remaining = bucket.entries.filter(e => e.kind === 'article').length - top3.length;
 
@@ -1238,6 +1220,10 @@ const App = {
             if (snapshotCount > 0) {
                 html += `<div class="ht-bar-snap-cap" aria-hidden="true"></div>`;
             }
+            // Themen-Label fuer aktivste Buckets
+            if (keyword) {
+                html += `<div class="ht-bucket-label">${UI.escape(keyword)}</div>`;
+            }
             // Hover-Vorschaukarte
             html += `<div class="ht-hover-card">
                 <div class="ht-hover-card-head">${UI.escape(bucket.label)} &middot; ${articleCount + snapshotCount} Eintr${(articleCount + snapshotCount) === 1 ? 'ag' : 'äge'}</div>`;