feat: enconf-Layout-Patterns übertragen — responsive Card-Tabellen, PageHeader, StatCards

Über die Architect-RAG-Suche (ac_search_code_global) drei UX-Muster
aus dem enconf-Schwesterprojekt (React/Ant Design) identifiziert und
als reines CSS/HTML nachgebaut, da Deklarix bewusst kein SPA ist:

- .table-responsive: Tabellen werden unter 640px zu einer Card-Liste
  statt horizontal zu scrollen (enconfs ProTable-Verhalten), via
  data-label-Attribut je <td>. Angewendet auf beide
  Werkzeugkatalog-Tabellen.
- .page-header: Titel+Unterzeile links, primäre Aktion rechts, statt
  eines nackten <h1> mit Link irgendwo unten.
- .stat-cards: Kennzahl-Kacheln mit farbigem Akzentrand (nur farbig
  bei Wert > 0) statt einfacher Text-Links, auf der Startseite.

internal/web/templates/betreiber_werkzeuge.html

@@ -5,7 +5,13 @@
 {{template "nav" .Nav}}
 <div class="page">
 <p><a href="/betreiber">&larr; Plattform</a></p>
-<h1>Werkzeugkatalog</h1>
+<div class="page-header">
+  <div>
+    <h1>Werkzeugkatalog</h1>
+    <p class="hinweis">Zentral gepflegt, für alle Mandanten sichtbar.</p>
+  </div>
+  <a class="page-header-action" href="/betreiber/werkzeuge/neu">Werkzeug anlegen</a>
+</div>
 <form method="get">
   <div class="filter-bar">
     <input type="search" name="q" value="{{.Filter.Suche}}" placeholder="Suche (Name, Anbieter, Land)">
@@ -23,7 +29,7 @@
   {{if not .Werkzeuge}}
   <p class="hinweis">{{if .Filter.Aktiv}}Keine Treffer für diese Filter.{{else}}Noch keine zentralen Katalogeinträge.{{end}}</p>
   {{else}}
-  <div class="table-scroll">
+  <div class="table-responsive">
   <table>
     <thead>
       <tr>
@@ -35,16 +41,16 @@
     <tbody>
       {{range .Werkzeuge}}
       <tr>
-        <td><a href="/betreiber/werkzeuge/{{.ID}}">{{.Name}}</a></td>
-        <td>{{.Anbieter}}</td>
-        <td>{{.Verarbeitungslaender}}</td>
-        <td>{{if .DPFZertifiziert}}ja{{else}}nein{{end}}</td>
-        <td>{{if .AVVVerfuegbar}}ja{{else}}nein{{end}}</td>
-        <td>{{if .TrainingStandard}}ja{{else}}nein{{end}}</td>
-        <td>{{.Aufbewahrung}}</td>
-        <td>{{.Zertifizierungen}}</td>
-        <td>{{.GeeigneteZwecke}}</td>
-        <td>{{.LetztePruefung}} <span class="status {{.PruefStatusCSS}}">{{.PruefStatusLabel}}</span></td>
+        <td data-label="Name"><a href="/betreiber/werkzeuge/{{.ID}}">{{.Name}}</a></td>
+        <td data-label="Anbieter">{{.Anbieter}}</td>
+        <td data-label="Verarbeitungsländer">{{.Verarbeitungslaender}}</td>
+        <td data-label="DPF">{{if .DPFZertifiziert}}ja{{else}}nein{{end}}</td>
+        <td data-label="AVV">{{if .AVVVerfuegbar}}ja{{else}}nein{{end}}</td>
+        <td data-label="Training aus">{{if .TrainingStandard}}ja{{else}}nein{{end}}</td>
+        <td data-label="Aufbewahrung">{{.Aufbewahrung}}</td>
+        <td data-label="Zertifizierungen">{{.Zertifizierungen}}</td>
+        <td data-label="Geeignete Zwecke">{{.GeeigneteZwecke}}</td>
+        <td data-label="Zuletzt geprüft">{{.LetztePruefung}} <span class="status {{.PruefStatusCSS}}">{{.PruefStatusLabel}}</span></td>
       </tr>
       {{end}}
     </tbody>
@@ -59,7 +65,6 @@
   </div>
   {{end}}
 </form>
-<p><a href="/betreiber/werkzeuge/neu">Werkzeug anlegen</a></p>
 </div>
 </body>
 </html>

internal/web/templates/index.html

@@ -6,15 +6,25 @@
 <div class="page">
 <h1>Willkommen bei Deklarix</h1>
 {{if .Nav.IsBetreiber}}
-<ul class="admin-kacheln">
-  <li><a href="/betreiber">Zur Plattform</a></li>
+<ul class="stat-cards">
+  <li><a class="stat-card stat-card-action" href="/betreiber"><span class="stat-card-label">Zur Plattform &rarr;</span></a></li>
 </ul>
 {{else}}
-<ul class="admin-kacheln">
-  <li><a href="/antraege/neu">Antrag stellen</a></li>
-  <li><a href="/antraege">Meine offenen Anträge <span class="status">{{.OffeneAntraege}}</span></a></li>
+<ul class="stat-cards">
+  <li><a class="stat-card stat-card-action" href="/antraege/neu"><span class="stat-card-label">Antrag stellen &rarr;</span></a></li>
+  <li>
+    <a class="stat-card{{if .OffeneAntraege}} stat-card-mittel{{end}}" href="/antraege">
+      <span class="stat-card-value">{{.OffeneAntraege}}</span>
+      <span class="stat-card-label">Meine offenen Anträge</span>
+    </a>
+  </li>
   {{if .ZeigePosteingang}}
