From 15e6de7d955a9ed496dece34a3b9ed8fd1a9c27a Mon Sep 17 00:00:00 2001
From: Tobias Leuschner <info@leuschner.dev>
Date: Sun, 22 Feb 2026 14:59:31 +0100
Subject: [PATCH] Passe die Positionierung und den Rahmen der Overlay-Elemente
 an, um die Sichtbarkeit zu verbessern

---
 css/style.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/css/style.css b/css/style.css
index fc3eef2..61ea014 100644
--- a/css/style.css
+++ b/css/style.css
@@ -109,14 +109,14 @@ body::before {
   width: 88px;
   height: 88px;
   border-radius: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, calc(-50% - 22px));
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   color: rgba(255,255,255,0.88);
   background: rgba(255,255,255,0.07);
-  border: 3px solid rgba(255,255,255,0.14);
+  border: 5px solid rgba(255,255,255,0.14);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   box-shadow:
@@ -168,13 +168,13 @@ body::before {
     0 0 0 3px rgba(52,211,153,0.28),
     0 0 48px rgba(52,211,153,0.35),
     0 8px 30px rgba(0,0,0,0.4);
-  transform: translate(-50%,-50%) scale(1.08);
+  transform: translate(-50%, calc(-50% - 22px)) scale(1.08);
 }
 
 /* Lost: shrink and fade */
 .finger.lost {
   opacity: 0;
-  transform: translate(-50%,-50%) scale(0.45);
+  transform: translate(-50%, calc(-50% - 22px)) scale(0.45);
   transition: opacity 380ms ease, transform 380ms cubic-bezier(0.4,0,0.6,1);
 }
 
@@ -182,9 +182,9 @@ body::before {
 .pulse { animation: pulse 1400ms ease-in-out infinite; }
 
 @keyframes pulse {
-  0%   { transform: translate(-50%,-50%) scale(1.08); }
-  50%  { transform: translate(-50%,-50%) scale(1.18); box-shadow: 0 0 0 5px rgba(52,211,153,0.18), 0 0 64px rgba(52,211,153,0.4), 0 8px 30px rgba(0,0,0,0.4); }
-  100% { transform: translate(-50%,-50%) scale(1.08); }
+  0%   { transform: translate(-50%, calc(-50% - 22px)) scale(1.08); }
+  50%  { transform: translate(-50%, calc(-50% - 22px)) scale(1.18); box-shadow: 0 0 0 5px rgba(52,211,153,0.18), 0 0 64px rgba(52,211,153,0.4), 0 8px 30px rgba(0,0,0,0.4); }
+  100% { transform: translate(-50%, calc(-50% - 22px)) scale(1.08); }
 }
 
 /* ── Install hint banner ── */