Raum-Modal: Bedienelemente statt Kommandoliste

Das Modal zeigte jedes Kommando so, wie es in der Datenbank steht: eine
Jalousie kam mit acht Rohbefehlen daher, darunter "Winken", die Farbe einer
Lampe als drei Zahlenfelder 0-255, ein Stromzaehler als abgeschnittene
Textzeile. Die Solltemperatur stand doppelt da - einmal als Schieberegler,
einmal als Zahlenfeld der Thermostat-Karte.

Jetzt entscheidet restricted/roomControls.php, welches Geraet welches
Bedienelement bekommt, und zwar an seinen Faehigkeiten statt am Typnamen:
hat es ein "setClosure"? ein An/Aus-Paar? drei Parameter rot/gruen/blau?
Damit bekommt auch ein neu gefundenes Geraet sein passendes Element, ohne
dass jemand einen Typnamen nachtraegt.

  Beschattung   Auf/Stop/Zu, darunter Position und Neigung als Schieber
                auf dem zuletzt gemeldeten Stand; "Winken" und
                "my-Position" im Mehr-Menue
  Licht         Kippschalter, Helligkeit, Farbwaehler des Browsers,
                Effekt und Preset als Auswahl
  Schalten      ein Kippschalter statt dreier Knoepfe
  Messwerte     Wertegitter, die sechs wichtigsten sichtbar - beim
                Wasserzaehler standen vorher MAC-Adresse und freier
                Speicher vorn und der Verbrauch hinter "12 weitere"
  Heizung       nur noch der Schieberegler, daneben Ist-Temperatur und
                Feuchte live aus dem MQTT-Strom

Ab zwei Geraeten einer Art ordnet eine Ueberschrift; darunter waere sie
nur Aufwand. Schieberegler schicken beim Loslassen, nicht beim Ziehen -
sonst bekaeme eine Jalousie bei jedem Pixel ein neues Ziel. Waehrend ein
Kommando unterwegs ist, sperrt sich die Karte sichtbar: ein "Zu" dauert
ueber eine Minute, und ohne Sperre tippt man in der Zeit nach.

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

css/solar.css

@@ -111,3 +111,91 @@ input[type='range']::-webkit-slider-runnable-track {
 .input-group.raum-cmd > .form-select {
   min-width: 5rem;
 }
+
+
+/* --------------------------------------------------------------------------
+   Raum-Modal: Bedienelemente
+   Erzeugt von restricted/roomControls.php, verdrahtet in js/solar/homeMQTT.js.
+   -------------------------------------------------------------------------- */
+
+/* Ueberschrift einer Geraetegruppe (Beschattung, Licht, ...). Klein und
+   ruhig - sie ordnet, sie soll nicht mit den Geraeten um Aufmerksamkeit
+   ringen. */
+.raum-gruppe {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin: 0.75rem 0 0.35rem;
+}
+.raum-gruppe:first-child {
+  margin-top: 0;
+}
+
+/* Waehrend ein Kommando unterwegs ist. Ein "Zu" an einer Jalousie dauert
+   ueber eine Minute; ohne sichtbare Sperre tippt man in der Zeit nach. */
+.raum-geraet.raum-warte {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.raum-geraet.raum-warte::after {
+  content: "";
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 0.9rem;
+  height: 0.9rem;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: raum-dreht 0.8s linear infinite;
+}
+.raum-geraet {
+  position: relative;
+}
+@keyframes raum-dreht {
+  to { transform: rotate(360deg); }
+}
+
+/* Schieberegler stehen dicht untereinander (Position und Neigung). Ohne den
+   Abstand kleben Beschriftung und Bahn aneinander. */
+.raum-regler + .raum-regler {
+  margin-top: 0.35rem;
+}
+.raum-regler .form-range {
+  margin-bottom: 0;
+}
+
+/* Messwerte als Gitter statt als Textwurst: ein Stromzaehler hat sechzehn
+   Werte, die in einer Zeile niemand findet. auto-fill statt fester Spalten,
+   damit auf dem Handy zwei und auf dem Schirm vier nebeneinander passen. */
+.raum-werte {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
+  gap: 0.4rem;
+}
+.raum-wert {
+  background: rgba(128, 128, 128, 0.08);
+  border-radius: 0.35rem;
+  padding: 0.3rem 0.45rem;
+  overflow: hidden;
+}
+.raum-wert-zahl {
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.raum-wert-einheit {
+  font-size: 0.7rem;
+  font-weight: 400;
+  opacity: 0.7;
+}
+.raum-wert-name {
+  font-size: 0.68rem;
+  opacity: 0.7;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}