From bc5fdd18dfebb5f94c03403fc6e34eb7de6975d7 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Fri, 27 Mar 2026 21:26:28 +0100
Subject: [PATCH] refactor: Layer-Panel mit einklappbaren Kategorien + ANSICHT
 in Bottom Bar

- 5 einklappbare Gruppen: ECHTZEIT, INTELLIGENCE, GEOINT, INFRASTRUKTUR, UMGEBUNG
- Jede Gruppe zeigt Aktiv-Zaehler (z.B. 2/3)
- Klick auf Header klappt Gruppe auf/zu (Chevron-Indikator)
- ANSICHT (STD/NVG/FLIR/CRT) in Bottom Bar verschoben
- SATELLITENBILDER-Dropdown an Panel-Oberkante (immer sichtbar)
- Fadenkreuz + Ortsnamen immer sichtbar (nicht in Gruppe)
- Reduziert sichtbare Zeilen von ~35 auf ~18

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 static/css/globe.css            |  34 +++
 static/index.html               | 354 +++++++++++++++++++-------------
 static/js/app.js                |   2 +
 static/js/layers/visualmodes.js |   2 +-
 4 files changed, 248 insertions(+), 144 deletions(-)

diff --git a/static/css/globe.css b/static/css/globe.css
index e063df0..9a9c254 100644
--- a/static/css/globe.css
+++ b/static/css/globe.css
@@ -888,3 +888,37 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
     border-radius: 4px;
     margin-bottom: 8px;
 }
+
+/* === Layer-Gruppen (einklappbar) === */
+.layer-group { border-bottom: 1px solid rgba(255,255,255,0.04); }
+.layer-group-header {
+    display: flex; align-items: center; gap: 6px;
+    padding: 7px 8px; cursor: pointer; transition: background 0.15s;
+    font-size: 10px; letter-spacing: 1.5px; font-weight: 700;
+    user-select: none;
+}
+.layer-group-header:hover { background: rgba(255,255,255,0.04); }
+.layer-group-chevron {
+    font-size: 10px; color: var(--text-dim); width: 12px;
+    display: inline-block; text-align: center;
+}
+.layer-group-title { flex: 1; text-transform: uppercase; }
+.layer-group-count {
+    font-size: 10px; color: var(--text-dim); font-weight: 400; font-family: var(--font-mono);
+}
+.layer-group-content {
+    display: none; padding: 0 0 4px; flex-direction: column; gap: 2px;
+}
+.layer-group.open .layer-group-content { display: flex; }
+
+/* === Bottom Bar: Visual Mode Buttons === */
+#bottom-bar { justify-content: space-between; padding: 0 12px; }
+.bottom-vmodes { display: flex; gap: 3px; align-items: center; }
+.vmode-btn-sm {
+    padding: 3px 8px; font-family: var(--font-mono); font-size: 10px;
+    font-weight: 700; letter-spacing: 0.5px;
+    background: rgba(255,255,255,0.05); border: 1px solid var(--border);
+    border-radius: 3px; color: var(--text-dim); cursor: pointer; transition: all 0.2s;
+}
+.vmode-btn-sm:hover { border-color: var(--accent); color: var(--text); }
+.vmode-btn-sm.active { background: rgba(0,255,136,0.15); border-color: var(--accent); color: var(--accent); }
diff --git a/static/index.html b/static/index.html
index 9111e19..b4a9a10 100644
--- a/static/index.html
+++ b/static/index.html
@@ -51,171 +51,235 @@
     <!-- Layer Panel -->
     <aside id="layer-panel" class="layer-panel">
         <h3 class="panel-title">LAYER</h3>
+
+        <!-- Satellitenbilder: immer sichtbar -->
         <div class="panel-section">
