diff --git a/node/server/public/index.html b/node/server/public/index.html
index 4a5cf3e..e54482a 100644
--- a/node/server/public/index.html
+++ b/node/server/public/index.html
@@ -40,73 +40,83 @@
}
/* Responsive Overlay */
#spirit-info {
- box-sizing: border-box !important;
- position: fixed !important;
- left: 50% !important;
- top: 50% !important;
- transform: translate(-50%, -50%) !important;
- background: rgba(0,0,0,0.94) !important;
- color: #fff !important;
- border-radius: 18px !important;
- font-family: 'Segoe UI', sans-serif !important;
- box-shadow: 0 12px 64px #000a !important;
- padding: 4vw 4vw 4vw 4vw !important;
- width: 80vw !important;
- max-width: 600px !important;
- min-width: 0 !important;
- max-height: 80vh !important;
- overflow-y: auto !important;
+ box-sizing: border-box;
+ position: fixed;
+ 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: 80vw;
+ max-width: 900px;
+ min-width: 0;
+ max-height: 80vh;
+ overflow-y: auto;
display: flex;
flex-direction: column;
- gap: 20px;
+ padding: 5vw;
+ gap: 18px;
}
- /* Mobile: Bild oben, Text darunter, an allen Seiten 10% Abstand */
- @media (max-width: 900px), (max-aspect-ratio: 4/5) {
+ /* Bild und Content als Grid/Side-by-Side nur auf großen Screens */
+ @media (min-width: 900px) and (min-aspect-ratio: 5/4) {
#spirit-info {
- flex-direction: column !important;
- width: 80vw !important;
- max-width: 98vw !important;
- min-width: 0 !important;
- max-height: 80vh !important;
- padding: 10vw 4vw !important;
- gap: 14px !important;
- }
- #spirit-info img {
- display: block !important;
- margin: 0 auto 18px auto !important;
- max-width: 80vw !important;
- max-height: 30vh !important;
- border-radius: 12px !important;
- background: #222 !important;
- }
- }
-
- /* Desktop: Bild links, Text rechts */
- @media (min-width: 901px) and (min-aspect-ratio: 4/5) {
- #spirit-info {
- flex-direction: row !important;
+ flex-direction: row;
align-items: flex-start;
- gap: 32px !important;
- width: 80vw !important;
- max-width: 900px !important;
- max-height: 80vh !important;
- padding: 4vw !important;
+ gap: 32px;
+ padding: 3vw 4vw;
+ width: 80vw;
+ max-width: 900px;
+ max-height: 80vh;
}
#spirit-info img {
- display: block !important;
- margin: 0 !important;
- max-width: 320px !important;
- max-height: 60vh !important;
- border-radius: 12px !important;
- background: #222 !important;
+ max-width: 320px;
+ max-height: 60vh;
+ width: auto;
+ 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: 200px;
- max-width: 500px;
+ max-width: 520px;
}
}
+
+ /* Mobile: Bild oben, Text unten */
+ @media (max-width: 899px), (max-aspect-ratio: 5/4) {
+ #spirit-info {
+ flex-direction: column;
+ width: 90vw;
+ max-width: 98vw;
+ padding: 10vw 5vw 5vw 5vw;
+ gap: 14px;
+ }
+ #spirit-info img {
+ display: block;
+ margin: 0 auto 18px auto;
+ max-width: 84vw;
+ max-height: 30vh;
+ border-radius: 12px;
+ background: #222;
+ width: 100%;
+ height: auto;
+ object-fit: contain;
+ }
+ #spirit-info .spirit-info-content {
+ width: 100%;
+ max-width: 100%;
+ }
+ }
+}