feat: responsives Frontend — Seitenleiste ab Desktop, Tabellen-Styling

Nav wird jetzt für alle Seiten aus einer einzigen Stelle
(layout.html-Block) gerendert: auf dem Handy ein per Checkbox-Hack
aufklappbares Menü (kein JavaScript), ab 960px Breite per CSS in eine
permanente, dunkle Seitenleiste im enconf-Look verwandelt — dieselbe
Markup-Struktur bedient beide Layouts, kein separates Desktop-Template.
<details>/<summary> wurde bewusst NICHT verwendet: aktuelle
Chromium-Versionen steuern dessen Auf-/Zuklapp-Zustand über eine
CSS-resistente interne Animation (auch mit !important nicht
überschreibbar), per Headless-Screenshot verifiziert.

Zusätzlich: Tabellen (vorher komplett ungestylt, betraf v. a. das
Register) haben jetzt echte Gestaltung inkl. horizontal scrollbarem
Wrapper für schmale Bildschirme, Listenkarten ohne Link-Wrapper
(Nutzer-/Abteilungsliste) bekommen dieselbe Kartenoptik wie
verlinkte Einträge, und destruktive Aktionen (Löschen/Deaktivieren)
sind jetzt visuell von primären Aktionen unterschieden.

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

internal/web/static/app.css

