Geräte: SSH-Zugangsdaten mit Kategorien, PoE-Neustart nur wenn möglich

- credentials: neue Spalte 'category' (Switch/Linux-Client/
  Windows-Client/Router), Grundlage für die geplante SSH-basierte
  Wartungsfunktion (Bulk-Updates); Löschschutz prüft jetzt zusätzlich
  devices.credential_id, nicht mehr nur switches.credential_id
- devices: optionale SSH-Zugangsdaten + SSH-Port je Gerät, inkl.
  "Verbindung testen"-Terminal wie bei Switches
- Dashboard: PoE-Neustart-Button wird für Geräte ohne zugewiesenen
  Switch/Port komplett ausgeblendet (nicht nur ausgegraut), da für
  diese kein PoE-Reset über poe.sh möglich ist; Button bleibt
  ausschließlich für den PoE-Neustart über den Switch zuständig
- Schließen-Button im Geräte-Modal immer rechts, unabhängig davon
  welche Aktions-Buttons gerade sichtbar sind
- "Port" im Geräte-Formular zu "Switchport" umbenannt und von
  "SSH-Port" klar abgegrenzt (unterschiedliche Konzepte: physischer
  Switch-Port fürs PoE vs. TCP-Port für SSH)
- .btn:disabled greift jetzt echtes Grau statt nur reduzierter
  Deckkraft der jeweiligen Button-Farbe

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

srv/poe_manager/templates/credentials.html

@@ -3,6 +3,7 @@
 {% set can_create = current_user.has_permission('credentials.create') %}
 {% set can_edit = current_user.has_permission('credentials.edit') %}
 {% set can_delete = current_user.has_permission('credentials.edit') %}
+{% set category_labels = dict(categories) %}
 {% block page_title %}Zugangsdaten{% endblock %}
 {% block page_sub %}<div class="topbar-sub">{{ credentials|length }} Zugangsdaten</div>{% endblock %}
 
@@ -27,20 +28,29 @@
     <thead><tr>
       <th data-sort-key="name">Name</th>
       <th data-sort-key="username">Username</th>
+      <th data-sort-key="category">Kategorie</th>
       <th data-sort-key="usage">Verwendet von</th>
       <th style="width:1%;">Aktionen</th>
     </tr></thead>
     <tbody>
       {% for c in credentials %}
-      <tr data-sort-name="{{ c['name']|lower }}" data-sort-username="{{ c['username']|lower }}" data-sort-usage="{{ c['switch_count'] }}">
+      {% set usage_total = c['switch_count'] + c['device_count'] %}
+      <tr data-sort-name="{{ c['name']|lower }}" data-sort-username="{{ c['username']|lower }}" data-sort-category="{{ c['category'] }}" data-sort-usage="{{ usage_total }}">
         <td class="cell-name">{{ c['name'] }}</td>
         <td class="mono">{{ c['username'] }}</td>
-        <td class="text-dim">{{ c['switch_count'] }} Switch{{ 'e' if c['switch_count'] != 1 else '' }}</td>
+        <td>{{ category_labels.get(c['category'], c['category']) }}</td>
+        <td class="text-dim">
+          {% if usage_total == 0 %}—{% else %}
+            {% if c['switch_count'] %}{{ c['switch_count'] }} Switch{{ 'e' if c['switch_count'] != 1 else '' }}{% endif %}
+            {% if c['switch_count'] and c['device_count'] %}, {% endif %}
+            {% if c['device_count'] %}{{ c['device_count'] }} Gerät{{ 'e' if c['device_count'] != 1 else '' }}{% endif %}
+          {% endif %}
+        </td>
         <td>
           <div class="row-actions">
             {% if can_edit %}
             <button class="icon-btn" title="Bearbeiten"
-                    onclick="openEditCredentialModal({{ c['id'] }}, '{{ c['name'] }}', '{{ c['username'] }}')">
+                    onclick="openEditCredentialModal({{ c['id'] }}, '{{ c['name'] }}', '{{ c['username'] }}', '{{ c['category'] }}')">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>
             </button>
             {% endif %}
@@ -56,7 +66,7 @@
         </td>
       </tr>
       {% else %}
