Refactor and enhance styling for spirit info component

node/server/public/index.html

@@ -14,32 +14,30 @@
   }
   </script>
   <style>
-    html, body {
+html, body {
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background: #000;
-    }
-    #viewer {
+}
+#viewer {
   position: fixed;
   inset: 0;
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   background: #000;
-      /* border-radius:15px; // Optional */
-    }
-    canvas {
+}
+canvas {
   display: block;
   position: absolute;
   left: 50%; top: 50%;
   transform: translate(-50%, -50%);
-      /* width/height wird von JS gesetzt */
-      /* Wichtig: Keine max-width/max-height */
-    }
-  #spirit-info {
+}
+
+#spirit-info {
   box-sizing: border-box;
   position: fixed;
   overflow-x: hidden;
@@ -51,38 +49,40 @@
   border-radius: 18px;
   font-family: 'Segoe UI', sans-serif;
   box-shadow: 0 12px 64px #000a;
-    width: 600px;                /* Feste Standard-Breite Desktop */
-    max-width: calc(100vw - 48px); /* Mindestens 24px Abstand außen */
+  width: 600px;
+  max-width: calc(100vw - 48px);
   min-width: 320px;
   height: auto;
-    max-height: calc(100vh - 48px); /* Mindestens 24px Abstand oben/unten */
+  max-height: calc(100dvh - 48px); /* Besser: dynamic viewport height */
   overflow-y: auto;
   padding: 40px 36px 32px 36px;
   z-index: 9999;
   margin: 0;
-  }
+}
 
-  .spirit-info-flex {
+.spirit-info-flex {
   display: flex;
   flex-direction: column;
   gap: 18px;
-  }
-  #spirit-info h2 {
+}
+
+#spirit-info h2 {
   margin: 0 0 8px 0;
   font-weight: 700;
   letter-spacing: 0.04em;
   font-size: 1.6em;
   white-space: normal;
-    word-break: keep-all;      /* <- Bricht NUR bei Leerzeichen */
+  word-break: keep-all;
   overflow-wrap: normal;
-  }
+}
 
-  @media (min-width: 620px) {
+/* "Desktop" und Mobile-Landscape (breit genug) */
+@media (min-width: 620px) and (orientation: landscape) {
   #spirit-info {
     width: 600px;
-      max-width: calc(100vw - 64px); /* Noch etwas mehr Abstand bei großem Screen */
+    max-width: calc(100vw - 64px);
     min-width: 320px;
-      max-height: calc(100vh - 64px);
+    max-height: calc(100dvh - 64px);
     padding: 40px 40px 36px 40px;
   }
   .spirit-info-flex {
@@ -105,21 +105,20 @@
   }
   #spirit-info .spirit-info-content {
     flex: 1 1 0;
-      min-width: 0;             /* !!! Für korrektes Wrapping !!! */
+    min-width: 0;
     max-width: 450px;
     overflow-wrap: break-word;
     word-break: break-word;
-      /* Optionale Optik: */
-      /* padding-left: 16px; */
-    }
   }
+}
 
-  @media (max-width: 619px), (pointer: coarse) {
+/* "Mobile Portrait" (Hochformat und schmal) */
+@media (max-width: 619px), (orientation: portrait) {
   #spirit-info {
     width: 90vw;
     max-width: 98vw;
     min-width: 0;
-      max-height: 80vh;
+    max-height: 80dvh; /* dynamic viewport height */
     padding: 8vw 4vw 4vw 4vw;
   }
   .spirit-info-flex {
@@ -143,7 +142,6 @@
     min-width: 0;
     word-break: break-word;
   }
-  }
 }
   </style>
 </head>