feat(zugaenge): X-Zugang und Telegram-Zugang als gleichwertige Dienst-Karten

Beide Dienste erscheinen als Karte mit Lucide-Icon im Titel (X-Kreuz,
Telegram-Papierflieger) und derselben Tabellenstruktur (Benutzername,
E-Mail bzw. Telefon, Status, Anfragen, Letzte Nutzung/Pruefung, Aktionen).
Die nackte Konten-Zaehlung entfaellt, die X-Knoepfe ziehen in den
Kartenkopf. Telegram-Zeile zeigt Konto, Telefonnummer (Monitor-Commit
5450fd2), Status und letzte Pruefung.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/static/js/x-scraper.js

@@ -16,36 +16,38 @@ async function loadXScraperAccounts() {
   }
 }
 
-// Telegram-Session-Status (vom Monitor in die geteilte DB gemeldet)
+// Telegram-Session-Status (vom Monitor in die geteilte DB gemeldet),
+// dargestellt als Tabellenzeile im selben Format wie die X-Konten
 async function loadTelegramStatus() {
-  const box = document.getElementById("telegramStatusBox");
-  if (!box) return;
+  const tbody = document.getElementById("telegramStatusTable");
+  if (!tbody) return;
   try {
     const st = await API.get("/api/x-scraper/telegram-status");
     if (!st.available) {
-      box.innerHTML = '<span class="text-muted">Noch keine Statusmeldung vom Monitor vorhanden. '
-        + 'Der Monitor meldet den Status beim Start und täglich um 04:30 Uhr.</span>';
+      tbody.innerHTML = '<tr><td colspan="6" class="text-muted">Noch keine Statusmeldung vom Monitor vorhanden. Der Monitor meldet beim Start und täglich um 04:30 Uhr.</td></tr>';
       return;
     }
-    const stand = `<span class="text-secondary" style="margin-left:10px;font-size:12px;">Stand ${formatDateTime(st.updated_at)}</span>`;
-    if (st.ok) {
-      box.innerHTML = `<span class="badge badge-active">Session gültig</span> `
-        + `<span style="margin-left:6px;">Verbunden${st.account ? " als " + esc(st.account) : ""}. `
-        + `Die Telegram-Anmeldung läuft nicht periodisch ab, hier ist normalerweise nichts zu tun.</span>${stand}`;
-    } else {
-      box.innerHTML = `<span class="badge badge-inactive">Problem</span> `
-        + `<span style="margin-left:6px;">${esc(st.error || "Session nicht autorisiert")}. `
-        + `Die Telegram-Recherche ist pausiert, bis auf dem Server neu eingeloggt wurde.</span>${stand}`;
-    }
+    const status = st.ok
+      ? '<span style="color:var(--success,#2e7d32);">Aktiv</span>'
+      : '<span style="color:var(--danger,#c62828);">Problem</span> <span class="text-secondary" style="font-size:12px;">' + esc(st.error || "Session nicht autorisiert") + '</span>';
+    const aktion = st.ok
+      ? '<span class="text-muted" title="Die Telegram-Anmeldung läuft nicht periodisch ab, hier ist normalerweise nichts zu tun.">—</span>'
+      : '<span class="text-secondary" style="font-size:12px;">Neu-Login nur auf dem Server möglich</span>';
+    tbody.innerHTML = `<tr>
+      <td>${esc(st.account || "—")}</td>
+      <td class="text-secondary">${esc(st.phone || "—")}</td>
+      <td>${status}</td>
+      <td class="text-secondary">—</td>
+      <td class="text-secondary">${formatDateTime(st.updated_at)}</td>
+      <td>${aktion}</td>
+    </tr>`;
   } catch (err) {
-    box.innerHTML = '<span class="text-muted">Status konnte nicht geladen werden. ' + esc(err.message || "") + '</span>';
+    tbody.innerHTML = '<tr><td colspan="6" class="text-muted">Status konnte nicht geladen werden. ' + esc(err.message || "") + '</td></tr>';
   }
 }
 
 function renderXScraperAccounts(list) {
   const tbody = document.getElementById("xScraperTable");
-  const cnt = document.getElementById("xScraperCount");
-  if (cnt) cnt.textContent = list.length + (list.length === 1 ? " Konto" : " Konten");
   if (!list.length) {
     tbody.innerHTML = '<tr><td colspan="6" class="text-muted">Keine X-Recherche-Konten. Mit „+ Konto hinzufügen" anlegen.</td></tr>';
     return;