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>
2026-08-22 22:07:33 +02:00
parent 9b4cf8c2e1
commit 0f0fa99e53
17 changed files with 217 additions and 136 deletions
@@ -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 %}
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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') }}"
@@ -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>
@@ -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>
@@ -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">
@@ -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>
@@ -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">
@@ -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>
@@ -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>
@@ -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">