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/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 => {