CLAUDE.md: Auto-Deploy + Promote-UI dokumentiert (TODO -> abgeschlossen)

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

CLAUDE.md

@@ -146,3 +146,94 @@ RULES:
     - "<link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\">"
     - "<link rel=\"apple-touch-icon\" href=\"/assets/images/logos/AegisSightLogo_NavyGold.svg\">"
     - "Fuer Unterverzeichnisse relative Pfade anpassen, z.B. ../favicon.svg"
+
+# ───────────────────────────────────────────────────────────────────
+# STAGING-UMGEBUNG
+# ───────────────────────────────────────────────────────────────────
+
+STAGING:
+  url: https://staging.aegis-sight.de
+  server: 46.225.225.49 (gleicher Host wie Live)
+  container: aegis-website-staging-nginx (eigener Docker-Container)
+  pfad: /opt/v2-Docker/aegis-website-staging/html
+  branch: develop
+  netzwerk_ip: 172.18.0.7 (im v2_internal_net)
+  zugriff: Magic-Link-Login an info@aegis-sight.de (Cookie 30 Tage)
+
+  besonderheit_lagen_daten:
+    erklaerung: |
+      Die Live-Lagen-Daten (/lagen/*/data/*.json) werden vom sync-lagebild.py
+      erzeugt und nicht ins Repo committed. Im Staging-Container ist das
+      Live-/lagen/-Verzeichnis read-only gemountet, damit die Karten-Vorschau
+      auch im Staging mit echten Daten funktioniert.
+    mount_im_compose: /opt/v2-Docker/aegis-website/html/lagen:/usr/share/nginx/html/lagen:ro
+
+  auth_service:
+    pfad: /opt/v2-Docker/aegis-staging-auth
+    service: aegis-staging-auth.service
+    port: 127.0.0.1:8095
+    cookie_domain: staging.aegis-sight.de
+    cookie_name: aegis_staging_auth
+
+WORKFLOW_STAGING_TO_LIVE:
+  1_aenderung_in_develop: |
+    cd /opt/v2-Docker/aegis-website-staging/html
+    git checkout develop
+    # Aenderung machen
+    git add . && git commit -m ...
+    git push origin develop
+  2_staging_aktualisieren_manuell: |
+    ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website-staging/html && git pull'
+    # Kein Container-Reload noetig (statische Files)
+  3_in_browser_pruefen: https://staging.aegis-sight.de
+  4_promote_zu_live: |
+    # Auf Gitea: Pull Request develop -> main, dann mergen
+    # Danach auf Live-Server pullen:
+    ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && git pull'
+
+# ───────────────────────────────────────────────────────────────────
+# AUTO-DEPLOY + PROMOTE-UI
+# ───────────────────────────────────────────────────────────────────
+
+AUTO_DEPLOY:
+  prinzip: |
+    Gitea-Webhook bei Push auf develop -> Listener-Service auf dem Server pullt
+    automatisch + restartet ggf. den Service. Kein manueller git pull mehr noetig.
+
+  listener_service:
+    pfad: /opt/v2-Docker/aegis-staging-deploy
+    service: aegis-staging-deploy.service
+    port: 127.0.0.1:8096
+    deployments:
+      staging: "develop -> /opt/v2-Docker/aegis-website-staging/html"
+      live:    "main    -> /opt/v2-Docker/aegis-website/html"
+    endpoints:
+      "POST /__deploy":      "staging (HMAC ueber Gitea-Webhook)"
+      "POST /__deploy/live": "live (HMAC ueber Promote-UI)"
+    secrets: in /opt/v2-Docker/aegis-staging-deploy/.env (nicht im Repo)
+
+  gitea_webhook:
+    repo: AegisSight/Website
+    url: https://staging.aegis-sight.de/__deploy
+    branch_filter: develop
+
+PROMOTE_UI:
+  url: https://deploy.aegis-sight.de
+  pfad: /opt/v2-Docker/aegis-promote
+  service: aegis-promote.service
+  port: 127.0.0.1:8097
+  zugriff: Magic-Link-Login an info@aegis-sight.de (eigener Cookie deploy.aegis-sight.de)
+  funktion: |
+    Zeigt pro Service (Webseite + Monitor) Live-Stand vs. Staging-Stand.
+    Promote-Button erstellt Gitea-PR develop->main, mergt ihn auto, und triggert
+    den Live-Deploy via HMAC-signed Webhook am Listener-Service.
+
+WORKFLOW_KOMPLETT:
+  1_entwickeln: |
+    git checkout develop
+    # Aenderung
+    git add . && git commit && git push origin develop
+    # -> Auto-Deploy pullt in /opt/v2-Docker/aegis-website-staging/html
+  2_pruefen_staging:    https://staging.aegis-sight.de/
+  3_promoten:           https://deploy.aegis-sight.de/  (Promote-Knopf)
+  4_pruefen_live:       https://aegis-sight.de/

LAUNCH-CHECKLIST.md

@@ -0,0 +1,365 @@
+# LAUNCH-CHECKLIST — Online-Schaltung der neuen AegisSight-Hauptseite
+
+**Zielgruppe dieser Datei:** Claude (oder ein Mensch) auf einem anderen Rechner, der diese Datei vollständig liest und Schritt für Schritt ausführt. Alle Anweisungen sind so geschrieben, dass keine Eigenentscheidungen nötig sind.
+
+**Auslöser:** Der User sagt sinngemäß "Jo stell online" oder "Schalte die Vorschau live".
+
+**Was passiert:** Die Vorschauseite (`/vorschau/`) wird zur neuen Hauptseite (`/`). Die alte Hauptseite ("Sicherheit Made in Germany") wird in `_archiv/` verschoben. SEO wird aktiviert (robots.txt + sitemap.xml + Entfernung der noindex-Meta-Tags). Cookie-Consent + Umami sind bereits eingebaut.
+
+---
+
+## 0. Voraussetzungen — vor dem Start prüfen
+
+- [ ] **Iran-Lage-Anpassung ist fertig.** Der zuständige Kollege hat die zu langen Iran-Lagen-Texte gekürzt/strukturiert. Sichtcheck: `https://aegis-sight.de/vorschau/` (Passwort: siehe Pass-Manager) → Demos-Karussell → Iran-Karte sollte ähnlich hoch sein wie Cyberangriffe und Deepfakes.
+- [ ] **SSH-Zugriff** auf `claude-dev@46.225.225.49` funktioniert.
+- [ ] **Git-Push-Rechte** für `https://gitea-undso.aegis-sight.de/AegisSight/Website.git` vorhanden (Token im Remote-URL eingebettet).
+- [ ] **User hat ausdrücklich Go gegeben** ("Stell online", "Schalte live", o.ä.).
+
+Wenn ein Punkt nicht erfüllt: NICHT FORTSETZEN, dem User Bescheid geben.
+
+---
+
+## 1. Pre-Flight-Backup (Pflicht!)
+
+Werden auf dem Server (`46.225.225.49`) ausgeführt:
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && git tag pre-launch-$(date +%Y%m%d-%H%M%S) && git push origin --tags'
+ssh claude-dev@46.225.225.49 'tar -czf /home/claude-dev/website-snapshot-$(date +%Y%m%d-%H%M%S).tar.gz -C /opt/v2-Docker/aegis-website html'
+ssh claude-dev@46.225.225.49 'ls -lh /home/claude-dev/website-snapshot-*.tar.gz | tail -1'
+```
+
+Erwartet: Tar-Archiv ~40–60 MB. Git-Tag `pre-launch-YYYYMMDD-HHMMSS` ist gepusht.
+
+**Notiere dir den Git-Tag-Namen** — du brauchst ihn fürs Rollback.
+
+---
+
+## 2. Schaltungs-Schritte (in genau dieser Reihenfolge)
+
+Alle Pfade relativ zu `/opt/v2-Docker/aegis-website/html/`. Alle Commands per `ssh claude-dev@46.225.225.49 '...'` ausführen.
+
+### 2.1  Archiv-Verzeichnis vorbereiten
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && mkdir -p _archiv'
+```
+
+### 2.2  Alte Hauptseite-Files in `_archiv/` verschieben
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  mv index.html _archiv/old-index.html && \
+  cp -r css _archiv/old-css && \
+  cp -r js _archiv/old-js && \
+  mv robots.txt _archiv/old-robots.txt && \
+  mv assets/videos/AFv6.mp4 _archiv/ 2>/dev/null; \
+  mv assets/videos/hero-code-abstract.mp4 _archiv/ 2>/dev/null; \
+  mv assets/videos/hero-data-flow.mp4 _archiv/ 2>/dev/null; \
+  mv assets/videos/hero-network-viz.mp4 _archiv/ 2>/dev/null; \
+  ls -la _archiv/'
+```
+
+**Wichtig:** `css` und `js` werden mit `cp -r` (kopiert, NICHT verschoben), weil die Lagen-Seiten weiterhin `/js/config.js`, `/js/translations.js`, `/js/mobile-nav.js` aus dem alten /js/-Ordner brauchen. Die alten /css/-Stylesheets brauchen die Lagen ebenfalls (`/css/main.css`, `/css/fonts.css`, `/css/mobile.css`).
+
+### 2.3  Neue Vorschau-Files an Hauptseite-Position kopieren
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  cp vorschau/index.html index.html && \
+  cp vorschau/css/style.css css/vorschau-style.css && \
+  cp vorschau/js/app.js js/vorschau-app.js && \
+  mkdir -p assets/videos/vorschau-hero && \
+  cp vorschau/videos/* assets/videos/vorschau-hero/ && \
+  ls -la index.html css/vorschau-style.css js/vorschau-app.js assets/videos/vorschau-hero/'
+```
+
+**Begründung:** Die Vorschau-CSS heißt `style.css` und liegt unter `vorschau/css/`. Wenn wir sie nach `/css/style.css` packen, würden wir die alte Hauptseite-CSS überschreiben (die für Lagen-Seiten gebraucht wird, falls dort references existieren). Daher: eindeutige Namen `vorschau-style.css` und `vorschau-app.js`.
+
+### 2.4  Pfade in der neuen `index.html` anpassen
+
+Die Vorschau-`index.html` referenziert relativ:
+- `<link rel="stylesheet" href="css/style.css">` → muss zu `css/vorschau-style.css`
+- `<script src="js/app.js"></script>` → muss zu `js/vorschau-app.js`
+- `videos/hero-slide-X-monitoring.mp4` → muss zu `assets/videos/vorschau-hero/hero-slide-X-monitoring.mp4`
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  sed -i "s|href=\"css/style.css\"|href=\"/css/vorschau-style.css\"|g" index.html && \
+  sed -i "s|src=\"js/app.js\"|src=\"/js/vorschau-app.js\"|g" index.html && \
+  sed -i "s|src=\"videos/hero-slide-|src=\"/assets/videos/vorschau-hero/hero-slide-|g" index.html && \
+  grep -E "(vorschau-style|vorschau-app|vorschau-hero)" index.html | head -10'
+```
+
+Erwartet: 7 Treffer (1× CSS, 1× JS, 5× Videos).
+
+### 2.5  Passwort-Gate aus `index.html` entfernen
+
+Folgenden Block ersatzlos löschen — es sind drei zusammenhängende Bereiche:
+1. `<!-- Password Gate -->` Kommentar + dahinterliegender `<style>`-Block
+2. `<div id="login-gate">...</div>`
+3. `<script>` mit `var PW_HASH=...` etc.
+
+Sed-Lösung (einzeilig):
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  python3 -c "
+import re
+with open(\"index.html\") as f: c = f.read()
+# Entferne den kompletten Block von '<!-- Password Gate -->' bis nach dem login-gate-Script
+c = re.sub(r'<!-- Password Gate -->.*?if\(getCookie.*?</script>', '', c, count=1, flags=re.DOTALL)
+with open(\"index.html\", \"w\") as f: f.write(c)
+print(\"Passwort-Gate entfernt\")
+"'
+```
+
+Verifikation:
+
+```bash
+ssh claude-dev@46.225.225.49 'grep -c "PW_HASH\|login-gate" /opt/v2-Docker/aegis-website/html/index.html'
+```
+
+Erwartet: `0`
+
+### 2.6  noindex/nofollow-Meta-Tags entfernen
+
+In `index.html` und in den drei Lagen-Seiten:
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  for f in index.html lagen/iran-konflikt/index.html lagen/cyberangriffe/index.html lagen/deepfakes/index.html; do \
+    sed -i "/<meta name=\"robots\" content=\"noindex/d" "$f"; \
+  done && \
+  echo "--- Verbliebene noindex-Tags (sollte 0 sein):"; \
+  grep -c noindex index.html lagen/*/index.html'
+```
+
+Erwartet: Alle Dateien zeigen `0`.
+
+### 2.7  robots.txt aktivieren (Crawler erlaubt)
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  mv robots-launch.txt robots.txt && \
+  head -10 robots.txt'
+```
+
+Erwartet: erste Zeilen zeigen `Allow: /` und `Sitemap:` Verweis.
+
+### 2.8  sitemap.xml aktivieren
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  mv sitemap-launch.xml sitemap.xml && \
+  head -5 sitemap.xml'
+```
+
+### 2.9  Vorschau-Verzeichnis löschen
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  rm -rf vorschau && \
+  ls -d vorschau 2>&1 | tail -1'
+```
+
+Erwartet: `ls: cannot access 'vorschau': No such file or directory`
+
+### 2.10  `.bak.*`-Dateien aufräumen (optional)
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  find . -name "*.bak.*" -type f -delete && \
+  find . -name "*.bak.*" -type f | wc -l'
+```
+
+Erwartet: `0`
+
+### 2.11  Git-Commit + Push
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  git add -A && \
+  git status --short | head -30'
+```
+
+Status prüfen — sollte zeigen:
+- `D index.html` (alte gelöscht), `?? index.html` (neue erscheint via add) → wird als "renamed" oder M erkannt
+- Diverse Dateien in `_archiv/` neu
+- `vorschau/` komplett gelöscht
+- `robots.txt`, `sitemap.xml` erscheinen oder werden modifiziert
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  git commit -m "Online-Schaltung: Vorschau ist die neue Hauptseite
+
+- Vorschau-Inhalt aus /vorschau/ nach /index.html, /css/vorschau-style.css, /js/vorschau-app.js, /assets/videos/vorschau-hero/ verschoben
+- Alte Hauptseite (Sicherheit Made in Germany) in /_archiv/ archiviert
+- Passwort-Gate entfernt
+- robots.txt: Crawler erlaubt (außer AI-Crawler), Sitemap-Verweis aktiviert
+- sitemap.xml aktiviert (Hauptseite, 3 Lagen, Impressum, Datenschutz)
+- noindex/nofollow Meta-Tags aus Hauptseite und Lagen entfernt
+
+Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>" && \
+  git push origin main 2>&1 | tail -5'
+```
+
+---
+
+## 3. Smoke-Tests (sofort nach Push)
+
+Jeden Test einzeln ausführen, erwartete Antwort daneben prüfen:
+
+```bash
+# Hauptseite läuft:
+curl -sI https://aegis-sight.de/ | head -1
+# Erwartet: HTTP/1.1 200 OK
+
+# Title ist da:
+curl -s https://aegis-sight.de/ | grep -c '<title>AegisSight Monitor'
+# Erwartet: 1
+
+# noindex ist WEG:
+curl -s https://aegis-sight.de/ | grep -c 'noindex'
+# Erwartet: 0
+
+# Passwort-Gate ist WEG:
+curl -s https://aegis-sight.de/ | grep -c 'PW_HASH\|login-gate'
+# Erwartet: 0
+
+# robots.txt erlaubt Crawling:
+curl -s https://aegis-sight.de/robots.txt | grep -c '^Allow:'
+# Erwartet: ≥1
+
+# sitemap.xml ist da:
+curl -sI https://aegis-sight.de/sitemap.xml | head -1
+# Erwartet: HTTP/1.1 200 OK
+
+# Vorschau ist 404:
+curl -sI https://aegis-sight.de/vorschau/ | head -1
+# Erwartet: HTTP/1.1 404 Not Found
+
+# Lagen erreichbar:
+curl -sI https://aegis-sight.de/lagen/iran-konflikt/ | head -1
+# Erwartet: HTTP/1.1 200 OK
+curl -sI https://aegis-sight.de/lagen/cyberangriffe/ | head -1
+# Erwartet: HTTP/1.1 200 OK
+curl -sI https://aegis-sight.de/lagen/deepfakes/ | head -1
+# Erwartet: HTTP/1.1 200 OK
+
+# Cookie-Consent Asset erreichbar:
+curl -sI https://aegis-sight.de/cookie-consent.js | head -1
+# Erwartet: HTTP/1.1 200 OK
+
+# Impressum + Datenschutz:
+curl -sI https://aegis-sight.de/impressum.html | head -1
+curl -sI https://aegis-sight.de/datenschutz.html | head -1
+# Erwartet: beide HTTP/1.1 200 OK
+
+# OG-Image:
+curl -sI https://aegis-sight.de/assets/images/og-image.png | head -1
+# Erwartet: HTTP/1.1 200 OK
+```
+
+Wenn ALLE Smoke-Tests grün: **Sage dem User Bescheid, dass die Live-Schaltung erfolgreich war**, und bitte um manuelle Verifikation im Browser (Hard-Reload Strg+F5):
+- Layout korrekt
+- Cookie-Banner erscheint
+- Kontaktformular funktioniert
+- Hero-Videos laufen
+- Lagen-Karussell zeigt aktuelle Daten
+- Footer hat Cookie-Einstellungen-Link
+
+---
+
+## 4. Notfall-Rollback (falls Smoke-Tests fehlschlagen)
+
+**Variante A — Git-Rollback (bevorzugt):**
+
+```bash
+# Den Tag-Namen aus Schritt 1 verwenden (z.B. pre-launch-20260427-093015)
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  git reset --hard pre-launch-YYYYMMDD-HHMMSS && \
+  git push --force-with-lease origin main && \
+  git status'
+```
+
+⚠ **WICHTIG**: `--force-with-lease` ist sicherer als `--force`. Im seltenen Fall, dass jemand parallel committed hat, schlägt es fehl statt Daten zu überschreiben.
+
+**Variante B — Server-Snapshot zurückspielen:**
+
+```bash
+ssh claude-dev@46.225.225.49 'tar -xzf /home/claude-dev/website-snapshot-YYYYMMDD-HHMMSS.tar.gz -C /opt/v2-Docker/aegis-website/'
+```
+
+**Nach Rollback**: Smoke-Tests erneut laufen lassen — Vorschau sollte wieder unter `/vorschau/` erreichbar sein, Hauptseite zeigt wieder die alte Version.
+
+---
+
+## 5. Manuelle Aufgaben (User/Kollege außerhalb des Skripts)
+
+- **Browser-Test** auf `https://aegis-sight.de/` (Hard-Reload Strg+F5):
+  - Layout, Hero-Videos, Karussell, Kontaktformular
+  - Cookie-Banner erscheint, Akzeptieren funktioniert
+  - Mobile-View testen
+  - Lagen-Footer-Links funktionieren (z.B. `/#features`, `/#contact`)
+- **OG-Image-Preview** testen: URL in WhatsApp/Telegram/LinkedIn einfügen → Vorschaubild sollte erscheinen
+- **Eintrag in Search Console / Bing Webmaster:** ENTFÄLLT laut User-Wunsch (eigener Tracking-Pixel via Umami)
+
+---
+
+## 6. Notfall-Wiederherstellung der alten Hauptseite (separater, eigenständiger Block)
+
+Falls jemand die alte Hauptseite ("Sicherheit Made in Germany") jemals wieder sehen/wiederherstellen möchte:
+
+**Option A — aus `_archiv/` zurückkopieren:**
+
+```bash
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  ls _archiv/'
+# Zeigt: old-index.html, old-css/, old-js/, old-robots.txt, old-videos
+```
+
+Ein einzelner File z.B.:
+
+```bash
+ssh claude-dev@46.225.225.49 'cp /opt/v2-Docker/aegis-website/html/_archiv/old-index.html /tmp/old-index.html && head -30 /tmp/old-index.html'
+```
+
+**Option B — aus Git-History wiederherstellen (auch wenn `_archiv/` mal gelöscht würde):**
+
+```bash
+# Letzten Commit finden, der die alte index.html noch enthielt:
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  git log --all --diff-filter=D --pretty=format:"%H %s" -- index.html | head -5'
+
+# Dann die alte Datei aus diesem Commit zurückholen:
+ssh claude-dev@46.225.225.49 'cd /opt/v2-Docker/aegis-website/html && \
+  git show <commit-hash>^:index.html > /tmp/old-index.html'
+```
+
+Analog für `css/`, `js/` etc.
+
+---
+
+## 7. Anhang — Was wird wo geändert (Übersicht)
+
+| Pfad | Vor Schaltung | Nach Schaltung |
+|---|---|---|
+| `/index.html` | "Sicherheit Made in Germany" (alte Hauptseite) | AegisSight Monitor (war Vorschau) |
+| `/vorschau/` | passwortgeschützte Vorschau | gelöscht (404) |
+| `/css/style.css` (alt) | aktiv (alte Hauptseite) | unter `/_archiv/old-css/style.css` |
+| `/css/vorschau-style.css` | nicht existent | aktiv (für neue Hauptseite) |
+| `/js/main.js` (alt) | aktiv | unter `/_archiv/old-js/main.js` |
+| `/js/vorschau-app.js` | nicht existent | aktiv |
+| `/css/main.css`, `/css/fonts.css`, `/css/mobile.css` | aktiv (für Hauptseite + Lagen) | aktiv (weiterhin für Lagen) |
+| `/js/config.js`, `/js/translations.js`, `/js/mobile-nav.js` | aktiv | aktiv (für Lagen) |
+| `/robots.txt` | blockiert alle Crawler | erlaubt Crawler (außer AI/Spam) |
+| `/sitemap.xml` | nicht existent | aktiv |
+| `/lagen/*/index.html` | hat noindex/nofollow | wird indexierbar |
+| `/cookie-consent.js`, `/cookie-consent.css` | aktiv (auf alter Hauptseite) | aktiv (auf neuer Hauptseite + Lagen) |
+| `/assets/images/og-image.png` | bereits vorhanden | weiterhin vorhanden |
+| `/datenschutz.html` | bereits erweitert (Kontakt + Umami) | unverändert |
+
+---
+
+**Bei Fragen oder unerwarteten Outputs:** NICHT improvisieren. Dem User die genaue Fehlermeldung melden und Anweisung abwarten.

css/style.css

@@ -60,80 +60,54 @@ a { color:inherit; text-decoration:none; }
 .mobile-overlay { position:fixed; inset:0; background:rgba(10,24,50,0.3); z-index:998; opacity:0; pointer-events:none; transition:opacity 0.3s; }
 .mobile-overlay.open { opacity:1; pointer-events:all; }
 
-/* ==================== HERO ==================== */
+/* ==================== HERO (Full-Video mit Endcard) ==================== */
-.hero { position:relative; min-height:88vh; display:flex; align-items:center; padding-top:var(--nav-height); overflow:hidden; background:var(--navy); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px)); margin-bottom:-60px; z-index:1; }
+.hero { position:relative; min-height:88vh; overflow:hidden; background:var(--navy); clip-path:polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px)); margin-bottom:-60px; z-index:1; }
-
-
-.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,24,50,0.95) 0%,rgba(19,40,68,0.98) 50%,rgba(10,24,50,0.95) 100%); z-index:1; }
-
-.hero-content { position:relative; z-index:2; max-width:700px; padding:80px 24px; color:var(--white); }
-.hero-title { font-size:3.4rem; font-weight:700; line-height:1.1; margin-bottom:20px; letter-spacing:-0.02em; color:var(--white); }
-.hero-claim { font-size:1.45rem; font-weight:300; line-height:1.5; margin-bottom:24px; color:rgba(255,255,255,0.9); }
 .gold { color:var(--gold); font-weight:600; }
-.hero-sub { font-size:0.95rem; color:rgba(255,255,255,0.55); line-height:1.7; margin-bottom:36px; }
-.hero-cta { display:flex; gap:16px; flex-wrap:wrap; }
 
+/* Overlay-Layer für Text + Navigation */
+.hero-content { position:absolute; inset:0; z-index:4; color:var(--white); pointer-events:none; }
+.hero-content > * { pointer-events:auto; }
+
+/* Brand (Titel + Tagline): nur während Endcard sichtbar, in Hero-Mitte */
+.hero-brand { position:absolute; top:50%; left:0; right:0; padding:0 24px; text-align:center; transform:translateY(-50%); opacity:0; transition:opacity 0.5s ease; pointer-events:none; }
+.hero.endcard .hero-brand { opacity:1; transition-delay:0.35s; pointer-events:auto; }
+.hero-title { font-size:3.2rem; font-weight:700; line-height:1.1; letter-spacing:-0.02em; color:var(--white); margin:0; }
+.hero-tagline { font-size:1.2rem; font-weight:300; color:rgba(255,255,255,0.9); margin-top:12px; }
 
 /* ==================== HERO SLIDER ==================== */
-.hero-brand { margin-bottom:28px; }
+/* Slider: unter der Navbar beginnen, oberhalb der Dots-Zone enden (60px Reserve fuer Dots) */
-.hero-tagline { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.6); margin-top:8px; }
+.hero-slider { position:absolute; top:var(--nav-height); left:0; right:0; bottom:60px; z-index:1; }
+.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 0.6s ease; pointer-events:none; }
+.hero-slide.active { opacity:1; pointer-events:auto; }
+.hero-slide.exiting { opacity:0; transition:opacity 0.4s ease; }
 
-.hero-slider { position:relative; min-height:280px; }
+/* Video füllt den Slide (contain = komplett sichtbar, Navy-Letterbox) */
-.hero-slide { position:absolute; top:0; left:0; width:100%; opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; pointer-events:none; visibility:hidden; }
+.hero-slide-video { position:absolute; inset:0; overflow:hidden; transition:opacity 0.4s ease; }
-.hero-slide.active { position:relative; opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; }
+.hero-slide-video video { display:block; width:100%; height:100%; object-fit:contain; background:var(--navy); }
-.hero-slide.exiting { opacity:0; transform:translateY(-12px); transition:opacity 0.4s ease, transform 0.4s ease; }
+/* Beim Endcard-State Video ausfaden */
+.hero-slide.ended .hero-slide-video { opacity:0; }
 