@@ -1,9 +1,10 @@
 /* Deklarix — eigenes, schlankes Stylesheet auf Basis der Design-Tokens
    aus dem enconf Enterprise Light Theme (design/enterprise.css): gleiche
-   Marke (Primärblau #1677ff, Inter, Radius-Skala), aber ohne dessen
-   Ant-Design-/Desktop-Sidebar-Layout, das für Deklarix nicht passt.
-   Mobile-first: Basis-Stile gelten fürs Telefon, @media (min-width)
-   erweitert für größere Bildschirme. */
+   Marke (Primärblau #1677ff, Inter, Radius-Skala). Mobile-first:
+   Basis-Stile gelten fürs Telefon (Nav als aufklappbares <details>-Menü
+   ohne JavaScript), @media (min-width: 960px) verwandelt dieselbe
+   Nav-Markup-Struktur per CSS in eine feste Seitenleiste (siehe
+   .topbar/.app-nav) — kein separates Desktop-Template nötig. */
 
 @import url('/static/inter.css');
 
@@ -14,6 +15,7 @@
   --radius-lg: 10px;
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
 
   --color-bg: #f8fafc;
   --color-text: #334155;
@@ -27,6 +29,12 @@
   --color-mittel-bg: #fffbeb;
   --color-niedrig: #166534;
   --color-niedrig-bg: #f0fdf4;
+
+  --sidebar-width: 220px;
+  --sidebar-bg: linear-gradient(180deg, #0b1426 0%, #101d33 50%, #0d1829 100%);
+  --sidebar-text: #b6c2d9;
+  --sidebar-text-hover: #ffffff;
+  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
 }
 
 * {
@@ -74,23 +82,109 @@ a {
   margin: 0 auto;
 }
 
-nav {
+/* ── Navigation ──────────────────────────────────────────────────────
+   Mobil: .topbar ist eine schmale, fixierte Kopfleiste mit einem
+   aufklappbaren <details>-Menü (siehe layout.html) — kein JavaScript,
+   das <details>-Element liefert Auf-/Zuklappen nativ. Ab Desktop-Breite
+   (siehe Media Query unten) wird dieselbe Markup-Struktur per CSS in
+   eine permanent sichtbare, dunkle Seitenleiste verwandelt. */
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  gap: 16px;
+  justify-content: space-between;
   padding: 12px 16px;
+  background: #fff;
+  border-bottom: 1px solid var(--color-border);
 }
 
-nav a {
-  color: var(--color-muted);
+.brand {
+  font-weight: 600;
+  color: var(--color-heading);
+  text-decoration: none;
+  letter-spacing: -0.01em;
+}
+
+/* Checkbox-Hack: eine unsichtbare Checkbox plus ein <label for=...>
+   als Klick-/Tap-Ziel steuern per CSS-Geschwister-Selektor, ob .app-nav
+   sichtbar ist — funktioniert ohne JavaScript und ohne die Falle von
+   <details> (siehe Kommentar in layout.html). */
+.nav-toggle {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.nav-toggle-label {
+  cursor: pointer;
+  padding: 8px 14px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
   font-size: 0.875rem;
   font-weight: 500;
+  color: var(--color-text);
+}
+
+.nav-toggle:focus-visible ~ .nav-toggle-label {
+  outline: 2px solid var(--branding-primary);
+  outline-offset: 1px;
+}
+
+.nav-toggle:checked ~ .nav-toggle-label {
+  border-color: var(--branding-primary);
+  color: var(--branding-primary);
+}
+
+.app-nav {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 16px;
+  z-index: 20;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 220px;
+  padding: 8px;
+  background: #fff;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+}
+
+.nav-toggle:checked ~ .app-nav {
+  display: flex;
+}
+
+.app-nav a {
+  padding: 10px 12px;
+  border-radius: var(--radius);
+  color: var(--color-text);
+  font-size: 0.9375rem;
+  font-weight: 500;
   text-decoration: none;
 }
 
-nav a:hover {
-  color: var(--color-text);
+.app-nav a:hover {
+  background: var(--color-bg);
+  color: var(--branding-primary);
+}
+
+.app-nav form {
+  margin: 4px 0 0;
+}
+
+.app-nav button {
+  width: 100%;
+  margin-top: 0;
+  background: transparent;
+  color: var(--color-hoch);
+  border: 1px solid var(--color-hoch-bg);
+  box-shadow: none;
 }
 
 /* Formulare: großzügige Touch-Ziele (min. 44px Höhe), volle Breite auf
@@ -275,7 +369,12 @@ nav button {
   gap: 8px;
 }
 
-.beitraege-liste li a {
+.beitraege-liste li a,
+/* Einträge ohne umschließenden Link (Zeilen mit Badge/Aktions-Buttons
+   statt Navigation, z. B. Nutzer-/Abteilungsliste) bekommen dieselbe
+   Karte direkt auf dem <li> — :has() unterscheidet beide Fälle, damit
+   ein verlinkter Eintrag nicht doppelt (li UND a) gerahmt wird. */
+.beitraege-liste > li:not(:has(> a)) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -288,6 +387,15 @@ nav button {
   text-decoration: none;
 }
 
+.beitraege-liste > li:not(:has(> a)) form {
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+.beitraege-liste > li:not(:has(> a)) button {
+  margin-top: 0;
+}
+
 .beteiligte {
   list-style: none;
   margin: 0 0 16px;
@@ -424,7 +532,45 @@ button.entfernen {
   display: block;
 }
 
-/* Ab hier mehr Platz (Tablet/Desktop) — der Container bekommt spürbaren
+/* Tabellen (z. B. Register-Export-Ansicht) — bewusst horizontal
+   scrollbar in einem eigenen Wrapper statt schrumpfender Spalten: bei
+   neun Spalten wie im Register würde Schrumpfen nur unlesbaren Text
+   erzeugen, siehe .table-scroll in register_liste.html. */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: #fff;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  font-size: 0.875rem;
+}
+
+th, td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--color-border);
+  white-space: nowrap;
+}
+
+th {
+  background: var(--color-bg);
+  color: var(--color-heading);
+  font-weight: 600;
+  font-size: 0.8125rem;
+}
+
+tbody tr:hover {
+  background: var(--color-bg);
+}
+
+.table-scroll {
+  overflow-x: auto;
+  box-shadow: var(--shadow);
+  border-radius: var(--radius-md);
+  margin-bottom: 16px;
+}
+
+/* Ab hier mehr Platz (Tablet) — der Container bekommt spürbaren
    Rand statt volle Breite, sonst bleibt alles identisch. */
 @media (min-width: 640px) {
   .page {
@@ -435,3 +581,74 @@ button.entfernen {
     font-size: 1.75rem;
   }
 }
+
+/* Ab Desktop-Breite: dieselbe .topbar/.app-nav-Markup wird zu einer
+   permanent sichtbaren, dunklen Seitenleiste — kein separates
+   Desktop-Template, nur CSS. Der `details`/`summary`-Aufklapp-
+   Mechanismus wird hier überschrieben (Inhalt immer sichtbar,
+   summary versteckt), das Handy-Verhalten bleibt darunter unverändert. */
+@media (min-width: 960px) {
+  .topbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: 8px;
+    padding: 20px 16px;
+    background: var(--sidebar-bg);
+    border-bottom: none;
+    border-right: 1px solid rgba(255, 255, 255, 0.08);
+    z-index: 10;
+  }
+
+  .brand {
+    color: #fff;
+    font-size: 1.125rem;
+    margin-bottom: 12px;
+  }
+
+  .nav-toggle-label {
+    display: none;
+  }
+
+  .app-nav {
+    display: flex;
+    position: static;
+    min-width: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    box-shadow: none;
+  }
+
+  .app-nav a {
+    color: var(--sidebar-text);
+  }
+
+  .app-nav a:hover {
+    background: var(--sidebar-hover-bg);
+    color: var(--sidebar-text-hover);
+  }
+
+  .app-nav button {
+    color: var(--sidebar-text);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .app-nav button:hover {
+    background: var(--sidebar-hover-bg);
+    color: var(--sidebar-text-hover);
+    filter: none;
+  }
+
+  .page {
+    margin-left: var(--sidebar-width);
+    max-width: 1100px;
+    padding: 32px 40px;
+    width: 100%;
+  }
+}