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);
-    height: auto;
-    aspect-ratio: 1 / 1;
+    position: absolute;
+    inset: 0;
+    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%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: min(100%, 980px);
-    height: auto;
-    aspect-ratio: 1 / 1;
+    inset: 0;
+    width: 100%;
+    height: 100%;
     pointer-events: none;
     z-index: 1;
 }