Responsives CSS ausgebaut: Handy (iPhone) und Tablet (iPad) sauber nutzbar

Bestehendes eigenes Design-System beibehalten (kein Bootstrap-Framework
eingebunden), stattdessen die vorhandenen Media Queries/Breakpoints
(Sidebar kollabiert bereits ab 900px) um die fehlenden Faelle ergaenzt:

- .table-wrap: overflow:hidden -> overflow-x:auto. Tabellen mit vielen
  Spalten (Geraete, Switche, Papierkorb, Benutzer, ...) haben auf
  schmalen Screens bisher entweder Spalten lautlos abgeschnitten oder
  die ganze Seite waagerecht aufgerissen -- jetzt scrollt NUR die
  Tabelle selbst (gleiches Prinzip wie Bootstraps .table-responsive).
  table.data-table bekommt zusaetzlich eine min-width als sinnvolle
  Scroll-Schwelle.
- .settings-grid: minmax(340px, 1fr) -> minmax(min(340px, 100%), 1fr) --
  ein nackter Pixel-Mindestwert erzwingt auf einem 375px-iPhone sonst
  waagerechten Overflow der ganzen Seite, sobald die Spalte breiter als
  der verfuegbare Platz ist. Neue Modifier-Klasse .settings-grid--wide
  (420px-Variante) ersetzt zwei betroffene inline
  style="grid-template-columns:minmax(420px,...)"-Overrides (LDAP-,
  NGINX-Seite), die denselben 100%-Fallback nicht hatten.
- .permission-group-col: eigenes overflow-x:auto zusaetzlich zum
  bestehenden flex-wrap der Elternzeile -- falls eine einzelne
  Rechte-Spalte (z.B. Geraete mit R/W/E/D) auch nach dem Umbruch auf
  eine eigene Zeile noch zu breit ist.
- Ab 900px (bestehender Sidebar-Breakpoint) zusaetzlich: .flex (generische
  Button-/Toolbar-Zeilen), .section-head, .term-toolbar/.log-toolbar und
  .detail-row brechen um statt seitlich ueberzulaufen; .modal-footer
  ebenso; .search-input in Tabellen-Toolbars schrumpft flexibel.
- Ab 640px: nebeneinander angeordnete Formularfelder (z.B. HTTP-/HTTPS-
  Port bei NGINX) stapeln sich auf volle Breite statt zwei sehr schmale
  Eingaben zu erzwingen; Modal-Innenabstand etwas schmaler.
- Ab 560px: Buttons in Kopfzeilen (section-head) nehmen die volle Breite
  ein statt als schmaler Block rechts zu kleben.

Live auf Testsystem-Update-Restart verifiziert: alle Kernseiten
(Dashboard, Clients, Switche, Gruppen, LDAP, NGINX, Live-Log, Wartung)
laden weiterhin fehlerfrei (200) nach dem CSS-/Template-Austausch.

WICHTIGER HINWEIS: In dieser Umgebung steht kein Browser-Screenshot-
Werkzeug zur Verfuegung, die Aenderungen wurden also nicht pixelgenau auf
echten iPhone-16-Pro-/iPad-Bildschirmgroessen gegengeprueft, sondern rein
ueber CSS-Analyse und Seiten-Ladetests. Ein Blick auf einem echten Geraet
(oder per Browser-Devtools-Emulation) wird empfohlen.

VERSION 1.0.8 -> 1.0.9.

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

srv/tesm/VERSION

@@ -1 +1 @@
-1.0.8
+1.0.9

srv/tesm/static/css/style.css

@@ -197,13 +197,23 @@ button { font-family: inherit; }
 .nav-group.expanded .nav-group-children { display: flex; }
 .nav-group-children .nav-item { font-size: 13px; padding: 8px 12px; }
 
-/* Kacheln nebeneinander (z.B. Im-/Export, Konto-Seite) */
+/* Kacheln nebeneinander (z.B. Im-/Export, Konto-Seite). minmax(min(...,
+   100%), 1fr) statt eines nackten Pixelwerts -- eine Spalten-Mindestbreite
+   von z.B. 340px würde auf einem 375px-iPhone (abzüglich .content-Padding)
+   sonst waagerechten Overflow der ganzen Seite erzwingen, weil "auto-fit"
+   erst ab einer Breite größer als der Mindestwert umbricht. */
 .settings-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
   gap: 24px;
   align-items: start;
 }
