Update styles for index.html to improve layout and responsiveness

node/server/public/index.html

@@ -50,58 +50,72 @@
     border-radius: 18px;
     font-family: 'Segoe UI', sans-serif;
     box-shadow: 0 12px 64px #000a;
-    width: 80vw;
-    max-width: 700px;
-    min-width: 0;
-    max-height: 80vh;
+    width: 560px;                /* Feste Standard-Breite Desktop */
+    max-width: calc(100vw - 48px); /* Mindestens 24px Abstand außen */
+    min-width: 320px;
+    height: auto;
+    max-height: calc(100vh - 48px); /* Mindestens 24px Abstand oben/unten */
     overflow-y: auto;
-    padding: 5vw;
+    padding: 40px 36px 32px 36px;
     z-index: 9999;
+    margin: 0;
   }
 
-  /* Flexbox-Grundlayout: IMMER */
   .spirit-info-flex {
     display: flex;
     flex-direction: column;
     gap: 18px;
   }
 
-  /* Desktop: Bild links, Text rechts */
   @media (min-width: 750px) {
+    #spirit-info {
+      width: 560px;
+      max-width: calc(100vw - 64px); /* Noch etwas mehr Abstand bei großem Screen */
+      min-width: 320px;
+      max-height: calc(100vh - 64px);
+      padding: 40px 40px 36px 40px;
+    }
     .spirit-info-flex {
       flex-direction: row;
       align-items: flex-start;
       gap: 32px;
     }
     #spirit-info img {
-      max-width: 320px;
-      max-height: 60vh;
-      width: auto;
+      max-width: 220px;
+      min-width: 120px;
+      width: 35vw;
+      max-height: 45vh;
       height: auto;
       object-fit: contain;
       border-radius: 12px;
+      background: #222;
       flex-shrink: 0;
       margin: 0;
       display: block;
     }
     #spirit-info .spirit-info-content {
       flex: 1 1 0;
-      min-width: 300px;
-      max-width: 520px;
+      min-width: 0;             /* !!! Für korrektes Wrapping !!! */
+      max-width: 420px;
+      overflow-wrap: break-word;
+      word-break: break-word;
+      /* Optionale Optik: */
+      /* padding-left: 16px; */
     }
   }
 
-  /* Mobile: Bild oben, Text unten */
   @media (max-width: 749px) {
+    #spirit-info {
+      width: 94vw;
+      max-width: 98vw;
+      min-width: 0;
+      max-height: 92vh;
+      padding: 8vw 4vw 4vw 4vw;
+    }
     .spirit-info-flex {
       flex-direction: column;
       gap: 16px;
     }
-    #spirit-info {
-      width: 90vw;
-      max-width: 98vw;
-      padding: 10vw 5vw 5vw 5vw;
-    }
     #spirit-info img {
       display: block;
       margin: 0 auto 18px auto;
@@ -111,10 +125,13 @@
       width: 100%;
       height: auto;
       object-fit: contain;
+      background: #222;
     }
     #spirit-info .spirit-info-content {
       width: 100%;
       max-width: 100%;
+      min-width: 0;
+      word-break: break-word;
     }
   }
 }