diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 5c7729b..3275924 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -56,21 +56,21 @@
   }
 
   /* Nur EIN Layer, statisch */
-  #wrap::before{
+    #wrap::before{
     content:"";
     position:absolute;
     inset:-35%;
     background:
-      radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.22), transparent 60%),
-      radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.20), transparent 62%),
-      radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.12), transparent 64%),
-      radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.10), transparent 66%),
-      radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.04), transparent 70%);
-    filter: blur(24px);
+        radial-gradient(520px 420px at 18% 18%, rgba(99,179,255,0.42), transparent 60%),
+        radial-gradient(560px 460px at 82% 28%, rgba(168,85,247,0.38), transparent 62%),
+        radial-gradient(620px 520px at 55% 85%, rgba(99,179,255,0.26), transparent 64%),
+        radial-gradient(700px 560px at 35% 70%, rgba(168,85,247,0.22), transparent 66%),
+        radial-gradient(900px 700px at 50% 50%, rgba(255,255,255,0.06), transparent 70%);
+    filter: blur(18px);   /* weniger blur = mehr sichtbar */
     opacity: 1;
     pointer-events:none;
     z-index:0;
-  }
+    }
 
   /* Content über dem Background */
   #wrap > *{
@@ -178,59 +178,68 @@
   }
 
   // --- donut card ---
-  function donutCard({ title, percent, subtitle, color }) {
-    const share = clamp01(percent / 100);
-    const r = 56;
-    const c = 2 * Math.PI * r;
-    const dash = share * c;
-    const gap  = c - dash;
+function donutCard({ title, percent, subtitle, color }) {
+  const share = clamp01(percent / 100);
+  const r = 56;
+  const c = 2 * Math.PI * r;
+  const dash = share * c;     // farbiger Anteil
+  const rest = c - dash;      // Rest (dunkel)
 
-    return `
-      <div style="border:1px solid rgba(255,255,255,0.12);
-                  border-radius:16px;
-                  padding:14px;
-                  min-height:260px;
-                  width:100%;
-                  display:flex;
-                  flex-direction:column;
-                  align-items:center;
-                  justify-content:center;
-                  gap:12px;
-                  background:rgba(0,0,0,0.08);
-                  backdrop-filter: blur(2px);">
+  return `
+    <div style="border:1px solid rgba(255,255,255,0.12);
+                border-radius:16px;
+                padding:14px;
+                min-height:260px;
+                width:100%;
+                display:flex;
+                flex-direction:column;
+                align-items:center;
+                justify-content:center;
+                gap:12px;
+                background:rgba(0,0,0,0.18);
+                backdrop-filter: blur(6px);">
 
-        <div style="font-size:14px;font-weight:700;opacity:.9;">
-          ${escapeHtml(title)}
-        </div>
+      <div style="font-size:14px;font-weight:700;opacity:.9;">
+        ${escapeHtml(title)}
+      </div>
 
-        <div style="position:relative;width:180px;height:180px;">
-          <svg width="180" height="180" viewBox="0 0 180 180">
-            <circle cx="90" cy="90" r="${r}"
-                    fill="none"
-                    stroke="rgba(255,255,255,0.10)"
-                    stroke-width="18" />
-            <circle cx="90" cy="90" r="${r}"
-                    fill="none"
-                    stroke="${color}"
-                    stroke-width="18"
-                    stroke-linecap="butt"
-                    stroke-dasharray="${dash} ${gap}"
-                    transform="rotate(-90 90 90)" />
-          </svg>
+      <div style="position:relative;width:180px;height:180px;">
+        <svg width="180" height="180" viewBox="0 0 180 180">
 
-          <div style="position:absolute;inset:0;display:flex;
-                      align-items:center;justify-content:center;
-                      font-weight:800;font-size:24px;">
-            ${escapeHtml(percent.toFixed(1))}%
-          </div>
-        </div>
+          <!-- Restsegment -->
+          <circle cx="90" cy="90" r="${r}"
+                  fill="none"
+                  stroke="rgba(255,255,255,0.20)"
+                  stroke-width="18"
+                  stroke-linecap="butt"
+                  stroke-dasharray="${rest} ${dash}"
+                  stroke-dashoffset="${-dash}"
+                  transform="rotate(-90 90 90)" />
 
-        <div style="font-size:12px;opacity:.65;text-align:center;">
-          ${escapeHtml(subtitle)}
+          <!-- Anteilsegment -->
+          <circle cx="90" cy="90" r="${r}"
+                  fill="none"
+                  stroke="${color}"
+                  stroke-width="18"
+                  stroke-linecap="butt"
+                  stroke-dasharray="${dash} ${rest}"
+                  transform="rotate(-90 90 90)"
+                  style="filter: drop-shadow(0 0 10px ${color});" />
+        </svg>
+
+        <div style="position:absolute;inset:0;display:flex;
+                    align-items:center;justify-content:center;
+                    font-weight:800;font-size:24px;">
+          ${escapeHtml(percent.toFixed(1))}%
         </div>
       </div>
-    `;
-  }
+
+      <div style="font-size:12px;opacity:.65;text-align:center;">
+        ${escapeHtml(subtitle)}
+      </div>
+    </div>
+  `;
+}
 
   function render(data) {
     const values = data?.values || {};