-
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-flights" title="Echtzeit-Flugverkehr weltweit (OpenSky Network, ~7.000 Flugzeuge, 15s Refresh)">
-                <span class="layer-dot dot-flights"></span>
-                <span class="layer-name" title="~7.000 Flugzeuge weltweit, Position + Hoehe + Geschwindigkeit">Flugverkehr</span>
-                <span class="layer-count" id="count-flights">-</span>
-            </label>
-            <div class="layer-loading" id="loading-flights"></div>
-            <div class="layer-status" id="status-flights"></div>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-military" title="Militaerflugzeuge weltweit (adsb.lol, ~300 Flugzeuge, 20s Refresh)">
-                <span class="layer-dot dot-military"></span>
-                <span class="layer-name" title="Militaertransporter, Tanker, Aufklaerer, Kampfjets">Militaerflug</span>
-                <span class="layer-count" id="count-military">-</span>
-            </label>
-            <div class="layer-status" id="status-military"></div>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-ships" title="Echtzeit-Schiffsverkehr weltweit (AISStream AIS-Daten, kontinuierlich)">
-                <span class="layer-dot dot-ships"></span>
-                <span class="layer-name" title="Tausende Schiffe global, MMSI + SOG + COG">Schiffsverkehr</span>
-                <span class="layer-count" id="count-ships">-</span>
-            </label>
-            <div class="layer-loading" id="loading-ships"></div>
-            <div class="layer-status" id="status-ships"></div>
-            <div id="ship-filters" class="ship-filters" style="display:none"></div>
-
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-gdelt" title="Geokodierte Nachrichten der letzten 24h (GDELT Global Event Database)">
-                <span class="layer-dot dot-gdelt"></span>
-                <span class="layer-name" title="Geokodierte News-Events, thematisch zur aktuellen Weltlage">Nachrichten</span>
-                <span class="layer-count" id="count-gdelt">-</span>
-            </label>
-            <div class="layer-loading" id="loading-gdelt"></div>
-            <div class="layer-status" id="status-gdelt"></div>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-satellites" title="Satelliten-Orbits in Echtzeit (CelesTrak TLE: ISS, GPS, Galileo, Starlink)">
-                <span class="layer-dot dot-satellites"></span>
-                <span class="layer-name" title="ISS (rot), GPS (orange), Galileo (blau), Starlink (grau)">Satelliten</span>
-                <span class="layer-count" id="count-satellites">-</span>
-            </label>
-            <div class="layer-loading" id="loading-satellites"></div>
-            <div class="layer-status" id="status-satellites"></div>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-cables" title="Untersee-Glasfaserkabel weltweit (TeleGeography)">
-                <span class="layer-dot dot-cables"></span>
-                <span class="layer-name" title="Internationale Seekabel-Infrastruktur">Seekabel</span>
-                <span class="layer-count" id="count-cables">-</span>
-            </label>
-            <div class="layer-status" id="status-cables"></div>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-infra" title="Kernkraftwerke + Militaerflughaefen (OpenStreetMap)">
-                <span class="layer-dot dot-infra"></span>
-                <span class="layer-name" title="Atomkraftwerke (gelb) + Militaerbasen (rot)">Infrastruktur</span>
-                <span class="layer-count" id="count-infra">-</span>
-            </label>
-            <div class="layer-status" id="status-infra"></div>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-vlm" title="VLM-Bildanalyse: Bild hochladen, Claude analysiert, Overpass sucht passende Orte">
-                <span class="layer-dot dot-vlm"></span>
-                <span class="layer-name" title="Satellitenbild-Analyse mit Claude VLM">Bildanalyse</span>
-                <span class="layer-count" id="count-vlm">-</span>
-            </label>
-            <div class="panel-divider"></div>
-            <div style="font-size:9px;letter-spacing:1.5px;color:#e040fb;margin-bottom:4px">GEOINT TOOLS</div>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-nightlights" title="NASA VIIRS Nachtlicht-Karte (Black Marble)">
-                <span class="layer-dot dot-nightlights"></span>
-                <span class="layer-name" title="Globale Nachtlicht-Aktivitaet (Besiedlung, Stromausfaelle)">Nachtlichter</span>
-            </label>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-celltowers" title="Mobilfunkmasten aus OpenStreetMap (zoomabhaengig)">
-                <span class="layer-dot dot-celltowers"></span>
-                <span class="layer-name" title="Sendemasten und Mobilfunkinfrastruktur">Funkmasten</span>
-                <span class="layer-count" id="count-celltowers">-</span>
-            </label>
-            <div class="layer-status" id="status-celltowers"></div>
-            <div class="geoint-btn-row">
-                <button class="geoint-tool-btn" onclick="GeointTools.showSunCalc()" title="Sonnenstand und Schattenanalyse berechnen">Sonne</button>
-                <button class="geoint-tool-btn" onclick="GeointTools.startElevation()" title="Hoehenprofil und Sichtlinienanalyse zwischen zwei Punkten">Hoehe</button>
-            </div>
-            <div class="panel-divider"></div>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-iss" title="ISS Echtzeit-Position (5s Refresh)">
-                <span class="layer-dot dot-iss"></span>
-                <span class="layer-name" title="International Space Station, ~420km Hoehe">ISS Tracker</span>
-            </label>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-disasters" title="Naturkatastrophen + Erdbeben (NASA EONET + USGS: Waldbraende, Vulkane, Stuerme, Erdbeben M2.5+)">
-                <span class="layer-dot dot-disasters"></span>
-                <span class="layer-name" title="Waldbraende, Vulkane, Stuerme, Erdbeben, Fluten, Erdrutsche">Katastrophen</span>
-                <span class="layer-count" id="count-disasters">-</span>
-            </label>
-            <div class="layer-loading" id="loading-disasters"></div>
-            <div class="layer-status" id="status-disasters"></div>
-            <label class="layer-toggle">                <input type="checkbox" id="layer-firms" title="NASA VIIRS Waermeanomalien: Aktive Braende, Industriewaerme, Vulkane (tagesaktuell, 375m)">                <span class="layer-dot dot-firms"></span>                <span class="layer-name" title="Thermische Hotspots weltweit via NASA VIIRS Satellit">Feuer (VIIRS)</span>            </label>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-weather" title="Regenradar weltweit (RainViewer, 5min Refresh)">
-                <span class="layer-dot dot-weather"></span>
-                <span class="layer-name" title="Niederschlagsradar als Overlay auf dem Globus">Regenradar</span>
-            </label>
-            <div class="layer-status" id="status-weather"></div>
+            <div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:4px">SATELLITENBILDER</div>
+            <select id="imagery-select" class="imagery-select" onchange="ImagerySwitch.switchTo(this.value)">
+                <optgroup label="Standard">
+                    <option value="default">Cesium Ion (Standard)</option>
+                    <option value="esri">Esri World Imagery</option>
+                </optgroup>
+                <optgroup label="NASA Earthdata (tagesaktuell)">
+                    <option value="nasa-modis">MODIS Terra (Heute)</option>
+                    <option value="nasa-viirs">VIIRS SNPP (Heute)</option>
+                    <option value="nasa-goes-east">GOES East (Live)</option>
+                    <option value="nasa-goes-west">GOES West (Live)</option>
+                </optgroup>
+                <optgroup label="Sentinel-2 (historisch)">
+                    <option value="s2-2024">Sentinel-2 (2024)</option>
+                    <option value="s2-2023">Sentinel-2 (2023)</option>
+                    <option value="s2-2022">Sentinel-2 (2022)</option>
+                    <option value="s2-2020">Sentinel-2 (2020)</option>
+                    <option value="s2-2018">Sentinel-2 (2018)</option>
+                </optgroup>
+                <optgroup label="Karten">
+                    <option value="topo">OpenTopoMap</option>
+                    <option value="osm">OpenStreetMap</option>
+                </optgroup>
+            </select>
+            <div id="imagery-label" style="font-size:9px;color:var(--text-dim);margin-top:2px;">Cesium Ion (Standard)</div>
         </div>
         <div class="panel-divider"></div>
