Gruppen-Bearbeiten als Modal, Mobile-Fix, Mehrfach-Upload (v1.1.3)

- Gruppen bearbeiten (Name + Rechte) laeuft jetzt ueber ein Modal statt der
  bisherigen Inline-Ausklapp-Zeile -- gleiche Optik wie "Neue Gruppe". Der
  Gruppenname war dabei bisher ein verstecktes, nie wirklich editierbares
  Feld; jetzt ein normales Texteingabefeld (Backend unterstuetzte das
  Umbenennen inkl. Systemgruppen-Schutz bereits vollstaendig, es fehlte nur
  die Eingabemoeglichkeit im Formular). Admin-Rechte-Ansicht und die
  "Freischalten"-Ausnahme fuer die Systemgruppe "Benutzer" ziehen ins
  jeweilige Modal mit um.
- Fileshare-Baum + Tabelle nebeneinander sprengte auf Tablet-/Handybreite
  die Seite -- stapelt jetzt (Baum oben, Tabelle darunter) ab der
  bestehenden 900px-Sidebar-Umschaltgrenze.
- Mehrfach-Upload: Datei-Eingabefeld erlaubt jetzt echte Mehrfachauswahl
  (mehrere Dateien in einem Dialog) UND mehrmaliges Hinzufuegen
  nacheinander (per DataTransfer angesammelt, bevor "Hochladen" gedrueckt
  wird) -- funktioniert nativ auch auf Mobilgeraeten, da kein Custom-
  Upload-Mechanismus noetig ist. Backend verarbeitet jetzt eine Liste
  statt einer einzelnen Datei (request.files.getlist), mit Sammel-
  Erfolgsmeldung und pro Datei separater Namensvalidierung.

Live auf POETEST verifiziert: Umbenennen+Rechte-Speichern ueber das neue
Modal, Admin-Modal (readonly), Mobile-Layout (390px, Baum stapelt korrekt),
echte Mehrfachauswahl (2 Dateien in einem Dialog, beide korrekt
hochgeladen und einzeln in der Sammelmeldung genannt).

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

srv/tesm/VERSION

@@ -1 +1 @@
-1.1.1
+1.1.3

srv/tesm/app.py

@@ -2289,18 +2289,31 @@ def fileshare_upload():
         return redirect(url_for("fileshare", share=share, path=rel_path))
 
     abs_dir = _fileshare_resolve_path(share, rel_path)
-    file = request.files.get("file")
+    # request.files.getlist() statt .get(): das Upload-Feld erlaubt jetzt
-    if not abs_dir or not os.path.isdir(abs_dir) or not file or not file.filename:
+    # Mehrfachauswahl (name="file" multiple) -- ein einzelner Dateiauswahl-
+    # Dialog liefert dann mehrere Files unter demselben Feldnamen, klassisch
+    # eine Datei liefert genauso eine Liste mit einem Element.
+    files = [f for f in request.files.getlist("file") if f and f.filename]
+    if not abs_dir or not os.path.isdir(abs_dir) or not files:
         flash("Ungültiges Ziel oder keine Datei ausgewählt.", "danger")
     else:
-        filename = secure_filename(file.filename)
+        uploaded, rejected = [], []
-        dest = os.path.join(abs_dir, filename) if filename else None
+        for file in files:
-        if not filename or os.path.dirname(os.path.realpath(dest)) != os.path.realpath(abs_dir):
+            filename = secure_filename(file.filename)
-            flash("Ungültiger Dateiname.", "danger")
+            dest = os.path.join(abs_dir, filename) if filename else None
-        else:
+            if not filename or os.path.dirname(os.path.realpath(dest)) != os.path.realpath(abs_dir):
+                rejected.append(file.filename)
+                continue
             file.save(dest)
-            log_action("fileshare.upload", share, f"{rel_path}/{filename}".strip("/"))
+            uploaded.append(filename)
-            flash(f"„{filename}“ hochgeladen.", "success")
+        if uploaded:
+            log_action("fileshare.upload", share, f"{rel_path}/".strip("/") + f" ({len(uploaded)} Datei(en): {', '.join(uploaded)})")
+            if len(uploaded) == 1:
+                flash(f"„{uploaded[0]}“ hochgeladen.", "success")
+            else:
+                flash(f"{len(uploaded)} Dateien hochgeladen: {', '.join(uploaded)}.", "success")
+        if rejected:
+            flash(f"Ungültiger Dateiname, übersprungen: {', '.join(rejected)}.", "danger")
     return redirect(url_for("fileshare", share=share, path=rel_path))
 
 

srv/tesm/static/css/style.css

