Claude-Statusbar global auf allen Seiten anzeigen + Schließen-Button

- #claudeStatusBar aus Dashboard-Template nach body verschoben (vor #app)
- loadClaudeStatus() von dashboard.js nach app.js (einmalig beim Start)
- Schließen-Button (×) zum Ausblenden der Statusbar
- Status-Bar CSS von dashboard.css nach main.css verschoben

wwwroot/css/dashboard.css

@@ -1,48 +1,3 @@
-/* Status Bar */
-
-.status-bar {
-  display: flex;
-  align-items: center;
-  gap: var(--badge-spacing);
-  padding: var(--box-padding);
-  border-radius: var(--border-radius);
-}
-
-.status-bar[hidden] {
-  display: none;
-}
-
-.status-indicator {
-  width: 0.5em;
-  height: 0.5em;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.status-bar.status-none .status-indicator {
-  background: var(--secondary);
-}
-
-.status-bar.status-minor .status-indicator {
-  background: var(--warning);
-}
-
-.status-bar.status-major .status-indicator,
-.status-bar.status-critical .status-indicator {
-  background: var(--dangerous);
-}
-
-.status-bar.status-minor,
-.status-bar.status-major,
-.status-bar.status-critical {
-  background: rgb(from var(--warning) r g b / .1);
-}
-
-.status-bar.status-major,
-.status-bar.status-critical {
-  background: rgb(from var(--dangerous) r g b / .1);
-}
-
 .dashboard .page-content {
   padding: var(--page-padding);
 }

wwwroot/css/main.css

@@ -1,3 +1,63 @@
+/* Status Bar */
+
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--badge-spacing);
+  padding: var(--box-padding);
+}
+
+.status-bar[hidden] {
+  display: none;
+}
+
+.status-indicator {
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-text {
+  flex: 1;
+}
+
+.status-close {
+  margin-left: auto;
+  opacity: var(--semi-transparent);
+  font-size: var(--font-size);
+}
+
+.status-close:hover {
+  opacity: 1;
+}
+
+.status-bar.status-none .status-indicator {
+  background: var(--secondary);
+}
+
+.status-bar.status-minor .status-indicator {
+  background: var(--warning);
+}
+
+.status-bar.status-major .status-indicator,
+.status-bar.status-critical .status-indicator {
+  background: var(--dangerous);
+}
+
+.status-bar.status-minor,
+.status-bar.status-major,
+.status-bar.status-critical {
+  background: rgb(from var(--warning) r g b / .1);
+}
+
+.status-bar.status-major,
+.status-bar.status-critical {
+  background: rgb(from var(--dangerous) r g b / .1);
+}
+
+/* Layout */
+
 header {
   padding: var(--box-padding);
   display: flex;

wwwroot/index.html

@@ -25,6 +25,11 @@
 </head>
 <body>
 
+<div id="claudeStatusBar" class="status-bar" hidden>
+  <span class="status-indicator"></span>
+  <span class="status-text"></span>
+  <button class="status-close icon-btn"><i class="fa fa-times"></i></button>
+</div>
 <div id="app"></div>
 
 <!-- Templates -->
@@ -45,10 +50,6 @@
 
 <template id="tpl-dashboard">
   <div class="page dashboard">
-    <div id="claudeStatusBar" class="status-bar" hidden>
-      <span class="status-indicator"></span>
-      <span class="status-text"></span>
-    </div>
     <header>
       <button class="back-btn icon-btn" disabled></button>
       <h1 class="dashboard-title">// gott</h1>

wwwroot/js/app.js

@@ -12,12 +12,41 @@ document.addEventListener('DOMContentLoaded', async () => {
   }
 
   currentUser = user;
+  loadClaudeStatus();
 
   const { page, id } = parseHash();
   var target = page === 'login' ? 'dashboard' : page;
   await navigateTo(target, { id }, { replace: true });
 });
 
+async function loadClaudeStatus() {
+  const statusBar = document.getElementById('claudeStatusBar');
+  if (!statusBar) return;
+
+  // Schließen-Button
+  const closeBtn = statusBar.querySelector('.status-close');
+  if (closeBtn) {
+    closeBtn.addEventListener('click', () => { statusBar.hidden = true; });
+  }
+
+  try {
+    const res = await fetch('https://status.claude.com/api/v2/status.json');
+    if (!res.ok) return;
+    const data = await res.json();
+
+    const indicator = data.status?.indicator || 'none';
+    const description = data.status?.description || '';
+
+    if (indicator === 'none') return;
+
+    statusBar.classList.add(`status-${indicator}`);
+    statusBar.querySelector('.status-text').textContent = description;
+    statusBar.hidden = false;
+  } catch {
+    // Status-Abruf fehlgeschlagen – still ignorieren
+  }
+}
+
 // Browser Zurück/Vor-Button
 window.addEventListener('popstate', async (e) => {
   var page, id;

wwwroot/js/pages/dashboard.js

@@ -2,9 +2,6 @@
 
 registerPage('dashboard', {
   async init() {
-    // Claude Status laden
-    loadClaudeStatus();
-
     // Einstellungen-Link
     document.getElementById('dashboardSettingsLink').addEventListener('click', (e) => {
       e.preventDefault();
@@ -265,29 +262,6 @@ registerPage('dashboard', {
   }
 });
 
-async function loadClaudeStatus() {
-  const statusBar = document.getElementById('claudeStatusBar');
-  if (!statusBar) return;
-
-  try {
-    const res = await fetch('https://status.claude.com/api/v2/status.json');
-    if (!res.ok) return;
-    const data = await res.json();
-
-    const indicator = data.status?.indicator || 'none';
-    const description = data.status?.description || '';
-
-    // Nur anzeigen wenn es kein "none" ist (alles OK)
-    if (indicator === 'none') return;
-
-    statusBar.classList.add(`status-${indicator}`);
-    statusBar.querySelector('.status-text').textContent = description;
-    statusBar.hidden = false;
-  } catch {
-    // Status-Abruf fehlgeschlagen – still ignorieren
-  }
-}
-
 function showTelegramLinkCode(code, sessionName) {
   // Bestehendes Modal entfernen
   const existing = document.getElementById('telegramLinkModal');