+
+        <!-- Gruppe: ECHTZEIT -->
+        <div class="layer-group open" id="group-realtime">
+            <div class="layer-group-header" data-group="group-realtime">
+                <span class="layer-group-chevron">&#9662;</span>
+                <span class="layer-group-title" style="color:var(--accent)">ECHTZEIT</span>
+                <span class="layer-group-count" id="gcount-realtime">0/3</span>
+            </div>
+            <div class="layer-group-content">
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-flights" title="Echtzeit-Flugverkehr weltweit (~7.000 Flugzeuge, 15s Refresh)">
+                    <span class="layer-dot dot-flights"></span>
+                    <span class="layer-name">Flugverkehr</span>
+                    <span class="layer-count" id="count-flights">-</span>
+                </label>
+                <div class="layer-loading" id="loading-flights"></div>
+                <div class="layer-status" id="status-flights"></div>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-military" title="Militaerflugzeuge weltweit (adsb.lol, ~300 Flugzeuge, 20s Refresh)">
+                    <span class="layer-dot dot-military"></span>
+                    <span class="layer-name">Militaerflug</span>
+                    <span class="layer-count" id="count-military">-</span>
+                </label>
+                <div class="layer-status" id="status-military"></div>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-ships" title="Echtzeit-Schiffsverkehr weltweit (AISStream AIS-Daten)">
+                    <span class="layer-dot dot-ships"></span>
+                    <span class="layer-name">Schiffsverkehr</span>
+                    <span class="layer-count" id="count-ships">-</span>
+                </label>
+                <div class="layer-loading" id="loading-ships"></div>
+                <div class="layer-status" id="status-ships"></div>
+                <div id="ship-filters" class="ship-filters" style="display:none"></div>
+            </div>
+        </div>
+
+        <!-- Gruppe: INTELLIGENCE -->
+        <div class="layer-group" id="group-intel">
+            <div class="layer-group-header" data-group="group-intel">
+                <span class="layer-group-chevron">&#9656;</span>
+                <span class="layer-group-title" style="color:#ff8800">INTELLIGENCE</span>
+                <span class="layer-group-count" id="gcount-intel">0/3</span>
+            </div>
+            <div class="layer-group-content">
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-gdelt" title="Geokodierte Nachrichten der letzten 24h (GDELT)">
+                    <span class="layer-dot dot-gdelt"></span>
+                    <span class="layer-name">Nachrichten</span>
+                    <span class="layer-count" id="count-gdelt">-</span>
+                </label>
+                <div class="layer-loading" id="loading-gdelt"></div>
+                <div class="layer-status" id="status-gdelt"></div>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-disasters" title="Naturkatastrophen + Erdbeben (NASA EONET + USGS)">
+                    <span class="layer-dot dot-disasters"></span>
+                    <span class="layer-name">Katastrophen</span>
+                    <span class="layer-count" id="count-disasters">-</span>
+                </label>
+                <div class="layer-loading" id="loading-disasters"></div>
+                <div class="layer-status" id="status-disasters"></div>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-firms" title="NASA VIIRS Waermeanomalien: Braende, Industriewaerme (375m)">
+                    <span class="layer-dot dot-firms"></span>
+                    <span class="layer-name">Feuer (VIIRS)</span>
+                </label>
+            </div>
+        </div>
+
+        <!-- Gruppe: GEOINT -->
+        <div class="layer-group" id="group-geoint">
+            <div class="layer-group-header" data-group="group-geoint">
+                <span class="layer-group-chevron">&#9656;</span>
+                <span class="layer-group-title" style="color:#e040fb">GEOINT</span>
+                <span class="layer-group-count" id="gcount-geoint">0/3</span>
+            </div>
+            <div class="layer-group-content">
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-vlm" title="VLM-Bildanalyse: Bild hochladen, Claude analysiert, Overpass sucht">
+                    <span class="layer-dot dot-vlm"></span>
+                    <span class="layer-name">Bildanalyse</span>
+                </label>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-nightlights" title="NASA VIIRS Nachtlicht-Karte (Black Marble NRT)">
+                    <span class="layer-dot dot-nightlights"></span>
+                    <span class="layer-name">Nachtlichter</span>
+                </label>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-celltowers" title="Mobilfunkmasten aus OpenStreetMap (zoomabhaengig)">
+                    <span class="layer-dot dot-celltowers"></span>
+                    <span class="layer-name">Funkmasten</span>
+                    <span class="layer-count" id="count-celltowers">-</span>
+                </label>
+                <div class="layer-status" id="status-celltowers"></div>
+                <div class="geoint-btn-row">
+                    <button class="geoint-tool-btn" onclick="GeointTools.showSunCalc()" title="Sonnenstand und Schattenanalyse">Sonne</button>
+                    <button class="geoint-tool-btn" onclick="GeointTools.startElevation()" title="Hoehenprofil und Sichtlinienanalyse">Hoehe</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Gruppe: INFRASTRUKTUR -->
+        <div class="layer-group" id="group-infra">
+            <div class="layer-group-header" data-group="group-infra">
+                <span class="layer-group-chevron">&#9656;</span>
+                <span class="layer-group-title" style="color:#ffdd00">INFRASTRUKTUR</span>
+                <span class="layer-group-count" id="gcount-infra">0/4</span>
+            </div>
+            <div class="layer-group-content">
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-satellites" title="Satelliten-Orbits (CelesTrak TLE: ISS, GPS, Galileo, Starlink)">
+                    <span class="layer-dot dot-satellites"></span>
+                    <span class="layer-name">Satelliten</span>
+                    <span class="layer-count" id="count-satellites">-</span>
+                </label>
+                <div class="layer-loading" id="loading-satellites"></div>
+                <div class="layer-status" id="status-satellites"></div>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-cables" title="Untersee-Glasfaserkabel weltweit (TeleGeography)">
+                    <span class="layer-dot dot-cables"></span>
+                    <span class="layer-name">Seekabel</span>
+                    <span class="layer-count" id="count-cables">-</span>
+                </label>
+                <div class="layer-status" id="status-cables"></div>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-infra" title="Kernkraftwerke + Militaerflughaefen (OpenStreetMap)">
+                    <span class="layer-dot dot-infra"></span>
+                    <span class="layer-name">AKWs / Basen</span>
+                    <span class="layer-count" id="count-infra">-</span>
+                </label>
+                <div class="layer-status" id="status-infra"></div>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-iss" title="ISS Echtzeit-Position (5s Refresh)">
+                    <span class="layer-dot dot-iss"></span>
+                    <span class="layer-name">ISS Tracker</span>
+                </label>
+            </div>
+        </div>
+
+        <!-- Gruppe: UMGEBUNG -->
+        <div class="layer-group" id="group-environ">
+            <div class="layer-group-header" data-group="group-environ">
+                <span class="layer-group-chevron">&#9656;</span>
+                <span class="layer-group-title" style="color:#44bbff">UMGEBUNG</span>
+                <span class="layer-group-count" id="gcount-environ">0/4</span>
+            </div>
+            <div class="layer-group-content">
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-weather" title="Regenradar weltweit (RainViewer, 5min Refresh)">
+                    <span class="layer-dot dot-weather"></span>
+                    <span class="layer-name">Regenradar</span>
+                </label>
+                <div class="layer-status" id="status-weather"></div>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-daynight" title="Tag/Nacht-Beleuchtung basierend auf Sonnenposition">
+                    <span class="layer-dot dot-daynight"></span>
+                    <span class="layer-name">Tag/Nacht</span>
+                </label>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-terminator" title="Echtzeit Tag/Nacht-Grenze + Nachtschatten">
+                    <span class="layer-dot dot-terminator"></span>
+                    <span class="layer-name">Terminatur</span>
+                </label>
+                <label class="layer-toggle">
+                    <input type="checkbox" id="layer-timezones" title="24 Zeitzonen-Linien mit aktueller Uhrzeit">
+                    <span class="layer-dot dot-timezones"></span>
+                    <span class="layer-name">Zeitzonen</span>
+                </label>
+            </div>
+        </div>
+
+        <div class="panel-divider"></div>
+
+        <!-- Immer sichtbar -->
         <div class="panel-section">
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-daynight" title="Tag/Nacht-Beleuchtung basierend auf aktueller Sonnenposition">
-                <span class="layer-dot dot-daynight"></span>
-                <span class="layer-name" title="Sonnenlicht-Simulation zeigt aktuelle Tages-/Nachtseite">Tag/Nacht</span>
-            </label>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-terminator" title="Echtzeit Tag/Nacht-Grenze als orange Linie + Nachtschatten">
-                <span class="layer-dot dot-terminator"></span>
-                <span class="layer-name" title="Sonnenterminatur: Grenze zwischen Tag und Nacht">Terminatur</span>
-            </label>
-            <label class="layer-toggle">
-                <input type="checkbox" id="layer-timezones" title="24 Zeitzonen-Linien mit aktueller Uhrzeit">
-                <span class="layer-dot dot-timezones"></span>
-                <span class="layer-name" title="UTC-Zonen als vertikale Linien mit Uhrzeiten">Zeitzonen</span>
-            </label>
             <label class="layer-toggle">
                 <input type="checkbox" id="layer-crosshairs" title="Fadenkreuz und Entfernungsringe">
                 <span class="layer-dot dot-crosshairs"></span>
                 <span class="layer-name">Fadenkreuz</span>
             </label>
             <label class="layer-toggle">