-.hero-slide-inner { display:flex; gap:40px; align-items:flex-start; }
+/* Per-Slide-Bottom (Beispieltext + CTA): nur während Endcard sichtbar, unter dem Titel */
-.hero-slide-text-col { flex:1; min-width:0; }
+.hero-slide-bottom { position:absolute; left:0; right:0; bottom:140px; padding:0 32px; text-align:center; opacity:0; transition:opacity 0.5s ease; pointer-events:none; }
-.hero-slide-media-col { flex:0 0 360px; display:none; }
+.hero-slide.ended .hero-slide-bottom { opacity:1; transition-delay:0.5s; pointer-events:auto; }
-.hero-slide-media-col:has(img) { display:block; }
+.hero-slide-example { font-size:1.15rem; font-weight:400; line-height:1.55; color:rgba(255,255,255,0.9); margin:0 auto 24px; max-width:820px; padding:0; border:0; }
-.hero-slide-media-col img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,0.3); }
+.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
-
-.hero-slide-label { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:var(--gold); color:var(--navy); margin-bottom:14px; }
-.hero-slide-headline { font-size:2rem; font-weight:700; line-height:1.15; margin-bottom:16px; color:var(--white); letter-spacing:-0.01em; }
-.hero-slide-text { font-size:1.05rem; font-weight:300; line-height:1.65; color:rgba(255,255,255,0.8); margin-bottom:12px; max-width:640px; }
-.hero-slide-example { font-size:0.88rem; font-weight:400; line-height:1.5; color:var(--gold); opacity:0.85; margin-bottom:24px; max-width:640px; padding-left:14px; border-left:2px solid rgba(200,168,81,0.4); }
-.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; }
 .hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; }
 
-.hero-slider-nav { display:flex; align-items:center; gap:20px; margin-top:32px; }
+/* Slider-Navigation: Dots zentriert ganz unten im Chevron-Band, ausserhalb des Video-Bereichs. */
-.hero-slider-dots { display:flex; gap:10px; }
+.hero-slider-nav { position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; padding:0 24px; pointer-events:none; z-index:5; }
+.hero-slider-dots { display:flex; gap:12px; pointer-events:auto; }
 .hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; }
 .hero-dot.active { background:var(--gold); }
-.hero-slider-arrows { display:flex; gap:8px; margin-left:auto; }
-.hero-arrow { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); background:transparent; color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
-.hero-arrow:hover { border-color:var(--gold); color:var(--gold); }
 
+.hero-slider-arrows { /* Container - Pfeile positionieren sich absolut relativ zu hero-content */ }
+.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,0.35); background:rgba(10,24,50,0.35); color:var(--white); font-size:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); z-index:5; }
+.hero-arrow:hover { border-color:var(--gold); color:var(--gold); background:rgba(10,24,50,0.6); }
+.hero-arrow-prev { left:24px; }
+.hero-arrow-next { right:24px; }
 
-/* ==================== HERO SLIDER ==================== */
+/* Altes hero-overlay nicht mehr verwendet */
-.hero-brand { margin-bottom:28px; }
+.hero-overlay { display:none; }
-.hero-tagline { font-size:1.05rem; font-weight:300; color:rgba(255,255,255,0.6); margin-top:8px; }
-
-.hero-slider { position:relative; min-height:280px; }
-.hero-slide { position:absolute; top:0; left:0; width:100%; opacity:0; transform:translateY(12px); transition:opacity 0.6s ease, transform 0.6s ease; pointer-events:none; visibility:hidden; }
-.hero-slide.active { position:relative; opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; }
-.hero-slide.exiting { opacity:0; transform:translateY(-12px); transition:opacity 0.4s ease, transform 0.4s ease; }
-
-.hero-slide-inner { display:flex; gap:40px; align-items:flex-start; }
-.hero-slide-text-col { flex:1; min-width:0; }
-.hero-slide-media-col { flex:0 0 360px; display:none; }
-.hero-slide-media-col:has(img) { display:block; }
-.hero-slide-media-col img { width:100%; height:auto; border-radius:var(--radius-lg); box-shadow:0 8px 32px rgba(0,0,0,0.3); }
-
-.hero-slide-label { display:inline-block; padding:4px 14px; border-radius:20px; font-size:0.72rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; background:var(--gold); color:var(--navy); margin-bottom:14px; }
-.hero-slide-headline { font-size:2rem; font-weight:700; line-height:1.15; margin-bottom:16px; color:var(--white); letter-spacing:-0.01em; }
-.hero-slide-text { font-size:1.05rem; font-weight:300; line-height:1.65; color:rgba(255,255,255,0.8); margin-bottom:12px; max-width:640px; }
-.hero-slide-example { font-size:0.88rem; font-weight:400; line-height:1.5; color:var(--gold); opacity:0.85; margin-bottom:24px; max-width:640px; padding-left:14px; border-left:2px solid rgba(200,168,81,0.4); }
-.hero-slide-cta { display:flex; gap:16px; flex-wrap:wrap; }
-.hero-slide-cta .btn-placeholder { opacity:0.5; cursor:default; border-style:dashed; pointer-events:none; }
-
-.hero-slider-nav { display:flex; align-items:center; gap:20px; margin-top:32px; }
-.hero-slider-dots { display:flex; gap:10px; }
-.hero-dot { width:10px; height:10px; border-radius:50%; border:2px solid var(--gold); background:transparent; cursor:pointer; transition:all 0.3s; padding:0; }
-.hero-dot.active { background:var(--gold); }
-.hero-slider-arrows { display:flex; gap:8px; margin-left:auto; }
-.hero-arrow { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); background:transparent; color:var(--white); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
-.hero-arrow:hover { border-color:var(--gold); color:var(--gold); }
 
 /* ==================== BUTTONS ==================== */
 .btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 28px; border-radius:var(--radius); font-family:inherit; font-size:0.95rem; font-weight:600; cursor:pointer; transition:all 0.2s; border:2px solid transparent; text-decoration:none; }
@@ -165,6 +139,7 @@ a { color:inherit; text-decoration:none; }
 .divider-diagonal { background:var(--base); }
 .divider-diagonal-dark { background:var(--base); }
 .divider-gradient-alt-to-base { height:40px; background:linear-gradient(to bottom, var(--alt-solid), var(--base)); }
+.divider-gradient-base-to-alt { height:60px; background:linear-gradient(to bottom, var(--base), var(--alt-solid)); }
 .divider-gradient-dark-to-base { height:80px; background:linear-gradient(to bottom, var(--navy), var(--base)); }
 .divider-gradient-dark-to-alt { height:60px; background:linear-gradient(to bottom, var(--navy), var(--alt-solid)); }
 
@@ -198,12 +173,20 @@ a { color:inherit; text-decoration:none; }
 .workflow-connector { width:60px; height:2px; background:var(--gold); margin-top:23px; flex-shrink:0; opacity:0.4; }
 
 /* ==================== FEATURES ==================== */
-.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s; }
+.feature-card { background:var(--white); border-radius:var(--radius-lg); padding:28px 24px; box-shadow:var(--shadow); transition:box-shadow 0.3s,transform 0.3s,border-color 0.3s,background 0.3s; border:1px solid transparent; }
 .feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-3px); }
-.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; }
+.feature-icon { width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:var(--alt-solid); border-radius:var(--radius); margin-bottom:14px; border:1px solid transparent; }
 .feature-card h3 { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:8px; }
 .feature-card p { font-size:0.88rem; color:var(--text-light); line-height:1.6; }
 
+/* Features im dunklen Section-Kontext: Glasmorphism mit Gold-Akzent */
+.section-dark .feature-card { background:rgba(255,255,255,0.04); border-color:rgba(200,168,81,0.2); box-shadow:none; }
+.section-dark .feature-card:hover { border-color:rgba(200,168,81,0.5); background:rgba(255,255,255,0.06); transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
+.section-dark .feature-card h3 { color:var(--white); }
+.section-dark .feature-card p { color:rgba(255,255,255,0.7); }
+.section-dark .feature-icon { background:rgba(200,168,81,0.15); border-color:rgba(200,168,81,0.3); }
+.section-dark .feature-icon img { filter:brightness(0) saturate(100%) invert(74%) sepia(49%) saturate(471%) hue-rotate(2deg) brightness(91%) contrast(83%); }
+
 /* ==================== DEMOS SECTION ==================== */
 #demos { padding-top:48px; }
 
@@ -219,6 +202,8 @@ a { color:inherit; text-decoration:none; }
 .feature-statement { text-align:center; max-width:700px; margin:0 auto 48px; padding:0 24px; }
 .feature-statement-text { font-size:1.6rem; font-weight:700; color:var(--navy); line-height:1.35; margin-bottom:12px; letter-spacing:-0.01em; }
 .feature-statement-sub { font-size:1rem; color:var(--text-light); line-height:1.6; }
+.section-dark .feature-statement-text { color:var(--white); }
+.section-dark .feature-statement-sub { color:rgba(255,255,255,0.7); }
 @media(max-width:768px) { .feature-statement-text { font-size:1.3rem; } }
 
 /* ==================== 3D CAROUSEL ==================== */
@@ -321,10 +306,9 @@ a { color:inherit; text-decoration:none; }
 @media(max-width:1024px) {
     .grid-3 { grid-template-columns:repeat(2,1fr); }
     .grid-4 { grid-template-columns:repeat(2,1fr); }
-    .hero-title { font-size:2.8rem; }
+    .hero-title { font-size:2.5rem; }
     .section { padding:64px 0; }
     .workflow-connector { width:40px; }
-    .hero-slide-media-col { flex:0 0 280px; }
 }
 
 @media(max-width:768px) {
@@ -332,24 +316,20 @@ a { color:inherit; text-decoration:none; }
     .mobile-menu-toggle { display:flex; }
     .grid-3,.grid-4 { grid-template-columns:1fr; gap:20px; }
     .hero { min-height:75vh; }
-    .hero-content { padding:48px 24px; }
+    .hero-brand { padding:0 20px; }
-    .hero-title { font-size:2.1rem; }
+    .hero-title { font-size:1.9rem; }
-    .hero-claim { font-size:1.15rem; }
+    .hero-tagline { font-size:0.95rem; margin-top:8px; }
+    .hero-slide-bottom { bottom:110px; padding:0 20px; }
+    .hero-slide-example { font-size:0.95rem; margin-bottom:18px; }
+    .hero-slide-cta { flex-direction:column; }
+    .hero-slide-cta .btn { width:100%; }
+    .hero-slider-nav { bottom:18px; }
+    .hero-slider-arrows { display:none; }
     .section { padding:48px 0; }
     .section-title { font-size:1.6rem; }
     .workflow { flex-direction:column; align-items:center; gap:8px; }
     .workflow-connector { width:2px; height:32px; margin:0; }
     .workflow-step { max-width:100%; padding:16px 0; }
-    .hero-cta { flex-direction:column; }
-    .hero-cta .btn { width:100%; }
-    .hero-slider { min-height:320px; }
-    .hero-slide-headline { font-size:1.5rem; }
-    .hero-slide-text { font-size:0.95rem; }
-    .hero-slide-inner { flex-direction:column; gap:20px; }
-    .hero-slide-media-col { flex:none; width:100%; }
-    .hero-slider-arrows { display:none; }
-    .hero-slide-cta { flex-direction:column; }
-    .hero-slide-cta .btn { width:100%; }
     .footer-content { flex-direction:column; text-align:center; gap:16px; }
     
     #map-container { height:300px; }
@@ -368,7 +348,128 @@ a { color:inherit; text-decoration:none; }
 }
 
 @media(max-width:480px) {
-    .hero-title { font-size:1.8rem; }
+    .hero-title { font-size:1.65rem; }
+    .hero-tagline { font-size:0.9rem; }
+    .hero-slide-example { font-size:0.9rem; }
     .container { padding:0 16px; }
-    
 }
+
+/* Marker-Cluster Dark Theme */
+.marker-cluster-small,
+.marker-cluster-medium,
+.marker-cluster-large {
+    background: rgba(21, 29, 46, 0.8);
+}
+.marker-cluster-small div,
+.marker-cluster-medium div,
+.marker-cluster-large div {
+    background: rgba(200, 168, 81, 0.9);
+    color: #0A1832;
+    font-weight: 600;
+}
+
+/* === Neueste Entwicklungen (Live-Monitoring Vorschau) === */
+.dev-list-heading {
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.8px;
+    text-transform: uppercase;
+    color: #C8A851;
+    margin-bottom: 10px;
+}
+.dev-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.dev-bullet {
+    background: rgba(30, 45, 69, 0.45);
+    border-left: 3px solid #C8A851;
+    border-radius: 4px;
+    padding: 8px 12px;
+    text-align: left;
+}
+.dev-bullet-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+    flex-wrap: wrap;
+}
+.dev-sources {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: center;
+    min-width: 0;
+}
+.dev-source-pill {
+    display: inline-block;
+    padding: 2px 8px;
+    background: rgba(200, 168, 81, 0.15);
+    color: #E8ECF4;
+    border-radius: 3px;
+    font-size: 0.7rem;
+    font-weight: 500;
+    text-decoration: none;
+    line-height: 1.5;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    font-variant-numeric: tabular-nums;
+}
+a.dev-source-pill:hover {
+    background: rgba(200, 168, 81, 0.3);
+    text-decoration: none;
+    color: #E8ECF4;
+}
+.dev-time {
+    color: #8896AB;
+    font-size: 0.7rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+.dev-body {
+    font-size: 0.85rem;
+    line-height: 1.45;
+    color: #E8ECF4;
+}
+
+/* ==================== HELLIGKEITS-TONLEITER (Test) ==================== */
+/* Vier helle Sections in vier Helligkeitsstufen — Seite "atmet" beim Scrollen
+   sanft von hell nach kühler, mündet hart in den dunklen Footer. */
+:root {
+    --tone-1: #F5F7FA;  /* Problem (hellster) */
+    --tone-2: #ECF0F5;  /* Workflow */
+    --tone-3: #E4EAF1;  /* Demos */
+    --tone-4: #ECF2F9;  /* Contact (hell blau-grau-weiß, frischer Akzent vor Trust) */
+}
+#problem  { background: var(--tone-1); }
+#solution { background: var(--tone-2); }
+#demos    { background: var(--tone-3); }
+#contact  { background: var(--tone-4); }
+
+/* Divider-Übergänge an die Tonstufen anpassen (Adjacent-Sibling) */
+#problem + .divider  { background: linear-gradient(to bottom, var(--tone-1), var(--tone-2)); }
+#solution + .divider { background: linear-gradient(to bottom, var(--tone-2), var(--tone-3)); }
+#demos + .divider    { background: linear-gradient(to bottom, var(--tone-3), var(--tone-4)); height: 60px; }
+#contact + .divider  { background: var(--tone-4); }                                    /* diagonal-dark Contact->Trust, Top-Farbe an Contact angleichen */
+#trust { margin-top: -1px; }                                                           /* schließt Subpixel-Lücke zum Diagonal-Divider darüber */
+
+/* === EXCERPT FADE-MASK PATCH 2026-04-26 START === */
+/* Vereinheitlicht die Karussell-Kartenhoehe ueber feste Excerpt-Hoehe */
+/* + weicher Fade-out bei langen Lagen statt harter Abschneidung */
+.carousel-card .demo-excerpt {
+    position: relative;
+    height: 760px;
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
+    mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
+}
+@media(max-width:768px) {
+    .carousel-card .demo-excerpt { height: 640px; }
+}
+/* === EXCERPT FADE-MASK PATCH 2026-04-26 END === */
+
+

datenschutz.html

@@ -3,145 +3,83 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Datenschutz - AegisSight</title>
+    <title>Datenschutz – AegisSight</title>
-    
+
-    <!-- Prevent search engine indexing -->
+    <!-- Rechtliche Seiten von Suchmaschinen ausschliessen -->
     <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
     <meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
-    
+
-    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
-    <link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
+
-    <link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
-    
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="css/main.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/fonts.css">
+
-    <link rel="stylesheet" href="css/mobile.css">
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/cookie-consent.css">
     <style>
-        body {
+        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--white); margin: 0; }
-            background: #0a0f1c;
+        .legal-page { padding: calc(var(--nav-height) + 56px) 0 80px; min-height: calc(100vh - 220px); }
-            min-height: 100vh;
+        .legal-container { max-width: 820px; margin: 0 auto; padding: 0 24px; }
-        }
+        .legal-container h1 { font-size: 2.25rem; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
-        .datenschutz-container {
+        .legal-meta { color: var(--text-light); margin: 0 0 32px; font-size: 0.95rem; }
-            max-width: 800px;
+        .legal-content { background: var(--base); border-radius: var(--radius-lg); padding: 32px 40px; box-shadow: var(--shadow); border: 1px solid var(--gray-100); }
-            margin: 0 auto;
+        .legal-section { margin-bottom: 28px; }
-            padding: 120px 20px 40px;
+        .legal-section:last-child { margin-bottom: 0; }
-        }
+        .legal-section h2 { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
-        .datenschutz-header {
+        .legal-section h3 { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin: 22px 0 8px; }
-            margin-bottom: 40px;
+        .legal-section p { margin: 0 0 12px; line-height: 1.7; color: var(--text); font-size: 0.95rem; }
-            text-align: center;
+        .legal-section a { color: var(--gold-dark); text-decoration: underline; }
-        }
+        .legal-section a:hover { color: var(--gold); }
-        .datenschutz-header h1 {
+        .legal-section ul { margin: 12px 0 16px 22px; padding: 0; }
-            font-family: 'Bebas Neue', sans-serif;
+        .legal-section li { margin-bottom: 6px; line-height: 1.6; color: var(--text); font-size: 0.95rem; }
-            font-size: 3rem;
+        .legal-section strong { color: var(--navy); font-weight: 600; }
-            font-weight: 400;
+        .legal-section table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; }
-            color: #ffffff;
+        .legal-section td, .legal-section th { padding: 8px 12px; border: 1px solid var(--gray-200); text-align: left; font-size: 0.92rem; }
-            margin-bottom: 10px;
+        .source-note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--gray-200); font-size: 0.85rem; color: var(--text-light); }
-            text-transform: uppercase;
+        .source-note a { color: var(--gold-dark); }
-            letter-spacing: 3px;
+        @media (max-width: 768px) {
-        }
+            .legal-container { padding: 0 16px; }
-        .datenschutz-content {
+            .legal-content { padding: 24px 20px; }
-            background: rgba(255, 255, 255, 0.95);
+            .legal-container h1 { font-size: 1.75rem; }
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-            border-radius: 20px;
-            padding: 40px;
-            backdrop-filter: blur(10px);
-        }
-        .datenschutz-section {
-            margin-bottom: 35px;
-        }
-        .datenschutz-section h2 {
-            font-family: 'Bebas Neue', sans-serif;
-            font-size: 1.8rem;
-            color: #0f72b5;
-            margin-bottom: 20px;
-            font-weight: 400;
-            letter-spacing: 1px;
-            text-transform: uppercase;
-        }
-        .datenschutz-section h3 {
-            font-family: 'Inter', sans-serif;
-            font-size: 1.2rem;
-            color: #333;
-            margin-top: 20px;
-            margin-bottom: 15px;
-            font-weight: 600;
-        }
-        .datenschutz-section p {
-            font-family: 'Inter', sans-serif;
-            color: #333333;
-            line-height: 1.7;
-            margin-bottom: 15px;
-        }
-        .datenschutz-section ul {
-            margin-left: 20px;
-            margin-bottom: 15px;
-        }
-        .datenschutz-section li {
-            font-family: 'Inter', sans-serif;
-            color: #333333;
-            line-height: 1.7;
-            margin-bottom: 8px;
-        }
-        .datenschutz-section strong {
-            color: #1a1a1a;
-            font-weight: 600;
-        }
-        .important-notice {
-            background: rgba(15, 114, 181, 0.08);
-            border-left: 4px solid #0f72b5;
-            padding: 15px 20px;
-            margin: 20px 0;
-            border-radius: 4px;
-        }
-        .important-notice p {
-            font-family: 'Inter', sans-serif;
-        }
-        .source-note {
-            margin-top: 40px;
-            padding-top: 20px;
-            border-top: 1px solid rgba(15, 114, 181, 0.1);
-            font-size: 0.9rem;
-            color: #666;
-            font-family: 'Inter', sans-serif;
-        }
-        .source-note a {
-            color: #0f72b5;
-            text-decoration: none;
-        }
-        .source-note a:hover {
-            text-decoration: underline;
         }
     </style>
 </head>
 <body>
     <!-- Navigation -->
-    <nav class="navbar" role="navigation" aria-label="Hauptnavigation">
+    <nav class="navbar" id="navbar">
         <div class="nav-container">
-            <div class="logo">
+            <a href="/" class="nav-logo">
-                <a href="index.html">
+                <img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
-                    <img src="assets/images/logos/Logo+Schrift_Rechts.svg" alt="AegisSight" class="logo-img">
+            </a>
-                </a>
-            </div>
             <ul class="nav-menu">
-                <li><a href="index.html#home">Startseite</a></li>
+                <li><a href="/#features">Funktionen</a></li>
-                <li><a href="index.html#about">Über uns</a></li>
+                <li><a href="/#demos">Live-Lagebilder</a></li>
-                <li><a href="index.html#products">Produkte & Lösungen</a></li>
+                <li><a href="/#trust">Über uns</a></li>
-                <li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
+                <li><a href="/#contact">Kontakt</a></li>
             </ul>
-            <div class="nav-extras">
+            <button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
-                <button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln">DE | EN</button>
+                <span></span><span></span><span></span>
-            </div>
+            </button>
         </div>
     </nav>
 
-    <div class="datenschutz-container">
+    <!-- Mobile Menu -->
-        <div class="datenschutz-header">
+    <div class="mobile-menu" id="mobile-menu" aria-hidden="true">
-            <h1>Datenschutzerklärung</h1>
+        <ul>
-        </div>
+            <li><a href="/#features">Funktionen</a></li>
+            <li><a href="/#demos">Live-Lagebilder</a></li>
+            <li><a href="/#trust">Über uns</a></li>
+            <li><a href="/#contact">Kontakt</a></li>
+        </ul>
+    </div>
+    <div class="mobile-overlay" id="mobile-overlay"></div>
 
-        <div class="datenschutz-content">
+    <main class="legal-page">
-            <div class="datenschutz-section">
+        <div class="legal-container">
+            <h1>Datenschutzerklärung</h1>
+            <div class="legal-section">
                 <h2>1. Datenschutz auf einen Blick</h2>
                 
                 <h3>Allgemeine Hinweise</h3>
@@ -167,7 +105,7 @@
                 <p>Detaillierte Informationen zu diesen Analyseprogrammen finden Sie in der folgenden Datenschutzerklärung.</p>
             </div>
 
-            <div class="datenschutz-section">
+            <div class="legal-section">
                 <h2>2. Hosting</h2>
                 <p>Wir hosten die Inhalte unserer Website bei folgendem Anbieter:</p>
                 
@@ -177,7 +115,7 @@
                 <p>Die Verwendung von Hetzner erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Wir haben ein berechtigtes Interesse an einer möglichst zuverlässigen Darstellung unserer Website. Sofern eine entsprechende Einwilligung abgefragt wurde, erfolgt die Verarbeitung ausschließlich auf Grundlage von Art. 6 Abs. 1 lit. a DSGVO und § 25 Abs. 1 TDDDG, soweit die Einwilligung die Speicherung von Cookies oder den Zugriff auf Informationen im Endgerät des Nutzers (z. B. Device-Fingerprinting) im Sinne des TDDDG umfasst. Die Einwilligung ist jederzeit widerrufbar.</p>
             </div>
 
-            <div class="datenschutz-section">
+            <div class="legal-section">
                 <h2>3. Allgemeine Hinweise und Pflichtinformationen</h2>
                 
                 <h3>Datenschutz</h3>
@@ -240,7 +178,7 @@
                 <p>Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-E-Mails, vor.</p>
             </div>
 
-            <div class="datenschutz-section">
+            <div class="legal-section">
                 <h2>4. Datenerfassung auf dieser Website</h2>
                 
                 <h3>Cookies</h3>
@@ -252,8 +190,24 @@
                 <p>Welche Cookies und Dienste auf dieser Website eingesetzt werden, können Sie dieser Datenschutzerklärung entnehmen.</p>
             </div>
 
-            <div class="datenschutz-section">
+            <div class="legal-section">
-                <h2>5. Newsletter</h2>
+                <h2>5. Kontaktformular und Anfragen</h2>
+
+                <h3>Datenerhebung über das Kontaktformular</h3>
+                <p>Wenn Sie uns über das auf unserer Website bereitgestellte Kontaktformular eine Anfrage zukommen lassen, werden Ihre Angaben aus dem Formular inklusive der von Ihnen dort angegebenen Kontaktdaten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei uns gespeichert. Erhoben werden: Name, Organisation (optional), E-Mail-Adresse und Ihre Nachricht. Eine Weitergabe an Dritte erfolgt nicht.</p>
+
+                <h3>Rechtsgrundlage</h3>
+                <p>Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erfüllung eines Vertrags zusammenhängt oder zur Durchführung vorvertraglicher Maßnahmen erforderlich ist. In allen übrigen Fällen beruht die Verarbeitung auf unserem berechtigten Interesse an der effektiven Bearbeitung der an uns gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO) und/oder auf Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO), sofern diese abgefragt wurde; die Einwilligung ist jederzeit widerrufbar.</p>
+
+                <h3>Speicherdauer</h3>
+                <p>Die von Ihnen im Kontaktformular eingegebenen Daten verbleiben bei uns, bis Sie uns zur Löschung auffordern, Ihre Einwilligung zur Speicherung widerrufen oder der Zweck für die Datenspeicherung entfällt (z. B. nach abgeschlossener Bearbeitung Ihrer Anfrage). Zwingende gesetzliche Bestimmungen – insbesondere Aufbewahrungsfristen – bleiben unberührt.</p>
+
+                <h3>Übertragung</h3>
+                <p>Ihre Anfrage wird verschlüsselt (TLS) an unseren Server übertragen und dort als E-Mail an info@aegis-sight.de weitergeleitet. Die E-Mail-Übertragung erfolgt verschlüsselt über Mailserver in Deutschland (IONOS).</p>
+            </div>
+
+            <div class="legal-section">
+                <h2>6. Newsletter</h2>
                 
                 <h3>Newsletterdaten</h3>
                 <p>Wenn Sie den auf der Website angebotenen Newsletter beziehen möchten, benötigen wir von Ihnen eine E-Mail-Adresse sowie Informationen, welche uns die Überprüfung gestatten, dass Sie der Inhaber der angegebenen E-Mail-Adresse sind und mit dem Empfang des Newsletters einverstanden sind. Weitere Daten werden nicht bzw. nur auf freiwilliger Basis erhoben. Diese Daten verwenden wir ausschließlich für den Versand der angeforderten Informationen und geben diese nicht an Dritte weiter.</p>
