diff --git a/src/static/css/style.css b/src/static/css/style.css
index d38956a..4480a6b 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -2453,25 +2453,24 @@ 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;
 }
 
-/* Saeulen-Bereich (ueber der Linie) */
+.ht-axis--hourly {
+    height: 190px;
+}
+
+/* Saeulen-Bereich (ueber der Linie) — verschoben nach unten, damit oben Platz fuer Datums-Marker + Themen-Labels */
 .ht-bars {
     position: absolute;
     left: 4%;
     right: 4%;
-    top: 22px;
+    top: 44px;
     bottom: 60px;
 }
 
 .ht-axis--hourly .ht-bars {
-    top: 42px;
+    top: 64px;
 }
 
 /* Achsenlinie */
@@ -2479,14 +2478,14 @@ a.dev-source-pill:hover {
     position: absolute;
     left: 2%;
     right: 2%;
-    top: 100px;
+    top: 120px;
     height: 2px;
     background: var(--border);
     z-index: 3;
 }
 
 .ht-axis--hourly .ht-axis-line {
-    top: 120px;
+    top: 140px;
 }
 
 /* Datums-Marker (vertikale Linie + Datum oben, nur bei Stunden-Granularität) */
@@ -2640,12 +2639,12 @@ a.dev-source-pill:hover {
     position: absolute;
     left: 4%;
     right: 4%;
-    top: 110px;
+    top: 130px;
     height: 20px;
 }
 
 .ht-axis--hourly .ht-axis-labels {
-    top: 130px;
+    top: 150px;
 }
 
 .ht-axis-label {
@@ -2719,11 +2718,20 @@ a.dev-source-pill:hover {
     margin-bottom: 4px;
 }
 
-/* Themen-Label ueber aktiven Buckets */
+/* 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; }
 .ht-bucket-label {
     position: absolute;
-    bottom: calc(100% + 14px);
-    left: 50%;
+    top: 0;
     transform: translateX(-50%);
     font-size: 10px;
     font-family: var(--font-mono);
@@ -2734,7 +2742,6 @@ a.dev-source-pill:hover {
     border-radius: 8px;
     border: 1px solid var(--tint-accent-strong);
     white-space: nowrap;
-    pointer-events: none;
     opacity: 0.85;
 }
 
@@ -2793,16 +2800,21 @@ a.dev-source-pill:hover {
     font-weight: 500;
 }
 
-/* Lagebericht-Linien quer durch die Achse */
+/* Lagebericht-Linien quer durch die Achse — gehen vom Bar-Bereich bis zur Achsenlinie,
+   Cap (Pin-Symbol) sitzt unten direkt an der Achsenlinie. */
 .ht-snapshot-lines {
     position: absolute;
     left: 4%;
     right: 4%;
-    top: 0;
-    bottom: 38px;
+    top: 44px;
+    bottom: 50px;
     pointer-events: none;
     z-index: 2;
 }
+.ht-axis--hourly .ht-snapshot-lines {
+    top: 64px;
+    bottom: 50px;
+}
 .ht-snapshot-line {
     position: absolute;
     top: 0;
@@ -2818,7 +2830,7 @@ a.dev-source-pill:hover {
 .ht-snapshot-line:hover { opacity: 0.85; }
 .ht-snapshot-line-cap {
     position: absolute;
-    top: -2px;
+    bottom: -7px;
     left: 50%;
     transform: translateX(-50%);
     width: 14px;
@@ -2830,21 +2842,21 @@ a.dev-source-pill:hover {
     display: flex;
     align-items: center;
     justify-content: center;
+    z-index: 4;
 }
 
-/* "Heute"-Linie */
+/* "Heute"-Linie (nur bei taeglicher/woechentlicher/monatlicher Granularitaet aktiv) */
 .ht-today-line {
     position: absolute;
     left: 4%;
-    top: 0;
-    bottom: 38px;
-    width: 1px;
+    top: 44px;
+    bottom: 50px;
+    width: 0;
     margin-left: -1px;
-    background: var(--accent);
-    opacity: 0.5;
     border-left: 1px dashed var(--accent);
+    opacity: 0.6;
     pointer-events: none;
-    z-index: 4;
+    z-index: 3;
 }
 .ht-today-label {
     position: absolute;
diff --git a/src/static/js/app.js b/src/static/js/app.js
index bae85f8..e5821ed 100644
--- a/src/static/js/app.js
+++ b/src/static/js/app.js
@@ -1182,15 +1182,35 @@ const App = {
         });
         html += '</div>';
 
-        // "Heute"-Linie wenn heute im sichtbaren Bereich liegt
+        // "Heute"-Linie nur bei taeglicher/woechentlicher/monatlicher Granularitaet sinnvoll —
+        // bei "hour" zeigt der Tagesmarker eh schon "Heute, ..."
         const now = Date.now();
-        if (rangeEnd > rangeStart && now >= rangeStart && now <= rangeEnd) {
+        if (!isHourly && 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) => {
@@ -1200,8 +1220,6 @@ 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;
 
@@ -1220,10 +1238,6 @@ 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>`;