Fix: Karte CSS-Filter statt CartoDB Dark, Social Wrapper 860px

Karte Dark-Mode:
- CSS-Filter statt CartoDB Dark Matter (war zu dunkel)
  invert(93%) hue-rotate(180deg) brightness(0.88) contrast(0.88) saturate(0.85)
  Gleiche OSM-Tiles, Marker bleiben unbeeinflusst (tilePane separater Layer)
- Filter sofort bei Init + bei Theme-Wechsel via MutationObserver

Social:
- Outer Wrapper width:100%;max-width:860px;margin:0 auto
  Header-Karte und Tabs sind jetzt konsistent gleich breit
SW by-v1023, APP_VER 1023

backend/static/js/app.js

@@ -3,7 +3,7 @@
    Router, State-Management, Navigation, Initialisierung.
    ============================================================ */
 
-const APP_VER     = '1022'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
+const APP_VER     = '1023'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
 const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
 const IS_STAGING  = location.hostname === 'staging.banyaro.app';
 // Cache-Bust-Parameter nach Update-Reload sofort entfernen

backend/static/js/pages/map.js

@@ -533,7 +533,10 @@ window.Page_map = (() => {
     _tileLayer = _buildTileLayer();
     _tileLayer.addTo(_map);
 
-    // Theme-Wechsel → Tile-Layer tauschen
+    // Sofort Dark-Filter anwenden wenn nötig (nach Tile-Load)
+    _tileLayer.on('load', _applyTileTheme);
+    _applyTileTheme();
+    // Theme-Wechsel → Filter aktualisieren
     _themeObserver = new MutationObserver(() => _applyTileTheme());
     _themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', _applyTileTheme);
@@ -629,28 +632,17 @@ window.Page_map = (() => {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
   }
 
+  const _OSM_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+  const _DARK_FILTER = 'invert(93%) hue-rotate(180deg) brightness(0.88) contrast(0.88) saturate(0.85)';
+
   function _buildTileLayer() {
-    if (_isDarkMode()) {
-      return L.tileLayer(
-        'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
-        { maxZoom: 19, subdomains: 'abcd' }
-      );
-    }
-    return L.tileLayer(
-      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-      { maxZoom: 19 }
-    );
+    return L.tileLayer(_OSM_URL, { maxZoom: 19 });
   }
 
   function _applyTileTheme() {
-    if (!_map || !window.L) return;
-    const dark = _isDarkMode();
-    const url  = dark
-      ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-      : 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
-    if (_tileLayer) {
-      _tileLayer.setUrl(url);
-    }
+    if (!_map) return;
+    const tilePaneEl = _map.getPane('tilePane');
+    if (tilePaneEl) tilePaneEl.style.filter = _isDarkMode() ? _DARK_FILTER : '';
   }
 
   function _updateZoomDisplay() {

backend/static/js/pages/social.js

@@ -43,6 +43,7 @@ window.Page_social = (() => {
   function _render() {
     const lvlBar = _stats ? _levelBar(_stats) : '';
     _el.innerHTML = `
+      <div style="width:100%;max-width:860px;margin:0 auto">
       <div style="background:var(--c-surface);border-radius:var(--radius-lg);
                   box-shadow:var(--shadow-sm);padding:var(--space-4);
                   margin-bottom:var(--space-4)">
@@ -71,7 +72,8 @@ window.Page_social = (() => {
             color:${_activeTab===t?'var(--c-primary)':'var(--c-text-secondary)'}">
             ${l}</button>`).join('')}
       </div>
-      <div id="sm-content"></div>`;
+      <div id="sm-content"></div>
+      </div>`;
 
     _el.querySelectorAll('.sm-tab').forEach(b =>
       b.addEventListener('click', () => { _activeTab = b.dataset.tab; _render(); }));