-                <input type="checkbox" id="layer-labels" title="Laendergrenzen, Staedte und Gewaessernamen (Esri World Boundaries)" checked>
+                <input type="checkbox" id="layer-labels" title="Laendergrenzen, Staedte und Gewaessernamen (Esri)" checked>
                 <span class="layer-dot dot-labels"></span>
-                <span class="layer-name" title="Laendergrenzen, Hauptstaedte, Fluesse, Meere">Ortsnamen</span>
+                <span class="layer-name">Ortsnamen</span>
             </label>
         </div>
         <div class="panel-divider"></div>
-        <div class="panel-divider"></div>
-        <div class="panel-section">
-            <div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px;">ANSICHT</div>
-            <div style="display:flex;gap:4px;flex-wrap:wrap;">
-                <button class="vmode-btn active" data-mode="standard" title="Standard: Photorealistische Darstellung" onclick="VisualModes.set('standard')">STD</button>
-                <button class="vmode-btn" data-mode="nvg" title="Night Vision: Gruener Monochrom-Filter (Nachtsichtgeraet)" onclick="VisualModes.set('nvg')">NVG</button>
-                <button class="vmode-btn" data-mode="flir" title="FLIR Thermal: Infrarot-Darstellung fuer Waermesignaturen" onclick="VisualModes.set('flir')">FLIR</button>
-                <button class="vmode-btn" data-mode="crt" title="CRT Monitor: Retro-Ueberwachungsbildschirm mit Scanlines" onclick="VisualModes.set('crt')">CRT</button>
-            </div>
-        </div>
-        <div class="panel-divider"></div>
-        <div class="panel-divider"></div>
-        <div class="panel-section">
-            <div style="font-size:9px;letter-spacing:1.5px;color:var(--accent);margin-bottom:6px;">SATELLITENBILDER</div>
-<select id="imagery-select" class="imagery-select" onchange="ImagerySwitch.switchTo(this.value)">                <optgroup label="Standard">                    <option value="default">Cesium Ion (Standard)</option>                    <option value="esri">Esri World Imagery</option>                </optgroup>                <optgroup label="NASA Earthdata (tagesaktuell)">                    <option value="nasa-modis">MODIS Terra (Heute)</option>                    <option value="nasa-viirs">VIIRS SNPP (Heute)</option>                    <option value="nasa-goes-east">GOES East (Live)</option>                    <option value="nasa-goes-west">GOES West (Live)</option>                </optgroup>                <optgroup label="Sentinel-2 (historisch)">                    <option value="s2-2024">Sentinel-2 (2024)</option>                    <option value="s2-2023">Sentinel-2 (2023)</option>                    <option value="s2-2022">Sentinel-2 (2022)</option>                    <option value="s2-2020">Sentinel-2 (2020)</option>                    <option value="s2-2018">Sentinel-2 (2018)</option>                </optgroup>                <optgroup label="Karten">                    <option value="topo">OpenTopoMap</option>                    <option value="osm">OpenStreetMap</option>                </optgroup>            </select>
-            <div id="imagery-label" style="font-size:9px;color:var(--text-dim);margin-top:2px;">Cesium Ion (Standard)</div>
-        </div>
-        <div class="panel-divider"></div>
         <div class="panel-coords" id="coords-display">
             LAT: --&nbsp;&nbsp;LON: --
         </div>
     </aside>
 
