Feld-/Funktionserklaerungen als Hover-Tooltip + Klick-Modal (v1.1.10)

Statisch sichtbare Erklaerungstexte (.hint/.field-hint) app-weit auf ein
einheitliches "i"-Icon umgestellt: Hover zeigt den Text neben dem
Mauszeiger, Klick/Tap oeffnet ein wiederverwendetes Modal mit dem vollen
Text. Zentral in app.js (initHintIcons, ensureHintTooltip/-Modal) via
Event-Delegation, kein Aufwand pro Seite. Hover ist bewusst per
matchMedia("(hover: hover) and (pointer: fine)") gated -- auf Touch-
Geraeten faellt automatisch nur Tap-zu-Modal an, da echte
mouseenter/mousemove-Events dort ohnehin nicht zuverlaessig auftreten.

Nicht jede .hint/.field-hint wurde umgestellt -- nach folgenden Kriterien
entschieden:
- Live-Status-Anzeigen (aktuelle Log-Pfade, Netzwerkstatus, Auditlog-
  Schwellenwerte, aktive Reservierungs-/Lease-Zaehler, certbot-Timer-
  Status usw.) bleiben sichtbar, da sie aktuellen Zustand zeigen, keine
  generische Erklaerung.
- Kurze, einzeilige Abschnitts-Untertitel (z.B. "Server, Bind-Konto und
  Suchparameter fuer die Anbindung an AD/LDAP.") bleiben als Orientierung
  direkt unter der Ueberschrift sichtbar.
- Bereits JS-live-aktualisierte Status-Felder (id-tragend, z.B.
  "Fragt live... ab." -> "N Gruppen geladen.") bleiben unangetastet.
- Laengere, mehrsaetzige Abschnitts-Erklaerungen (z.B. AD-Gruppenzu-
  ordnungen, Fileshare-Gruppenzuordnung, Subnetze, DHCP-Options, Wartung)
  sowie so gut wie alle Feld-Erklaerungen wandern ins Icon.

Nebenbei: Karte "Fileshare-Gruppen" in LDAP-Einstellungen zu "Fileshare-
Gruppenzuordnung" umbenannt (passt jetzt zur bereits bestehenden
log_action-Zielbezeichnung in app.py).

Neue gemeinsame Macro-Datei templates/_hint_icon.html, importiert von
15 Templates. Verifiziert: alle 18 betroffenen Seiten laden fehlerfrei
(200, keine JS-Fehler), Icon-Anzahl je Seite geprueft, Hover-Tooltip und
Klick-Modal auf Desktop, Tap-Modal auf simuliertem Mobilgeraet (390x844,
Touch), sowie stichprobenartig bestaetigt dass die bewusst belassenen
Hinweise unveraendert sichtbar bleiben.

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

srv/tesm/VERSION

@@ -1 +1 @@
-1.1.8
+1.1.10

srv/tesm/app.py

@@ -7706,21 +7706,84 @@ def kea_log():
     return render_template("logs_kea.html", log_content=log_content)
 
 
