Sonnensystem: Umbenennung + Lupe mit 3 Stufen (iPad)

- Titel Himmelsmechanik -> Sonnensystem.
- Lupe (#inspect-frame) in 3 Stufen 100/50/25 % ueber Eck-Griff unten
  rechts: Frame-Groesse (CSS) + Render-Groesse (lupeScale in renderInspect)
  synchron -> Inhalt schrumpft mit. Behebt die riesige Lupe am iPad.

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

App/sims/sonnensystem/game.html

@@ -386,6 +386,26 @@
     font-weight: 700;
     pointer-events: none;
   }
+  /* Lupe: 3 Stufen (100/50/25 %), Frame verkleinert sich zur oben-rechts-Ecke */
+  #inspect-frame { transition: width .2s ease, height .2s ease; }
+  #inspect-frame.sc-50 { width: 240px; height: 105px; }
+  #inspect-frame.sc-25 { width: 120px; height: 52px; }
+  #inspect-frame.austria.sc-50 { width: 140px; height: 140px; }
+  #inspect-frame.austria.sc-25 { width: 70px;  height: 70px; }
+  /* Eck-Element zum Umschalten der Lupengröße (unten rechts in der Lupe) */
+  #inspect-resize {
+    position: absolute; bottom: 6px; right: 6px;
+    width: 26px; height: 26px; z-index: 6;
+    display: inline-flex; align-items: center; justify-content: center;
+    background: rgba(245, 158, 11, 0.92); color: #1e293b; border: none; border-radius: 7px;
+    cursor: pointer; pointer-events: auto;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.45);
+  }
+  #inspect-resize svg { width: 16px; height: 16px; }
+  #inspect-resize:active { transform: scale(0.92); }
+  /* bei kleinster Stufe etwas kompakter, damit der Griff nicht die Lupe verdeckt */
+  #inspect-frame.sc-25 #inspect-resize { width: 20px; height: 20px; bottom: 3px; right: 3px; }
+  #inspect-frame.sc-25 #inspect-resize svg { width: 12px; height: 12px; }
   /* ---------- Info-Karte ---------- */
   #info-card {
     position: absolute;
@@ -799,7 +819,7 @@
 <div id="date-banner">📆 1. Jan</div>
 
 <div id="ui">
-  <h3>☀️ 🌍 🌙 <span data-i18n="title">Celestial Mechanics</span></h3>
+  <h3>☀️ 🌍 🌙 <span data-i18n="title">Sonnensystem</span></h3>
 
   <div class="ui-toolbar">
     <a id="cockpit-link" href="/schueler" class="icon-btn" title="Zurück zur Schülerseite" style="text-decoration:none">🏠</a>
@@ -966,6 +986,7 @@
 <!-- Lupen-Inset (Mini-Renderer) -->
 <div id="inspect-frame">
   <div id="inspect-title">🔍 –</div>
+  <button id="inspect-resize" type="button" title="Lupengröße umschalten (100 % · 50 % · 25 %)" aria-label="Lupengröße umschalten"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9V4h5"/><path d="M20 15v5h-5"/><path d="M4 4l6 6"/><path d="M20 20l-6-6"/></svg></button>
 </div>
 
 <div id="info-card">
@@ -2411,7 +2432,7 @@ let easyMode = false;
 
 // I18N-Strings (nur Deutsch — Mehrsprachigkeit entfernt 2026-05-03 auf Thomas-Wunsch)
 const I18N = {
-  title: 'Himmelsmechanik',
+  title: 'Sonnensystem',
   noEclipse: 'keine Finsternis',
   solarEclipse: 'SONNENFINSTERNIS',
   lunarEclipse: 'MONDFINSTERNIS',
@@ -2823,6 +2844,16 @@ function clearTrail() {
 // ===================================================================
 const inspectFrame = document.getElementById('inspect-frame');
 const inspectTitle = document.getElementById('inspect-title');
+const inspectResize = document.getElementById('inspect-resize');
+// Lupe in 3 Stufen: 100 % → 50 % → 25 % (Frame UND Render-Inhalt).
+let lupeScale = 1;
+inspectResize.addEventListener('click', (e) => {
+  e.stopPropagation();
+  inspectFrame.classList.remove('sc-50', 'sc-25');
+  if (lupeScale === 1)        { lupeScale = 0.5;  inspectFrame.classList.add('sc-50'); }
+  else if (lupeScale === 0.5) { lupeScale = 0.25; inspectFrame.classList.add('sc-25'); }
+  else                        { lupeScale = 1; }
+});
 const _inspectPos = new THREE.Vector3();
 let _inspectInfoShown = false;
 
@@ -2947,8 +2978,8 @@ function renderInspect() {
   }
 
   const isAustria = inspectTarget === 'austria';
-  const w = isAustria ? 280 : 480;
-  const h = isAustria ? 280 : 210;
+  const w = (isAustria ? 280 : 480) * lupeScale;
+  const h = (isAustria ? 280 : 210) * lupeScale;
   // 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).