fix: Credits-Dropdown linksbündig, Balken-Track sichtbar, Prozentzahl rechts, kein Fettdruck, mehr Abstand

src/static/css/style.css

@@ -5338,13 +5338,14 @@ body.tutorial-active .tutorial-cursor {
 
 /* ===== Credits-Anzeige im User-Dropdown ===== */
 .credits-section {
-    padding: 8px 16px 12px;
+    padding: 0;
+    text-align: left;
 }
 
 .credits-divider {
     height: 1px;
     background: var(--border);
-    margin-bottom: 10px;
+    margin: 8px 0;
 }
 
 .credits-label {
@@ -5352,23 +5353,24 @@ body.tutorial-active .tutorial-cursor {
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: var(--text-secondary);
+    color: var(--text-tertiary);
-    margin-bottom: 6px;
+    margin-bottom: 8px;
+    text-align: left;
 }
 
 .credits-bar-container {
     width: 100%;
     height: 8px;
     background: rgba(255,255,255,0.08);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgba(255,255,255,0.12);
-    border-radius: 3px;
+    border-radius: 4px;
     overflow: hidden;
-    margin-bottom: 4px;
+    margin-bottom: 10px;
 }
 
 .credits-bar {
     height: 100%;
-    border-radius: 3px;
+    border-radius: 4px;
     background: var(--accent);
     transition: width 0.6s ease, background-color 0.3s ease;
     min-width: 2px;
@@ -5384,13 +5386,18 @@ body.tutorial-active .tutorial-cursor {
 
 .credits-info {
     font-size: 12px;
-    color: var(--text-secondary);
+    color: var(--text-tertiary);
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
-    gap: 4px;
+    align-items: center;
 }
 
 .credits-info span {
-    font-weight: 600;
+    font-weight: 400;
-    color: var(--text-primary);
+    color: var(--text-secondary);
+}
+
+.credits-percent {
+    font-size: 11px;
+    color: var(--text-tertiary);
 }

src/static/dashboard.html

@@ -57,7 +57,8 @@
                                 <div id="credits-bar" class="credits-bar"></div>
                             </div>
                             <div class="credits-info">
-                                <span id="credits-remaining">0</span> von <span id="credits-total">0</span>
+                                <span><span id="credits-remaining">0</span> von <span id="credits-total">0</span></span>
+                                <span class="credits-percent" id="credits-percent"></span>
                             </div>
                         </div>
                     </div>

src/static/js/app.js

@@ -490,6 +490,8 @@ const App = {
                 } else if (percentUsed > 50) {
                     bar.classList.add('warning');
                 }
+                const percentEl = document.getElementById("credits-percent");
+                if (percentEl) percentEl.textContent = percentRemaining.toFixed(0) + "% verbleibend";
             }
 
             // Dropdown Toggle