From 97997724dea199b58ae5969e54d0dc7bd9ac8a57 Mon Sep 17 00:00:00 2001
From: Claude Dev <claude-dev@aegis-sight.de>
Date: Wed, 18 Mar 2026 00:03:18 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Credits-Anzeige=20linksb=C3=BCndig,=20Ba?=
 =?UTF-8?q?lken-Hintergrund=20sichtbar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/static/css/style.css | 55 ++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 27 deletions(-)

diff --git a/src/static/css/style.css b/src/static/css/style.css
index 35e032e..ee7d086 100644
--- a/src/static/css/style.css
+++ b/src/static/css/style.css
@@ -235,7 +235,7 @@ a:hover {
 .login-container {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     min-height: 100vh;
     padding: var(--sp-3xl);
     background: var(--bg-primary);
@@ -356,7 +356,7 @@ a:hover {
 .btn {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     gap: var(--sp-md);
     border: none;
     border-radius: var(--radius);
@@ -1092,7 +1092,7 @@ a:hover {
     border-radius: var(--radius);
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     font-size: 12px;
     font-weight: 700;
     margin-top: 1px;
@@ -1547,7 +1547,7 @@ a:hover {
 .vt-cluster-count {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     min-width: 18px;
     height: 18px;
     padding: 0 5px;
@@ -1720,7 +1720,7 @@ a:hover {
     backdrop-filter: blur(4px);
     z-index: 100;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 }
 
 .modal-overlay.active {
@@ -1857,7 +1857,7 @@ a:hover {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     padding: var(--sp-5xl) var(--sp-4xl);
     text-align: center;
 }
@@ -1900,7 +1900,7 @@ a:hover {
 .loading-overlay {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     gap: var(--sp-lg);
     padding: var(--sp-3xl);
     color: var(--text-secondary);
@@ -1978,7 +1978,7 @@ a:hover {
 
 .progress-label-container {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
     gap: var(--sp-md);
     position: relative;
@@ -2642,7 +2642,7 @@ a:hover {
     border-radius: var(--radius);
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     transition: color 0.2s ease, background 0.2s ease;
     position: relative;
 }
@@ -2667,7 +2667,7 @@ a:hover {
     border-radius: 8px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     line-height: 1;
     pointer-events: none;
     animation: badgePop 0.3s ease;
@@ -2769,7 +2769,7 @@ a:hover {
     border-radius: var(--radius);
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     font-size: 11px;
     font-weight: 700;
     flex-shrink: 0;
@@ -3421,7 +3421,7 @@ a:hover {
 .source-feed-count {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     padding: 1px 8px;
     border-radius: 9px;
     font-size: 11px;
@@ -3932,7 +3932,7 @@ select:focus-visible, textarea:focus-visible,
     border-radius: var(--radius);
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     transition: color 0.2s ease, background 0.2s ease;
     width: 36px;
     height: 36px;
@@ -4348,7 +4348,7 @@ select:focus-visible, textarea:focus-visible,
 .map-empty {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     height: 100%;
     color: var(--text-tertiary);
     font-size: 13px;
@@ -4443,7 +4443,7 @@ a.map-popup-article:hover {
     border-radius: 50%;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 }
 .map-cluster span {
     font-family: var(--font-body);
@@ -4539,7 +4539,7 @@ a.map-popup-article:hover {
     padding: 0;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     flex-shrink: 0;
 }
 .map-expand-btn:hover {
@@ -4660,7 +4660,7 @@ a.map-popup-article:hover {
     z-index: 9999;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     box-shadow: 0 4px 16px rgba(0,0,0,0.3);
     transition: transform 0.2s, background 0.2s;
 }
@@ -4727,7 +4727,7 @@ a.map-popup-article:hover {
     border-radius: 4px;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
 }
 .chat-header-btn:hover {
     color: var(--text-primary);
@@ -4819,7 +4819,7 @@ a.map-popup-article:hover {
     cursor: pointer;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     flex-shrink: 0;
     transition: background 0.15s;
 }
@@ -4895,7 +4895,7 @@ a.map-popup-article:hover {
 .info-icon {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     width: 16px;
     height: 16px;
     color: var(--text-disabled);
@@ -5103,7 +5103,7 @@ a.map-popup-article:hover {
     cursor: pointer;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     border-radius: var(--radius);
     transition: color 0.15s, background 0.15s;
     line-height: 1;
@@ -5117,7 +5117,7 @@ a.map-popup-article:hover {
 .tutorial-bubble-dots {
     display: flex;
     gap: 5px;
-    justify-content: center;
+    justify-content: flex-start;
     margin-bottom: var(--sp-lg);
     flex-wrap: wrap;
 }
@@ -5294,7 +5294,7 @@ body.tutorial-active .tutorial-cursor {
     background: rgba(0,0,0,0.6);
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     backdrop-filter: blur(2px);
 }
 .tutorial-resume-dialog {
@@ -5315,7 +5315,7 @@ body.tutorial-active .tutorial-cursor {
 .tutorial-resume-actions {
     display: flex;
     gap: 12px;
-    justify-content: center;
+    justify-content: flex-start;
 }
 .tutorial-resume-actions .tutorial-btn {
     border: 1px solid var(--accent);
@@ -5358,8 +5358,9 @@ body.tutorial-active .tutorial-cursor {
 
 .credits-bar-container {
     width: 100%;
-    height: 6px;
-    background: var(--bg-tertiary);
+    height: 8px;
+    background: rgba(255,255,255,0.08);
+    border: 1px solid rgba(255,255,255,0.1);
     border-radius: 3px;
     overflow: hidden;
     margin-bottom: 4px;
@@ -5385,7 +5386,7 @@ body.tutorial-active .tutorial-cursor {
     font-size: 12px;
     color: var(--text-secondary);
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     gap: 4px;
 }