-      <tr class="empty-row"><td colspan="4">Noch keine Zugangsdaten vorhanden.</td></tr>
+      <tr class="empty-row"><td colspan="5">Noch keine Zugangsdaten vorhanden.</td></tr>
       {% endfor %}
     </tbody>
   </table>
@@ -80,6 +90,14 @@
         <div class="field"><label>Username</label>
           <input type="text" name="username" required placeholder="z.B. admin">
         </div>
+        <div class="field"><label>Kategorie</label>
+          <select name="category">
+            {% for key, label in categories %}
+            <option value="{{ key }}">{{ label }}</option>
+            {% endfor %}
+          </select>
+          <div class="hint">Bestimmt u.a., ob diese Zugangsdaten unter „Wartung“ für Bulk-Updates nutzbar sind.</div>
+        </div>
         <div class="field"><label>Passwort</label>
           <input type="password" id="password_add" name="password" required>
         </div>
@@ -115,6 +133,13 @@
         <div class="field"><label>Username</label>
           <input type="text" name="username" id="edit_cred_username" required>
         </div>
+        <div class="field"><label>Kategorie</label>
+          <select name="category" id="edit_cred_category">
+            {% for key, label in categories %}
+            <option value="{{ key }}">{{ label }}</option>
+            {% endfor %}
+          </select>
+        </div>
         <div class="field"><label>Neues Passwort</label>
           <input type="password" id="password_edit" name="password" placeholder="Nur bei Änderung ausfüllen">
         </div>
@@ -136,10 +161,11 @@
 
 {% block scripts %}
 <script>
