diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 3952247..89b4a2e 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -144,43 +144,64 @@
   }
 
   // --- 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;
+  const gap  = c - dash;
 
-    return `
-      <div style="border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:14px;
-                  display:flex;align-items:center;justify-content:center;min-height:210px;">
-        <div style="position:relative;width:170px;height:170px;">
-          <svg width="170" height="170" viewBox="0 0 170 170" style="display:block;">
-            <circle cx="85" cy="85" r="${r}"
-                    fill="none" stroke="rgba(255,255,255,0.10)" stroke-width="18" />
-            <circle cx="85" cy="85" r="${r}"
-                    fill="none" stroke="${color}" stroke-width="18"
-                    stroke-linecap="butt"
-                    stroke-dasharray="${dash} ${gap}"
-                    transform="rotate(-90 85 85)" />
-          </svg>
+  return `
+    <div style="border:1px solid rgba(255,255,255,0.12);
+                border-radius:16px;
+                padding:14px;
+                min-height:210px;
+                display:flex;
+                flex-direction:column;
+                align-items:center;
+                justify-content:center;
+                gap:10px;">
 
-          <div style="position:absolute;inset:0;display:flex;flex-direction:column;
-                      align-items:center;justify-content:center;text-align:center;">
-            <div style="font-weight:800;font-size:18px;line-height:1;">
-              ${escapeHtml(percent.toFixed(1))}%
-            </div>
-            <div style="margin-top:4px;font-size:13px;opacity:0.80;">
-              ${escapeHtml(title)}
-            </div>
-            <div style="margin-top:10px;font-size:12px;opacity:0.65;max-width:140px;">
-              ${escapeHtml(subtitle)}
-            </div>
-          </div>
+      <!-- Titel oben -->
+      <div style="font-size:14px;font-weight:700;opacity:.9;">
+        ${escapeHtml(title)}
+      </div>
+
+      <!-- Donut -->
+      <div style="position:relative;width:170px;height:170px;">
+        <svg width="170" height="170" viewBox="0 0 170 170">
+          <circle cx="85" cy="85" r="${r}"
+                  fill="none"
+                  stroke="rgba(255,255,255,0.10)"
+                  stroke-width="18" />
+          <circle cx="85" cy="85" r="${r}"
+                  fill="none"
+                  stroke="${color}"
+                  stroke-width="18"
+                  stroke-linecap="butt"
+                  stroke-dasharray="${dash} ${gap}"
+                  transform="rotate(-90 85 85)" />
+        </svg>
+
+        <!-- Prozent im Kreis -->
+        <div style="position:absolute;
+                    inset:0;
+                    display:flex;
+                    align-items:center;
+                    justify-content:center;
+                    font-weight:800;
+                    font-size:22px;">
+          ${escapeHtml(percent.toFixed(1))}%
         </div>
       </div>
-    `;
-  }
+
+      <!-- Untertitel unten -->
+      <div style="font-size:12px;opacity:.65;text-align:center;">
+        ${escapeHtml(subtitle)}
+      </div>
+    </div>
+  `;
+}
 
   function render(data) {
     const values = data?.values || {};
@@ -235,8 +256,6 @@
       })
     ].join('');
 
-    elDbg.textContent = `Letzte Daten: ${new Date().toLocaleTimeString()} · range=${data?.range ?? '-'} · date=${data?.date ?? '-'}`;
-    elErr.textContent = '';
   }
 
   // --- cache ---