From 44997d511b820a4463b97d24cd4cf7828a7b176c Mon Sep 17 00:00:00 2001
From: claude-dev <claude-dev@aegis-sight.de>
Date: Thu, 5 Mar 2026 16:13:11 +0100
Subject: [PATCH] i18n: Complete DE/EN language switcher integration

- Add LangManager with 270+ translation keys, anti-flicker lang detection
- Replace all hardcoded German strings in app.js, components.js, dashboard.html, index.html
- Dynamic getter properties for fact-check labels, category badges
- Language-aware map tiles (DE/EN OSM servers), CSP updated for tile.openstreetmap.org
- Lang switcher in header bar and login page
- Locale-aware date formatting, translateApiError for backend messages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/main.py                 |   2 +-
 src/static/css/style.css    |  29 +++
 src/static/dashboard.html   | 193 ++++++++++---------
 src/static/index.html       |  38 ++--
 src/static/js/app.js        | 372 +++++++++++++++++++-----------------
 src/static/js/components.js | 135 ++++++-------
 src/static/js/lang.js       |  15 ++
 7 files changed, 422 insertions(+), 362 deletions(-)
diff --git a/src/main.py b/src/main.py
index ead984c..c348a4a 100644
--- a/src/main.py
+++ b/src/main.py
@@ -235,7 +235,7 @@ class SecurityHeadersMiddleware(BaseHTTPMiddleware):
             "script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net; "
             "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net; "
             "font-src 'self' https://fonts.gstatic.com; "
-            "img-src 'self' data: https://tile.openstreetmap.de; "
+            "img-src 'self' data: https://tile.openstreetmap.de https://tile.openstreetmap.org; "
             "connect-src 'self' wss: ws:; "
             "frame-ancestors 'none'"
         )
diff --git a/src/static/css/style.css b/src/static/css/style.css
index e8918c1..fa8e12f 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -3584,6 +3584,35 @@ a:hover {
     transition: background 0.2s, border-color 0.2s;
 }
 
