From 684ce37814591558d7defb45a6f70217cf7fb9ca Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Wed, 28 May 2025 19:55:58 +0200
Subject: [PATCH] Refactor media queries for spirit-info in index.html

---
 node/server/public/index.html | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/node/server/public/index.html b/node/server/public/index.html
index b1ce172..052542b 100644
--- a/node/server/public/index.html
+++ b/node/server/public/index.html
@@ -112,15 +112,29 @@ canvas {
   }
 }
 
-/* "Mobile Portrait" (Hochformat und schmal) */
-@media (max-width: 619px), (orientation: portrait) {
+/* Hochformat (Mobile) */
+@media (max-width: 619px) and (orientation: portrait) and (pointer: coarse) {
+  #spirit-info {
+    width: 90vw;
+    max-width: 98vw;
+    min-width: 0;
+    max-height: 82dvh;
+    padding: 8vw 4vw 4vw 4vw;
+  }
+}
+
+/* Hochformat (Desktop) */
+@media (max-width: 619px) and (orientation: landscape), (max-width: 619px) and (pointer: fine) {
   #spirit-info {
     width: 90vw;
     max-width: 400px;
     min-width: 0;
-    max-height: 700px; /* dynamic viewport height */
+    max-height: 700px;
     padding: 8vw 4vw 4vw 4vw;
   }
+
+/* Hochformat (Mobile / Desktop) */
+@media (max-width: 619px), (orientation: portrait) {
   .spirit-info-flex {
     flex-direction: column;
     gap: 16px;