-
     <!-- City Quick-Links -->
     <div id="city-links" class="city-links"></div>
 
-    <!-- Rechte Sidebar: Datenpunkt-Uebersicht -->
-
     <!-- VLM Bildanalyse Panel -->
     <div id="vlm-panel" class="vlm-panel-right" style="display:none"></div>
     <!-- GEOINT Tools Panel -->
     <div id="geoint-panel" class="geoint-panel" style="display:none"></div>
+    <!-- Rechte Sidebar -->
     <aside id="sidebar-right" class="sidebar-right">
         <button id="sidebar-toggle" class="sidebar-toggle" title="Seitenleiste ein-/ausblenden">
             <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>
@@ -241,11 +305,15 @@
     </div>
     <div id="visual-overlay" class="visual-overlay" style="display:none"></div>
 
-    <!-- Bottom Bar -->
+    <!-- Bottom Bar mit Visual Modes -->
     <footer id="bottom-bar">
-        <div class="bottom-stats" id="bottom-stats">
-            Initialisiere...
+        <div class="bottom-vmodes">
+            <button class="vmode-btn-sm active" data-mode="standard" title="Standard" onclick="VisualModes.set('standard')">STD</button>
+            <button class="vmode-btn-sm" data-mode="nvg" title="Night Vision" onclick="VisualModes.set('nvg')">NVG</button>
+            <button class="vmode-btn-sm" data-mode="flir" title="FLIR Thermal" onclick="VisualModes.set('flir')">FLIR</button>
+            <button class="vmode-btn-sm" data-mode="crt" title="CRT Monitor" onclick="VisualModes.set('crt')">CRT</button>
         </div>
