diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 09c4d11..fbae9c1 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -33,6 +33,13 @@
               gap:14px;">
   </div>
 
+  <div id="explain"
+     style="margin-top:10px;
+            font-size:13px;
+            opacity:.75;
+            line-height:1.4;">
+  </div>
+
   <div id="err" style="margin-top:8px;color:#ffb4b4;font-size:13px;"></div>
 </div>
 
@@ -109,59 +116,69 @@
     return Math.ceil((((d-s)/86400000)+1)/7)+" "+y;
   }
 
-function render(data){
-  if(!data) return;
+function render(data) {
+  if (!data) return;
 
+  // UI-Status
   elRange.value = data.range || 'day';
   elDate.value  = data.date  || '';
-
   elDate.disabled = (data.range === 'total');
 
   // Zeitraum-Anzeige
   if (data.range === 'total') {
-    // ✅ Wunsch: bei Gesamt nix anzeigen
     elPeriod.textContent = '';
   } else if (data.tStart && data.tEnd) {
     const s = new Date(data.tStart * 1000);
     const e = new Date(data.tEnd * 1000 - 1000);
 
-    if (data.range === 'day')
+    const pad = n => String(n).padStart(2, '0');
+    const fmt = d => `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()}`;
+
+    if (data.range === 'day') {
       elPeriod.textContent = `Zeitraum: ${fmt(s)}`;
-    else if (data.range === 'week')
-      elPeriod.textContent = `Zeitraum: Woche ${isoWeek(s)}`;
-    else if (data.range === 'month')
-      elPeriod.textContent = `Zeitraum: ${monthName(s.getMonth())} ${s.getFullYear()}`;
-    else if (data.range === 'year')
-      elPeriod.textContent = `Zeitraum: ${s.getFullYear()}`;
-    else
-      elPeriod.textContent = ''; // fallback: lieber leer als falsch
-  } else {
-    elPeriod.textContent = '';
+    } else if (data.range === 'week') {
+      elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
+    } else if (data.range === 'month') {
+      elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
+    } else if (data.range === 'year') {
+      elPeriod.textContent = `Zeitraum: ${fmt(s)} – ${fmt(e)}`;
+    }
   }
 
-  // Keine Daten
-  if(data.hasData === false){
-    elHint.innerHTML = `<b>Letzter Zeitpunkt</b> <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>`;
+  // Keine Daten vorhanden
+  if (data.hasData === false) {
+    elHint.innerHTML = `
+      <b>Letzter Zeitpunkt</b>
+      <span style="opacity:.7">(Keine Werte für diesen Zeitraum)</span>
+    `;
     elGrid.innerHTML = '';
+    elExplain.innerHTML = '';
     return;
   }
 
   // Werte
   const v = data.values || {};
+  const prod = v.Produktion || 0;
+  const cons = v.Hausverbrauch || 0;
+  const grid = v.Netz || 0;
+  const eigen = Math.max(cons - grid, 0);
+
   elHint.innerHTML = `
-    <span class="kv"><b>Produktion:</b> ${v.Produktion?.toFixed(2) || 0} kWh</span>
-    <span class="kv"><b>Verbrauch:</b> ${v.Hausverbrauch?.toFixed(2) || 0} kWh</span>
-    <span class="kv"><b>Netzbezug:</b> ${v.Netz?.toFixed(2) || 0} kWh</span>
+    <span class="kv"><b>Produktion:</b> ${prod.toFixed(2)} kWh</span>
+    <span class="kv"><b>Verbrauch:</b> ${cons.toFixed(2)} kWh</span>
+    <span class="kv"><b>Netzbezug:</b> ${grid.toFixed(2)} kWh</span>
   `;
 
-  const donut = (t, p, c) => {
+  // Donut-Renderer
+  const donut = (title, percent, color) => {
     const r = 56;
     const C = 2 * Math.PI * r;
-    const dash = (Math.max(0, Math.min(100, p)) / 100) * C;
+    const p = Math.max(0, Math.min(100, percent));
+    const dash = (p / 100) * C;
 
     return `
       <div style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;">
-        <div style="font-weight:900">${t}</div>
+        <div style="font-weight:900">${title}</div>
 
         <div style="position:relative;width:160px;height:160px;">
           <svg width="160" height="160" viewBox="0 0 160 160">
@@ -169,37 +186,55 @@ function render(data){
                     stroke="rgba(255,255,255,0.18)"
                     stroke-width="18"
                     fill="none" />
-
             <circle cx="80" cy="80" r="${r}"
-                    stroke="${c}"
+                    stroke="${color}"
                     stroke-width="18"
                     fill="none"
                     stroke-linecap="butt"
                     stroke-dasharray="${dash} ${C}"
                     transform="rotate(-90 80 80)"
-                    style="filter: drop-shadow(0 0 12px ${c});" />
+                    style="filter: drop-shadow(0 0 12px ${color});" />
           </svg>
 
           <div style="position:absolute;inset:0;
                       display:flex;align-items:center;justify-content:center;
                       font-size:24px;font-weight:900;">
-            ${Number(p).toFixed(1)}%
+            ${p.toFixed(1)}%
           </div>
         </div>
       </div>
     `;
   };
 
-  const prod = v.Produktion || 0;
-  const cons = v.Hausverbrauch || 0;
-  const grid = v.Netz || 0;
-  const eigen = Math.max(cons - grid, 0);
-
+  // Donuts einsetzen
   elGrid.innerHTML =
     donut('Eigenverbrauchsquote', prod ? (eigen / prod * 100) : 0, '#63B3FF') +
     donut('Autarkiegrad',        cons ? (eigen / cons * 100) : 0, '#A855F7');
+
+  // Erklärtexte unter den Kreisen
+  elExplain.innerHTML = `
+    <div>
+      <b>Eigenverbrauchsquote:</b>
+      Anteil des selbst erzeugten Stroms, der direkt im eigenen Haushalt verbraucht wird.
+    </div>
+    <div style="margin-top:6px;">
+      <b>Autarkiegrad:</b>
+      Anteil des gesamten Stromverbrauchs, der durch eigene Stromerzeugung gedeckt wird.
+    </div>
+  `;
 }
 
+document.getElementById('explain').innerHTML = `
+  <div>
+    <b>Eigenverbrauchsquote:</b>
+    Anteil des selbst erzeugten Stroms, der direkt im eigenen Haushalt verbraucht wird.
+  </div>
+  <div style="margin-top:6px;">
+    <b>Autarkiegrad:</b>
+    Anteil des gesamten Stromverbrauchs, der durch eigene Stromerzeugung gedeckt wird.
+  </div>
+`;
+
   window.handleMessage = d=>{
     try{if(typeof d==='string')d=JSON.parse(d)}catch{}
     render(d);