@@ -263,16 +217,22 @@
                 <p>Nach Ihrer Austragung aus der Newsletterverteilerliste wird Ihre E-Mail-Adresse bei uns bzw. dem Newsletterdiensteanbieter ggf. in einer Blacklist gespeichert, sofern dies zur Verhinderung künftiger Mailings erforderlich ist. Die Daten aus der Blacklist werden nur für diesen Zweck verwendet und nicht mit anderen Daten zusammengeführt. Dies dient sowohl Ihrem Interesse als auch unserem Interesse an der Einhaltung der gesetzlichen Vorgaben beim Versand von Newslettern (berechtigtes Interesse im Sinne des Art. 6 Abs. 1 lit. f DSGVO). Die Speicherung in der Blacklist ist zeitlich nicht befristet. <strong>Sie können der Speicherung widersprechen, sofern Ihre Interessen unser berechtigtes Interesse überwiegen.</strong></p>
             </div>
 
-            <div class="datenschutz-section">
+            <div class="legal-section">
-                <h2>6. Plugins und Tools</h2>
+                <h2>7. Plugins und Tools</h2>
-                
+
+                <h3>AegisSight Analytics (Umami)</h3>
+                <p>Wir nutzen auf dieser Website AegisSight Analytics, eine selbstgehostete Instanz der Open-Source-Analyse-Software Umami. Mit Umami erfassen wir anonymisierte Informationen zur Nutzung unserer Website (z. B. besuchte Seiten, Browser, ungefähre geografische Region auf Länderebene) zur Verbesserung unserer Inhalte.</p>
+                <p><strong>Selbstgehostet in Deutschland:</strong> Sämtliche Daten verbleiben auf unserem Server in Nürnberg, Deutschland (Hosting: Hetzner). Eine Übertragung an Dritte findet nicht statt.</p>
+                <p><strong>Cookielos und IP-anonymisiert:</strong> Umami setzt keine Cookies und speichert keine personenbezogenen Daten. IP-Adressen werden vor der Speicherung anonymisiert (Hashing). Es findet kein Cross-Site-Tracking statt.</p>
+                <p><strong>Rechtsgrundlage und Einwilligung:</strong> Die Reichweitenmessung wird ausschließlich nach Ihrer Einwilligung über unser Cookie-Consent-Banner aktiviert (Art. 6 Abs. 1 lit. a DSGVO i. V. m. § 25 Abs. 1 TDDDG). Sie können Ihre Einwilligung jederzeit über den Footer-Link „Cookie-Einstellungen" widerrufen. Wir respektieren das „Global Privacy Control" (GPC)-Signal Ihres Browsers und deaktivieren in diesem Fall die Reichweitenmessung automatisch.</p>
+
                 <h3>Google Fonts (lokales Hosting)</h3>
                 <p>Diese Seite nutzt zur einheitlichen Darstellung von Schriftarten so genannte Google Fonts, die von Google bereitgestellt werden. Die Google Fonts sind lokal installiert. Eine Verbindung zu Servern von Google findet dabei nicht statt.</p>
                 <p>Weitere Informationen zu Google Fonts finden Sie unter <a href="https://developers.google.com/fonts/faq" target="_blank">https://developers.google.com/fonts/faq</a> und in der Datenschutzerklärung von Google: <a href="https://policies.google.com/privacy?hl=de" target="_blank">https://policies.google.com/privacy?hl=de</a>.</p>
             </div>
 
-            <div class="datenschutz-section">
+            <div class="legal-section">
-                <h2>7. Automatisierte Zugriffe und KI-Agenten</h2>
+                <h2>8. Automatisierte Zugriffe und KI-Agenten</h2>
 
                 <h3>Verbot automatisierter Zugriffe</h3>
                 <p>Die automatisierte Abfrage, das Scraping oder Crawling dieser Website durch Bots, Spider, Scraper, KI-Agenten (einschließlich LLM-basierter Systeme), „Buy-for-me"-Agenten oder ähnliche automatisierte Tools ist ohne unsere ausdrückliche schriftliche Genehmigung untersagt.</p>
@@ -295,46 +255,27 @@
                 <p>Quelle: <a href="https://www.e-recht24.de" target="_blank">https://www.e-recht24.de</a></p>
             </div>
         </div>
-    </div>
+    </main>
 
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
             <div class="footer-content">
-                <div class="footer-section">
+                <div class="footer-info">
-                    <h4>AegisSight UG (haftungsbeschränkt)</h4>
+                    <p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
-                    <p>Gladbacher Strasse 3-5</p>
+                    <p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
-                    <p>40764 Langenfeld</p>
                 </div>
-                <div class="footer-section">
+                <div class="footer-links">
-                    <h4>Navigation</h4>
+                    <a href="/impressum.html">Impressum</a>
-                    <ul>
+                    <a href="/datenschutz.html">Datenschutz</a>
-                        <li><a href="index.html#home">Startseite</a></li>
+                    <a href="#" id="cookie-settings-link">Cookie-Einstellungen</a>
-                        <li><a href="index.html#about">Über uns</a></li>
-                        <li><a href="index.html#products">Produkte</a></li>
-                <li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
-                    </ul>
-                </div>
-                <div class="footer-section">
-                    <h4>Rechtliches</h4>
-                    <ul>
-                        <li><a href="impressum.html">Impressum</a></li>
-                        <li><a href="datenschutz.html">Datenschutz</a></li>
-                    </ul>
-                </div>
-                <div class="footer-section">
-                    <h4>Kontakt</h4>
-                    <p>info@aegis-sight.de</p>
                 </div>
             </div>
-            <p class="copyright">© <span class="current-year"></span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
+            <p class="footer-copyright">&copy; <span id="footer-year">2026</span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
         </div>
     </footer>
-
+    <script>document.getElementById('footer-year').textContent=new Date().getFullYear();</script>
-    <!-- JavaScript for legal pages -->
+    <script src="/js/app.js"></script>
-    <script src="js/legal-pages.js"></script>
+    <script src="/cookie-consent.js"></script>
-
-    <!-- AegisSight Analytics -->
-    <script async src="/insights/t.js"></script>
 </body>
-</html>
+</html>

impressum.html

@@ -3,142 +3,118 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Impressum - AegisSight</title>
+    <title>Impressum – AegisSight</title>
-    
+
-    <!-- Prevent search engine indexing -->
+    <!-- Rechtliche Seiten von Suchmaschinen ausschliessen -->
     <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
     <meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
-    
+
-    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
-    <link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
+
-    <link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
-    
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="css/main.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="css/fonts.css">
+
-    <link rel="stylesheet" href="css/mobile.css">
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/cookie-consent.css">
     <style>
-        body {
+        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--white); margin: 0; }
-            background: #0a0f1c;
+        .legal-page { padding: calc(var(--nav-height) + 56px) 0 80px; min-height: calc(100vh - 220px); }
-            min-height: 100vh;
+        .legal-container { max-width: 820px; margin: 0 auto; padding: 0 24px; }
-        }
+        .legal-container h1 { font-size: 2.25rem; font-weight: 700; color: var(--navy); margin: 0 0 12px; }
-        .impressum-container {
+        .legal-meta { color: var(--text-light); margin: 0 0 32px; font-size: 0.95rem; }
-            max-width: 800px;
+        .legal-content { background: var(--base); border-radius: var(--radius-lg); padding: 32px 40px; box-shadow: var(--shadow); border: 1px solid var(--gray-100); }
-            margin: 0 auto;
+        .legal-section { margin-bottom: 28px; }
-            padding: 120px 20px 40px;
+        .legal-section:last-child { margin-bottom: 0; }
-        }
+        .legal-section h2 { font-size: 1.35rem; font-weight: 700; color: var(--navy); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--gold); }
-        .impressum-header {
+        .legal-section h3 { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin: 22px 0 8px; }
-            margin-bottom: 40px;
+        .legal-section p { margin: 0 0 12px; line-height: 1.7; color: var(--text); font-size: 0.95rem; }
-            text-align: center;
+        .legal-section a { color: var(--gold-dark); text-decoration: underline; }
-        }
+        .legal-section a:hover { color: var(--gold); }
-        .impressum-header h1 {
+        .legal-section ul { margin: 12px 0 16px 22px; padding: 0; }
-            font-family: 'Bebas Neue', sans-serif;
+        .legal-section li { margin-bottom: 6px; line-height: 1.6; color: var(--text); font-size: 0.95rem; }
-            font-size: 3rem;
+        .legal-section strong { color: var(--navy); font-weight: 600; }
-            font-weight: 400;
+        .legal-section table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; }
-            color: #ffffff;
+        .legal-section td, .legal-section th { padding: 8px 12px; border: 1px solid var(--gray-200); text-align: left; font-size: 0.92rem; }
-            margin-bottom: 10px;
+        .source-note { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--gray-200); font-size: 0.85rem; color: var(--text-light); }
-            text-transform: uppercase;
+        .source-note a { color: var(--gold-dark); }
-            letter-spacing: 3px;
+        @media (max-width: 768px) {
-        }
+            .legal-container { padding: 0 16px; }
-        .impressum-content {
+            .legal-content { padding: 24px 20px; }
-            background: rgba(255, 255, 255, 0.95);
+            .legal-container h1 { font-size: 1.75rem; }
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-            border-radius: 20px;
-            padding: 40px;
-            backdrop-filter: blur(10px);
-        }
-        .impressum-section {
-            margin-bottom: 30px;
-            border-bottom: 1px solid rgba(15, 114, 181, 0.1);
-            padding-bottom: 20px;
-        }
-        .impressum-section:last-child {
-            border-bottom: none;
-        }
-        .impressum-section h2 {
-            font-family: 'Bebas Neue', sans-serif;
-            font-size: 1.5rem;
-            color: #0f72b5;
-            margin-bottom: 15px;
-            font-weight: 400;
-            letter-spacing: 1px;
-            text-transform: uppercase;
-        }
-        .impressum-section p {
-            font-family: 'Inter', sans-serif;
-            color: #333333;
-            line-height: 1.6;
-            margin-bottom: 10px;
-        }
-        .impressum-section strong {
-            color: #1a1a1a;
-            font-weight: 600;
         }
     </style>
 </head>
 <body>
     <!-- Navigation -->
-    <nav class="navbar" role="navigation" aria-label="Hauptnavigation">
+    <nav class="navbar" id="navbar">
         <div class="nav-container">
-            <div class="logo">
+            <a href="/" class="nav-logo">
-                <a href="index.html">
+                <img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
-                    <img src="assets/images/logos/Logo+Schrift_Rechts.svg" alt="AegisSight" class="logo-img">
+            </a>
-                </a>
-            </div>
             <ul class="nav-menu">
-                <li><a href="index.html#home">Startseite</a></li>
+                <li><a href="/#features">Funktionen</a></li>
-                <li><a href="index.html#about">Über uns</a></li>
+                <li><a href="/#demos">Live-Lagebilder</a></li>
-                <li><a href="index.html#products">Produkte & Lösungen</a></li>
+                <li><a href="/#trust">Über uns</a></li>
-                <li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
+                <li><a href="/#contact">Kontakt</a></li>
             </ul>
-            <div class="nav-extras">
+            <button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
-                <button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln">DE | EN</button>
+                <span></span><span></span><span></span>
-            </div>
+            </button>
         </div>
     </nav>
 
-    <div class="impressum-container">
+    <!-- Mobile Menu -->
-        <div class="impressum-header">
+    <div class="mobile-menu" id="mobile-menu" aria-hidden="true">
-            <h1>Impressum</h1>
+        <ul>
-        </div>
+            <li><a href="/#features">Funktionen</a></li>
+            <li><a href="/#demos">Live-Lagebilder</a></li>
+            <li><a href="/#trust">Über uns</a></li>
+            <li><a href="/#contact">Kontakt</a></li>
+        </ul>
+    </div>
+    <div class="mobile-overlay" id="mobile-overlay"></div>
 
-        <div class="impressum-content">
+    <main class="legal-page">
-            <div class="impressum-section">
+        <div class="legal-container">
+            <h1>Impressum</h1>
+            <div class="legal-section">
                 <h2>Angaben gemäß § 5 TMG</h2>
                 <p><strong>AegisSight UG (haftungsbeschränkt)</strong></p>
                 <p>Gladbacher Strasse 3-5<br>
                 40764 Langenfeld</p>
             </div>
 
-            <div class="impressum-section">
+            <div class="legal-section">
                 <h2>Vertreten durch</h2>
                 <p>Hendrik Gebhardt<br>
                 Monami Homma</p>
             </div>
 
-            <div class="impressum-section">
+            <div class="legal-section">
                 <h2>Kontakt</h2>
                 <p>E-Mail: info@aegis-sight.de</p>
             </div>
 
-            <div class="impressum-section">
+            <div class="legal-section">
                 <h2>Registereintrag</h2>
                 <p>Handelsregister: HRB 110105<br>
                 Registergericht: Amtsgericht Düsseldorf</p>
             </div>
 
-            <div class="impressum-section">
+            <div class="legal-section">
                 <h2>Umsatzsteuer-ID</h2>
                 <p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br>
                 DE457846602</p>
             </div>
 
-            <div class="impressum-section">
+            <div class="legal-section">
                 <h2>Verbraucherstreitbeilegung/<wbr>Universalschlichtungsstelle</h2>
                 <p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
             </div>
 
-            <div class="impressum-section">
+            <div class="legal-section">
                 <h2>Haftungsausschluss</h2>
                 <p><strong>Haftung für Inhalte</strong><br>
                 Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
@@ -149,51 +125,30 @@
                 <p><strong>Urheberrecht</strong><br>
                 Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.</p>
 
-                <p style="margin-top: 30px; font-size: 0.9rem; color: #666;">
+                <p class="source-note">Quelle: <a href="https://www.e-recht24.de" target="_blank">eRecht24</a></p>
-                Quelle: <a href="https://www.e-recht24.de" target="_blank" style="color: #0066cc;">eRecht24</a>
-                </p>
             </div>
         </div>
-    </div>
+    </main>
 
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
             <div class="footer-content">
-                <div class="footer-section">
+                <div class="footer-info">
-                    <h4>AegisSight UG (haftungsbeschränkt)</h4>
+                    <p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
-                    <p>Gladbacher Strasse 3-5</p>
+                    <p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
-                    <p>40764 Langenfeld</p>
                 </div>
-                <div class="footer-section">
+                <div class="footer-links">
-                    <h4>Navigation</h4>
+                    <a href="/impressum.html">Impressum</a>
-                    <ul>
+                    <a href="/datenschutz.html">Datenschutz</a>
-                        <li><a href="index.html#home">Startseite</a></li>
+                    <a href="#" id="cookie-settings-link">Cookie-Einstellungen</a>
-                        <li><a href="index.html#about">Über uns</a></li>
-                        <li><a href="index.html#products">Produkte</a></li>
-                <li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
-                    </ul>
-                </div>
-                <div class="footer-section">
-                    <h4>Rechtliches</h4>
-                    <ul>
-                        <li><a href="impressum.html">Impressum</a></li>
-                        <li><a href="datenschutz.html">Datenschutz</a></li>
-                    </ul>
-                </div>
-                <div class="footer-section">
-                    <h4>Kontakt</h4>
-                    <p>info@aegis-sight.de</p>
                 </div>
             </div>
-            <p class="copyright">© <span class="current-year"></span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
+            <p class="footer-copyright">&copy; <span id="footer-year">2026</span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
         </div>
     </footer>
-
+    <script>document.getElementById('footer-year').textContent=new Date().getFullYear();</script>
-    <!-- JavaScript for legal pages -->
+    <script src="/js/app.js"></script>
-    <script src="js/legal-pages.js"></script>
+    <script src="/cookie-consent.js"></script>
-
-    <!-- AegisSight Analytics -->
-    <script async src="/insights/t.js"></script>
 </body>
 </html>

index.html

@@ -3,316 +3,425 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title data-translate="pageTitle">AegisSight - Sicherheit Made in Germany</title>
+    <title>AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen</title>
-    
+    <meta name="description" content="OSINT-Monitoring Software aus Deutschland: KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste.">
-    <!-- Prevent search engine indexing -->
+    <meta name="robots" content="noindex, nofollow, noarchive">
-    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
+    <link rel="canonical" href="https://aegis-sight.de/">
-    <meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex">
+
-    
+    <!-- Open Graph / Social Sharing -->
-    <!-- Favicon -->
+    <meta property="og:type" content="website">
-    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <meta property="og:site_name" content="AegisSight">
-    <link rel="icon" type="image/svg+xml" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
+    <meta property="og:title" content="AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen">
-    <link rel="apple-touch-icon" href="assets/images/logos/AegisSightLogo_NavyGold.svg">
+    <meta property="og:description" content="KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste – Made in Germany.">
-    
+    <meta property="og:url" content="https://aegis-sight.de/">
-    <link rel="stylesheet" href="css/main.css">
+    <meta property="og:image" content="https://aegis-sight.de/assets/images/og-image.png">
-    <link rel="stylesheet" href="css/animations-enhanced.css">
+    <meta property="og:image:width" content="1200">
-    <link rel="stylesheet" href="css/section-transitions.css">
+    <meta property="og:image:height" content="630">
-    <link rel="stylesheet" href="css/about-modern.css">
+    <meta property="og:locale" content="de_DE">
-    <link rel="stylesheet" href="css/products-modern.css">
+
-    <link rel="stylesheet" href="css/fonts.css">
+    <!-- Twitter Card -->
-    <link rel="stylesheet" href="css/mobile.css">
+    <meta name="twitter:card" content="summary_large_image">
-    <link rel="stylesheet" href="cookie-consent.css">
+    <meta name="twitter:title" content="AegisSight Monitor – Echtzeit-Lagebilder aus offenen Quellen">
+    <meta name="twitter:description" content="KI-gestützte Echtzeit-Lagebilder aus offenen Quellen. Für Behörden, Redaktionen und Sicherheitsdienste – Made in Germany.">
+    <meta name="twitter:image" content="https://aegis-sight.de/assets/images/og-image.png">
+
+    <!-- Schema.org Organization -->
+    <script type="application/ld+json">
+    {
+        "@context": "https://schema.org",
+        "@type": "Organization",
+        "name": "AegisSight UG (haftungsbeschränkt)",
+        "alternateName": "AegisSight",
+        "url": "https://aegis-sight.de",
+        "logo": "https://aegis-sight.de/assets/images/logos/AegisSightLogo_NavyGold.svg",
+        "email": "info@aegis-sight.de",
+        "address": {
+            "@type": "PostalAddress",
+            "streetAddress": "Gladbacher Straße 3-5",
+            "postalCode": "40764",
+            "addressLocality": "Langenfeld",
+            "addressRegion": "Nordrhein-Westfalen",
+            "addressCountry": "DE"
+        }
+    }
+    </script>
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="/cookie-consent.css">
 </head>
 <body>
-    <!-- Skip Navigation -->
+
-    <a href="#features" class="skip-nav" data-translate="skipNav">Zum Hauptinhalt springen</a>
-    
     <!-- Navigation -->
-    <nav class="navbar" role="navigation" aria-label="Hauptnavigation">
+    <nav class="navbar" id="navbar">
         <div class="nav-container">
-            <div class="logo">
+            <a href="#hero" class="nav-logo">
-                <img src="assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
+                <img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
-            </div>
+            </a>
             <ul class="nav-menu">
-                <li><a href="#home" data-translate="navHome">Startseite</a></li>
+                <li><a href="#features">Funktionen</a></li>
-                <li><a href="#about" data-translate="navAbout">Über uns</a></li>
+                <li><a href="#demos">Live-Lagebilder</a></li>
-                <li><a href="#products" data-translate="navProducts">Lösungen</a></li>
+                <li><a href="#trust">Über uns</a></li>
-                <li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
+                <li><a href="#contact">Kontakt</a></li>
             </ul>
-            <div class="nav-extras">
+            <button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
-                <button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
+                <span></span><span></span><span></span>
-                <!-- Mobile Menu Toggle -->
+            </button>
-                <button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
-                    <span class="hamburger">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </span>
-                </button>
-            </div>
         </div>
     </nav>
-    
+
-    <!-- Mobile Navigation Menu -->
+    <!-- Mobile Menu -->
-    <div class="nav-menu-mobile" aria-hidden="true">
+    <div class="mobile-menu" id="mobile-menu" aria-hidden="true">
-        <button class="mobile-menu-close" aria-label="Menü schließen">
-            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/>
-            </svg>
-        </button>
         <ul>
-            <li><a href="#home" data-translate="navHome">Startseite</a></li>
+            <li><a href="#features">Funktionen</a></li>
-            <li><a href="#about" data-translate="navAbout">Über uns</a></li>
+            <li><a href="#demos">Live-Lagebilder</a></li>
-            <li><a href="#products" data-translate="navProducts">Lösungen</a></li>
+            <li><a href="#trust">Über uns</a></li>
-            <li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
+            <li><a href="#contact">Kontakt</a></li>
         </ul>
     </div>
-    
+    <div class="mobile-overlay" id="mobile-overlay"></div>
-    <!-- Mobile Menu Overlay -->
-    <div class="mobile-menu-overlay"></div>
 
     <!-- Hero Section -->
-    <section class="hero" id="home">
+    <section class="hero" id="hero">
-        <!-- Animated Background Gradient -->
-        <div class="gradient-animated" style="position: absolute; inset: 0; opacity: 0.3; z-index: 0;"></div>
-        <!-- Rotating Background Videos -->
-        <div class="hero-video-container">
-            <video class="hero-video active" autoplay muted loop playsinline>
-                <source src="assets/videos/hero-data-flow.mp4" type="video/mp4">
-            </video>
-            <video class="hero-video" autoplay muted loop playsinline>
-                <source src="assets/videos/hero-network-viz.mp4" type="video/mp4">
-            </video>
-            <video class="hero-video" autoplay muted loop playsinline>
-                <source src="assets/videos/hero-code-abstract.mp4" type="video/mp4">
-            </video>
-        </div>
-        
-        <!-- Light Overlay for better text readability -->
         <div class="hero-overlay"></div>
-        
+        <div class="hero-content">
-        <!-- Particle Animation Canvas -->
+            <div class="hero-brand">
-        <canvas id="particleCanvas" aria-hidden="true"></canvas>
+                <h1 class="hero-title">AegisSight Monitor</h1>
-        
+                <p class="hero-tagline">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen, <span class="gold">vollautomatisch.</span></p>
-        <div class="hero-content animate-in">
+            </div>
-            <h1 class="hero-title">
+
-                <span class="main-title" data-translate="heroTitle">SICHERHEIT MADE IN GERMANY</span>
+            <div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
-            </h1>
+                <!-- Slide 1: Echtzeit-Monitoring (Video) -->
-            <p class="hero-text animate-in stagger-2" data-translate="heroSubtitle">Spezialist für hochsichere, maßgeschneiderte IT-Lösungen für Behörden</p>
+                <div class="hero-slide active" data-slide="0">
-        </div>
+                    <div class="hero-slide-video">
-        
+                        <video muted playsinline preload="auto">
-        <!-- Scroll Indicator -->
+                            <source src="videos/hero-slide-1-monitoring.mp4" type="video/mp4">
-        <div class="scroll-indicator">
+                        </video>
-            <span class="scroll-text" data-translate="scrollToExplore">Scroll to Explore</span>
+                    </div>
-            <div class="scroll-arrow">
+                    <div class="hero-slide-bottom">
-                <img src="assets/images/icons/arrow-down.svg" alt="Scroll Down" width="24" height="24">
+                        <p class="hero-slide-example">Live-Beispiel: Der Iran-Konflikt wird mit über 14.900 Artikeln aus 375 Quellen kontinuierlich überwacht.</p>
+                        <div class="hero-slide-cta">
+                            <a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Slide 2: Automatischer Faktencheck (Video) -->
+                <div class="hero-slide" data-slide="1">
+                    <div class="hero-slide-video">
+                        <video muted playsinline preload="metadata">
+                            <source src="videos/hero-slide-2-monitoring.mp4?v=3" type="video/mp4">
+                        </video>
+                    </div>
+                </div>
+
+                <!-- Slide 3: KI-Recherche (Video) -->
+                <div class="hero-slide" data-slide="2">
+                    <div class="hero-slide-video">
+                        <video muted playsinline preload="metadata">
+                            <source src="videos/hero-slide-3-monitoring.mp4?v=2" type="video/mp4">
+                        </video>
+                    </div>
+                    <div class="hero-slide-bottom">
+                        <p class="hero-slide-example">Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.</p>
+                        <div class="hero-slide-cta">
+                            <a href="#demos" class="btn btn-primary" onclick="positionCards(2)">Recherche-Beispiel ansehen</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Slide 4: Globale Quellenabdeckung (Video) -->
+                <div class="hero-slide" data-slide="3">
+                    <div class="hero-slide-video">
+                        <video muted playsinline preload="metadata">
+                            <source src="videos/hero-slide-4-monitoring.mp4" type="video/mp4">
+                        </video>
+                    </div>
+                    <div class="hero-slide-bottom">
+                        <p class="hero-slide-example">Im Iran-Konflikt werden Primärquellen in Farsi, Arabisch und Hebräisch direkt ausgewertet.</p>
+                        <div class="hero-slide-cta">
+                            <a href="#demos" class="btn btn-primary" onclick="positionCards(0)">Live-Beispiel ansehen</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Slide 5: Flexibel einsetzbar (Video) -->
+                <div class="hero-slide" data-slide="4">
+                    <div class="hero-slide-video">
+                        <video muted playsinline preload="metadata">
+                            <source src="videos/hero-slide-5-monitoring.mp4?v=2" type="video/mp4">
+                        </video>
+                    </div>
+                    <div class="hero-slide-bottom">
+                        <p class="hero-slide-example">Beispiel: Cyberangriffe auf deutsche Infrastruktur, 93 Artikel aus 41 Quellen, automatisch überwacht.</p>
+                        <div class="hero-slide-cta">
+                            <a href="#demos" class="btn btn-primary" onclick="positionCards(1)">Live-Beispiel ansehen</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="hero-slider-nav">
+                <div class="hero-slider-dots">
+                    <button class="hero-dot active" data-slide="0" aria-label="Echtzeit-Monitoring"></button>
+                    <button class="hero-dot" data-slide="1" aria-label="Faktencheck"></button>
+                    <button class="hero-dot" data-slide="2" aria-label="KI-gestützte Recherche"></button>
+                    <button class="hero-dot" data-slide="3" aria-label="Globale Abdeckung"></button>
+                    <button class="hero-dot" data-slide="4" aria-label="Flexibel einsetzbar"></button>
+                </div>
+            </div>
+            <div class="hero-slider-arrows">
+                <button class="hero-arrow hero-arrow-prev" aria-label="Vorheriger Slide">&#8592;</button>
+                <button class="hero-arrow hero-arrow-next" aria-label="Nächster Slide">&#8594;</button>
             </div>
         </div>
     </section>
 
