From f373f24c77d9fd3d4c6b67ad3e1ca940dd1eea00 Mon Sep 17 00:00:00 2001
From: beo3000 <pakabu@web.de>
Date: Sun, 11 Jan 2026 16:36:34 +0100
Subject: [PATCH] optimierung PinPanel Layout

---
 src/Koogle.Web/Components/Game/Pin.razor      | 14 +++----
 src/Koogle.Web/Components/Game/PinPanel.razor | 42 +++++++++++++++----
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/Koogle.Web/Components/Game/Pin.razor b/src/Koogle.Web/Components/Game/Pin.razor
index dd7ab67..fda2469 100644
--- a/src/Koogle.Web/Components/Game/Pin.razor
+++ b/src/Koogle.Web/Components/Game/Pin.razor
@@ -6,8 +6,8 @@
 
 <style>
     .pin {
-        width: 48px;
-        height: 48px;
+        width: 64px;
+        height: 64px;
         border-radius: 50%;
         display: flex;
         align-items: center;
@@ -16,9 +16,9 @@
         user-select: none;
         transition: all 0.15s ease;
         font-weight: bold;
-        font-size: 1.2rem;
+        font-size: 1.5rem;
         border: 3px solid transparent;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        box-shadow: 0 3px 6px rgba(0,0,0,0.25);
     }
 
     .pin:hover:not(.pin-disabled) {
@@ -54,9 +54,9 @@
 
     @@media (max-width: 600px) {
         .pin {
-            width: 40px;
-            height: 40px;
-            font-size: 1rem;
+            width: 52px;
+            height: 52px;
+            font-size: 1.25rem;
         }
     }
 </style>
diff --git a/src/Koogle.Web/Components/Game/PinPanel.razor b/src/Koogle.Web/Components/Game/PinPanel.razor
index 8d2e509..09e3c4a 100644
--- a/src/Koogle.Web/Components/Game/PinPanel.razor
+++ b/src/Koogle.Web/Components/Game/PinPanel.razor
@@ -37,26 +37,54 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        gap: 8px;
-        padding: 16px;
+        gap: 12px;
+        padding: 20px;
         background: var(--mud-palette-surface);
         border-radius: 8px;
+        width: 100%;
+        max-width: 400px;
     }
 
     .pin-row {
         display: flex;
-        gap: 8px;
+        justify-content: center;
+        width: 100%;
+    }
+
+    .pin-row-1 {
+        justify-content: center;
+    }
+
+    .pin-row-2 {
+        gap: 80px;
+    }
+
+    .pin-row-3 {
+        gap: 70px;
+    }
+
+    .pin-row-4 {
+        gap: 80px;
+    }
+
+    .pin-row-5 {
         justify-content: center;
     }
 
     @@media (max-width: 600px) {
         .pin-panel {
-            gap: 6px;
-            padding: 12px;
+            gap: 10px;
+            padding: 16px;
+            max-width: 320px;
         }
 
-        .pin-row {
-            gap: 6px;
+        .pin-row-2,
+        .pin-row-4 {
+            gap: 60px;
+        }
+
+        .pin-row-3 {
+            gap: 50px;
         }
     }
 </style>