From 72f6b968cee88242984214afed1b930cd24066ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20M=C3=BCller?= <ich@eskimue.de>
Date: Wed, 15 Jul 2026 08:36:42 +0200
Subject: [PATCH] Info-Kasten auf Sonnenfinsternis-Seite ein-/ausklappbar
 machen

Der Infokasten oben rechts blockierte auf kleinen Bildschirmen zu viel
von der 3D-Ansicht; ein Toggle-Button erlaubt jetzt das Einklappen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/css/style.css        | 44 +++++++++++++++++++++++++++++++++++++
 public/sonnenfinsternis.php | 18 ++++++++++++---
 2 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 8167aaf..e4b63d1 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -4845,6 +4845,50 @@ body.solarsystem-page:not(.jupitersystem-page) .solarsystem-stage-wrap {
     line-height: 1.4;
 }
 
+/* Info panel: ein-/ausklappbar */
+.eclipse-info-panel {
+    padding-top: 2.4rem;
+}
+
+.eclipse-info-toggle {
+    position: absolute;
+    top: 0.55rem;
+    right: 0.55rem;
+    width: 1.6rem;
+    height: 1.6rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(201, 168, 76, 0.08);
+    border: 1px solid rgba(201, 168, 76, 0.25);
+    border-radius: 6px;
+    color: var(--gold-pale);
+    cursor: pointer;
+    line-height: 1;
+    font-size: 0.75rem;
+}
+
+.eclipse-info-toggle:hover {
+    background: rgba(201, 168, 76, 0.18);
+}
+
+.eclipse-info-toggle-icon {
+    display: inline-block;
+    transition: transform 0.2s;
+}
+
+.eclipse-info-panel.is-collapsed .eclipse-info-toggle-icon {
+    transform: rotate(-90deg);
+}
+
+.eclipse-info-panel.is-collapsed .eclipse-info-body {
+    display: none;
+}
+
+.eclipse-info-panel.is-collapsed {
+    padding: 0.55rem 0.6rem;
+}
+
 /* View toggle */
 .eclipse-view-toggle {
     position: absolute;
diff --git a/public/sonnenfinsternis.php b/public/sonnenfinsternis.php
index d664fcb..cdff16c 100644
--- a/public/sonnenfinsternis.php
+++ b/public/sonnenfinsternis.php
@@ -77,8 +77,13 @@ $userAlt = isset($currentLocation['elevation']) ? (float)$currentLocation['eleva
         Distanzen stark komprimiert<br>Größenverhältnisse für die Anschauung angepasst
       </div>
 
-      <div class="solarsystem-info-panel" id="eclipseInfoPanel">
-        <div class="eclipse-info-empty">Wähle eine Finsternis aus der Liste</div>
+      <div class="solarsystem-info-panel eclipse-info-panel" id="eclipseInfoPanel">
+        <button type="button" class="eclipse-info-toggle" id="eclipseInfoToggle" aria-expanded="true" aria-controls="eclipseInfoBody" title="Ein-/Ausklappen">
+          <span class="eclipse-info-toggle-icon">▾</span>
+        </button>
+        <div class="eclipse-info-body" id="eclipseInfoBody">
+          <div class="eclipse-info-empty">Wähle eine Finsternis aus der Liste</div>
+        </div>
       </div>
 
       <div class="eclipse-timeline" id="eclipseTimeline">
@@ -132,6 +137,8 @@ const MEAN_MOON_DIST_AU = 384400 / AE.KM_PER_AU;
 const canvas3d = document.getElementById('eclipseCanvas');
 const stageWrap = document.getElementById('eclipseStageWrap');
 const infoPanel = document.getElementById('eclipseInfoPanel');
+const infoBody = document.getElementById('eclipseInfoBody');
+const infoToggleBtn = document.getElementById('eclipseInfoToggle');
 const timelineBar = document.getElementById('eclipseTimelineBar');
 const tlCursor = document.getElementById('eclipseTimelineCursor');
 const tlDisplay = document.getElementById('eclipseTimeDisplay');
@@ -1013,7 +1020,7 @@ function renderInfo() {
   const centralLon = ec.longitude !== undefined && ec.longitude !== null ? `${ec.longitude.toFixed(2)}°` : '—';
   const distance = ec.distance !== undefined && ec.distance !== null ? `${Math.round(ec.distance)} km` : '—';
 
-  infoPanel.innerHTML = `
+  infoBody.innerHTML = `
     <div class="eclipse-info-type ${tc}">${tl}</div>
     <div class="eclipse-info-date">${ds}</div>
     <div class="eclipse-info-time">${ts}</div>
@@ -1261,6 +1268,11 @@ function setupInteraction() {
   }
 
   document.getElementById('eclipseSearchBtn').addEventListener('click', searchEclipses);
+
+  infoToggleBtn.addEventListener('click', () => {
+    const collapsed = infoPanel.classList.toggle('is-collapsed');
+    infoToggleBtn.setAttribute('aria-expanded', String(!collapsed));
+  });
 }
 
 init().catch(err => {