Zustand Driver Web

public/style.css

@@ -33,12 +33,25 @@ h1 {
 }
 
 /* Grid: mind. 500px pro Spalte, beliebig viele */
+
 .sections {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
-    gap: 10px;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 16px;
 }
 
+
+.section {
+    grid-column: span 2;
+}
+
+
+.section.half {
+    grid-column: span 1;
+}
+
+
+
 /* Section Card */
 .section {
     background: var(--panel);
@@ -106,4 +119,25 @@ h1 {
 /* ❌ DISCONNECTED */
 .section#senders li.disconnected::before {
     content: "⛔";
+}
+
+.state-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(25px, 1fr));
+    gap: 30px 30px;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.state-grid li {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0;
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+
+.state-grid span:first-child {
+    color: var(--accent);
+    font-weight: bold;
 }