Sonnensystem: einheitliche Kopfzeile oben, #ui + Top-Elemente nach unten

- ggs-header (Overlay) oben: Titel-Pille + Toolbar-Buttons (Home/Reset/BGM/
  Hilfe iconisiert, Easy/Light/Theme als Sim-Buttons) rechts oben.
- Toolbar + Titel aus #ui entfernt; #ui nach unten (top 62).
- Datums-Banner (top 64) und Lupe (top 104, inkl. renderInspect-Offset)
  unter den Header geschoben.
- Komponente: cockpit-link/home, reset-defaults-toggle/reset, help-toggle/
  help, bgm-toggle/music erkannt.

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

App/assets/js/ggs-header.js

@@ -71,11 +71,11 @@
     return null;
   }
   var SOUND_IDS = ['btn-sound', 'btn-mute', 'btnVoiceToggle', 'btnAudioToggle', 'btnAudio', 'audio-toggle', 'btnSound', 'btn-ton', 'btn-audio'];
-  var RESET_IDS = ['btn-reset', 'btnReset', 'btn-restart', 'btn-neustart'];
-  var HELP_IDS  = ['btn-info', 'btnHelp', 'btn-help', 'btn-anleitung', 'btn-hilfe'];
+  var RESET_IDS = ['btn-reset', 'btnReset', 'btn-restart', 'btn-neustart', 'reset-defaults-toggle'];
+  var HELP_IDS  = ['btn-info', 'btnHelp', 'btn-help', 'btn-anleitung', 'btn-hilfe', 'help-toggle'];
   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'];
+  var MUSIC_IDS = ['btnMusic', 'btnMusik', 'music-toggle-btn', 'bgm-toggle'];   // sim-eigener Musik-Toggle
+  var HOME_IDS = ['btnHome', 'btn-home', 'ggs-home-link', 'cockpit-link'];
 
   /* Glyph-Buttons (Ton), die die Sim per textContent umschaltet:
      Icon nach jeder Änderung nachziehen, Mute-Zustand als Icon spiegeln. */

App/sims/sonnensystem/game.html

@@ -4,6 +4,9 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 <title>Sonne · Erde · Mond – Finsternisse</title>
+<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>
 <style>
   html, body {
     margin: 0; padding: 0;
@@ -15,7 +18,7 @@
   canvas { display: block; }
   #ui {
     position: absolute;
-    top: 12px; left: 12px;
+    top: 62px; left: 12px;
     z-index: 10;
     background: rgba(15, 23, 42, .88);
     backdrop-filter: blur(6px);
@@ -52,13 +55,7 @@
   #ui.light #info { border-top-color: #cbd5e1; }
   #ui.light #info .value { color: #b45309; }
   #ui.light #eclipse-badge.none { background: #e2e8f0; color: #475569; }
-  #theme-toggle {
-    position: absolute;
-    top: 14px; right: 14px;
-    padding: 4px 10px;
-    font-size: 12px;
-    z-index: 2;
-  }
+  #theme-toggle { position: static; }
   #ui h3 {
     margin: 0 0 10px 0;
     font-size: 16px;
@@ -342,7 +339,7 @@
   /* ---------- Datums-Banner oben rechts ---------- */
   #date-banner {
     position: absolute;
-    top: 10px; right: 12px;
+    top: 64px; right: 12px;
     z-index: 5;
     background: rgba(15, 23, 42, 0.88);
     color: #fbbf24;
@@ -357,7 +354,7 @@
   /* ---------- Inspect-Inset (Lupe + Wien-Sicht) — unter Datums-Banner ---------- */
   #inspect-frame {
     position: absolute;
-    top: 50px; right: 12px;
+    top: 104px; right: 12px;
     width: 480px; height: 210px;
     border: 2px solid #f59e0b;
     border-radius: 10px;
@@ -821,19 +818,20 @@
 <div id="month-labels" style="position:absolute; inset:0; pointer-events:none"></div>
 <div id="date-banner">📆 1. Jan</div>
 
-<div id="ui">
-  <h3>☀️ 🌍 🌙 <span data-i18n="title">Sonnensystem</span></h3>
-
-  <div class="ui-toolbar">
+<header class="ggs-header" data-ggs-sim="sonnensystem" data-ggs-home="/schueler" data-ggs-overlay="1">
+  <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="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">📖</button>
+    <button id="easy-toggle" class="icon-btn" title="Leichte Sprache">📖</button>
     <button id="light-toggle" class="icon-btn" title="Lights on">💡</button>
     <button id="theme-toggle" class="icon-btn" title="Light/dark UI">☀️</button>
-    <button id="help-toggle"  class="icon-btn" title="Help">❓</button>
+    <button id="help-toggle" class="icon-btn" title="Help">❓</button>
   </div>
+</header>
 
+<div id="ui">
   <details class="section" open>
     <summary>⏱️ <span data-i18n="secTime">Time</span></summary>
     <div class="section-body">
@@ -2986,7 +2984,7 @@ function renderInspect() {
   // CSS-Frame-Position: top:50px, right:12px (siehe #inspect-frame im <style>).
   // Three.js misst y von unten — also umrechnen, sonst rutscht der Render-Inhalt
   // gegen den Frame-Border (Mond ragt sichtbar oben heraus).
-  const cssTop   = 50;
+  const cssTop   = 104;
   const cssRight = 12;
   const x           = window.innerWidth  - w - cssRight;
   const yFromBottom = window.innerHeight - h - cssTop;