diff --git a/Energy_Pie/module.html b/Energy_Pie/module.html
index ccc22ce..3a1ad84 100644
--- a/Energy_Pie/module.html
+++ b/Energy_Pie/module.html
@@ -39,59 +39,67 @@
@media (max-width: 720px) {
#grid { grid-template-columns: 1fr !important; }
}
- /* Quantum-Waves Hintergrund */
+ /* Statischer "Fluid" Hintergrund in Donut-Farben */
#wrap{
position:relative;
overflow:hidden;
min-height:100vh;
+ /* Grundton, damit es nicht "lochig" wirkt */
+ background: rgba(18, 18, 22, 1);
}
- #wrap::before{
+ /* Nur EIN Layer, statisch */
+ #wrap::before{
content:"";
position:absolute;
- inset:-50%;
+ inset:-35%;
background:
- 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;
+ 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;
- }
- #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;
- }
+ }
+ /* Content über dem Background */
#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); }
- }
+ #period {
+ font-size: 15px; /* größer */
+ font-weight: 600; /* dicker */
+ letter-spacing: 0.2px;
+ opacity: 0.95;
+ }
+ /* Werte-Zeile (Produktion / Verbrauch / …) */
+ #hint {
+ margin-top: 6px;
+ font-size: 15px; /* größer */
+ font-weight: 700; /* noch etwas dicker */
+ 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;
+ }
+ }
+
+