Uebersicht: Ladestaende deutlicher, dunkle Bahn unter den Punkten weg

Die Fuellung war mit 14 Prozent Deckung kaum zu sehen; jetzt 22 Prozent,
beim Laden 32, dazu die Wasserlinie als eigene Kante. Ohne gemeldeten Stand
bleibt die Fuellung ganz weg - eine Wallbox ohne Auto zeigte sonst eine
Linie am unteren Rand. Das Bett ist nur noch eine duenne Linie und
verschwindet, sobald Punkte laufen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

css/solar.css

@@ -3560,10 +3560,19 @@ svg.enf.enf-hoch { max-height: none; }
 /* --- Füllstand als Welle ------------------------------------------------ */
 .enf .enf-fuellung {
   --r: 67;
+  opacity: 0;
   transform: translateY(calc(var(--r) * (1 - 2 * var(--stand)) * 1px));
-  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
+  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1), opacity .6s;
 }
-.enf .enf-welle { fill: var(--farbe); fill-opacity: .14; animation: enf-wogen 8s linear infinite; }
+/* Ladestand: Flaeche etwas kraeftiger als frueher, dazu die Wasserlinie als
+   eigene Kante - so sieht man auf einen Blick, wie voll Akku oder Auto sind. */
+.enf .enf-stand .enf-fuellung { opacity: 1; }
+.enf .enf-welle { fill: var(--farbe); fill-opacity: .22; animation: enf-wogen 8s linear infinite; }
+.enf .enf-welle-kante {
+  fill: none; stroke: var(--farbe); stroke-width: 2.2; stroke-opacity: .85;
+  animation: enf-wogen 8s linear infinite;
+}
+.enf .enf-laden .enf-welle { fill-opacity: .32; }
 @keyframes enf-wogen { to { transform: translateX(calc(var(--r) * 2px)); } }
 
 /* --- Symbole ------------------------------------------------------------ */
@@ -3613,12 +3622,14 @@ svg.enf.enf-hoch { max-height: none; }
 
 /* --- Flüsse -------------------------------------------------------------- */
 .enf .enf-bett {
-  fill: none; stroke: #252b31; stroke-linecap: round;
+  fill: none; stroke: #2b333a; stroke-linecap: round;
-  stroke-width: calc(var(--breite, 0) * .7px + 5px);
+  stroke-width: 2.5;
   stroke-dasharray: 1 1; stroke-dashoffset: 1;
-  transition: stroke-width .8s;
+  transition: opacity .6s;
   animation: enf-zeichnen .9s cubic-bezier(.5, 0, .2, 1) forwards; animation-delay: var(--verz);
 }
+/* Fliesst etwas, tragen die Punkte den Weg allein. */
+.enf .enf-fluss:not(.enf-still) .enf-bett { opacity: 0; }
 @keyframes enf-zeichnen { to { stroke-dashoffset: 0; } }
 .enf .enf-strom,
 .enf .enf-strom-hof {

js/solar/energiefluss.js

@@ -366,10 +366,12 @@
         const ri = r - 11;
         fuellung = el("g", { class: "enf-fuellung", style: `--stand:0;--r:${ri}` }, clip);
         const b = ri * 4;
-        el("path", {
+        const bogen = `M${-b} 0 q${ri / 2} -9 ${ri} 0` + ` t${ri} 0`.repeat(7);
-          class: "enf-welle",
+        el("path", { class: "enf-welle", d: bogen + ` V${ri * 2} H${-b} Z` }, fuellung);
-          d: `M${-b} 0 q${ri / 2} -9 ${ri} 0` + ` t${ri} 0`.repeat(7) + ` V${ri * 2} H${-b} Z`,
+        // Dieselbe Linie noch einmal als Kante: die Flaeche allein ist so
-        }, fuellung);
+        // blass, dass man den Ladestand suchen muss. Die Kante zeichnet die
+        // Wasserlinie scharf nach.
+        el("path", { class: "enf-welle-kante", d: bogen }, fuellung);
       }
 
       const symbol = el("g", {
@@ -525,6 +527,9 @@
       const zu = z.zustand || {};
       e.g.classList.toggle("enf-an", !!zu.an);
       e.g.classList.toggle("enf-laden", !!zu.laden);
+      // Ohne gemeldeten Stand bleibt die Fuellung ganz weg: sonst stuende
+      // bei einer Wallbox ohne Auto eine Wasserlinie am unteren Rand.
+      e.g.classList.toggle("enf-stand", zu.stand !== undefined && isFinite(zu.stand));
       if (zu.stand !== undefined && isFinite(zu.stand)) {
         const s = Math.max(0, Math.min(1, zu.stand)).toFixed(3);
         if (e.g.style.getPropertyValue("--stand") !== s) {