Achievement Leiste nach links verschoben

public/styles.css

@@ -4,6 +4,10 @@
     box-sizing: border-box;
 }
 
+html {
+    overscroll-behavior: none;
+}
+
 :root {
     --card-bg: rgba(255, 255, 255, 0.55);
     --card-border: rgba(255, 255, 255, 0.45);
@@ -42,7 +46,7 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
     min-height: 100vh;
-    padding: 16px;
+    padding: 16px 16px 16px 64px;
     color: var(--text-primary);
     background:
         linear-gradient(
@@ -54,6 +58,7 @@ body {
         ),
         url('img/background.jpg') center / cover no-repeat fixed;
     background-color: #c7d2fe;
+    overscroll-behavior: none;
 }
 
 .container {
@@ -61,6 +66,68 @@ body {
     margin: 0 auto;
 }
 
+/* ─── Progress Tower ─── */
+.progress-tower {
+    position: fixed;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    z-index: 9000;
+    padding: 16px 10px;
+    background: rgba(255, 255, 255, 0.82);
+    border-radius: 24px;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    box-shadow: 0 4px 20px rgba(60, 60, 120, 0.15);
+    transition: opacity 0.3s;
+}
+
+.progress-tower.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tower-percentage {
+    font-size: 0.92em;
+    font-weight: 800;
+    color: var(--accent);
+    letter-spacing: -0.5px;
+}
+
+.tower-bar {
+    width: 26px;
+    height: 220px;
+    background: rgba(0, 0, 0, 0.07);
+    border-radius: 13px;
+    overflow: hidden;
+    position: relative;
+}
+
+.tower-fill {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 0%;
+    background: linear-gradient(to top, var(--accent), #a78bfa, var(--green));
+    border-radius: 13px;
+    transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tower-count {
+    font-size: 0.75em;
+    font-weight: 600;
+    color: var(--text-muted);
+    white-space: nowrap;
+}
+
+.tower-count span {
+    color: var(--text-primary);
+}
+
 /* ─── Greeting Banner ─── */
 .greeting-banner {
     padding: 10px 0 2px;
@@ -521,54 +588,15 @@ button {
 
 .btn-delete:hover { background: var(--rose); color: white; }
 
-/* ─── Overall Progress ─── */
-.overall-progress {
-    background: var(--card-bg);
-    backdrop-filter: blur(var(--blur));
-    -webkit-backdrop-filter: blur(var(--blur));
-    padding: 14px 18px;
-    border-radius: var(--radius);
-    margin-bottom: 16px;
-    box-shadow: var(--card-shadow);
-    border: 1px solid var(--card-border);
-}
-
-.overall-progress.hidden { display: none; }
-
-.overall-header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 8px;
-    font-weight: 600;
-    font-size: 0.9em;
-}
-
-#overall-percentage {
-    color: var(--accent);
-    font-weight: 700;
-}
-
-.task-counter {
-    margin-top: 8px;
-    text-align: center;
-    color: var(--text-muted);
-    font-size: 0.82em;
-}
-
-.task-counter span {
-    font-weight: 600;
-    color: var(--text-primary);
-}
-
 /* ─── Tasks ─── */
 .tasks-container {
     display: grid;
     gap: 8px;
+    contain: layout style;
 }
 
 /* ─── Card ─── */
 .task-card {
-    background: var(--card-bg);
     backdrop-filter: blur(var(--blur));
     -webkit-backdrop-filter: blur(var(--blur));
     border-radius: var(--radius);
@@ -576,15 +604,14 @@ button {
     box-shadow: var(--card-shadow);
     cursor: grab;
     transition: all 0.2s;
-    border: 1px solid var(--card-border);
-    border-left: 4px solid var(--accent);
+    border: 1px solid rgba(255, 255, 255, 0.35);
     position: relative;
+    /* background set inline via JS using task color */
 }
 
 .task-card:hover {
-    background: var(--card-hover);
     box-shadow: 0 4px 20px rgba(60, 60, 120, 0.14);
-    border-color: rgba(255, 255, 255, 0.6);
+    filter: brightness(1.04);
 }
 
 .task-card:active { cursor: grabbing; }
@@ -706,19 +733,6 @@ button {
     text-align: right;
 }
 
-.overall-progress .progress-bar { height: 16px; border-radius: 8px; }
-
-.overall-progress .progress-fill {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    font-weight: 600;
-    font-size: 0.72em;
-    border-radius: 8px;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-}
-
 /* ─── Reward ─── */
 .reward-section {
     background: rgba(16, 185, 129, 0.08);
@@ -1009,6 +1023,7 @@ button {
 
 /* ─── Responsive ─── */
 @media (max-width: 640px) {
+    body { padding: 12px 12px 12px 50px; }
     h1 { font-size: 1.2em; }
 
     header {
@@ -1019,6 +1034,20 @@ button {
     .header-actions { justify-content: space-between; }
     .view-toggle { margin-left: auto; }
     .form-row-2 { grid-template-columns: 1fr; }
-    .task-card { padding: 10px 12px; }
+    .progress-tower {
+        left: 6px;
+        padding: 10px 6px;
+        border-radius: 18px;
+    }
+    .tower-bar {
+        width: 18px;
+        height: 140px;
+    }
+    .tower-percentage { font-size: 0.75em; }
+    .tower-count { font-size: 0.6em; }
+    .subtask {
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+    }
     .greeting-banner .greeting-text { font-size: 1em; }
 }