From 085b0b6aa8a2ea70faeccf4e46517f694a519e1b Mon Sep 17 00:00:00 2001
From: Thomas <dornbirn@gmx.at>
Date: Tue, 25 Aug 2026 21:43:30 +0200
Subject: [PATCH] Sonnensystem-Header-Fixes: Pille-Breite, obs-launcher, eigene
 Icons

- Komponente: .ggs-header--float bekommt display:flex (war auf design-
  system.css angewiesen) -> behebt volle-Breite-Pille bei Sims ohne
  design-system (Sonnensystem).
- obs-launcher (Aufgaben/Info) unter den Header (top 64, links 268).
- Eigene SVG-Icons: Leichte-Sprache (Textseite), Lights (Gluehbirne),
  Theme (Sonne/Mond-Umschaltung) statt Emoji.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 App/assets/css/ggs-header.css   |  2 ++
 App/sims/sonnensystem/game.html | 12 +++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/App/assets/css/ggs-header.css b/App/assets/css/ggs-header.css
index 484b964..09b32cd 100644
--- a/App/assets/css/ggs-header.css
+++ b/App/assets/css/ggs-header.css
@@ -12,6 +12,8 @@
 
 /* Werte 1:1 aus admin-styleguide.html (Entwurf B, von Thomas bestätigt) */
 .ggs-header--float {
+  display: flex !important;          /* selbsttragend, auch ohne design-system.css */
+  align-items: center;
   background: transparent !important;
   border-bottom: none !important;
   height: auto !important;
diff --git a/App/sims/sonnensystem/game.html b/App/sims/sonnensystem/game.html
index 4d77594..87ec9c5 100644
--- a/App/sims/sonnensystem/game.html
+++ b/App/sims/sonnensystem/game.html
@@ -485,7 +485,7 @@
      ===================================================== */
   #obs-launcher {
     position: absolute;
-    top: 12px; left: 304px;   /* direkt rechts vom UI-Panel (280 px breit + 12 px Margin) */
+    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 {
@@ -824,9 +824,9 @@
     <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="light-toggle" class="icon-btn" title="Lights on">💡</button>
-    <button id="theme-toggle" class="icon-btn" title="Light/dark UI">☀️</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>
@@ -2167,9 +2167,11 @@ function setHighContrast(on) {
   sunLight.intensity     = on ? 2.8  : 2.2;
 }
 
+const _sunSvg  = '<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>';
+const _moonSvg = '<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14.5A8 8 0 0 1 9.5 4 7 7 0 1 0 20 14.5z"/></svg>';
 themeToggle.addEventListener('click', () => {
   const isLight = uiPanel.classList.toggle('light');
-  themeToggle.textContent = isLight ? '🌙' : '☀️';
+  themeToggle.innerHTML = isLight ? _moonSvg : _sunSvg;
   setHighContrast(isLight);
 });