-    <!-- About Us Section -->
+    <!-- Features -->
-    <section class="about-section" id="about">
+    <section class="section section-dark" id="features">
         <div class="container">
-            <h2 class="section-title" data-translate="aboutTitle">ÜBER UNS</h2>
+            <h2 class="section-title">Was der Monitor leistet</h2>
-            <p class="section-subtitle" data-translate="aboutSubtitle">Ihr Partner für sichere Behördensoftware</p>
+            <!-- Highlight: Faktenprüfung -->
-            
+            <div class="feature-statement">
-            <!-- About Tabs Navigation -->
+                <p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
-            <div class="about-tabs">
+                <p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
-                <button class="about-tab active" data-tab="who-we-are" data-translate="tabWhoWeAre">Unternehmen</button>
-                <button class="about-tab" data-tab="mission" data-translate="tabMission">Mission & Werte</button>
-                <button class="about-tab" data-tab="competencies" data-translate="tabCompetencies">Kernkompetenzen</button>
-                <button class="about-tab" data-tab="why-us" data-translate="tabWhyUs">Unser Versprechen</button>
             </div>
-            
+
-            <!-- About Content Panels -->
+            <div class="grid-3">
-            <div class="about-content">
+                <div class="feature-card">
-                <!-- Wer wir sind -->
+                    <div class="feature-icon">
-                <div class="about-panel active reveal" id="who-we-are">
+                        <img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
-                    <div class="panel-text">
-                        <div class="company-cards-wrapper">
-                            <div class="company-card">
-                                <h4>
-                                    <span class="company-card-icon">
-                                        <img src="assets/images/icons/shield.svg" alt="Security" width="24" height="24">
-                                    </span>
-                                    <span data-translate="companyCardTitle1">Spezialist für Behördensoftware</span>
-                                </h4>
-                                <p data-translate="whoWeArePara1">AegisSight UG ist Ihr <strong>Spezialist für hochsichere, maßgeschneiderte IT-Lösungen</strong> aus Nordrhein-Westfalen. Wir entwickeln innovative Software speziell für staatliche Sicherheits- und Ermittlungsbehörden.</p>
-                            </div>
-                            <div class="company-card">
-                                <h4>
-                                    <span class="company-card-icon">
-                                        <img src="assets/images/icons/plus-circle.svg" alt="Future" width="24" height="24">
-                                    </span>
-                                    <span data-translate="companyCardTitle2">Unser Ansatz</span>
-                                </h4>
-                                <p data-translate="whoWeArePara2">Unser Ansatz vereint modernste Technologie mit einem tiefen Verständnis für die besonderen Anforderungen von Behörden. Dabei steht die Balance zwischen Sicherheit, Effizienz und rechtskonformer Umsetzung im Mittelpunkt unserer Arbeit.</p>
-                            </div>
-                        </div>
-                        <div class="location-section">
-                            <div class="mini-germany-map">
-                                <img src="assets/images/nrw.png" alt="NRW Map" />
-                            </div>
-                            <div class="location-badge">
-                                <img src="assets/images/icons/location.svg" alt="Location" width="24" height="24">
-                                <span data-translate="locationBadge">Nordrhein-Westfalen, Deutschland</span>
-                            </div>
-                        </div>
                     </div>
+                    <h3>Echtzeit-Monitoring</h3>
+                    <p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
                 </div>
-                
+
-                <!-- Mission & Werte -->
+                <div class="feature-card">
-                <div class="about-panel" id="mission">
+                    <div class="feature-icon">
-                    <div class="mission-grid">
+                        <img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
-                        <div class="mission-header">
-                            <h3 data-translate="missionTitle">Unsere Mission</h3>
-                            <p data-translate="missionStatement">Wir schaffen <strong>effiziente, sichere und datenschutzkonforme Lösungen</strong> für moderne Strafverfolgung und Sicherheitsbehörden.</p>
-                        </div>
-                        <div class="values-grid">
-                            <div class="value-card card-hover-lift tilt-card">
-                                <div class="value-icon">
-                                    <img src="assets/images/icons/shield-check.svg" alt="Verified" width="48" height="48">
-                                </div>
-                                <h4 data-translate="valueIntegrityTitle">Integrität</h4>
-                                <p data-translate="valueIntegrityDesc">Höchste ethische Standards in allem was wir tun</p>
-                            </div>
-                            <div class="value-card card-hover-lift tilt-card">
-                                <div class="value-icon">
-                                    <img src="assets/images/icons/clock-circle.svg" alt="Time" width="48" height="48">
-                                </div>
-                                <h4 data-translate="valueTransparencyTitle">Transparenz</h4>
-                                <p data-translate="valueTransparencyDesc">Offene Kommunikation und nachvollziehbare Prozesse</p>
-                            </div>
-                            <div class="value-card card-hover-lift tilt-card">
-                                <div class="value-icon">
-                                    <img src="assets/images/icons/pyramid.svg" alt="Scale" width="48" height="48">
-                                </div>
-                                <h4 data-translate="valueDemocracyTitle">Demokratische Prinzipien</h4>
-                                <p data-translate="valueDemocracyDesc">Kooperation nur mit Behörden im Einklang mit der freiheitlich demokratischen Grundordnung</p>
-                            </div>
-                        </div>
-                        <div class="principle-note">
-                            <p data-translate="principleNote"><strong>Unser Ziel:</strong> Technologie, die Recht und Sicherheit stärkt und die freiheitlich demokratische Grundordnung schützt.</p>
-                        </div>
                     </div>
+                    <h3>Quellenanalyse</h3>
+                    <p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
                 </div>
-                
+                <div class="feature-card">
-                <!-- Kernkompetenzen -->
+                    <div class="feature-icon">
-                <div class="about-panel" id="competencies">
+                        <img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
-                    <div class="competencies-list">
-                        <div class="competency-item">
-                            <div class="competency-number">01</div>
-                            <div class="competency-content">
-                                <h4 data-translate="comp1Title">Behördenspezifische Software</h4>
-                                <p data-translate="comp1Desc">Entwicklung mit höchsten Sicherheitsstandards, maßgeschneidert für staatliche Anforderungen</p>
-                            </div>
-                        </div>
-                        <div class="competency-item">
-                            <div class="competency-number">02</div>
-                            <div class="competency-content">
-                                <h4 data-translate="comp2Title">Intuitive Bedienkonzepte</h4>
-                                <p data-translate="comp2Desc">Benutzerfreundliche Oberflächen trotz komplexer Funktionen für effizientes Arbeiten</p>
-                            </div>
-                        </div>
-                        <div class="competency-item">
-                            <div class="competency-number">03</div>
-                            <div class="competency-content">
-                                <h4 data-translate="comp3Title">Langzeit-Support</h4>
-                                <p data-translate="comp3Desc">Kontinuierliche Sicherheitsupdates und zuverlässige Wartung über den gesamten Lebenszyklus</p>
-                            </div>
-                        </div>
                     </div>
+                    <h3>Geografische Verortung</h3>
+                    <p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
                 </div>
-                
+                <div class="feature-card">
-                <!-- Warum AegisSight -->
+                    <div class="feature-icon">
-                <div class="about-panel" id="why-us">
+                        <img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
-                    <div class="why-grid">
-                        <div class="why-card card-hover-lift">
-                            <div class="why-icon">
-                                <img src="assets/images/icons/check-circle-filled.svg" alt="Check" width="48" height="48">
-                            </div>
-                            <h4 data-translate="why1Title">Enge Zusammenarbeit</h4>
-                            <p data-translate="why1Desc">Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen</p>
-                        </div>
-                        <div class="why-card card-hover-lift">
-                            <div class="why-icon german-flag-icon">
-                                <img src="assets/images/icons/german-flag.svg" alt="German Flag" width="60" height="36">
-                            </div>
-                            <h4 data-translate="why2Title">Made in Germany</h4>
-                            <p data-translate="why2Desc">Klare, robuste und sichere Software nach deutschen Qualitätsstandards</p>
-                        </div>
-                        <div class="why-card card-hover-lift">
-                            <div class="why-icon">
-                                <img src="assets/handshake.svg" alt="Handshake" width="50" height="50" />
-                            </div>
-                            <h4 data-translate="why3Title">Verlässliche Partnerschaft</h4>
-                            <p data-translate="why3Desc">Basierend auf gemeinsamen Werten und langfristigem Vertrauen</p>
-                        </div>
-                        <div class="why-card card-hover-lift">
-                            <div class="why-icon">
-                                <img src="assets/images/icons/clock.svg" alt="Clock" width="48" height="48">
-                            </div>
-                            <h4 data-translate="why4Title">Nachhaltigkeit</h4>
-                            <p data-translate="why4Desc">Fokus auf Sicherheit, Professionalität & zukunftssichere Lösungen</p>
-                        </div>
                     </div>
+                    <h3>Mehrsprachige Auswertung</h3>
+                    <p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
+                    </div>
+                    <h3>Strukturierte Lagebilder</h3>
+                    <p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
                 </div>
             </div>
         </div>
     </section>
 
-    <!-- Products & Solutions Section -->
+    <!-- Gradient: Features -> Problem -->
-    <section class="products-section" id="products">
+    <div class="divider divider-gradient-dark-to-base"></div>
-        <div class="tech-particles">
+
-            <div class="particle"></div>
+    <!-- Problem Statement -->
-            <div class="particle"></div>
+    <section class="section section-base" id="problem">
-            <div class="particle"></div>
+        <div class="container">
-        </div>
+            <h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
-        <div class="products-container">
+            <p class="section-subtitle">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
-            <div style="text-align: center; margin-bottom: 60px;">
+            <div class="grid-3">
-                <h2 class="section-title" data-translate="productsTitle">PRODUKTE & LÖSUNGEN</h2>
+                <div class="problem-card">
-                <p class="section-subtitle" data-translate="productsSubtitle">Professionelle Werkzeuge für moderne Ermittlungsarbeit</p>
+                    <div class="problem-icon">
-            </div>
+                        <img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
-            
-            <div class="products-grid">
-                <!-- Product: AegisSight Monitor -->
-                <div class="product-card">
-                    <div class="product-header">
-                        <div class="product-icon-wrapper">
-                            <div class="product-icon-bg"></div>
-                            <img class="product-icon" src="assets/images/icons/world-globe.svg" alt="AegisSight Monitor">
-                        </div>
-                        <div class="product-title-wrapper">
-                            <h3 class="product-title" data-translate="productOsintMonitorTitle">AegisSight Monitor</h3>
-                            <p class="product-tagline" data-translate="productOsintMonitorTagline">Open Source Intelligence - automatisiert</p>
-                        </div>
                     </div>
-                    <div class="product-body">
+                    <h3>Quellenvielfalt</h3>
-                        <p class="product-description" data-translate="productOsintMonitorDesc">AegisSight Monitor aggregiert, analysiert und verifiziert Informationen aus öffentlich zugänglichen Quellen in Echtzeit. Erleben Sie die Plattform live am Beispiel des Iran-Livetickers.</p>
+                    <p>Hunderte Nachrichtenagenturen, Telegram-Kanäle und soziale Medien in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
-                        <a href="/lagen/iran-konflikt/" class="product-learn-more" style="text-decoration: none; text-align: center;">
+                </div>
-                            <span data-translate="osintMonitorButton">Iran-Liveticker öffnen</span>
+                <div class="problem-card">
-                        </a>
+                    <div class="problem-icon">
+                        <img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
+                    </div>
+                    <h3>Zeitdruck</h3>
+                    <p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
+                </div>
+                <div class="problem-card">
+                    <div class="problem-icon">
+                        <img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
+                    </div>
+                    <h3>Informationsflut</h3>
+                    <p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Gradient: Problem -> Workflow -->
+    <div class="divider divider-gradient-base-to-alt"></div>
+
+    <!-- Solution / Workflow -->
+    <section class="section section-alt" id="solution">
+        <div class="container">
+            <h2 class="section-title">So funktioniert der AegisSight Monitor</h2>
+            <div class="workflow">
+                <div class="workflow-step">
+                    <div class="step-number">1</div>
+                    <h3>Erfassen</h3>
+                    <p>Hunderte Quellen werden kontinuierlich überwacht. Nachrichtenagenturen, Telegram, Social Media und mehr.</p>
+                </div>
+                <div class="workflow-connector"></div>
+                <div class="workflow-step">
+                    <div class="step-number">2</div>
+                    <h3>Analysieren</h3>
+                    <p>Meldungen werden automatisch ausgewertet, Fakten geprüft und geografisch verortet.</p>
+                </div>
+                <div class="workflow-connector"></div>
+                <div class="workflow-step">
+                    <div class="step-number">3</div>
+                    <h3>Berichten</h3>
+                    <p>Strukturierte Lagebilder mit Quellenbelegen, Faktencheck und Kartenansicht. In Echtzeit.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Gradient: Solution -> Demos -->
+    <div class="divider divider-gradient-alt-to-base"></div>
+
+    <!-- Live Demos / Showcase -->
+    <section class="section section-base" id="demos">
+        <div class="container">
+            <!-- Live Stats Bar -->
+            <div class="live-stats-bar">
+                <div class="live-stats-title">Großlage - Irankonflikt</div>
+                <div class="live-stats-row">
+                    <div class="live-stat">
+                        <span class="live-stat-value" id="stat-articles">...</span>
+                        <span class="live-stat-label">Artikel</span>
+                    </div>
+                    <div class="live-stat">
+                        <span class="live-stat-value" id="stat-sources">...</span>
+                        <span class="live-stat-label">Quellen</span>
+                    </div>
+                    <div class="live-stat">
+                        <span class="live-stat-value" id="stat-factchecks">...</span>
+                        <span class="live-stat-label">Faktenchecks</span>
                     </div>
                 </div>
-                <!-- Product: AccountForger -->
+            </div>
-                <div class="product-card">
+
-                    <div class="product-header">
+            <!-- 3D Carousel -->
-                        <div class="product-icon-wrapper">
+            <div class="carousel-viewport">
-                            <div class="product-icon-bg"></div>
+                <button class="carousel-arrow carousel-prev" aria-label="Vorherige Lage">&#8249;</button>
-                            <img class="product-icon" src="assets/images/icons/lock.svg" alt="AccountForger">
+                <button class="carousel-arrow carousel-next" aria-label="Nächste Lage">&#8250;</button>
+                <div class="carousel-track" id="carousel">
+                    <!-- Iran Card -->
+                    <div class="carousel-card card-live active" data-index="0" data-lage="iran-konflikt">
+                        <div class="demo-badge">LIVE</div>
+                        <h3 class="demo-title">Iran-Konflikt</h3>
+
+                        <div class="demo-excerpt" id="demo-excerpt">
+                            <div class="excerpt-text" id="excerpt-text">Lagebild wird geladen...</div>
                         </div>
-                        <div class="product-title-wrapper">
+                        <a href="/lagen/iran-konflikt/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
-                            <h3 class="product-title" data-translate="productAccountForgerTitle">AccountForger</h3>
+                    </div>
-                            <p class="product-tagline">Zugang nur mit Berechtigung</p>
+                    <!-- Cyberangriffe -->
+                    <div class="carousel-card card-live" data-index="1" data-lage="cyberangriffe">
+                        <div class="demo-badge">LIVE</div>
+                        <h3 class="demo-title">Cyberangriffe auf deutsche Infrastruktur</h3>
+
+                        <div class="demo-excerpt" id="demo-excerpt-cyberangriffe">
+                            <div class="excerpt-text" id="excerpt-text-cyberangriffe">Lagebild wird geladen...</div>
                         </div>
+                        <a href="/lagen/cyberangriffe/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
                     </div>
-                    <div class="product-body">
+                    <!-- Deepfakes Recherche -->
-                        <p class="product-description" data-translate="protectedProductDesc">Dieses Produkt ist speziell für autorisierte Behörden entwickelt und erfordert eine Authentifizierung.</p>
+                    <div class="carousel-card card-live" data-index="2" data-lage="deepfakes">
-                        <button class="product-learn-more" onclick="showLoginModal()">
+                        <div class="demo-badge">RECHERCHE</div>
-                            <span data-translate="loginForAccess">Anmelden für Zugriff</span>
+                        <h3 class="demo-title">Rechtliche Lage von Deepfakes in Deutschland</h3>
-                        </button>
+
+                        <div class="demo-excerpt" id="demo-excerpt-deepfakes">
+                            <div class="excerpt-text" id="excerpt-text-deepfakes">Recherche wird geladen...</div>
+                        </div>
+                        <a href="/lagen/deepfakes/" class="btn btn-primary btn-block">Vollständige Recherche öffnen</a>
                     </div>
                 </div>
+                <div class="carousel-nav">
+                    <button class="carousel-dot active" data-index="0"></button>
+                    <button class="carousel-dot" data-index="1"></button>
+                    <button class="carousel-dot" data-index="2"></button>
+                </div>
+            </div>
+
+            <!-- Map -->
+            <div class="map-section" id="map-section">
+                <h3 class="map-title" id="map-title">Geografische Verortung der Meldungen</h3>
+                <div id="map-container"></div>
+                <div class="map-empty" id="map-empty" style="display:none">Kartendaten folgen</div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Gradient: Demos -> Contact -->
+    <div class="divider"></div>
+
+    <!-- Contact CTA -->
+    <section class="section section-base" id="contact">
+        <div class="container cta-container">
+            <h2 class="section-title">Interesse am AegisSight Monitor?</h2>
+            <p class="cta-text">Sprechen Sie mit uns über Ihren Anwendungsfall.</p>
+            <button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
+        </div>
+    </section>
+
+    <!-- Diagonal: Contact -> Trust -->
+    <div class="divider divider-diagonal-dark">
+        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#132844"/></svg>
+    </div>
+
+    <!-- Trust / Unser Versprechen -->
+    <section class="section section-dark" id="trust">
+        <div class="container">
+            <h2 class="section-title">Unser Versprechen</h2>
+            <div class="grid-4 trust-grid">
+                <div class="trust-card">
+                    <div class="trust-icon-wrap">
+                        <img src="/assets/images/icons/check-circle-filled.svg" alt="" width="48" height="48">
+                    </div>
+                    <h3>Enge Zusammenarbeit</h3>
+                    <p>Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen</p>
+                </div>
+                <div class="trust-card">
+                    <div class="trust-icon-wrap trust-flag">
+                        <img src="/assets/images/icons/german-flag.svg" alt="" width="60" height="36">
+                    </div>
+                    <h3>Made in Germany</h3>
+                    <p>Klare, robuste und sichere Software nach deutschen Qualitätsstandards</p>
+                </div>
+                <div class="trust-card">
+                    <div class="trust-icon-wrap">
+                        <img src="/assets/handshake.svg" alt="" width="50" height="50">
+                    </div>
+                    <h3>Verlässliche Partnerschaft</h3>
+                    <p>Basierend auf gemeinsamen Werten und langfristigem Vertrauen</p>
+                </div>
+                <div class="trust-card">
+                    <div class="trust-icon-wrap">
+                        <img src="/assets/images/icons/shield-check.svg" alt="" width="48" height="48">
+                    </div>
+                    <h3>Nachhaltigkeit</h3>
+                    <p>Fokus auf Sicherheit, Professionalität und zukunftssichere Lösungen</p>
+                </div>
             </div>
         </div>
     </section>
@@ -321,53 +430,58 @@
     <footer class="footer">
         <div class="container">
             <div class="footer-content">
-                <div class="footer-section">
+                <div class="footer-info">
-                    <h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
+                    <p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
-                    <p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
+                    <p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
-                    <p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
                 </div>
-                <div class="footer-section">
+                <div class="footer-links">
-                    <h4 data-translate="footerNavTitle">Navigation</h4>
+                    <a href="/impressum.html">Impressum</a>
-                    <ul>
+                    <a href="/datenschutz.html">Datenschutz</a>
-                        <li><a href="#home" data-translate="footerNavHome">Startseite</a></li>
+                    <a href="#" id="cookie-settings-link">Cookie-Einstellungen</a>
-                        <li><a href="#about" data-translate="footerNavAbout">Über uns</a></li>
-                        <li><a href="#products" data-translate="footerNavProducts">Lösungen</a></li>
-                        <li><a href="https://blog.aegis-sight.de" target="_blank">Blog</a></li>
-                    </ul>
-                </div>
-                <div class="footer-section">
-                    <h4 data-translate="footerLegalTitle">Rechtliches</h4>
-                    <ul>
-                        <li><a href="impressum.html" data-translate="footerImprint">Impressum</a></li>
-                        <li><a href="datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
-                        <li><a href="#" id="cookie-settings-link" data-translate="footerCookies">Cookie-Einstellungen</a></li>
-                    </ul>
-                </div>
-                <div class="footer-section">
-                    <h4 data-translate="footerContactTitle">Kontakt</h4>
-                    <p>info@aegis-sight.de</p>
                 </div>
             </div>
-            <p class="copyright" data-translate="copyright">© {year} AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
+            <p class="footer-copyright">&copy; <span id="footer-year">2026</span> AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
         </div>
     </footer>
+    <script>document.getElementById('footer-year').textContent=new Date().getFullYear();</script>
 
-    <!-- JavaScript Files -->
-    <script src="js/config.js"></script>
 
-    <!-- Cookie Consent (MUSS vor Analytics geladen werden!) -->
+    <!-- Contact Modal -->
-    <script src="cookie-consent.js"></script>
+    <div class="modal-overlay" id="contact-modal" style="display:none">
+        <div class="modal-content">
+            <button class="modal-close" onclick="closeContactModal()">&times;</button>
+            <h2>Kontakt aufnehmen</h2>
+            <p class="modal-sub">Sprechen Sie mit uns über Ihren Anwendungsfall.</p>
+            <form id="contact-form" onsubmit="return submitContact(event)">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="cf-name">Name</label>
+                        <input type="text" id="cf-name" name="name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="cf-org">Organisation</label>
+                        <input type="text" id="cf-org" name="organisation">
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="cf-email">E-Mail</label>
+                    <input type="email" id="cf-email" name="email" required>
+                </div>
+                <div class="form-group">
+                    <label for="cf-message">Nachricht</label>
+                    <textarea id="cf-message" name="message" rows="4" required></textarea>
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">Nachricht senden</button>
+            </form>
+            <div class="form-success" id="form-success" style="display:none">
+                <p>Vielen Dank für Ihre Nachricht. Wir melden uns zeitnah bei Ihnen.</p>
+            </div>
+        </div>
+    </div>
 
-    <script src="js/translations.js"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    <script src="js/animations.js"></script>
+    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
-    <script src="js/animations-enhanced.js"></script>
+    <script src="js/app.js"></script>
-    <script src="js/section-transitions.js"></script>
+    <script src="/cookie-consent.js"></script>
-    <script src="js/hero-videos.js"></script>
-    <script src="js/components.js"></script>
-    <script src="js/main.js"></script>
-    <script src="js/mobile-nav.js"></script>
-
-    <!-- AegisSight Analytics wird automatisch durch Cookie Consent geladen -->
-    <!-- <script async src="/insights/t.js"></script> ENTFERNT - wird nur bei Zustimmung geladen! -->
 </body>
-</html>
+</html>

js/app.js

@@ -41,28 +41,82 @@
         });
     });
 
-    /* ==================== HERO SLIDER ==================== */
+    /* ==================== HERO SLIDER (video-driven mit Endcard) ==================== */
+    var heroEl = document.querySelector('.hero');
     var heroSlides = document.querySelectorAll('.hero-slide');
     var heroDots = document.querySelectorAll('.hero-dot');
     var heroCurrentSlide = 0;
-    var heroTimer = null;
+    var heroEndcardTimer = null;
-    var HERO_INTERVAL = 8000;
+    var heroFallbackTimer = null;
     var heroIsTransitioning = false;
