From ff91c489f70a98d6ebf28bcd2a1e5444a314bce3 Mon Sep 17 00:00:00 2001
From: Thomas <dornbirn@gmx.at>
Date: Tue, 25 Aug 2026 22:39:37 +0200
Subject: [PATCH] Sonnensystem: Aufgaben + Onboarding-Info in den Header
 (eigene Icons)

- obs-open-btn (Aufgaben, Klemmbrett-Icon) + obs-help-btn (Onboarding,
  Info-i-Icon) in den Header vor die Musik verschoben; obs-launcher weg.
- Redundantes help-toggle (moonTilt-?) aus dem Header entfernt, Handler
  null-sicher (moonTilt weiter ueber Inline-? in der Mondbahn-Sektion).
- obs-Pill-CSS neutralisiert (Header-Stil greift).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 App/sims/sonnensystem/game.html | 41 ++++++---------------------------
 1 file changed, 7 insertions(+), 34 deletions(-)

diff --git a/App/sims/sonnensystem/game.html b/App/sims/sonnensystem/game.html
index 87ec9c5..ef79594 100644
--- a/App/sims/sonnensystem/game.html
+++ b/App/sims/sonnensystem/game.html
@@ -483,22 +483,7 @@
   /* =====================================================
      Beobachtungs-Modus — Overlay + Launcher
      ===================================================== */
-  #obs-launcher {
-    position: absolute;
-    top: 64px; left: 268px;   /* unter dem Header, rechts vom UI-Panel (244 px + 12 px Margin) */
-    z-index: 11;              /* über dem UI-Panel (z-index 10) */
-  }
-  #obs-open-btn {
-    background: #3d2c8d; color: #fbbf24;
-    border: 2px solid #fbbf24;
-    border-radius: 24px;
-    padding: 10px 18px;
-    font-size: 14px; font-weight: 700;
-    cursor: pointer;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-    min-height: 44px;
-  }
-  #obs-open-btn:active { background: #2d1f6c; }
+  #obs-open-btn { cursor: pointer; }   /* sitzt jetzt im Header (Komponente stylt) */
 
   #obs-overlay {
     position: fixed; inset: 0;
@@ -664,18 +649,7 @@
   body.obs-watching #obs-card p { font-size: 13px; }
   body.obs-watching #obs-close { display: none; }
 
-  /* === Help-Button im obs-launcher === */
-  #obs-help-btn {
-    background: #fff; color: #3d2c8d;
-    border: 2px solid #3d2c8d;
-    border-radius: 999px;
-    width: 38px; height: 38px;
-    font-size: 18px; font-weight: 700;
-    cursor: pointer;
-    margin-right: 6px;
-    box-shadow: 0 2px 8px rgba(0,0,0,.18);
-  }
-  #obs-help-btn:hover { background: #f0ecff; }
+  #obs-help-btn { cursor: pointer; }   /* sitzt jetzt im Header (Komponente stylt) */
 
   /* === Glossar-Begriffe (Tooltip / Click-Popup) === */
   .sn-glossar-term {
@@ -822,12 +796,13 @@
   <span class="ggs-header-module">Sonnensystem</span>
   <div class="ggs-header-actions">
     <a id="cockpit-link" href="/schueler" class="icon-btn" title="Zurück zur Schülerseite" style="text-decoration:none">🏠</a>
+    <button id="obs-open-btn" class="icon-btn" title="Aufgaben-Modus starten"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="4" width="14" height="17" rx="2"/><path d="M9 4V3.2A1.2 1.2 0 0 1 10.2 2h3.6A1.2 1.2 0 0 1 15 3.2V4"/><path d="M8.5 12l2.2 2.2L15 10"/></svg></button>
+    <button id="obs-help-btn" class="icon-btn" title="Onboarding nochmal anzeigen"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M12 11v5"/><circle cx="12" cy="7.7" r=".75" fill="currentColor" stroke="none"/></svg></button>
     <button id="reset-defaults-toggle" class="icon-btn" title="Standard-Setup wiederherstellen">🔄</button>
     <button id="bgm-toggle" class="icon-btn" title="Hintergrund-Klang an/aus">🎵</button>
     <button id="easy-toggle" class="icon-btn" title="Leichte Sprache"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="3.5" width="16" height="17" rx="2.5"/><path d="M8 9h8M8 13h8M8 17h4"/></svg></button>
     <button id="light-toggle" class="icon-btn" title="Lights on"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6"/><path d="M10 21h4"/><path d="M12 3a6 6 0 0 0-3.8 10.7c.5.4.8 1 .8 1.6V16h6v-.7c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3z"/></svg></button>
     <button id="theme-toggle" class="icon-btn" title="Light/dark UI"><svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2.5v2.3M12 19.2v2.3M4.6 4.6l1.7 1.7M17.7 17.7l1.7 1.7M2.5 12h2.3M19.2 12h2.3M4.6 19.4l1.7-1.7M17.7 6.3l1.7-1.7"/></svg></button>
-    <button id="help-toggle" class="icon-btn" title="Help">❓</button>
   </div>
 </header>
 
@@ -1006,10 +981,7 @@
 <!-- =================================================================== -->
 <!--           BEOBACHTUNGS-MODUS — Aufgaben-Overlay                     -->
 <!-- =================================================================== -->
-<div id="obs-launcher">
-  <button id="obs-help-btn"  title="Onboarding nochmal anzeigen" type="button">❔</button>
-  <button id="obs-open-btn"  title="Aufgaben-Modus starten">📚 Aufgaben</button>
-</div>
+<!-- Aufgaben- + Onboarding-Button sind jetzt im Header (ggs-header) -->
 
 <!-- Onboarding-Modal (4 Schritte mit interaktiven SVG-Bildern) -->
 <div id="sn-onboard" class="sn-overlay" hidden role="dialog" aria-labelledby="snOnbTitle">
@@ -2636,7 +2608,8 @@ easyTop.addEventListener('click', () => {
 });
 
 // Help-Button: Mondbahn-Erklärung
-document.getElementById('help-toggle').addEventListener('click', () => showInfo('moonTilt'));
+const _helpToggleBtn = document.getElementById('help-toggle');
+if (_helpToggleBtn) _helpToggleBtn.addEventListener('click', () => showInfo('moonTilt'));
 
 // ===================================================================
 //                  💡 LICHT-AN-MODUS