Design E-Stop

public/style.css

@@ -127,6 +127,40 @@ h1 {
     content: "🟡";
 }
 
+/* Shelly / EmergencyStop: CSS-Kreis statt Emoji (volle Farbkontrolle) */
+.section#senders li.shelly::before {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 1px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    /* Default: hellblau — Strom vorhanden, Shelly bereit */
+    background: #89bcde;
+    box-shadow: 0 0 0 1px rgba(0, 30, 60, 0.4);
+}
+
+/* Gestoppt: weiß — Strom wurde abgeschaltet */
+.section#senders li.shelly.stopped::before {
+    background: #dce9f5;
+    box-shadow: 0 0 0 1px rgba(100, 160, 210, 0.5);
+}
+
+/* Fehler: gedämpftes Rot */
+.section#senders li.shelly.error::before {
+    background: #9a3a3a;
+    box-shadow: 0 0 0 1px rgba(60, 0, 0, 0.5);
+}
+
+/* Getrennt / unbekannt: Grau */
+.section#senders li.shelly.disconnected::before {
+    background: #4a5a6a;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
+
 .state-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
@@ -302,8 +336,8 @@ h1 {
     color: var(--muted);
 }
 
-.estop-armed-label.armed    { color: #e74c3c; }
-.estop-armed-label.disarmed { color: #2ecc71; }
+.estop-armed-label.armed    { color: #e74c3c; }      /* Rot: Gefahr, bewusst laut */
+.estop-armed-label.disarmed { color: #89bcde; }      /* Hellblau: ruhig, stromlos */
 
 .btn {
     display: inline-block;
@@ -323,23 +357,23 @@ h1 {
     cursor: not-allowed;
 }
 
-/* Alarm-Unlock: Bernstein / Orange — Recovery-Aktion */
+/* Alarm-Unlock: ruhiges Blau — passend zum Stromloszustand */
 .btn-unlock {
-    background: #c87800;
-    color: #fff;
+    background: #2a6496;
+    color: #e8f2fa;
 }
 
 .btn-unlock:hover:not(:disabled) {
-    background: #a56200;
+    background: #1e4d73;
 }
 
-/* Status-Zeile unterhalb des Buttons */
+/* Status-Zeile unterhalb der Buttons — immer weiß/hell, keine Signalfarben */
 .estop-status {
     font-size: 13px;
     min-height: 18px;
     color: var(--text);
-    opacity: 0.7;
+    opacity: 0.65;
 }
 
-.estop-status.ok  { color: #2ecc71; opacity: 1; }
-.estop-status.err { color: #e74c3c; opacity: 1; }
+.estop-status.ok  { color: var(--text); opacity: 0.9; }
+.estop-status.err { color: var(--text); opacity: 0.9; }