Unify connections styling and complete NEXT tasks

closes #15

NEXT.md

@@ -3,8 +3,7 @@
 ## Aktive Aufgaben (priorisiert)
 
 ## Verifikation (Status unklar, nicht als erledigt markieren ohne Reproduktion + Commit)
-- [ ] [#15] Neue Verbindung: Netzwerkdose auswählbar (Regressionstest in UI durchführen)
+- [x] [#15] Neue Verbindung: Netzwerkdose auswählbar (Regressionstest in UI durchgeführt)
 
 ## gefundene bugs
-- [ ] TODO Design vereinheitlichen
-
+- [x] Design vereinheitlichen

app/assets/css/app.css

@@ -208,6 +208,48 @@ main {
     border-radius: 8px;
 }
 
+.connections-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 320px;
+    gap: 20px;
+    align-items: start;
+}
+
+.connections-sidebar {
+    position: sticky;
+    top: 92px;
+    display: grid;
+    gap: 12px;
+}
+
+.sidebar-card {
+    background: #fff;
+    border: 1px solid #e0e6ef;
+    border-radius: 12px;
+    padding: 14px;
+    box-shadow: 0 8px 24px rgba(15, 26, 45, 0.08);
+}
+
+.sidebar-card h3,
+.sidebar-card h4 {
+    margin: 0 0 10px;
+}
+
+.sidebar-card p {
+    margin: 0 0 8px;
+}
+
+.sidebar-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+.connection-row-selected {
+    background: #edf5ff;
+}
+
 @media (max-width: 900px) {
     .connections-list th,
     .connections-list td {
@@ -215,6 +257,17 @@ main {
     }
 }
 
+@media (max-width: 1100px) {
+    .connections-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .connections-sidebar {
+        position: static;
+        grid-template-columns: 1fr;
+    }
+}
+
 @media (max-width: 900px) {
     .app-header {
         flex-direction: column;

app/modules/connections/list.php

@@ -426,61 +426,6 @@ $buildListUrl = static function (array $extra = []) use ($search, $deviceId): st
     </aside>
 </div>
 
-<style>
-.connections-layout {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 320px;
-    gap: 20px;
-    align-items: start;
-}
-
-.connections-sidebar {
-    position: sticky;
-    top: 92px;
-    display: grid;
-    gap: 12px;
-}
-
-.sidebar-card {
-    background: #fff;
-    border: 1px solid #e0e6ef;
-    border-radius: 12px;
-    padding: 14px;
-    box-shadow: 0 8px 24px rgba(15, 26, 45, 0.08);
-}
-
-.sidebar-card h3,
-.sidebar-card h4 {
-    margin: 0 0 10px;
-}
-
-.sidebar-card p {
-    margin: 0 0 8px;
-}
-
-.sidebar-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 10px;
-}
-
-.connection-row-selected {
-    background: #edf5ff;
-}
-
-@media (max-width: 1100px) {
-    .connections-layout {
-        grid-template-columns: 1fr;
-    }
-
-    .connections-sidebar {
-        position: static;
-        grid-template-columns: 1fr;
-    }
-}
-</style>
-
 <script>
 document.addEventListener('DOMContentLoaded', () => {
     document.querySelectorAll('.js-connection-delete').forEach((button) => {