+        <div class="bottom-stats" id="bottom-stats">Initialisiere...</div>
     </footer>
 
     <!-- Scripts -->
@@ -261,7 +329,7 @@
     <script src="/static/js/layers/military.js"></script>
     <script src="/static/js/layers/cables.js"></script>
     <script src="/static/js/layers/infra.js"></script>
-<script src="/static/js/layers/overpass.js"></script>
+    <script src="/static/js/layers/overpass.js"></script>
     <script src="/static/js/ui/vlm.js"></script>
     <script src="/static/js/layers/nightlights.js"></script>
     <script src="/static/js/layers/celltowers.js"></script>
diff --git a/static/js/app.js b/static/js/app.js
index 4950fa8..9723b8e 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -88,6 +88,7 @@ const Globe = {
         if (typeof SearchUI !== 'undefined') SearchUI.init();
         this._loadLagen();
         document.getElementById('bottom-stats').textContent = 'Globe initialisiert — Lade Daten...';
+// Gruppen auf-/zuklappen        document.querySelectorAll(".layer-group-header").forEach(function(header) {            header.addEventListener("click", function() {                var group = document.getElementById(this.dataset.group);                group.classList.toggle("open");                var chevron = this.querySelector(".layer-group-chevron");                chevron.innerHTML = group.classList.contains("open") ? "&#9662;" : "&#9656;";            });        });
     },
 
     _toggleLabels(on) {
@@ -222,6 +223,7 @@ const Globe = {
             document.getElementById('bottom-stats').textContent = parts.join('  |  ');
         }
     },