+/* === Language Switcher === */
+.lang-switcher {
+    display: flex;
+    gap: 2px;
+    background: var(--bg-secondary);
+    border-radius: var(--radius);
+    padding: 2px;
+}
+.lang-btn {
+    padding: 4px 8px;
+    border-radius: var(--radius);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    background: transparent;
+    color: var(--text-secondary);
+    border: none;
+    transition: background 0.15s, color 0.15s;
+}
+.lang-btn:hover {
+    color: var(--text-primary);
+    background: var(--bg-hover);
+}
+.lang-btn.active {
+    background: var(--accent);
+    color: var(--bg-primary);
+}
+
 /* === Light Theme Sonderregeln === */
 [data-theme="light"] .sidebar {
     border-right: 1px solid var(--border);
diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index 41b3100..d0e47e8 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script>(function(){var t=localStorage.getItem('osint_theme');if(t)document.documentElement.setAttribute('data-theme',t);try{var a=JSON.parse(localStorage.getItem('osint_a11y')||'{}');Object.keys(a).forEach(function(k){if(a[k])document.documentElement.setAttribute('data-a11y-'+k,'true');});}catch(e){}})()</script>
+    <script>(function(){var t=localStorage.getItem('osint_theme');if(t)document.documentElement.setAttribute('data-theme',t);try{var a=JSON.parse(localStorage.getItem('osint_a11y')||'{}');Object.keys(a).forEach(function(k){if(a[k])document.documentElement.setAttribute('data-a11y-'+k,'true');});}catch(e){}var l=localStorage.getItem('osint_lang')||'de';document.documentElement.lang=l;})()</script>
     <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
     <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
@@ -19,7 +19,7 @@
     <link rel="stylesheet" href="/static/css/style.css?v=20260304h">
 </head>
 <body>
-    <a href="#main-content" class="skip-link">Zum Hauptinhalt springen</a>
+    <a href="#main-content" class="skip-link" data-i18n="header.skip_link">Zum Hauptinhalt springen</a>
     <div class="dashboard">
         <!-- Header -->
         <header class="header">
@@ -28,7 +28,11 @@
                 <h1 class="sr-only">AegisSight Monitor Dashboard</h1>
             </div>
             <div class="header-right">
-                <button class="btn btn-secondary btn-small theme-toggle-btn" id="theme-toggle" onclick="ThemeManager.toggle()" title="Theme wechseln" aria-label="Theme wechseln">&#9788;</button>
+                <div class="lang-switcher" id="lang-switcher">
+                    <button class="lang-btn" data-lang="de" onclick="LangManager.setLang('de')" title="Deutsch">DE</button>
+                    <button class="lang-btn" data-lang="en" onclick="LangManager.setLang('en')" title="English">EN</button>
+                </div>
+                <button class="btn btn-secondary btn-small theme-toggle-btn" id="theme-toggle" onclick="ThemeManager.toggle()" data-i18n-title="header.theme_toggle" title="Theme wechseln" aria-label="Theme wechseln">&#9788;</button>
                 <div class="header-user-info">
                     <div class="header-user-top">
                         <span class="header-user" id="header-user"></span>
@@ -37,25 +41,25 @@
                     <span class="header-org-name" id="header-org-name"></span>
                 </div>
                 <div class="header-license-warning" id="header-license-warning"></div>
-                <button class="btn btn-secondary btn-small" id="logout-btn">Abmelden</button>
+                <button class="btn btn-secondary btn-small" id="logout-btn" data-i18n="header.logout">Abmelden</button>
             </div>
         </header>
 
         <!-- Sidebar -->
         <nav class="sidebar" aria-label="Seitenleiste">
             <div class="sidebar-section">
-                <button class="btn btn-primary btn-full btn-small" id="new-incident-btn">+ Neue Lage / Recherche</button>
+                <button class="btn btn-primary btn-full btn-small" id="new-incident-btn" data-i18n="nav.new_incident">+ Neue Lage / Recherche</button>
             </div>
 
             <div class="sidebar-filter">
-                <button class="sidebar-filter-btn active" data-filter="all" onclick="App.setSidebarFilter('all')" aria-pressed="true">Alle</button>
-                <button class="sidebar-filter-btn" data-filter="mine" onclick="App.setSidebarFilter('mine')" aria-pressed="false">Eigene</button>
+                <button class="sidebar-filter-btn active" data-filter="all" onclick="App.setSidebarFilter('all')" aria-pressed="true" data-i18n="nav.filter_all">Alle</button>
+                <button class="sidebar-filter-btn" data-filter="mine" onclick="App.setSidebarFilter('mine')" aria-pressed="false" data-i18n="nav.filter_mine">Eigene</button>
             </div>
 
             <div class="sidebar-section">
                 <h2 class="sidebar-section-title collapsible" onclick="App.toggleSidebarSection('active-incidents')" role="button" tabindex="0" aria-expanded="true">
                     <span class="sidebar-chevron" id="chevron-active-incidents" aria-hidden="true">&#9662;</span>
-                    Aktive Lagen
+                    <span data-i18n="nav.active_incidents">Aktive Lagen</span>
                     <span class="sidebar-section-count" id="count-active-incidents"></span>
                 </h2>
                 <div id="active-incidents" aria-live="polite"></div>
@@ -64,7 +68,7 @@
             <div class="sidebar-section">
                 <h2 class="sidebar-section-title collapsible" onclick="App.toggleSidebarSection('active-research')" role="button" tabindex="0" aria-expanded="true">
                     <span class="sidebar-chevron" id="chevron-active-research" aria-hidden="true">&#9662;</span>
-                    Aktive Recherchen
+                    <span data-i18n="nav.active_research">Aktive Recherchen</span>
                     <span class="sidebar-section-count" id="count-active-research"></span>
                 </h2>
                 <div id="active-research" aria-live="polite"></div>
@@ -73,14 +77,14 @@
             <div class="sidebar-section">
                 <h2 class="sidebar-section-title collapsible" onclick="App.toggleSidebarSection('archived-incidents')" role="button" tabindex="0" aria-expanded="false">
                     <span class="sidebar-chevron" id="chevron-archived-incidents" aria-hidden="true">&#9662;</span>
-                    Archiv
+                    <span data-i18n="nav.archive">Archiv</span>
                     <span class="sidebar-section-count" id="count-archived-incidents"></span>
                 </h2>
                 <div id="archived-incidents" aria-live="polite" style="display:none;"></div>
             </div>
             <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="App.openSourceManagement()" data-i18n="nav.manage_sources">Quellen verwalten</button>
+                <button class="btn btn-secondary btn-full btn-small sidebar-feedback-btn" onclick="App.openFeedback()" data-i18n="nav.send_feedback">Feedback senden</button>
                 <div class="sidebar-stats-mini">
                     <span id="stat-sources-count">0 Quellen</span> &middot; <span id="stat-articles-count">0 Artikel</span>
                 </div>
@@ -91,8 +95,8 @@
         <main class="main-content" id="main-content">
             <div class="empty-state" id="empty-state">
                 <div class="empty-state-icon">&#9737;</div>
-                <div class="empty-state-title">Kein Vorfall ausgewählt</div>
-                <div class="empty-state-text">Erstelle eine neue Lage oder wähle einen bestehenden Vorfall aus der Seitenleiste.</div>
+                <div class="empty-state-title" data-i18n="empty.no_incident">Kein Vorfall ausgewählt</div>
+                <div class="empty-state-text" data-i18n="empty.no_incident_text">Erstelle eine neue Lage oder wähle einen bestehenden Vorfall aus der Seitenleiste.</div>
             </div>
 
             <!-- Lagebild (hidden by default) -->
@@ -108,22 +112,22 @@
                             <h2 class="incident-header-title" id="incident-title"></h2>
                         </div>
                         <div class="incident-header-actions">
-                            <button class="btn btn-primary btn-small" id="refresh-btn">Aktualisieren</button>
-                            <button class="btn btn-secondary btn-small" id="edit-incident-btn">Bearbeiten</button>
+                            <button class="btn btn-primary btn-small" id="refresh-btn" data-i18n="btn.refresh">Aktualisieren</button>
+                            <button class="btn btn-secondary btn-small" id="edit-incident-btn" data-i18n="btn.edit">Bearbeiten</button>
                             <div class="export-dropdown" id="export-dropdown">
-                                <button class="btn btn-secondary btn-small" onclick="App.toggleExportDropdown(event)" aria-expanded="false" aria-haspopup="true">Exportieren &#9662;</button>
+                                <button class="btn btn-secondary btn-small" onclick="App.toggleExportDropdown(event)" aria-expanded="false" aria-haspopup="true" data-i18n="btn.export">Exportieren &#9662;</button>
                                 <div class="export-dropdown-menu" id="export-dropdown-menu" role="menu">
-                                    <button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('md','report')">Lagebericht (Markdown)</button>
-                                    <button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('json','report')">Lagebericht (JSON)</button>
+                                    <button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('md','report')" data-i18n="export.report_md">Lagebericht (Markdown)</button>
+                                    <button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('json','report')" data-i18n="export.report_json">Lagebericht (JSON)</button>
                                     <hr class="export-dropdown-divider" role="separator">
-                                    <button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('md','full')">Vollexport (Markdown)</button>
-                                    <button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('json','full')">Vollexport (JSON)</button>
+                                    <button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('md','full')" data-i18n="export.full_md">Vollexport (Markdown)</button>
+                                    <button class="export-dropdown-item" role="menuitem" onclick="App.exportIncident('json','full')" data-i18n="export.full_json">Vollexport (JSON)</button>
                                     <hr class="export-dropdown-divider" role="separator">
-                                    <button class="export-dropdown-item" role="menuitem" onclick="App.printIncident()">Drucken / PDF</button>
+                                    <button class="export-dropdown-item" role="menuitem" onclick="App.printIncident()" data-i18n="export.print">Drucken / PDF</button>
                                 </div>
                             </div>
-                            <button class="btn btn-secondary btn-small" id="archive-incident-btn">Archivieren</button>
-                            <button class="btn btn-danger btn-small" id="delete-incident-btn">Löschen</button>
+                            <button class="btn btn-secondary btn-small" id="archive-incident-btn" data-i18n="btn.archive">Archivieren</button>
+                            <button class="btn btn-danger btn-small" id="delete-incident-btn" data-i18n="btn.delete">Löschen</button>
                         </div>
                     </div>
                     <div class="incident-header-row2">
@@ -154,37 +158,37 @@
                     <div class="progress-steps">
                         <div class="progress-step" id="step-researching">
                             <div class="progress-step-dot"></div>
-                            <span>Recherche</span>
+                            <span data-i18n="progress.step_research">Recherche</span>
                         </div>
                         <div class="progress-step" id="step-analyzing">
                             <div class="progress-step-dot"></div>
-                            <span>Analyse</span>
+                            <span data-i18n="progress.step_analysis">Analyse</span>
                         </div>
                         <div class="progress-step" id="step-factchecking">
                             <div class="progress-step-dot"></div>
-                            <span>Faktencheck</span>
+                            <span data-i18n="progress.step_factcheck">Faktencheck</span>
                         </div>
                     </div>
                     <div class="progress-track">
                         <div class="progress-fill" id="progress-fill"></div>
                     </div>
                     <div class="progress-label-container">
-                        <span id="progress-label" class="progress-label">Warte auf Start...</span>
+                        <span id="progress-label" class="progress-label" data-i18n="progress.wait">Warte auf Start...</span>
                         <span id="progress-timer" class="progress-timer"></span>
                     </div>
-                    <button id="progress-cancel-btn" class="progress-cancel-btn" onclick="App.cancelRefresh()">Abbrechen</button>
+                    <button id="progress-cancel-btn" class="progress-cancel-btn" onclick="App.cancelRefresh()" data-i18n="btn.cancel">Abbrechen</button>
                 </div>
 
                 <!-- Layout-Toolbar -->
                 <div class="layout-toolbar" id="layout-toolbar" style="display:none;">
                     <div class="layout-toggles">
-                        <button class="layout-toggle-btn active" data-tile="lagebild" onclick="LayoutManager.toggleTile('lagebild')" aria-pressed="true">Lagebild</button>
-                        <button class="layout-toggle-btn active" data-tile="faktencheck" onclick="LayoutManager.toggleTile('faktencheck')" aria-pressed="true">Faktencheck</button>
-                        <button class="layout-toggle-btn active" data-tile="quellen" onclick="LayoutManager.toggleTile('quellen')" aria-pressed="true">Quellen</button>
-                        <button class="layout-toggle-btn active" data-tile="timeline" onclick="LayoutManager.toggleTile('timeline')" aria-pressed="true">Timeline</button>
-                        <button class="layout-toggle-btn active" data-tile="karte" onclick="LayoutManager.toggleTile('karte')" aria-pressed="true">Karte</button>
+                        <button class="layout-toggle-btn active" data-tile="lagebild" onclick="LayoutManager.toggleTile('lagebild')" aria-pressed="true" data-i18n="tile.lagebild">Lagebild</button>
+                        <button class="layout-toggle-btn active" data-tile="faktencheck" onclick="LayoutManager.toggleTile('faktencheck')" aria-pressed="true" data-i18n="tile.faktencheck">Faktencheck</button>
+                        <button class="layout-toggle-btn active" data-tile="quellen" onclick="LayoutManager.toggleTile('quellen')" aria-pressed="true" data-i18n="tile.quellen">Quellen</button>
+                        <button class="layout-toggle-btn active" data-tile="timeline" onclick="LayoutManager.toggleTile('timeline')" aria-pressed="true" data-i18n="tile.timeline">Timeline</button>
+                        <button class="layout-toggle-btn active" data-tile="karte" onclick="LayoutManager.toggleTile('karte')" aria-pressed="true" data-i18n="tile.karte">Karte</button>
                     </div>
-                    <button class="btn btn-secondary btn-small" onclick="LayoutManager.reset()">Layout zurücksetzen</button>
+                    <button class="btn btn-secondary btn-small" onclick="LayoutManager.reset()" data-i18n="btn.layout_reset">Layout zurücksetzen</button>
                 </div>
 
                 <!-- gridstack Dashboard-Grid -->
@@ -193,7 +197,7 @@
                         <div class="grid-stack-item-content">
                             <div class="card incident-analysis-summary">
                                 <div class="card-header">
-                                    <div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Lagebild', 'summary-content')">Lagebild</div>
+                                    <div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal(LangManager.t('card.situation_report'), 'summary-content')" data-i18n="card.situation_report">Lagebild</div>
                                     <span class="lagebild-timestamp" id="lagebild-timestamp"></span>
                                 </div>
                                 <div id="summary-content">
@@ -207,12 +211,12 @@
                         <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</div>
+                                    <div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal(LangManager.t('card.factcheck'), 'factcheck-list')" data-i18n="card.factcheck">Faktencheck</div>
                                     <div class="fc-filter-bar" id="fc-filters"></div>
                                 </div>
                                 <div class="factcheck-list" id="factcheck-list">
                                     <div class="empty-state" style="padding:20px;">
-                                        <div class="empty-state-text">Noch keine Fakten geprüft</div>
+                                        <div class="empty-state-text" data-i18n="empty.no_factchecks">Noch keine Fakten geprüft</div>
                                     </div>
                                 </div>
                             </div>
@@ -224,8 +228,8 @@
                             <div class="card source-overview-card">
                                 <div class="card-header source-overview-header-toggle" onclick="App.toggleSourceOverview()" role="button" tabindex="0" aria-expanded="false">
                                     <span class="source-overview-chevron" id="source-overview-chevron" title="Aufklappen" aria-hidden="true">&#9656;</span>
-                                    <div class="card-title clickable">Quellenübersicht</div>
-                                    <button class="btn btn-secondary btn-small source-detail-btn" onclick="event.stopPropagation(); openContentModal('Quellenübersicht', 'source-overview-content')">Detailansicht</button>
+                                    <div class="card-title clickable" data-i18n="card.sources_overview">Quellenübersicht</div>
+                                    <button class="btn btn-secondary btn-small source-detail-btn" onclick="event.stopPropagation(); openContentModal(LangManager.t('card.sources_overview'), 'source-overview-content')" data-i18n="card.detail_view">Detailansicht</button>
                                 </div>
                                 <div id="source-overview-content" style="display:none;"></div>
                             </div>
@@ -236,25 +240,25 @@
                         <div class="grid-stack-item-content">
                             <div class="card timeline-card">
                                 <div class="card-header">
-                                    <div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal('Ereignis-Timeline', 'timeline')">Ereignis-Timeline</div>
+                                    <div class="card-title clickable" role="button" tabindex="0" onclick="openContentModal(LangManager.t('card.timeline'), 'timeline')" data-i18n="card.timeline">Ereignis-Timeline</div>
                                     <div class="ht-controls">
                                         <div class="ht-filter-group">
-                                            <button class="ht-filter-btn active" data-filter="all" onclick="App.setTimelineFilter('all')" aria-pressed="true">Alle</button>
-                                            <button class="ht-filter-btn" data-filter="articles" onclick="App.setTimelineFilter('articles')" aria-pressed="false">Meldungen</button>
-                                            <button class="ht-filter-btn" data-filter="snapshots" onclick="App.setTimelineFilter('snapshots')" aria-pressed="false">Lageberichte</button>
+                                            <button class="ht-filter-btn active" data-filter="all" onclick="App.setTimelineFilter('all')" aria-pressed="true" data-i18n="timeline.all">Alle</button>
+                                            <button class="ht-filter-btn" data-filter="articles" onclick="App.setTimelineFilter('articles')" aria-pressed="false" data-i18n="timeline.articles">Meldungen</button>
+                                            <button class="ht-filter-btn" data-filter="snapshots" onclick="App.setTimelineFilter('snapshots')" aria-pressed="false" data-i18n="timeline.snapshots">Lageberichte</button>
                                         </div>
                                         <span class="ht-count" id="article-count"></span>
                                         <div class="ht-range-group">
-                                            <button class="ht-range-btn" data-range="24h" onclick="App.setTimelineRange('24h')" aria-pressed="false">24h</button>
-                                            <button class="ht-range-btn" data-range="7d" onclick="App.setTimelineRange('7d')" aria-pressed="false">7T</button>
-                                            <button class="ht-range-btn active" data-range="all" onclick="App.setTimelineRange('all')" aria-pressed="true">Alles</button>
+                                            <button class="ht-range-btn" data-range="24h" onclick="App.setTimelineRange('24h')" aria-pressed="false" data-i18n="timeline.range_24h">24h</button>
+                                            <button class="ht-range-btn" data-range="7d" onclick="App.setTimelineRange('7d')" aria-pressed="false" data-i18n="timeline.range_7d">7T</button>
+                                            <button class="ht-range-btn active" data-range="all" onclick="App.setTimelineRange('all')" aria-pressed="true" data-i18n="timeline.range_all">Alles</button>
                                         </div>
                                         <label for="timeline-search" class="sr-only">Timeline durchsuchen</label>
-                                        <input type="text" id="timeline-search" class="timeline-filter-input" placeholder="Suche..." oninput="App.debouncedRerenderTimeline()">
+                                        <input type="text" id="timeline-search" class="timeline-filter-input" placeholder="Suche..." data-i18n-placeholder="timeline.search_placeholder" oninput="App.debouncedRerenderTimeline()">
                                     </div>
                                 </div>
                                 <div id="timeline" class="ht-timeline-container">
-                                    <div class="ht-empty">Noch keine Meldungen</div>
+                                    <div class="ht-empty" data-i18n="empty.no_articles">Noch keine Meldungen</div>
                                 </div>
                             </div>
                         </div>
@@ -264,12 +268,12 @@
                         <div class="grid-stack-item-content">
                             <div class="card map-card">
                                 <div class="card-header">
-                                    <div class="card-title">Geografische Verteilung</div>
+                                    <div class="card-title" data-i18n="card.map">Geografische Verteilung</div>
                                     <span class="map-stats" id="map-stats"></span>
-                                    <button class="btn btn-secondary btn-small" id="geoparse-btn" onclick="App.triggerGeoparse()" title="Orte aus Artikeln erkennen">Orte erkennen</button>
+                                    <button class="btn btn-secondary btn-small" id="geoparse-btn" onclick="App.triggerGeoparse()" title="Orte aus Artikeln erkennen" data-i18n="btn.detect_locations">Orte erkennen</button>
                                 </div>
                                 <div class="map-container" id="map-container">
-                                    <div class="map-empty" id="map-empty">Keine Orte erkannt</div>
+                                    <div class="map-empty" id="map-empty" data-i18n="empty.no_locations">Keine Orte erkannt</div>
                                 </div>
                             </div>
                         </div>
@@ -286,103 +290,103 @@
     <div class="modal-overlay" id="modal-new" role="dialog" aria-modal="true" aria-labelledby="modal-new-title">
         <div class="modal">
             <div class="modal-header">
-                <div class="modal-title" id="modal-new-title">Neue Lage anlegen</div>
+                <div class="modal-title" id="modal-new-title" data-i18n="modal.new_incident">Neue Lage anlegen</div>
                 <button class="modal-close" onclick="closeModal('modal-new')" aria-label="Schließen">&times;</button>
             </div>
             <form id="new-incident-form">
                 <div class="modal-body">
                     <div class="form-group">
-                        <label for="inc-title">Titel des Vorfalls</label>
-                        <input type="text" id="inc-title" required aria-required="true" placeholder="z.B. Explosion in Madrid">
+                        <label for="inc-title" data-i18n="form.incident_title">Titel des Vorfalls</label>
+                        <input type="text" id="inc-title" required aria-required="true" placeholder="z.B. Explosion in Madrid" data-i18n-placeholder="form.incident_title_placeholder">
                     </div>
                     <div class="form-group">
-                        <label for="inc-description">Beschreibung / Kontext</label>
-                        <textarea id="inc-description" placeholder="Weitere Details zum Vorfall (optional)"></textarea>
+                        <label for="inc-description" data-i18n="form.description">Beschreibung / Kontext</label>
+                        <textarea id="inc-description" placeholder="Weitere Details zum Vorfall (optional)" data-i18n-placeholder="form.description_placeholder"></textarea>
                     </div>
                     <div class="form-group">
-                        <label for="inc-type">Art der Lage</label>
+                        <label for="inc-type" data-i18n="form.incident_type">Art der Lage</label>
                         <select id="inc-type" onchange="toggleTypeDefaults()">
-                            <option value="adhoc">Ad-hoc Lage (Breaking News)</option>
-                            <option value="research">Recherche (Hintergrund)</option>
+                            <option value="adhoc" data-i18n="form.type_adhoc">Ad-hoc Lage (Breaking News)</option>
+                            <option value="research" data-i18n="form.type_research">Recherche (Hintergrund)</option>
                         </select>
-                        <div class="form-hint" id="type-hint">
+                        <div class="form-hint" id="type-hint" data-i18n="form.type_hint_adhoc">
                             RSS-Feeds + WebSearch, automatische Aktualisierung empfohlen
                         </div>
                     </div>
                     <div class="form-group">
-                        <label>Quellen</label>
+                        <label data-i18n="form.sources">Quellen</label>
                         <div class="toggle-group">
                             <label class="toggle-label">
                                 <input type="checkbox" id="inc-international" checked>
                                 <span class="toggle-switch"></span>
-                                <span class="toggle-text">Internationale Quellen einbeziehen</span>
+                                <span class="toggle-text" data-i18n="form.international_sources">Internationale Quellen einbeziehen</span>
                             </label>
-                            <div class="form-hint" id="sources-hint">DE + internationale Feeds (Reuters, BBC, Al Jazeera etc.)</div>
+                            <div class="form-hint" id="sources-hint" data-i18n="form.sources_hint_intl">DE + internationale Feeds (Reuters, BBC, Al Jazeera etc.)</div>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label>Sichtbarkeit</label>
+                        <label data-i18n="form.visibility">Sichtbarkeit</label>
                         <div class="toggle-group">
                             <label class="toggle-label">
                                 <input type="checkbox" id="inc-visibility" checked>
                                 <span class="toggle-switch"></span>
-                                <span class="toggle-text" id="visibility-text">Öffentlich — für alle Nutzer sichtbar</span>
+                                <span class="toggle-text" id="visibility-text" data-i18n="form.visibility_public">Öffentlich — für alle Nutzer sichtbar</span>
                             </label>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="inc-refresh-mode">Aktualisierung</label>
+                        <label for="inc-refresh-mode" data-i18n="form.refresh_mode">Aktualisierung</label>
                         <select id="inc-refresh-mode" onchange="toggleRefreshInterval()">
-                            <option value="manual">Manuell</option>
-                            <option value="auto">Automatisch</option>
+                            <option value="manual" data-i18n="form.refresh_manual">Manuell</option>
+                            <option value="auto" data-i18n="form.refresh_auto">Automatisch</option>
                         </select>
                     </div>
                     <div class="form-group conditional-field" id="refresh-interval-field">
-                        <label for="inc-refresh-value">Intervall</label>
+                        <label for="inc-refresh-value" data-i18n="form.interval">Intervall</label>
                         <div class="interval-input-group">
                             <input type="number" id="inc-refresh-value" min="10" value="15">
                             <select id="inc-refresh-unit" onchange="updateIntervalMin()">
-                                <option value="1" selected>Minuten</option>
-                                <option value="60">Stunden</option>
-                                <option value="1440">Tage</option>
-                                <option value="10080">Wochen</option>
+                                <option value="1" selected data-i18n="form.unit_minutes">Minuten</option>
+                                <option value="60" data-i18n="form.unit_hours">Stunden</option>
+                                <option value="1440" data-i18n="form.unit_days">Tage</option>
+                                <option value="10080" data-i18n="form.unit_weeks">Wochen</option>
                             </select>
                         </div>
                     </div>
                     <div class="form-group">
-                        <label for="inc-retention">Aufbewahrung (Tage)</label>
+                        <label for="inc-retention" data-i18n="form.retention">Aufbewahrung (Tage)</label>
                         <input type="number" id="inc-retention" min="0" max="999" value="30" placeholder="0 = Unbegrenzt">
-                        <div class="form-hint">0 = Unbegrenzt, max. 999 Tage</div>
+                        <div class="form-hint" data-i18n="form.retention_hint">0 = Unbegrenzt, max. 999 Tage</div>
                     </div>
                     <div class="form-group" style="margin-top: 8px;">
-                        <label>E-Mail-Benachrichtigungen</label>
-                        <div class="form-hint" style="margin-bottom: 8px;">Per E-Mail benachrichtigen bei:</div>
+                        <label data-i18n="form.email_notifications">E-Mail-Benachrichtigungen</label>
+                        <div class="form-hint" style="margin-bottom: 8px;" data-i18n="form.email_notify_hint">Per E-Mail benachrichtigen bei:</div>
                         <div class="toggle-group">
                             <label class="toggle-label">
                                 <input type="checkbox" id="inc-notify-summary">
                                 <span class="toggle-switch"></span>
-                                <span class="toggle-text">Neues Lagebild</span>
+                                <span class="toggle-text" data-i18n="form.notify_summary">Neues Lagebild</span>
                             </label>
                         </div>
                         <div class="toggle-group" style="margin-top: 8px;">
                             <label class="toggle-label">
                                 <input type="checkbox" id="inc-notify-new-articles">
                                 <span class="toggle-switch"></span>
-                                <span class="toggle-text">Neue Artikel</span>
+                                <span class="toggle-text" data-i18n="form.notify_articles">Neue Artikel</span>
                             </label>
                         </div>
                         <div class="toggle-group" style="margin-top: 8px;">
                             <label class="toggle-label">
                                 <input type="checkbox" id="inc-notify-status-change">
                                 <span class="toggle-switch"></span>
-                                <span class="toggle-text">Statusänderung Faktencheck</span>
+                                <span class="toggle-text" data-i18n="form.notify_status">Statusänderung Faktencheck</span>
                             </label>
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" onclick="closeModal('modal-new')">Abbrechen</button>
-                    <button type="submit" class="btn btn-primary" id="modal-new-submit">Lage anlegen</button>
+                    <button type="button" class="btn btn-secondary" onclick="closeModal('modal-new')" data-i18n="btn.cancel">Abbrechen</button>
+                    <button type="submit" class="btn btn-primary" id="modal-new-submit" data-i18n="modal.create_incident">Lage anlegen</button>
                 </div>
             </form>
         </div>
@@ -392,7 +396,7 @@
     <div class="modal-overlay" id="modal-sources" role="dialog" aria-modal="true" aria-labelledby="modal-sources-title">
         <div class="modal modal-wide">
             <div class="modal-header">
-                <div class="modal-title" id="modal-sources-title">Quellenverwaltung</div>
+                <div class="modal-title" id="modal-sources-title" data-i18n="modal.source_management">Quellenverwaltung</div>
                 <button class="modal-close" onclick="closeModal('modal-sources')" aria-label="Schließen">&times;</button>
             </div>
             <div class="modal-body sources-modal-body">
@@ -528,29 +532,29 @@
     <div class="modal-overlay" id="modal-feedback" role="dialog" aria-modal="true" aria-labelledby="modal-feedback-title">
         <div class="modal">
             <div class="modal-header">
-                <div class="modal-title" id="modal-feedback-title">Feedback senden</div>
+                <div class="modal-title" id="modal-feedback-title" data-i18n="modal.feedback">Feedback senden</div>
                 <button class="modal-close" onclick="closeModal('modal-feedback')" aria-label="Schließen">&times;</button>
             </div>
             <form id="feedback-form">
                 <div class="modal-body">
                     <div class="form-group">
-                        <label for="fb-category">Kategorie</label>
+                        <label for="fb-category" data-i18n="form.feedback_category">Kategorie</label>
                         <select id="fb-category">
-                            <option value="bug">Fehlerbericht</option>
-                            <option value="feature">Feature-Wunsch</option>
-                            <option value="question">Frage</option>
-                            <option value="other">Sonstiges</option>
+                            <option value="bug" data-i18n="form.fb_bug">Fehlerbericht</option>
+                            <option value="feature" data-i18n="form.fb_feature">Feature-Wunsch</option>
+                            <option value="question" data-i18n="form.fb_question">Frage</option>
+                            <option value="other" data-i18n="form.fb_other">Sonstiges</option>
                         </select>
                     </div>
                     <div class="form-group">
-                        <label for="fb-message">Nachricht</label>
-                        <textarea id="fb-message" required aria-required="true" minlength="10" maxlength="5000" rows="6" placeholder="Beschreibe dein Anliegen (mind. 10 Zeichen)..."></textarea>
+                        <label for="fb-message" data-i18n="form.fb_message">Nachricht</label>
+                        <textarea id="fb-message" required aria-required="true" minlength="10" maxlength="5000" rows="6" placeholder="Beschreibe dein Anliegen (mind. 10 Zeichen)..." data-i18n-placeholder="form.fb_placeholder"></textarea>
                         <div class="form-hint"><span id="fb-char-count">0</span> / 5.000 Zeichen</div>
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" onclick="closeModal('modal-feedback')">Abbrechen</button>
-                    <button type="submit" class="btn btn-primary" id="fb-submit-btn">Absenden</button>
+                    <button type="button" class="btn btn-secondary" onclick="closeModal('modal-feedback')" data-i18n="btn.cancel">Abbrechen</button>
+                    <button type="submit" class="btn btn-primary" id="fb-submit-btn" data-i18n="btn.submit_feedback">Absenden</button>
                 </div>
             </form>
         </div>
@@ -562,6 +566,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/lang.js?v=20260305a"></script>
     <script src="/static/js/api.js?v=20260304h"></script>
     <script src="/static/js/ws.js?v=20260304h"></script>
     <script src="/static/js/components.js?v=20260304h"></script>
diff --git a/src/static/index.html b/src/static/index.html
index 95564e2..9c624d0 100644
--- a/src/static/index.html
+++ b/src/static/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script>(function(){var t=localStorage.getItem('osint_theme');if(t)document.documentElement.setAttribute('data-theme',t);try{var a=JSON.parse(localStorage.getItem('osint_a11y')||'{}');Object.keys(a).forEach(function(k){if(a[k])document.documentElement.setAttribute('data-a11y-'+k,'true');});}catch(e){}})()</script>
+    <script>(function(){var t=localStorage.getItem('osint_theme');if(t)document.documentElement.setAttribute('data-theme',t);try{var a=JSON.parse(localStorage.getItem('osint_a11y')||'{}');Object.keys(a).forEach(function(k){if(a[k])document.documentElement.setAttribute('data-a11y-'+k,'true');});}catch(e){}var l=localStorage.getItem('osint_lang')||'de';document.documentElement.lang=l;})()</script>
     <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
     <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
@@ -12,15 +12,16 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/style.css?v=20260304a">
+    <link rel="stylesheet" href="/static/css/style.css?v=20260305a">
+    <script src="/static/js/lang.js?v=20260305a"></script>
 </head>
 <body>
-    <a href="#login-form" class="skip-link">Zum Anmeldeformular springen</a>
+    <a href="#login-form" class="skip-link" data-i18n="login.skip_link">Zum Anmeldeformular springen</a>
     <main class="login-container">
         <div class="login-box">
             <div class="login-logo">
                 <h1>Aegis<span style="color: var(--accent)">Sight</span></h1>
-                <div class="subtitle">Lagemonitor</div>
+                <div class="subtitle" data-i18n="login.subtitle">Lagemonitor</div>
             </div>
 
             <div id="login-error" class="login-error" role="alert" aria-live="assertive"></div>
@@ -29,29 +30,34 @@
             <!-- Schritt 1: E-Mail eingeben -->
             <form id="email-form">
                 <div class="form-group">
-                    <label for="email">E-Mail-Adresse</label>
-                    <input type="email" id="email" name="email" autocomplete="email" required aria-required="true" placeholder="name@organisation.de">
+                    <label for="email" data-i18n="login.email_label">E-Mail-Adresse</label>
+                    <input type="email" id="email" name="email" autocomplete="email" required aria-required="true" placeholder="name@organisation.de" data-i18n-placeholder="login.email_placeholder">
                 </div>
-                <button type="submit" class="btn btn-primary btn-full" id="email-btn">Anmelden</button>
+                <button type="submit" class="btn btn-primary btn-full" id="email-btn" data-i18n="login.submit">Anmelden</button>
             </form>
 
             <!-- Schritt 2: Code eingeben -->
             <form id="code-form" style="display:none;">
-                <p style="color: var(--text-secondary); margin: 0 0 16px 0; font-size: 14px;">
+                <p id="code-sent-text" style="color: var(--text-secondary); margin: 0 0 16px 0; font-size: 14px;">
                     Ein 6-stelliger Code wurde an <strong id="sent-email"></strong> gesendet.
                 </p>
                 <div class="form-group">
-                    <label for="code">Code eingeben</label>
+                    <label for="code" data-i18n="login.code_label">Code eingeben</label>
                     <input type="text" id="code" name="code" autocomplete="one-time-code" required aria-required="true"
                            placeholder="000000" maxlength="6" pattern="[0-9]{6}"
                            style="text-align:center; font-size:24px; letter-spacing:8px; font-family:monospace;">
                 </div>
-                <button type="submit" class="btn btn-primary btn-full" id="code-btn">Verifizieren</button>
-                <button type="button" class="btn btn-secondary btn-full" id="back-btn" style="margin-top:8px;">Zurück</button>
+                <button type="submit" class="btn btn-primary btn-full" id="code-btn" data-i18n="login.verify">Verifizieren</button>
+                <button type="button" class="btn btn-secondary btn-full" id="back-btn" style="margin-top:8px;" data-i18n="login.back">Zurück</button>
             </form>
 
             <div style="text-align:center;margin-top:16px;">
-                <button class="btn btn-secondary btn-small theme-toggle-btn" id="theme-toggle" onclick="ThemeManager.toggle()" title="Theme wechseln" aria-label="Theme wechseln">&#9788;</button>
+                <div class="lang-switcher" id="lang-switcher" style="display:inline-flex;margin-bottom:8px;">
+                    <button class="lang-btn" data-lang="de" onclick="LangManager.setLang('de')" title="Deutsch">DE</button>
+                    <button class="lang-btn" data-lang="en" onclick="LangManager.setLang('en')" title="English">EN</button>
+                </div>
+                <br>
+                <button class="btn btn-secondary btn-small theme-toggle-btn" id="theme-toggle" onclick="ThemeManager.toggle()" data-i18n-title="header.theme_toggle" title="Theme wechseln" aria-label="Theme wechseln">&#9788;</button>
             </div>
         </div>
     </main>
@@ -132,7 +138,7 @@
             errorEl.style.display = 'none';
             successEl.style.display = 'none';
             btn.disabled = true;
-            btn.textContent = 'Wird gesendet...';
+            btn.textContent = LangManager.t('login.sending');
 
             currentEmail = document.getElementById('email').value.trim();
 
@@ -159,7 +165,7 @@
                 errorEl.style.display = 'block';
             } finally {
                 btn.disabled = false;
-                btn.textContent = 'Anmelden';
+                btn.textContent = LangManager.t('login.submit');
             }
         });
 
