UI Overhaul: Groessere Elemente, bessere InfoBox-Platzierung

PANEL (links):
- 240px breit (war 200px)
- Checkboxen 16x16px (war 12x12)
- Dots 10px (war 8px)
- Layer-Namen 13px (war 11px)
- Counts 12px (war 10px)
- Mehr Padding pro Toggle-Zeile

INFOBOX (bei Klick):
- Links neben dem Panel platziert (254px vom Rand)
- 420px breit, max 60vh hoch, scrollbar
- Kollidiert nicht mit Panel oder Sidebar
- Groesserer Titel (14px), mehr Padding

PUNKTE AUF DEM GLOBUS:
- Flugzeuge: 3/4/5px (war 2/2.5/3)
- Schiffe: 3/4/5px (war 2/2.5/3)
- Militaer: 6px (war 4)
- Katastrophen: 10px (war 8)
- Erdbeben: 6-15px (war 4-10)
- GDELT: 7px (war 5)
- ISS: 14px (war 10)
- Cluster: +30% groesser

HEADER + FOOTER:
- Header 48px (war 44px)
- Footer 32px (war 28px)
- Titel 15px, Stats 12px
- Lage-Select + Suche groesser

static/css/globe.css

@@ -26,13 +26,13 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 
 /* === Header === */
 #header {
-    position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 100;
+    position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 100;
     display: flex; align-items: center; padding: 0 16px; gap: 16px;
     background: var(--bg-panel); border-bottom: 1px solid var(--border);
     backdrop-filter: blur(12px);
 }
 .header-brand { display: flex; align-items: center; gap: 8px; }