@@ -1296,14 +1296,18 @@ select {
    Fileshare (Baum-Navigation + Vorschau)
    ========================================================================== */
 
-.fileshare-layout { display: flex; align-items: flex-start; gap: 16px; }
+/* align-items:stretch (statt flex-start) + die main-Seite selbst als
-.fileshare-main { flex: 1; min-width: 0; }
+   Flex-Spalte mit table-wrap{flex:1}, damit beide Kacheln (Baum links,
+   Tabelle rechts) immer gleich hoch sind, unabhängig davon welche Seite
+   gerade mehr Inhalt hat. */
+.fileshare-layout { display: flex; align-items: stretch; gap: 16px; }
+.fileshare-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.fileshare-main .table-wrap { flex: 1; }
 
 .fileshare-tree {
   flex: 0 0 260px;
   max-width: 260px;
   padding: 14px;
-  max-height: 70vh;
   overflow-y: auto;
 }
 .fileshare-tree-title {
@@ -1356,6 +1360,24 @@ select {
 .xlsx-preview-sheet-title { margin: 20px 0 8px; font-size: 13px; font-weight: 650; }
 .xlsx-preview-sheet-title:first-child { margin-top: 0; }
 
+/* Angesammelte Dateien im Upload-Modal (Mehrfachauswahl, siehe fileshare.html) */
+.upload-file-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
+.upload-file-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 5px 10px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-soft);
+  border-radius: 7px;
+  font-size: 12.5px;
+}
+.upload-file-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.upload-file-remove {
+  flex-shrink: 0;
+  border: none; background: transparent; color: var(--text-faint);
+  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
+}
+.upload-file-remove:hover { color: var(--danger); }
+
 /* ==========================================================================
    Utilities
    ========================================================================== */
@@ -1400,6 +1422,12 @@ select {
      Buttons/Suchfeld ineinanderzuschieben. */
   .modal-footer { flex-wrap: wrap; }
   .table-toolbar .search-input { min-width: 0; flex: 1 1 160px; }
+
+  /* Fileshare-Baum + Tabelle nebeneinander sprengt auf Tablet-/Handy-
+     Breite die Seite (Baum-Spalte ist fest 260px breit) -- Baum stapelt
+     stattdessen oben, Tabelle darunter in voller Breite. */
+  .fileshare-layout { flex-direction: column; }
+  .fileshare-tree { flex: 1 1 auto; max-width: 100%; max-height: 240px; }
 }
 
 @media (max-width: 640px) {

srv/tesm/templates/fileshare.html

@@ -46,15 +46,7 @@
   </div>
 
   <div class="fileshare-main">
-    <div class="flex gap-2" style="align-items:center; margin-bottom:14px; flex-wrap:wrap;">
+    <div class="table-wrap">
-      <a href="{{ url_for('fileshare', share=selected_share) }}" class="mono" style="font-size:13px; font-weight:600;">{{ selected_share }}</a>
-      {% for b in breadcrumbs %}
-      <span class="text-faint">/</span>
-      <a href="{{ url_for('fileshare', share=selected_share, path=b.path) }}" class="mono" style="font-size:13px;">{{ b.name }}</a>
-      {% endfor %}
-    </div>
-
-    <div class="table-wrap" style="margin-bottom:16px;">
       <div class="table-toolbar">
         <div class="search-input">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
@@ -148,14 +140,15 @@
       <input type="hidden" name="share" value="{{ selected_share }}">
       <input type="hidden" name="path" value="{{ rel_path }}">
       <div class="modal-header">
-        <h3>Datei hochladen</h3>
+        <h3>Datei(en) hochladen</h3>
         <button type="button" class="modal-close" data-close-modal>&times;</button>
       </div>
       <div class="modal-body">
         <div class="field">
-          <label>Datei</label>
+          <label>Datei(en)</label>
-          <input type="file" name="file" required>
+          <input type="file" name="file" id="uploadFileInput" multiple required>
-          <div class="field-hint">Maximal 15&nbsp;MB pro Datei.</div>
+          <div id="uploadFileList" class="upload-file-list"></div>
+          <div class="field-hint">Insgesamt maximal 15&nbsp;MB pro Upload-Vorgang. Mehrfachauswahl möglich (auch mehrmals nacheinander — bereits hinzugefügte Dateien bleiben dabei erhalten).</div>
         </div>
         <div class="field-hint">Wird in „{{ selected_share }}{% if rel_path %} / {{ rel_path }}{% endif %}“ hochgeladen. Eine bereits vorhandene Datei gleichen Namens wird überschrieben.</div>
       </div>
@@ -250,6 +243,70 @@ function filterTable(inputId, tableId) {
     });
 }
 