@@ -170,7 +176,7 @@
             const btn = document.getElementById('code-btn');
             errorEl.style.display = 'none';
             btn.disabled = true;
-            btn.textContent = 'Wird geprüft...';
+            btn.textContent = LangManager.t('login.verifying');
 
             try {
                 const response = await fetch('/api/auth/verify-code', {
@@ -196,7 +202,7 @@
                 errorEl.style.display = 'block';
             } finally {
                 btn.disabled = false;
-                btn.textContent = 'Verifizieren';
+                btn.textContent = LangManager.t('login.verify');
             }
         });
 
diff --git a/src/static/js/app.js b/src/static/js/app.js
index 53754dc..c3ecd18 100644
--- a/src/static/js/app.js
+++ b/src/static/js/app.js
@@ -52,34 +52,34 @@ const A11yManager = {
         const container = document.createElement('div');
         container.className = 'a11y-center';
         container.innerHTML = `
-            <button class="a11y-btn" id="a11y-btn" title="Barrierefreiheit"
-                    aria-label="Barrierefreiheit" aria-expanded="false" aria-haspopup="true">
+            <button class="a11y-btn" id="a11y-btn" title="${LangManager.t('a11y.title')}"
+                    aria-label="${LangManager.t('a11y.title')}" aria-expanded="false" aria-haspopup="true">
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                     <circle cx="12" cy="4" r="2"/>
                     <path d="M12 8c-3.3 0-6 .5-6 .5v2s2.7-.5 5-.5v3l-3 7h2.5l2.5-5.5 2.5 5.5h2.5l-3-7v-3c2.3 0 5 .5 5 .5v-2S15.3 8 12 8z"/>
                 </svg>
             </button>
-            <div class="a11y-panel" id="a11y-panel" role="group" aria-label="Barrierefreiheits-Einstellungen" style="display:none;">
-                <div class="a11y-panel-title">Barrierefreiheit</div>
+            <div class="a11y-panel" id="a11y-panel" role="group" aria-label="${LangManager.t('a11y.title')}" style="display:none;">
+                <div class="a11y-panel-title">${LangManager.t('a11y.title')}</div>
                 <label class="a11y-option">
                     <input type="checkbox" id="a11y-contrast">
                     <span class="toggle-switch"></span>
-                    <span>Hoher Kontrast</span>
+                    <span>${LangManager.t('a11y.contrast')}</span>
                 </label>
                 <label class="a11y-option">
                     <input type="checkbox" id="a11y-focus">
                     <span class="toggle-switch"></span>
-                    <span>Verstärkte Focus-Anzeige</span>
+                    <span>${LangManager.t('a11y.focus')}</span>
                 </label>
                 <label class="a11y-option">
                     <input type="checkbox" id="a11y-fontsize">
                     <span class="toggle-switch"></span>
-                    <span>Größere Schrift</span>
+                    <span>${LangManager.t('a11y.fontsize')}</span>
                 </label>
                 <label class="a11y-option">
                     <input type="checkbox" id="a11y-motion">
                     <span class="toggle-switch"></span>
-                    <span>Animationen aus</span>
+                    <span>${LangManager.t('a11y.motion')}</span>
                 </label>
             </div>
         `;
@@ -203,7 +203,7 @@ const NotificationCenter = {
         const container = document.createElement('div');
         container.className = 'notification-center';
         container.innerHTML = `
-            <button class="notification-bell" id="notification-bell" title="Benachrichtigungen" aria-label="Benachrichtigungen" aria-expanded="false" aria-haspopup="true">
+            <button class="notification-bell" id="notification-bell" title="${LangManager.t('notif.title')}" aria-label="${LangManager.t('notif.title')}" aria-expanded="false" aria-haspopup="true">
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                     <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
                     <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
@@ -212,11 +212,11 @@ const NotificationCenter = {
             </button>
             <div class="notification-panel" id="notification-panel" style="display:none;">
                 <div class="notification-panel-header">
-                    <span class="notification-panel-title">Benachrichtigungen</span>
-                    <button class="notification-mark-read" id="notification-mark-read">Alle gelesen</button>
+                    <span class="notification-panel-title">${LangManager.t('notif.title')}</span>
+                    <button class="notification-mark-read" id="notification-mark-read">${LangManager.t('notif.mark_read')}</button>
                 </div>
                 <div class="notification-panel-list" id="notification-panel-list">
-                    <div class="notification-empty">Keine Benachrichtigungen</div>
+                    <div class="notification-empty">${LangManager.t('notif.empty')}</div>
                 </div>
             </div>
         `;
@@ -311,7 +311,7 @@ const NotificationCenter = {
         if (!list) return;
 
         if (this._notifications.length === 0) {
-            list.innerHTML = '<div class="notification-empty">Keine Benachrichtigungen</div>';
+            list.innerHTML = `<div class="notification-empty">${LangManager.t('notif.empty')}</div>`;
             return;
         }
 
@@ -421,6 +421,8 @@ const App = {
     async init() {
         ThemeManager.init();
         A11yManager.init();
+        // Language change listener
+        document.addEventListener('langchange', () => this._onLangChange());
         // Auth prüfen
         const token = localStorage.getItem('osint_token');
         if (!token) {
@@ -447,8 +449,8 @@ const App = {
                     trial: 'Trial',
                     annual: 'Annual',
                     permanent: 'Permanent',
-                    expired: 'Abgelaufen',
-                    unknown: 'Unbekannt'
+                    expired: LangManager.t('header.license_expired'),
+                    unknown: LangManager.t('header.license_unknown')
                 };
                 const status = user.read_only ? 'expired' : (user.license_status || 'unknown');
                 const cssClass = user.read_only ? 'license-expired'
@@ -456,8 +458,8 @@ const App = {
                     : user.license_type === 'annual' ? 'license-annual'
                     : user.license_type === 'permanent' ? 'license-permanent'
                     : 'license-unknown';
-                const label = user.read_only ? 'Abgelaufen'
-                    : licenseLabels[user.license_type] || licenseLabels[user.license_status] || 'Unbekannt';
+                const label = user.read_only ? LangManager.t('header.license_expired')
+                    : licenseLabels[user.license_type] || licenseLabels[user.license_status] || LangManager.t('header.license_unknown');
                 badgeEl.textContent = label;
                 badgeEl.className = 'header-license-badge ' + cssClass;
             }
@@ -465,7 +467,7 @@ const App = {
             // Warnung bei abgelaufener Lizenz
             const warningEl = document.getElementById('header-license-warning');
             if (warningEl && user.read_only) {
-                warningEl.textContent = 'Lizenz abgelaufen – nur Lesezugriff';
+                warningEl.textContent = LangManager.t('header.license_warning');
                 warningEl.classList.add('visible');
             }
         } catch {
@@ -536,7 +538,7 @@ const App = {
             this.incidents = await API.listIncidents();
             this.renderSidebar();
         } catch (err) {
-            UI.showToast('Fehler beim Laden der Lagen: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.load_error', { error: err.message }), 'error');
         }
     },
 
@@ -563,8 +565,8 @@ const App = {
         const activeResearch = filtered.filter(i => i.status === 'active' && i.type === 'research');
         const archived = filtered.filter(i => i.status === 'archived');
 
-        const emptyLabelAdhoc = this._sidebarFilter === 'mine' ? 'Keine eigenen Ad-hoc-Lagen' : 'Keine Ad-hoc-Lagen';
-        const emptyLabelResearch = this._sidebarFilter === 'mine' ? 'Keine eigenen Recherchen' : 'Keine Recherchen';
+        const emptyLabelAdhoc = this._sidebarFilter === 'mine' ? LangManager.t('sidebar.no_own_adhoc') : LangManager.t('sidebar.no_adhoc');
+        const emptyLabelResearch = this._sidebarFilter === 'mine' ? LangManager.t('sidebar.no_own_research') : LangManager.t('sidebar.no_research');
 
         activeContainer.innerHTML = activeAdhoc.length
             ? activeAdhoc.map(i => UI.renderIncidentItem(i, i.id === this.currentIncidentId)).join('')
@@ -576,7 +578,7 @@ const App = {
 
         archivedContainer.innerHTML = archived.length
             ? archived.map(i => UI.renderIncidentItem(i, i.id === this.currentIncidentId)).join('')
-            : '<div style="padding:8px 12px;font-size:12px;color:var(--text-tertiary);">Kein Archiv</div>';
+            : `<div style="padding:8px 12px;font-size:12px;color:var(--text-tertiary);">${LangManager.t('sidebar.no_archive')}</div>`;
 
         // Zähler aktualisieren
         const countAdhoc = document.getElementById('count-active-incidents');
@@ -615,7 +617,7 @@ const App = {
         localStorage.setItem('selectedIncidentId', id);
         // SR-Announcement
         const inc = this.incidents.find(i => i.id === id);
-        if (inc) this._announceForSR('Lage ausgewählt: ' + inc.title);
+        if (inc) this._announceForSR(LangManager.t('sidebar.incident_selected', { title: inc.title }));
         this.renderSidebar();
 
         document.getElementById('empty-state').style.display = 'none';
@@ -648,7 +650,7 @@ const App = {
 
             this.renderIncidentDetail(incident, articles, factchecks, snapshots, locations);
         } catch (err) {
-            UI.showToast('Fehler beim Laden: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.detail_error', { error: err.message }), 'error');
         }
     },
 
@@ -660,7 +662,7 @@ const App = {
         // Typ-Badge
         const typeBadge = document.getElementById('incident-type-badge');
         typeBadge.className = 'incident-type-badge ' + (incident.type === 'research' ? 'type-research' : 'type-adhoc');
-        typeBadge.textContent = incident.type === 'research' ? 'Recherche' : 'Breaking';
+        typeBadge.textContent = incident.type === 'research' ? LangManager.t('status.research') : LangManager.t('status.breaking');
 
         // Archiv-Button Text
         this._updateArchiveButton(incident.status);
@@ -686,7 +688,7 @@ const App = {
                 incident.type
             );
         } else {
-            summaryText.innerHTML = '<span style="color:var(--text-disabled);">Noch keine Zusammenfassung. Klicke auf "Aktualisieren" um die Recherche zu starten.</span>';
+            summaryText.innerHTML = `<span style="color:var(--text-disabled);">${LangManager.t('empty.no_summary')}</span>`;
         }
 
         // Meta (im Header-Strip) — relative Zeitangabe mit vollem Datum als Tooltip
@@ -694,7 +696,7 @@ const App = {
         const metaUpdated = document.getElementById('meta-updated');
         if (updated) {
             const fullDate = `${updated.toLocaleDateString('de-DE')} ${updated.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })}`;
-            metaUpdated.textContent = `Stand: ${App._timeAgo(updated)}`;
+            metaUpdated.textContent = LangManager.t('time.stand', { time: App._timeAgo(updated) });
             metaUpdated.title = fullDate;
         } else {
             metaUpdated.textContent = '';
@@ -705,20 +707,20 @@ const App = {
         const lagebildTs = document.getElementById('lagebild-timestamp');
         if (lagebildTs) {
             lagebildTs.textContent = updated
-                ? `Stand: ${updated.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })} ${updated.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' })} Uhr`
+                ? LangManager.t('time.stand', { time: `${updated.toLocaleDateString(LangManager.lang === 'de' ? 'de-DE' : 'en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' })} ${updated.toLocaleTimeString(LangManager.lang === 'de' ? 'de-DE' : 'en-GB', { hour: '2-digit', minute: '2-digit' })}${LangManager.lang === 'de' ? ' Uhr' : ''}` })
                 : '';
         }
 
         document.getElementById('meta-refresh-mode').textContent = incident.refresh_mode === 'auto'
-            ? `Auto alle ${App._formatInterval(incident.refresh_interval)}`
-            : 'Manuell';
+            ? LangManager.t('status.auto_interval', { interval: App._formatInterval(incident.refresh_interval) })
+            : LangManager.t('status.manual');
 
         // International-Badge
         const intlBadge = document.getElementById('intl-badge');
         if (intlBadge) {
             const isIntl = incident.international_sources !== false && incident.international_sources !== 0;
             intlBadge.className = 'intl-badge ' + (isIntl ? 'intl-yes' : 'intl-no');
-            intlBadge.textContent = isIntl ? 'International' : 'Nur DE';
+            intlBadge.textContent = isIntl ? LangManager.t('status.international') : LangManager.t('status.de_only');
         }
 
         // Faktencheck
@@ -729,7 +731,7 @@ const App = {
             factcheckList.innerHTML = factchecks.map(fc => UI.renderFactCheck(fc)).join('');
         } else {
             fcFilters.innerHTML = '';
-            factcheckList.innerHTML = '<div style="padding:12px;font-size:13px;color:var(--text-tertiary);">Noch keine Fakten geprüft</div>';
+            factcheckList.innerHTML = `<div style="padding:12px;font-size:13px;color:var(--text-tertiary);">${LangManager.t('empty.no_factchecks')}</div>`;
         }
 
         // Quellenübersicht
@@ -820,13 +822,17 @@ const App = {
         const snapshotCount = entries.filter(e => e.kind === 'snapshot').length;
         const countEl = document.getElementById('article-count');
         if (articleCount > 0 && snapshotCount > 0) {
-            countEl.innerHTML = `<span class="ht-legend-dot"></span> ${articleCount} Meldung${articleCount !== 1 ? 'en' : ''} + <span class="ht-legend-dot ht-legend-gold"></span> ${snapshotCount} Lagebericht${snapshotCount !== 1 ? 'e' : ''}`;
+            const msgLabel = articleCount !== 1 ? LangManager.t('timeline.messages', { n: articleCount }) : LangManager.t('timeline.message', { n: articleCount });
+            const rptLabel = snapshotCount !== 1 ? LangManager.t('timeline.reports_count', { n: snapshotCount }) : LangManager.t('timeline.report_count', { n: snapshotCount });
+            countEl.innerHTML = `<span class="ht-legend-dot"></span> ${msgLabel} + <span class="ht-legend-dot ht-legend-gold"></span> ${rptLabel}`;
         } else if (articleCount > 0) {
-            countEl.innerHTML = `<span class="ht-legend-dot"></span> ${articleCount} Meldung${articleCount !== 1 ? 'en' : ''}`;
+            const msgLabel = articleCount !== 1 ? LangManager.t('timeline.messages', { n: articleCount }) : LangManager.t('timeline.message', { n: articleCount });
+            countEl.innerHTML = `<span class="ht-legend-dot"></span> ${msgLabel}`;
         } else if (snapshotCount > 0) {
-            countEl.innerHTML = `<span class="ht-legend-dot ht-legend-gold"></span> ${snapshotCount} Lagebericht${snapshotCount !== 1 ? 'e' : ''}`;
+            const rptLabel = snapshotCount !== 1 ? LangManager.t('timeline.reports_count', { n: snapshotCount }) : LangManager.t('timeline.report_count', { n: snapshotCount });
+            countEl.innerHTML = `<span class="ht-legend-dot ht-legend-gold"></span> ${rptLabel}`;
         } else {
-            countEl.textContent = '0 Meldungen';
+            countEl.textContent = LangManager.t('timeline.messages', { n: 0 });
         }
     },
 
@@ -847,8 +853,8 @@ const App = {
         if (entries.length === 0) {
             this._activePointIndex = null;
             container.innerHTML = (searchTerm || range !== 'all')
-                ? '<div class="ht-empty">Keine Einträge im gewählten Zeitraum.</div>'
-                : '<div class="ht-empty">Noch keine Meldungen. Starte eine Recherche mit "Aktualisieren".</div>';
+                ? `<div class="ht-empty">${LangManager.t('timeline.no_entries_range')}</div>`
+                : `<div class="ht-empty">${LangManager.t('timeline.no_entries_start')}</div>`;
             return;
         }
 
@@ -902,7 +908,8 @@ const App = {
             }
             if (this._activePointIndex === idx) pointClass += ' active';
 
-            const tooltip = `${bucket.label}: ${bucket.entries.length} Eintr${bucket.entries.length === 1 ? 'ag' : 'äge'}`;
+            const entryLabel = bucket.entries.length === 1 ? LangManager.t('timeline.entry', { n: bucket.entries.length }) : LangManager.t('timeline.entries', { n: bucket.entries.length });
+            const tooltip = `${bucket.label}: ${entryLabel}`;
 
             html += `<div class="${pointClass}" style="left:${pos}%;width:${size}px;height:${size}px;" onclick="App.openTimelineDetail(${idx})" data-idx="${idx}">`;
             html += `<div class="ht-tooltip">${UI.escape(tooltip)}</div>`;
@@ -1063,12 +1070,13 @@ const App = {
                 const bucketDay = new Date(d.getFullYear(), d.getMonth(), d.getDate());
                 let label;
                 const dateStr = d.toLocaleDateString('de-DE', { day: '2-digit', month: 'short' });
+                const locale = LangManager.lang === 'de' ? 'de-DE' : 'en-GB';
                 if (bucketDay.getTime() === today.getTime()) {
-                    label = 'Heute, ' + dateStr;
+                    label = LangManager.t('time.today') + ', ' + dateStr;
                 } else if (bucketDay.getTime() === yesterday.getTime()) {
-                    label = 'Gestern, ' + dateStr;
+                    label = LangManager.t('time.yesterday') + ', ' + dateStr;
                 } else {
-                    label = d.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: 'short' });
+                    label = d.toLocaleDateString(locale, { weekday: 'short', day: '2-digit', month: 'short' });
                 }
                 const pos = this._bucketPositionPercent(b, rangeStart, rangeEnd, buckets.length);
                 markers.push({ text: label, pos });
@@ -1096,7 +1104,7 @@ const App = {
 
         return `<div class="ht-detail-panel">
             <div class="ht-detail-header">
-                <span class="ht-detail-title">${UI.escape(bucket.label)} (${bucket.entries.length} Eintr${bucket.entries.length === 1 ? 'ag' : 'äge'})</span>
+                <span class="ht-detail-title">${UI.escape(bucket.label)} (${bucket.entries.length === 1 ? LangManager.t('timeline.entry', { n: bucket.entries.length }) : LangManager.t('timeline.entries', { n: bucket.entries.length })})</span>
                 <button class="ht-detail-close" onclick="App.closeTimelineDetail()">&times;</button>
             </div>
             <div class="ht-detail-content">${entriesHtml}</div>
@@ -1178,7 +1186,7 @@ const App = {
     _buildFullVerticalTimeline(filterType, searchTerm) {
         let entries = this._collectEntries(filterType, searchTerm);
         if (entries.length === 0) {
-            return '<div class="ht-empty">Keine Einträge.</div>';
+            return `<div class="ht-empty">${LangManager.t('timeline.no_entries')}</div>`;
         }
 
         entries.sort((a, b) => new Date(b.timestamp || 0) - new Date(a.timestamp || 0));
@@ -1213,20 +1221,21 @@ const App = {
 
             if (!d || isNaN(d.getTime())) {
                 key = 'unknown';
-                label = 'Unbekannt';
+                label = LangManager.t('time.unknown');
             } else if (granularity === 'hour') {
                 const h = d.getHours();
                 key = `${d.toDateString()}-${h}`;
-                label = `${h.toString().padStart(2, '0')}:00 Uhr`;
+                label = `${h.toString().padStart(2, '0')}:00${LangManager.lang === 'de' ? ' Uhr' : ''}`;
             } else {
                 const entryDate = new Date(d.getFullYear(), d.getMonth(), d.getDate());
                 key = entryDate.toDateString();
                 if (entryDate.getTime() === today.getTime()) {
-                    label = 'Heute';
+                    label = LangManager.t('time.today');
                 } else if (entryDate.getTime() === yesterday.getTime()) {
-                    label = 'Gestern';
+                    label = LangManager.t('time.yesterday');
                 } else {
-                    label = d.toLocaleDateString('de-DE', { weekday: 'short', day: 'numeric', month: 'short' });
+                    const locale = LangManager.lang === 'de' ? 'de-DE' : 'en-GB';
+                    label = d.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' });
                 }
             }
 
@@ -1300,7 +1309,7 @@ const App = {
             const truncated = content.length > 400 ? content.substring(0, 400) + '...' : content;
             detailHtml = `<div class="vt-article-detail">
                 <div class="vt-article-detail-content">${UI.escape(truncated)}</div>
-                ${article.source_url ? `<a href="${UI.escape(article.source_url)}" target="_blank" rel="noopener" class="vt-article-detail-link" onclick="event.stopPropagation()">Artikel öffnen &rarr;</a>` : ''}
+                ${article.source_url ? `<a href="${UI.escape(article.source_url)}" target="_blank" rel="noopener" class="vt-article-detail-link" onclick="event.stopPropagation()">${LangManager.t('timeline.open_article')} &rarr;</a>` : ''}
             </div>`;
         }
 
@@ -1324,8 +1333,8 @@ const App = {
             : '--:--';
 
         const stats = [];
-        if (snapshot.article_count) stats.push(`${snapshot.article_count} Artikel`);
-        if (snapshot.fact_check_count) stats.push(`${snapshot.fact_check_count} Fakten`);
+        if (snapshot.article_count) stats.push(LangManager.t('timeline.articles_label', { n: snapshot.article_count }));
+        if (snapshot.fact_check_count) stats.push(LangManager.t('timeline.facts_label', { n: snapshot.fact_check_count }));
         const statsText = stats.join(', ');
 
         // Vorschau: erste 200 Zeichen der Zusammenfassung
@@ -1337,7 +1346,7 @@ const App = {
 
         return `<div class="vt-entry vt-snapshot expandable" onclick="App.toggleTimelineEntry(this)">
             <div class="vt-snapshot-header">
-                <span class="vt-snapshot-badge">Lagebericht</span>
+                <span class="vt-snapshot-badge">${LangManager.t('timeline.snapshot_badge')}</span>
                 <span class="vt-snapshot-time">${time}</span>
                 <span class="vt-snapshot-stats">${UI.escape(statsText)}</span>
             </div>
@@ -1427,7 +1436,7 @@ const App = {
         // Validierung
         const titleField = document.getElementById('inc-title');
         if (!titleField.value.trim()) {
-            this._showFieldError(titleField, 'Bitte einen Titel eingeben.');
+            this._showFieldError(titleField, LangManager.t('form.validation_title'));
             titleField.focus();
             return;
         }
@@ -1452,7 +1461,7 @@ const App = {
                 closeModal('modal-new');
                 await this.loadIncidents();
                 await this.loadIncidentDetail(editId);
-                UI.showToast('Lage aktualisiert.', 'success');
+                UI.showToast(LangManager.t('toast.incident_updated'), 'success');
             } else {
                 // Create-Modus
                 const incident = await API.createIncident(data);
@@ -1474,10 +1483,10 @@ const App = {
                 this._updateRefreshButton(true);
                 UI.showProgress('queued');
                 await API.refreshIncident(incident.id);
-                UI.showToast(`Lage "${incident.title}" angelegt. Recherche gestartet.`, 'success');
+                UI.showToast(LangManager.t('toast.incident_created', { title: incident.title }), 'success');
             }
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         } finally {
             submitBtn.disabled = false;
             this._editingIncidentId = null;
@@ -1487,7 +1496,7 @@ const App = {
     async handleRefresh() {
         if (!this.currentIncidentId) return;
         if (this._refreshingIncidents.has(this.currentIncidentId)) {
-            UI.showToast('Recherche läuft bereits...', 'warning');
+            UI.showToast(LangManager.t('toast.refresh_already_running'), 'warning');
             return;
         }
         try {
@@ -1499,13 +1508,13 @@ const App = {
                 this._refreshingIncidents.delete(this.currentIncidentId);
                 this._updateRefreshButton(false);
                 UI.hideProgress();
-                UI.showToast('Recherche läuft bereits oder ist in der Warteschlange.', 'warning');
+                UI.showToast(LangManager.t('toast.refresh_skipped'), 'warning');
             }
         } catch (err) {
             this._refreshingIncidents.delete(this.currentIncidentId);
             this._updateRefreshButton(false);
             UI.hideProgress();
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -1514,19 +1523,19 @@ const App = {
     async triggerGeoparse() {
         if (!this.currentIncidentId) return;
         const btn = document.getElementById('geoparse-btn');
-        if (btn) { btn.disabled = true; btn.textContent = 'Wird gestartet...'; }
+        if (btn) { btn.disabled = true; btn.textContent = LangManager.t('map.starting'); }
         try {
             const result = await API.triggerGeoparse(this.currentIncidentId);
             if (result.status === 'done') {
                 UI.showToast(result.message, 'info');
-                if (btn) { btn.disabled = false; btn.textContent = 'Orte erkennen'; }
+                if (btn) { btn.disabled = false; btn.textContent = LangManager.t('btn.detect_locations'); }
                 return;
             }
             UI.showToast(result.message, 'info');
             this._pollGeoparse(this.currentIncidentId);
         } catch (err) {
-            UI.showToast('Geoparsing fehlgeschlagen: ' + err.message, 'error');
-            if (btn) { btn.disabled = false; btn.textContent = 'Orte erkennen'; }
+            UI.showToast(LangManager.t('toast.geoparse_failed', { error: err.message }), 'error');
+            if (btn) { btn.disabled = false; btn.textContent = LangManager.t('btn.detect_locations'); }
         }
     },
 
@@ -1541,21 +1550,21 @@ const App = {
                 } else {
                     clearInterval(this._geoparsePolling);
                     this._geoparsePolling = null;
-                    if (btn) { btn.disabled = false; btn.textContent = 'Orte erkennen'; }
+                    if (btn) { btn.disabled = false; btn.textContent = LangManager.t('btn.detect_locations'); }
                     if (st.status === 'done' && st.locations > 0) {
-                        UI.showToast(`${st.locations} Orte aus ${st.processed} Artikeln erkannt`, 'success');
+                        UI.showToast(LangManager.t('toast.locations_found', { locations: st.locations, articles: st.processed }), 'success');
                         const locations = await API.getLocations(incidentId).catch(() => []);
                         UI.renderMap(locations);
                     } else if (st.status === 'done') {
-                        UI.showToast('Keine neuen Orte gefunden', 'info');
+                        UI.showToast(LangManager.t('toast.no_locations'), 'info');
                     } else if (st.status === 'error') {
-                        UI.showToast('Geoparsing fehlgeschlagen: ' + (st.error || ''), 'error');
+                        UI.showToast(LangManager.t('toast.geoparse_failed', { error: st.error || '' }), 'error');
                     }
                 }
             } catch {
                 clearInterval(this._geoparsePolling);
                 this._geoparsePolling = null;
-                if (btn) { btn.disabled = false; btn.textContent = 'Orte erkennen'; }
+                if (btn) { btn.disabled = false; btn.textContent = LangManager.t('btn.detect_locations'); }
             }
         }, 3000);
     },
@@ -1563,17 +1572,17 @@ const App = {
     _formatInterval(minutes) {
         if (minutes >= 10080 && minutes % 10080 === 0) {
             const w = minutes / 10080;
-            return w === 1 ? '1 Woche' : `${w} Wochen`;
+            return w === 1 ? LangManager.t('time.week') : LangManager.t('time.weeks', { n: w });
         }
         if (minutes >= 1440 && minutes % 1440 === 0) {
             const d = minutes / 1440;
-            return d === 1 ? '1 Tag' : `${d} Tage`;
+            return d === 1 ? LangManager.t('time.day') : LangManager.t('time.days', { n: d });
         }
         if (minutes >= 60 && minutes % 60 === 0) {
             const h = minutes / 60;
-            return h === 1 ? '1 Stunde' : `${h} Stunden`;
+            return h === 1 ? LangManager.t('time.hour') : LangManager.t('time.hours', { n: h });
         }
-        return `${minutes} Min.`;
+        return LangManager.t('time.minutes_short', { n: minutes });
     },
 
     _setIntervalFields(minutes) {
@@ -1619,7 +1628,7 @@ const App = {
             const logs = await API.getRefreshLog(this.currentIncidentId, 20);
             this._renderRefreshHistory(logs);
         } catch (e) {
-            list.innerHTML = '<div style="padding:12px;color:var(--error);font-size:12px;">Fehler beim Laden</div>';
+            list.innerHTML = `<div style="padding:12px;color:var(--error);font-size:12px;">${LangManager.t('refresh.load_error')}</div>`;
         }
 
         // Outside-Click Listener
@@ -1652,7 +1661,7 @@ const App = {
         if (!list) return;
 
         if (!logs || logs.length === 0) {
-            list.innerHTML = '<div style="padding:12px;color:var(--text-disabled);font-size:12px;">Noch keine Refreshes durchgeführt</div>';
+            list.innerHTML = `<div style="padding:12px;color:var(--text-disabled);font-size:12px;">${LangManager.t('refresh.no_history')}</div>`;
             return;
         }
 
@@ -1663,17 +1672,17 @@ const App = {
 
             let detail = '';
             if (log.status === 'completed') {
-                detail = `${log.articles_found} Artikel`;
+                detail = LangManager.t('refresh.articles', { n: log.articles_found });
                 if (log.duration_seconds != null) {
                     detail += ` in ${this._formatDuration(log.duration_seconds)}`;
                 }
             } else if (log.status === 'running') {
-                detail = 'Läuft...';
+                detail = LangManager.t('refresh.running');
             } else if (log.status === 'error') {
                 detail = '';
             }
 
-            const retryInfo = log.retry_count > 0 ? ` (Versuch ${log.retry_count + 1})` : '';
+            const retryInfo = log.retry_count > 0 ? ` (${LangManager.t('refresh.attempt', { n: log.retry_count + 1 })})` : '';
             const errorHtml = log.error_message
                 ? `<div class="rh-info-error" title="${log.error_message.replace(/"/g, '&quot;')}">${log.error_message}</div>`
                 : '';
@@ -1685,7 +1694,7 @@ const App = {
                     ${detail ? `<div class="rh-info-detail">${detail}</div>` : ''}
                     ${errorHtml}
                 </div>
-                <span class="rh-trigger-badge ${log.trigger_type}">${log.trigger_type === 'auto' ? 'Auto' : 'Manuell'}</span>
+                <span class="rh-trigger-badge ${log.trigger_type}">${log.trigger_type === 'auto' ? LangManager.t('refresh.trigger_auto') : LangManager.t('refresh.trigger_manual')}</span>
             </div>`;
         }).join('');
     },
@@ -1702,22 +1711,22 @@ const App = {
         if (!date) return '';
         const now = new Date();
         const diff = Math.floor((now - date) / 1000);
-        if (diff < 60) return 'gerade eben';
-        if (diff < 3600) return `vor ${Math.floor(diff / 60)}m`;
-        if (diff < 86400) return `vor ${Math.floor(diff / 3600)}h`;
-        return `vor ${Math.floor(diff / 86400)}d`;
+        if (diff < 60) return LangManager.t('time.just_now');
+        if (diff < 3600) return LangManager.t('time.minutes_ago', { n: Math.floor(diff / 60) });
+        if (diff < 86400) return LangManager.t('time.hours_ago', { n: Math.floor(diff / 3600) });
+        return LangManager.t('time.days_ago', { n: Math.floor(diff / 86400) });
     },
 
     _updateRefreshButton(disabled) {
         const btn = document.getElementById('refresh-btn');
         if (!btn) return;
         btn.disabled = disabled;
-        btn.textContent = disabled ? 'Läuft...' : 'Aktualisieren';
+        btn.textContent = disabled ? LangManager.t('btn.refreshing') : LangManager.t('btn.refresh');
     },
 
     async handleDelete() {
         if (!this.currentIncidentId) return;
-        if (!await confirmDialog('Lage wirklich löschen? Alle gesammelten Daten gehen verloren.')) return;
+        if (!await confirmDialog(LangManager.t('confirm.delete_incident'))) return;
 
         try {
             await API.deleteIncident(this.currentIncidentId);
@@ -1726,9 +1735,9 @@ const App = {
             document.getElementById('incident-view').style.display = 'none';
             document.getElementById('empty-state').style.display = 'flex';
             await this.loadIncidents();
-            UI.showToast('Lage gelöscht.', 'success');
+            UI.showToast(LangManager.t('toast.incident_deleted'), 'success');
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -1754,8 +1763,8 @@ const App = {
         toggleRefreshInterval();
 
         // Modal-Titel und Submit ändern
-        document.getElementById('modal-new-title').textContent = 'Lage bearbeiten';
-        document.getElementById('modal-new-submit').textContent = 'Speichern';
+        document.getElementById('modal-new-title').textContent = LangManager.t('modal.edit_incident');
+        document.getElementById('modal-new-submit').textContent = LangManager.t('btn.save');
 
         // E-Mail-Subscription laden
         try {
@@ -1778,9 +1787,8 @@ const App = {
         if (!incident) return;
 
         const isArchived = incident.status === 'archived';
-        const action = isArchived ? 'wiederherstellen' : 'archivieren';
 
-        if (!await confirmDialog(`Lage wirklich ${action}?`)) return;
+        if (!await confirmDialog(isArchived ? LangManager.t('confirm.restore_incident') : LangManager.t('confirm.archive_incident'))) return;
 
         try {
             const newStatus = isArchived ? 'active' : 'archived';
@@ -1788,9 +1796,9 @@ const App = {
             await this.loadIncidents();
             await this.loadIncidentDetail(this.currentIncidentId);
             this._updateArchiveButton(newStatus);
-            UI.showToast(isArchived ? 'Lage wiederhergestellt.' : 'Lage archiviert.', 'success');
+            UI.showToast(isArchived ? LangManager.t('toast.incident_restored') : LangManager.t('toast.incident_archived'), 'success');
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -1815,7 +1823,7 @@ const App = {
     _updateArchiveButton(status) {
         const btn = document.getElementById('archive-incident-btn');
         if (!btn) return;
-        btn.textContent = status === 'archived' ? 'Wiederherstellen' : 'Archivieren';
+        btn.textContent = status === 'archived' ? LangManager.t('btn.unarchive') : LangManager.t('btn.archive');
     },
 
     // === WebSocket Handlers ===
@@ -1882,24 +1890,24 @@ const App = {
         // Toast-Text zusammenbauen
         const parts = [];
         if (d.new_articles > 0) {
-            parts.push(`${d.new_articles} neue Meldung${d.new_articles !== 1 ? 'en' : ''}`);
+            parts.push(d.new_articles !== 1 ? LangManager.t('timeline.messages', { n: d.new_articles }) : LangManager.t('timeline.message', { n: d.new_articles }));
         }
         if (d.confirmed_count > 0) {
-            parts.push(`${d.confirmed_count} bestätigt`);
+            parts.push(LangManager.t('progress.facts_confirmed', { n: d.confirmed_count }));
         }
         if (d.contradicted_count > 0) {
-            parts.push(`${d.contradicted_count} widersprochen`);
+            parts.push(LangManager.t('progress.contradicted', { n: d.contradicted_count }));
         }
         if (d.status_changes && d.status_changes.length > 0) {
-            parts.push(`${d.status_changes.length} Statusänderung${d.status_changes.length !== 1 ? 'en' : ''}`);
+            parts.push(d.status_changes.length !== 1 ? LangManager.t('progress.status_changes', { n: d.status_changes.length }) : LangManager.t('progress.status_change', { n: d.status_changes.length }));
         }
 
         const summaryText = parts.length > 0
             ? parts.join(', ')
-            : 'Keine neuen Entwicklungen';
+            : LangManager.t('progress.no_developments');
 
         // 1 Toast statt 5-10
-        UI.showToast(`Recherche abgeschlossen: ${summaryText}`, 'success', 6000);
+        UI.showToast(LangManager.t('toast.refresh_complete', { summary: summaryText }), 'success', 6000);
 
         // Ins NotificationCenter eintragen
         NotificationCenter.add({
@@ -1933,13 +1941,13 @@ const App = {
 
     _translateStatus(status) {
         const map = {
-            confirmed: 'Bestätigt',
-            established: 'Gesichert',
-            unconfirmed: 'Unbestätigt',
-            contradicted: 'Widersprochen',
-            disputed: 'Umstritten',
-            developing: 'In Entwicklung',
-            unverified: 'Ungeprüft',
+            confirmed: LangManager.t('fc_status.confirmed'),
+            established: LangManager.t('fc_status.established'),
+            unconfirmed: LangManager.t('fc_status.unconfirmed'),
+            contradicted: LangManager.t('fc_status.contradicted'),
+            disputed: LangManager.t('fc_status.disputed'),
+            developing: LangManager.t('fc_status.developing'),
+            unverified: LangManager.t('fc_status.unverified'),
         };
         return map[status] || status;
     },
@@ -1957,7 +1965,7 @@ const App = {
             this._pendingComplete = null;
             UI.showProgressError(msg.data.error, false);
         }
-        UI.showToast(`Recherche-Fehler: ${msg.data.error}`, 'error');
+        UI.showToast(LangManager.t('toast.refresh_error', { error: msg.data.error }), 'error');
     },
 
     handleRefreshCancelled(msg) {
@@ -1972,26 +1980,26 @@ const App = {
             this._pendingComplete = null;
             UI.hideProgress();
         }
-        UI.showToast('Recherche abgebrochen.', 'info');
+        UI.showToast(LangManager.t('toast.refresh_cancelled'), 'info');
     },
 
     async cancelRefresh() {
         if (!this.currentIncidentId) return;
-        const ok = await confirmDialog('Laufende Recherche abbrechen?');
+        const ok = await confirmDialog(LangManager.t('confirm.cancel_refresh'));
         if (!ok) return;
 
         const btn = document.getElementById('progress-cancel-btn');
         if (btn) {
-            btn.textContent = 'Wird abgebrochen...';
+            btn.textContent = LangManager.t('progress.cancelling');
             btn.disabled = true;
         }
 
         try {
             await API.cancelRefresh(this.currentIncidentId);
         } catch (err) {
-            UI.showToast('Abbrechen fehlgeschlagen: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.cancel_failed', { error: err.message }), 'error');
             if (btn) {
-                btn.textContent = 'Abbrechen';
+                btn.textContent = LangManager.t('btn.cancel');
                 btn.disabled = false;
             }
         }
@@ -2039,9 +2047,9 @@ const App = {
             a.click();
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
-            UI.showToast('Export heruntergeladen', 'success');
+            UI.showToast(LangManager.t('toast.export_success'), 'success');
         } catch (err) {
-            UI.showToast('Export fehlgeschlagen: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.export_failed', { error: err.message }), 'error');
         }
     },
 
@@ -2078,9 +2086,9 @@ const App = {
             if (this.currentIncidentId) {
                 await this.selectIncident(this.currentIncidentId);
             }
-            UI.showToast('Daten aktualisiert.', 'success', 2000);
+            UI.showToast(LangManager.t('toast.data_refreshed'), 'success', 2000);
         } catch (err) {
-            UI.showToast('Aktualisierung fehlgeschlagen: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.refresh_failed', { error: err.message }), 'error');
         }
     },
 
@@ -2105,22 +2113,22 @@ const App = {
         const message = msgField.value.trim();
 
         if (message.length < 10) {
-            this._showFieldError(msgField, 'Bitte mindestens 10 Zeichen eingeben.');
+            this._showFieldError(msgField, LangManager.t('form.validation_min_chars'));
             msgField.focus();
             return;
         }
 
         btn.disabled = true;
-        btn.textContent = 'Wird gesendet...';
+        btn.textContent = LangManager.t('btn.sending_feedback');
         try {
             await API.sendFeedback({ category, message });
             closeModal('modal-feedback');
-            UI.showToast('Feedback gesendet. Vielen Dank!', 'success');
+            UI.showToast(LangManager.t('toast.feedback_sent'), 'success');
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         } finally {
             btn.disabled = false;
-            btn.textContent = 'Absenden';
+            btn.textContent = LangManager.t('btn.submit_feedback');
         }
     },
 
@@ -2160,7 +2168,7 @@ const App = {
             this.renderSourceStats(stats);
             this.renderSourceList();
         } catch (err) {
-            UI.showToast('Fehler beim Laden der Quellen: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.source_error', { error: err.message }), 'error');
         }
     },
 
@@ -2173,10 +2181,10 @@ const App = {
         const excluded = this._blacklistOnly.length;
 
         bar.innerHTML = `
-            <span class="sources-stat-item"><span class="sources-stat-value">${rss.count}</span> RSS-Feeds</span>
-            <span class="sources-stat-item"><span class="sources-stat-value">${web.count}</span> Web-Quellen</span>
-            <span class="sources-stat-item"><span class="sources-stat-value">${excluded}</span> Gesperrt</span>
-            <span class="sources-stat-item"><span class="sources-stat-value">${stats.total_articles}</span> Artikel gesamt</span>
+            <span class="sources-stat-item"><span class="sources-stat-value">${rss.count}</span> ${LangManager.t('sources.rss_feeds_stat')}</span>
+            <span class="sources-stat-item"><span class="sources-stat-value">${web.count}</span> ${LangManager.t('sources.web_sources_stat')}</span>
+            <span class="sources-stat-item"><span class="sources-stat-value">${excluded}</span> ${LangManager.t('sources.blocked_stat')}</span>
+            <span class="sources-stat-item"><span class="sources-stat-value">${stats.total_articles}</span> ${LangManager.t('sources.articles_total')}</span>
         `;
     },
 
@@ -2251,7 +2259,7 @@ const App = {
         }
 
         if (filteredGroups.length === 0) {
-            list.innerHTML = '<div style="padding:24px;text-align:center;font-size:13px;color:var(--text-disabled);">Keine Quellen gefunden</div>';
+            list.innerHTML = `<div style="padding:24px;text-align:center;font-size:13px;color:var(--text-disabled);">${LangManager.t('empty.no_sources')}</div>`;
             return;
         }
 
@@ -2291,7 +2299,7 @@ const App = {
         content.style.display = isHidden ? '' : 'none';
         if (chevron) {
             chevron.classList.toggle('open', isHidden);
-            chevron.title = isHidden ? 'Einklappen' : 'Aufklappen';
+            chevron.title = isHidden ? LangManager.t('refresh.collapse') : LangManager.t('refresh.expand');
         }
         // aria-expanded auf dem Header-Toggle synchronisieren
         const header = chevron ? chevron.closest('[role="button"]') : null;
@@ -2346,7 +2354,7 @@ const App = {
         const input = document.getElementById('block-domain-input');
         const domain = (input?.value || '').trim();
         if (!domain) {
-            UI.showToast('Domain ist erforderlich.', 'warning');
+            UI.showToast(LangManager.t('toast.domain_required'), 'warning');
             return;
         }
 
@@ -2354,12 +2362,12 @@ const App = {
 
         try {
             await API.blockDomain(domain, notes);
-            UI.showToast(`${domain} gesperrt.`, 'success');
+            UI.showToast(LangManager.t('toast.domain_blocked', { domain }), 'success');
             this.showBlockDomainDialog(false);
             await this.loadSources();
             this.updateSidebarStats();
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -2416,15 +2424,15 @@ const App = {
      * Domain direkt sperren (aus der Gruppenliste).
      */
     async blockDomainDirect(domain) {
-        if (!await confirmDialog(`"${domain}" wirklich sperren? Alle Feeds dieser Domain werden deaktiviert.`)) return;
+        if (!await confirmDialog(LangManager.t('confirm.block_domain', { domain }))) return;
 
         try {
             await API.blockDomain(domain);
-            UI.showToast(`${domain} gesperrt.`, 'success');
+            UI.showToast(LangManager.t('toast.domain_blocked', { domain }), 'success');
             await this.loadSources();
             this.updateSidebarStats();
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -2434,11 +2442,11 @@ const App = {
     async unblockDomain(domain) {
         try {
             await API.unblockDomain(domain);
-            UI.showToast(`${domain} entsperrt.`, 'success');
+            UI.showToast(LangManager.t('toast.domain_unblocked', { domain }), 'success');
             await this.loadSources();
             this.updateSidebarStats();
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -2446,15 +2454,15 @@ const App = {
      * Alle Quellen einer Domain löschen.
      */
     async deleteDomain(domain) {
-        if (!await confirmDialog(`Alle Quellen von "${domain}" wirklich löschen?`)) return;
+        if (!await confirmDialog(LangManager.t('confirm.delete_domain', { domain }))) return;
 
         try {
             await API.deleteDomain(domain);
-            UI.showToast(`${domain} gelöscht.`, 'success');
+            UI.showToast(LangManager.t('toast.domain_deleted', { domain }), 'success');
             await this.loadSources();
             this.updateSidebarStats();
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -2468,9 +2476,9 @@ const App = {
             this._sourcesOnly = this._sourcesOnly.filter(s => s.id !== sourceId);
             this.renderSourceList();
             this.updateSidebarStats();
-            UI.showToast('Feed gelöscht.', 'success');
+            UI.showToast(LangManager.t('toast.feed_deleted'), 'success');
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -2511,10 +2519,10 @@ const App = {
             document.getElementById('src-discover-url').value = '';
             document.getElementById('src-discovery-result').style.display = 'none';
             document.getElementById('src-discover-btn').disabled = false;
-            document.getElementById('src-discover-btn').textContent = 'Erkennen';
+            document.getElementById('src-discover-btn').textContent = LangManager.t('btn.discover');
             // Save-Button Text zurücksetzen
             const saveBtn = document.querySelector('#src-discovery-result .sources-discovery-actions .btn-primary');
-            if (saveBtn) saveBtn.textContent = 'Speichern';
+            if (saveBtn) saveBtn.textContent = LangManager.t('btn.save');
             // Block-Form ausblenden
             const blockForm = document.getElementById('sources-block-form');
             if (blockForm) blockForm.style.display = 'none';
@@ -2522,7 +2530,7 @@ const App = {
             // Beim Schließen: Bearbeitungsmodus zurücksetzen
             this._editingSourceId = null;
             const saveBtn = document.querySelector('#src-discovery-result .sources-discovery-actions .btn-primary');
-            if (saveBtn) saveBtn.textContent = 'Speichern';
+            if (saveBtn) saveBtn.textContent = LangManager.t('btn.save');
         }
     },
 
@@ -2530,7 +2538,7 @@ const App = {
         const urlInput = document.getElementById('src-discover-url');
         const url = urlInput.value.trim();
         if (!url) {
-            UI.showToast('Bitte URL oder Domain eingeben.', 'warning');
+            UI.showToast(LangManager.t('toast.url_required'), 'warning');
             return;
         }
 
@@ -2539,13 +2547,13 @@ const App = {
         const isBlocked = inputDomain && this._blacklistOnly.some(s => (s.domain || '').toLowerCase() === inputDomain);
 
         if (isBlocked) {
-            if (!await confirmDialog(`"${inputDomain}" ist gesperrt. Trotzdem hinzufügen? Die Domain wird dabei entsperrt.`)) return;
+            if (!await confirmDialog(LangManager.t('confirm.unblock_add', { domain: inputDomain }))) return;
             await API.unblockDomain(inputDomain);
         }
 
         const btn = document.getElementById('src-discover-btn');
         btn.disabled = true;
-        btn.textContent = 'Suche Feeds...';
+        btn.textContent = LangManager.t('btn.discovering');
 
         try {
             const result = await API.discoverMulti(url);
@@ -2587,9 +2595,9 @@ const App = {
                     this.toggleSourceForm(false);
                     await this.loadSources();
                 } else if (result.total_found === 0) {
-                    UI.showToast('Kein RSS-Feed gefunden. Als Web-Quelle speichern?', 'info');
+                    UI.showToast(LangManager.t('toast.discover_no_rss'), 'info');
                 } else {
-                    UI.showToast('Feed bereits vorhanden.', 'info');
+                    UI.showToast(LangManager.t('toast.discover_exists'), 'info');
                 }
             } else {
                 document.getElementById('src-discovery-result').style.display = 'none';
@@ -2608,17 +2616,17 @@ const App = {
                 await this.loadSources();
             }
         } catch (err) {
-            UI.showToast('Erkennung fehlgeschlagen: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.discover_error', { error: err.message }), 'error');
         } finally {
             btn.disabled = false;
-            btn.textContent = 'Erkennen';
+            btn.textContent = LangManager.t('btn.discover');
         }
     },
 
     editSource(id) {
         const source = this._sourcesOnly.find(s => s.id === id);
         if (!source) {
-            UI.showToast('Quelle nicht gefunden.', 'error');
+            UI.showToast(LangManager.t('toast.source_not_found'), 'error');
             return;
         }
 
@@ -2669,7 +2677,7 @@ const App = {
 
         // Submit-Button-Text ändern
         const saveBtn = document.querySelector('#src-discovery-result .sources-discovery-actions .btn-primary');
-        if (saveBtn) saveBtn.textContent = 'Quelle speichern';
+        if (saveBtn) saveBtn.textContent = LangManager.t('btn.save_source');
 
         // Zum Formular scrollen
         if (form) form.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -2678,7 +2686,7 @@ const App = {
     async saveSource() {
         const name = document.getElementById('src-name').value.trim();
         if (!name) {
-            UI.showToast('Name ist erforderlich. Bitte erst "Erkennen" klicken.', 'warning');
+            UI.showToast(LangManager.t('toast.name_required'), 'warning');
             return;
         }
 
@@ -2699,17 +2707,17 @@ const App = {
         try {
             if (this._editingSourceId) {
                 await API.updateSource(this._editingSourceId, data);
-                UI.showToast('Quelle aktualisiert.', 'success');
+                UI.showToast(LangManager.t('toast.source_updated'), 'success');
             } else {
                 await API.createSource(data);
-                UI.showToast('Quelle hinzugefügt.', 'success');
+                UI.showToast(LangManager.t('toast.source_added'), 'success');
             }
 
             this.toggleSourceForm(false);
             await this.loadSources();
             this.updateSidebarStats();
         } catch (err) {
-            UI.showToast('Fehler: ' + err.message, 'error');
+            UI.showToast(LangManager.t('toast.generic_error', { error: err.message }), 'error');
         }
     },
 
@@ -2720,6 +2728,24 @@ const App = {
         WS.disconnect();
         window.location.href = '/';
     },
+
+    _onLangChange() {
+        // Re-render dynamic content in current language
+        this.renderSidebar();
+        if (this.currentIncidentId) {
+            this.loadIncidentDetail(this.currentIncidentId);
+        }
+        // Update refresh button
+        const isRefreshing = this._refreshingIncidents.has(this.currentIncidentId);
+        this._updateRefreshButton(isRefreshing);
+        // Update archive button
+        const inc = this.incidents.find(i => i.id === this.currentIncidentId);
+        if (inc) this._updateArchiveButton(inc.status);
+        // Update sidebar stats
+        this.updateSidebarStats();
+        // Update map tiles
+        UI._applyMapTiles();
+    },
 };
 
 // === Barrierefreier Bestätigungsdialog ===
@@ -2738,14 +2764,14 @@ function confirmDialog(message) {
         modal.style.maxWidth = '420px';
         modal.innerHTML = `
             <div class="modal-header">
-                <div class="modal-title">Bestätigung</div>
+                <div class="modal-title">${LangManager.t('modal.confirmation')}</div>
             </div>
             <div class="modal-body" style="padding:16px 24px;">
                 <p id="confirm-dialog-msg" style="margin:0;font-size:14px;color:var(--text-primary);line-height:1.5;">${message.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</p>
             </div>
             <div class="modal-footer">
-                <button class="btn btn-secondary" id="confirm-cancel">Abbrechen</button>
-                <button class="btn btn-primary" id="confirm-ok">Bestätigen</button>
+                <button class="btn btn-secondary" id="confirm-cancel">${LangManager.t('btn.cancel')}</button>
+                <button class="btn btn-primary" id="confirm-ok">${LangManager.t('btn.confirm')}</button>
             </div>
         `;
         overlay.appendChild(modal);
@@ -2813,8 +2839,8 @@ function openModal(id) {
     if (id === 'modal-new' && !App._editingIncidentId) {
         // Create-Modus: Formular zurücksetzen
         document.getElementById('new-incident-form').reset();
-        document.getElementById('modal-new-title').textContent = 'Neue Lage anlegen';
-        document.getElementById('modal-new-submit').textContent = 'Lage anlegen';
+        document.getElementById('modal-new-title').textContent = LangManager.t('modal.new_incident');
+        document.getElementById('modal-new-submit').textContent = LangManager.t('modal.create_incident');
         // E-Mail-Checkboxen zuruecksetzen
         document.getElementById('inc-notify-summary').checked = false;
         document.getElementById('inc-notify-new-articles').checked = false;
@@ -2838,8 +2864,8 @@ function closeModal(id) {
     }
     if (id === 'modal-new') {
         App._editingIncidentId = null;
-        document.getElementById('modal-new-title').textContent = 'Neue Lage anlegen';
-        document.getElementById('modal-new-submit').textContent = 'Lage anlegen';
+        document.getElementById('modal-new-title').textContent = LangManager.t('modal.new_incident');
+        document.getElementById('modal-new-submit').textContent = LangManager.t('modal.create_incident');
     }
 }
 
@@ -2870,17 +2896,17 @@ function openContentModal(title, sourceElementId) {
         });
     } else if (sourceElementId === 'source-overview-content') {
         // Quellenübersicht: Detailansicht mit Suchleiste
-        headerExtra.innerHTML = '<input type="text" class="timeline-filter-input" placeholder="Quellen durchsuchen..." oninput="App.filterModalSources(this.value)" style="width:200px;">';
+        headerExtra.innerHTML = `<input type="text" class="timeline-filter-input" placeholder="${LangManager.t('misc.search_sources')}" oninput="App.filterModalSources(this.value)" style="width:200px;">`;
         body.innerHTML = buildDetailedSourceOverview();
     } else if (sourceElementId === 'timeline') {
         // Timeline: Vollständige vertikale Timeline im Modal mit Filter + Suche
         headerExtra.innerHTML = `<div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;">
             <div class="ht-filter-group">
-                <button class="ht-modal-filter-btn active" data-filter="all" onclick="App.filterModalTimelineType('all', this)">Alle</button>
-                <button class="ht-modal-filter-btn" data-filter="articles" onclick="App.filterModalTimelineType('articles', this)">Meldungen</button>
-                <button class="ht-modal-filter-btn" data-filter="snapshots" onclick="App.filterModalTimelineType('snapshots', this)">Lageberichte</button>
+                <button class="ht-modal-filter-btn active" data-filter="all" onclick="App.filterModalTimelineType('all', this)">${LangManager.t('timeline.all')}</button>
+                <button class="ht-modal-filter-btn" data-filter="articles" onclick="App.filterModalTimelineType('articles', this)">${LangManager.t('timeline.articles')}</button>
+                <button class="ht-modal-filter-btn" data-filter="snapshots" onclick="App.filterModalTimelineType('snapshots', this)">${LangManager.t('timeline.snapshots')}</button>
             </div>
-            <input type="text" class="timeline-filter-input" placeholder="Suche..." oninput="App.filterModalTimeline(this.value)" style="width:180px;">
+            <input type="text" class="timeline-filter-input" placeholder="${LangManager.t('timeline.search_placeholder')}" oninput="App.filterModalTimeline(this.value)" style="width:180px;">
         </div>`;
         body.innerHTML = App._buildFullVerticalTimeline('all', '');
     } else {
@@ -2922,7 +2948,7 @@ App.filterModalSources = function(query) {
 
 function buildDetailedSourceOverview() {
     const articles = App._currentArticles || [];
-    if (!articles.length) return '<div style="padding:24px;color:var(--text-disabled);">Keine Artikel vorhanden</div>';
+    if (!articles.length) return `<div style="padding:24px;color:var(--text-disabled);">${LangManager.t('empty.no_articles')}</div>`;
 
     // Nach Quelle gruppieren
     const sourceMap = {};
@@ -2963,14 +2989,14 @@ function buildDetailedSourceOverview() {
             </summary>
             <div style="border-top:1px solid var(--border);">`;
         data.articles.forEach(a => {
-            const headline = UI.escape(a.headline_de || a.headline || 'Ohne Titel');
+            const headline = UI.escape(a.headline_de || a.headline || LangManager.t('map.no_title'));
             const time = a.collected_at
                 ? new Date(a.collected_at).toLocaleString('de-DE', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
                 : '';
             const langBadge = a.language && a.language !== 'de'
                 ? `<span class="lang-badge">${a.language.toUpperCase()}</span>` : '';
             const link = a.source_url
-                ? `<a href="${UI.escape(a.source_url)}" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;font-size:14px;flex-shrink:0;opacity:0.6;" title="Artikel öffnen">&#8599;</a>` : '';
+                ? `<a href="${UI.escape(a.source_url)}" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;font-size:14px;flex-shrink:0;opacity:0.6;" title="${LangManager.t('timeline.open_article')}">&#8599;</a>` : '';
             html += `<div style="display:flex;align-items:center;gap:10px;padding:8px 14px 8px 36px;font-size:12px;border-bottom:1px solid var(--border);">
                 <span style="color:var(--text-secondary);flex-shrink:0;min-width:90px;font-size:11px;">${time}</span>
                 <span style="flex:1;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${headline}</span>
diff --git a/src/static/js/components.js b/src/static/js/components.js
index fb982b9..262bc21 100644
--- a/src/static/js/components.js
+++ b/src/static/js/components.js
@@ -29,9 +29,9 @@ const UI = {
                 <span class="incident-dot ${dotClass}" id="dot-${incident.id}" aria-hidden="true"></span>
                 <div style="flex:1;min-width:0;">
                     <div class="incident-name">${this.escape(incident.title)}</div>
-                    <div class="incident-meta">${incident.article_count} Artikel &middot; ${this.escape(creator)}</div>
+                    <div class="incident-meta">${LangManager.t('sidebar.articles', { n: incident.article_count })} &middot; ${this.escape(creator)}</div>
                 </div>
-                ${incident.visibility === 'private' ? '<span class="badge badge-private" style="font-size:9px;" aria-label="Private Lage">PRIVAT</span>' : ''}
+                ${incident.visibility === 'private' ? `<span class="badge badge-private" style="font-size:9px;" aria-label="Private Lage">${LangManager.t('status.private')}</span>` : ''}
                 ${incident.refresh_mode === 'auto' ? '<span class="badge badge-auto" role="img" aria-label="Auto-Refresh aktiv">&#x21bb;</span>' : ''}
             </div>
         `;
@@ -40,34 +40,15 @@ const UI = {
     /**
      * Faktencheck-Eintrag rendern.
      */
-    factCheckLabels: {
-        confirmed: 'Bestätigt durch mehrere Quellen',
-        unconfirmed: 'Nicht unabhängig bestätigt',
-        contradicted: 'Widerlegt',
-        developing: 'Faktenlage noch im Fluss',
-        established: 'Gesicherter Fakt (3+ Quellen)',
-        disputed: 'Umstrittener Sachverhalt',
-        unverified: 'Nicht unabhängig verifizierbar',
+    _fcStatuses: ['confirmed','unconfirmed','contradicted','developing','established','disputed','unverified'],
+    get factCheckLabels() {
+        const o = {}; this._fcStatuses.forEach(s => o[s] = LangManager.t('fc.' + s)); return o;
     },
-
-    factCheckTooltips: {
-        confirmed: 'Bestätigt: Mindestens zwei unabhängige, seriöse Quellen stützen diese Aussage übereinstimmend.',
-        established: 'Gesichert: Drei oder mehr unabhängige Quellen bestätigen den Sachverhalt. Hohe Verlässlichkeit.',
-        developing: 'Unklar: Die Faktenlage ist noch im Fluss. Neue Informationen können das Bild verändern.',
-        unconfirmed: 'Unbestätigt: Bisher nur aus einer Quelle bekannt. Eine unabhängige Bestätigung steht aus.',
-        unverified: 'Ungeprüft: Die Aussage konnte bisher nicht anhand verfügbarer Quellen überprüft werden.',
-        disputed: 'Umstritten: Quellen widersprechen sich. Es gibt sowohl stützende als auch widersprechende Belege.',
-        contradicted: 'Widerlegt: Zuverlässige Quellen widersprechen dieser Aussage. Wahrscheinlich falsch.',
+    get factCheckTooltips() {
+        const o = {}; this._fcStatuses.forEach(s => o[s] = LangManager.t('fc_tooltip.' + s)); return o;
     },
-
-    factCheckChipLabels: {
-        confirmed: 'Bestätigt',
-        unconfirmed: 'Unbestätigt',
-        contradicted: 'Widerlegt',
-        developing: 'Unklar',
-        established: 'Gesichert',
-        disputed: 'Umstritten',
-        unverified: 'Ungeprüft',
+    get factCheckChipLabels() {
+        const o = {}; this._fcStatuses.forEach(s => o[s] = LangManager.t('fc_chip.' + s)); return o;
     },
 
     factCheckIcons: {
@@ -106,7 +87,7 @@ const UI = {
             </label>`;
         }).join('');
 
-        return `<button class="fc-dropdown-toggle" onclick="App.toggleFcDropdown(event)" aria-haspopup="true" aria-expanded="false">Filter</button>
+        return `<button class="fc-dropdown-toggle" onclick="App.toggleFcDropdown(event)" aria-haspopup="true" aria-expanded="false">${LangManager.t('evidence.filter')}</button>
             <div class="fc-dropdown-menu" id="fc-dropdown-menu">${items}</div>`;
     },
 
@@ -120,7 +101,7 @@ const UI = {
                 <div style="flex:1;">
                     <div class="factcheck-claim">${this.escape(fc.claim)}</div>
                     <div style="display:flex;align-items:center;gap:6px;margin-top:2px;">
-                        <span class="factcheck-sources">${count} Quelle${count !== 1 ? 'n' : ''}</span>
+                        <span class="factcheck-sources">${count !== 1 ? LangManager.t('evidence.sources', { n: count }) : LangManager.t('evidence.source', { n: count })}</span>
                     </div>
                     <div class="evidence-block">${this.renderEvidence(fc.evidence || '')}</div>
                 </div>
@@ -132,7 +113,7 @@ const UI = {
      * Evidence mit erklärenden Text UND Quellen-Chips rendern.
      */
     renderEvidence(text) {
-        if (!text) return '<span class="evidence-empty">Keine Belege</span>';
+        if (!text) return `<span class="evidence-empty">${LangManager.t('evidence.empty')}</span>`;
 
         const urls = text.match(/https?:\/\/[^\s,)]+/g) || [];
         if (urls.length === 0) {
@@ -223,12 +204,12 @@ const UI = {
         bar.classList.remove('progress-bar--complete', 'progress-bar--error');
 
         const steps = {
-            queued: { active: 0, label: 'In Warteschlange...' },
-            researching: { active: 1, label: 'Recherchiert Quellen...' },
-            deep_researching: { active: 1, label: 'Tiefenrecherche läuft...' },
-            analyzing: { active: 2, label: 'Analysiert Meldungen...' },
-            factchecking: { active: 3, label: 'Faktencheck läuft...' },
-            cancelling: { active: 0, label: 'Wird abgebrochen...' },
+            queued: { active: 0, label: LangManager.t('progress.queued') },
+            researching: { active: 1, label: LangManager.t('progress.researching') },
+            deep_researching: { active: 1, label: LangManager.t('progress.deep_researching') },
+            analyzing: { active: 2, label: LangManager.t('progress.analyzing') },
+            factchecking: { active: 3, label: LangManager.t('progress.factchecking') },
+            cancelling: { active: 0, label: LangManager.t('progress.cancelling') },
         };
 
         const step = steps[status] || steps.queued;
@@ -236,7 +217,7 @@ const UI = {
         // Queue-Position anzeigen
         let labelText = step.label;
         if (status === 'queued' && extra.queue_position > 1) {
-            labelText = `In Warteschlange (Position ${extra.queue_position})...`;
+            labelText = LangManager.t('progress.queued_position', { position: extra.queue_position });
         } else if (extra.detail) {
             labelText = extra.detail;
         }
@@ -325,24 +306,24 @@ const UI = {
         // Label mit Summary
         const parts = [];
         if (data.new_articles > 0) {
-            parts.push(`${data.new_articles} neue Artikel`);
+            parts.push(LangManager.t('progress.new_articles', { n: data.new_articles }));
         }
         if (data.confirmed_count > 0) {
-            parts.push(`${data.confirmed_count} Fakten bestätigt`);
+            parts.push(LangManager.t('progress.facts_confirmed', { n: data.confirmed_count }));
         }
         if (data.contradicted_count > 0) {
-            parts.push(`${data.contradicted_count} widerlegt`);
+            parts.push(LangManager.t('progress.contradicted', { n: data.contradicted_count }));
         }
-        const summaryText = parts.length > 0 ? parts.join(', ') : 'Keine neuen Entwicklungen';
+        const summaryText = parts.length > 0 ? parts.join(', ') : LangManager.t('progress.no_developments');
         const label = document.getElementById('progress-label');
-        if (label) label.textContent = `Abgeschlossen: ${summaryText}`;
+        if (label) label.textContent = LangManager.t('progress.complete_detail', { summary: summaryText });
 
         // Cancel-Button ausblenden
         const cancelBtn = document.getElementById('progress-cancel-btn');
         if (cancelBtn) cancelBtn.style.display = 'none';
 
         bar.setAttribute('aria-valuenow', '100');
-        bar.setAttribute('aria-valuetext', 'Abgeschlossen');
+        bar.setAttribute('aria-valuetext', LangManager.t('progress.complete'));
     },
 
     /**
@@ -363,8 +344,8 @@ const UI = {
         const label = document.getElementById('progress-label');
         if (label) {
             label.textContent = willRetry
-                ? `Fehlgeschlagen \u2014 erneuter Versuch in ${delay}s...`
-                : `Fehlgeschlagen: ${errorMsg}`;
+                ? LangManager.t('progress.failed_retry', { delay })
+                : LangManager.t('progress.failed', { error: errorMsg });
         }
 
         // Cancel-Button ausblenden
@@ -406,7 +387,7 @@ const UI = {
      * Zusammenfassung mit Inline-Zitaten und Quellenverzeichnis rendern.
      */
     renderSummary(summary, sourcesJson, incidentType) {
-        if (!summary) return '<span style="color:var(--text-tertiary);">Noch keine Zusammenfassung.</span>';
+        if (!summary) return `<span style="color:var(--text-tertiary);">${LangManager.t('empty.no_summary')}</span>`;
 
         let sources = [];
         try { sources = JSON.parse(sourcesJson || '[]'); } catch(e) {}
@@ -451,7 +432,7 @@ const UI = {
         // Nach Quelle aggregieren
         const sourceMap = {};
         articles.forEach(a => {
-            const name = a.source || 'Unbekannt';
+            const name = a.source || LangManager.t('time.unknown');
             if (!sourceMap[name]) {
                 sourceMap[name] = { count: 0, languages: new Set(), urls: [] };
             }
@@ -476,7 +457,7 @@ const UI = {
             .join('');
 
         let html = `<div class="source-overview-header">`;
-        html += `<span class="source-overview-stat">${articles.length} Artikel aus ${sources.length} Quellen</span>`;
+        html += `<span class="source-overview-stat">${LangManager.t('sources.articles_from_sources', { articles: articles.length, sources: sources.length })}</span>`;
         html += `<div class="source-lang-chips">${langChips}</div>`;
         html += `</div>`;
 
@@ -497,17 +478,15 @@ const UI = {
     /**
      * Kategorie-Labels.
      */
-    _categoryLabels: {
-        'nachrichtenagentur': 'Agentur',
-        'oeffentlich-rechtlich': 'ÖR',
-        'qualitaetszeitung': 'Qualität',
-        'behoerde': 'Behörde',
-        'fachmedien': 'Fach',
-        'think-tank': 'Think Tank',
-        'international': 'Intl.',
-        'regional': 'Regional',
-        'boulevard': 'Boulevard',
-        'sonstige': 'Sonstige',
+    _catKeys: ['nachrichtenagentur','oeffentlich_rechtlich','qualitaetszeitung','behoerde','fachmedien','think_tank','international','regional','boulevard','sonstige'],
+    _catDomainMap: {'oeffentlich-rechtlich':'oeffentlich_rechtlich','think-tank':'think_tank'},
+    get _categoryLabels() {
+        const o = {};
+        this._catKeys.forEach(k => {
+            const domainKey = k.replace(/_/g, '-');
+            o[domainKey] = LangManager.t('sources.cat_short_' + k);
+        });
+        return o;
     },
 
     /**
@@ -517,7 +496,7 @@ const UI = {
         const catLabel = this._categoryLabels[feeds[0]?.category] || feeds[0]?.category || '';
         const feedCount = feeds.filter(f => f.source_type !== 'excluded').length;
         const hasMultiple = feedCount > 1;
-        const displayName = domain || feeds[0]?.name || 'Unbekannt';
+        const displayName = domain || feeds[0]?.name || LangManager.t('time.unknown');
         const escapedDomain = this.escape(domain);
 
         if (isExcluded) {
@@ -528,10 +507,10 @@ const UI = {
                     <div class="source-group-info">
                         <span class="source-group-name">${this.escape(displayName)}</span>${notesHtml}
                     </div>
-                    <span class="source-excluded-badge">Gesperrt</span>
+                    <span class="source-excluded-badge">${LangManager.t('sources.excluded')}</span>
                     <div class="source-group-actions">
-                        <button class="btn btn-small btn-secondary" onclick="App.unblockDomain('${escapedDomain}')">Entsperren</button>
-                        <button class="source-delete-btn" onclick="App.deleteDomain('${escapedDomain}')" title="Löschen" aria-label="Löschen">&times;</button>
+                        <button class="btn btn-small btn-secondary" onclick="App.unblockDomain('${escapedDomain}')">${LangManager.t('btn.unblock')}</button>
+                        <button class="source-delete-btn" onclick="App.deleteDomain('${escapedDomain}')" title="${LangManager.t('btn.delete')}" aria-label="${LangManager.t('btn.delete')}">&times;</button>
                     </div>
                 </div>
             </div>`;
@@ -548,22 +527,22 @@ const UI = {
             realFeeds.forEach((feed, i) => {
                 const isLast = i === realFeeds.length - 1;
                 const connector = isLast ? '\u2514\u2500' : '\u251C\u2500';
-                const typeLabel = feed.source_type === 'rss_feed' ? 'RSS' : 'Web';
+                const typeLabel = feed.source_type === 'rss_feed' ? 'RSS' : 'Web';  // RSS/Web are brand names, no translation needed
                 const urlDisplay = feed.url ? this._shortenUrl(feed.url) : '';
                 feedRows += `<div class="source-feed-row">
                     <span class="source-feed-connector">${connector}</span>
                     <span class="source-feed-name">${this.escape(feed.name)}</span>
                     <span class="source-type-badge type-${feed.source_type}">${typeLabel}</span>
                     <span class="source-feed-url" title="${this.escape(feed.url || '')}">${this.escape(urlDisplay)}</span>
-                    <button class="source-edit-btn" onclick="App.editSource(${feed.id})" title="Bearbeiten" aria-label="Bearbeiten">&#9998;</button>
-                    <button class="source-delete-btn" onclick="App.deleteSingleFeed(${feed.id})" title="Löschen" aria-label="Löschen">&times;</button>
+                    <button class="source-edit-btn" onclick="App.editSource(${feed.id})" title="${LangManager.t('btn.edit')}" aria-label="${LangManager.t('btn.edit')}">&#9998;</button>
+                    <button class="source-delete-btn" onclick="App.deleteSingleFeed(${feed.id})" title="${LangManager.t('btn.delete')}" aria-label="${LangManager.t('btn.delete')}">&times;</button>
                 </div>`;
             });
             feedRows += '</div>';
         }
 
         const feedCountBadge = feedCount > 0
-            ? `<span class="source-feed-count">${feedCount} Feed${feedCount !== 1 ? 's' : ''}</span>`
+            ? `<span class="source-feed-count">${feedCount !== 1 ? LangManager.t('sources.feeds_count', {n: feedCount}) : LangManager.t('sources.feed_count', {n: feedCount})}</span>`
             : '';
 
         return `<div class="source-group">
@@ -575,9 +554,9 @@ const UI = {
                 <span class="source-category-badge cat-${feeds[0]?.category || 'sonstige'}">${catLabel}</span>
                 ${feedCountBadge}
                 <div class="source-group-actions" onclick="event.stopPropagation()">
-                    ${!hasMultiple && feeds[0]?.id ? `<button class="source-edit-btn" onclick="App.editSource(${feeds[0].id})" title="Bearbeiten" aria-label="Bearbeiten">&#9998;</button>` : ''}
-                    <button class="btn btn-small btn-secondary" onclick="App.blockDomainDirect('${escapedDomain}')">Sperren</button>
-                    <button class="source-delete-btn" onclick="App.deleteDomain('${escapedDomain}')" title="Löschen" aria-label="Löschen">&times;</button>
+                    ${!hasMultiple && feeds[0]?.id ? `<button class="source-edit-btn" onclick="App.editSource(${feeds[0].id})" title="${LangManager.t('btn.edit')}" aria-label="${LangManager.t('btn.edit')}">&#9998;</button>` : ''}
+                    <button class="btn btn-small btn-secondary" onclick="App.blockDomainDirect('${escapedDomain}')">${LangManager.t('btn.block')}</button>
+                    <button class="source-delete-btn" onclick="App.deleteDomain('${escapedDomain}')" title="${LangManager.t('btn.delete')}" aria-label="${LangManager.t('btn.delete')}">&times;</button>
                 </div>
             </div>
             ${feedRows}
@@ -617,7 +596,7 @@ const UI = {
             // Statistik trotzdem anzeigen
             if (locations && locations.length > 0) {
                 const totalArticles = locations.reduce((s, l) => s + l.article_count, 0);
-                if (statsEl) statsEl.textContent = `${locations.length} Orte / ${totalArticles} Artikel`;
+                if (statsEl) statsEl.textContent = LangManager.t('map.stats', {places: locations.length, articles: totalArticles});
                 if (emptyEl) emptyEl.style.display = 'none';
             }
             return;
@@ -638,7 +617,7 @@ const UI = {
 
         // Statistik
         const totalArticles = locations.reduce((s, l) => s + l.article_count, 0);
-        if (statsEl) statsEl.textContent = `${locations.length} Orte / ${totalArticles} Artikel`;
+        if (statsEl) statsEl.textContent = LangManager.t('map.stats', {places: locations.length, articles: totalArticles});
 
         // Container-Hoehe sicherstellen (Leaflet braucht px-Hoehe)
         if (container.offsetHeight < 50) {
@@ -691,11 +670,11 @@ const UI = {
             popupHtml += `<div class="map-popup-title">${this.escape(loc.location_name)}`;
             if (loc.country_code) popupHtml += ` <span class="map-popup-cc">${this.escape(loc.country_code)}</span>`;
             popupHtml += `</div>`;
-            popupHtml += `<div class="map-popup-count">${loc.article_count} Artikel</div>`;
+            popupHtml += `<div class="map-popup-count">${LangManager.t('map.articles', {n: loc.article_count})}</div>`;
             popupHtml += `<div class="map-popup-articles">`;
             const maxShow = 5;
             loc.articles.slice(0, maxShow).forEach(art => {
-                const headline = this.escape(art.headline || 'Ohne Titel');
+                const headline = this.escape(art.headline || LangManager.t('map.no_title'));
                 const source = this.escape(art.source || '');
                 if (art.source_url) {
                     popupHtml += `<a href="${this.escape(art.source_url)}" target="_blank" rel="noopener" class="map-popup-article">${headline} <span class="map-popup-source">${source}</span></a>`;
@@ -704,7 +683,7 @@ const UI = {
                 }
             });
             if (loc.articles.length > maxShow) {
-                popupHtml += `<div class="map-popup-more">+${loc.articles.length - maxShow} weitere</div>`;
+                popupHtml += `<div class="map-popup-more">${LangManager.t('map.more', {n: loc.articles.length - maxShow})}</div>`;
             }
             popupHtml += `</div></div>`;
 
@@ -744,8 +723,8 @@ const UI = {
             if (layer instanceof L.TileLayer) this._map.removeLayer(layer);
         });
 
-        // Deutsche OSM-Kacheln: deutsche Ortsnamen, einheitlich fuer beide Themes
-        const tileUrl = 'https://tile.openstreetmap.de/{z}/{x}/{y}.png';
+        // OSM-Kacheln je nach Sprache (DE: deutsche Ortsnamen, EN: internationale)
+        const tileUrl = LangManager.mapTileUrl();
         const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>';
 
         L.tileLayer(tileUrl, { attribution, maxZoom: 18 }).addTo(this._map);
diff --git a/src/static/js/lang.js b/src/static/js/lang.js
index 66de728..8eaff43 100644
--- a/src/static/js/lang.js
+++ b/src/static/js/lang.js
@@ -335,6 +335,16 @@ const TRANSLATIONS = {
   'sources.feeds_count':            { de: '{n} Feeds',                                                     en: '{n} Feeds' },
   'sources.feed_count':             { de: '{n} Feed',                                                      en: '{n} Feed' },
   'sources.articles_from_sources':  { de: '{articles} Artikel aus {sources} Quellen',                      en: '{articles} articles from {sources} sources' },
+  'sources.cat_short_nachrichtenagentur': { de: 'Agentur',                                                   en: 'Agency' },
+  'sources.cat_short_oeffentlich_rechtlich': { de: 'ÖR',                                                     en: 'Public' },
+  'sources.cat_short_qualitaetszeitung': { de: 'Qualität',                                                   en: 'Quality' },
+  'sources.cat_short_behoerde':    { de: 'Behörde',                                                          en: 'Gov' },
+  'sources.cat_short_fachmedien':  { de: 'Fach',                                                             en: 'Trade' },
+  'sources.cat_short_think_tank':  { de: 'Think Tank',                                                       en: 'Think Tank' },
+  'sources.cat_short_international': { de: 'Intl.',                                                          en: 'Intl.' },
+  'sources.cat_short_regional':    { de: 'Regional',                                                         en: 'Regional' },
+  'sources.cat_short_boulevard':   { de: 'Boulevard',                                                        en: 'Tabloid' },
+  'sources.cat_short_sonstige':    { de: 'Sonstige',                                                         en: 'Other' },
 
   // ── Sidebar labels ─────────────────────────────────────
   'sidebar.no_adhoc':          { de: 'Keine Ad-hoc-Lagen',                                                 en: 'No ad-hoc incidents' },
@@ -494,6 +504,11 @@ const LangManager = (() => {
       const key = el.getAttribute('data-i18n-title');
       if (key) el.setAttribute('title', t(key));
     });
+
+    // lang-switcher active state
+    document.querySelectorAll('.lang-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.getAttribute('data-lang') === _lang);
+    });
   }
 
   /**