-.header-title { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
+.header-title { font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); }
 .header-stats { text-align: center; font-size: 11px; color: var(--text-dim); letter-spacing: 1px; }
 .header-actions { display: flex; gap: 8px; }
 .header-btn {
@@ -43,28 +43,28 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 
 /* === Layer Panel === */
 .layer-panel {
-    position: fixed; top: 52px; left: 12px; z-index: 100;
+    position: fixed; top: 56px; left: 12px; z-index: 100;
-    width: 200px; background: var(--bg-panel); border: 1px solid var(--border);
+    width: 240px; background: var(--bg-panel); border: 1px solid var(--border);
     border-radius: 8px; padding: 12px; backdrop-filter: blur(12px);
     box-shadow: 0 8px 32px rgba(0,0,0,0.4);
 }
 .panel-title {
-    font-size: 9px; font-weight: 700; letter-spacing: 3px; color: var(--accent);
+    font-size: 11px; font-weight: 700; letter-spacing: 3px; color: var(--accent);
     margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
 }
 .panel-section { display: flex; flex-direction: column; gap: 4px; }
 .panel-divider { height: 1px; background: var(--border); margin: 8px 0; }
 
 .layer-toggle {
-    display: flex; align-items: center; gap: 6px; padding: 4px 6px;
+    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
     border-radius: 4px; cursor: pointer; transition: background 0.15s;
 }
 .layer-toggle:hover { background: rgba(255,255,255,0.04); }
 .layer-toggle input[type="checkbox"] {
-    accent-color: var(--accent); width: 12px; height: 12px; cursor: pointer; flex-shrink: 0;
+    accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
 }
 .layer-dot {
-    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
+    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
 }
 .dot-flights { background: var(--accent); }
 .dot-ships { background: #4499ff; }
@@ -72,22 +72,22 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 .dot-gdelt { background: #ff8800; }
 .dot-daynight { background: #8866cc; }
 .dot-labels { background: #aaaaaa; }
-.layer-name { font-size: 11px; color: var(--text); flex: 1; }
+.layer-name { font-size: 13px; color: var(--text); flex: 1; }
-.layer-count { font-size: 10px; color: var(--text-dim); }
+.layer-count { font-size: 12px; color: var(--text-dim); }
 
 .panel-coords {
-    font-size: 10px; color: var(--accent); letter-spacing: 0.5px;
+    font-size: 12px; color: var(--accent); letter-spacing: 0.5px;
-    padding: 6px 0 0; text-align: center;
+    padding: 8px 0 0; text-align: center;
 }
 
 /* === Bottom Bar === */
 #bottom-bar {
-    position: fixed; bottom: 0; left: 0; right: 0; height: 28px; z-index: 100;
+    position: fixed; bottom: 0; left: 0; right: 0; height: 32px; z-index: 100;
     display: flex; align-items: center; justify-content: center;
     background: var(--bg-panel); border-top: 1px solid var(--border);
     backdrop-filter: blur(8px);
 }
-.bottom-stats { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; }
+.bottom-stats { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; }
 
 /* === Cesium InfoBox Override === */
 .cesium-infoBox { background: var(--bg-panel) !important; border: 1px solid var(--border) !important; }
@@ -103,7 +103,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 .cesium-infoBox-title {
     color: var(--accent) !important;
     font-family: var(--font-mono) !important;
-    font-size: 12px !important;
+    font-size: 14px !important;
+    padding: 8px 12px !important;
     background: rgba(0,255,136,0.08) !important;
 }
 .cesium-infoBox-iframe {
@@ -158,9 +159,9 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 
 /* === Visual Mode Buttons === */
 .vmode-btn {
-    padding: 4px 8px;
+    padding: 6px 10px;
     font-family: var(--font-mono);
-    font-size: 9px;
+    font-size: 11px;
     font-weight: 700;
     letter-spacing: 1px;
     background: rgba(255,255,255,0.05);
@@ -261,9 +262,9 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 /* === Rechte Sidebar === */
 .sidebar-right {
     position: fixed;
-    top: 44px;
+    top: 48px;
     right: 0;
-    bottom: 28px;
+    bottom: 32px;
     width: 280px;
     z-index: 100;
     display: flex;
@@ -350,7 +351,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
     text-align: center;
 }
 .sb-title {
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
@@ -358,7 +359,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
     flex: 1;
 }
 .sb-badge {
-    font-size: 9px;
+    font-size: 11px;
     color: var(--accent);
     background: rgba(0,255,136,0.1);
     padding: 1px 6px;
@@ -387,14 +388,14 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 }
 .sb-item-text { min-width: 0; flex: 1; }
 .sb-item-name {
-    font-size: 11px;
+    font-size: 13px;
     color: var(--text);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 .sb-item-sub {
-    font-size: 9px;
+    font-size: 11px;
     color: var(--text-dim);
     white-space: nowrap;
     overflow: hidden;
@@ -422,8 +423,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
     border-radius: 4px;
     color: var(--accent);
     font-family: var(--font-mono);
-    font-size: 11px;
+    font-size: 13px;
-    padding: 4px 8px;
+    padding: 6px 10px;
     cursor: pointer;
     max-width: 300px;
     outline: none;
@@ -434,21 +435,23 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
     color: var(--text);
 }
 
-/* === InfoBox zentriert oben === */
+/* === InfoBox: Links neben dem Layer-Panel === */
 .cesium-viewer-infoBoxContainer {
     position: absolute !important;
-    top: 44px !important;
+    top: 52px !important;
+    left: 254px !important;
     right: auto !important;
-    left: 50% !important;
+    transform: none !important;
-    transform: translateX(-50%) !important;
+    max-width: 420px !important;
-    max-width: 500px !important;
+    width: 420px !important;
-    width: 90% !important;
+    max-height: 60vh !important;
-    max-height: 50vh !important;
     z-index: 150 !important;
 }
 .cesium-infoBox {
-    max-height: 50vh !important;
+    max-height: 60vh !important;
     overflow-y: auto !important;
+    border-radius: 8px !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
 }
 
 
@@ -459,8 +462,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 /* === Search Bar === */
 .header-search { position: relative; }
 .globe-search {
-    width: 180px;
+    width: 200px;
-    padding: 4px 10px;
+    padding: 6px 12px;
     background: rgba(255,255,255,0.05);
     border: 1px solid var(--border);
     border-radius: 4px;
@@ -470,7 +473,7 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
     outline: none;
     transition: width 0.3s, border-color 0.2s;
 }
-.globe-search:focus { width: 260px; border-color: var(--accent); }
+.globe-search:focus { width: 300px; border-color: var(--accent); }
 .globe-search::placeholder { color: var(--text-dim); }
 .search-results {
     position: absolute;
@@ -497,8 +500,8 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 /* === City Quick-Links === */
 .city-links {
     position: fixed;
-    top: 44px;
+    top: 48px;
-    left: 220px;
+    left: 254px;
     right: 290px;
     z-index: 90;
     display: flex;
@@ -557,13 +560,13 @@ html, body { height: 100%; overflow: hidden; background: var(--bg-primary); colo
 /* === Imagery Selector === */
 .imagery-select {
     width: 100%;
-    padding: 4px 6px;
+    padding: 6px 8px;
     background: rgba(255,255,255,0.05);
     border: 1px solid var(--border);
     border-radius: 4px;
     color: var(--text);
     font-family: var(--font-mono);
-    font-size: 10px;
+    font-size: 12px;
     cursor: pointer;
     outline: none;
 }

static/js/layers/disasters.js

@@ -119,7 +119,7 @@ const DisastersLayer = {
                 name: icon.label + ': ' + (evt.title || '?'),
                 position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 0),
                 point: {
-                    pixelSize: 8,
+                    pixelSize: 10,
                     color: Cesium.Color.fromCssColorString(icon.color),
                     outlineColor: Cesium.Color.fromCssColorString(icon.color).withAlpha(0.4),
                     outlineWidth: 3,
@@ -160,7 +160,7 @@ const DisastersLayer = {
                 name: 'Erdbeben M' + mag.toFixed(1) + ' ' + (p.place || ''),
                 position: Cesium.Cartesian3.fromDegrees(c[0], c[1], 0),
                 point: {
-                    pixelSize: Math.max(mag * 2.5, 4),
+                    pixelSize: Math.max(mag * 3, 6),
                     color: Cesium.Color.fromCssColorString(color),
                     outlineColor: Cesium.Color.fromCssColorString(color).withAlpha(0.4),
                     outlineWidth: 2,

static/js/layers/flights.js

@@ -100,7 +100,7 @@ const FlightsLayer = {
             var c = clusters[keys[j]];
             var avgLat = c.sumLat / c.count;
             var avgLon = c.sumLon / c.count;
-            var size = Math.min(Math.max(Math.sqrt(c.count) * 1.5, 4), 20);
+            var size = Math.min(Math.max(Math.sqrt(c.count) * 2, 6), 24);
 
             this._points.add({
                 position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000),
@@ -114,7 +114,7 @@ const FlightsLayer = {
                 this._labels.add({
                     position: Cesium.Cartesian3.fromDegrees(avgLon, avgLat, 50000),
                     text: c.count.toString(),
-                    font: '11px sans-serif',
+                    font: '13px sans-serif bold',
                     fillColor: Cesium.Color.WHITE,
                     outlineColor: Cesium.Color.BLACK,
                     outlineWidth: 3,

static/js/layers/gdelt.js

@@ -47,7 +47,7 @@ const GdeltLayer = {
                 self._dataSource.entities.add({
                     position: Cesium.Cartesian3.fromDegrees(c[0], c[1]),
                     point: {
-                        pixelSize: 5,
+                        pixelSize: 7,
                         color: Cesium.Color.fromCssColorString('#ff8800'),
                         outlineColor: Cesium.Color.fromCssColorString('#663300'),
                         outlineWidth: 1,

static/js/layers/infra.js

@@ -23,7 +23,7 @@ const InfraLayer = {
         .then(function(data) {
             var yellow = Cesium.Color.fromCssColorString('#ffdd00');
             (data.plants || []).forEach(function(p) {
-                self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 5, color: yellow,
+                self._points.add({ position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), pixelSize: 7, color: yellow,
                     outlineColor: Cesium.Color.fromCssColorString('#ff8800'), outlineWidth: 2 });
                 self._labels.add({
                     position: Cesium.Cartesian3.fromDegrees(p.lon, p.lat, 0), text: p.name,
@@ -47,7 +47,7 @@ const InfraLayer = {
         .then(function(data) {
             var red = Cesium.Color.fromCssColorString('#ff4444');
             (data.bases || []).forEach(function(b) {
-                self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 4, color: red,
+                self._points.add({ position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), pixelSize: 6, color: red,
                     outlineColor: Cesium.Color.fromCssColorString('#aa0000'), outlineWidth: 1 });
                 self._labels.add({
                     position: Cesium.Cartesian3.fromDegrees(b.lon, b.lat, 0), text: b.name,

static/js/layers/iss.js

@@ -7,7 +7,7 @@ const ISSLayer = {
         this._entity = viewer.entities.add({
             name: 'ISS - International Space Station',
             position: Cesium.Cartesian3.fromDegrees(0, 0, 420000),
-            point: { pixelSize: 10, color: Cesium.Color.fromCssColorString('#ff4444'),
+            point: { pixelSize: 14, color: Cesium.Color.fromCssColorString('#ff4444'),
                 outlineColor: Cesium.Color.WHITE, outlineWidth: 2 },
             label: { text: 'ISS', font: '12px monospace bold',
                 fillColor: Cesium.Color.fromCssColorString('#ff4444'),

static/js/layers/military.js

@@ -71,7 +71,7 @@ const MilitaryLayer = {
         for (var i = 0; i < this._data.length; i++) {
             var a = this._data[i];
             var altM = (a.alt_baro || 10000) * 0.3048;
-            this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 4, color: red });
+            this._points.add({ position: Cesium.Cartesian3.fromDegrees(a.lon, a.lat, altM), pixelSize: 6, color: red });
             var cs = a.flight || a.reg || '';
             if (cs) {
                 this._labels.add({

static/js/layers/monitor.js

@@ -126,7 +126,7 @@ const MonitorLayer = {
             var p = f.properties;
             var color = colors[p.category] || colors.mentioned;
             var count = p.article_count || 1;
-            var size = Math.min(Math.max(Math.sqrt(count) * 2.5, 4), 14);
+            var size = Math.min(Math.max(Math.sqrt(count) * 3, 6), 18);
             this._points.add({
                 position: Cesium.Cartesian3.fromDegrees(coords[0], coords[1], 1000),
                 pixelSize: size, color: color,

static/js/layers/ships.js

@@ -120,7 +120,7 @@ const ShipsLayer = {
             count++;
             var colorStr = this._getColor(cat);
             var color = Cesium.Color.fromCssColorString(colorStr);
-            var r = level === 'close' ? 3 : level === 'medium' ? 2.5 : 2;
+            var r = level === 'close' ? 5 : level === 'medium' ? 4 : 3;
 
             this._points.add({
                 position: Cesium.Cartesian3.fromDegrees(s.lon, s.lat, 0),