From c0c0b3bef52a8369d5ab730c9900f80b7f9049a0 Mon Sep 17 00:00:00 2001
From: Ronny <ronny975@gmail.com>
Date: Mon, 6 Apr 2026 14:02:21 +0200
Subject: [PATCH] =?UTF-8?q?style:=20st=C3=A4rkerer=20Glossy-Effekt=20auf?=
 =?UTF-8?q?=20Flag-Boxen=20im=20Light=20Mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Glanz-Overlay auf 55% angehoben, inset-Highlight und Border ergänzt
für MatchCard flagBox, TipModal flagLarge und pickerBtn.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/MatchCard.module.css | 10 ++++++----
 frontend/src/components/TipModal.module.css  | 21 ++++++++++----------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/MatchCard.module.css b/frontend/src/components/MatchCard.module.css
index e4aaafb..030ae9c 100644
--- a/frontend/src/components/MatchCard.module.css
+++ b/frontend/src/components/MatchCard.module.css
@@ -107,8 +107,10 @@
   border-radius: 13px;
   background: var(--surface-high);
   box-shadow:
-    0 4px 12px rgba(0,0,0,0.3),
-    inset 0 1px 0 rgba(255,255,255,0.12);
+    var(--shadow-card),
+    inset 0 1px 0 rgba(255,255,255,0.55),
+    inset 0 -1px 0 rgba(0,0,0,0.06);
+  border: 1px solid var(--border-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -121,8 +123,8 @@
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
-  height: 50%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
+  height: 55%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
   pointer-events: none;
   z-index: 1;
 }
diff --git a/frontend/src/components/TipModal.module.css b/frontend/src/components/TipModal.module.css
index b5caa63..95538c2 100644
--- a/frontend/src/components/TipModal.module.css
+++ b/frontend/src/components/TipModal.module.css
@@ -101,9 +101,10 @@
   border-radius: 18px;
   background: var(--surface-high);
   box-shadow:
-    0 8px 24px rgba(0,0,0,0.35),
-    inset 0 1px 0 rgba(255,255,255,0.12),
-    inset 1px 0 0 rgba(255,255,255,0.06);
+    var(--shadow-card),
+    inset 0 1px 0 rgba(255,255,255,0.55),
+    inset 0 -1px 0 rgba(0,0,0,0.06);
+  border: 1px solid var(--border-subtle);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -115,8 +116,8 @@
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
-  height: 50%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
+  height: 55%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
   pointer-events: none;
   z-index: 1;
 }
@@ -235,9 +236,9 @@
   position: relative;
   overflow: hidden;
   box-shadow:
-    0 6px 16px rgba(0,0,0,0.35),
-    inset 0 1px 0 rgba(255,255,255,0.12),
-    inset 1px 0 0 rgba(255,255,255,0.06);
+    var(--shadow-card),
+    inset 0 1px 0 rgba(255,255,255,0.55),
+    inset 0 -1px 0 rgba(0,0,0,0.06);
 }
 
 /* Glossy sheen – gleich wie flagLarge */
@@ -245,8 +246,8 @@
   content: '';
   position: absolute;
   top: 0; left: 0; right: 0;
-  height: 50%;
-  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%);
+  height: 55%;
+  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.0) 100%);
   pointer-events: none;
   border-radius: 16px 16px 0 0;
 }