-  <li><a href="/faelle">Posteingang <span class="status">{{.OffenerPosteingang}}</span></a></li>
+  <li>
+    <a class="stat-card{{if .OffenerPosteingang}} stat-card-hoch{{end}}" href="/faelle">
+      <span class="stat-card-value">{{.OffenerPosteingang}}</span>
+      <span class="stat-card-label">Posteingang</span>
+    </a>
+  </li>
   {{end}}
 </ul>
 {{end}}

internal/web/templates/mandant_werkzeuge.html

@@ -6,12 +6,16 @@
 <div class="page">
 <h1>Werkzeugkatalog</h1>
 
-<h2>Zentraler Katalog</h2>
-<p class="hinweis">
-  Wird von der Plattform gepflegt. Ein gesperrtes Werkzeug bleibt im
-  zentralen Katalog unverändert — es wird nur für diesen Mandanten aus
-  der Werkzeugsuche ausgeblendet.
-</p>
+<div class="page-header">
+  <div>
+    <h2>Zentraler Katalog</h2>
+    <p class="hinweis">
+      Wird von der Plattform gepflegt. Ein gesperrtes Werkzeug bleibt im
+      zentralen Katalog unverändert — es wird nur für diesen Mandanten
+      aus der Werkzeugsuche ausgeblendet.
+    </p>
+  </div>
+</div>
 <form method="get" class="filter-bar">
   <input type="search" name="q" value="{{.Filter.Suche}}" placeholder="Suche (Name, Anbieter, Land)">
   <select name="zweck">
@@ -27,7 +31,7 @@
 {{if not .Werkzeuge}}
 <p class="hinweis">{{if .Filter.Aktiv}}Keine Treffer für diese Filter.{{else}}Der zentrale Katalog ist noch leer.{{end}}</p>
 {{else}}
-<div class="table-scroll">
+<div class="table-responsive">
 <table>
   <thead>
     <tr>
@@ -38,15 +42,15 @@
   <tbody>
     {{range .Werkzeuge}}
     <tr>
-      <td>{{.Name}}</td>
-      <td>{{.Anbieter}}</td>
-      <td>{{.Verarbeitungslaender}}</td>
-      <td>{{if .AVVVerfuegbar}}ja{{else}}nein{{end}}</td>
-      <td>{{if .TrainingStandard}}ja{{else}}nein{{end}}</td>
-      <td>{{.Aufbewahrung}}</td>
-      <td>{{.GeeigneteZwecke}}</td>
-      <td>{{.LetztePruefung}} <span class="status {{.PruefStatusCSS}}">{{.PruefStatusLabel}}</span></td>
-      <td>
+      <td data-label="Name">{{.Name}}</td>
+      <td data-label="Anbieter">{{.Anbieter}}</td>
+      <td data-label="Verarbeitungsländer">{{.Verarbeitungslaender}}</td>
+      <td data-label="AVV">{{if .AVVVerfuegbar}}ja{{else}}nein{{end}}</td>
+      <td data-label="Training aus">{{if .TrainingStandard}}ja{{else}}nein{{end}}</td>
+      <td data-label="Aufbewahrung">{{.Aufbewahrung}}</td>
+      <td data-label="Geeignete Zwecke">{{.GeeigneteZwecke}}</td>
+      <td data-label="Zuletzt geprüft">{{.LetztePruefung}} <span class="status {{.PruefStatusCSS}}">{{.PruefStatusLabel}}</span></td>
+      <td data-label="Status">
         {{if .Gesperrt}}
         <span class="status">gesperrt</span>
         <form method="post" action="/verwaltung/werkzeuge/{{.ID}}/entsperren" style="display:inline">
@@ -87,15 +91,20 @@
 </div>
 {{end}}
 
-<h2>Eigene Werkzeuge</h2>
-<p class="hinweis">
-  Zusätzliche Katalogeinträge nur für diesen Mandanten — sichtbar nur
-  hier, nicht im zentralen Katalog der Plattform.
-</p>
+<div class="page-header">
+  <div>
+    <h2>Eigene Werkzeuge</h2>
+    <p class="hinweis">
+      Zusätzliche Katalogeinträge nur für diesen Mandanten — sichtbar nur
+      hier, nicht im zentralen Katalog der Plattform.
+    </p>
+  </div>
+  <a class="page-header-action" href="/verwaltung/werkzeuge/neu">Eigenes Werkzeug anlegen</a>
+</div>
 {{if not .EigeneWerkzeuge}}
 <p class="hinweis">Noch keine eigenen Werkzeuge.</p>
 {{else}}
-<div class="table-scroll">
+<div class="table-responsive">
 <table>
   <thead>
     <tr><th>Name</th><th>Anbieter</th><th>Verarbeitungsländer</th><th>Zuletzt geprüft</th></tr>
@@ -103,17 +112,16 @@
   <tbody>
     {{range .EigeneWerkzeuge}}
     <tr>
-      <td><a href="/verwaltung/werkzeuge/{{.ID}}">{{.Name}}</a></td>
-      <td>{{.Anbieter}}</td>
-      <td>{{.Verarbeitungslaender}}</td>
-      <td>{{.LetztePruefung}}</td>
+      <td data-label="Name"><a href="/verwaltung/werkzeuge/{{.ID}}">{{.Name}}</a></td>
+      <td data-label="Anbieter">{{.Anbieter}}</td>
+      <td data-label="Verarbeitungsländer">{{.Verarbeitungslaender}}</td>
+      <td data-label="Zuletzt geprüft">{{.LetztePruefung}}</td>
     </tr>
     {{end}}
   </tbody>
 </table>
 </div>
 {{end}}
-<p><a href="/verwaltung/werkzeuge/neu">Eigenes Werkzeug anlegen</a></p>
 </div>
 </body>
 </html>