ui: Info-Icons auf Lucide SVG umgestellt und Tooltip-Styling aufgewertet

- Text-i durch Lucide info SVG ersetzt (alle 6 Stellen)
- CSS-Kreis entfernt (SVG bringt eigenen mit)
- Hover-Farbe auf Accent-Gold statt Text-Secondary
- Tooltip: bg-elevated, font-body, shadow-lg, besseres Spacing
- Konsistent mit AegisSight Design-System (Navy/Gold)

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

src/static/css/style.css

@@ -4864,56 +4864,55 @@ a.map-popup-article:hover {
     background: var(--bg-primary);
 }
 
-/* === Info-Icon Tooltips === */
+/* === Info-Icon Tooltips (Lucide SVG) === */
 .info-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 15px;
+    width: 16px;
-    height: 15px;
+    height: 16px;
-    border-radius: 50%;
-    border: 1px solid var(--text-disabled);
     color: var(--text-disabled);
-    font-size: 10px;
-    font-weight: 400;
-    font-style: normal;
-    font-family: serif;
-    text-transform: none;
     cursor: help;
-    margin-left: 5px;
+    margin-left: var(--sp-sm);
     position: relative;
     vertical-align: middle;
     flex-shrink: 0;
-    transition: color 0.15s ease, border-color 0.15s ease;
+    transition: color 0.15s ease;
+}
+.info-icon svg {
+    width: 14px;
+    height: 14px;
+    stroke: currentColor;
+    stroke-width: 2;
 }
 .info-icon:hover {
-    color: var(--text-secondary);
+    color: var(--accent);
-    border-color: var(--text-secondary);
 }
 .info-icon::after {
     content: attr(data-tooltip);
     position: absolute;
-    bottom: calc(100% + 8px);
+    bottom: calc(100% + 10px);
     left: 50%;
     transform: translateX(-50%);
-    background: var(--bg-secondary);
+    background: var(--bg-elevated);
     color: var(--text-primary);
-    font-family: inherit;
+    font-family: var(--font-body);
-    font-size: 12.5px;
+    font-size: 12px;
     font-weight: 400;
-    padding: 10px 14px;
+    padding: var(--sp-lg) var(--sp-xl);
     border-radius: var(--radius);
     border: 1px solid var(--border);
     white-space: pre-line;
     width: max-content;
-    max-width: 280px;
+    max-width: 300px;
-    line-height: 1.4;
+    line-height: 1.55;
+    letter-spacing: 0.01em;
     pointer-events: none;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.15s ease, visibility 0.15s ease;
     z-index: 100;
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-lg);
 }
 .info-icon:hover::after {
     opacity: 1;
@@ -4922,7 +4921,7 @@ a.map-popup-article:hover {
 /* Tooltip nach unten wenn oben kein Platz (Klasse .tooltip-below) */
 .info-icon.tooltip-below::after {
     bottom: auto;
-    top: calc(100% + 8px);
+    top: calc(100% + 10px);
 }
 
 /* Chat UI-Highlight: Bedienelemente hervorheben */
@@ -5259,3 +5258,53 @@ body.tutorial-active .tutorial-cursor {
     width: 100%;
     display: block;
 }
+
+/* Tutorial Resume Dialog */
+.tutorial-resume-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 100000;
+    background: rgba(0,0,0,0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(2px);
+}
+.tutorial-resume-dialog {
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 2px solid var(--accent);
+    border-radius: var(--radius);
+    padding: 28px 32px;
+    max-width: 420px;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+    text-align: center;
+}
+.tutorial-resume-dialog p {
+    margin: 0 0 20px;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+.tutorial-resume-actions {
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+}
+.tutorial-resume-actions .tutorial-btn {
+    border: 1px solid var(--accent);
+    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+.tutorial-resume-actions .tutorial-btn-next:hover {
+    background: var(--accent-hover);
+    box-shadow: 0 0 0 2px rgba(150, 121, 26, 0.25);
+}
+.tutorial-btn-secondary {
+    background: transparent;
+    color: var(--text-secondary);
+    border: 1px solid var(--accent);
+}
+.tutorial-btn-secondary:hover {
+    background: var(--bg-hover);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 2px rgba(150, 121, 26, 0.25);
+}

src/static/dashboard.html

@@ -17,7 +17,7 @@
     <link rel="stylesheet" href="/static/vendor/MarkerCluster.css">
     <link rel="stylesheet" href="/static/vendor/MarkerCluster.Default.css">
     <link rel="stylesheet" href="/static/css/network.css?v=20260316a">
-    <link rel="stylesheet" href="/static/css/style.css?v=20260316h">
+    <link rel="stylesheet" href="/static/css/style.css?v=20260316k">
 </head>
 <body>
     <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
@@ -108,6 +108,7 @@
             <div class="sidebar-sources-link">
                 <button class="btn btn-secondary btn-full btn-small" onclick="App.openSourceManagement()">Quellen verwalten</button>
                 <button class="btn btn-secondary btn-full btn-small sidebar-feedback-btn" onclick="App.openFeedback()">Feedback senden</button>
+                <button class="btn btn-secondary btn-full btn-small" onclick="Tutorial.start()" title="Interaktiven Rundgang starten">Rundgang starten</button>
                 <div class="sidebar-stats-mini">
                     <span id="stat-sources-count">0 Quellen</span> &middot; <span id="stat-articles-count">0 Artikel</span>
                 </div>
@@ -327,7 +328,7 @@
                         <div class="grid-stack-item-content">
                             <div class="card incident-analysis-factcheck" id="factcheck-card">
                                 <div class="card-header">
-                                    <div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Faktencheck', 'factcheck-list')">Faktencheck <span class="info-icon" data-tooltip="Gesichert/Bestätigt = durch mehrere unabhängige Quellen belegt.&#10;&#10;Unbestätigt/Ungeprüft = noch nicht ausreichend verifiziert.&#10;&#10;Widerlegt/Umstritten = Quellen widersprechen sich.">i</span></div>
+                                    <div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Faktencheck', 'factcheck-list')">Faktencheck <span class="info-icon" data-tooltip="Gesichert/Bestätigt = durch mehrere unabhängige Quellen belegt.&#10;&#10;Unbestätigt/Ungeprüft = noch nicht ausreichend verifiziert.&#10;&#10;Widerlegt/Umstritten = Quellen widersprechen sich."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></div>
                                     <div class="fc-filter-bar" id="fc-filters"></div>
                                 </div>
                                 <div class="factcheck-list" id="factcheck-list">
@@ -443,18 +444,18 @@
                             <label class="toggle-label">
                                 <input type="checkbox" id="inc-international" checked>
                                 <span class="toggle-switch"></span>
-                                <span class="toggle-text">Internationale Quellen einbeziehen <span class="info-icon tooltip-below" data-tooltip="Aktiviert: Sucht auch in englischsprachigen und internationalen Medien.&#10;&#10;Deaktiviert: Nur deutschsprachige Quellen.">i</span></span>
+                                <span class="toggle-text">Internationale Quellen einbeziehen <span class="info-icon tooltip-below" data-tooltip="Aktiviert: Sucht auch in englischsprachigen und internationalen Medien.&#10;&#10;Deaktiviert: Nur deutschsprachige Quellen."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></span>
                             </label>
                         </div>
                         <div class="toggle-group" style="margin-top: 8px;">
                             <label class="toggle-label">
                                 <input type="checkbox" id="inc-telegram">
                                 <span class="toggle-switch"></span>
-                                <span class="toggle-text">Telegram-Kanäle einbeziehen <span class="info-icon tooltip-below" data-tooltip="Bezieht OSINT-relevante Telegram-Kanäle als zusätzliche Quelle ein. Kann die Aktualität erhöhen, aber auch unbestätigte Informationen liefern.">i</span></span>
+                                <span class="toggle-text">Telegram-Kanäle einbeziehen <span class="info-icon tooltip-below" data-tooltip="Bezieht OSINT-relevante Telegram-Kanäle als zusätzliche Quelle ein. Kann die Aktualität erhöhen, aber auch unbestätigte Informationen liefern."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></span>
                             </label>
                         </div>                    </div>
                     <div class="form-group">
-                        <label>Sichtbarkeit <span class="info-icon tooltip-below" data-tooltip="Öffentlich: Alle Nutzer der Organisation sehen diese Lage.&#10;&#10;Privat: Nur für dich sichtbar.">i</span></label>
+                        <label>Sichtbarkeit <span class="info-icon tooltip-below" data-tooltip="Öffentlich: Alle Nutzer der Organisation sehen diese Lage.&#10;&#10;Privat: Nur für dich sichtbar."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></label>
                         <div class="toggle-group">
                             <label class="toggle-label">
                                 <input type="checkbox" id="inc-visibility" checked>
@@ -483,7 +484,7 @@
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="inc-retention">Aufbewahrung (Tage) <span class="info-icon tooltip-below" data-tooltip="Nach Ablauf wird die Lage automatisch archiviert. 0 = unbegrenzt aufbewahren.">i</span></label>
+                        <label for="inc-retention">Aufbewahrung (Tage) <span class="info-icon tooltip-below" data-tooltip="Nach Ablauf wird die Lage automatisch archiviert. 0 = unbegrenzt aufbewahren."><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span></label>
                         <input type="number" id="inc-retention" min="0" max="999" value="30" placeholder="0 = Unbegrenzt">
                     </div>
                     <div class="form-group" style="margin-top: 8px;">
@@ -756,7 +757,7 @@
     <script src="https://cdn.jsdelivr.net/npm/gridstack@12/dist/gridstack-all.js"></script>
     <script src="/static/vendor/leaflet.js"></script>
     <script src="/static/vendor/leaflet.markercluster.js"></script>
-    <script src="/static/js/api.js?v=20260316b"></script>
+    <script src="/static/js/api.js?v=20260316c"></script>
     <script src="/static/js/ws.js?v=20260316b"></script>
     <script src="/static/js/components.js?v=20260316d"></script>
     <script src="/static/js/layout.js?v=20260316b"></script>
@@ -764,8 +765,8 @@
     <script src="/static/js/api_network.js?v=20260316a"></script>
     <script src="/static/js/network-graph.js?v=20260316a"></script>
     <script src="/static/js/app_network.js?v=20260316a"></script>
-    <script src="/static/js/tutorial.js?v=20260316w"></script>
+    <script src="/static/js/tutorial.js?v=20260316z"></script>
-    <script src="/static/js/chat.js?v=20260316f"></script>
+    <script src="/static/js/chat.js?v=20260316i"></script>
     <script>document.addEventListener("DOMContentLoaded",function(){Chat.init();Tutorial.init()});</script>
 
     <!-- Map Fullscreen Overlay -->

src/static/js/components.js

@@ -592,7 +592,7 @@ const UI = {
             if (firstFeed.language) lines.push('Sprache: ' + firstFeed.language);
             if (firstFeed.bias) lines.push('Ausrichtung: ' + firstFeed.bias);
             const tooltipText = this.escape(lines.join('\n'));
-            infoButtonHtml = ` <span class="info-icon tooltip-below" data-tooltip="${tooltipText}">i</span>`;
+            infoButtonHtml = ` <span class="info-icon tooltip-below" data-tooltip="${tooltipText}"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span>`;
         }
 
         return `<div class="source-group">