Solar: neue Energiefluss-Uebersicht, anpassbar je Haus

Das feste realtime.svg ist ersetzt durch einen Katalog
(js/solar/energieflussKatalog.js: jeder Kreis einmal, samt Werten aus MQTT)
und einen Renderer (js/solar/energiefluss.js): Ringe mit Segmenten,
Fluesse als Boegen mit laufenden Punkten, Fuellstandswelle fuer Batterie
und Auto, animierte Symbole, Plaketten, Hochkant-Ansicht auf schmalen
Schirmen. Hierarchie und Lage wie bisher: Quellen -> Wechselrichter ->
Verbrauch -> OG/EG/UG -> Wallboxen, Heizstab.

Einstellungen -> Uebersicht: Kreise ein/aus (Kinder ruecken eine Ebene
hoeher), Namen, Lage per Ziehen in der Vorschau, PV-Flaechen. Gespeichert
werden nur Abweichungen in homeMesh.energiefluss.

Der PV-Lageplan hinter der Sonne liegt unveraendert als assets/img/pvplan.svg
und ist ueber den Umschalter Uebersicht/Anlage erreichbar.

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

restricted/solar.php

@@ -1,3 +1,4 @@
+<?php require_once(__DIR__ . "/energiefluss.php"); ?>
 <style>
 .datepicker-native {
     position: relative;
@@ -47,22 +48,36 @@
       <!--begin::Row-->
       <div class="row">
         <!-- Start col -->
+        <!-- Energiefluss. Gezeichnet von js/solar/energiefluss.js aus dem Katalog
+             (energieflussKatalog.js) und den Einstellungen dieses Hauses
+             (Einstellungen -> Übersicht). Bis September 2026 stand hier
+             assets/img/realtime.svg mit festen Kreisen. -->
         <div class="col-xxl-12 col-xl-12 d-flex align-items-stretch">
-          <div class="card p-0 mb-4" style="width:100%">
-            <div class="card-header pb-0 pt-1">
-              <h3 class="card-title">Realtime</h3>
+          <div class="card p-0 mb-4" style="width:100%" id="energieflussKarte">
+            <div class="card-header pb-1 pt-1 d-flex align-items-center">
+              <h3 class="card-title me-auto">Realtime</h3>
+              <div class="enf-umschalter me-2" role="tablist" aria-label="Ansicht">
+                <button type="button" class="btn btn-sm active" role="tab" aria-selected="true" data-enf-ansicht="fluss">Übersicht</button>
+                <button type="button" class="btn btn-sm" role="tab" aria-selected="false" data-enf-ansicht="anlage">Anlage</button>
+              </div>
               <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
-                  <i class="bi bi-x-lg"></i>
-                </button>
+                <a class="btn btn-tool" href="index.php?action=settings#energiefluss" title="Übersicht einstellen">
+                  <i class="bi bi-sliders"></i>
+                </a>
               </div>
             </div>
-            <div class="card-body p-0 d-flex flex-column" id="realtimeSVGcontainer" style="position:relative;max-height:800px;">
-              <?php readfile(__DIR__ . "/../assets/img/realtime.svg"); ?>
+            <div class="card-body p-2 p-md-3">
+              <div class="enf-ansicht enf-behaelter" data-enf-ansicht-flaeche="fluss" id="energiefluss"></div>
+              <div class="enf-ansicht" data-enf-ansicht-flaeche="anlage" hidden>
+                <?php readfile(__DIR__ . "/../assets/img/pvplan.svg"); ?>
+              </div>
             </div>
           </div>
-          <!-- /.card -->
         </div>
+        <script>
+          // Abweichungen dieses Hauses vom Katalog, siehe restricted/energiefluss.php.
+          const energieflussEinstellungen = <?= json_encode((object)energieflussLaden(), JSON_UNESCAPED_UNICODE) ?>;
+        </script>
 
         <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
           <div class="card p-0 mb-4" style="width:100%">