diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index 6397d9b..d399aaf 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -92,6 +92,22 @@
     letter-spacing: 0.3px;
     opacity: 1;
     }
+    #hint .kv {
+    display: inline-block;
+    margin-right: 14px;
+    white-space: nowrap;
+    }
+    #hint .kv b {
+    font-weight: 800;
+    }
+
+    /* App/kleine Breite: untereinander */
+    @media (max-width: 720px) {
+    #hint .kv {
+        display: block;
+        margin: 4px 0;
+        }
+    }
 
 
 </style>
@@ -202,60 +218,55 @@ function donutCard({ title, percent, subtitle, color }) {
   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.18);
-                backdrop-filter: blur(6px);">
+return `
+  <div style="padding:18px 10px;
+              width:100%;
+              display:flex;
+              flex-direction:column;
+              align-items:center;
+              justify-content:center;
+              gap:12px;">
 
-      <div style="font-size:14px;font-weight:700;opacity:.9;">
-        ${escapeHtml(title)}
-      </div>
+    <div style="font-size:15px;font-weight:800;opacity:.95;">
+      ${escapeHtml(title)}
+    </div>
 
-      <div style="position:relative;width:180px;height:180px;">
-        <svg width="180" height="180" viewBox="0 0 180 180">
+    <div style="position:relative;width:180px;height:180px;">
+      <svg width="180" height="180" viewBox="0 0 180 180">
 
-          <!-- 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)" />
+        <!-- Restsegment -->
+        <circle cx="90" cy="90" r="${r}"
+                fill="none"
+                stroke="rgba(255,255,255,0.22)"
+                stroke-width="18"
+                stroke-linecap="butt"
+                stroke-dasharray="${rest} ${dash}"
+                stroke-dashoffset="${-dash}"
+                transform="rotate(-90 90 90)" />
 
-          <!-- 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>
+        <!-- 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 12px ${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 style="position:absolute;inset:0;display:flex;
+                  align-items:center;justify-content:center;
+                  font-weight:900;font-size:26px;">
+        ${escapeHtml(percent.toFixed(1))}%
       </div>
     </div>
-  `;
+
+    <div style="font-size:13px;opacity:.75;text-align:center;">
+      ${escapeHtml(subtitle)}
+    </div>
+  </div>
+`;
 }
 
   function render(data) {
@@ -289,8 +300,12 @@ function donutCard({ title, percent, subtitle, color }) {
     if (data?.hasData === false) {
       elHint.textContent = 'Keine Logdaten für den gewählten Zeitraum.';
     } else {
-      elHint.textContent =
-        `Produktion: ${prod.toFixed(2)} kWh · Verbrauch: ${cons.toFixed(2)} kWh · Netzbezug: ${grid.toFixed(2)} kWh · Eigenverbrauch: ${eigenClamped.toFixed(2)} kWh`;
+      elHint.innerHTML = `
+        <span class="kv"><b>Produktion:</b> ${escapeHtml(prod.toFixed(2))} kWh</span>
+        <span class="kv"><b>Verbrauch:</b> ${escapeHtml(cons.toFixed(2))} kWh</span>
+        <span class="kv"><b>Netzbezug:</b> ${escapeHtml(grid.toFixed(2))} kWh</span>
+        <span class="kv"><b>Eigenverbrauch:</b> ${escapeHtml(eigenClamped.toFixed(2))} kWh</span>
+        `;
     }
 
     elGrid.innerHTML = [