Ereignis-Timeline: Lagebericht-Stempel zusammenfassen, Bar-Cap entfernen

Mehrere Snapshots in derselben Achsen-Position erzeugten verschmierte,
übereinanderliegende Pin-Symbole. Zusätzlich war der goldene Streifen
auf der Bar (Bar-Cap) redundant zur vertikalen Snapshot-Linie.

- Snapshots werden pro Achsen-Position (auf 0,5%-Genauigkeit) gruppiert.
  Eine einzige Linie + ein einziger Pin pro Gruppe; bei mehreren
  Lageberichten zeigt der Pin die Anzahl als Zahl statt das Stempel-
  Symbol.
- Bar-Cap (separates Element über der Bar) entfernt. Stattdessen
  bekommt die Bar-Füllung bei has-snapshot eine dezente goldene
  Top-Linie via ::before — keine Doppel-Markierung mehr.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/static/js/app.js

@@ -1165,19 +1165,30 @@ const App = {
         });
         html += '</div>';
 
-        // Lagebericht-Linien quer durch die Achse (klickbar, oeffnet Snapshot)
+        // Lagebericht-Linien quer durch die Achse (deduplikiert nach Achsen-Position)
         html += '<div class="ht-snapshot-lines">';
-        const snapshots = entries.filter(e => e.kind === 'snapshot');
-        snapshots.forEach(snap => {
+        const snapshotsByPos = {};
+        entries.filter(e => e.kind === 'snapshot').forEach(snap => {
             const ts = new Date(snap.timestamp || 0).getTime();
             if (rangeEnd === rangeStart) return;
             const pos = ((ts - rangeStart) / (rangeEnd - rangeStart)) * 100;
             if (pos < 0 || pos > 100) return;
-            const dateStr = new Date(snap.timestamp).toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE });
-            html += `<div class="ht-snapshot-line" style="left:${pos}%;" data-snapshot-id="${snap.data.id}" onclick="App.openSnapshotFromTimeline(${snap.data.id}, event)" title="Lagebericht ${UI.escape(dateStr)}">`;
-            html += `<div class="ht-snapshot-line-cap" aria-hidden="true">
-                <svg viewBox="0 0 12 12" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2h6v8l-3-2-3 2z"/></svg>
-            </div>`;
+            const posKey = Math.round(pos * 2) / 2;
+            if (!snapshotsByPos[posKey]) snapshotsByPos[posKey] = { pos: posKey, snapshots: [] };
+            snapshotsByPos[posKey].snapshots.push(snap);
+        });
+        Object.values(snapshotsByPos).forEach(group => {
+            const count = group.snapshots.length;
+            const first = group.snapshots[0];
+            const dateStr = new Date(first.timestamp).toLocaleDateString('de-DE', { day: '2-digit', month: 'short', timeZone: TIMEZONE });
+            const titleAttr = count === 1
+                ? `Lagebericht ${dateStr}`
+                : `${count} Lageberichte ${dateStr}`;
+            const capInner = count === 1
+                ? '<svg viewBox="0 0 12 12" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2h6v8l-3-2-3 2z"/></svg>'
+                : `<span class="ht-snapshot-line-count">${count}</span>`;
+            html += `<div class="ht-snapshot-line" style="left:${group.pos}%;" data-snapshot-id="${first.data.id}" onclick="App.openSnapshotFromTimeline(${first.data.id}, event)" title="${UI.escape(titleAttr)}">`;
+            html += `<div class="ht-snapshot-line-cap" aria-hidden="true">${capInner}</div>`;
             html += `</div>`;
         });
         html += '</div>';
@@ -1229,15 +1240,12 @@ const App = {
             if (isActive) barClass += ' active';
 
             html += `<div class="${barClass}" style="left:${pos}%;" onclick="App.openTimelineDetail(${idx})" data-idx="${idx}">`;
-            // Saeule selbst (gefuellt zur Hoehe)
+            // Saeule selbst (gefuellt zur Hoehe). has-snapshot setzt golden Top-Border via CSS.
             if (articleCount > 0) {
                 html += `<div class="ht-bar-fill" style="height:${heightPct}%;"></div>`;
             } else {
                 html += `<div class="ht-bar-fill ht-bar-fill--empty"></div>`;
             }
-            if (snapshotCount > 0) {
-                html += `<div class="ht-bar-snap-cap" aria-hidden="true"></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>`;