-function openEditCredentialModal(id, name, username) {
+function openEditCredentialModal(id, name, username, category) {
     document.getElementById("edit_cred_id").value = id;
     document.getElementById("edit_cred_name").value = name;
     document.getElementById("edit_cred_username").value = username;
+    document.getElementById("edit_cred_category").value = category;
     document.getElementById("password_edit").value = "";
     document.getElementById("password_confirm_edit").value = "";
     PoeUI.openModal("editCredentialModal");

srv/poe_manager/templates/devices.html

@@ -1,4 +1,7 @@
 {% extends "base.html" %}
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/xterm.css') }}">
+{% endblock %}
 {% set active_page = "devices" %}
 {% set can_toggle = current_user.has_permission('devices.edit') %}
 {% set can_create = current_user.has_permission('devices.create') %}
@@ -39,7 +42,7 @@
         <th data-sort-key="ip">IP-Adresse</th>
         <th data-sort-key="mac">MAC-Adresse</th>
         <th data-sort-key="switch">Switch</th>
-        <th data-sort-key="port">Port</th>
+        <th data-sort-key="port">Switchport</th>
         {% if can_toggle %}<th>Status</th>{% endif %}
         {% if show_actions_col %}<th style="width:1%;">Aktionen</th>{% endif %}
       </tr>
@@ -65,7 +68,7 @@
           <div class="row-actions">
             {% if can_edit %}
             <button class="icon-btn" title="Bearbeiten"
-                    onclick="openEditDeviceModal('{{ d['mac'] }}','{{ d['name'] }}','{{ d['rpi_ip'] }}','{{ d['port'] or '' }}')">
+                    onclick="openEditDeviceModal('{{ d['mac'] }}','{{ d['name'] }}','{{ d['rpi_ip'] }}','{{ d['port'] or '' }}','{{ d['ssh_port'] or '' }}','{{ d['credential_id'] or '' }}')">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>
             </button>
             <button class="icon-btn" title="Switch ändern"
@@ -115,8 +118,9 @@
           <input type="text" name="mac" required placeholder="z.B. AA:BB:CC:DD:EE:FF">
           <div class="invalid-feedback">Bitte eine gültige MAC-Adresse eingeben (xx:xx:xx:xx:xx:xx).</div>
         </div>
-        <div class="field"><label>Port</label>
+        <div class="field"><label>Switchport</label>
           <input type="text" name="port" placeholder="z.B. 3">
+          <div class="field-hint">Physische Port-Nummer AM SWITCH (z.B. Port 3 von 48), an dem das Gerät eingesteckt ist — für den PoE-Neustart. Kein Netzwerk-/TCP-Port, keine SSH-Anmeldung.</div>
         </div>
         <div class="field"><label>Switch (optional)</label>
           <select name="switch_hostname">
@@ -124,8 +128,42 @@
             {% for sw in switches %}<option value="{{ sw['hostname'] }}">{{ sw['hostname'] }}</option>{% endfor %}
           </select>
         </div>
+        <div class="permission-group-title">SSH-Zugriff (optional, z.B. für Update-Aktionen unter „Wartung“)</div>
+        <div class="field"><label>SSH-Port</label>
+          <input type="number" name="ssh_port" min="1" max="65535" placeholder="22 (Standard)">
+          <div class="field-hint">TCP-Netzwerk-Port für die SSH-Anmeldung an der IP-Adresse dieses Geräts (siehe Feld „IP-Adresse“ oben). Leer lassen, wenn Standard-Port 22 verwendet wird.</div>
+        </div>
+        <div class="field">
+          <label>Zugangsdaten</label>
+          <select name="credential_choice" class="credential-select" onchange="toggleNewCredentialFields(this)">
+            <option value="">Keine (nicht per SSH verwaltet)</option>
+            {% for c in all_credentials %}
+            <option value="{{ c['id'] }}" data-username="{{ c['username'] }}">{{ c['name'] }} ({{ c['category'] }})</option>
+            {% endfor %}
+            <option value="new">+ Neue Zugangsdaten anlegen</option>
+          </select>
+        </div>
+        <div class="new-credential-fields hidden">
+          <div class="field"><label>Name der Zugangsdaten</label>
+            <input type="text" name="new_credential_name" placeholder="z.B. Linux-Clients">
+          </div>
+          <div class="field"><label>Username</label>
+            <input type="text" name="new_credential_username" placeholder="z.B. admin">
+          </div>
+          <div class="field"><label>Passwort</label>
+            <input type="password" name="new_credential_password">
+          </div>
+          <div class="field"><label>Passwort bestätigen</label>
+            <input type="password" name="new_credential_password_confirm">
+            <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
+          </div>
+        </div>
       </div>
       <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" style="margin-right:auto;" onclick="openTerminal(this.closest('form'))">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 9l4 3-4 3M13 15h5"/></svg>
+          Verbindung testen
+        </button>
         <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
         <button type="submit" class="btn btn-primary">Hinzufügen</button>
       </div>
@@ -137,7 +175,7 @@
 {% if can_edit %}
 <!-- Modal: Bearbeiten -->
 <div class="modal-overlay" id="editDeviceModal">
-  <div class="modal">
+  <div class="modal" style="max-width:1000px;">
     <form method="post" onsubmit="return validateDeviceForm(this);">
       <input type="hidden" name="edit_device" value="1">
       <input type="hidden" name="old_mac" id="edit_old_mac">
@@ -157,11 +195,46 @@
           <input type="text" name="mac" id="edit_mac" required>
           <div class="invalid-feedback">Bitte eine gültige MAC-Adresse eingeben (xx:xx:xx:xx:xx:xx).</div>
         </div>
-        <div class="field"><label>Port</label>
+        <div class="field"><label>Switchport</label>
           <input type="text" name="port" id="edit_port">
+          <div class="field-hint">Portnummer am zugeordneten Switch, für den PoE-Neustart. Hat nichts mit dem SSH-Port unten zu tun.</div>
+        </div>
+        <div class="permission-group-title">SSH-Zugriff (optional, z.B. für Update-Aktionen unter „Wartung“)</div>
+        <div class="field"><label>SSH-Port</label>
+          <input type="number" name="ssh_port" id="edit_ssh_port" min="1" max="65535" placeholder="22 (Standard)">
+          <div class="field-hint">TCP-Netzwerk-Port für die SSH-Anmeldung an der IP-Adresse dieses Geräts (siehe Feld „IP-Adresse“ oben). Leer lassen, wenn Standard-Port 22 verwendet wird.</div>
+        </div>
+        <div class="field">
+          <label>Zugangsdaten</label>
+          <select name="credential_choice" id="edit_credential_choice" class="credential-select" onchange="toggleNewCredentialFields(this)">
+            <option value="">Keine (nicht per SSH verwaltet)</option>
+            {% for c in all_credentials %}
+            <option value="{{ c['id'] }}" data-username="{{ c['username'] }}">{{ c['name'] }} ({{ c['category'] }})</option>
+            {% endfor %}
+            <option value="new">+ Neue Zugangsdaten anlegen</option>
+          </select>
+        </div>
+        <div class="new-credential-fields hidden">
+          <div class="field"><label>Name der Zugangsdaten</label>
+            <input type="text" name="new_credential_name" placeholder="z.B. Linux-Clients">
+          </div>
+          <div class="field"><label>Username</label>
+            <input type="text" name="new_credential_username" placeholder="z.B. admin">
+          </div>
+          <div class="field"><label>Passwort</label>
+            <input type="password" name="new_credential_password">
+          </div>
+          <div class="field"><label>Passwort bestätigen</label>
+            <input type="password" name="new_credential_password_confirm">
+            <div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
+          </div>
         </div>
       </div>
       <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" style="margin-right:auto;" onclick="openTerminal(this.closest('form'))">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 9l4 3-4 3M13 15h5"/></svg>
+          Verbindung testen
+        </button>
         <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
         <button type="submit" class="btn btn-primary">Speichern</button>
       </div>
@@ -197,20 +270,58 @@
 </div>
 {% endif %}
 
+{% if can_create or can_edit %}
+<!-- Modal: SSH-Verbindungstest (echtes Terminal, zum Akzeptieren von Host-Keys
+     und Prüfen der Zugangsdaten, bevor das Gerät gespeichert wird) -->
+<div class="modal-overlay" id="terminalModal">
+  <div class="modal" style="max-width:720px;">
+    <div class="modal-header">
+      <h3>SSH-Verbindungstest</h3>
+      <button type="button" class="modal-close" data-close-modal onclick="closeTerminal()">&times;</button>
+    </div>
+    <div class="modal-body" style="padding:0;">
+      <div class="term-toolbar">
+        <div class="flex gap-2" style="align-items:center;">
+          <span id="termStatus" class="pill unknown">Bereit</span>
+          <span id="termTarget" class="text-faint mono" style="font-size:12px;"></span>
+        </div>
+        <button type="button" class="btn btn-sm btn-secondary" id="termPastePassword">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
+          Passwort einfügen
+        </button>
+      </div>
+      <div id="terminal" class="xterm-container"></div>
+    </div>
+    <div class="modal-footer">
+      <p class="text-faint" style="font-size:11.5px; margin-right:auto;">
+        Unbekannter Host-Key: "yes" bestätigt und merkt sich ihn dauerhaft.
+      </p>
+      <button type="button" class="btn btn-secondary" data-close-modal onclick="closeTerminal()">Schließen</button>
+    </div>
+  </div>
+</div>
+{% endif %}
+
 {% endblock %}
 
 {% block scripts %}
+<script src="{{ url_for('static', filename='js/vendor/xterm.js') }}"></script>
+<script src="{{ url_for('static', filename='js/vendor/xterm-addon-fit.js') }}"></script>
 <script>
 function resetDeviceForm() {
     document.querySelector("#deviceModal form").reset();
+    resetCredentialChoice("add");
 }
-function openEditDeviceModal(mac, name, ip, port) {
+function openEditDeviceModal(mac, name, ip, port, sshPort, credentialId) {
     document.getElementById("edit_old_mac").value = mac;
     document.getElementById("edit_name").value = name;
     document.getElementById("edit_ip").value = ip;
     document.getElementById("edit_mac").value = mac;
     document.getElementById("edit_port").value = port;
+    document.getElementById("edit_ssh_port").value = sshPort || "";
+    document.getElementById("edit_credential_choice").value = credentialId || "";
     PoeUI.openModal("editDeviceModal");
+    resetCredentialChoice("edit");
 }
 function openSwitchModal(mac, switchHostname) {
     document.getElementById("switch_mac").value = mac;
@@ -231,19 +342,163 @@ function validateMAC(input) {
     input.classList.toggle("is-invalid", !ok);
     return ok;
 }
+function validateNewCredentialPassword(form) {
+    const select = form.querySelector(".credential-select");
+    if (!select || select.value !== "new") return true;
+    const pass = form.querySelector("input[name='new_credential_password']");
+    const confirm = form.querySelector("input[name='new_credential_password_confirm']");
+    if (!pass || !confirm) return true;
+    if (pass.value !== confirm.value) { confirm.classList.add("is-invalid"); return false; }
+    confirm.classList.remove("is-invalid");
+    return true;
+}
 function validateDeviceForm(form) {
     const ipInput = form.querySelector("input[name='rpi_ip']");
     const macInput = form.querySelector("input[name='mac']");
     let valid = true;
     if (ipInput) valid = validateIP(ipInput) && valid;
     if (macInput) valid = validateMAC(macInput) && valid;
+    valid = validateNewCredentialPassword(form) && valid;
     return valid;
 }
 document.addEventListener("input", (e) => {
     if (e.target.name === "rpi_ip") validateIP(e.target);
     if (e.target.name === "mac") validateMAC(e.target);
+    if (e.target.name === "new_credential_password_confirm") {
+        const form = e.target.closest("form");
+        const pass = form.querySelector("input[name='new_credential_password']");
+        if (pass) e.target.classList.toggle("is-invalid", pass.value !== e.target.value);
+    }
 });
 
+function toggleNewCredentialFields(select) {
+    const fields = select.closest(".modal-body").querySelector(".new-credential-fields");
+    if (fields) fields.classList.toggle("hidden", select.value !== "new");
+}
+function resetCredentialChoice(id) {
+    // Beim Öffnen sicherstellen, dass die "Neue Zugangsdaten"-Felder passend
+    // zur aktuellen Auswahl ein-/ausgeblendet sind (relevant v.a. nach
+    // vorherigem Umschalten auf "neu" ohne zu speichern).
+    setTimeout(() => {
+        const select = document.querySelector(`#${id === 'add' ? 'deviceModal' : 'editDeviceModal'} .credential-select`);
+        if (select) toggleNewCredentialFields(select);
+    }, 0);
+}
+
+// -------------------------------------------------------------------------
+// SSH-Verbindungstest (Web-Terminal via /ws/ssh_terminal) — identisch zum
+// Muster in switches.html, nur mit rpi_ip statt ip als Feldname.
+// -------------------------------------------------------------------------
+let term = null, fitAddon = null, termSocket = null, activePasswordInput = null;
+
+function ensureTerminal() {
+    if (term) return;
+    term = new Terminal({
+        convertEol: true,
+        fontSize: 13,
+        fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
+        cursorBlink: true,
+        theme: { background: "#0a0c10", foreground: "#c7ccd6" },
+    });
+    fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(document.getElementById("terminal"));
+    fitAddon.fit();
+    term.onData((data) => {
+        if (termSocket && termSocket.readyState === WebSocket.OPEN) {
+            termSocket.send(JSON.stringify({ type: "input", data }));
+        }
+    });
+    term.onResize(({ cols, rows }) => {
+        if (termSocket && termSocket.readyState === WebSocket.OPEN) {
+            termSocket.send(JSON.stringify({ type: "resize", cols, rows }));
+        }
+    });
+    window.addEventListener("resize", () => fitAddon && fitAddon.fit());
+}
+
+function setTermStatus(text, cls) {
+    const el = document.getElementById("termStatus");
+    el.className = "pill " + cls;
+    el.innerText = text;
+}
+
+function getCredentialInfo(form) {
+    const select = form.querySelector(".credential-select");
+    if (!select || select.value === "new") {
+        return {
+            username: (form.querySelector("input[name='new_credential_username']") || {}).value?.trim(),
+            passwordInput: form.querySelector("input[name='new_credential_password']"),
+        };
+    }
+    const option = select.selectedOptions[0];
+    return { username: option ? option.dataset.username : null, passwordInput: null };
+}
+
+function openTerminal(form) {
+    const host = (form.querySelector("input[name='rpi_ip']") || {}).value?.trim();
+    const port = parseInt((form.querySelector("input[name='ssh_port']") || {}).value, 10) || 22;
+    const { username, passwordInput } = getCredentialInfo(form);
+    activePasswordInput = passwordInput;
+
+    if (!host || !username) {
+        showToast("Bitte IP-Adresse ausfüllen und Zugangsdaten auswählen/anlegen, bevor du die Verbindung testest.", "danger");
+        return;
+    }
+
+    PoeUI.openModal("terminalModal");
+    ensureTerminal();
+    term.reset();
+    document.getElementById("termTarget").innerText = `${username}@${host}:${port}`;
+    setTermStatus("Verbinde…", "unknown");
+    setTimeout(() => fitAddon && fitAddon.fit(), 60);
+
+    if (termSocket) { try { termSocket.close(); } catch (e) {} }
+
+    const proto = location.protocol === "https:" ? "wss:" : "ws:";
+    termSocket = new WebSocket(`${proto}//${location.host}/ws/ssh_terminal`);
+
+    termSocket.onopen = () => {
+        termSocket.send(JSON.stringify({ host, username, port }));
+        setTermStatus("Verbunden", "online");
+    };
+    termSocket.onmessage = (event) => term.write(event.data);
+    termSocket.onclose = () => setTermStatus("Getrennt", "offline");
+    termSocket.onerror = () => setTermStatus("Fehler", "offline");
+}
+
+function closeTerminal() {
+    if (termSocket) {
+        try { termSocket.close(); } catch (e) {}
+        termSocket = null;
+    }
+}
+
+const termPasteBtn = document.getElementById("termPastePassword");
+if (termPasteBtn) {
+    termPasteBtn.addEventListener("click", () => {
+        if (!activePasswordInput || !activePasswordInput.value) {
+            showToast("Kein Passwort bekannt — bitte manuell im Terminal eingeben.", "danger");
+            return;
+        }
+        if (!termSocket || termSocket.readyState !== WebSocket.OPEN) {
+            showToast("Keine aktive Terminal-Verbindung.", "danger");
+            return;
+        }
+        termSocket.send(JSON.stringify({ type: "input", data: activePasswordInput.value + "\n" }));
+    });
+}
+
+const terminalModalEl = document.getElementById("terminalModal");
+if (terminalModalEl) {
+    terminalModalEl.addEventListener("click", (e) => {
+        if (e.target.id === "terminalModal") closeTerminal();
+    });
+    document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && terminalModalEl.classList.contains("open")) closeTerminal();
+    });
+}
+
 function toggleDevice(mac, checkbox) {
     checkbox.disabled = true;
     fetch(`/devices/toggle/${mac}`, { method: "POST" })

srv/poe_manager/templates/index.html

@@ -38,7 +38,6 @@
       </div>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" data-close-modal>Schließen</button>
       {% if current_user.has_permission('devices.edit') %}
       <button type="button" class="btn btn-success" id="activateButton" style="display:none;">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>
@@ -51,6 +50,11 @@
         Neustarten
       </button>
       {% endif %}
+      <!-- Schließen bewusst als letztes Element im DOM: modal-footer nutzt
+           justify-content:flex-end, damit landet der zuletzt gerenderte
+           Button ganz rechts — Schließen soll unabhängig davon, welche
+           Aktions-Buttons gerade sichtbar sind, immer rechts stehen. -->
+      <button type="button" class="btn btn-secondary" data-close-modal>Schließen</button>
     </div>
   </div>
 </div>
@@ -136,7 +140,16 @@ document.addEventListener("DOMContentLoaded", () => {
                 document.getElementById("deviceChecked").innerText = this.dataset.checked || "-";
                 const pill = this.querySelector(".pill");
                 document.getElementById("deviceStatus").innerText = pill ? pill.innerText.trim() : "-";
-                if (restartButton) restartButton.style.display = isActive ? "" : "none";
+                if (restartButton) {
+                    // Ohne zugewiesenen Switch + Port kann poe.sh keinen PoE-Reset
+                    // auslösen (siehe restart_device()/poe.sh) — der Button wird für
+                    // diese Geräte komplett ausgeblendet statt nur ausgegraut, damit
+                    // kein Neustart vorgegaukelt wird, der tatsächlich nichts bewirkt.
+                    const hasSwitchAndPort = this.dataset.switch !== "-" && this.dataset.port !== "-";
+                    restartButton.style.display = (isActive && hasSwitchAndPort) ? "" : "none";
+                    restartButton.disabled = false;
+                    restartButton.title = "";
+                }
                 if (activateButton) activateButton.style.display = isActive ? "none" : "";
                 PoeUI.openModal("deviceModal");
             });