+AUDIT_LOG_PAGE_SIZE = 300
+
+
 @app.route("/logs/aenderungen")
 @login_required
 def activity_log():
     """Auditlog: wer hat was geändert (Aktivieren/Deaktivieren, Anlegen,
-    Bearbeiten, Löschen). Bewusst OHNE PoE-Neustarts — die stehen im Live-Log."""
+    Bearbeiten, Löschen). Bewusst OHNE PoE-Neustarts — die stehen im Live-Log.
+    Lädt anfangs nur die neuesten AUDIT_LOG_PAGE_SIZE Zeilen (Performance bei
+    einer ggf. noch nicht archivierten, großen Tabelle) -- ältere Zeilen
+    werden bei Bedarf über "Weitere 300 laden" bzw. "Alle laden" (siehe
+    activity_log_more()) nachgeladen, ohne die Seite neu zu laden."""
     if not current_user.can_view_activity_log:
         flash("Keine Berechtigung, das Auditlog einzusehen.", "danger")
         return redirect(url_for("index"))
 
     conn = get_db_connection()
     entries = conn.execute(
-        "SELECT id, ts, username, action, target, details FROM audit_log ORDER BY id DESC LIMIT 500"
+        "SELECT id, ts, username, action, target, details FROM audit_log ORDER BY id DESC LIMIT ?",
+        (AUDIT_LOG_PAGE_SIZE,),
+    ).fetchall()
+    # Gesamtzahlen je Kategorie (nicht nur der geladenen Zeilen) für die
+    # "X / Y geladen"-Anzeige in den Statistik-Kacheln -- eine einzige
+    # aggregierte Abfrage statt die komplette Tabelle einzulesen. Die
+    # LIKE-Muster bilden exakt dieselbe Kategorisierung wie category_of()
+    # in _audit_log_macros.html ab (kind = action.split(".")[-1]).
+    totals_row = conn.execute(
+        "SELECT COUNT(*) AS total, "
+        "SUM(CASE WHEN action LIKE '%.create' OR action LIKE '%.upload' OR action LIKE '%.mkdir' THEN 1 ELSE 0 END) AS create_n, "
+        "SUM(CASE WHEN action LIKE '%.delete' THEN 1 ELSE 0 END) AS delete_n "
+        "FROM audit_log"
+    ).fetchone()
+    conn.close()
+
+    total_count = totals_row["total"] or 0
+    total_create = totals_row["create_n"] or 0
+    total_delete = totals_row["delete_n"] or 0
+    total_edit = total_count - total_create - total_delete
+
+    oldest_loaded_id = entries[-1]["id"] if entries else None
+    has_more = len(entries) >= AUDIT_LOG_PAGE_SIZE and total_count > len(entries)
+    return render_template(
+        "activity_log.html", entries=entries, total_count=total_count,
+        total_create=total_create, total_edit=total_edit, total_delete=total_delete,
+        oldest_loaded_id=oldest_loaded_id, has_more=has_more,
+    )
+
+
+@app.route("/logs/aenderungen/more")
+@login_required
+def activity_log_more():
+    """AJAX-Nachladen älterer Auditlog-Zeilen in AUDIT_LOG_PAGE_SIZE-Schritten
+    (Cursor-Pagination über die id-Spalte, absteigend) -- liefert reines
+    HTML-Zeilenfragment (dieselbe Zeilen-Darstellung wie die Erstladung, über
+    das gemeinsame Makro in _audit_log_macros.html) statt JSON, damit das
+    Anhängen im Frontend ein einfaches insertAdjacentHTML bleibt."""
+    if not current_user.can_view_activity_log:
+        return "Keine Berechtigung.", 403
+    try:
+        before_id = int(request.args.get("before_id", ""))
+    except (TypeError, ValueError):
+        return "Ungültiger Parameter.", 400
+
+    conn = get_db_connection()
+    entries = conn.execute(
+        "SELECT id, ts, username, action, target, details FROM audit_log WHERE id < ? ORDER BY id DESC LIMIT ?",
+        (before_id, AUDIT_LOG_PAGE_SIZE),
     ).fetchall()
     conn.close()
-    return render_template("activity_log.html", entries=entries)
+
+    oldest_loaded_id = entries[-1]["id"] if entries else before_id
+    has_more = len(entries) >= AUDIT_LOG_PAGE_SIZE
+    html = render_template("_audit_log_rows.html", entries=entries)
+    resp = app.response_class(html, mimetype="text/html")
+    resp.headers["X-Row-Count"] = str(len(entries))
+    resp.headers["X-Has-More"] = "1" if has_more else "0"
+    resp.headers["X-Oldest-Id"] = str(oldest_loaded_id)
+    return resp
 
 
 

srv/tesm/static/css/style.css

@@ -968,6 +968,48 @@ select {
   flex-direction: column;
   animation: modal-in 0.16s ease;
 }
+
+/* ---- Hinweis-Icons (Hover-Tooltip + Klick-Modal), siehe _hint_icon.html
+   und initHintIcons() in app.js ---- */
+.hint-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+  border-radius: 50%;
+  border: 1.5px solid var(--text-faint);
+  background: transparent;
+  color: var(--text-faint);
+  font-size: 10px;
+  font-weight: 700;
+  font-style: italic;
+  font-family: Georgia, "Times New Roman", serif;
+  line-height: 1;
+  cursor: help;
+  vertical-align: middle;
+  margin-left: 6px;
+  padding: 0;
+  transition: border-color 0.15s, color 0.15s;
+}
+.hint-icon:hover, .hint-icon:focus-visible { border-color: var(--accent); color: var(--accent); }
+
+#hint-tooltip {
+  position: fixed;
+  z-index: 10000;
+  max-width: 280px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  background: var(--bg-elevated);
+  color: var(--text);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+  pointer-events: none;
+  display: none;
+}
 @keyframes modal-in {
   from { opacity: 0; transform: translateY(8px) scale(0.98); }
   to { opacity: 1; transform: translateY(0) scale(1); }

srv/tesm/static/js/app.js

@@ -285,6 +285,102 @@
       .catch(() => { content.textContent = "Fehler beim Laden des Logs."; });
   };
 
+  /* ---------------- Hinweis-Icons (Hover-Tooltip + Klick-Modal) ---------------- */
+  /* Zentraler Mechanismus für ALLE "i"-Icons (siehe _hint_icon.html) app-weit
+     -- ein einziges delegiertes Set von Listenern statt pro Icon eigener
+     Handler, damit auch nachträglich per JS eingefügte Icons (z.B. in
+     dynamisch nachgeladenen Tabellenzeilen) ohne weiteres Zutun funktionieren.
+     Hover zeigt den Text als Tooltip neben dem Mauszeiger -- aber NUR auf
+     Geräten, die tatsächlich sinnvoll hovern können (matchMedia-Check bei
+     JEDEM mouseenter neu ausgewertet, nicht einmalig beim Laden gecacht,
+     damit z.B. ein Convertible/Tablet beim Umschalten Maus/Touch korrekt
+     reagiert). Auf reinen Touch-Geräten bleibt so nur Tap -> Modal übrig,
+     da dort ohnehin kein echtes mouseenter/mousemove-Hover stattfindet. */
+  function ensureHintTooltip() {
+    if (document.getElementById("hint-tooltip")) return;
+    const el = document.createElement("div");
+    el.id = "hint-tooltip";
+    document.body.appendChild(el);
+  }
+
+  function ensureHintModal() {
+    if (document.getElementById("hint-modal")) return;
+    const html = `
+      <div class="modal-overlay" id="hint-modal">
+        <div class="modal" style="max-width:440px;">
+          <div class="modal-header">
+            <h3 id="hint-modal-title">Hinweis</h3>
+            <button type="button" class="modal-close" data-close-modal>&times;</button>
+          </div>
+          <div class="modal-body">
+            <p id="hint-modal-body" class="text-dim" style="margin:0; line-height:1.6;"></p>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-close-modal>Schließen</button>
+          </div>
+        </div>
+      </div>`;
+    document.body.insertAdjacentHTML("beforeend", html);
+    document.querySelectorAll("#hint-modal [data-close-modal]").forEach((btn) => {
+      btn.addEventListener("click", () => closeModal(btn));
+    });
+    document.getElementById("hint-modal").addEventListener("click", (e) => {
+      if (e.target.id === "hint-modal") closeModal(e.target);
+    });
+  }
+
+  function canHover() {
+    return window.matchMedia && window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+  }
+
+  function initHintIcons() {
+    if (!document.querySelector(".hint-icon")) return;
+    ensureHintTooltip();
+    const tooltip = document.getElementById("hint-tooltip");
+
+    function positionTooltip(e) {
+      const offset = 14;
+      const rect = tooltip.getBoundingClientRect();
+      let x = e.clientX + offset;
+      let y = e.clientY + offset;
+      if (x + rect.width > window.innerWidth - 8) x = e.clientX - rect.width - offset;
+      if (y + rect.height > window.innerHeight - 8) y = e.clientY - rect.height - offset;
+      tooltip.style.left = Math.max(8, x) + "px";
+      tooltip.style.top = Math.max(8, y) + "px";
+    }
+
+    // mouseenter/mouseleave bubbeln nicht -- Delegation via Capture-Phase
+    // auf document funktioniert dafür trotzdem zuverlässig.
+    document.addEventListener("mouseenter", function (e) {
+      const icon = e.target.closest && e.target.closest(".hint-icon");
+      if (!icon || !canHover()) return;
+      tooltip.textContent = icon.dataset.hint || "";
+      tooltip.style.display = "block";
+      positionTooltip(e);
+    }, true);
+
+    document.addEventListener("mouseleave", function (e) {
+      const icon = e.target.closest && e.target.closest(".hint-icon");
+      if (!icon) return;
+      tooltip.style.display = "none";
+    }, true);
+
+    document.addEventListener("mousemove", function (e) {
+      if (tooltip.style.display === "block") positionTooltip(e);
+    });
+
+    document.addEventListener("click", function (e) {
+      const icon = e.target.closest && e.target.closest(".hint-icon");
+      if (!icon) return;
+      e.preventDefault();
+      tooltip.style.display = "none";
+      ensureHintModal();
+      document.getElementById("hint-modal-title").textContent = icon.dataset.hintTitle || "Hinweis";
+      document.getElementById("hint-modal-body").textContent = icon.dataset.hint || "";
+      openModal("hint-modal");
+    });
+  }
+
   /* ---------------- Warnung bei ungespeicherten Änderungen ---------------- */
   /* Erkennt generisch auf JEDER Seite, ob ein Formular mit echten
      Eingabefeldern (nicht nur versteckten Aktions-Feldern wie bei Löschen/
@@ -628,6 +724,7 @@
     initLeaseCountdowns();
     initUnsavedChangesGuard();
     initSortableTables();
+    initHintIcons();
     document.querySelectorAll("[data-theme-toggle]").forEach((btn) => btn.addEventListener("click", toggleTheme));
   });
 

srv/tesm/templates/_audit_log_macros.html

@@ -0,0 +1,67 @@
+{#
+  Gemeinsame Auditlog-Zeilendarstellung -- von activity_log.html (Erstladung)
+  UND _audit_log_rows.html (AJAX-Nachladen über "Weitere 500 laden")
+  importiert, damit beide garantiert dieselbe Darstellung erzeugen und
+  action_labels/action_icons/category_of nicht an zwei Stellen gepflegt
+  werden müssen.
+#}
+{% set action_labels = {
+  "settings.update": "Einstellung geändert",
+  "device.create": "Gerät angelegt",
+  "device.edit": "Gerät bearbeitet",
+  "device.delete": "Gerät gelöscht",
+  "device.activate": "Gerät aktiviert",
+  "device.deactivate": "Gerät deaktiviert",
+  "switch.create": "Switch angelegt",
+  "switch.edit": "Switch bearbeitet",
+  "switch.delete": "Switch gelöscht",
+  "credential.create": "Zugangsdaten angelegt",
+  "credential.edit": "Zugangsdaten bearbeitet",
+  "credential.delete": "Zugangsdaten gelöscht",
+  "user.create": "Benutzer angelegt",
+  "user.edit": "Benutzer bearbeitet",
+  "user.delete": "Benutzer gelöscht",
+  "user.assign_group": "Gruppe zugewiesen",
+  "group.create": "Gruppe angelegt",
+  "group.edit": "Gruppe bearbeitet",
+  "group.delete": "Gruppe gelöscht",
+  "group.assign_admins": "Admin-Zuweisung geändert",
+  "profile.update": "Profil aktualisiert",
+  "profile.password": "Passwort geändert",
+  "check.run_now": "Prüfung manuell gestartet",
+  "fileshare.upload": "Datei(en) hochgeladen",
+  "fileshare.mkdir": "Ordner angelegt",
+  "fileshare.delete": "Datei/Ordner gelöscht",
+  "fileshare.rename": "Datei/Ordner umbenannt",
+  "fileshare.download": "Als ZIP heruntergeladen",
+  "auditlog.archive": "Auditlog archiviert",
+  "auditlog.export_delete": "Auditlog-Archiv exportiert",
+} %}
+{% set action_icons = {
+  "delete": '<path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/>',
+  "create": '<path d="M12 5v14M5 12h14"/>',
+  "edit": '<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/>',
+  "activate": '<path d="M20 6L9 17l-5-5"/>',
+  "deactivate": '<circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/>',
+} %}
+{% set create_kinds = ("create", "upload", "mkdir") %}
+
+{% macro category_of(kind) %}{% if kind in create_kinds %}create{% elif kind == "delete" %}delete{% else %}edit{% endif %}{% endmacro %}
+
+{% macro audit_row(e) %}
+{% set kind = e['action'].split('.')[-1] %}
+{% set cat = category_of(kind)|trim %}
+<tr data-category="{{ cat }}" data-sort-ts="{{ e['ts'] }}" data-sort-user="{{ e['username']|lower }}"
+    data-sort-action="{{ action_labels.get(e['action'], e['action'])|lower }}" data-sort-target="{{ (e['target'] or '')|lower }}">
+  <td class="text-dim mono" style="font-size:12.5px;">{{ e['ts'] }}</td>
+  <td class="cell-name">{{ e['username'] }}</td>
+  <td>
+    <span class="pill action-pill action-pill--{{ cat }}">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{{ (action_icons.get(kind) or action_icons['edit'])|safe }}</svg>
+      {{ action_labels.get(e['action'], e['action']) }}
+    </span>
+  </td>
+  <td>{{ e['target'] or '—' }}</td>
+  <td class="text-dim">{{ e['details'] or '—' }}</td>
+</tr>
+{% endmacro %}

srv/tesm/templates/_audit_log_rows.html

@@ -0,0 +1,5 @@
+{# Reines Zeilenfragment fürs AJAX-Nachladen (activity_log_more()) -- kein
+   umschließendes <table>/<tbody>, wird per insertAdjacentHTML direkt an das
+   bestehende tbody von #auditTable angehängt. #}
+{% import "_audit_log_macros.html" as m %}
+{% for e in entries %}{{ m.audit_row(e) }}{% endfor %}

srv/tesm/templates/_hint_icon.html

@@ -0,0 +1,9 @@
+{#
+  Gemeinsames "i"-Hinweis-Icon: Hover zeigt den Text als Tooltip neben dem
+  Mauszeiger, Klick/Tap öffnet dasselbe (wiederverwendete) Modal mit dem
+  vollen Text -- Mechanik lebt zentral in app.js (initHintIcons), hier wird
+  nur das Icon mit seinen Daten-Attributen erzeugt. title = Kontext für die
+  Modal-Überschrift (z.B. das zugehörige Feld-Label), text = der eigentliche
+  Erklärungstext.
+#}
+{% macro hint_icon(text, title='Hinweis') %}<button type="button" class="hint-icon" data-hint="{{ text }}" data-hint-title="{{ title }}" aria-label="Hinweis: {{ title }}">i</button>{% endmacro %}

srv/tesm/templates/activity_log.html

@@ -1,77 +1,41 @@
 {% extends "base.html" %}
 {% set active_page = "logs" %}
 {% block page_title %}Auditlog{% endblock %}
-{% block page_sub %}<div class="topbar-sub">{{ entries|length }} Einträge (letzte 500)</div>{% endblock %}
+{% block page_sub %}
+<div class="topbar-sub" id="auditEntryCount">
+  {% if has_more %}{{ entries|length }} von {{ total_count }} Einträgen geladen{% else %}{{ entries|length }} Eintrag{{ 'e' if entries|length != 1 else '' }}{% endif %}
+</div>
+{% endblock %}
 
 {% block content %}
-
-{% set action_labels = {
-  "settings.update": "Einstellung geändert",
-  "device.create": "Gerät angelegt",
-  "device.edit": "Gerät bearbeitet",
-  "device.delete": "Gerät gelöscht",
-  "device.activate": "Gerät aktiviert",
-  "device.deactivate": "Gerät deaktiviert",
-  "switch.create": "Switch angelegt",
-  "switch.edit": "Switch bearbeitet",
-  "switch.delete": "Switch gelöscht",
-  "credential.create": "Zugangsdaten angelegt",
-  "credential.edit": "Zugangsdaten bearbeitet",
-  "credential.delete": "Zugangsdaten gelöscht",
-  "user.create": "Benutzer angelegt",
-  "user.edit": "Benutzer bearbeitet",
-  "user.delete": "Benutzer gelöscht",
-  "user.assign_group": "Gruppe zugewiesen",
-  "group.create": "Gruppe angelegt",
-  "group.edit": "Gruppe bearbeitet",
-  "group.delete": "Gruppe gelöscht",
-  "group.assign_admins": "Admin-Zuweisung geändert",
-  "profile.update": "Profil aktualisiert",
-  "profile.password": "Passwort geändert",
-  "check.run_now": "Prüfung manuell gestartet",
-  "fileshare.upload": "Datei(en) hochgeladen",
-  "fileshare.mkdir": "Ordner angelegt",
-  "fileshare.delete": "Datei/Ordner gelöscht",
-  "fileshare.rename": "Datei/Ordner umbenannt",
-  "fileshare.download": "Als ZIP heruntergeladen",
-  "auditlog.archive": "Auditlog archiviert",
-  "auditlog.export_delete": "Auditlog-Archiv exportiert",
-} %}
-{% set action_icons = {
-  "delete": '<path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/>',
-  "create": '<path d="M12 5v14M5 12h14"/>',
-  "edit": '<path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/>',
-  "activate": '<path d="M20 6L9 17l-5-5"/>',
-  "deactivate": '<circle cx="12" cy="12" r="9"/><path d="M15 9l-6 6M9 9l6 6"/>',
-} %}
-{% set create_kinds = ("create", "upload", "mkdir") %}
-
-{% macro category_of(kind) %}{% if kind in create_kinds %}create{% elif kind == "delete" %}delete{% else %}edit{% endif %}{% endmacro %}
+{% import "_audit_log_macros.html" as m %}
 
 {% set ns = namespace(create=0, delete=0, edit=0) %}
 {% for e in entries %}
-  {% set cat = category_of(e['action'].split('.')[-1])|trim %}
+  {% set cat = m.category_of(e['action'].split('.')[-1])|trim %}
   {% if cat == "create" %}{% set ns.create = ns.create + 1 %}
   {% elif cat == "delete" %}{% set ns.delete = ns.delete + 1 %}
   {% else %}{% set ns.edit = ns.edit + 1 %}{% endif %}
 {% endfor %}
 
+{% macro fmt_count(loaded, total) %}{% if loaded < total %}{{ loaded }} / {{ total }}{% else %}{{ loaded }}{% endif %}{% endmacro %}
+
 <div class="stat-row" style="margin-bottom:18px;">
   <div class="stat-card" data-category-filter="">
     <div class="stat-label">Alle</div>
-    <div class="stat-value">{{ entries|length }}</div>
+    <div class="stat-value" id="statAll">{{ fmt_count(entries|length, total_count) }}</div>
   </div>
   <div class="stat-card" data-category-filter="create">
     <div class="stat-label">Hinzufügen</div>
-    <div class="stat-value" style="color:var(--success);">{{ ns.create }}</div>
+    <div class="stat-value" id="statCreate" style="color:var(--success);">{{ fmt_count(ns.create, total_create) }}</div>
   </div>
   <div class="stat-card" data-category-filter="edit">
     <div class="stat-label">Änderungen</div>
-    <div class="stat-value" style="color:var(--accent-strong);">{{ ns.edit }}</div>
+    <div class="stat-value" id="statEdit" style="color:var(--accent-strong);">{{ fmt_count(ns.edit, total_edit) }}</div>
   </div>
   <div class="stat-card" data-category-filter="delete">
     <div class="stat-label">Löschungen</div>
-    <div class="stat-value" style="color:var(--danger);">{{ ns.delete }}</div>
+    <div class="stat-value" id="statDelete" style="color:var(--danger);">{{ fmt_count(ns.delete, total_delete) }}</div>
   </div>
 </div>
 
@@ -92,29 +56,21 @@
       <th>Details</th>
     </tr></thead>
     <tbody>
-      {% for e in entries %}
-      {% set kind = e['action'].split('.')[-1] %}
-      {% set cat = category_of(kind)|trim %}
-      <tr data-category="{{ cat }}" data-sort-ts="{{ e['ts'] }}" data-sort-user="{{ e['username']|lower }}"
-          data-sort-action="{{ action_labels.get(e['action'], e['action'])|lower }}" data-sort-target="{{ (e['target'] or '')|lower }}">
-        <td class="text-dim mono" style="font-size:12.5px;">{{ e['ts'] }}</td>
-        <td class="cell-name">{{ e['username'] }}</td>
-        <td>
-          <span class="pill action-pill action-pill--{{ cat }}">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{{ (action_icons.get(kind) or action_icons['edit'])|safe }}</svg>
-            {{ action_labels.get(e['action'], e['action']) }}
-          </span>
-        </td>
-        <td>{{ e['target'] or '—' }}</td>
-        <td class="text-dim">{{ e['details'] or '—' }}</td>
-      </tr>
-      {% else %}
+      {% for e in entries %}{{ m.audit_row(e) }}{% else %}
       <tr class="empty-row"><td colspan="5">Noch keine Änderungen protokolliert.</td></tr>
       {% endfor %}
     </tbody>
   </table>
   </div>
   <p id="auditNoResults" class="text-faint hidden" style="padding:16px; text-align:center; font-size:12.5px;">Keine Einträge für diese Auswahl.</p>
+  <div id="auditLoadMoreWrap" class="{{ 'hidden' if not has_more }}" style="padding:16px; text-align:center; display:flex; gap:8px; justify-content:center;">
+    <button type="button" id="auditLoadMoreBtn" class="btn btn-primary" data-oldest-id="{{ oldest_loaded_id or '' }}">
+      Mehr laden (300)
+    </button>
+    <button type="button" id="auditLoadAllBtn" class="btn btn-secondary">
+      Alle laden
+    </button>
+  </div>
   </div>
 
 {% endblock %}
@@ -124,11 +80,11 @@
 document.addEventListener("DOMContentLoaded", function () {
     const searchInput = document.getElementById("auditSearch");
     const noResults = document.getElementById("auditNoResults");
-    const rows = Array.from(document.querySelectorAll("#auditTable tbody tr"));
     let activeCategory = null;
 
     function applyFilters() {
         const q = (searchInput ? searchInput.value : "").trim().toLowerCase();
+        const rows = Array.from(document.querySelectorAll("#auditTable tbody tr"));
         let anyVisible = false;
         rows.forEach(function (row) {
             if (row.classList.contains("empty-row")) return;
@@ -156,7 +112,113 @@ document.addEventListener("DOMContentLoaded", function () {
         });
     });
 
+    /* ---- Nachladen älterer Einträge (Mehr laden / Alle laden) ---- */
+    const totalCount = {{ total_count }};
+    const totalCreate = {{ total_create }};
+    const totalEdit = {{ total_edit }};
+    const totalDelete = {{ total_delete }};
+    const entryCountLabel = document.getElementById("auditEntryCount");
+
+    function fmtCount(loaded, total) {
+        return loaded < total ? loaded + " / " + total : String(loaded);
+    }
+
+    function recomputeStats() {
+        const rows = Array.from(document.querySelectorAll("#auditTable tbody tr[data-category]"));
+        const counts = { create: 0, edit: 0, delete: 0 };
+        rows.forEach(function (r) { counts[r.dataset.category] = (counts[r.dataset.category] || 0) + 1; });
+        document.getElementById("statAll").textContent = fmtCount(rows.length, totalCount);
+        document.getElementById("statCreate").textContent = fmtCount(counts.create, totalCreate);
+        document.getElementById("statEdit").textContent = fmtCount(counts.edit, totalEdit);
+        document.getElementById("statDelete").textContent = fmtCount(counts.delete, totalDelete);
+        if (entryCountLabel) {
+            entryCountLabel.textContent = rows.length < totalCount
+                ? rows.length + " von " + totalCount + " Einträgen geladen"
+                : rows.length + " Eintrag" + (rows.length === 1 ? "" : "e");
+        }
+        return rows.length;
+    }
+
+    const loadMoreBtn = document.getElementById("auditLoadMoreBtn");
+    const loadAllBtn = document.getElementById("auditLoadAllBtn");
+    const loadMoreWrap = document.getElementById("auditLoadMoreWrap");
+    const tbody = document.querySelector("#auditTable tbody");
+    const MORE_URL = "{{ url_for('activity_log_more') }}";
+
+    // Laedt genau einen weiteren 300er-Block nach und haengt ihn an -- von
+    // beiden Buttons genutzt: "Mehr laden" ruft das einmal auf, "Alle laden"
+    // ruft es wiederholt auf, bis der Server "keine weiteren mehr" meldet.
+    function loadMoreOnce() {
+        const oldestId = loadMoreBtn.dataset.oldestId;
+        if (!oldestId) return Promise.resolve({ hasMore: false });
+        return fetch(MORE_URL + "?before_id=" + encodeURIComponent(oldestId))
+            .then(function (r) {
+                const hasMore = r.headers.get("X-Has-More") === "1";
+                const newOldestId = r.headers.get("X-Oldest-Id");
+                return r.text().then(function (html) {
+                    return { html: html, hasMore: hasMore, newOldestId: newOldestId };
+                });
+            })
+            .then(function (result) {
+                const emptyRow = tbody.querySelector(".empty-row");
+                if (emptyRow) emptyRow.remove();
+                tbody.insertAdjacentHTML("beforeend", result.html);
+                if (result.newOldestId) loadMoreBtn.dataset.oldestId = result.newOldestId;
+                return result;
+            });
+    }
+
+    if (loadMoreBtn) {
+        loadMoreBtn.addEventListener("click", function () {
+            loadMoreBtn.disabled = true;
+            if (loadAllBtn) loadAllBtn.disabled = true;
+            const originalText = loadMoreBtn.textContent;
+            loadMoreBtn.textContent = "Lädt …";
+            loadMoreOnce()
+                .then(function (result) {
+                    if (!result.hasMore) loadMoreWrap.classList.add("hidden");
+                    recomputeStats();
+                    applyFilters();
+                })
+                .catch(function () { /* Button unten wird trotzdem wieder aktiviert */ })
+                .then(function () {
+                    loadMoreBtn.disabled = false;
+                    if (loadAllBtn) loadAllBtn.disabled = false;
+                    loadMoreBtn.textContent = originalText;
+                });
+        });
+    }
+
+    if (loadAllBtn) {
+        loadAllBtn.addEventListener("click", function () {
+            loadMoreBtn.disabled = true;
+            loadAllBtn.disabled = true;
+            const originalText = loadAllBtn.textContent;
+
+            function step() {
+                loadAllBtn.textContent = "Lädt … (" + recomputeStats() + " von " + totalCount + ")";
+                return loadMoreOnce().then(function (result) {
+                    return result.hasMore ? step() : null;
+                });
+            }
+
+            step()
+                .then(function () {
+                    loadMoreWrap.classList.add("hidden");
+                })
+                .catch(function () { /* teilweise geladene Eintraege bleiben stehen */ })
+                .then(function () {
+                    recomputeStats();
+                    applyFilters();
+                    loadMoreBtn.disabled = false;
+                    loadAllBtn.disabled = false;
+                    loadAllBtn.textContent = originalText;
+                });
+        });
+    }
+
     applyFilters();
+    recomputeStats();
 });
 </script>
 {% endblock %}

srv/tesm/templates/credentials.html

@@ -8,6 +8,7 @@
 {% block page_sub %}<div class="topbar-sub">{{ credentials|length }} Zugangsdaten</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 
 <div class="section-head">
   <div>
@@ -95,13 +96,12 @@
         <div class="field"><label>Username</label>
           <input type="text" name="username" required placeholder="z.B. admin">
         </div>
-        <div class="field"><label>Kategorie</label>
+        <div class="field"><label>Kategorie {{ hi.hint_icon("Bestimmt u.a., ob diese Zugangsdaten unter „Wartung“ für Bulk-Updates nutzbar sind.", "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>

srv/tesm/templates/devices.html

@@ -13,6 +13,7 @@
 {% block page_sub %}<div class="topbar-sub">{{ devices|length }} Geräte</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 
 <div class="section-head">
   <div>
@@ -125,9 +126,8 @@
           <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>Switchport</label>
+        <div class="field"><label>Switchport {{ hi.hint_icon("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.", "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">
@@ -136,9 +136,8 @@
           </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>
+        <div class="field"><label>SSH-Port {{ hi.hint_icon("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.", "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>
@@ -201,14 +200,12 @@
           <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>Switchport</label>
+        <div class="field"><label>Switchport {{ hi.hint_icon("Portnummer am zugeordneten Switch, für den PoE-Neustart. Hat nichts mit dem SSH-Port unten zu tun.", "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>
+        <div class="field"><label>SSH-Port {{ hi.hint_icon("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.", "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>

srv/tesm/templates/fileshare.html

@@ -4,6 +4,7 @@
 {% block page_sub %}<div class="topbar-sub">{{ selected_share }}{% if rel_path %} / {{ rel_path }}{% endif %}</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 
 {% macro render_tree_node(share, path, name, expanded_map, active_path) %}
 <li class="tree-node" data-share="{{ share }}" data-path="{{ path }}">
@@ -161,10 +162,9 @@
       </div>
       <div class="modal-body">
         <div class="field">
-          <label>Datei(en)</label>
+          <label>Datei(en) {{ hi.hint_icon("Insgesamt maximal 15 MB pro Upload-Vorgang. Mehrfachauswahl möglich (auch mehrmals nacheinander — bereits hinzugefügte Dateien bleiben dabei erhalten).", "Datei(en)") }}</label>
           <input type="file" name="file" id="uploadFileInput" multiple required>
           <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>

srv/tesm/templates/groups.html

@@ -4,6 +4,7 @@
 {% block page_sub %}<div class="topbar-sub">{{ groups|length + 1 }} Gruppen · Rechteverwaltung</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 
 {% macro permission_table(group, group_key, checked_keys, readonly) %}
 {% set row_types = group_row_types[group_key] %}
@@ -69,11 +70,7 @@
 
 <div class="section-head">
   <div>
-    <h2 style="font-size:16px;">Gruppen</h2>
-    <div class="hint">
-      Rechte je Gruppe granular vergeben, Mitgliedschaft in mehreren Gruppen addiert sich.
-      „Admin“ und „Benutzer“ sind feste Systemgruppen. Legende direkt bei den Rechten.
-    </div>
+    <h2 style="font-size:16px;">Gruppen {{ hi.hint_icon("Rechte je Gruppe granular vergeben, Mitgliedschaft in mehreren Gruppen addiert sich. „Admin“ und „Benutzer“ sind feste Systemgruppen. Legende direkt bei den Rechten.", "Gruppen") }}</h2>
   </div>
   {% if current_user.has_permission('groups.create') %}
   <button type="button" class="btn btn-primary" data-open-modal="addGroupModal">
@@ -317,9 +314,8 @@
       <div class="modal-body">
         <input type="hidden" name="add_group" value="1">
         <div class="field">
-          <label>Name</label>
+          <label>Name {{ hi.hint_icon("Mitglieder werden danach über die Gruppentabelle zugeordnet.", "Name") }}</label>
           <input type="text" name="name" required placeholder="z.B. Facility-Team">
-          <div class="field-hint">Mitglieder werden danach über die Gruppentabelle zugeordnet.</div>
         </div>
         {{ permission_tree([], false) }}
       </div>

srv/tesm/templates/logs_history.html

@@ -4,6 +4,7 @@
 {% block page_sub %}<div class="topbar-sub">{{ selected_file.range_label if selected_file else "kein Log" }}</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 
 <div class="section-head">
   <div>
@@ -54,8 +55,7 @@
 
 <div class="section-head" style="margin-top:28px;">
   <div>
-    <h2 style="font-size:16px;">Archivierte Auditlog-Tage</h2>
-    <div class="hint">Ältere Auditlog-Einträge, tageweise als eigene Datei ausgelagert, sobald die laufende Tabelle den Schwellenwert überschreitet — die Dateien selbst bleiben unbegrenzt erhalten, bis sie hier bewusst exportiert werden.</div>
+    <h2 style="font-size:16px;">Archivierte Auditlog-Tage {{ hi.hint_icon("Ältere Auditlog-Einträge, tageweise als eigene Datei ausgelagert, sobald die laufende Tabelle den Schwellenwert überschreitet — die Dateien selbst bleiben unbegrenzt erhalten, bis sie hier bewusst exportiert werden.", "Archivierte Auditlog-Tage") }}</h2>
   </div>
   {% if current_user.can_manage_log_history and audit_files %}
   <form method="post" action="{{ url_for('logs_history_audit_export') }}"

srv/tesm/templates/maintenance.html

@@ -4,15 +4,11 @@
 {% block page_sub %}<div class="topbar-sub">{{ devices|length }} Linux-Client{{ 's' if devices|length != 1 else '' }} mit SSH-Zugangsdaten</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 
 <div class="section-head">
   <div>
-    <h2 style="font-size:16px;">Wartung (SSH)</h2>
-    <div class="hint">
-      Bulk-Update (<code>apt update &amp; upgrade -y</code>) und Neustart per SSH direkt auf dem Gerät —
-      unabhängig vom PoE-Neustart über den Switch (siehe Dashboard). Nur Geräte mit hinterlegten
-      SSH-Zugangsdaten der Kategorie „Linux-Client“ erscheinen hier.
-    </div>
+    <h2 style="font-size:16px;">Wartung (SSH) {{ hi.hint_icon("Bulk-Update (apt update & upgrade -y) und Neustart per SSH direkt auf dem Gerät — unabhängig vom PoE-Neustart über den Switch (siehe Dashboard). Nur Geräte mit hinterlegten SSH-Zugangsdaten der Kategorie „Linux-Client“ erscheinen hier.", "Wartung (SSH)") }}</h2>
   </div>
 </div>
 
@@ -87,7 +83,9 @@
 
 {% if can_run %}
 <div class="section-head" style="margin-top:16px;">
-  <div class="hint">Ausgewählte Geräte aktualisieren (nicht-interaktiv, unbeaufsichtigte Konfig-Rückfragen werden automatisch mit den bisherigen Werten beantwortet) oder neu starten.</div>
+  <div style="display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-faint);">
+    Bulk-Aktionen {{ hi.hint_icon("Ausgewählte Geräte aktualisieren (nicht-interaktiv, unbeaufsichtigte Konfig-Rückfragen werden automatisch mit den bisherigen Werten beantwortet) oder neu starten.", "Bulk-Aktionen") }}
+  </div>
   <div style="display:flex; gap:8px;">
     <button type="button" class="btn btn-secondary" onclick="bulkReboot()">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3.2-6.9M21 4v5h-5"/></svg>

srv/tesm/templates/settings.html

@@ -4,6 +4,7 @@
 {% block page_sub %}<div class="topbar-sub">Prüfintervall und Netzwerkkonfiguration dieses Hosts</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 <div class="settings-grid">
 
   <div class="card card-pad">
@@ -27,13 +28,12 @@
     <hr style="border:none; border-top:1px solid var(--border-soft); margin:18px 0;">
     <form method="post">
       <div class="field">
-        <label for="timezone">Zeitzone</label>
+        <label for="timezone">Zeitzone {{ hi.hint_icon("Bestimmt die lokale Zeit in allen Logs und im Änderungsverlauf — wirkt sofort für diese laufende App-Instanz, ohne Dienst-Neustart.", "Zeitzone") }}</label>
         <select name="timezone" id="timezone" required>
           {% for tz in timezones %}
           <option value="{{ tz }}" {% if tz == current_timezone %}selected{% endif %}>{{ tz }}</option>
           {% endfor %}
         </select>
-        <div class="field-hint">Bestimmt die lokale Zeit in allen Logs und im Änderungsverlauf — wirkt sofort für diese laufende App-Instanz, ohne Dienst-Neustart.</div>
       </div>
       <button type="submit" class="btn btn-primary btn-block">
         <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>
@@ -43,9 +43,8 @@
     <hr style="border:none; border-top:1px solid var(--border-soft); margin:18px 0;">
     <form method="post">
       <div class="field">
-        <label for="interval">Prüfintervall (Minuten)</label>
+        <label for="interval">Prüfintervall (Minuten) {{ hi.hint_icon("Wie oft Geräte auf Erreichbarkeit geprüft werden. Der Hintergrund-Dienst (tesm-check.service) wird nach dem Speichern automatisch neu gestartet.", "Prüfintervall (Minuten)") }}</label>
         <input type="number" name="interval" id="interval" value="{{ interval }}" min="1" required>
-        <div class="field-hint">Wie oft Geräte auf Erreichbarkeit geprüft werden. Der Hintergrund-Dienst (tesm-check.service) wird nach dem Speichern automatisch neu gestartet.</div>
       </div>
       <button type="submit" class="btn btn-primary btn-block">
         <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>
@@ -118,13 +117,12 @@
     {% elif net_backend != 'unknown' and current_user.has_permission('settings_system.edit') %}
     <form method="post" data-confirm="Netzwerkkonfiguration wirklich ändern? Falls die Verbindung danach abbricht, wird die vorherige Konfiguration automatisch nach {{ net_revert_seconds }} Sekunden wiederhergestellt.">
       <input type="hidden" name="apply_network" value="1">
-      <div class="field"><label>Interface</label>
+      <div class="field"><label>Interface {{ hi.hint_icon("Jedes Interface hat seine eigene Konfiguration — ein Wechsel hier lädt unten dessen tatsächlichen Ist-Zustand, ändert aber noch nichts.", "Interface") }}</label>
         <select name="net_interface" id="netInterfaceSelect" onchange="loadNetworkState(this.value)">
           {% for iface in net_interfaces %}
           <option value="{{ iface }}" {% if iface == net_interface %}selected{% endif %}>{{ iface }}</option>
           {% endfor %}
         </select>
-        <div class="field-hint">Jedes Interface hat seine eigene Konfiguration — ein Wechsel hier lädt unten dessen tatsächlichen Ist-Zustand, ändert aber noch nichts.</div>
       </div>
       <div class="field"><label>Modus</label>
         <select name="net_mode" id="netModeSelect" onchange="document.getElementById('netStaticFields').classList.toggle('hidden', this.value !== 'static')">
@@ -143,9 +141,8 @@
           <input type="text" name="net_gateway" id="netGatewayInput" value="{{ net_state.gateway if net_state.mode == 'static' else '' }}" placeholder="z.B. 192.168.1.1">
         </div>
       </div>
-      <div class="field"><label>DNS-Server</label>
+      <div class="field"><label>DNS-Server {{ hi.hint_icon("Kommagetrennt. Leer lassen, um die per DHCP zugewiesenen DNS-Server zu verwenden.", "DNS-Server") }}</label>
         <input type="text" name="net_dns" id="netDnsInput" value="{{ net_state.dns|join(', ') if net_state and net_state.dns else '' }}" placeholder="z.B. 1.1.1.1, 8.8.8.8">
-        <div class="field-hint">Kommagetrennt. Leer lassen, um die per DHCP zugewiesenen DNS-Server zu verwenden.</div>
       </div>
       <button type="submit" class="btn btn-primary btn-block">
         <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>
@@ -184,9 +181,8 @@
         </select>
       </div>
       <div class="field">
-        <label for="log_rotation_keep">Aufbewahrung (Anzahl Rotationen)</label>
+        <label for="log_rotation_keep">Aufbewahrung (Anzahl Rotationen) {{ hi.hint_icon("Standard: wöchentlich, 4 Rotationen (≈ 1 Monat Historie je Log).", "Aufbewahrung (Anzahl Rotationen)") }}</label>
         <input type="number" name="log_rotation_keep" id="log_rotation_keep" value="{{ log_rotation_keep }}" min="1" required>
-        <div class="field-hint">Standard: wöchentlich, 4 Rotationen (≈ 1 Monat Historie je Log).</div>
       </div>
       <button type="submit" class="btn btn-primary btn-block">
         <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>
@@ -221,9 +217,8 @@
     {% if current_user.has_permission('settings_system.edit') %}
     <form method="post">
       <div class="field">
-        <label for="trash_retention_days">Aufbewahrungsdauer (Tage)</label>
+        <label for="trash_retention_days">Aufbewahrungsdauer (Tage) {{ hi.hint_icon("Danach werden Papierkorb-Einträge automatisch unwiderruflich gelöscht (AD/LDAP-Benutzer sind nie im Papierkorb, da sie sich beim nächsten Login automatisch neu anlegen).", "Aufbewahrungsdauer (Tage)") }}</label>
         <input type="number" name="trash_retention_days" id="trash_retention_days" value="{{ trash_retention_days }}" min="1" required>
-        <div class="field-hint">Danach werden Papierkorb-Einträge automatisch unwiderruflich gelöscht (AD/LDAP-Benutzer sind nie im Papierkorb, da sie sich beim nächsten Login automatisch neu anlegen).</div>
       </div>
       <button type="submit" name="save_trash_retention" value="1" class="btn btn-primary btn-block">
         <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>

srv/tesm/templates/settings_dhcp.html

@@ -5,6 +5,7 @@
 {% block page_sub %}<div class="topbar-sub">Reservierungen und eigene Options aus den Client-Stammdaten (Kea DHCP)</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 <div class="settings-grid">
 
   <div class="card card-pad">
@@ -81,9 +82,8 @@
       <div class="field"><label>Lease-Zeit Maximum (Sek.)</label>
         <input type="number" name="dhcp_lease_max" value="{{ cfg.dhcp_lease_max }}">
       </div>
-      <div class="field"><label>Ausgabepfad (Kea-Konfigurationsdatei)</label>
+      <div class="field"><label>Ausgabepfad (Kea-Konfigurationsdatei) {{ hi.hint_icon("Standardmäßig die aktive Kea-Konfiguration. Läuft der Dienst gerade, schreibt „Speichern“ die Datei neu und startet ihn automatisch neu.", "Ausgabepfad (Kea-Konfigurationsdatei)") }}</label>
         <input type="text" name="dhcp_output_path" value="{{ cfg.dhcp_output_path }}" class="mono">
-        <div class="field-hint">Standardmäßig die aktive Kea-Konfiguration. Läuft der Dienst gerade, schreibt „Speichern“ die Datei neu und startet ihn automatisch neu.</div>
       </div>
       <button type="submit" class="btn btn-primary btn-block">
         <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>
@@ -98,11 +98,7 @@
   <div class="card card-pad" style="grid-column:1 / -1;">
     <div class="section-head" style="margin-bottom:16px;">
       <div>
-        <h2 style="font-size:16px;">Subnetze</h2>
-        <div class="hint">
-          Ein Host kann mehrere IPs/Interfaces mit jeweils eigenem Netz bedienen — je Subnetz eigene Range,
-          optional eigenes Gateway/DNS. Subnet/Netzmaske werden live vom Interface übernommen, nicht manuell gepflegt.
-        </div>
+        <h2 style="font-size:16px;">Subnetze {{ hi.hint_icon("Ein Host kann mehrere IPs/Interfaces mit jeweils eigenem Netz bedienen — je Subnetz eigene Range, optional eigenes Gateway/DNS. Subnet/Netzmaske werden live vom Interface übernommen, nicht manuell gepflegt.", "Subnetze") }}</h2>
       </div>
       {% if can_edit %}
       <button type="button" class="btn btn-primary" data-open-modal="addSubnetModal">
@@ -175,11 +171,7 @@
   <div class="card card-pad" style="grid-column:1 / -1;">
     <div class="section-head" style="margin-bottom:16px;">
       <div>
-        <h2 style="font-size:16px;">DHCP-Options</h2>
-        <div class="hint">
-          Standard-Optionen (analog den "Predefined Options" eines Windows-DHCP-Servers) sind bereits vorbefüllt,
-          eigene/herstellerspezifische Options lassen sich zusätzlich anlegen — beide global oder pro Client überschreibbar.
-        </div>
+        <h2 style="font-size:16px;">DHCP-Options {{ hi.hint_icon('Standard-Optionen (analog den "Predefined Options" eines Windows-DHCP-Servers) sind bereits vorbefüllt, eigene/herstellerspezifische Options lassen sich zusätzlich anlegen — beide global oder pro Client überschreibbar.', "DHCP-Options") }}</h2>
       </div>
       {% if can_edit %}
       <button type="button" class="btn btn-primary" data-open-modal="addOptionModal">
@@ -217,7 +209,9 @@
                 <input type="text" name="value" value="{{ option_values.get(d.id, {}).get('', '') }}" style="max-width:220px;" placeholder="(nicht gesetzt)">
                 <button type="submit" class="btn btn-secondary btn-sm">Speichern</button>
               </form>
-              <div class="field-hint">Leeren Wert speichern, um eine Standard-Option wieder auszublenden.</div>
+              <div class="text-faint" style="font-size:11.5px; display:flex; align-items:center; gap:6px;">
+                Standard-Option zurücksetzen {{ hi.hint_icon("Leeren Wert speichern, um eine Standard-Option wieder auszublenden.", "Standard-Option zurücksetzen") }}
+              </div>
               {% else %}
               {{ option_values.get(d.id, {}).get('', '—') }}
               {% endif %}
@@ -272,11 +266,7 @@
   <div class="card card-pad" style="grid-column:1 / -1;">
     <div class="section-head" style="margin-bottom:16px;">
       <div>
-        <h2 style="font-size:16px;">Aktive Leases</h2>
-        <div class="hint">
-          Direkt aus Kea gelesen (nicht aus den Reservierungen) — zeigt auch Clients OHNE eigene Reservierung,
-          die sich einfach eine freie IP aus dem Pool genommen haben.
-        </div>
+        <h2 style="font-size:16px;">Aktive Leases {{ hi.hint_icon("Direkt aus Kea gelesen (nicht aus den Reservierungen) — zeigt auch Clients OHNE eigene Reservierung, die sich einfach eine freie IP aus dem Pool genommen haben.", "Aktive Leases") }}</h2>
       </div>
     </div>
 
@@ -497,9 +487,8 @@
         <div class="field"><label>Code</label>
           <input type="number" name="code" min="1" max="254" required placeholder="z.B. 225">
         </div>
-        <div class="field"><label>Name</label>
+        <div class="field"><label>Name {{ hi.hint_icon("Nur Kleinbuchstaben, Ziffern und Bindestrich, muss mit einem Buchstaben beginnen.", "Name") }}</label>
           <input type="text" name="name" required placeholder="z.B. terminal-url" pattern="[a-z][a-z0-9-]*">
-          <div class="field-hint">Nur Kleinbuchstaben, Ziffern und Bindestrich, muss mit einem Buchstaben beginnen.</div>
         </div>
         <div class="field"><label>Datentyp</label>
           <select name="type">
@@ -539,13 +528,11 @@
         <div class="field"><label>MAC-Adresse</label>
           <input type="text" name="mac" required placeholder="z.B. AA:BB:CC:DD:EE:FF">
         </div>
-        <div class="field"><label>IP-Adresse</label>
+        <div class="field"><label>IP-Adresse {{ hi.hint_icon("Muss in einem der oben konfigurierten Subnetze liegen, sonst wird sie beim Schreiben übersprungen.", "IP-Adresse") }}</label>
           <input type="text" name="ip" required placeholder="z.B. 192.168.1.50">
-          <div class="field-hint">Muss in einem der oben konfigurierten Subnetze liegen, sonst wird sie beim Schreiben übersprungen.</div>
         </div>
-        <div class="field"><label>Name</label>
+        <div class="field"><label>Name {{ hi.hint_icon("Wird zum Hostname der Reservierung. DHCP-Optionen (z.B. Hostname erzwingen) lassen sich danach über das Options-Symbol in der Tabelle setzen.", "Name") }}</label>
           <input type="text" name="name" required placeholder="z.B. Empfangsdrucker">
-          <div class="field-hint">Wird zum Hostname der Reservierung. DHCP-Optionen (z.B. Hostname erzwingen) lassen sich danach über das Options-Symbol in der Tabelle setzen.</div>
         </div>
       </div>
       <div class="modal-footer">
@@ -575,16 +562,14 @@
         <div class="field"><label>Range Start</label>
           <input type="text" name="range_start" required placeholder="z.B. 192.168.1.100">
         </div>
-        <div class="field"><label>Range Ende</label>
+        <div class="field"><label>Range Ende {{ hi.hint_icon("Muss im tatsächlich am Interface erkannten Netz liegen — sonst wird das Subnetz abgelehnt.", "Range Ende") }}</label>
           <input type="text" name="range_end" required placeholder="z.B. 192.168.1.200">
-          <div class="field-hint">Muss im tatsächlich am Interface erkannten Netz liegen — sonst wird das Subnetz abgelehnt.</div>
         </div>
         <div class="field"><label>Gateway (optional)</label>
           <input type="text" name="gateway" placeholder="Automatisch: erkanntes Gateway des Interfaces">
         </div>
-        <div class="field"><label>DNS-Server (optional)</label>
+        <div class="field"><label>DNS-Server (optional) {{ hi.hint_icon("Kommagetrennt, falls mehrere.", "DNS-Server (optional)") }}</label>
           <input type="text" name="dns" placeholder="z.B. 1.1.1.1, 8.8.8.8">
-          <div class="field-hint">Kommagetrennt, falls mehrere.</div>
         </div>
       </div>
       <div class="modal-footer">
@@ -617,16 +602,14 @@
         <div class="field"><label>Range Start</label>
           <input type="text" name="range_start" value="{{ s.range_start }}" required>
         </div>
-        <div class="field"><label>Range Ende</label>
+        <div class="field"><label>Range Ende {{ hi.hint_icon("Muss im tatsächlich am Interface erkannten Netz liegen — sonst wird das Subnetz abgelehnt.", "Range Ende") }}</label>
           <input type="text" name="range_end" value="{{ s.range_end }}" required>
-          <div class="field-hint">Muss im tatsächlich am Interface erkannten Netz liegen — sonst wird das Subnetz abgelehnt.</div>
         </div>
         <div class="field"><label>Gateway (optional)</label>
           <input type="text" name="gateway" value="{{ s.gateway or '' }}" placeholder="Automatisch: erkanntes Gateway des Interfaces">
         </div>
-        <div class="field"><label>DNS-Server (optional)</label>
+        <div class="field"><label>DNS-Server (optional) {{ hi.hint_icon("Kommagetrennt, falls mehrere.", "DNS-Server (optional)") }}</label>
           <input type="text" name="dns" value="{{ s.dns or '' }}" placeholder="z.B. 1.1.1.1, 8.8.8.8">
-          <div class="field-hint">Kommagetrennt, falls mehrere.</div>
         </div>
       </div>
       <div class="modal-footer">

srv/tesm/templates/settings_import_export.html

@@ -4,6 +4,7 @@
 {% block page_sub %}<div class="topbar-sub">Umzug auf eine neue Umgebung</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 <div class="settings-grid">
 
   <div class="card card-pad">
@@ -26,7 +27,7 @@
           data-confirm="Ausgewählte Kategorien wirklich importieren? Bestehende Einträge mit gleichem Namen/Hostname/MAC/Benutzernamen werden überschrieben.">
       <input type="hidden" name="import_token" value="{{ import_preview.token }}">
       <div class="field">
-        <label>Was importieren?</label>
+        <label>Was importieren? {{ hi.hint_icon("AD/LDAP-Benutzerkonten sind hiervon unberührt — sie werden über Active Directory/Windows verwaltet, nicht über diese App, und beim nächsten Login automatisch neu angelegt.", "Was importieren?") }}</label>
         <div class="check-list">
           {% for s in import_preview.sections %}
           <label class="check-row">
@@ -38,10 +39,6 @@
           </label>
           {% endfor %}
         </div>
-        <div class="field-hint">
-          AD/LDAP-Benutzerkonten sind hiervon unberührt — sie werden über Active Directory/Windows verwaltet,
-          nicht über diese App, und beim nächsten Login automatisch neu angelegt.
-        </div>
       </div>
       <button type="submit" class="btn btn-primary btn-block">
         <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>
@@ -77,7 +74,7 @@
     {% if current_user.has_permission('settings_importexport.export') %}
     <form method="post" action="{{ url_for('export_data') }}">
       <div class="field">
-        <label>Was exportieren?</label>
+        <label>Was exportieren? {{ hi.hint_icon("AD/LDAP-Benutzerkonten werden nie mitexportiert — sie werden über Active Directory/Windows verwaltet (nicht über diese App) und legen sich beim nächsten Login automatisch wieder an. Beim LDAP-Export wird lediglich das Bind-Konto (verschlüsselt) sowie die Gruppenzuordnungen gesichert.", "Was exportieren?") }}</label>
         <div class="check-list">
           {% for key, label in export_sections %}
           <label class="check-row">
@@ -89,16 +86,10 @@
           </label>
           {% endfor %}
         </div>
-        <div class="field-hint">
-          AD/LDAP-Benutzerkonten werden nie mitexportiert — sie werden über Active Directory/Windows verwaltet
-          (nicht über diese App) und legen sich beim nächsten Login automatisch wieder an. Beim LDAP-Export wird
-          lediglich das Bind-Konto (verschlüsselt) sowie die Gruppenzuordnungen gesichert.
-        </div>
       </div>
       <div class="field">
-        <label for="export_passphrase">Passphrase</label>
+        <label for="export_passphrase">Passphrase {{ hi.hint_icon("Wird zum Verschlüsseln der Export-Datei benötigt — für den späteren Import dieselbe Passphrase erneut eingeben.", "Passphrase") }}</label>
         <input type="password" name="export_passphrase" id="export_passphrase" required>
-        <div class="field-hint">Wird zum Verschlüsseln der Export-Datei benötigt — für den späteren Import dieselbe Passphrase erneut eingeben.</div>
       </div>
       <button type="submit" class="btn btn-secondary btn-block">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>

srv/tesm/templates/settings_ldap.html

@@ -5,6 +5,7 @@
 {% block page_sub %}<div class="topbar-sub">Anmeldung mit dem Domänen-Passwort, zusätzlich zu lokalen Konten</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 <div class="settings-grid settings-grid--wide">
 
   <div class="card card-pad">
@@ -23,18 +24,16 @@
           <span>LDAP-Anmeldung aktivieren</span>
         </label>
       </div>
-      <div class="field"><label>Server</label>
+      <div class="field"><label>Server {{ hi.hint_icon("DNS-Name oder IP-Adresse — beides wird genau so gespeichert und beim Verbinden verwendet.", "Server") }}</label>
         <input type="text" name="ldap_server" value="{{ ldap.server }}" placeholder="z.B. 192.168.1.1 oder dc01.firma.local">
-        <div class="field-hint">DNS-Name oder IP-Adresse — beides wird genau so gespeichert und beim Verbinden verwendet.</div>
       </div>
       <div class="field">
         <label class="switch-check" style="display:inline-flex; align-items:center; gap:8px;">
           <input type="checkbox" name="ldap_use_ssl" id="ldap_use_ssl" {% if ldap.use_ssl %}checked{% endif %}
                  onchange="document.getElementById('ldap_port').value = this.checked ? 636 : 389;">
           <span class="track"></span>
-          <span>LDAPS/TLS verwenden</span>
+          <span>LDAPS/TLS verwenden {{ hi.hint_icon("Ohne LDAPS wird das Passwort unverschlüsselt übertragen — nur für interne Tests geeignet, vor Produktivbetrieb LDAPS auf dem Domain Controller einrichten. Stellt beim Umschalten den Port automatisch auf 636/389 — unten weiterhin manuell änderbar.", "LDAPS/TLS verwenden") }}</span>
         </label>
-        <div class="field-hint">Ohne LDAPS wird das Passwort unverschlüsselt übertragen — nur für interne Tests geeignet, vor Produktivbetrieb LDAPS auf dem Domain Controller einrichten. Stellt beim Umschalten den Port automatisch auf 636/389 — unten weiterhin manuell änderbar.</div>
       </div>
       <div class="field"><label>Port</label>
         <input type="number" name="ldap_port" id="ldap_port" min="1" max="65535" value="{{ ldap.port }}">
@@ -43,13 +42,11 @@
         <label class="switch-check" style="display:inline-flex; align-items:center; gap:8px;">
           <input type="checkbox" name="ldap_tls_skip_verify" {% if ldap.tls_skip_verify %}checked{% endif %}>
           <span class="track"></span>
-          <span>Zertifikatsprüfung überspringen (nur LDAPS)</span>
+          <span>Zertifikatsprüfung überspringen (nur LDAPS) {{ hi.hint_icon("Akzeptiert jedes Server-Zertifikat, auch selbstsignierte/nicht vertrauenswürdige — praktisch für interne Tests, schützt dann aber nicht mehr vor einem gefälschten Server. Vor Produktivbetrieb ein echtes, vertrauenswürdiges Zertifikat einrichten und diese Option deaktivieren.", "Zertifikatsprüfung überspringen") }}</span>
         </label>
-        <div class="field-hint">Akzeptiert jedes Server-Zertifikat, auch selbstsignierte/nicht vertrauenswürdige — praktisch für interne Tests, schützt dann aber nicht mehr vor einem gefälschten Server. Vor Produktivbetrieb ein echtes, vertrauenswürdiges Zertifikat einrichten und diese Option deaktivieren.</div>
       </div>
-      <div class="field"><label>Bind-Konto (Service-Account)</label>
+      <div class="field"><label>Bind-Konto (Service-Account) {{ hi.hint_icon("Ein normales, unprivilegiertes Domänenkonto reicht — es wird nur zum Suchen von Benutzern verwendet, keine Admin-Rechte nötig. Ein neu gespeichertes Konto ersetzt das bisherige vollständig.", "Bind-Konto (Service-Account)") }}</label>
         <input type="text" name="ldap_bind_dn" value="{{ ldap.bind_dn }}" placeholder="z.B. ldap@ad.firma.local">
-        <div class="field-hint">Ein normales, unprivilegiertes Domänenkonto reicht — es wird nur zum Suchen von Benutzern verwendet, keine Admin-Rechte nötig. Ein neu gespeichertes Konto ersetzt das bisherige vollständig.</div>
       </div>
       <div class="field"><label>Bind-Passwort</label>
         <input type="password" name="ldap_bind_password" placeholder="{{ '(unverändert lassen)' if ldap.bind_password_enc else '' }}">
@@ -57,18 +54,16 @@
       <div class="field"><label>Base-DN</label>
         <input type="text" name="ldap_base_dn" value="{{ ldap.base_dn }}" placeholder="Leer = automatisch ermitteln">
       </div>
-      <div class="field"><label>Attribut für Benutzername</label>
+      <div class="field"><label>Attribut für Benutzername {{ hi.hint_icon("Für Active Directory: sAMAccountName. Für generisches LDAP (z.B. OpenLDAP): meist uid. Anmeldung per userPrincipalName (E-Mail/UPN) funktioniert unabhängig davon immer zusätzlich.", "Attribut für Benutzername") }}</label>
         <input type="text" name="ldap_user_filter_attr" value="{{ ldap.filter_attr }}" placeholder="sAMAccountName">
-        <div class="field-hint">Für Active Directory: sAMAccountName. Für generisches LDAP (z.B. OpenLDAP): meist uid. Anmeldung per userPrincipalName (E-Mail/UPN) funktioniert unabhängig davon immer zusätzlich.</div>
       </div>
-      <div class="field"><label>Standardgruppe für neue AD-Benutzer</label>
+      <div class="field"><label>Standardgruppe für neue AD-Benutzer {{ hi.hint_icon("Wird nur zugewiesen, wenn unten keine AD-Gruppenzuordnung greift — siehe Karte „AD-Gruppenzuordnungen“.", "Standardgruppe für neue AD-Benutzer") }}</label>
         <select name="ldap_default_group">
           <option value="">Systemstandard ({{ ldap_groups|selectattr('is_default')|map(attribute='name')|first or 'Benutzer' }})</option>
           {% for g in ldap_groups %}
           <option value="{{ g['id'] }}" {% if ldap.default_group == g['id']|string %}selected{% endif %}>{{ g['name'] }}</option>
           {% endfor %}
         </select>
-        <div class="field-hint">Wird nur zugewiesen, wenn unten keine AD-Gruppenzuordnung greift — siehe Karte „AD-Gruppenzuordnungen“.</div>
       </div>
       <div class="field"><label>Erforderliche AD-Gruppe für Login (optional)</label>
         <div class="flex gap-2">
@@ -108,12 +103,7 @@
   <div class="card card-pad">
     <div class="section-head" style="margin-bottom:16px;">
       <div>
-        <h2 style="font-size:16px;">AD-Gruppenzuordnungen</h2>
-        <div class="hint">
-          Ist ein AD-Benutzer (rekursiv, auch über verschachtelte Gruppen) Mitglied einer hier zugeordneten
-          AD-Gruppe, erhält er beim Login zusätzlich die zugeordnete App-Rechtegruppe — additiv, mehrere
-          Zuordnungen können gleichzeitig greifen. Wird keine Zuordnung getroffen, gilt die Standardgruppe oben.
-        </div>
+        <h2 style="font-size:16px;">AD-Gruppenzuordnungen {{ hi.hint_icon("Ist ein AD-Benutzer (rekursiv, auch über verschachtelte Gruppen) Mitglied einer hier zugeordneten AD-Gruppe, erhält er beim Login zusätzlich die zugeordnete App-Rechtegruppe — additiv, mehrere Zuordnungen können gleichzeitig greifen. Wird keine Zuordnung getroffen, gilt die Standardgruppe oben.", "AD-Gruppenzuordnungen") }}</h2>
       </div>
       {% if can_edit %}
       <button type="button" class="btn btn-primary" data-open-modal="addLdapMappingModal">
@@ -163,13 +153,7 @@
   <div class="card card-pad">
     <div class="section-head" style="margin-bottom:16px;">
       <div>
-        <h2 style="font-size:16px;">Fileshare-Gruppen</h2>
-        <div class="hint">
-          Ist ein AD-Benutzer (rekursiv) Mitglied einer hier zugeordneten AD-Gruppe, wird die zugehörige
-          Freigabe beim Login für ihn gemountet — sofern er zusätzlich das TESM-Recht „Dateifreigaben lesen“
-          hat (siehe Gruppen → Rechte, Bereich „Dateifreigaben“). Fehlt das Recht, wird nicht gemountet und
-          der Menüpunkt „Dateifreigaben“ erscheint nicht, unabhängig von der AD-Gruppenmitgliedschaft.
-        </div>
+        <h2 style="font-size:16px;">Fileshare-Gruppenzuordnung {{ hi.hint_icon("Ist ein AD-Benutzer (rekursiv) Mitglied einer hier zugeordneten AD-Gruppe, wird die zugehörige Freigabe beim Login für ihn gemountet — sofern er zusätzlich das TESM-Recht „Dateifreigaben lesen“ hat (siehe Gruppen → Rechte, Bereich „Dateifreigaben“). Fehlt das Recht, wird nicht gemountet und der Menüpunkt „Dateifreigaben“ erscheint nicht, unabhängig von der AD-Gruppenmitgliedschaft.", "Fileshare-Gruppenzuordnung") }}</h2>
       </div>
       {% if can_edit %}
       <button type="button" class="btn btn-primary" data-open-modal="addFileshareMappingModal">
@@ -278,13 +262,11 @@
           <input type="hidden" name="fs_ad_group_name" id="fsMappingAdGroupName">
           <div class="field-hint" id="fsMappingLoadStatus">Fragt live per Bind-Konto alle Gruppen aus dem Verzeichnis ab.</div>
         </div>
-        <div class="field"><label>Bezeichnung</label>
+        <div class="field"><label>Bezeichnung {{ hi.hint_icon("Anzeigename in der Freigaben-Auswahl — auch Ordnername unter dem Mount-Punkt.", "Bezeichnung") }}</label>
           <input type="text" name="fs_share_label" placeholder="z.B. Vertrieb" required>
-          <div class="field-hint">Anzeigename in der Freigaben-Auswahl — auch Ordnername unter dem Mount-Punkt.</div>
         </div>
-        <div class="field"><label>Freigabe-Pfad (UNC)</label>
+        <div class="field"><label>Freigabe-Pfad (UNC) {{ hi.hint_icon("Beide Schreibweisen funktionieren — \\\\server\\freigabe wird automatisch in das von Linux benötigte //server/freigabe umgewandelt.", "Freigabe-Pfad (UNC)") }}</label>
           <input type="text" name="fs_share_unc" placeholder="//fileserver/freigabe" required>
-          <div class="field-hint">Beide Schreibweisen funktionieren — <code>\\server\freigabe</code> wird automatisch in das von Linux benötigte <code>//server/freigabe</code> umgewandelt.</div>
         </div>
       </div>
       <div class="modal-footer">
@@ -349,13 +331,11 @@
           <input type="hidden" name="fs_ad_group_name" id="editFsMappingAdGroupName">
           <div class="field-hint" id="editFsMappingLoadStatus">Fragt live per Bind-Konto alle Gruppen aus dem Verzeichnis ab.</div>
         </div>
-        <div class="field"><label>Bezeichnung</label>
+        <div class="field"><label>Bezeichnung {{ hi.hint_icon("Anzeigename in der Freigaben-Auswahl — auch Ordnername unter dem Mount-Punkt.", "Bezeichnung") }}</label>
           <input type="text" name="fs_share_label" id="editFsMappingLabel" placeholder="z.B. Vertrieb" required>
-          <div class="field-hint">Anzeigename in der Freigaben-Auswahl — auch Ordnername unter dem Mount-Punkt.</div>
         </div>
-        <div class="field"><label>Freigabe-Pfad (UNC)</label>
+        <div class="field"><label>Freigabe-Pfad (UNC) {{ hi.hint_icon("Beide Schreibweisen funktionieren — \\\\server\\freigabe wird automatisch in das von Linux benötigte //server/freigabe umgewandelt.", "Freigabe-Pfad (UNC)") }}</label>
           <input type="text" name="fs_share_unc" id="editFsMappingUnc" placeholder="//fileserver/freigabe" required>
-          <div class="field-hint">Beide Schreibweisen funktionieren — <code>\\server\freigabe</code> wird automatisch in das von Linux benötigte <code>//server/freigabe</code> umgewandelt.</div>
         </div>
       </div>
       <div class="modal-footer">

srv/tesm/templates/settings_nginx.html

@@ -5,6 +5,7 @@
 {% block page_sub %}<div class="topbar-sub">Reverse-Proxy: Domain, Ports, SSL/HSTS und Zertifikat</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 <div class="settings-grid settings-grid--wide">
 
   <div class="card card-pad">
@@ -38,9 +39,8 @@
     <form method="post"
           data-confirm="nginx-Konfiguration wirklich ändern? Falls die Verbindung danach abbricht, wird die vorherige Konfiguration automatisch nach {{ nginx_revert_seconds }} Sekunden wiederhergestellt.">
       <div class="field">
-        <label for="server_name">Domain (server_name)</label>
+        <label for="server_name">Domain (server_name) {{ hi.hint_icon("\"_\" ist nginx' Catch-all (Standard für interne Instanzen ohne eigene Domain) — für Let's Encrypt muss hier die tatsächliche, öffentlich auflösbare Domain stehen.", "Domain (server_name)") }}</label>
         <input type="text" name="server_name" id="server_name" value="{{ server_name }}" placeholder="_ (kein bestimmter Hostname) oder z.B. tesm.example.com">
-        <div class="field-hint">"_" ist nginx' Catch-all (Standard für interne Instanzen ohne eigene Domain) — für Let's Encrypt muss hier die tatsächliche, öffentlich auflösbare Domain stehen.</div>
       </div>
       <div class="flex gap-2">
         <div class="field field--half">
@@ -48,14 +48,10 @@
           <input type="number" name="http_port" id="http_port" min="1" max="65535" value="{{ http_port }}" required>
         </div>
         <div class="field field--half">
-          <label for="https_port">HTTPS-Port</label>
+          <label for="https_port">HTTPS-Port {{ hi.hint_icon("Let's Encrypt validiert IMMER über Port 80 (protokollbedingt, unabhängig vom hier eingestellten HTTP-Port) — weicht der HTTP-Port von 80 ab, wird dafür automatisch zusätzlich ein minimaler Port-80-Block mitgeschrieben.", "HTTP-Port / HTTPS-Port") }}</label>
           <input type="number" name="https_port" id="https_port" min="1" max="65535" value="{{ https_port }}" required>
         </div>
       </div>
-      <div class="field-hint" style="margin-top:-8px; margin-bottom:14px;">
-        Let's Encrypt validiert IMMER über Port 80 (protokollbedingt, unabhängig vom hier eingestellten HTTP-Port) —
-        weicht der HTTP-Port von 80 ab, wird dafür automatisch zusätzlich ein minimaler Port-80-Block mitgeschrieben.
-      </div>
       <div class="field">
         <label class="switch-check" style="display:inline-flex; align-items:center; gap:8px;">
           <input type="checkbox" name="ssl_enabled" id="ssl_enabled_check" {% if ssl_enabled %}checked{% endif %} {% if not cert_info %}disabled{% endif %}>
@@ -68,9 +64,8 @@
         <label class="switch-check" style="display:inline-flex; align-items:center; gap:8px;">
           <input type="checkbox" name="hsts_enabled" id="hsts_enabled_check" {% if hsts_enabled %}checked{% endif %} {% if not ssl_enabled %}disabled{% endif %}>
           <span class="track"></span>
-          <span>HSTS (Strict-Transport-Security)</span>
+          <span>HSTS (Strict-Transport-Security) {{ hi.hint_icon("Weist Browser an, diese Instanz künftig NUR noch über HTTPS aufzurufen — bleibt auch bei einem späteren Zurückschalten auf HTTP im Browser für 1 Jahr bestehen. Nur aktivieren, wenn das Zertifikat dauerhaft gepflegt wird.", "HSTS") }}</span>
         </label>
-        <div class="field-hint">Weist Browser an, diese Instanz künftig NUR noch über HTTPS aufzurufen — bleibt auch bei einem späteren Zurückschalten auf HTTP im Browser für 1 Jahr bestehen. Nur aktivieren, wenn das Zertifikat dauerhaft gepflegt wird.</div>
       </div>
       <button type="submit" name="apply_nginx" value="1" class="btn btn-primary btn-block">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 12l2 2 4-4"/><path d="M12 2l8 4v6c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/></svg>
@@ -165,9 +160,8 @@
         <input type="file" name="cert_file" id="cert_file" accept=".pem,.crt,.cer" required>
       </div>
       <div class="field">
-        <label for="key_file">Privater Schlüssel (PEM, unverschlüsselt)</label>
+        <label for="key_file">Privater Schlüssel (PEM, unverschlüsselt) {{ hi.hint_icon("Ein passwortgeschütztes Schlüssel wird abgelehnt — nginx könnte ihn beim Start ohnehin nicht ohne manuelle Passworteingabe laden.", "Privater Schlüssel") }}</label>
         <input type="file" name="key_file" id="key_file" accept=".pem,.key" required>
-        <div class="field-hint">Ein passwortgeschütztes Schlüssel wird abgelehnt — nginx könnte ihn beim Start ohnehin nicht ohne manuelle Passworteingabe laden.</div>
       </div>
       <button type="submit" name="upload_cert" value="1" class="btn btn-secondary btn-block">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg>

srv/tesm/templates/switches.html

@@ -10,6 +10,7 @@
 {% block page_sub %}<div class="topbar-sub">{{ switches|length }} Switche</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 
 <div class="section-head">
   <div>
@@ -102,9 +103,8 @@
           <input type="text" name="ip" value="{{ s['ip'] }}" required placeholder="z.B. 192.168.1.100">
           <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben.</div>
         </div>
-        <div class="field"><label>SSH-Port</label>
+        <div class="field"><label>SSH-Port {{ hi.hint_icon("Leer lassen, wenn der Switch den Standard-Port 22 verwendet.", "SSH-Port") }}</label>
           <input type="number" name="ssh_port" value="{{ s['ssh_port'] or '' }}" min="1" max="65535" placeholder="22 (Standard)">
-          <div class="field-hint">Leer lassen, wenn der Switch den Standard-Port 22 verwendet.</div>
         </div>
         <div class="field">
           <label>Zugangsdaten</label>
@@ -162,9 +162,8 @@
           <input type="text" name="ip" required placeholder="z.B. 192.168.1.100">
           <div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben.</div>
         </div>
-        <div class="field"><label>SSH-Port</label>
+        <div class="field"><label>SSH-Port {{ hi.hint_icon("Leer lassen, wenn der Switch den Standard-Port 22 verwendet.", "SSH-Port") }}</label>
           <input type="number" name="ssh_port" min="1" max="65535" placeholder="22 (Standard)">
-          <div class="field-hint">Leer lassen, wenn der Switch den Standard-Port 22 verwendet.</div>
         </div>
         <div class="field">
           <label>Zugangsdaten</label>

srv/tesm/templates/users.html

@@ -4,6 +4,7 @@
 {% block page_sub %}<div class="topbar-sub">{{ users|length }} Benutzer</div>{% endblock %}
 
 {% block content %}
+{% import "_hint_icon.html" as hi %}
 
 <div class="section-head">
   <div>
@@ -205,13 +206,12 @@
       </div>
       <div class="modal-body">
         <div class="field">
-          <label>Gruppe</label>
+          <label>Gruppe {{ hi.hint_icon("Ersetzt die bisherige Gruppen-/Rollenzuordnung dieses Benutzers.", "Gruppe") }}</label>
           <select name="group_id" id="group_select">
             <option value="">Keine Gruppe</option>
             {% for g in all_groups %}<option value="{{ g['id'] }}">{{ g['name'] }}</option>{% endfor %}
             {% if current_user.is_admin %}<option value="admin">Admin</option>{% endif %}
           </select>
-          <div class="field-hint">Ersetzt die bisherige Gruppen-/Rollenzuordnung dieses Benutzers.</div>
         </div>
       </div>
       <div class="modal-footer">