+    var HERO_ENDCARD_MS = 7000;
+    var HERO_FALLBACK_MS = 25000;
+
+    function heroClearTimers() {
+        if (heroEndcardTimer) { clearTimeout(heroEndcardTimer); heroEndcardTimer = null; }
+        if (heroFallbackTimer) { clearTimeout(heroFallbackTimer); heroFallbackTimer = null; }
+    }
+
+    function heroPlaySlideVideo(slide) {
+        var v = slide && slide.querySelector('video');
+        if (!v) return;
+        try { v.currentTime = 0; } catch (err) { /* ignore */ }
+        var p = v.play();
+        if (p && typeof p.catch === 'function') p.catch(function () { /* autoplay blocked */ });
+    }
+
+    function heroPauseSlideVideo(slide) {
+        var v = slide && slide.querySelector('video');
+        if (v) v.pause();
+    }
+
+    function heroEnterEndcard() {
+        if (!heroSlides.length) return;
+        var slide = heroSlides[heroCurrentSlide];
+        if (!slide || slide.classList.contains('ended')) return;
+        slide.classList.add('ended');
+        if (heroEl) heroEl.classList.add('endcard');
+        heroClearTimers();
+        heroEndcardTimer = setTimeout(function () {
+            heroEndcardTimer = null;
+            heroNext();
+        }, HERO_ENDCARD_MS);
+    }
+
+    function heroStartSlide() {
+        var slide = heroSlides[heroCurrentSlide];
+        if (!slide) return;
+        slide.classList.remove('ended');
+        if (heroEl) heroEl.classList.remove('endcard');
+        heroPlaySlideVideo(slide);
+        heroClearTimers();
+        heroFallbackTimer = setTimeout(function () {
+            heroFallbackTimer = null;
+            heroEnterEndcard();
+        }, HERO_FALLBACK_MS);
+    }
 
     function heroGoTo(index) {
         if (heroIsTransitioning || index === heroCurrentSlide || !heroSlides.length) return;
         heroIsTransitioning = true;
+        heroClearTimers();
 
         var oldIndex = heroCurrentSlide;
         heroSlides[oldIndex].classList.add('exiting');
         heroSlides[oldIndex].classList.remove('active');
+        // .ended bleibt waehrend des Fade-outs erhalten - sonst blitzt das pausierte
+        // Video-Frame durch, waehrend die Endcard ausfadet und der Container fadet aus.
+        if (heroEl) heroEl.classList.remove('endcard');
         if (heroDots[oldIndex]) heroDots[oldIndex].classList.remove('active');
 
+        heroPauseSlideVideo(heroSlides[oldIndex]);
+
         setTimeout(function () {
-            heroSlides[oldIndex].classList.remove('exiting');
+            heroSlides[oldIndex].classList.remove('exiting', 'ended');
             heroCurrentSlide = index;
             heroSlides[heroCurrentSlide].classList.add('active');
             if (heroDots[heroCurrentSlide]) heroDots[heroCurrentSlide].classList.add('active');
+            heroStartSlide();
             heroIsTransitioning = false;
         }, 400);
     }
@@ -75,52 +129,66 @@
         heroGoTo((heroCurrentSlide - 1 + heroSlides.length) % heroSlides.length);
     }
 
-    function heroStartAutoplay() {
+    // Pro Video: 'ended' → Endcard-Phase starten
-        heroStopAutoplay();
+    heroSlides.forEach(function (slide) {
-        heroTimer = setInterval(heroNext, HERO_INTERVAL);
+        var v = slide.querySelector('video');
-    }
+        if (!v) return;
-
+        v.addEventListener('ended', function () {
-    function heroStopAutoplay() {
+            if (slide.classList.contains('active')) heroEnterEndcard();
-        if (heroTimer) { clearInterval(heroTimer); heroTimer = null; }
+        });
-    }
+    });
 
     heroDots.forEach(function (dot, i) {
-        dot.addEventListener('click', function () {
+        dot.addEventListener('click', function () { heroGoTo(i); });
-            heroGoTo(i);
-            heroStartAutoplay();
-        });
     });
 
     var heroPrevBtn = document.querySelector('.hero-arrow-prev');
     var heroNextBtn = document.querySelector('.hero-arrow-next');
-    if (heroPrevBtn) heroPrevBtn.addEventListener('click', function () { heroPrev(); heroStartAutoplay(); });
+    if (heroPrevBtn) heroPrevBtn.addEventListener('click', heroPrev);
-    if (heroNextBtn) heroNextBtn.addEventListener('click', function () { heroNext(); heroStartAutoplay(); });
+    if (heroNextBtn) heroNextBtn.addEventListener('click', heroNext);
 
     var heroSlider = document.querySelector('.hero-slider');
     if (heroSlider) {
-        heroSlider.addEventListener('mouseenter', heroStopAutoplay);
-        heroSlider.addEventListener('mouseleave', heroStartAutoplay);
-
         var heroTouchStartX = 0;
         heroSlider.addEventListener('touchstart', function (e) {
             heroTouchStartX = e.changedTouches[0].screenX;
-            heroStopAutoplay();
         }, { passive: true });
         heroSlider.addEventListener('touchend', function (e) {
             var diff = e.changedTouches[0].screenX - heroTouchStartX;
             if (Math.abs(diff) > 50) {
                 if (diff < 0) heroNext(); else heroPrev();
             }
-            heroStartAutoplay();
         }, { passive: true });
     }
 
     document.addEventListener('visibilitychange', function () {
-        if (document.hidden) { heroStopAutoplay(); }
+        var slide = heroSlides[heroCurrentSlide];
-        else { heroStartAutoplay(); }
+        if (!slide) return;
+        if (document.hidden) {
+            heroClearTimers();
+            heroPauseSlideVideo(slide);
+            return;
+        }
+        if (slide.classList.contains('ended')) {
+            heroEndcardTimer = setTimeout(function () {
+                heroEndcardTimer = null;
+                heroNext();
+            }, HERO_ENDCARD_MS);
+        } else {
+            var v = slide.querySelector('video');
+            if (v) {
+                var p = v.play();
+                if (p && typeof p.catch === 'function') p.catch(function () {});
+            }
+            heroFallbackTimer = setTimeout(function () {
+                heroFallbackTimer = null;
+                heroEnterEndcard();
+            }, HERO_FALLBACK_MS);
+        }
     });
 
-    if (heroSlides.length > 1) heroStartAutoplay();
+    // Initialer Start (Slide 0 ist bereits .active im HTML)
+    if (heroSlides.length) heroStartSlide();
 
     /* ==================== MAP STATE ==================== */
     var mapInstance = null;
@@ -193,6 +261,112 @@
         positionCards((activeIndex + 1) % cards.length);
     });
 