+// Gruppen-Zaehler aktualisieren        var groups = {            "gcount-realtime": ["layer-flights","layer-military","layer-ships"],            "gcount-intel": ["layer-gdelt","layer-disasters","layer-firms"],            "gcount-geoint": ["layer-vlm","layer-nightlights","layer-celltowers"],            "gcount-infra": ["layer-satellites","layer-cables","layer-infra","layer-iss"],            "gcount-environ": ["layer-weather","layer-daynight","layer-terminator","layer-timezones"],        };        Object.keys(groups).forEach(function(countId) {            var ids = groups[countId];            var active = ids.filter(function(id) { var cb = document.getElementById(id); return cb && cb.checked; }).length;            var el = document.getElementById(countId);            if (el) el.textContent = active + "/" + ids.length;        });
 };
 
 document.addEventListener('DOMContentLoaded', function() { Globe.init(); });
diff --git a/static/js/layers/visualmodes.js b/static/js/layers/visualmodes.js
index 7392bc1..06858d0 100644
--- a/static/js/layers/visualmodes.js
+++ b/static/js/layers/visualmodes.js
@@ -34,7 +34,7 @@ const VisualModes = {
         }
 
         // Button-States aktualisieren
-        document.querySelectorAll('.vmode-btn').forEach(function(btn) {
+        document.querySelectorAll('.vmode-btn, .vmode-btn-sm').forEach(function(btn) {
             btn.classList.toggle('active', btn.dataset.mode === mode);
         });
     },