Mondkarte jetzt voll

public/css/style.css

@@ -2191,7 +2191,8 @@ body.moonphase-page.has-modal {
     grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
     gap: 8px;
     align-items: stretch;
-    min-height: calc(100vh - 190px);
+    height: calc(100dvh - 180px);
+    min-height: 400px;
 }
 
 .moon-visual,
@@ -2203,6 +2204,7 @@ body.moonphase-page.has-modal {
 
 .moon-visual {
     align-self: stretch;
+    min-height: 0;
 }
 
 .moon-side {
@@ -2243,6 +2245,7 @@ body.moonphase-page.has-modal {
 .moon-stage {
     position: relative;
     flex: 1;
+    min-height: 0;
     background: rgba(3,3,14,.72);
     border: 1px solid rgba(200,168,75,.08);
     border-radius: 10px;
@@ -2251,12 +2254,14 @@ body.moonphase-page.has-modal {
     align-items: center;
     justify-content: center;
     overflow: hidden;
+    container-type: size;
 }
 
 #moonCanvas {
-    width: min(100%, 980px);
+    position: absolute;
-    height: auto;
+    inset: 0;
-    aspect-ratio: 1 / 1;
+    width: 100%;
+    height: 100%;
     display: block;
     cursor: grab;
     touch-action: none;
@@ -2268,12 +2273,9 @@ body.moonphase-page.has-modal {
 
 #moonCraterOverlay {
     position: absolute;
-    left: 50%;
+    inset: 0;
-    top: 50%;
+    width: 100%;
-    transform: translate(-50%, -50%);
+    height: 100%;
-    width: min(100%, 980px);
-    height: auto;
-    aspect-ratio: 1 / 1;
     pointer-events: none;
     z-index: 1;
 }

public/moonphase.php

@@ -187,10 +187,6 @@ try {
             <span class="moon-stat-label">Libration</span>
             <span class="moon-stat-value" id="librationValue">-</span>
           </div>
-          <div class="moon-stat info-card moon-stat-wide">
-            <span class="moon-stat-label">Ausgew&auml;hlt</span>
-            <span class="moon-stat-value" id="selectedValue">-</span>
-          </div>
         </div>
 
         <div class="moon-controls">
@@ -317,7 +313,6 @@ const phaseName = document.getElementById('phaseName');
 const illuminationValue = document.getElementById('illuminationValue');
 const distanceValue = document.getElementById('distanceValue');
 const ageValue = document.getElementById('ageValue');
-const selectedValue = document.getElementById('selectedValue');
 const librationValue = document.getElementById('librationValue');
 const timeLabel = document.getElementById('timeLabel');
 const dateLabel = document.getElementById('dateLabel');
@@ -907,7 +902,7 @@ async function buildMoonSceneFromUrls(url1, url2) {
 
   moonSceneState = { renderer, scene, camera, moonMesh, sunLight, ambientLight, rimLight };
 
-  resizeMoonScene();
+  resizeMoonCanvas();
   applyMoonZoom();
   renderer.render(scene, camera);
 }
@@ -966,16 +961,30 @@ async function ensureMoonScene() {
   return moonSceneInitPromise;
 }
 
-function resizeMoonScene() {
+function resizeMoonCanvas() {
-  if (!moonSceneState) {
-    return;
-  }
-
   const rect = moonCanvas.getBoundingClientRect();
-  const size = Math.round(Math.max(360, rect.width || 900));
+  const dpr = Math.min(window.devicePixelRatio || 1, 3);
-  moonSceneState.renderer.setSize(size, size, false);
+  const w = Math.round(Math.max(360, rect.width  || 900));
-  moonSceneState.camera.aspect = 1;
+  const h = Math.round(Math.max(360, rect.height || 900));
-  moonSceneState.camera.updateProjectionMatrix();
+
+  if (moonSceneState) {
+    // 3D: Three.js setzt canvas.width/height intern
+    moonSceneState.renderer.setSize(w, h, false);
+    moonSceneState.camera.aspect = w / h;
+    moonSceneState.camera.updateProjectionMatrix();
+  } else {
+    // 2D: canvas-Intrinsic-Größe manuell an die Darstellungsgröße anpassen
+    const pw = Math.round(w * dpr);
+    const ph = Math.round(h * dpr);
+    if (moonCanvas.width !== pw || moonCanvas.height !== ph) {
+      moonCanvas.width  = pw;
+      moonCanvas.height = ph;
+    }
+  }
+}
+
+function resizeMoonScene() {
+  resizeMoonCanvas();
 }
 
 async function renderMoon3D(phaseData, libration) {
@@ -1590,7 +1599,6 @@ async function updateMoon() {
       day: '2-digit', month: '2-digit', year: 'numeric',
       hour: '2-digit', minute: '2-digit', timeZone: 'UTC'
     });
-    selectedValue.innerHTML = `${formatDateTime(selectedDate)} ${getBrowserTimeZone()}<br>${utcString} UTC`;
     librationValue.textContent = formatLibration(libration);
   } catch (error) {
     if (requestSerial !== moonDataRequestSerial) {
@@ -1602,7 +1610,6 @@ async function updateMoon() {
     illuminationValue.textContent = '-';
     distanceValue.textContent = '-';
     ageValue.textContent = '-';
-    selectedValue.innerHTML = `${formatDateTime(selectedDate)} ${getBrowserTimeZone()}<br>-- UTC`;
     librationValue.textContent = '-';
   }
 }
@@ -1752,7 +1759,7 @@ function attachCanvasListeners() {
 
 attachCanvasListeners();
 window.addEventListener('resize', () => {
-  resizeMoonScene();
+  resizeMoonCanvas();
   updateMoon();
 });
 moonExportCloseBtn.addEventListener('click', closeMoonExportDialog);
@@ -1787,6 +1794,7 @@ document.addEventListener('keydown', event => {
 updateMoonExportCustomVisibility();
 setNow();
 updatePlaybackButton();
+resizeMoonCanvas();
 updateMoon();
 updateCraterButtons();
 </script>