Kachelsymbole: jedes Bootstrap-Icon statt einer Handvoll

Fuer die Symbole vor den Zahlen standen drei Codepunkte von Hand in
rooms.php, und die Maske bot genau diese drei an. Jedes weitere Symbol waere
eine Codeaenderung gewesen.

Die Codepunkte stehen aber schon im Haus: css/bootstrap-icons.min.css fuehrt
sie unter .bi-<name>::before - dieselbe Quelle, aus der auch der Browser
liest. bootstrapIcons() liest sie von dort (2078 Stueck, einmal je Anfrage),
kachelIcon() schlaegt darin nach. Damit ist jedes Symbol moeglich, und ein
Versionswechsel der Icons zieht von selbst mit.

In der Maske steht deshalb kein Auswahlfeld mehr, sondern der Name mit einer
Vorschau davor - "moisture" sagt nichts, das Symbol daneben schon. Die
Vorschlagsliste beginnt mit gut dreissig ueblichen Symbolen unter deutscher
Beschriftung (Temperatur, Feuchte, Leistung, Wallbox, Regen ...), danach folgt
der ganze Rest alphabetisch. Ein Name, den es nicht gibt, zeigt sofort ein
rotes Fragezeichen und wird beim Speichern mit Begruendung abgelehnt.

In der eingeklappten Kurzfassung einer Kachel steht das Symbol jetzt mit -
es ist das schnellste Erkennungszeichen dafuer, welcher der drei Werte
gemeint ist.

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

css/solar.css

@@ -1927,6 +1927,7 @@ input[type='range']::-webkit-slider-runnable-track {
   white-space: nowrap;
 }
 .kachel-chip.leer { font-style: italic; }
+.kachel-chip .bi { margin-right: .3rem; opacity: .8; }
 
 .kachel-editor {
   padding: .25rem .75rem .75rem;
@@ -1937,13 +1938,31 @@ input[type='range']::-webkit-slider-runnable-track {
    untereinander - die Felder sind zu kurz, um sie zu quetschen. */
 .kachel-wert {
   display: grid;
-  grid-template-columns: 7.5rem minmax(10rem, 1fr) 7rem 5.5rem 4rem auto;
+  grid-template-columns: 7.5rem minmax(10rem, 1fr) 7rem 5.5rem 9.5rem auto;
   gap: .4rem;
   align-items: center;
   padding: .5rem 0;
   border-bottom: 1px dashed var(--ton-linie, rgba(138, 148, 158, .2));
 }
 .kachel-wert:last-of-type { border-bottom: 0; }
+/* Symbolname mit Vorschau davor: die Vorschau sagt, was der Name bedeutet -
+   "moisture" allein sagt es nicht. */
+.kachel-wert .kw-symbol {
+  display: flex;
+  align-items: center;
+  gap: .35rem;
+}
+.kachel-wert .kw-symbol-schau {
+  flex: none;
+  width: 1.5rem;
+  text-align: center;
+  font-size: 1.05rem;
+  line-height: 1;
+  color: var(--ton-schrift-2, #9aa6ad);
+}
+.kachel-wert .kw-symbol-schau .unbekannt { color: var(--ton-schlecht, #e06060); }
+.kachel-wert .kw-symbol input { min-width: 0; }
+
 .kachel-wert .kw-schalter {
   display: flex;
   align-items: center;