From 6009eabca173f152384babd3543ddaa1ca5d7007 Mon Sep 17 00:00:00 2001
From: Thomas <dornbirn@gmx.at>
Date: Tue, 25 Aug 2026 17:46:46 +0200
Subject: [PATCH] ggs-header: Tourismustal + Tourismusregion (Batch 2)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Komponente: btnHome/⌂-Erkennung (ganzer Header durchsucht), sim-eigener
  Musik-Toggle (btnMusic) -> Musik-Icon, Panel-Optik (blur/shadow/radius)
  gestrippt fuer Sims mit .panel-Leiste.
- Beide Tourismus-Sims: topbar -> ggs-header (Klassen additiv, alle IDs +
  ui.js-Bindings erhalten), Tempo-Popover ueber .ggs-speed, Musik bleibt
  eigenes Panel (btnMusic oeffnet es). ggs-header.css vor style.css fuer
  position:fixed.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 App/assets/css/ggs-header.css      |  6 ++++++
 App/assets/js/ggs-header.js        | 20 +++++++++++++-------
 App/sims/tourismusregion/game.html | 21 ++++++++++++---------
 App/sims/tourismustal/game.html    | 19 +++++++++++--------
 4 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/App/assets/css/ggs-header.css b/App/assets/css/ggs-header.css
index 446d732..782ac33 100644
--- a/App/assets/css/ggs-header.css
+++ b/App/assets/css/ggs-header.css
@@ -22,6 +22,12 @@
   z-index: 1000;
   flex-wrap: nowrap;
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  /* Falls die Sim-Leiste ein Panel-Styling mitbringt (blur/shadow/radius):
+     strippen, damit nur die einzelnen schwebenden Pillen sichtbar sind. */
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
 }
 
 /* Overlay-Modus: Zeile schwebt über Vollbild-Canvas (Heli, Tourismus …).
diff --git a/App/assets/js/ggs-header.js b/App/assets/js/ggs-header.js
index ab5277a..870cf42 100644
--- a/App/assets/js/ggs-header.js
+++ b/App/assets/js/ggs-header.js
@@ -74,6 +74,8 @@
   var RESET_IDS = ['btn-reset', 'btnReset', 'btn-restart', 'btn-neustart'];
   var HELP_IDS  = ['btn-info', 'btnHelp', 'btn-help', 'btn-anleitung', 'btn-hilfe'];
   var GLOSSAR_IDS = ['glossar-btn', 'btn-glossar', 'btnGlossar', 'btnGlossary'];
+  var MUSIC_IDS = ['btnMusic', 'btnMusik', 'music-toggle-btn'];   // sim-eigener Musik-Toggle (öffnet eigenes Panel)
+  var HOME_IDS = ['btnHome', 'btn-home', 'ggs-home-link'];
 
   /* Glyph-Buttons (Ton), die die Sim per textContent umschaltet:
      Icon nach jeder Änderung nachziehen, Mute-Zustand als Icon spiegeln. */
@@ -166,13 +168,16 @@
     var tick = header.querySelector('.kw-tick-dot'); if (tick) pille.appendChild(tick);
 
     /* --- 2) Home-Button links neben die Pille ----------------- */