+/* Modifier für Seiten, die etwas breitere Karten brauchen (z.B. NGINX,
+   LDAP) -- ersetzt frühere inline style="grid-template-columns:..."
+   Overrides, die denselben 100%-Fallback nicht hatten. */
+.settings-grid--wide {
+  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
+}
 
 /* Navbar-Reihenfolge (Settings) */
 .nav-order-list {
@@ -683,8 +693,16 @@ button { font-family: inherit; }
   background: var(--bg-card);
   border: 1px solid var(--border-soft);
   border-radius: var(--radius);
-  overflow: hidden;
+  /* overflow-x:auto statt hidden -- Tabellen mit vielen Spalten (Geräte,
+     Switche, Papierkorb, ...) würden auf Handy/Tablet sonst entweder die
+     ganze Seite waagerecht aufreißen oder (mit overflow:hidden) Spalten
+     einfach lautlos abschneiden. Scrollt jetzt NUR die Tabelle selbst,
+     der Rest der Seite bleibt an Ort und Stelle -- dasselbe Muster wie
+     Bootstraps .table-responsive. */
+  overflow-x: auto;
+  overflow-y: hidden;
 }
+.table-wrap table.data-table { min-width: 560px; }
 
 .table-toolbar {
   display: flex;
@@ -1156,8 +1174,14 @@ select {
      Logs mit nur R). Feste/zu schmale Breiten haben die D-Spalte bei
      Geräte zuvor lautlos in den Overflow geschoben. */
   flex: 0 0 auto;
+  max-width: 100%;
   padding-right: 28px;
   border-right: 1px solid var(--border-soft);
+  /* Fällt eine einzelne Spalte (z.B. Geräte mit vielen Rechten-Spalten)
+     trotz .permission-groups-row's flex-wrap auf einem schmalen Screen
+     für sich genommen noch zu breit aus, scrollt nur diese eine Spalte
+     waagerecht statt die Seite aufzureißen. */
+  overflow-x: auto;
 }
 .permission-group-col:last-child { border-right: none; padding-right: 0; }
 .permission-group-header-cell { padding-left: 0 !important; }
@@ -1286,14 +1310,45 @@ select {
   .content { padding: 18px 16px 40px; }
   .topbar { padding: 10px 16px; }
   .topbar-logo { opacity: 0.5; }
+
+  /* Ab hier iPad-Breite (900px ist bereits der bestehende Sidebar-
+     Umschaltpunkt) und schmaler: generische Button-/Toolbar-Zeilen
+     (.flex) sollen umbrechen statt seitlich überzulaufen -- betrifft vor
+     allem Kopfzeilen mit mehreren Aktions-Buttons (z.B. NGINX-, Logs-,
+     Verlauf-Seite) und nebeneinander angeordnete Formularfelder. */
+  .flex { flex-wrap: wrap; }
+  .section-head { flex-wrap: wrap; }
+  .term-toolbar, .log-toolbar { flex-wrap: wrap; row-gap: 8px; }
+  .detail-row { flex-wrap: wrap; }
+  .detail-row .v { text-align: left; }
+
+  /* Modal-Fußzeilen (Speichern/Abbrechen) und Tabellen-Kopfzeilen
+     (Suche + Aktion) sollen bei wenig Platz ebenfalls umbrechen statt
+     Buttons/Suchfeld ineinanderzuschieben. */
+  .modal-footer { flex-wrap: wrap; }
+  .table-toolbar .search-input { min-width: 0; flex: 1 1 160px; }
 }
 
 @media (max-width: 640px) {
   .topbar-logo { display: none; }
+
+  /* Formulare mit zwei nebeneinander angeordneten Feldern (class="flex
+     gap-2" um zwei .field-Divs, z.B. HTTP-/HTTPS-Port bei NGINX) stapeln
+     auf Handy-Breite volle Breite pro Feld statt zwei sehr schmale
+     Eingaben nebeneinander zu erzwingen. */
+  form .flex > .field { flex-basis: 100%; }
+
+  .modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }
 }
 
 @media (max-width: 560px) {
   .device-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
   .topbar-title { font-size: 16px; }
   .stat-row { grid-template-columns: repeat(2, 1fr); }
+
+  /* Button-Leisten in Kopfzeilen (z.B. section-head/card-Kopf mit
+     "RAW anzeigen" o.ä.) nehmen auf sehr schmalen Screens die volle
+     Breite ein statt als schmaler Block rechts zu kleben. */
+  .section-head > .btn,
+  .section-head > .btn-sm { flex: 1 1 100%; }
 }

srv/tesm/templates/settings_ldap.html

@@ -5,7 +5,7 @@
 {% block page_sub %}<div class="topbar-sub">Anmeldung mit dem Domänen-Passwort, zusätzlich zu lokalen Konten</div>{% endblock %}
 
 {% block content %}
-<div class="settings-grid" style="grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));">
+<div class="settings-grid settings-grid--wide">
 
   <div class="card card-pad">
     <div class="section-head" style="margin-bottom:16px;">

srv/tesm/templates/settings_nginx.html

@@ -5,7 +5,7 @@
 {% block page_sub %}<div class="topbar-sub">Reverse-Proxy: Domain, Ports, SSL/HSTS und Zertifikat</div>{% endblock %}
 
 {% block content %}
-<div class="settings-grid" style="grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));">
+<div class="settings-grid settings-grid--wide">
 
   <div class="card card-pad">
     <div class="section-head" style="margin-bottom:16px;">