From 6135dd26487f95150707282eecbba9ef62fbc97f Mon Sep 17 00:00:00 2001
From: Thomas <dornbirn@gmx.at>
Date: Tue, 25 Aug 2026 16:23:12 +0200
Subject: [PATCH] Busfahrt: Vollbreite-Header (Logo/Haus links, Rest rechts),
 Karten nach unten, eigenes Kartennamen-Icon

- Header wieder Vollbreite: Pille+Home links, Steuerung rechts.
- Auftrags-Card (.bf-order) + Info-Card (.bf-info) top 8 -> 64 (unter den
  rechten Buttons, keine Ueberlappung).
- Beschriftung-ein/aus (black-map-toggle): eigenes Tag-SVG statt Emoji
  (an = Tag, aus = Tag durchgestrichen), auch in applyTileVariant.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 App/sims/busfahrt/game.html | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/App/sims/busfahrt/game.html b/App/sims/busfahrt/game.html
index 24d980d..e8467d1 100644
--- a/App/sims/busfahrt/game.html
+++ b/App/sims/busfahrt/game.html
@@ -37,10 +37,9 @@
 
   /* ===== Topbar ===== */
   .ggs-topbar {
-    position: absolute; top: 8px; left: 8px; z-index: 1001;
+    position: absolute; top: 8px; left: 8px; right: 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) */
@@ -116,7 +115,7 @@
 
   /* ===== Auftrags-Card (oben rechts) ===== */
   .bf-order {
-    position: absolute; top: 8px; right: 8px; z-index: 1000;
+    position: absolute; top: 64px; right: 8px; z-index: 1000;
     background: #fff; border-radius: 12px;
     box-shadow: var(--bf-shadow);
     padding: 12px 14px;
@@ -347,7 +346,7 @@
 
   /* ===== InfoCard mit Marge-Erklärung ===== */
   .bf-info {
-    position: absolute; top: 8px; right: 8px; z-index: 1000;
+    position: absolute; top: 64px; right: 8px; z-index: 1000;
     background: #fff; border-radius: 12px;
     box-shadow: 0 4px 18px rgba(0,0,0,0.22);
     padding: 14px 14px 12px;
@@ -614,6 +613,7 @@
 <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-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">
@@ -625,7 +625,7 @@
     </div>
     <button class="bf-toggle active" id="audio-toggle" onclick="toggleAudio()" title="Ton (SFX) ein/aus" aria-label="Ton umschalten">🔊</button>
     <button class="bf-toggle" id="btn-info" onclick="if(window.GGS_TUTORIAL&&typeof window.GGS_TUTORIAL.replay==='function')window.GGS_TUTORIAL.replay();" title="Anleitung nochmal zeigen" aria-label="Anleitung">ℹ</button>
-    <button class="bf-toggle" id="black-map-toggle" onclick="toggleBlackMap()" title="Beschriftung ein/aus" aria-label="Beschriftung umschalten">🏷️</button>
+    <button class="bf-toggle" id="black-map-toggle" onclick="toggleBlackMap()" title="Beschriftung ein/aus" aria-label="Beschriftung umschalten"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12.6 4H18a2 2 0 0 1 2 2v5.4a2 2 0 0 1-.6 1.4l-6.6 6.6a2 2 0 0 1-2.8 0l-4.4-4.4a2 2 0 0 1 0-2.8L11.2 4.6a2 2 0 0 1 1.4-.6z"/><circle cx="15.7" cy="8.3" r="1.4"/></svg></button>
     <button class="bf-toggle" id="map-en-info" onclick="showMapEnglishInfo()" title="Warum ist die Karte auf Englisch?" aria-label="Karte auf Englisch — Erklärung" style="width:auto;padding:0 10px">ℹ️ EN</button>
   </div>
 </div>
@@ -896,7 +896,9 @@ function applyTileVariant() {
   }).addTo(map);
   const btn = document.getElementById('black-map-toggle');
   if (btn) {
-    btn.textContent = useBlank ? '🚫🏷️' : '🏷️';
+    const tag = '<path d="M12.6 4H18a2 2 0 0 1 2 2v5.4a2 2 0 0 1-.6 1.4l-6.6 6.6a2 2 0 0 1-2.8 0l-4.4-4.4a2 2 0 0 1 0-2.8L11.2 4.6a2 2 0 0 1 1.4-.6z"/><circle cx="15.7" cy="8.3" r="1.4"/>';
+    const slash = useBlank ? '<path d="M4.5 4.5l15 15"/>' : '';
+    btn.innerHTML = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">' + tag + slash + '</svg>';
     btn.classList.toggle('active', useBlank);
     btn.title = useBlank ? 'Beschriftung wieder einblenden' : 'Beschriftung ausblenden';
   }