+/* ---------------- Mehrfach-Upload (Multiauswahl + mehrmals nacheinander) ---------------- */
+/* Ein <input type=file multiple> ERSETZT bei jeder erneuten Dateiauswahl
+   die vorherige -- fuer "mehrmals nacheinander hinzufuegen" wird deshalb
+   selbst eine "angesammelte" Auswahl per DataTransfer gepflegt und nach
+   jeder Aenderung zurueck auf das Input-Feld geschrieben, sodass das
+   normale <form>-Submit (kein fetch() noetig) am Ende alle gesammelten
+   Dateien mitschickt. DataTransfer-Zuweisung an .files wird von allen
+   gaengigen Mobil-Browsern (Android Chrome, iOS Safari) mitgetragen; falls
+   nicht, faellt es einfach auf das native Verhalten (letzte Auswahl zaehlt)
+   zurueck, ohne den Upload an sich zu verhindern. */
+(function () {
+    const input = document.getElementById("uploadFileInput");
+    const listEl = document.getElementById("uploadFileList");
+    if (!input || !listEl) return;
+    let staged = null;
+    try { staged = new DataTransfer(); } catch (e) { staged = null; }
+
+    function render() {
+        listEl.innerHTML = "";
+        if (!staged) return;
+        Array.from(staged.files).forEach(function (file, idx) {
+            const row = document.createElement("div");
+            row.className = "upload-file-row";
+            const name = document.createElement("span");
+            name.textContent = file.name;
+            const removeBtn = document.createElement("button");
+            removeBtn.type = "button";
+            removeBtn.className = "upload-file-remove";
+            removeBtn.setAttribute("aria-label", "Entfernen");
+            removeBtn.textContent = "×";
+            removeBtn.addEventListener("click", function () {
+                const dt = new DataTransfer();
+                Array.from(staged.files).forEach(function (f, i) {
+                    if (i !== idx) dt.items.add(f);
+                });
+                staged = dt;
+                input.files = staged.files;
+                render();
+            });
+            row.appendChild(name);
+            row.appendChild(removeBtn);
+            listEl.appendChild(row);
+        });
+    }
+
+    input.addEventListener("change", function () {
+        if (!staged) return; // kein DataTransfer-Support -- natives Verhalten greift
+        Array.from(input.files).forEach(function (file) { staged.items.add(file); });
+        input.files = staged.files;
+        render();
+    });
+
+    // Beim (Wieder-)Oeffnen des Modals eine frische Sammlung starten, statt
+    // Dateien aus einem vorherigen, bereits abgeschickten Upload-Vorgang
+    // versehentlich mitzuschleppen.
+    document.querySelectorAll('[data-open-modal="uploadModal"]').forEach(function (btn) {
+        btn.addEventListener("click", function () {
+            try { staged = new DataTransfer(); } catch (e) { staged = null; }
+            input.value = "";
+            render();
+        });
+    });
+})();
+
 /* ---------------- Baum-Navigation (Freigaben links) ---------------- */
 
 function buildTreeNode(share, path, name) {

srv/tesm/templates/groups.html

@@ -104,8 +104,8 @@
         <td class="text-dim">{{ admin_virtual_group.member_names|length }}</td>
         <td>
           <div class="row-actions">
-            <button class="icon-btn" title="Rechte anzeigen" onclick="toggleDetail('detail-admin')">
+            <button class="icon-btn" title="Rechte anzeigen" data-open-modal="adminGroupModal">
-              <svg id="chev-admin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
             </button>
             <button class="icon-btn" title="Mitglieder verwalten" data-open-modal="adminMembersModal">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17.5" cy="8.5" r="2.4"/><path d="M15.8 14.2c2.7.3 4.7 2.4 4.7 5.3"/></svg>
@@ -113,16 +113,11 @@
           </div>
         </td>
       </tr>
-      <tr class="group-detail-row hidden" id="detail-admin">
-        <td colspan="3">
-          {{ permission_tree(admin_virtual_group.permissions, true, true) }}
-          <p class="text-faint" style="font-size:11.5px; margin:12px 0 0;">Admins dürfen immer alles — diese Rechte sind fest und nicht änderbar.</p>
-        </td>
-      </tr>
     </tbody>
 
     {% for g in groups %}
     {% set can_edit_this = current_user.has_permission('groups.edit') and not g.is_system %}
+    {% set can_unlock_system = g.is_system and current_user.is_admin %}
     <tbody data-sort-name="{{ g.name|lower }}" data-sort-members="{{ g.member_names|length }}">
       <tr>
         <td class="cell-name">
@@ -132,8 +127,12 @@
         <td class="text-dim">{{ g.member_names|length }}</td>
         <td>
           <div class="row-actions">
-            <button class="icon-btn" title="Rechte anzeigen{{ '/bearbeiten' if can_edit_this else '' }}" onclick="toggleDetail('detail-{{ g.id }}')">
+            <button class="icon-btn" title="{{ 'Bearbeiten' if (can_edit_this or can_unlock_system) else 'Anzeigen' }}" data-open-modal="editGroupModal{{ loop.index }}">
-              <svg id="chev-{{ g.id }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+              {% if can_edit_this or can_unlock_system %}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+              {% else %}
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+              {% endif %}
             </button>
             <button class="icon-btn" title="Mitglieder verwalten" data-open-modal="membersModal{{ loop.index }}">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17.5" cy="8.5" r="2.4"/><path d="M15.8 14.2c2.7.3 4.7 2.4 4.7 5.3"/></svg>
@@ -149,57 +148,6 @@
           </div>
         </td>
       </tr>
-      {% set can_unlock_system = g.is_system and current_user.is_admin %}
-      <tr class="group-detail-row hidden" id="detail-{{ g.id }}">
-        <td colspan="3">
-          {% if can_edit_this %}
-          <form method="post">
-            <input type="hidden" name="save_group" value="1">
-            <input type="hidden" name="permissions_submitted" value="1">
-            <input type="hidden" name="group_id" value="{{ g.id }}">
-            <input type="hidden" name="name" value="{{ g.name }}">
-            {{ permission_tree(g.permissions, false, true) }}
-            <div class="flex" style="justify-content:flex-end; margin-top:16px;">
-              <button type="submit" class="btn btn-primary btn-sm">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
-                Rechte speichern
-              </button>
-            </div>
-          </form>
-          {% elif can_unlock_system %}
-          <div id="readonly-{{ g.id }}">
-            {{ permission_tree(g.permissions, true, true) }}
-            <div class="flex" style="justify-content:space-between; align-items:center; margin-top:12px;">
-              <p class="text-faint" style="font-size:11.5px; margin:0;">Die Standardgruppe „Benutzer“ ist eine Systemgruppe — ihre Rechte sind normalerweise fest.</p>
-              <button type="button" class="btn btn-secondary btn-sm" onclick="unlockSystemGroup({{ g.id }})">Freischalten</button>
-            </div>
-          </div>
-          <form method="post" class="hidden" id="unlock-{{ g.id }}">
-            <input type="hidden" name="save_group" value="1">
-            <input type="hidden" name="permissions_submitted" value="1">
-            <input type="hidden" name="unlock_system_group" value="1">
-            <input type="hidden" name="group_id" value="{{ g.id }}">
-            <input type="hidden" name="name" value="{{ g.name }}">
-            {{ permission_tree(g.permissions, false, true) }}
-            <p class="text-faint" style="font-size:11.5px; margin:12px 0;">
-              ⚠ Diese Gruppe ist die Standardgruppe für neue Benutzer (auch neu angelegte AD/LDAP-Konten). Zu restriktive
-              Rechte hier können den Erst-Login neuer Konten einschränken.
-            </p>
-            <div class="flex" style="justify-content:flex-end;">
-              <button type="submit" class="btn btn-primary btn-sm">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
-                Rechte speichern
-              </button>
-            </div>
-          </form>
-          {% else %}
-          {{ permission_tree(g.permissions, true, true) }}
-          {% if g.is_system %}
-          <p class="text-faint" style="font-size:11.5px; margin:12px 0 0;">Die Standardgruppe „Benutzer“ ist eine Systemgruppe — ihre Rechte sind fest und nicht änderbar.</p>
-          {% endif %}
-          {% endif %}
-        </td>
-      </tr>
     </tbody>
     {% else %}
     <tbody data-sort-pinned>
@@ -210,6 +158,19 @@
   </div>
 </div>
 
+<div class="modal-overlay" id="adminGroupModal">
+  <div class="modal" style="max-width:1000px;">
+    <div class="modal-header">
+      <h3>Admin — Rechte</h3>
+      <button type="button" class="modal-close" data-close-modal>&times;</button>
+    </div>
+    <div class="modal-body">
+      {{ permission_tree(admin_virtual_group.permissions, true, true) }}
+      <p class="text-faint" style="font-size:11.5px; margin:12px 0 0;">Admins dürfen immer alles — diese Rechte sind fest und nicht änderbar.</p>
+    </div>
+  </div>
+</div>
+
 <div class="modal-overlay" id="adminMembersModal">
   <div class="modal" style="max-width:380px;">
     <form method="post">
@@ -238,6 +199,8 @@
 </div>
 
 {% for g in groups %}
+{% set can_edit_this = current_user.has_permission('groups.edit') and not g.is_system %}
+{% set can_unlock_system = g.is_system and current_user.is_admin %}
 <div class="modal-overlay" id="membersModal{{ loop.index }}">
   <div class="modal" style="max-width:380px;">
     <form method="post">
@@ -268,6 +231,80 @@
     </form>
   </div>
 </div>
+
+<div class="modal-overlay" id="editGroupModal{{ loop.index }}">
+  <div class="modal" style="max-width:1000px;">
+    {% if can_edit_this %}
+    <form method="post">
+      <input type="hidden" name="save_group" value="1">
+      <input type="hidden" name="permissions_submitted" value="1">
+      <input type="hidden" name="group_id" value="{{ g.id }}">
+      <div class="modal-header">
+        <h3>Gruppe bearbeiten</h3>
+        <button type="button" class="modal-close" data-close-modal>&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="field">
+          <label>Name</label>
+          <input type="text" name="name" value="{{ g.name }}" required>
+        </div>
+        {{ permission_tree(g.permissions, false, true) }}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
+        <button type="submit" class="btn btn-primary">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+          Speichern
+        </button>
+      </div>
+    </form>
+    {% elif can_unlock_system %}
+    <div class="modal-header">
+      <h3>Gruppe „{{ g.name }}“</h3>
+      <button type="button" class="modal-close" data-close-modal>&times;</button>
+    </div>
+    <div class="modal-body">
+      <div class="field"><label>Name</label><input type="text" value="{{ g.name }}" disabled></div>
+      <div id="readonly-{{ g.id }}">
+        {{ permission_tree(g.permissions, true, true) }}
+        <div class="flex" style="justify-content:space-between; align-items:center; margin-top:12px; flex-wrap:wrap;">
+          <p class="text-faint" style="font-size:11.5px; margin:0;">Die Standardgruppe „Benutzer“ ist eine Systemgruppe — ihre Rechte sind normalerweise fest.</p>
+          <button type="button" class="btn btn-secondary btn-sm" onclick="unlockSystemGroup({{ g.id }})">Freischalten</button>
+        </div>
+      </div>
+      <form method="post" class="hidden" id="unlock-{{ g.id }}">
+        <input type="hidden" name="save_group" value="1">
+        <input type="hidden" name="permissions_submitted" value="1">
+        <input type="hidden" name="unlock_system_group" value="1">
+        <input type="hidden" name="group_id" value="{{ g.id }}">
+        <input type="hidden" name="name" value="{{ g.name }}">
+        {{ permission_tree(g.permissions, false, true) }}
+        <p class="text-faint" style="font-size:11.5px; margin:12px 0;">
+          ⚠ Diese Gruppe ist die Standardgruppe für neue Benutzer (auch neu angelegte AD/LDAP-Konten). Zu restriktive
+          Rechte hier können den Erst-Login neuer Konten einschränken.
+        </p>
+        <div class="flex" style="justify-content:flex-end;">
+          <button type="submit" class="btn btn-primary btn-sm">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+            Rechte speichern
+          </button>
+        </div>
+      </form>
+    </div>
+    {% else %}
+    <div class="modal-header">
+      <h3>Gruppe „{{ g.name }}“</h3>
+      <button type="button" class="modal-close" data-close-modal>&times;</button>
+    </div>
+    <div class="modal-body">
+      {{ permission_tree(g.permissions, true, true) }}
+      {% if g.is_system %}
+      <p class="text-faint" style="font-size:11.5px; margin:12px 0 0;">Die Standardgruppe „Benutzer“ ist eine Systemgruppe — ihre Rechte sind fest und nicht änderbar.</p>
+      {% endif %}
+    </div>
+    {% endif %}
+  </div>
+</div>
 {% endfor %}
 
 <div class="modal-overlay" id="addGroupModal">
@@ -317,14 +354,6 @@ function unlockSystemGroup(id) {
     );
 }
 
-function toggleDetail(id) {
-    const row = document.getElementById(id);
-    if (!row) return;
-    row.classList.toggle("hidden");
-    const chev = document.getElementById(id.replace("detail-", "chev-"));
-    if (chev) chev.style.transform = row.classList.contains("hidden") ? "" : "rotate(180deg)";
-}
-
 function applyPermissionGating() {
     document.querySelectorAll(".permission-group-col").forEach(function (area) {
         const toggle = area.querySelector(".permission-area-toggle-cb");