diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index bbb6623..df59817 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -1,5 +1,4 @@
-<div id="wrap"
-     style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
+<div id="wrap" style="padding:12px;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;">
   <!-- Controls -->
   <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
     <label style="display:flex;gap:6px;align-items:center;">
@@ -26,8 +25,12 @@
   <div id="hint"   style="margin-top:6px;font-size:12px;opacity:0.8;"></div>
 
   <div id="grid"
-       style="margin-top:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
-              gap:14px;max-width:880px;">
+       style="margin-top:14px;
+              display:grid;
+              grid-template-columns:repeat(2,minmax(0,1fr));
+              gap:14px;
+              width:100%;
+              max-width:none;">
   </div>
 
   <!-- Debug/Status -->
@@ -38,33 +41,67 @@
 </div>
 
 <style>
-  #wrap {
-    position: relative;
-    overflow: hidden;
+  /* Responsive: bei schmalen Screens 1 Spalte */
+  @media (max-width: 720px) {
+    #grid { grid-template-columns: 1fr !important; }
   }
 
-  #wrap::before {
-    content: "";
-    position: absolute;
-    inset: -40%;
+  /* Quantum-Waves Hintergrund */
+  #wrap{
+    position:relative;
+    overflow:hidden;
+    min-height:100vh;
+  }
+
+  #wrap::before{
+    content:"";
+    position:absolute;
+    inset:-50%;
     background:
-      radial-gradient(circle at 20% 20%, rgba(99,179,255,0.18), transparent 45%),
-      radial-gradient(circle at 80% 30%, rgba(168,85,247,0.16), transparent 50%),
-      radial-gradient(circle at 50% 80%, rgba(255,255,255,0.06), transparent 55%);
-    filter: blur(18px);
-    animation: auroraMove 10s ease-in-out infinite alternate;
-    pointer-events: none;
-    z-index: 0;
+      radial-gradient(circle at 20% 25%, rgba(99,179,255,.20), transparent 45%),
+      radial-gradient(circle at 80% 35%, rgba(168,85,247,.18), transparent 50%),
+      radial-gradient(circle at 55% 80%, rgba(255,255,255,.07), transparent 55%);
+    filter: blur(20px);
+    opacity:.9;
+    animation: qDrift 14s ease-in-out infinite alternate;
+    pointer-events:none;
+    z-index:0;
   }
 
-  #wrap > * {
-    position: relative;
-    z-index: 1;
+  #wrap::after{
+    content:"";
+    position:absolute;
+    inset:-30%;
+    background:
+      repeating-radial-gradient(circle at 30% 40%,
+        rgba(255,255,255,.06) 0px,
+        rgba(255,255,255,0) 14px,
+        rgba(255,255,255,0) 28px),
+      repeating-linear-gradient(120deg,
+        rgba(168,85,247,.06) 0px,
+        rgba(168,85,247,0) 18px,
+        rgba(99,179,255,.05) 36px,
+        rgba(99,179,255,0) 54px);
+    mix-blend-mode: overlay;
+    opacity:.35;
+    animation: qWaves 10s linear infinite;
+    pointer-events:none;
+    z-index:0;
   }
 
-  @keyframes auroraMove {
-    from { transform: translate3d(-2%, -2%, 0) scale(1.02); }
-    to   { transform: translate3d( 2%,  2%, 0) scale(1.06); }
+  #wrap > *{
+    position:relative;
+    z-index:1;
+  }
+
+  @keyframes qDrift{
+    from{ transform: translate3d(-2%, -2%, 0) scale(1.02) rotate(-2deg); }
+    to  { transform: translate3d( 2%,  2%, 0) scale(1.08) rotate( 2deg); }
+  }
+
+  @keyframes qWaves{
+    from{ transform: translate3d(0,0,0) rotate(0deg); }
+    to  { transform: translate3d(6%, -4%, 0) rotate(360deg); }
   }
 </style>
 
@@ -73,7 +110,6 @@
   window.__EnergyPieQueue = window.__EnergyPieQueue || [];
   window.__EnergyPieReady = false;
 
