Ueberall dasselbe Beschattungs-Symbol (bi-beschattung)

Raum-Modal, Zeitleiste und Automatik-Editor zeigten drei verschiedene
Zeichen; bi-blinds gibt es in der Icon-Schrift gar nicht. Das neue Symbol
liegt als CSS-Maske in solar.css und verhaelt sich wie ein Icon aus der
Schrift.

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

README.md

@@ -888,6 +888,7 @@ ausgeliefert.
 | Kreis der Energiefluss-Übersicht aus, umbenennen, verschieben; PV-Flächen | Einstellungen → Übersicht (keine Codeänderung) |
 | Neuer Kreis in der Energiefluss-Übersicht (Gerät, Etage, Quelle) | ein Eintrag in `js/solar/energieflussKatalog.js`; neues Symbol dazu in `SYMBOLE` (`energiefluss.js`) |
 | Neues Symbol auf einer Kachel | Name eines Bootstrap-Icons ins Feld tippen. Vorschlagsliste: `kachelSymbole()` in `kacheln.php` |
+| Symbol für eine Gerätegruppe (Raum-Modal, Zeitleiste, Editor) | ein Bootstrap-Icon in `raumGruppenTitel()` (`roomControls.php`), `zeitleisteBahnen()` (`zeitleiste.php`) und `GERAETE_SYMBOL` (`autoActionFuncs.js`) — überall dasselbe. Fehlt es in der Icon-Schrift, eine eigene Maske in `css/solar.css` anlegen (Vorbild: `bi-beschattung`) |
 | Neue Kennzahl in der Jahresstatistik | `KENNZAHLEN` **und** `kennzahlenAus()` in `ajax/getStats.php` — sonst nichts |
 | Neues Diagramm auf einer Seite | Karte in der Vorlage, `<canvas>`, dazu ein Endpunkt nach dem Muster von `getProdData.php`, geladen mit `getData()` |
 | Neue Seite | Zeile in `$pages` (`index.php`), Vorlage unter `restricted/`, Skript unter `js/solar/` |

css/solar.css

@@ -91,6 +91,26 @@ body.bg-body-tertiary,
 }
 .app-header { box-shadow: 0 1px 0 var(--ton-linie); }
 
+/* --- Eigene Symbole ------------------------------------------------------
+   Fuer Dinge, die Bootstrap Icons nicht kennt. Gezeichnet als Maske in
+   currentColor, damit sie sich wie ein Symbol aus der Schrift verhalten:
+   <i class="bi bi-beschattung"></i> - Groesse, Farbe und Ausrichtung wie
+   bei allen anderen. bootstrap-icons.min.css laedt nach dieser Datei, daher
+   .bi doppelt im Selektor.
+
+   bi-beschattung: Kasten, zwei Lamellen, Endleiste - ein Raffstore. Bewusst
+   nur vier Balken mit viel Luft dazwischen: mit Fuehrungsschienen und drei
+   Lamellen lief das Zeichen bei 16 px zu einem Block zusammen. Ueberall dasselbe: Raum-Modal, Zeitleiste, Editor.
+   -------------------------------------------------------------------------- */
+.bi.bi-beschattung::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.5%22 y=%221.6%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3Crect x=%222.6%22 y=%225.7%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%222.6%22 y=%228.6%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%221.5%22 y=%2211.8%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Crect x=%221.5%22 y=%221.6%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3Crect x=%222.6%22 y=%225.7%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%222.6%22 y=%228.6%22 width=%2210.8%22 height=%221.7%22 rx=%22.85%22/%3E%3Crect x=%221.5%22 y=%2211.8%22 width=%2213%22 height=%222.6%22 rx=%22.9%22/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
 /* --- Karten --------------------------------------------------------------
    Eine Karte ist eine Flaeche, kein Kasten: ein Ton heller als der Grund, eine
    Haarlinie als Rand, kein Schlagschatten. Der Schatten trennte frueher, was

js/solar/autoActionFuncs.js

@@ -392,10 +392,12 @@ function standardWert(spec) {
  * bekommt den Chip - lieber ein neutrales Zeichen als ein falsches.
  */
 const GERAETE_SYMBOL = {
-  "Außenjalousie":      "bi-shadows",
-  "Rollladen":          "bi-shadows",
-  "Screen":             "bi-shadows",
-  "Pergola":            "bi-umbrella",
+  // Alles, was beschattet, traegt dasselbe Zeichen wie im Raum-Modal und in
+  // der Zeitleiste (bi-beschattung, css/solar.css).
+  "Außenjalousie":      "bi-beschattung",
+  "Rollladen":          "bi-beschattung",
+  "Screen":             "bi-beschattung",
+  "Pergola":            "bi-beschattung",
   "ESP32 Thermostat":   "bi-thermometer-half",
   "Temperatur":         "bi-thermometer-half",
   "Heizung":            "bi-fire",

restricted/roomControls.php

@@ -178,9 +178,7 @@ function bedienform($d)
 function raumGruppenTitel()
 {
     return [
-        // "bi-blinds" gibt es in der eingebundenen Icon-Version nicht - die
-        // Kachel blieb leer. Ein eigenes Zeichen: Fensterrahmen mit Lamellen.
-        "beschattung" => ["Beschattung", "<svg viewBox='24 24' width='16' height='16' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round'><rect x='4' y='3' width='16' height='18' rx='1.5'/><path d='M4 7.5h16M4 12h16M4 16.5h16'/></svg>", "#60afbf"],
+        "beschattung" => ["Beschattung", "bi-beschattung", "#60afbf"],
         "heizung"     => ["Heizung", "bi-thermometer-half", "#e5624f"],
         "licht"       => ["Licht", "bi-lightbulb", "#f7c000"],
         "schalter"    => ["Schalten", "bi-toggle-on", "#6cbe58"],
@@ -219,7 +217,7 @@ function zeichneGruppen($gruppen, $fertig = [])
     foreach ($vorhanden as $form => $titel) {
         $leiste .= "<button type='button' role='tab' data-rf-reiter='" . $form . "'"
                  . " aria-selected='" . ($erste ? "true" : "false") . "' style='--c:" . $titel[2] . "'>"
-                 . "<span class='rf-sym'>" . (strpos($titel[1], "<svg") === 0 ? $titel[1] : "<i class='bi " . $titel[1] . "'></i>") . "</span>"
+                 . "<span class='rf-sym'><i class='bi " . $titel[1] . "'></i></span>"
                  . "<b>" . htmlspecialchars($titel[0]) . "</b>"
                  . "<span class='rf-st' data-rf-status='" . $form . "'></span></button>";
 

restricted/zeitleiste.php

@@ -38,7 +38,7 @@ function zeitleisteBahnen()
 {
     return [
         "licht"        => ["titel" => "Licht",        "symbol" => "bi-lightbulb"],
-        "beschattung"  => ["titel" => "Beschattung",  "symbol" => "bi-window-split"],
+        "beschattung"  => ["titel" => "Beschattung",  "symbol" => "bi-beschattung"],
         "heizung"      => ["titel" => "Heizung",      "symbol" => "bi-thermometer-half"],
         "bewaesserung" => ["titel" => "Bewässerung",  "symbol" => "bi-droplet"],
         "schalter"     => ["titel" => "Schalter",     "symbol" => "bi-toggle-on"],