-    var homeBtn = null;
-    var acts = header.querySelectorAll('.ggs-header-actions a, .ggs-header-actions button');
-    for (var h = 0; h < acts.length; h++) {
-      var a = acts[h];
-      var href = a.getAttribute('href') || '';
-      if (a.id === 'btn-info' || a.id === 'btn-sound' || a.id === 'btn-reset' || a.id === 'ggs-lehrplan-link') continue;
-      if (/schueler|cockpit|\/$/.test(href) || (a.textContent || '').indexOf('🏠') >= 0) { homeBtn = a; break; }
+    var homeBtn = byIds(header, HOME_IDS);
+    if (!homeBtn) {
+      var acts = header.querySelectorAll('a, button');
+      for (var h = 0; h < acts.length; h++) {
+        var a = acts[h];
+        var href = a.getAttribute('href') || '';
+        var t = a.textContent || '';
+        if (a.id === 'btn-info' || a.id === 'btn-sound' || a.id === 'btn-reset' || a.id === 'ggs-lehrplan-link') continue;
+        if (/schueler|cockpit|\/$/.test(href) || t.indexOf('🏠') >= 0 || t.indexOf('⌂') >= 0) { homeBtn = a; break; }
+      }
     }
     if (!homeBtn) {
       homeBtn = document.createElement('a');
@@ -199,6 +204,7 @@
     watchGlyphBtn(soundBtn, function (t) { return /🔇|🔈|🔕|off|aus|mute|stumm/i.test(t) ? 'sound-off' : 'sound'; }, 'Ton an/aus');
     setIcon(resetBtn, 'restart', 'Neu starten');
     setIcon(byIds(header, GLOSSAR_IDS), 'glossar');   // sim-interner Glossar/Fachinfo-Button
+    setIcon(byIds(header, MUSIC_IDS), 'music');       // sim-eigener Musik-Toggle (öffnet eigenes Panel)
     var lehrplan = q('#ggs-lehrplan-link'); if (lehrplan) lehrplan.style.display = 'none';
 
     /* --- 4) Tempo-Panel (nur wenn .ggs-speed vorhanden) ------- */
diff --git a/App/sims/tourismusregion/game.html b/App/sims/tourismusregion/game.html
index 60ee4a9..e922d2c 100644
--- a/App/sims/tourismusregion/game.html
+++ b/App/sims/tourismusregion/game.html
@@ -6,24 +6,27 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>Tourismusregion entwickeln – GeoGraSim</title>
 <script>/*__TOURISMUSREGION_INJECTION__*/</script>
+<link rel="stylesheet" href="../../assets/fonts/inter.css">
+<link rel="stylesheet" href="../../assets/css/ggs-header.css">
+<script src="../../assets/js/ggs-header.js"></script>
 <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
 <canvas id="map"></canvas>
 
-<header id="topbar" class="panel">
+<header id="topbar" class="panel ggs-header" data-ggs-sim="tourismusregion" data-ggs-home="../../schueler.html">
   <button id="btnHome" class="icon-btn" title="Zurück zur Übersicht">⌂</button>
-  <h1>Tourismusregion <span class="subtitle">entwickeln</span></h1>
+  <h1 class="ggs-header-module">Tourismusregion <span class="subtitle">entwickeln</span></h1>
   <div id="waveStatus" class="wave-status">Welle 1 vorbereiten…</div>
-  <div class="top-right">
+  <div class="top-right ggs-header-actions">
     <div id="clock" class="clock">Welle 1/8</div>
-    <div class="speed" role="group" aria-label="Zeit">
-      <button data-speed="0" class="icon-btn speed-btn" title="Pause">⏸</button>
-      <button data-speed="1" class="icon-btn speed-btn active" title="Normal">1×</button>
-      <button data-speed="2" class="icon-btn speed-btn" title="Doppelt">2×</button>
-      <button data-speed="3" class="icon-btn speed-btn" title="Dreifach">3×</button>
-      <button data-speed="4" class="icon-btn speed-btn" title="Vierfach">4×</button>
+    <div class="speed ggs-speed" role="group" aria-label="Zeit">
+      <button data-speed="0" class="icon-btn speed-btn ggs-speed-btn" title="Pause">⏸</button>
+      <button data-speed="1" class="icon-btn speed-btn ggs-speed-btn active" title="Normal">1×</button>
+      <button data-speed="2" class="icon-btn speed-btn ggs-speed-btn" title="Doppelt">2×</button>
+      <button data-speed="3" class="icon-btn speed-btn ggs-speed-btn" title="Dreifach">3×</button>
+      <button data-speed="4" class="icon-btn speed-btn ggs-speed-btn" title="Vierfach">4×</button>
     </div>
     <button id="btnLog" class="icon-btn" title="Meldungen">🔔<span id="logBadge" class="badge hidden">0</span></button>
     <button id="btnSound" class="icon-btn" title="Sound an/aus">🔊</button>
diff --git a/App/sims/tourismustal/game.html b/App/sims/tourismustal/game.html
index 68cb4de..24af744 100644
--- a/App/sims/tourismustal/game.html
+++ b/App/sims/tourismustal/game.html
@@ -6,22 +6,25 @@
 <meta name="apple-mobile-web-app-capable" content="yes">
 <title>Tourismustal – GeoGraSim</title>
 <script>/*__TOURISMUSTAL_INJECTION__*/</script>
+<link rel="stylesheet" href="../../assets/fonts/inter.css">
+<link rel="stylesheet" href="../../assets/css/ggs-header.css">
+<script src="../../assets/js/ggs-header.js"></script>
 <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
 
 <canvas id="map"></canvas>
 
-<header id="topbar" class="panel">
+<header id="topbar" class="panel ggs-header" data-ggs-sim="tourismustal" data-ggs-home="../../schueler.html">
   <button id="btnHome" class="icon-btn" title="Zurück zur Übersicht">⌂</button>
-  <h1><span id="valleyTitle">Tourismustal</span> <span id="sceneName"></span></h1>
-  <div class="top-right">
+  <h1 class="ggs-header-module"><span id="valleyTitle">Tourismustal</span> <span id="sceneName"></span></h1>
+  <div class="top-right ggs-header-actions">
     <div id="clock" class="clock"></div>
-    <div class="speed" role="group" aria-label="Zeitskala">
-      <button data-speed="0" class="icon-btn speed-btn" title="Pause">⏸</button>
-      <button data-speed="1" class="icon-btn speed-btn active" title="Normal">1×</button>
-      <button data-speed="2" class="icon-btn speed-btn" title="Schnell">2×</button>
-      <button data-speed="4" class="icon-btn speed-btn" title="Sehr schnell">4×</button>
+    <div class="speed ggs-speed" role="group" aria-label="Zeitskala">
+      <button data-speed="0" class="icon-btn speed-btn ggs-speed-btn" title="Pause">⏸</button>
+      <button data-speed="1" class="icon-btn speed-btn ggs-speed-btn active" title="Normal">1×</button>
+      <button data-speed="2" class="icon-btn speed-btn ggs-speed-btn" title="Schnell">2×</button>
+      <button data-speed="4" class="icon-btn speed-btn ggs-speed-btn" title="Sehr schnell">4×</button>
     </div>
     <button id="btnInfoMode" class="icon-btn" title="Meldungs-Modus umschalten">📖</button>
     <button id="btnLog" class="icon-btn" title="Meldungen">🔔<span id="logBadge" class="badge hidden">0</span></button>