-  // Symcon ruft handleMessage evtl. sehr früh auf -> wir puffern.
   window.handleMessage = function (data) {
     window.__EnergyPieQueue.push(data);
 
@@ -97,7 +133,7 @@
   const elDbg    = document.getElementById('dbg');
   const elErr    = document.getElementById('err');
 
-  // Start nicht "grau/leer"
+  // Start nicht "leer"
   elGrid.innerHTML = '<div style="opacity:.75;padding:12px;">Lade Daten…</div>';
 
   // --- helpers ---
@@ -133,11 +169,10 @@
     elErr.textContent = 'JS-Fehler: ' + msg;
   }
 
-  // Global error trap
   window.addEventListener('error', (ev) => showErr(ev.error || ev.message));
   window.addEventListener('unhandledrejection', (ev) => showErr(ev.reason));
 
-  // --- requestAction robust finden (Popup hat das oft am parent) ---
+  // --- requestAction robust finden ---
   function getRequestAction() {
     if (typeof window.requestAction === 'function') return window.requestAction;
     if (typeof window.parent?.requestAction === 'function') return window.parent.requestAction;
@@ -156,11 +191,10 @@
 
     if (tryCall()) return;
 
-    // Popup/Fullscreen: manchmal kommt requestAction deutlich später -> länger retry
     let tries = 0;
     const timer = setInterval(() => {
       tries++;
-      if (tryCall() || tries >= 150) clearInterval(timer); // ~18s
+      if (tryCall() || tries >= 150) clearInterval(timer);
     }, 120);
   }
 
@@ -169,64 +203,59 @@
   }
 
   // --- 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;
-                min-height:210px;
-                display:flex;
-                flex-direction:column;
-                align-items:center;
-                justify-content:center;
-                gap:10px;">
+    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);">
 
-      <!-- Titel oben -->
-      <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>
 
-      <!-- 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>
+        <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>
 
-        <!-- 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 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>
-
-      <!-- Untertitel unten -->
-      <div style="font-size:12px;opacity:.65;text-align:center;">
-        ${escapeHtml(subtitle)}
-      </div>
-    </div>
-  `;
-}
+    `;
+  }
 
   function render(data) {
     const values = data?.values || {};
@@ -240,14 +269,12 @@ function donutCard({ title, percent, subtitle, color }) {
     const evq    = (prod > 0) ? (eigenClamped / prod * 100) : 0;
     const autark = (cons > 0) ? (eigenClamped / cons * 100) : 0;
 
-    // Controls sync
     if (data?.range) elRange.value = data.range;
     if (data?.date)  elDate.value  = data.date;
 
     const isTotal = (data?.range === 'total');
     elDate.disabled = isTotal;
 
-    // Zeitraum-Text
     if (data?.tStart && data?.tEnd) {
       const s = new Date(data.tStart * 1000);
       const e = new Date(data.tEnd   * 1000);
@@ -258,7 +285,6 @@ function donutCard({ title, percent, subtitle, color }) {
       elPeriod.textContent = '';
     }
 
-    // Hint
     if (data?.hasData === false) {
       elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
     } else {
@@ -281,6 +307,8 @@ function donutCard({ title, percent, subtitle, color }) {
       })
     ].join('');
 
+    elDbg.textContent = `Letzte Daten: ${new Date().toLocaleTimeString()} · range=${data?.range ?? '-'} · date=${data?.date ?? '-'}`;
+    elErr.textContent = '';
   }
 
   // --- cache ---
@@ -296,7 +324,6 @@ function donutCard({ title, percent, subtitle, color }) {
     }
   }
 
-  // 2) Consumer für gepufferte Symcon-Messages
   window.__EnergyPieConsume = function (data) {
     if (typeof data === 'string') {
       try { data = JSON.parse(data); } catch(e) {}
@@ -321,18 +348,15 @@ function donutCard({ title, percent, subtitle, color }) {
   elToday.addEventListener('click', () => safeRequestAction('Today', 1));
   elNext.addEventListener('click',  () => safeRequestAction('Next', 1));
 
-  // On load: cached sofort rendern
   const cached = loadLast();
   if (cached) render(cached);
 
-  // UI ready -> Queue flushen
   window.__EnergyPieReady = true;
   if (window.__EnergyPieQueue && window.__EnergyPieQueue.length) {
     const q = window.__EnergyPieQueue.splice(0);
     q.forEach(d => window.__EnergyPieConsume(d));
   }
 
-  // Refresh on start + on fullscreen/resize/visibility changes
   safeRefreshSoon();
 
   document.addEventListener('visibilitychange', () => {