+    /* ==================== NEUESTE ENTWICKLUNGEN (Live-Monitoring) ==================== */
+    function htmlEscape(s) {
+        return String(s == null ? '' : s)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+
+    function normalizeSourceName(s) {
+        return String(s || '').toLowerCase().replace(/^(der|die|das)\s+/, '').replace(/\s+/g, ' ').trim();
+    }
+
+    function renderLatestDevelopments(text, sources) {
+        if (!text) return null;
+        sources = Array.isArray(sources) ? sources : [];
+
+        var lines = text.split('\n').map(function (l) { return l.trim(); })
+            .filter(function (l) { return l && (l.charAt(0) === '-' || l.charAt(0) === '['); });
+        if (!lines.length) return null;
+
+        var bulletRe = /^(?:-\s*)?\[\s*(\d{1,2})\.(\d{1,2})\.?(?:\d{2,4})?\s+(\d{1,2}:\d{2})\s*\]\s*(.+?)\s*$/;
+        var trailingRe = /\s*\{([^{}]+)\}\s*\.?\s*$/;
+        var citationRe = /\[(\d+[a-z]?)\]/g;
+        var junkRe = /^(unbekannt|unknown|n\/?a|keine|keine quelle|tba)$/i;
+
+        function buildPill(src, name) {
+            var disp = (src && src.name) || name;
+            var url = (src && src.url) || '';
+            var tgMatch = url.match(/^https?:\/\/t\.me\/([^\/?#]+)/i);
+            var label = tgMatch ? disp + ' (t.me/' + tgMatch[1] + ')' : disp;
+            var e = htmlEscape(label);
+            var titleEsc = htmlEscape(disp);
+            if (src && src.url) {
+                return '<a href="' + htmlEscape(src.url) + '" target="_blank" rel="noopener" class="dev-source-pill" title="' + titleEsc + '">' + e + '</a>';
+            }
+            return '<span class="dev-source-pill" title="' + titleEsc + '">' + e + '</span>';
+        }
+
+        function lookupByName(name) {
+            var n = normalizeSourceName(name);
+            if (!n) return null;
+            var exact = sources.find(function (s) { return normalizeSourceName(s.name) === n; });
+            if (exact) return exact;
+            return sources.find(function (s) {
+                var sn = normalizeSourceName(s.name);
+                return sn && (sn.indexOf(n) !== -1 || n.indexOf(sn) !== -1);
+            }) || null;
+        }
+
+        var cards = [];
+        for (var i = 0; i < lines.length; i++) {
+            var m = bulletRe.exec(lines[i]);
+            if (!m) continue;
+            var date = String(m[1]).padStart(2, '0') + '.' + String(m[2]).padStart(2, '0') + '.';
+            var time = m[3];
+            var body = m[4];
+
+            var pills = '';
+            var t = trailingRe.exec(body);
+            if (t) {
+                body = body.replace(trailingRe, '').trim();
+                var items = t[1].split(',').map(function (n) { return n.trim(); }).filter(Boolean);
+                var seen = {};
+                pills = items.map(function (item) {
+                    var pipeIdx = item.indexOf('|');
+                    var itemName = pipeIdx >= 0 ? item.slice(0, pipeIdx).trim() : item.trim();
+                    var itemUrl  = pipeIdx >= 0 ? item.slice(pipeIdx + 1).trim() : '';
+                    if (!itemName || junkRe.test(itemName)) return '';
+                    var key = normalizeSourceName(itemName);
+                    if (seen[key]) return '';
+                    seen[key] = true;
+                    if (itemUrl) {
+                        return buildPill({ name: itemName, url: itemUrl }, itemName);
+                    }
+                    return buildPill(lookupByName(itemName), itemName);
+                }).filter(Boolean).join('');
+            }
+            if (!pills) {
+                var nums = [];
+                var cm;
+                while ((cm = citationRe.exec(body)) !== null) {
+                    if (nums.indexOf(cm[1]) === -1) nums.push(cm[1]);
+                }
+                citationRe.lastIndex = 0;
+                if (nums.length) {
+                    body = body.replace(citationRe, '').replace(/\s+/g, ' ').trim();
+                    pills = nums.map(function (num) {
+                        var src = sources.find(function (s) { return String(s.nr) === num || Number(s.nr) === Number(num); });
+                        return src ? buildPill(src, src.name) : '';
+                    }).filter(Boolean).join('');
+                }
+            }
+
+            var head = '<div class="dev-bullet-head">'
+                + '<span class="dev-sources">' + pills + '</span>'
+                + '<span class="dev-time">' + htmlEscape(time) + ' \u00b7 ' + htmlEscape(date) + '</span>'
+                + '</div>';
+            cards.push('<div class="dev-bullet">' + head + '<div class="dev-body">' + htmlEscape(body) + '</div></div>');
+        }
+
+        if (!cards.length) return null;
+        return '<div class="dev-list-heading">Neueste Entwicklungen</div>'
+            + '<div class="dev-list">' + cards.join('') + '</div>';
+    }
+
     /* ==================== SIMPLE MARKDOWN ==================== */
 function mdToHtml(md) {
         if (!md) return '';
@@ -292,7 +466,7 @@ function mdToHtml(md) {
 
     /* ==================== LEAFLET MAP ==================== */
     function clearMarkers() {
-        if (markerLayer) markerLayer.clearLayers();
+        if (markerLayer) { mapInstance.removeLayer(markerLayer); markerLayer = null; }
         if (legendControl && mapInstance) { mapInstance.removeControl(legendControl); legendControl = null; }
     }
 
@@ -311,7 +485,6 @@ function mdToHtml(md) {
             maxZoom: 19, noWrap: true
         }).addTo(mapInstance);
 
-        markerLayer = L.layerGroup().addTo(mapInstance);
         setTimeout(function () { mapInstance.invalidateSize(); }, 500);
     }
 
@@ -327,11 +500,31 @@ function mdToHtml(md) {
         });
     }
 
+    function buildPopup(loc) {
+        var html = '<strong style="color:#E8ECF4;">' + (loc.name || '') + '</strong>';
+        if (loc.country_code) html += ' <span style="color:#8896AB;font-size:0.8rem;">(' + loc.country_code + ')</span>';
+        html += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (loc.article_count || 0) + ' Artikel</span>';
+        if (loc.top_articles && loc.top_articles.length > 0) {
+            html += '<div style="margin-top:6px;border-top:1px solid #1E2D45;padding-top:6px;">';
+            loc.top_articles.forEach(function (a) {
+                var hl = (a.headline || '').replace(/\*\*/g, '');
+                if (hl.length > 60) hl = hl.substring(0, 60) + '\u2026';
+                if (a.url) {
+                    html += '<a href="' + a.url + '" target="_blank" rel="noopener" style="color:#C8A851;font-size:0.8rem;display:block;margin-top:3px;text-decoration:none;">' + hl + '</a>';
+                } else {
+                    html += '<span style="color:#8896AB;font-size:0.8rem;display:block;margin-top:3px;">' + hl + '</span>';
+                }
+                html += '<span style="color:#556B7A;font-size:0.7rem;">' + (a.source || '') + '</span>';
+            });
+            html += '</div>';
+        }
+        return html;
+    }
+
     function showMarkers(locations, apiLabels) {
         if (!mapInstance) createMap();
         clearMarkers();
 
-
         var categoryColors = {
             primary: '#ef4444',
             secondary: '#f59e0b',
@@ -343,7 +536,7 @@ function mdToHtml(md) {
             primary: 'Hauptgeschehen',
             secondary: 'Reaktionen',
             tertiary: 'Beteiligte',
-            mentioned: 'Erwähnt'
+            mentioned: 'Erw\u00e4hnt'
         };
 
         var categoryLabels = {};
@@ -351,6 +544,14 @@ function mdToHtml(md) {
             categoryLabels[k] = (apiLabels && apiLabels[k]) || defaultLabels[k];
         });
 
+        var clusterGroup = L.markerClusterGroup({
+            maxClusterRadius: 50,
+            spiderfyOnMaxZoom: true,
+            showCoverageOnHover: false,
+            zoomToBoundsOnClick: true,
+            disableClusteringAtZoom: 10
+        });
+
         var usedCategories = {};
         var bounds = [];
 
@@ -360,17 +561,23 @@ function mdToHtml(md) {
             var color = categoryColors[cat] || '#7b7b7b';
             usedCategories[cat] = true;
 
-            var popup = '<strong style="color:#E8ECF4;">' + (loc.name || '') + '</strong>';
+            var marker;
-            if (loc.country_code) popup += ' <span style="color:#8896AB;font-size:0.8rem;">(' + loc.country_code + ')</span>';
+            if (cat === 'primary' || cat === 'secondary') {
-            popup += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (loc.article_count || 0) + ' Artikel</span>';
+                marker = L.marker([loc.lat, loc.lon], { icon: pulseIcon(color) });
-
+            } else {
-            L.marker([loc.lat, loc.lon], { icon: pulseIcon(color) })
+                marker = L.circleMarker([loc.lat, loc.lon], {
-                .addTo(markerLayer)
+                    radius: 5, fillColor: color, fillOpacity: 0.7,
-                .bindPopup(popup);
+                    color: color, weight: 1, opacity: 0.9
+                });
+            }
+            marker.bindPopup(buildPopup(loc), { maxWidth: 300 });
+            clusterGroup.addLayer(marker);
             bounds.push([loc.lat, loc.lon]);
         });
 
-        // Dark legend (exact lagebild style)
+        markerLayer = clusterGroup;
+        mapInstance.addLayer(markerLayer);
+
         var legend = L.control({ position: 'bottomright' });
         legend.onAdd = function () {
             var div = L.DomUtil.create('div');
@@ -398,6 +605,7 @@ function mdToHtml(md) {
     window.openContactModal = function () {
         document.getElementById('contact-modal').style.display = 'flex';
         document.body.style.overflow = 'hidden';
+        if (window.umami) umami.track('contact_modal_open');
     };
 
     window.closeContactModal = function () {
@@ -441,6 +649,7 @@ function mdToHtml(md) {
             if (res.ok) {
                 document.getElementById('contact-form').style.display = 'none';
                 document.getElementById('form-success').style.display = 'block';
+                if (window.umami) umami.track('contact_form_success');
             } else {
                 alert(res.data.error || 'Fehler beim Senden');
                 if (btn) { btn.disabled = false; btn.textContent = 'Nachricht senden'; }

lagen/cyberangriffe/index.html

@@ -11,6 +11,9 @@
     <link rel="stylesheet" href="/css/mobile.css">
     <link rel="stylesheet" href="/lagen/iran-konflikt/lagebild.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
+    <link rel="stylesheet" href="/cookie-consent.css">
 </head>
 <body class="lagebild-page">
     <div class="scroll-progress" id="scroll-progress"></div>
@@ -20,27 +23,28 @@
                 <a href="/"><img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
             </div>
             <ul class="nav-menu">
-                <li><a href="/">Startseite</a></li>
+                <li><a href="/" data-translate="navHome">Startseite</a></li>
-                <li><a href="/#about">\u00dcber uns</a></li>
+                <li><a href="/#about" data-translate="navAbout">Über uns</a></li>
-                <li><a href="/#products">L\u00f6sungen</a></li>
+                <li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
-                <li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
+                <li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
             </ul>
             <div class="nav-extras">
-                <button class="mobile-menu-toggle" aria-label="Men\u00fc \u00f6ffnen" aria-expanded="false">
+                <button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
+                <button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
                     <span class="hamburger"><span></span><span></span><span></span></span>
                 </button>
             </div>
         </div>
     </nav>
     <div class="nav-menu-mobile" aria-hidden="true">
-        <button class="mobile-menu-close" aria-label="Men\u00fc schlie\u00dfen">
+        <button class="mobile-menu-close" aria-label="Menü schließen">
             <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
         </button>
         <ul>
-            <li><a href="/">Startseite</a></li>
+            <li><a href="/" data-translate="navHome">Startseite</a></li>
-            <li><a href="/#about">\u00dcber uns</a></li>
+            <li><a href="/#about" data-translate="navAbout">Über uns</a></li>
-            <li><a href="/#products">L\u00f6sungen</a></li>
+            <li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
-            <li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
+            <li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
         </ul>
     </div>
     <div class="mobile-menu-overlay"></div>
@@ -60,7 +64,8 @@
                 <div class="timeline-dropdown" id="timeline-dropdown"></div>
             </div>
             <div class="tab-nav" id="tab-nav">
-                <button class="tab-btn active" data-tab="lagebild">Lagebild</button>
+                <button class="tab-btn active" data-tab="ueberblick">Neueste Entwicklungen</button>
+                <button class="tab-btn" data-tab="lagebild">Lagebild</button>
                 <button class="tab-btn" data-tab="karte">Karte</button>
                 <button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
                 <button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
@@ -69,7 +74,19 @@
     </div>
     <main class="lagebild-main">
         <div class="container">
-            <div class="tab-panel active" id="panel-lagebild">
+            <div class="tab-panel active" id="panel-ueberblick">
+                <p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
+                <section class="content-card">
+                    <div class="card-header">
+                        <h2 id="ueberblick-title">Neueste Entwicklungen</h2>
+                        <span class="card-timestamp" id="ueberblick-timestamp"></span>
+                    </div>
+                    <div class="card-body" id="ueberblick-content">
+                        <div class="loading-skeleton"><div class="skeleton-line"></div><div class="skeleton-line"></div><div class="skeleton-line short"></div></div>
+                    </div>
+                </section>
+            </div>
+            <div class="tab-panel" id="panel-lagebild">
                 <p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
                 <section class="content-card">
                     <div class="card-header">
@@ -84,7 +101,7 @@
             </div>
             <div class="tab-panel" id="panel-quellen">
                 <section class="content-card">
-                    <div class="card-header"><h2>Quellen</h2><p class="card-description">Alle vom AegisSight Monitor \u00fcberwachten Quellen</p></div>
+                    <div class="card-header"><h2>Quellen</h2><p class="card-description">Alle vom AegisSight Monitor überwachten Quellen</p></div>
                     <div class="card-body" id="sources-grid-container"><div class="loading-skeleton"><div class="skeleton-line"></div><div class="skeleton-line short"></div></div></div>
                 </section>
             </div>
@@ -96,7 +113,7 @@
             </div>
             <div class="tab-panel" id="panel-faktenchecks">
                 <section class="content-card">
-                    <div class="card-header"><h2>Faktenchecks</h2><p class="card-description">KI-gest\u00fctzte Verifizierung aller zentralen Aussagen gegen unabh\u00e4ngige Quellen.</p></div>
+                    <div class="card-header"><h2>Faktenchecks</h2><p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen.</p></div>
                     <div class="card-body" id="factchecks-content"></div>
                 </section>
             </div>
@@ -105,18 +122,20 @@
     <footer class="footer">
         <div class="container">
             <div class="footer-content">
-                <div class="footer-section"><h4>AegisSight UG (haftungsbeschr\u00e4nkt)</h4><p>Gladbacher Strasse 3-5</p><p>40764 Langenfeld</p></div>
+                <div class="footer-section"><h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4><p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p><p data-translate="footerCompanyAddress2">40764 Langenfeld</p></div>
-                <div class="footer-section"><h4>Navigation</h4><ul><li><a href="/">Startseite</a></li><li><a href="/#about">\u00dcber uns</a></li><li><a href="/#products">L\u00f6sungen</a></li></ul></div>
+                <div class="footer-section"><h4 data-translate="footerNavTitle">Navigation</h4><ul><li><a href="/" data-translate="footerNavHome">Startseite</a></li><li><a href="/#features">Funktionen</a></li><li><a href="/#demos">Live-Lagebilder</a></li><li><a href="/#trust" data-translate="footerNavAbout">Über uns</a></li><li><a href="/#contact">Kontakt</a></li></ul></div>
-                <div class="footer-section"><h4>Rechtliches</h4><ul><li><a href="/impressum.html">Impressum</a></li><li><a href="/datenschutz.html">Datenschutz</a></li></ul></div>
+                <div class="footer-section"><h4 data-translate="footerLegalTitle">Rechtliches</h4><ul><li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li><li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li><li><a href="#" id="cookie-settings-link">Cookie-Einstellungen</a></li></ul></div>
-                <div class="footer-section"><h4>Kontakt</h4><p>info@aegis-sight.de</p></div>
+                <div class="footer-section"><h4 data-translate="footerContactTitle">Kontakt</h4><p>info@aegis-sight.de</p></div>
             </div>
-            <p class="copyright">&copy; 2026 AegisSight UG (haftungsbeschr\u00e4nkt). Alle Rechte vorbehalten.</p>
+            <p class="copyright">&copy; 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
         </div>
     </footer>
     <script src="/js/config.js"></script>
     <script src="/js/translations.js"></script>
     <script src="/js/mobile-nav.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
     <script src="/lagen/iran-konflikt/lagebild.js"></script>
+    <script src="/cookie-consent.js"></script>
 </body>
 </html>

lagen/deepfakes/index.html

@@ -11,6 +11,9 @@
     <link rel="stylesheet" href="/css/mobile.css">
     <link rel="stylesheet" href="/lagen/iran-konflikt/lagebild.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
+    <link rel="stylesheet" href="/cookie-consent.css">
 </head>
 <body class="lagebild-page">
     <!-- Scroll Progress Bar -->
@@ -23,13 +26,14 @@
                 <a href="/"><img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img"></a>
             </div>
             <ul class="nav-menu">
-                <li><a href="/">Startseite</a></li>
+                <li><a href="/" data-translate="navHome">Startseite</a></li>
-                <li><a href="/#about">\u00dcber uns</a></li>
+                <li><a href="/#about" data-translate="navAbout">Über uns</a></li>
-                <li><a href="/#products">L\u00f6sungen</a></li>
+                <li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
-                <li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
+                <li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
             </ul>
             <div class="nav-extras">
-                <button class="mobile-menu-toggle" aria-label="Men\u00fc \u00f6ffnen" aria-expanded="false">
+                <button class="lang-toggle" data-lang="de" aria-label="Sprache wechseln" data-translate="langSwitch">DE | EN</button>
+                <button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
                     <span class="hamburger"><span></span><span></span><span></span></span>
                 </button>
             </div>
@@ -38,14 +42,14 @@
 
     <!-- Mobile Navigation -->
     <div class="nav-menu-mobile" aria-hidden="true">
-        <button class="mobile-menu-close" aria-label="Men\u00fc schlie\u00dfen">
+        <button class="mobile-menu-close" aria-label="Menü schließen">
             <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6l12 12" stroke="currentColor"/></svg>
         </button>
         <ul>
-            <li><a href="/">Startseite</a></li>
+            <li><a href="/" data-translate="navHome">Startseite</a></li>
-            <li><a href="/#about">\u00dcber uns</a></li>
+            <li><a href="/#about" data-translate="navAbout">Über uns</a></li>
-            <li><a href="/#products">L\u00f6sungen</a></li>
+            <li><a href="/#products" data-translate="navProducts">Lösungen</a></li>
-            <li><a href="mailto:info@aegis-sight.de">Kontakt</a></li>
+            <li><a href="mailto:info@aegis-sight.de" data-translate="navContact">Kontakt</a></li>
         </ul>
     </div>
     <div class="mobile-menu-overlay"></div>
@@ -69,7 +73,8 @@
                 <div class="timeline-dropdown" id="timeline-dropdown"></div>
             </div>
             <div class="tab-nav" id="tab-nav">
-                <button class="tab-btn active" data-tab="lagebild">Recherche</button>
+                <button class="tab-btn active" data-tab="ueberblick">Zusammenfassung</button>
+                <button class="tab-btn" data-tab="lagebild">Recherche</button>
                 <button class="tab-btn" data-tab="karte">Karte</button>
                 <button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
                 <button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
@@ -80,8 +85,26 @@
     <!-- Main Content -->
     <main class="lagebild-main">
         <div class="container">
-            <!-- Tab: Lagebild -->
+            <!-- Tab: Ueberblick (Zusammenfassung) -->
-            <div class="tab-panel active" id="panel-lagebild">
+            <div class="tab-panel active" id="panel-ueberblick">
+                <p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
+                <section class="content-card">
+                    <div class="card-header">
+                        <h2 id="ueberblick-title">Zusammenfassung</h2>
+                        <span class="card-timestamp" id="ueberblick-timestamp"></span>
+                    </div>
+                    <div class="card-body" id="ueberblick-content">
+                        <div class="loading-skeleton">
+                            <div class="skeleton-line"></div>
+                            <div class="skeleton-line"></div>
+                            <div class="skeleton-line short"></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+
+            <!-- Tab: Lagebild (Recherche) -->
+            <div class="tab-panel" id="panel-lagebild">
                 <p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
                 <section class="content-card">
                     <div class="card-header">
@@ -133,7 +156,7 @@
                 <section class="content-card">
                     <div class="card-header">
                         <h2>Faktenchecks</h2>
-                        <p class="card-description">KI-gest\u00fctzte Verifizierung aller zentralen Aussagen gegen unabh\u00e4ngige Quellen.</p>
+                        <p class="card-description">KI-gestützte Verifizierung aller zentralen Aussagen gegen unabhängige Quellen.</p>
                     </div>
                     <div class="card-body" id="factchecks-content"></div>
                 </section>
@@ -146,31 +169,34 @@
         <div class="container">
             <div class="footer-content">
                 <div class="footer-section">
-                    <h4>AegisSight UG (haftungsbeschr\u00e4nkt)</h4>
+                    <h4 data-translate="footerCompanyTitle">AegisSight UG (haftungsbeschränkt)</h4>
-                    <p>Gladbacher Strasse 3-5</p>
+                    <p data-translate="footerCompanyAddress1">Gladbacher Strasse 3-5</p>
-                    <p>40764 Langenfeld</p>
+                    <p data-translate="footerCompanyAddress2">40764 Langenfeld</p>
                 </div>
                 <div class="footer-section">
-                    <h4>Navigation</h4>
+                    <h4 data-translate="footerNavTitle">Navigation</h4>
                     <ul>
-                        <li><a href="/">Startseite</a></li>
+                        <li><a href="/" data-translate="footerNavHome">Startseite</a></li>
-                        <li><a href="/#about">\u00dcber uns</a></li>
+                        <li><a href="/#features" data-translate="footerNavFeatures">Funktionen</a></li>
-                        <li><a href="/#products">L\u00f6sungen</a></li>
+                        <li><a href="/#demos" data-translate="footerNavDemos">Live-Lagebilder</a></li>
+                        <li><a href="/#trust" data-translate="footerNavAbout">Über uns</a></li>
+                        <li><a href="/#contact" data-translate="footerNavContact">Kontakt</a></li>
                     </ul>
                 </div>
                 <div class="footer-section">
-                    <h4>Rechtliches</h4>
+                    <h4 data-translate="footerLegalTitle">Rechtliches</h4>
                     <ul>
-                        <li><a href="/impressum.html">Impressum</a></li>
+                        <li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li>
-                        <li><a href="/datenschutz.html">Datenschutz</a></li>
+                        <li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
+                        <li><a href="#" id="cookie-settings-link">Cookie-Einstellungen</a></li>
                     </ul>
                 </div>
                 <div class="footer-section">
-                    <h4>Kontakt</h4>
+                    <h4 data-translate="footerContactTitle">Kontakt</h4>
                     <p>info@aegis-sight.de</p>
                 </div>
             </div>
-            <p class="copyright">&copy; 2026 AegisSight UG (haftungsbeschr\u00e4nkt). Alle Rechte vorbehalten.</p>
+            <p class="copyright">&copy; 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
         </div>
     </footer>
 
@@ -179,6 +205,8 @@
     <script src="/js/translations.js"></script>
     <script src="/js/mobile-nav.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
     <script src="/lagen/iran-konflikt/lagebild.js"></script>
+    <script src="/cookie-consent.js"></script>
 </body>
-</html>
+</html>

lagen/iran-konflikt/index.html

@@ -11,6 +11,9 @@
     <link rel="stylesheet" href="/css/mobile.css">
     <link rel="stylesheet" href="lagebild.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
+    <link rel="stylesheet" href="/cookie-consent.css">
 </head>
 <body class="lagebild-page">
     <!-- Scroll Progress Bar -->
@@ -74,7 +77,8 @@
                 <div class="timeline-dropdown" id="timeline-dropdown"></div>
             </div>
             <div class="tab-nav" id="tab-nav">
-                <button class="tab-btn active" data-tab="lagebild">Lagebild</button>
+                <button class="tab-btn active" data-tab="ueberblick">Neueste Entwicklungen</button>
+                <button class="tab-btn" data-tab="lagebild">Lagebild</button>
                 <button class="tab-btn" data-tab="karte">Karte</button>
                 <button class="tab-btn" data-tab="faktenchecks">Faktenchecks <span class="tab-badge" id="tab-badge-faktenchecks"></span></button>
                 <button class="tab-btn" data-tab="quellen">Quellen <span class="tab-badge" id="tab-badge-quellen"></span></button>
@@ -85,8 +89,26 @@
     <!-- Main Content -->
     <main class="lagebild-main">
         <div class="container">
+            <!-- Tab: Ueberblick (Neueste Entwicklungen / Zusammenfassung) -->
+            <div class="tab-panel active" id="panel-ueberblick">
+                <p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
+                <section class="content-card">
+                    <div class="card-header">
+                        <h2 id="ueberblick-title">Neueste Entwicklungen</h2>
+                        <span class="card-timestamp" id="ueberblick-timestamp"></span>
+                    </div>
+                    <div class="card-body" id="ueberblick-content">
+                        <div class="loading-skeleton">
+                            <div class="skeleton-line"></div>
+                            <div class="skeleton-line"></div>
+                            <div class="skeleton-line short"></div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+
             <!-- Tab: Lagebild -->
-            <div class="tab-panel active" id="panel-lagebild">
+            <div class="tab-panel" id="panel-lagebild">
                 <p class="data-source-note">Daten bereitgestellt durch AegisSight Monitor</p>
                 <section class="content-card">
                     <div class="card-header">
@@ -161,8 +183,10 @@
                     <h4 data-translate="footerNavTitle">Navigation</h4>
                     <ul>
                         <li><a href="/" data-translate="footerNavHome">Startseite</a></li>
-                        <li><a href="/#about" data-translate="footerNavAbout">Über uns</a></li>
+                        <li><a href="/#features" data-translate="footerNavFeatures">Funktionen</a></li>
-                        <li><a href="/#products" data-translate="footerNavProducts">Lösungen</a></li>
+                        <li><a href="/#demos" data-translate="footerNavDemos">Live-Lagebilder</a></li>
+                        <li><a href="/#trust" data-translate="footerNavAbout">Über uns</a></li>
+                        <li><a href="/#contact" data-translate="footerNavContact">Kontakt</a></li>
                     </ul>
                 </div>
                 <div class="footer-section">
@@ -170,6 +194,7 @@
                     <ul>
                         <li><a href="/impressum.html" data-translate="footerImprint">Impressum</a></li>
                         <li><a href="/datenschutz.html" data-translate="footerPrivacy">Datenschutz</a></li>
+                        <li><a href="#" id="cookie-settings-link">Cookie-Einstellungen</a></li>
                     </ul>
                 </div>
                 <div class="footer-section">
@@ -186,6 +211,8 @@
     <script src="/js/translations.js"></script>
     <script src="/js/mobile-nav.js"></script>
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
     <script src="lagebild.js"></script>
+    <script src="/cookie-consent.js"></script>
 </body>
 </html>

lagen/iran-konflikt/lagebild.css

@@ -1553,3 +1553,81 @@ a.source-detail-article-title:hover {
         margin-top: 1rem;
     }
 }
+
+/* Marker-Cluster Dark Theme */
+.marker-cluster-small,
+.marker-cluster-medium,
+.marker-cluster-large {
+    background: rgba(21, 29, 46, 0.8);
+}
+.marker-cluster-small div,
+.marker-cluster-medium div,
+.marker-cluster-large div {
+    background: rgba(200, 168, 81, 0.9);
+    color: #0A1832;
+    font-weight: 600;
+}
+
+/* === Neueste Entwicklungen / Ueberblick-Tab === */
+.dev-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+.dev-bullet {
+    background: rgba(30, 45, 69, 0.5);
+    border-left: 3px solid #C8A851;
+    border-radius: 4px;
+    padding: 10px 14px;
+}
+.dev-bullet-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 6px;
+    flex-wrap: wrap;
+}
+.dev-sources {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    align-items: center;
+    min-width: 0;
+}
+.dev-source-pill {
+    display: inline-block;
+    padding: 3px 10px;
+    background: rgba(200, 168, 81, 0.18);
+    color: #E8ECF4;
+    border-radius: 3px;
+    font-size: 0.78rem;
+    font-weight: 500;
+    text-decoration: none;
+    line-height: 1.5;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    transition: background 0.15s;
+}
+a.dev-source-pill:hover {
+    background: rgba(200, 168, 81, 0.35);
+    text-decoration: none;
+    color: #E8ECF4;
+}
+.dev-time {
+    color: #8896AB;
+    font-size: 0.78rem;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+.dev-body {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: #E8ECF4;
+}
+.empty-hint {
+    color: #8896AB;
+    font-style: italic;
+    padding: 16px 0;
+}

lagen/iran-konflikt/lagebild.js

@@ -14,6 +14,80 @@ var Lagebild = {
     timelineGroups: null,
 
     /* ===== Inline SVG Icons ===== */
+    /* ===== LANGUAGE SUPPORT ===== */
+    lang: {
+        de: {
+            hero: "LAGEBILD", heroResearch: "RECHERCHE",
+            tabBriefing: "Lagebild", tabBriefingResearch: "Recherche",
+            tabUeberblick: "Neueste Entwicklungen", tabUeberblickResearch: "Zusammenfassung",
+            tabMap: "Karte", tabFactchecks: "Faktenchecks", tabSources: "Quellen",
+            statArticles: "Artikel", statSources: "Quellen", statFactchecks: "Faktenchecks",
+            dataSource: "Daten bereitgestellt durch AegisSight Monitor",
+            timelineCurrent: "Aktuell", timelineArticles: "Artikel", timelineFcs: "Faktenchecks",
+            srcArticlesFrom: "{count} Artikel aus {sources} Quellen",
+            srcArticle: "Artikel", srcClose: "Schlie\u00dfen",
+            mapNoData: "Keine Standortdaten verf\u00fcgbar", mapLegend: "Legende", mapArticles: "Artikel",
+            fcTotal: "Gesamt", fcConfirmed: "Best\u00e4tigt", fcOpen: "Offen", fcContradicted: "Widerlegt",
+            fcEvidence: "Evidenz:", fcProgression: "Verlauf:", fcSources: "unabh\u00e4ngige Quellen",
+            fcNone: "Keine Faktenchecks verf\u00fcgbar.",
+            fcCleaned: "{count} von {total} Faktenchecks verf\u00fcgbar (\u00e4ltere wurden bereinigt)",
+            ctaText: "AegisSight Monitor f\u00fcr Ihre Organisation", ctaButton: "Kontakt aufnehmen \u2192",
+            errorLoad: "Das Lagebild konnte nicht geladen werden. Bitte versuchen Sie es sp\u00e4ter erneut.",
+            snapshotHint: "",
+            standPrefix: "Stand: ", standSuffix: " Uhr",
+            stConfirmed: "Best\u00e4tigt", stUnconfirmed: "Unbest\u00e4tigt", stContradicted: "Widerlegt",
+            stDeveloping: "Unklar", stEstablished: "Gesichert", stDisputed: "Umstritten",
+            stFalse: "Falsch", stUnverified: "Nicht verifiziert",
+            sourceRef: "Quelle",
+            lastUpdate: "Letzte Aktualisierung: ",
+            minAgo: "vor {n} Min", hrsAgo: "vor {n} Std",
+        },
+        en: {
+            hero: "SITUATION REPORT", heroResearch: "RESEARCH BRIEFING",
+            tabBriefing: "Briefing", tabBriefingResearch: "Research",
+            tabUeberblick: "Latest Developments", tabUeberblickResearch: "Summary",
+            tabMap: "Map", tabFactchecks: "Fact Checks", tabSources: "Sources",
+            statArticles: "Articles", statSources: "Sources", statFactchecks: "Fact Checks",
+            dataSource: "Data provided by AegisSight Monitor",
+            timelineCurrent: "Current", timelineArticles: "Articles", timelineFcs: "Fact Checks",
+            srcArticlesFrom: "{count} articles from {sources} sources",
+            srcArticle: "Articles", srcClose: "Close",
+            mapNoData: "No location data available", mapLegend: "Legend", mapArticles: "Articles",
+            fcTotal: "Total", fcConfirmed: "Confirmed", fcOpen: "Open", fcContradicted: "Contradicted",
+            fcEvidence: "Evidence:", fcProgression: "History:", fcSources: "independent sources",
+            fcNone: "No fact checks available.",
+            fcCleaned: "{count} of {total} fact checks available (older ones were cleaned up)",
+            ctaText: "AegisSight Monitor for your organization", ctaButton: "Contact us \u2192",
+            errorLoad: "The briefing could not be loaded. Please try again later.",
+            snapshotHint: "Historical data available in German only",
+            standPrefix: "As of: ", standSuffix: "",
+            stConfirmed: "Confirmed", stUnconfirmed: "Unconfirmed", stContradicted: "Contradicted",
+            stDeveloping: "Developing", stEstablished: "Established", stDisputed: "Disputed",
+            stFalse: "False", stUnverified: "Unverified",
+            sourceRef: "Source",
+            lastUpdate: "Last update: ",
+            minAgo: "{n} min ago", hrsAgo: "{n} hrs ago",
+        }
+    },
+
+    curLang: function() {
+        return (typeof getCurrentLanguage === 'function') ? getCurrentLanguage() : 'de';
+    },
+
+    t: function(key) {
+        var cl = this.curLang();
+        return (this.lang[cl] && this.lang[cl][key]) || this.lang.de[key] || key;
+    },
+
+    getLocale: function() {
+        return this.curLang() === 'en' ? 'en-GB' : 'de-DE';
+    },
+
+    getHeadline: function(article) {
+        if (this.curLang() === 'en') return article.headline || article.headline_de || '';
+        return article.headline_de || article.headline || '';
+    },
+
     icons: {
         clock: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>',
         fileText: '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>',
@@ -29,7 +103,10 @@ var Lagebild = {
         this.initScrollProgress();
         this.initParticles();
         try {
-            var resp = await fetch('data/current.json?t=' + Date.now());
+            var savedLang = (typeof getCurrentLanguage === 'function') ? getCurrentLanguage() : 'de';
+            var jsonFile = savedLang === 'en' ? 'data/current_en.json' : 'data/current.json';
+            var resp = await fetch(jsonFile + '?t=' + Date.now());
+            if (!resp.ok && savedLang === 'en') { resp = await fetch('data/current.json?t=' + Date.now()); }
             if (!resp.ok) throw new Error('HTTP ' + resp.status);
             this.data = await resp.json();
             this.currentView = {
@@ -58,6 +135,149 @@ var Lagebild = {
         this.renderTimeline();
         this.renderTabBadges();
         this.renderCurrentView();
+        this.renderUeberblick();
+    },
+
+    /* ===== TAB: UEBERBLICK (Neueste Entwicklungen / Zusammenfassung) ===== */
+    renderUeberblick: function() {
+        var inc = (this.data && this.data.incident) || {};
+        var el = document.getElementById('ueberblick-content');
+        var tsEl = document.getElementById('ueberblick-timestamp');
+        if (!el) return;
+        if (tsEl) tsEl.textContent = this.fmtDT(this.currentView && this.currentView.updated_at);
+
+        if (inc.type === 'adhoc') {
+            var dev = inc.latest_developments || '';
+            var sources = (this.currentView && this.currentView.sources_json) || [];
+            var html = this.renderLatestDevelopmentsHtml(dev, sources);
+            el.innerHTML = html || '<p class="empty-hint">Noch keine Entwicklungen erfasst.</p>';
+        } else {
+            var md = (this.currentView && this.currentView.summary) || '';
+            var zf = this.extractZusammenfassung(md);
+            if (!zf) {
+                el.innerHTML = '<p class="empty-hint">Keine Zusammenfassung verf&uuml;gbar.</p>';
+                return;
+            }
+            var body = this.mdToHtml(this.fixUmlauts(zf));
+            var srcMap = {};
+            var sources = (this.currentView && this.currentView.sources_json) || [];
+            for (var i = 0; i < sources.length; i++) srcMap[String(sources[i].nr)] = sources[i];
+            var self = this;
+            body = body.replace(/\[(\d+[a-z]?)\]/g, function(match, nr) {
+                var src = srcMap[nr];
+                if (src && src.url) {
+                    return '<a class="citation-ref" href="' + self.esc(src.url) + '" target="_blank" rel="noopener" title="' + self.esc(src.name || '') + '">[' + nr + ']</a>';
+                }
+                return '<a class="citation-ref" title="Quelle ' + nr + '">[' + nr + ']</a>';
+            });
+            el.innerHTML = body;
+        }
+    },
+
+    extractZusammenfassung: function(md) {
+        if (!md) return '';
+        var sections = md.split(/^## /m);
+        for (var i = 0; i < sections.length; i++) {
+            var s = sections[i];
+            if (/^zusammenfassung/i.test(s.trim())) {
+                var next = s.split(/\n## /)[0];
+                return next.replace(/^[^\n]*\n?/, '').trim();
+            }
+        }
+        return '';
+    },
+
+    stripZusammenfassung: function(md) {
+        if (!md) return md;
+        var lines = md.split('\n');
+        var result = [];
+        var skipping = false;
+        for (var i = 0; i < lines.length; i++) {
+            var line = lines[i];
+            if (/^##\s+zusammenfassung\b/i.test(line)) { skipping = true; continue; }
+            if (skipping && /^##\s+/.test(line)) skipping = false;
+            if (!skipping) result.push(line);
+        }
+        return result.join('\n').replace(/^\s+/, '');
+    },
+
+    renderLatestDevelopmentsHtml: function(text, sources) {
+        if (!text) return '';
+        sources = Array.isArray(sources) ? sources : [];
+        var self = this;
+
+        var lines = text.split('\n').map(function(l){return l.trim();})
+            .filter(function(l){return l && (l.charAt(0) === '-' || l.charAt(0) === '[');});
+        if (!lines.length) return '';
+
+        var bulletRe = /^(?:-\s*)?\[\s*(\d{1,2})\.(\d{1,2})\.?(?:\d{2,4})?\s+(\d{1,2}:\d{2})\s*\]\s*(.+?)\s*$/;
+        var trailingRe = /\s*\{([^{}]+)\}\s*\.?\s*$/;
+        var citationRe = /\[(\d+[a-z]?)\]/g;
+        var junkRe = /^(unbekannt|unknown|n\/?a|keine|keine quelle|tba)$/i;
+
+        function normName(s) { return String(s||'').toLowerCase().replace(/^(der|die|das)\s+/,'').replace(/\s+/g,' ').trim(); }
+        function lookupByName(name) {
+            var n = normName(name); if (!n) return null;
+            var exact = sources.find(function(s){ return normName(s.name) === n; });
+            if (exact) return exact;
+            return sources.find(function(s){ var sn=normName(s.name); return sn && (sn.indexOf(n)!==-1 || n.indexOf(sn)!==-1); }) || null;
+        }
+        function buildPill(src, name) {
+            var disp = (src && src.name) || name;
+            var url = (src && src.url) || '';
+            var tgMatch = url.match(/^https?:\/\/t\.me\/([^\/?#]+)/i);
+            var label = tgMatch ? disp + ' (t.me/' + tgMatch[1] + ')' : disp;
+            var e = self.esc(label);
+            var titleEsc = self.esc(disp);
+            if (src && src.url) return '<a href="'+self.esc(src.url)+'" target="_blank" rel="noopener" class="dev-source-pill" title="'+titleEsc+'">'+e+'</a>';
+            return '<span class="dev-source-pill" title="'+titleEsc+'">'+e+'</span>';
+        }
+
+        var cards = [];
+        for (var i = 0; i < lines.length; i++) {
+            var m = bulletRe.exec(lines[i]); if (!m) continue;
+            var date = String(m[1]).padStart(2,'0') + '.' + String(m[2]).padStart(2,'0') + '.';
+            var time = m[3]; var body = m[4];
+
+            var pills = '';
+            var t = trailingRe.exec(body);
+            if (t) {
+                body = body.replace(trailingRe, '').trim();
+                var items = t[1].split(',').map(function(n){return n.trim();}).filter(Boolean);
+                var seen = {};
+                pills = items.map(function(item){
+                    var pipeIdx = item.indexOf('|');
+                    var itemName = pipeIdx >= 0 ? item.slice(0, pipeIdx).trim() : item.trim();
+                    var itemUrl  = pipeIdx >= 0 ? item.slice(pipeIdx + 1).trim() : '';
+                    if (!itemName || junkRe.test(itemName)) return '';
+                    var k = normName(itemName); if (seen[k]) return ''; seen[k] = true;
+                    if (itemUrl) {
+                        return buildPill({ name: itemName, url: itemUrl }, itemName);
+                    }
+                    return buildPill(lookupByName(itemName), itemName);
+                }).filter(Boolean).join('');
+            }
+            if (!pills) {
+                var nums = []; var cm;
+                while ((cm = citationRe.exec(body)) !== null) { if (nums.indexOf(cm[1]) === -1) nums.push(cm[1]); }
+                citationRe.lastIndex = 0;
+                if (nums.length) {
+                    body = body.replace(citationRe, '').replace(/\s+/g, ' ').trim();
+                    pills = nums.map(function(num){
+                        var src = sources.find(function(s){ return String(s.nr) === num || Number(s.nr) === Number(num); });
+                        return src ? buildPill(src, src.name) : '';
+                    }).filter(Boolean).join('');
+                }
+            }
+
+            var head = '<div class="dev-bullet-head">'
+                + '<span class="dev-sources">' + pills + '</span>'
+                + '<span class="dev-time">' + self.esc(time) + ' \u00b7 ' + self.esc(date) + '</span>'
+                + '</div>';
+            cards.push('<div class="dev-bullet">' + head + '<div class="dev-body">' + self.esc(body) + '</div></div>');
+        }
+
+        return cards.length ? '<div class="dev-list">' + cards.join('') + '</div>' : '';
     },
 
     /* ===== SCROLL PROGRESS BAR ===== */
@@ -147,11 +367,11 @@ var Lagebild = {
         var d = this.data;
         var genDate = new Date(this.toUTC(d.generated_at));
         var diffMin = Math.max(1, Math.round((Date.now() - genDate.getTime()) / 60000));
-        var diffText = diffMin < 60 ? ('vor ' + diffMin + ' Min') : ('vor ' + Math.round(diffMin / 60) + ' Std');
+        var diffText = diffMin < 60 ? this.t('minAgo').replace('{n}', diffMin) : this.t('hrsAgo').replace('{n}', Math.round(diffMin / 60));
 
         container.innerHTML = '<div class="live-feed-item active">'
             + '<span class="live-feed-dot"></span>'
-            + '<span>Letzte Aktualisierung: ' + diffText + '</span>'
+            + '<span>' + this.t('lastUpdate') + diffText + '</span>'
             + '</div>';
     },
 
@@ -160,13 +380,13 @@ var Lagebild = {
         var d = this.data;
         document.getElementById('incident-title').innerHTML =
             this.esc(this.fixUmlauts(d.incident.title)) +
-            ' <span class="hero-date-info">\u2013 Stand: ' + this.fmtDateOnly(d.generated_at) + ', ' + this.fmtTimeOnly(d.generated_at) + ' Uhr</span>';
+            ' <span class="hero-date-info">\u2013 ' + this.t('standPrefix') + this.fmtDateOnly(d.generated_at) + ', ' + this.fmtTimeOnly(d.generated_at) + this.t('standSuffix') + '</span>';
 
         // Stat Cards (3: Artikel, Quellen, Faktenchecks)
         var statsHtml = '';
-        statsHtml += this.statCard(this.icons.fileText, '<span class="count-up" id="hero-art-count" data-target="' + d.incident.article_count + '">0</span>', 'Artikel');
+        statsHtml += this.statCard(this.icons.fileText, '<span class="count-up" id="hero-art-count" data-target="' + d.incident.article_count + '">0</span>', this.t("statArticles"));
-        statsHtml += this.statCard(this.icons.globe, '<span class="count-up" id="hero-src-count" data-target="' + d.incident.source_count + '">0</span>', 'Quellen');
+        statsHtml += this.statCard(this.icons.globe, '<span class="count-up" id="hero-src-count" data-target="' + d.incident.source_count + '">0</span>', this.t("statSources"));
-        statsHtml += this.statCard(this.icons.shieldCheck, '<span class="count-up" id="hero-fc-count" data-target="' + d.incident.factcheck_count + '">0</span>', 'Faktenchecks');
+        statsHtml += this.statCard(this.icons.shieldCheck, '<span class="count-up" id="hero-fc-count" data-target="' + d.incident.factcheck_count + '">0</span>', this.t("statFactchecks"));
         document.getElementById('hero-stats').innerHTML = statsHtml;
 
         // Start count-up animations
@@ -196,7 +416,7 @@ var Lagebild = {
             var progress = Math.min(elapsed / duration, 1);
             var eased = 1 - Math.pow(1 - progress, 3); // easeOutCubic
             var current = Math.round(target * eased);
-            element.textContent = current.toLocaleString('de-DE');
+            element.textContent = current.toLocaleString(Lagebild.getLocale());
             if (progress < 1) {
                 requestAnimationFrame(update);
             }
@@ -271,13 +491,13 @@ var Lagebild = {
             h += '>';
             if (isActive) h += '<span class="timeline-dot"></span>';
             h += '<span class="timeline-day-num">' + d.getUTCDate() + '</span>';
-            h += '<span class="timeline-day-month">' + d.toLocaleDateString('de-DE', { month: 'short', timeZone: 'UTC' }) + '</span>';
+            h += '<span class="timeline-day-month">' + d.toLocaleDateString(this.getLocale(), { month: 'short', timeZone: 'UTC' }) + '</span>';
             h += '<span class="timeline-day-count">' + defaultSnap.article_count + '</span>';
             if (daySnaps.length > 1) {
                 h += '<span class="timeline-day-updates">' + daySnaps.length + 'x</span>';
             }
             if (isActive) {
-                h += '<span class="timeline-day-label">Aktuell</span>';
+                h += '<span class="timeline-day-label">' + this.t('timelineCurrent') + '</span>';
             }
             h += '</button>';
         }
@@ -378,8 +598,8 @@ var Lagebild = {
             h += ' data-snapshot-id="' + snap.id + '">';
             h += '<span class="h-timeline-time">' + this.fmtTimeOnly(snap.created_at) + '</span>';
             h += '<span class="h-timeline-dot"></span>';
-            h += '<span class="h-timeline-meta">' + snap.article_count + ' Artikel</span>';
+            h += '<span class="h-timeline-meta">' + snap.article_count + ' ' + this.t('timelineArticles') + '</span>';
-            h += '<span class="h-timeline-meta">' + (snap.fact_check_count || 0) + ' Faktenchecks</span>';
+            h += '<span class="h-timeline-meta">' + (snap.fact_check_count || 0) + ' ' + this.t('timelineFcs') + '</span>';
             h += '</button>';
         }
         h += '</div>';
@@ -453,11 +673,11 @@ var Lagebild = {
         var fcCount = this.currentView.fact_check_count || (this.currentView.fact_checks || []).length;
 
         var heroArt = document.getElementById('hero-art-count');
-        if (heroArt) heroArt.textContent = artCount.toLocaleString('de-DE');
+        if (heroArt) heroArt.textContent = artCount.toLocaleString(this.getLocale());
         var heroSrc = document.getElementById('hero-src-count');
-        if (heroSrc) heroSrc.textContent = srcCount.toLocaleString('de-DE');
+        if (heroSrc) heroSrc.textContent = srcCount.toLocaleString(this.getLocale());
         var heroFc = document.getElementById('hero-fc-count');
-        if (heroFc) heroFc.textContent = fcCount.toLocaleString('de-DE');
+        if (heroFc) heroFc.textContent = fcCount.toLocaleString(this.getLocale());
 
         var fcBadge = document.getElementById('tab-badge-faktenchecks');
         if (fcBadge) fcBadge.textContent = fcCount;
@@ -470,6 +690,7 @@ var Lagebild = {
         var v = this.currentView;
         document.getElementById('lagebild-timestamp').textContent = this.fmtDT(v.updated_at);
         var md = this.fixUmlauts(v.summary || '');
+        md = this.stripZusammenfassung(md);
         var html = this.mdToHtml(md);
 
         // Build source lookup for citation links
@@ -484,7 +705,7 @@ var Lagebild = {
             if (src && src.url) {
                 return '<a class="citation-ref" href="' + self.esc(src.url) + '" target="_blank" rel="noopener" title="' + self.esc(src.name || '') + '">[' + nr + ']</a>';
             }
-            return '<a class="citation-ref" title="Quelle ' + nr + '">[' + nr + ']</a>';
+            return '<a class="citation-ref" title="' + self.t('sourceRef') + ' ' + nr + '">[' + nr + ']</a>';
         });
 
         document.getElementById('summary-content').innerHTML = html;
@@ -504,7 +725,7 @@ var Lagebild = {
         var sourceMap = {};
         for (var i = 0; i < articles.length; i++) {
             var a = articles[i];
-            var name = a.source || 'Unbekannt';
+            var name = a.source || 'Unknown';
             if (!sourceMap[name]) sourceMap[name] = { count: 0, articles: [], languages: {}, domain: null };
             sourceMap[name].count++;
             sourceMap[name].articles.push(a);
@@ -531,7 +752,7 @@ var Lagebild = {
 
         // Header
         h += '<div class="sources-overview-header">';
-        h += '<span class="sources-overview-title">' + articles.length + ' Artikel aus ' + sources.length + ' Quellen</span>';
+        h += '<span class="sources-overview-title">' + this.t('srcArticlesFrom').replace('{count}', articles.length).replace('{sources}', sources.length) + '</span>';
         h += '<div class="sources-lang-chips">';
         var langKeys = Object.keys(langTotals).sort(function(a, b) { return langTotals[b] - langTotals[a]; });
         for (var i = 0; i < langKeys.length; i++) {
@@ -613,15 +834,15 @@ var Lagebild = {
             h += '<img class="source-tile-favicon" src="https://www.google.com/s2/favicons?domain=' + encodeURIComponent(src.data.domain) + '&sz=16" width="16" height="16" alt="" loading="lazy"> ';
         }
         h += this.esc(src.name) + '</span>';
-        h += '<span class="source-detail-count">' + src.data.count + ' Artikel</span>';
+        h += '<span class="source-detail-count">' + src.data.count + ' ' + Lagebild.t('srcArticle') + '</span>';
-        h += '<button class="source-detail-close" aria-label="Schließen">&times;</button>';
+        h += '<button class="source-detail-close" aria-label="' + Lagebild.t('srcClose') + '">&times;</button>';
         h += '</div>';
         h += '<div class="source-detail-articles">';
         for (var j = 0; j < arts.length; j++) {
             var a = arts[j];
             var dt = a.published_at || a.collected_at || '';
             var dObj = dt ? new Date(this.toUTC(dt)) : null;
-            var hl = this.fixUmlauts(a.headline_de || a.headline || '');
+            var hl = this.fixUmlauts(Lagebild.getHeadline(a));
             h += '<div class="source-detail-article">';
             if (a.source_url) {
                 h += '<a href="' + this.esc(a.source_url) + '" target="_blank" rel="noopener" class="source-detail-article-title">' + this.esc(hl) + ' ' + this.icons.externalLink + '</a>';
@@ -629,7 +850,7 @@ var Lagebild = {
                 h += '<span class="source-detail-article-title">' + this.esc(hl) + '</span>';
             }
             if (dObj && !isNaN(dObj.getTime())) {
-                h += '<span class="source-detail-article-date">' + dObj.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: TIMEZONE }) + '</span>';
+                h += '<span class="source-detail-article-date">' + dObj.toLocaleDateString(Lagebild.getLocale(), { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: TIMEZONE }) + '</span>';
             }
             h += '</div>';
         }
@@ -655,7 +876,7 @@ var Lagebild = {
 
     renderArticlesTab: function() {},
 
-    /* ===== TAB: KARTE (Pulse Markers) ===== */
+    /* ===== TAB: KARTE (Clustered Pulse Markers) ===== */
     renderMap: function() {
         if (this.map) { this.map.remove(); this.map = null; }
         this.map = L.map('map-container', {
@@ -664,7 +885,6 @@ var Lagebild = {
             maxBoundsViscosity: 1.0
         }).setView([33.0, 48.0], 5);
 
-        // Deutsche OSM-Kacheln
         L.tileLayer('https://tile.openstreetmap.de/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
             maxZoom: 19,
@@ -685,7 +905,6 @@ var Lagebild = {
             });
         }
 
-        // Kategorie-Farben
         var categoryColors = {
             primary: '#ef4444',
             secondary: '#f59e0b',
@@ -698,7 +917,6 @@ var Lagebild = {
             tertiary: 'Beteiligte',
             mentioned: 'Erwaehnt'
         };
-        // Dynamische Labels aus API verwenden (falls vorhanden)
         var categoryLabels = {};
         if (this.data && this.data.category_labels) {
             var apiLabels = this.data.category_labels;
@@ -710,37 +928,74 @@ var Lagebild = {
             categoryLabels = defaultCategoryLabels;
         }
 
-        // Locations aus API-Daten laden
         var locs = (this.data && this.data.locations) ? this.data.locations : [];
 
         if (locs.length === 0) {
             var emptyDiv = document.createElement('div');
             emptyDiv.style.cssText = 'position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;background:#151D2E;padding:20px 30px;border-radius:8px;border:1px solid #1E2D45;color:#8896AB;text-align:center;';
-            emptyDiv.innerHTML = 'Keine Standortdaten verfuegbar';
+            emptyDiv.innerHTML = Lagebild.t('mapNoData');
             document.getElementById('map-container').appendChild(emptyDiv);
         }
 
+        var clusterGroup = L.markerClusterGroup({
+            maxClusterRadius: 50,
+            spiderfyOnMaxZoom: true,
+            showCoverageOnHover: false,
+            zoomToBoundsOnClick: true,
+            disableClusteringAtZoom: 10
+        });
+
         var usedCategories = {};
+        var bounds = [];
         for (var i = 0; i < locs.length; i++) {
             var l = locs[i];
             if (!l.lat || !l.lon) continue;
             var cat = l.category || 'mentioned';
             var color = categoryColors[cat] || '#7b7b7b';
             usedCategories[cat] = true;
+
+            // Popup mit Artikel-Links
             var popupText = '<strong style="color:#E8ECF4;">' + (l.name || '') + '</strong>';
             if (l.country_code) popupText += ' <span style="color:#8896AB;font-size:0.8rem;">(' + l.country_code + ')</span>';
-            popupText += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (l.article_count || 0) + ' Artikel</span>';
+            popupText += '<br><span style="font-size:0.85rem;color:#8896AB;">' + (l.article_count || 0) + ' ' + Lagebild.t('mapArticles') + '</span>';
-            L.marker([l.lat, l.lon], { icon: pulseIcon(color) })
+            if (l.top_articles && l.top_articles.length > 0) {
-                .addTo(this.map)
+                popupText += '<div style="margin-top:6px;border-top:1px solid #1E2D45;padding-top:6px;">';
-                .bindPopup(popupText);
+                for (var j = 0; j < l.top_articles.length; j++) {
+                    var a = l.top_articles[j];
+                    var hl = (a.headline || '').replace(/\*\*/g, '');
+                    if (hl.length > 60) hl = hl.substring(0, 60) + '\u2026';
+                    if (a.url) {
+                        popupText += '<a href="' + a.url + '" target="_blank" rel="noopener" style="color:#C8A851;font-size:0.8rem;display:block;margin-top:3px;text-decoration:none;">' + hl + '</a>';
+                    } else {
+                        popupText += '<span style="color:#8896AB;font-size:0.8rem;display:block;margin-top:3px;">' + hl + '</span>';
+                    }
+                    popupText += '<span style="color:#556B7A;font-size:0.7rem;">' + (a.source || '') + '</span>';
+                }
+                popupText += '</div>';
+            }
+
+            var marker;
+            if (cat === 'primary' || cat === 'secondary') {
+                marker = L.marker([l.lat, l.lon], { icon: pulseIcon(color) });
+            } else {
+                marker = L.circleMarker([l.lat, l.lon], {
+                    radius: 5, fillColor: color, fillOpacity: 0.7,
+                    color: color, weight: 1, opacity: 0.9
+                });
+            }
+            marker.bindPopup(popupText, { maxWidth: 300 });
+            clusterGroup.addLayer(marker);
+            bounds.push([l.lat, l.lon]);
         }
 
-        // Dark legend (dynamisch)
+        this.map.addLayer(clusterGroup);
+
+        // Dark legend
         var legend = L.control({ position: 'bottomright' });
         legend.onAdd = function() {
             var div = L.DomUtil.create('div', 'map-legend');
             div.style.cssText = 'background:#151D2E;padding:10px 14px;border-radius:4px;border:1px solid #1E2D45;box-shadow:0 2px 8px rgba(0,0,0,0.3);font-size:0.8rem;line-height:1.8;color:#E8ECF4;';
-            var html = '<strong style="color:#C8A851;">Legende</strong><br>';
+            var html = '<strong style="color:#C8A851;">' + Lagebild.t('mapLegend') + '</strong><br>';
             ['primary', 'secondary', 'tertiary', 'mentioned'].forEach(function(cat) {
                 if (usedCategories[cat] && categoryLabels[cat]) {
                     html += '<span style="color:' + categoryColors[cat] + ';">&#9679;</span> ' + categoryLabels[cat] + '<br>';
@@ -751,6 +1006,10 @@ var Lagebild = {
         };
         legend.addTo(this.map);
 
+        if (bounds.length > 0) {
+            this.map.fitBounds(bounds, { padding: [30, 30], maxZoom: 7 });
+        }
+
         // Dark popup styling
         if (!document.getElementById('leaflet-dark-style')) {
             var style = document.createElement('style');
@@ -775,21 +1034,12 @@ var Lagebild = {
         unverified: '?'
     },
 
-    fcLabels: {
+    fcLabels: {},
-        confirmed: 'Bestätigt',
-        unconfirmed: 'Unbestätigt',
-        contradicted: 'Widerlegt',
-        developing: 'Unklar',
-        established: 'Gesichert',
-        disputed: 'Umstritten',
-        'false': 'Falsch',
-        unverified: 'Nicht verifiziert'
-    },
 
     renderFactChecksTab: function() {
         var checks = this.currentView.fact_checks || [];
         if (!checks.length) {
-            document.getElementById('factchecks-content').innerHTML = '<p style="color:#8896AB">Keine Faktenchecks verfügbar.</p>';
+            document.getElementById('factchecks-content').innerHTML = '<p style="color:#8896AB">' + this.t('fcNone') + '</p>';
             return;
         }
 
@@ -806,18 +1056,18 @@ var Lagebild = {
 
         // Stat cards (clickable filters)
         var h = '<div class="fc-stats">';
-        h += '<button class="fc-stat active" data-filter="all"><span class="fc-stat-num">' + checks.length + '</span><span class="fc-stat-label">Gesamt</span></button>';
+        h += '<button class="fc-stat active" data-filter="all"><span class="fc-stat-num">' + checks.length + '</span><span class="fc-stat-label">' + this.t('fcTotal') + '</span></button>';
-        h += '<button class="fc-stat confirmed" data-filter="confirmed"><span class="fc-stat-num">' + confirmedTotal + '</span><span class="fc-stat-label">Bestätigt</span></button>';
+        h += '<button class="fc-stat confirmed" data-filter="confirmed"><span class="fc-stat-num">' + confirmedTotal + '</span><span class="fc-stat-label">' + this.t('fcConfirmed') + '</span></button>';
-        h += '<button class="fc-stat unconfirmed" data-filter="unconfirmed"><span class="fc-stat-num">' + openTotal + '</span><span class="fc-stat-label">Offen</span></button>';
+        h += '<button class="fc-stat unconfirmed" data-filter="unconfirmed"><span class="fc-stat-num">' + openTotal + '</span><span class="fc-stat-label">' + this.t('fcOpen') + '</span></button>';
         if (contradictedTotal > 0)
-            h += '<button class="fc-stat contradicted" data-filter="contradicted"><span class="fc-stat-num">' + contradictedTotal + '</span><span class="fc-stat-label">Widerlegt</span></button>';
+            h += '<button class="fc-stat contradicted" data-filter="contradicted"><span class="fc-stat-num">' + contradictedTotal + '</span><span class="fc-stat-label">' + this.t('fcContradicted') + '</span></button>';
         h += '</div>';
 
         // Hinweis bei unvollständiger Liste
         var storedFcCount = this.currentView.fact_check_count || 0;
         if (storedFcCount > 0 && checks.length < storedFcCount) {
             h += '<div style="padding:8px 12px;margin:8px 0;background:rgba(200,168,81,0.1);border:1px solid rgba(200,168,81,0.3);border-radius:6px;color:#C8A851;font-size:0.85rem;">';
-            h += checks.length + ' von ' + storedFcCount + ' Faktenchecks verfügbar (ältere wurden bereinigt)';
+            h += this.t('fcCleaned').replace('{count}', checks.length).replace('{total}', storedFcCount);
             h += '</div>';
         }
 
@@ -841,7 +1091,7 @@ var Lagebild = {
 
             var hasProg = fc.status_history && fc.status_history.length > 1;
             var icon = this.fcIcons[status] || '?';
-            var label = this.fcLabels[status] || status;
+            var label = this.stLabel(status);
 
             h += '<div class="fc-row" data-status-group="' + filterGroup + '">';
             h += '<div class="fc-row-header" data-fc-index="' + i + '">';
@@ -855,17 +1105,17 @@ var Lagebild = {
             // Expandable detail
             h += '<div class="fc-row-detail">';
             h += '<div class="fc-row-detail-inner">';
-            h += '<div class="fc-detail-status"><span class="fc-icon ' + status + '">' + icon + '</span> <strong>' + label + '</strong> – ' + (fc.sources_count || 0) + ' unabhängige Quellen</div>';
+            h += '<div class="fc-detail-status"><span class="fc-icon ' + status + '">' + icon + '</span> <strong>' + label + '</strong> – ' + (fc.sources_count || 0) + ' ' + this.t('fcSources') + '</div>';
 
             if (fc.evidence) {
                 var ev = this.fixUmlauts(fc.evidence);
                 ev = this.esc(ev).replace(/(https?:\/\/[^\s,)]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>');
-                h += '<div class="fc-detail-evidence"><strong>Evidenz:</strong> ' + ev + '</div>';
+                h += '<div class="fc-detail-evidence"><strong>' + this.t('fcEvidence') + '</strong> ' + ev + '</div>';
             }
 
             if (hasProg) {
                 h += '<div class="fc-detail-progression">';
-                h += '<span class="fc-detail-prog-label">Verlauf:</span>';
+                h += '<span class="fc-detail-prog-label">' + this.t('fcProgression') + '</span>';
                 for (var j = 0; j < fc.status_history.length; j++) {
                     var step = fc.status_history[j];
                     if (j > 0) h += '<span class="progression-arrow">&rarr;</span>';
@@ -953,21 +1203,70 @@ var Lagebild = {
     initLangToggle: function() {
         var btn = document.querySelector('.lang-toggle');
         if (!btn) return;
+        var self = this;
         btn.addEventListener('click', function(e) {
             e.preventDefault();
-            if (typeof switchLanguage === 'function') {
+            var cur = (typeof getCurrentLanguage === 'function') ? getCurrentLanguage() : 'de';
-                var cur = (typeof getCurrentLanguage === 'function') ? getCurrentLanguage() : 'de';
+            var newLang = cur === 'de' ? 'en' : 'de';
-                switchLanguage(cur === 'de' ? 'en' : 'de');
+            if (typeof switchLanguage === 'function') switchLanguage(newLang);
-            }
+            self.switchContent(newLang);
         });
     },
 
+    switchContent: async function(lang) {
+        var jsonFile = lang === 'en' ? 'data/current_en.json' : 'data/current.json';
+        try {
+            var resp = await fetch(jsonFile + '?t=' + Date.now());
+            if (!resp.ok && lang === 'en') {
+                resp = await fetch('data/current.json?t=' + Date.now());
+            }
+            if (!resp.ok) throw new Error('HTTP ' + resp.status);
+            this.data = await resp.json();
+            this.allSnapshots = {};
+            this.currentView = {
+                summary: this.data.current_lagebild.summary_markdown,
+                sources_json: this.data.current_lagebild.sources_json,
+                updated_at: this.data.current_lagebild.updated_at || this.data.generated_at,
+                articles: this.data.articles,
+                fact_checks: this.data.fact_checks,
+                article_count: this.data.incident.article_count,
+                fact_check_count: this.data.incident.factcheck_count
+            };
+            this.render();
+            // Update hero title for language
+            var heroH1 = document.getElementById('hero-title');
+            if (heroH1) {
+                var isResearch = this.data.incident && this.data.incident.type === 'research';
+                heroH1.textContent = isResearch ? this.t('heroResearch') : this.t('hero');
+            }
+            // Update tab labels
+            var tabBtns = document.querySelectorAll('.tab-btn');
+            var isResearch = this.data.incident && this.data.incident.type === 'research';
+            for (var i = 0; i < tabBtns.length; i++) {
+                var tab = tabBtns[i].getAttribute('data-tab');
+                if (tab === 'lagebild') tabBtns[i].childNodes[0].textContent = isResearch ? this.t('tabBriefingResearch') : this.t('tabBriefing');
+                else if (tab === 'ueberblick') tabBtns[i].childNodes[0].textContent = isResearch ? this.t('tabUeberblickResearch') : this.t('tabUeberblick');
+                else if (tab === 'karte') tabBtns[i].childNodes[0].textContent = this.t('tabMap');
+                else if (tab === 'faktenchecks') tabBtns[i].childNodes[0].textContent = this.t('tabFactchecks') + ' ';
+                else if (tab === 'quellen') tabBtns[i].childNodes[0].textContent = this.t('tabSources') + ' ';
+            }
+            // Update Ueberblick H2 title
+            var ueberblickH2 = document.getElementById('ueberblick-title');
+            if (ueberblickH2) ueberblickH2.textContent = isResearch ? this.t('tabUeberblickResearch') : this.t('tabUeberblick');
+            // Update data source note
+            var dsNote = document.querySelector('.data-source-note');
+            if (dsNote) dsNote.textContent = this.t('dataSource');
+        } catch(e) {
+            console.error('Language switch failed:', e);
+        }
+    },
+
     /* ===== FLOATING CTA ===== */
     initFloatingCta: function() {
         var cta = document.createElement('div');
         cta.className = 'floating-cta';
-        cta.innerHTML = '<span class="floating-cta-text">AegisSight Monitor f\u00fcr Ihre Organisation</span>'
+        cta.innerHTML = '<span class="floating-cta-text">' + this.t('ctaText') + '</span>'
-            + '<a href="mailto:info@aegis-sight.de" class="floating-cta-btn">Kontakt aufnehmen \u2192</a>'
+            + '<a href="mailto:info@aegis-sight.de" class="floating-cta-btn">' + this.t('ctaButton') + '</a>'
             + '<button class="floating-cta-close" aria-label="Schlie\u00dfen">&times;</button>';
         document.body.appendChild(cta);
 
@@ -1077,9 +1376,8 @@ var Lagebild = {
     },
 
     stLabel: function(s) {
-        return { confirmed: 'Best\u00e4tigt', unconfirmed: 'Unbest\u00e4tigt', established: 'Gesichert',
+        var key = 'st' + s.charAt(0).toUpperCase() + s.slice(1);
-            unverified: 'Nicht verifiziert', contradicted: 'Widerlegt', disputed: 'Umstritten',
+        return this.t(key) || s;
-            developing: 'In Entwicklung', 'false': 'Falsch' }[s] || s;
     },
 
     mdToHtml: function(md) {
@@ -1125,11 +1423,12 @@ var Lagebild = {
             var d = new Date(this.toUTC(iso));
             if (isNaN(d.getTime())) return iso;
             var opts = { timeZone: TIMEZONE, weekday: 'long', day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false };
-            var parts = new Intl.DateTimeFormat('de-DE', opts).formatToParts(d);
+            var locale = Lagebild.getLocale();
+            var parts = new Intl.DateTimeFormat(locale, opts).formatToParts(d);
             var p = {};
             parts.forEach(function(x) { p[x.type] = x.value; });
-            return p.weekday + ', ' + p.day + '. ' + p.month + ' ' + p.year
+            if (locale === 'en-GB') return p.weekday + ', ' + p.day + ' ' + p.month + ' ' + p.year + ', ' + p.hour + ':' + p.minute;
-                + ' um ' + p.hour + ':' + p.minute + ' Uhr';
+            return p.weekday + ', ' + p.day + '. ' + p.month + ' ' + p.year + ' um ' + p.hour + ':' + p.minute + ' Uhr';
         } catch(e) { return iso; }
     },
 
@@ -1138,7 +1437,7 @@ var Lagebild = {
         try {
             var d = new Date(this.toUTC(iso));
             if (isNaN(d.getTime())) return iso;
-            return d.toLocaleDateString('de-DE', { day: 'numeric', month: 'short', year: 'numeric', timeZone: TIMEZONE });
+            return d.toLocaleDateString(Lagebild.getLocale(), { day: 'numeric', month: 'short', year: 'numeric', timeZone: TIMEZONE });
         } catch(e) { return iso; }
     },
 
@@ -1147,19 +1446,19 @@ var Lagebild = {
         try {
             var d = new Date(this.toUTC(iso));
             if (isNaN(d.getTime())) return iso;
-            return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE });
+            return d.toLocaleTimeString(Lagebild.getLocale(), { hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE });
         } catch(e) { return iso; }
     },
 
     fmtShort: function(iso) {
         if (!iso) return '';
-        try { return new Date(this.toUTC(iso)).toLocaleDateString('de-DE', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE }); }
+        try { return new Date(this.toUTC(iso)).toLocaleDateString(Lagebild.getLocale(), { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', timeZone: TIMEZONE }); }
         catch(e) { return iso; }
     },
 
     showError: function() {
         document.getElementById('summary-content').innerHTML =
-            '<div class="lagebild-error"><p>Das Lagebild konnte nicht geladen werden. Bitte versuchen Sie es sp\u00e4ter erneut.</p></div>';
+            '<div class="lagebild-error"><p>' + this.t('errorLoad') + '</p></div>';
     }
 };
 

robots-launch.txt

@@ -0,0 +1,99 @@
+# robots.txt for AegisSight UG — wird am Tag X als robots.txt aktiv geschaltet
+# Allgemein: Crawling erlaubt, außer API-Endpunkte und interne Pfade
+
+User-agent: *
+Allow: /
+Disallow: /api/
+Disallow: /_archiv/
+Disallow: /vorschau/
+
+# Sitemap
+Sitemap: https://aegis-sight.de/sitemap.xml
+
+# AI-Crawler explizit blocken — keine Trainingsdaten-Verwendung
+User-agent: GPTBot
+Disallow: /
+
+User-agent: ChatGPT-User
+Disallow: /
+
+User-agent: CCBot
+Disallow: /
+
+User-agent: anthropic-ai
+Disallow: /
+
+User-agent: Claude-Web
+Disallow: /
+
+User-agent: ClaudeBot
+Disallow: /
+
+User-agent: Bytespider
+Disallow: /
+
+User-agent: PerplexityBot
+Disallow: /
+
+User-agent: Google-Extended
+Disallow: /
+
+User-agent: Applebot-Extended
+Disallow: /
+
+User-agent: Meta-ExternalAgent
+Disallow: /
+
+User-agent: cohere-ai
+Disallow: /
+
+User-agent: OAI-SearchBot
+Disallow: /
+
+# Archiv-Bots blocken
+User-agent: ia_archiver
+Disallow: /
+
+User-agent: Wayback Machine
+Disallow: /
+
+User-agent: archive.org_bot
+Disallow: /
+
+# SEO-/Spam-Crawler blocken
+User-agent: AhrefsBot
+Disallow: /
+
+User-agent: SemrushBot
+Disallow: /
+
+User-agent: MJ12bot
+Disallow: /
+
+User-agent: DotBot
+Disallow: /
+
+User-agent: SEOkicks-Robot
+Disallow: /
+
+User-agent: MauiBot
+Disallow: /
+
+User-agent: Majestic-12
+Disallow: /
+
+User-agent: BLEXBot
+Disallow: /
+
+User-agent: SerendeputyBot
+Disallow: /
+
+# Download-Manager blocken
+User-agent: HTTrack
+Disallow: /
+
+User-agent: SiteSnagger
+Disallow: /
+
+User-agent: WebCopier
+Disallow: /

sitemap-launch.xml

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+    <url>
+        <loc>https://aegis-sight.de/</loc>
+        <changefreq>weekly</changefreq>
+        <priority>1.0</priority>
+    </url>
+    <url>
+        <loc>https://aegis-sight.de/lagen/iran-konflikt/</loc>
+        <changefreq>daily</changefreq>
+        <priority>0.8</priority>
+    </url>
+    <url>
+        <loc>https://aegis-sight.de/lagen/cyberangriffe/</loc>
+        <changefreq>daily</changefreq>
+        <priority>0.8</priority>
+    </url>
+    <url>
+        <loc>https://aegis-sight.de/lagen/deepfakes/</loc>
+        <changefreq>weekly</changefreq>
+        <priority>0.7</priority>
+    </url>
+    <url>
+        <loc>https://aegis-sight.de/impressum.html</loc>
+        <changefreq>yearly</changefreq>
+        <priority>0.3</priority>
+    </url>
+    <url>
+        <loc>https://aegis-sight.de/datenschutz.html</loc>
+        <changefreq>yearly</changefreq>
+        <priority>0.3</priority>
+    </url>
+</urlset>

vorschau/index.html

@@ -1,483 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AegisSight Monitor - Echtzeit-Lagebilder aus offenen Quellen</title>
-    <meta name="robots" content="noindex, nofollow, noarchive">
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="apple-touch-icon" href="/assets/images/logos/AegisSightLogo_NavyGold.svg">
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
-    <link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-    <!-- Password Gate -->
-    <style>
-        #login-gate{position:fixed;inset:0;z-index:10000;background:#0A1832;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Inter',system-ui,sans-serif}
-        #login-gate .gate-logo{width:80px;height:80px;margin-bottom:2rem}
-        #login-gate .gate-logo img{width:100%;height:100%;background:#fff;border-radius:12px;padding:6px}
-        #login-gate h1{font-size:1.6rem;font-weight:700;color:#C8A851;margin-bottom:.5rem}
-        #login-gate p{font-size:.95rem;color:#A0A8B8;margin-bottom:1.5rem}
-        #login-gate .pw-form{display:flex;gap:.5rem}
-        #login-gate .pw-input{padding:.7rem 1rem;border:1px solid rgba(200,168,81,.3);border-radius:6px;background:rgba(255,255,255,.05);color:#E8E8E8;font-family:inherit;font-size:.95rem;width:220px;outline:none}
-        #login-gate .pw-input:focus{border-color:#C8A851}
-        #login-gate .pw-input::placeholder{color:#5A6478}
-        #login-gate .pw-btn{padding:.7rem 1.2rem;border:none;border-radius:6px;background:#C8A851;color:#0A1832;font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer}
-        #login-gate .pw-btn:hover{background:#D4B96A}
-        #login-gate .pw-error{color:#E85454;font-size:.85rem;margin-top:.75rem;display:none}
-        body.locked{overflow:hidden}
-    </style>
-    <div id="login-gate">
-        <div class="gate-logo"><img src="/assets/images/logos/AegisSightLogo_NavyGold.svg" alt="AegisSight"></div>
-        <h1>Vorschau</h1>
-        <p>Zugang nur mit Passwort</p>
-        <form class="pw-form" onsubmit="return checkPassword(event)">
-            <input type="password" class="pw-input" id="pw-input" placeholder="Passwort" autofocus>
-            <button type="submit" class="pw-btn">Weiter</button>
-        </form>
-        <div class="pw-error" id="pw-error">Falsches Passwort</div>
-    </div>
-    <script>
-        var PW_HASH='feab257468bdb1b836bae5bc439db625d9a1b9a56ca60e0916ab04fb04c2ec31';
-        function sha256(s){return crypto.subtle.digest('SHA-256',new TextEncoder().encode(s)).then(function(b){return Array.from(new Uint8Array(b)).map(function(x){return x.toString(16).padStart(2,'0')}).join('')})}
-        function getCookie(n){var m=document.cookie.match(new RegExp('(?:^|; )'+n+'=([^;]*)'));return m?m[1]:null}
-        function setCookie(n,v,d){var e=new Date();e.setTime(e.getTime()+d*864e5);document.cookie=n+'='+v+';expires='+e.toUTCString()+';path=/vorschau/;SameSite=Strict;Secure'}
-        function unlock(){document.getElementById('login-gate').style.display='none';document.body.classList.remove('locked')}
-        function checkPassword(e){e.preventDefault();sha256(document.getElementById('pw-input').value).then(function(h){if(h===PW_HASH){setCookie('vorschau_auth',h,30);unlock()}else{document.getElementById('pw-error').style.display='block';document.getElementById('pw-input').value='';document.getElementById('pw-input').focus()}});return false}
-        if(getCookie('vorschau_auth')===PW_HASH){unlock()}else{document.body.classList.add('locked')}
-    </script>
-
-    <!-- Navigation -->
-    <nav class="navbar" id="navbar">
-        <div class="nav-container">
-            <a href="#hero" class="nav-logo">
-                <img src="/assets/images/logos/Logo+Schrift_Rechts.png" alt="AegisSight" class="logo-img">
-            </a>
-            <ul class="nav-menu">
-                <li><a href="#demos">Live-Lagebilder</a></li>
-                <li><a href="#features">Funktionen</a></li>
-                <li><a href="#trust">Versprechen</a></li>
-                <li><a href="#contact">Kontakt</a></li>
-            </ul>
-            <button class="mobile-menu-toggle" aria-label="Menü öffnen" aria-expanded="false">
-                <span></span><span></span><span></span>
-            </button>
-        </div>
-    </nav>
-
-    <!-- Mobile Menu -->
-    <div class="mobile-menu" id="mobile-menu" aria-hidden="true">
-        <ul>
-            <li><a href="#demos">Live-Lagebilder</a></li>
-            <li><a href="#features">Funktionen</a></li>
-            <li><a href="#trust">Versprechen</a></li>
-            <li><a href="#contact">Kontakt</a></li>
-        </ul>
-    </div>
-    <div class="mobile-overlay" id="mobile-overlay"></div>
-
-    <!-- Hero Section -->
-    <section class="hero" id="hero">
-        <div class="hero-overlay"></div>
-        <div class="container hero-content">
-            <div class="hero-brand">
-                <h1 class="hero-title">AegisSight Monitor</h1>
-                <p class="hero-tagline">KI-gestützte Echtzeit-Lagebilder aus offenen Quellen, <span class="gold">vollautomatisch.</span></p>
-            </div>
-
-            <div class="hero-slider" role="region" aria-label="Produktvorteile" aria-live="polite">
-                <!-- Slide 1: Echtzeit-Monitoring -->
-                <div class="hero-slide active" data-slide="0">
-                    <div class="hero-slide-inner">
-                        <div class="hero-slide-text-col">
-                            <span class="hero-slide-label">Echtzeit-Monitoring</span>
-                            <h2 class="hero-slide-headline">Lagebilder in Echtzeit. Vollautomatisch.</h2>
-                            <p class="hero-slide-text">Der AegisSight Monitor überwacht hunderte Quellen rund um die Uhr und erstellt strukturierte Lagebilder, ohne manuellen Aufwand. Neue Entwicklungen werden in Minuten erfasst, analysiert und eingeordnet. Sie entscheiden, was überwacht wird, der Monitor liefert das Lagebild.</p>
-                            <p class="hero-slide-example">Live-Beispiel: Der Iran-Konflikt wird mit über 14.900 Artikeln aus 375 Quellen kontinuierlich überwacht.</p>
-                            <div class="hero-slide-cta">
-                                <a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a>
-                            </div>
-                        </div>
-                        <div class="hero-slide-media-col"></div>
-                    </div>
-                </div>
-
-                <!-- Slide 2: Automatischer Faktencheck -->
-                <div class="hero-slide" data-slide="1">
-                    <div class="hero-slide-inner">
-                        <div class="hero-slide-text-col">
-                            <span class="hero-slide-label">Faktencheck</span>
-                            <h2 class="hero-slide-headline">Jede Behauptung geprüft. Automatisch.</h2>
-                            <p class="hero-slide-text">Kernaussagen werden automatisch gegen unabhängige Quellen verifiziert und mit einem Verifikationsstatus versehen: bestätigt, widersprüchlich oder unbelegt. Widersprechen sich Quellen, wird das transparent dargestellt. Wenn neue Belege auftauchen, aktualisiert sich die Bewertung automatisch. Keine blinden Flecken, keine manuelle Nachrecherche, systematische Verifikation über alle Lagebilder hinweg.</p>
-                            <div class="hero-slide-cta">
-                            </div>
-                        </div>
-                        <div class="hero-slide-media-col"><!-- Screenshot Faktencheck-UI --></div>
-                    </div>
-                </div>
-
-                <!-- Slide 3: KI-Recherche -->
-                <div class="hero-slide" data-slide="2">
-                    <div class="hero-slide-inner">
-                        <div class="hero-slide-text-col">
-                            <span class="hero-slide-label">KI-gestützte Recherche</span>
-                            <h2 class="hero-slide-headline">Umfassende Recherche in Minuten statt Tagen.</h2>
-                            <p class="hero-slide-text">Definieren Sie ein Thema, der Monitor recherchiert, strukturiert und belegt vollautomatisch. Quellenbasierte Analyse mit Faktenprüfung, kein Copy-Paste aus Suchmaschinen. Das Ergebnis: ein vollständiges Dossier mit Quellenbelegen und Faktenchecks.</p>
-                            <p class="hero-slide-example">Beispiel: Ein Dossier zur rechtlichen Lage von Deepfakes in Deutschland, 121 Artikel aus 90 Quellen, automatisch erstellt.</p>
-                            <div class="hero-slide-cta">
-                                <a href="/lagen/deepfakes/" class="btn btn-primary">Recherche-Beispiel ansehen</a>
-                            </div>
-                        </div>
-                        <div class="hero-slide-media-col"></div>
-                    </div>
-                </div>
-
-                <!-- Slide 4: Globale Quellenabdeckung -->
-                <div class="hero-slide" data-slide="3">
-                    <div class="hero-slide-inner">
-                        <div class="hero-slide-text-col">
-                            <span class="hero-slide-label">Globale Abdeckung</span>
-                            <h2 class="hero-slide-headline">Dutzende Sprachen. Hunderte Quellen. Null blinde Flecken.</h2>
-                            <p class="hero-slide-text">Arabisch, Persisch, Hebräisch, Russisch, Chinesisch: Der Monitor verarbeitet Quellen, die den meisten Analystenteams sprachlich verschlossen bleiben. Automatische Übersetzung, Kontextanalyse und Einordnung. Globale Abdeckung ohne globale Personalkosten.</p>
-                            <p class="hero-slide-example">Im Iran-Konflikt werden Primärquellen in Farsi, Arabisch und Hebräisch direkt ausgewertet.</p>
-                            <div class="hero-slide-cta">
-                                <a href="/lagen/iran-konflikt/" class="btn btn-primary">Live-Beispiel ansehen</a>
-                            </div>
-                        </div>
-                        <div class="hero-slide-media-col"></div>
-                    </div>
-                </div>
-
-                <!-- Slide 5: Flexibel einsetzbar -->
-                <div class="hero-slide" data-slide="4">
-                    <div class="hero-slide-inner">
-                        <div class="hero-slide-text-col">
-                            <span class="hero-slide-label">Flexibel einsetzbar</span>
-                            <h2 class="hero-slide-headline">Von der Großlage bis zum Einzelthema.</h2>
-                            <p class="hero-slide-text">Geopolitische Konflikte, Unternehmensrisiken, regionale Krisen oder Einzelpersonen: Der AegisSight Monitor skaliert mit Ihrem Bedarf. Definieren Sie Ihr Thema, wählen Sie Ihre Quellen, der Rest läuft automatisch. Jede Lage erhält ihr eigenes Lagebild mit Quellenbelegen, Karte und Faktencheck.</p>
-                            <p class="hero-slide-example">Beispiel: Cyberangriffe auf deutsche Infrastruktur, 93 Artikel aus 41 Quellen, automatisch überwacht.</p>
-                            <div class="hero-slide-cta">
-                                <a href="/lagen/cyberangriffe/" class="btn btn-primary">Live-Beispiel ansehen</a>
-                            </div>
-                        </div>
-                        <div class="hero-slide-media-col"></div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="hero-slider-nav">
-                <div class="hero-slider-dots">
-                    <button class="hero-dot active" data-slide="0" aria-label="Echtzeit-Monitoring"></button>
-                    <button class="hero-dot" data-slide="1" aria-label="Faktencheck"></button>
-                    <button class="hero-dot" data-slide="2" aria-label="KI-gestützte Recherche"></button>
-                    <button class="hero-dot" data-slide="3" aria-label="Globale Abdeckung"></button>
-                    <button class="hero-dot" data-slide="4" aria-label="Flexibel einsetzbar"></button>
-                </div>
-                <div class="hero-slider-arrows">
-                    <button class="hero-arrow hero-arrow-prev" aria-label="Vorheriger Slide">&#8592;</button>
-                    <button class="hero-arrow hero-arrow-next" aria-label="Nächster Slide">&#8594;</button>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Problem Statement (dark) -->
-    <section class="section section-dark" id="problem">
-        <div class="container">
-            <h2 class="section-title">Warum manuelle OSINT-Auswertung nicht skaliert</h2>
-            <p class="section-subtitle section-subtitle-light">Analysten in Sicherheitsbehörden, Redaktionen und Unternehmen stehen täglich vor der gleichen Herausforderung.</p>
-            <div class="grid-3">
-                <div class="problem-card problem-card-dark">
-                    <div class="problem-icon problem-icon-dark">
-                        <img src="/assets/images/icons/world-globe.svg" alt="" width="40" height="40">
-                    </div>
-                    <h3>Tausende Quellen</h3>
-                    <p>Hunderte Quellen in dutzenden Sprachen. Kein Analyst überblickt alles gleichzeitig.</p>
-                </div>
-                <div class="problem-card problem-card-dark">
-                    <div class="problem-icon problem-icon-dark">
-                        <img src="/assets/images/icons/clock.svg" alt="" width="40" height="40">
-                    </div>
-                    <h3>Zeitdruck</h3>
-                    <p>Neue Meldungen im Minutentakt. Manuelle Auswertung kostet Zeit, die Sie nicht haben.</p>
-                </div>
-                <div class="problem-card problem-card-dark">
-                    <div class="problem-icon problem-icon-dark">
-                        <img src="/assets/images/icons/document.svg" alt="" width="40" height="40">
-                    </div>
-                    <h3>Informationsflut</h3>
-                    <p>Kritische Informationen gehen in der Masse unter, Zusammenhänge bleiben unsichtbar.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Gradient: Problem -> Workflow -->
-    <div class="divider divider-gradient-dark-to-alt"></div>
-
-    <!-- Solution / Workflow -->
-    <section class="section section-alt" id="solution">
-        <div class="container">
-            <h2 class="section-title">So funktioniert der AegisSight Monitor</h2>
-            <div class="workflow">
-                <div class="workflow-step">
-                    <div class="step-number">1</div>
-                    <h3>Erfassen</h3>
-                    <p>Hunderte Quellen werden kontinuierlich überwacht. Nachrichtenagenturen, Telegram, Social Media und mehr.</p>
-                </div>
-                <div class="workflow-connector"></div>
-                <div class="workflow-step">
-                    <div class="step-number">2</div>
-                    <h3>Analysieren</h3>
-                    <p>Meldungen werden automatisch ausgewertet, Fakten geprüft und geografisch verortet.</p>
-                </div>
-                <div class="workflow-connector"></div>
-                <div class="workflow-step">
-                    <div class="step-number">3</div>
-                    <h3>Berichten</h3>
-                    <p>Strukturierte Lagebilder mit Quellenbelegen, Faktencheck und Kartenansicht. In Echtzeit.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Gradient: Solution -> Demos -->
-    <div class="divider divider-gradient-alt-to-base"></div>
-
-    <!-- Live Demos / Showcase -->
-    <section class="section section-base" id="demos">
-        <div class="container">
-            <!-- Live Stats Bar -->
-            <div class="live-stats-bar">
-                <div class="live-stats-title">Großlage - Irankonflikt</div>
-                <div class="live-stats-row">
-                    <div class="live-stat">
-                        <span class="live-stat-value" id="stat-articles">...</span>
-                        <span class="live-stat-label">Artikel</span>
-                    </div>
-                    <div class="live-stat">
-                        <span class="live-stat-value" id="stat-sources">...</span>
-                        <span class="live-stat-label">Quellen</span>
-                    </div>
-                    <div class="live-stat">
-                        <span class="live-stat-value" id="stat-factchecks">...</span>
-                        <span class="live-stat-label">Faktenchecks</span>
-                    </div>
-                </div>
-            </div>
-
-            <!-- 3D Carousel -->
-            <div class="carousel-viewport">
-                <button class="carousel-arrow carousel-prev" aria-label="Vorherige Lage">&#8249;</button>
-                <button class="carousel-arrow carousel-next" aria-label="Nächste Lage">&#8250;</button>
-                <div class="carousel-track" id="carousel">
-                    <!-- Iran Card -->
-                    <div class="carousel-card card-live active" data-index="0" data-lage="iran-konflikt">
-                        <div class="demo-badge">LIVE</div>
-                        <h3 class="demo-title">Iran-Konflikt</h3>
-
-                        <div class="demo-excerpt" id="demo-excerpt">
-                            <div class="excerpt-text" id="excerpt-text">Lagebild wird geladen...</div>
-                        </div>
-                        <a href="/lagen/iran-konflikt/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
-                    </div>
-                    <!-- Cyberangriffe -->
-                    <div class="carousel-card card-live" data-index="1" data-lage="cyberangriffe">
-                        <div class="demo-badge">LIVE</div>
-                        <h3 class="demo-title">Cyberangriffe auf deutsche Infrastruktur</h3>
-
-                        <div class="demo-excerpt" id="demo-excerpt-cyberangriffe">
-                            <div class="excerpt-text" id="excerpt-text-cyberangriffe">Lagebild wird geladen...</div>
-                        </div>
-                        <a href="/lagen/cyberangriffe/" class="btn btn-primary btn-block">Vollständiges Lagebild öffnen</a>
-                    </div>
-                    <!-- Deepfakes Recherche -->
-                    <div class="carousel-card card-live" data-index="2" data-lage="deepfakes">
-                        <div class="demo-badge">RECHERCHE</div>
-                        <h3 class="demo-title">Rechtliche Lage von Deepfakes in Deutschland</h3>
-
-                        <div class="demo-excerpt" id="demo-excerpt-deepfakes">
-                            <div class="excerpt-text" id="excerpt-text-deepfakes">Recherche wird geladen...</div>
-                        </div>
-                        <a href="/lagen/deepfakes/" class="btn btn-primary btn-block">Vollständige Recherche öffnen</a>
-                    </div>
-                </div>
-                <div class="carousel-nav">
-                    <button class="carousel-dot active" data-index="0"></button>
-                    <button class="carousel-dot" data-index="1"></button>
-                    <button class="carousel-dot" data-index="2"></button>
-                </div>
-            </div>
-
-            <!-- Map -->
-            <div class="map-section" id="map-section">
-                <h3 class="map-title" id="map-title">Geografische Verortung der Meldungen</h3>
-                <div id="map-container"></div>
-                <div class="map-empty" id="map-empty" style="display:none">Kartendaten folgen</div>
-            </div>
-        </div>
-    </section>
-
-
-    <!-- Gradient: Solution -> Features -->
-    <div class="divider divider-gradient-alt-to-base"></div>
-
-    <!-- Features -->
-    <section class="section section-base" id="features">
-        <div class="container">
-            <h2 class="section-title">Was der Monitor leistet</h2>
-            <!-- Highlight: Faktenprüfung -->
-            <div class="feature-statement">
-                <p class="feature-statement-text">Jede Behauptung wird automatisch gegen unabhängige Quellen geprüft.</p>
-                <p class="feature-statement-sub">Statusverlauf, Evidenz und Quellenbelege. Automatisch und nachvollziehbar.</p>
-            </div>
-
-            <div class="grid-3">
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/monitor.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Echtzeit-Monitoring</h3>
-                    <p>Kontinuierliche Überwachung Ihrer definierten Quellen, rund um die Uhr.</p>
-                </div>
-
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/cube.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Quellenanalyse</h3>
-                    <p>Automatische Aggregation und Deduplizierung aus hunderten internationalen Quellen.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/location.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Geografische Verortung</h3>
-                    <p>Orte werden erkannt und auf einer interaktiven Karte dargestellt.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/languages.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Mehrsprachige Auswertung</h3>
-                    <p>Quellen in verschiedenen Sprachen werden automatisch verarbeitet und zusammengeführt.</p>
-                </div>
-                <div class="feature-card">
-                    <div class="feature-icon">
-                        <img src="/assets/images/icons/document.svg" alt="" width="36" height="36">
-                    </div>
-                    <h3>Strukturierte Lagebilder</h3>
-                    <p>Übersichtliche Zusammenfassungen mit Quellenbelegen und Zeitverläufen.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-
-
-    <!-- Contact CTA -->
-    <section class="section section-base" id="contact">
-        <div class="container cta-container">
-            <h2 class="section-title">Interesse am AegisSight Monitor?</h2>
-            <p class="cta-text">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
-            <button class="btn btn-primary btn-lg" onclick="openContactModal()">Kontakt aufnehmen</button>
-        </div>
-    </section>
-
-    <!-- Diagonal: -> Trust -->
-    <div class="divider divider-diagonal-dark">
-        <svg viewBox="0 0 1440 60" preserveAspectRatio="none"><path d="M0,60 L1440,0 L1440,60 Z" fill="#132844"/></svg>
-    </div>
-
-    <!-- Trust / Unser Versprechen -->
-    <section class="section section-dark" id="trust">
-        <div class="container">
-            <h2 class="section-title">Unser Versprechen</h2>
-            <div class="grid-4 trust-grid">
-                <div class="trust-card">
-                    <div class="trust-icon-wrap">
-                        <img src="/assets/images/icons/check-circle-filled.svg" alt="" width="48" height="48">
-                    </div>
-                    <h3>Enge Zusammenarbeit</h3>
-                    <p>Wir arbeiten Hand in Hand mit unseren Kunden für maßgeschneiderte Lösungen</p>
-                </div>
-                <div class="trust-card">
-                    <div class="trust-icon-wrap trust-flag">
-                        <img src="/assets/images/icons/german-flag.svg" alt="" width="60" height="36">
-                    </div>
-                    <h3>Made in Germany</h3>
-                    <p>Klare, robuste und sichere Software nach deutschen Qualitätsstandards</p>
-                </div>
-                <div class="trust-card">
-                    <div class="trust-icon-wrap">
-                        <img src="/assets/handshake.svg" alt="" width="50" height="50">
-                    </div>
-                    <h3>Verlässliche Partnerschaft</h3>
-                    <p>Basierend auf gemeinsamen Werten und langfristigem Vertrauen</p>
-                </div>
-                <div class="trust-card">
-                    <div class="trust-icon-wrap">
-                        <img src="/assets/images/icons/shield-check.svg" alt="" width="48" height="48">
-                    </div>
-                    <h3>Nachhaltigkeit</h3>
-                    <p>Fokus auf Sicherheit, Professionalität und zukunftssichere Lösungen</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="footer">
-        <div class="container">
-            <div class="footer-content">
-                <div class="footer-info">
-                    <p class="footer-company">AegisSight UG (haftungsbeschränkt)</p>
-                    <p>Gladbacher Straße 3-5, 40764 Langenfeld</p>
-                </div>
-                <div class="footer-links">
-                    <a href="/impressum.html">Impressum</a>
-                    <a href="/datenschutz.html">Datenschutz</a>
-                </div>
-            </div>
-            <p class="footer-copyright">&copy; 2026 AegisSight UG (haftungsbeschränkt). Alle Rechte vorbehalten.</p>
-        </div>
-    </footer>
-
-
-    <!-- Contact Modal -->
-    <div class="modal-overlay" id="contact-modal" style="display:none">
-        <div class="modal-content">
-            <button class="modal-close" onclick="closeContactModal()">&times;</button>
-            <h2>Kontakt aufnehmen</h2>
-            <p class="modal-sub">Sprechen Sie mit uns über Ihren Einsatzfall.</p>
-            <form id="contact-form" onsubmit="return submitContact(event)">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="cf-name">Name</label>
-                        <input type="text" id="cf-name" name="name" required>
-                    </div>
-                    <div class="form-group">
-                        <label for="cf-org">Organisation</label>
-                        <input type="text" id="cf-org" name="organisation">
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="cf-email">E-Mail</label>
-                    <input type="email" id="cf-email" name="email" required>
-                </div>
-                <div class="form-group">
-                    <label for="cf-message">Nachricht</label>
-                    <textarea id="cf-message" name="message" rows="4" required></textarea>
-                </div>
-                <button type="submit" class="btn btn-primary btn-block">Nachricht senden</button>
-            </form>
-            <div class="form-success" id="form-success" style="display:none">
-                <p>Vielen Dank für Ihre Nachricht. Wir melden uns zeitnah bei Ihnen.</p>
-            </div>
-        </div>
-    </div>
-
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    <script src="js/app.js"></script>
-</body>
-</html>