Refactor spirit-info styling for better mobile and desktop compatibility

node/server/public/index.html

@@ -47,43 +47,32 @@ canvas {
   overflow-wrap: normal;
 }
 
+/* === Standard: Mobile/klein - Bild oben, Text unten === */
 .spirit-info-flex {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 16px;
+}
+#spirit-info img {
+  display: block;
+  margin: 0 auto 18px auto;
+  max-width: 84vw;
+  max-height: 30vh;
+  border-radius: 12px;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  background: transparent;
+}
+#spirit-info .spirit-info-content {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  word-break: break-word;
 }
 
-#spirit-info {
-  box-sizing: border-box;
-  position: fixed;
-  overflow-x: hidden;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(0,0,0,0.94);
-  color: #fff;
-  border-radius: 18px;
-  font-family: 'Segoe UI', sans-serif;
-  box-shadow: 0 12px 64px #000a;
-  width: 600px;
-  max-width: calc(100vw - 48px);
-  min-width: 320px;
-  max-height: calc(100dvh - 48px);
-  overflow-y: auto;
-  padding: 40px 36px 32px 36px;
-  z-index: 9999;
-  margin: 0;
-}
-
-/* === 1. Desktop immer: Bild links, Text rechts === */
-@media (pointer: fine) {
-  #spirit-info {
-    width: 600px;
-    max-width: calc(100vw - 48px);
-    min-width: 320px;
-    max-height: calc(100dvh - 48px);
-    padding: 40px 36px 32px 36px;
-  }
+/* === Breiter Desktop ODER Mobile Landscape: Bild links, Text rechts === */
+@media (min-width: 750px) and (pointer: fine), (pointer: coarse) and (orientation: landscape) and (min-width: 750px) {
   .spirit-info-flex {
     flex-direction: row;
     align-items: flex-start;
@@ -111,71 +100,21 @@ canvas {
   }
 }
 
-/* === 2. Mobile Portrait: Bild oben, Text unten === */
-@media (pointer: coarse) and (orientation: portrait) {
-  #spirit-info {
-    width: 90vw;
-    max-width: 98vw;
-    min-width: 0;
-    max-height: 82dvh;
-    padding: 8vw 4vw 4vw 4vw;
-  }
-  .spirit-info-flex {
-    flex-direction: column;
-    gap: 16px;
-  }
-  #spirit-info img {
-    display: block;
-    margin: 0 auto 18px auto;
-    max-width: 84vw;
-    max-height: 30vh;
-    border-radius: 12px;
-    width: 100%;
-    height: auto;
-    object-fit: contain;
-    background: transparent;
-  }
-  #spirit-info .spirit-info-content {
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-    word-break: break-word;
-  }
+/* #spirit-info: Größe Desktop vs. Mobile */
+#spirit-info {
+  width: 90vw;
+  max-width: 98vw;
+  min-width: 0;
+  max-height: 82dvh;
+  padding: 8vw 4vw 4vw 4vw;
 }
-
-/* === 3. Mobile Landscape: Bild links, Text rechts === */
-@media (pointer: coarse) and (orientation: landscape) {
+@media (min-width: 750px) and (pointer: fine) {
   #spirit-info {
-    width: 96vw;
-    max-width: 800px;
-    min-width: 0;
-    max-height: 82dvh;
-    padding: 4vw 4vw 4vw 4vw;
-  }
-  .spirit-info-flex {
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 24px;
-  }
-  #spirit-info img {
-    max-width: 160px;
-    min-width: 80px;
-    width: 34vw;
-    max-height: 32vh;
-    height: auto;
-    object-fit: contain;
-    border-radius: 12px;
-    background: transparent;
-    flex-shrink: 0;
-    margin: 0;
-    display: block;
-  }
-  #spirit-info .spirit-info-content {
-    flex: 1 1 0;
-    min-width: 0;
-    max-width: 450px;
-    overflow-wrap: break-word;
-    word-break: break-word;
+    width: 600px;
+    max-width: calc(100vw - 64px);
+    min-width: 320px;
+    max-height: calc(100dvh - 64px);
+    padding: 40px 40px 36px 40px;
   }
 }
   </style>