Busfahrt v2: Header kompakt-links, Budget/Auftrag nach links, Zoom unten

- Header kompakt links (nicht mehr Vollbreite) -> keine Ueberlappung mit
  der Auftrags-Karte oben rechts.
- Budget aus Header raus (widersprach dem Graph); Graph-Budget-Wert wird
  jetzt live in updateTopbar aktualisiert. updateTopbar null-sicher.
- Auftrag-Nr ins Stats-Panel (links bei den Graphen).
- Leaflet-Zoom nach unten links.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

App/sims/busfahrt/game.html

@@ -37,11 +37,14 @@
 
   /* ===== Topbar ===== */
   .ggs-topbar {
-    position: absolute; top: 8px; left: 8px; right: 8px; z-index: 1001;
+    position: absolute; top: 8px; left: 8px; z-index: 1001;
     display: flex; gap: 8px; align-items: center;
     font-size: 13px; flex-wrap: wrap;
+    max-width: calc(100vw - 16px);
     pointer-events: none;   /* leere Bereiche zur Karte durchlassen */
   }
+  /* Auftrag-Nr im Stats-Panel (links, bei den Graphen) */
+  .bf-stats__order { font-weight: 800; font-size: 14px; color: var(--bf-green); margin-bottom: 8px; }
   .ggs-topbar a {
     text-decoration: none;
     background: #f1ede2; color: var(--bf-ink);
@@ -610,10 +613,7 @@
 <!-- Topbar -->
 <div class="ggs-topbar ggs-header" data-ggs-sim="busfahrt" data-ggs-home="../../schueler.html">
   <h1 class="ggs-header-module">Busfahrt</h1>
-  <span class="bf-budget" id="topbar-budget">💰 5.000 €</span>
-  <span class="bf-counter" id="topbar-counter">—</span>
   <span class="bf-night-pill" id="topbar-night">🌙 Nachtfahrt</span>
-  <div class="ggs-header-spacer"></div>
   <div class="ggs-header-actions">
     <a href="../../schueler.html" title="Zurück zur Schülerseite">🏠</a>
     <div class="ggs-music" id="ggs-music">
@@ -632,6 +632,7 @@
 
 <!-- Stats-Panel (links) -->
 <div class="bf-stats" id="stats-panel">
+  <div class="bf-stats__order"><span id="topbar-counter">—</span></div>
   <div class="bf-stats__chart">
     <div class="bf-stats__head">
       <span class="bf-stats__title">Budget</span>
@@ -880,6 +881,7 @@ const map = L.map('map', {
   center: [40, 20], zoom: 3, minZoom: 2, maxZoom: 8,
   worldCopyJump: true,
 });
+map.zoomControl.setPosition('bottomleft');   // oben links ist die Marken-Pille
 L.control.scale({ position: 'bottomleft', imperial: false, metric: true, maxWidth: 160 }).addTo(map);
 let tileLayer = null;
 let blackMapManual = BLACK_MAP_INITIAL;   // vom User per Toggle gesetzt
@@ -1305,12 +1307,16 @@ async function boot() {
 
 function updateTopbar() {
   if (!game) return;
-  document.getElementById('topbar-budget').textContent = '💰 ' + formatEur(game.budget);
+  // Budget nur noch im Stats-Panel/Graph (live) — kein Widerspruch mehr
+  const sb = document.getElementById('stats-budget-val');
+  if (sb) sb.textContent = formatEur(game.budget);
   const idx = Math.min(game.orderIndex + 1, totalOrders);
-  document.getElementById('topbar-counter').textContent = `Auftrag ${idx} / ${totalOrders}`;
+  const c = document.getElementById('topbar-counter');
+  if (c) c.textContent = `Auftrag ${idx} / ${totalOrders}`;
   // Night-Pill
   const order = game.currentOrder || (game.tourOrders[game.orderIndex] || null);
-  document.getElementById('topbar-night').classList.toggle('show', !!(order && order.isNight));
+  const n = document.getElementById('topbar-night');
+  if (n) n.classList.toggle('show', !!(order && order.isNight));
 }
 
 function startGame() {