fix: fieldset/legend durch echte Überschriften ersetzt, globales CSS vervollständigt

<legend> positioniert sich per Spezifikation immer auf der oberen
Rahmenlinie seines <fieldset> - das lässt sich nicht per CSS aufheben,
nur kaschieren. Die vorherige "Nachbesserung" (mehr Padding/Breite auf
der legend) war ein Pflaster, kein Fix - kam prompt wieder zum
Vorschein, sobald eine neue .form-section-Seite entstand. .form-section
ist jetzt ein <div>, die Überschrift ein normales <h3
class="form-section-title"> mit voller CSS-Kontrolle. Betrifft alle
neun Vorlagen mit diesem Muster.

Zusätzlich alle restlichen unstyled Formulare (Login, Passwort-Reset,
Einladung annehmen, Nutzer anlegen, CSV-Import, Abteilung anlegen,
Firma umbenennen, Fall-Entscheiden) auf dasselbe form-card/form-section/
form-grid-Muster gehoben, für durchgängig konsistentes globales CSS
statt gemischter roher und gestylter Formulare. antrag_neu.html (der
Fragebogen) bleibt bewusst unverändert - dessen fieldset/legend haben
keinen Rahmen-Konflikt und sind an bereits getestete :has()-Adaptivlogik
gekoppelt.

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

CLAUDE.md

@@ -1051,6 +1051,44 @@ wie die Formular-Abschnitte angehoben (600/1rem statt 500/0.9375rem) —
 für eine einheitliche Überschriften-Hierarchie statt Zufallsgrößen je
 nach UA-Stylesheet.
 
+**Endgültige Korrektur — `fieldset`/`legend` durch echte Überschriften
+ersetzt (2026-09-01):** die obige "Nachbesserung" war ein Pflaster auf
+dem eigentlichen Problem, nicht die Ursache behoben — sie kam prompt
+wieder zum Vorschein, sobald eine neue `.form-section`-Seite entstand
+(Betreiber-Firmenanlage), und der Nutzer wies zu Recht darauf hin, dass
+das "immer wieder derselbe Fehler" sei. Der eigentliche Grund:
+`<legend>` positioniert sich **laut Spezifikation immer** auf der
+oberen Rahmenlinie seines `<fieldset>` — das ist seine definierte
+Funktion (die Box zu betiteln) und lässt sich durch kein Padding/keine
+Breite aufheben, nur kaschieren. `.form-section` ist deshalb jetzt ein
+`<div>` (kein `<fieldset>` mehr), die Überschrift ein normales `<h3
+class="form-section-title">` — verhält sich wie jede andere Überschrift,
+volle CSS-Kontrolle, keine Sonderregeln. Betrifft alle neun Vorlagen,
+die das Muster nutzen (`register.html`, `betreiber_account_neu.html`,
+`firmendaten.html`, `login.html`, `loeschfristen_liste.html`,
+`genehmiger_rollen_liste.html`, `freigabe_regeln_liste.html`,
+`email_vorlage_bearbeiten.html`, `betreiber_werkzeug_form.html`).
+`antrag_neu.html` (der Fragebogen) bleibt bewusst unverändert — dessen
+`fieldset`/`legend` sind einfache, nicht-kartierte Elemente ohne
+Rahmen-Konflikt, an eine bereits getestete `:has()`-Adaptivlogik
+(Folgefragen ein-/ausblenden) gekoppelt; ein Umbau hätte unnötiges
+Risiko für rein kosmetischen Gewinn bedeutet, da dort gar kein
+sichtbarer Rahmen existiert, mit dem die Legend kollidieren könnte.
+
+**Restliche unstyled Formulare auf dasselbe Muster gehoben
+(2026-09-01):** `passwort_vergessen.html`, `passwort_zuruecksetzen.html`,
+`einladung.html`, `nutzer_neu.html` (Rollenauswahl jetzt `.chip-group`
+statt nacktem `fieldset`), `nutzer_import.html`, `abteilung_liste.html`
+(Anlegen-Formular), `betreiber_account_detail.html` (Umbenennen-
+Formular), sowie der komplette "Entscheiden"-Bereich in
+`fall_detail.html` (Entscheidung jetzt `.chip-group` statt nacktem
+`fieldset`) — alle jetzt `.form-card`/`.form-section`/`.form-grid`
+statt roher `<label>`+`<input>`-Ketten. Explizit **nicht** angefasst:
+`antrag_neu.html` (siehe oben), sowie reine Listen-Aktionsformulare
+(Filter, Löschen-/Aktivieren-Buttons in `.beitraege-liste`-Zeilen) —
+die haben ihr eigenes, bereits passendes CSS-Muster und keinen
+Formular-Charakter im hier gemeinten Sinn.
+
 **enconf-Patterns übertragen (2026-08-31):** enconf (Schwesterprojekt)
 ist React + Ant Design (`ProTable`/`StatCard`/`PageHeader`-Komponenten)
 — nicht 1:1 übernehmbar, da Deklarix bewusst kein SPA ist, aber die

internal/web/static/app.css

@@ -582,6 +582,16 @@ button.entfernen {
   margin-bottom: 0;
 }
 
+/* form-section ist bewusst ein <div>, kein <fieldset> — <legend>
+   positioniert sich per Spezifikation IMMER auf der oberen Rahmenlinie
+   des <fieldset> (das ist seine ganze Funktion: die Box zu betiteln),
+   das lässt sich nicht per CSS aufheben, nur mit fragilen Hacks
+   kaschieren (padding/Breite anpassen ändert nichts an der
+   Border-Überlappung selbst — genau das führte zu einer bereits einmal
+   "reparierten" Überschrift, die nach der nächsten neuen Seite wieder
+   zu klein/zu randnah aussah). Eine echte Übersicht (.form-section-title)
+   verhält sich wie jede normale Überschrift: volle CSS-Kontrolle, keine
+   browserseitigen Sonderregeln. */
 .form-section {
   border: none;
   margin: 0;
@@ -593,16 +603,11 @@ button.entfernen {
   border-top: 1px solid var(--color-border);
 }
 
-/* <legend> ignoriert das padding des umschließenden <fieldset> (es
+.form-section-title {
-   positioniert sich an dessen Border-Box, nicht an der Padding-Box) —
+  margin: 0 0 16px 0;
-   ohne eigenes padding-left säße die Abschnittsüberschrift bündig am
-   Kartenrand, während der restliche Inhalt eingerückt ist. */
-.form-section > legend {
-  padding: 0 0 16px 0;
   font-size: 1.0625rem;
   font-weight: 700;
   color: var(--color-heading);
-  width: 100%;
 }
 
 .form-grid {

internal/web/templates/abteilung_liste.html

@@ -25,12 +25,22 @@
   {{end}}
 </ul>
 {{end}}
+<div class="form-card">
 <form method="post" action="/verwaltung/abteilungen">
-  <label for="name">Neue Abteilung</label>
+  <div class="form-section">
-  <input type="text" id="name" name="name" required>
+    <div class="form-grid">
-  <button type="submit">Anlegen</button>
+      <div>
+        <label for="name">Neue Abteilung</label>
+        <input type="text" id="name" name="name" required>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Anlegen</button>
+  </div>
 </form>
 </div>
+</div>
 </body>
 </html>
 {{end}}

internal/web/templates/betreiber_account_detail.html

@@ -8,11 +8,21 @@
 <h1>{{.Name}}</h1>
 <p class="hinweis">Angelegt am {{.CreatedAt}}</p>
 
+<div class="form-card">
 <form method="post" action="/betreiber/accounts/{{.AccountID}}/umbenennen">
-  <label for="name">Firmenname</label>
+  <div class="form-section">
-  <input type="text" id="name" name="name" value="{{.Name}}" required>
+    <div class="form-grid">
-  <button type="submit">Umbenennen</button>
+      <div>
+        <label for="name">Firmenname</label>
+        <input type="text" id="name" name="name" value="{{.Name}}" required>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Umbenennen</button>
+  </div>
 </form>
+</div>
 
 <h2>Nutzer</h2>
 <ul class="beteiligte">

internal/web/templates/betreiber_account_neu.html

@@ -13,8 +13,8 @@
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
 <div class="form-card">
 <form method="post" action="/betreiber/accounts">
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Firma</legend>
+    <h3 class="form-section-title">Firma</h3>
     <div class="form-grid">
       <div class="form-full">
         <label for="account_name">Firmenname</label>
@@ -37,9 +37,9 @@
         <input type="text" id="land" name="land" value="Deutschland" required>
       </div>
     </div>
-  </fieldset>
+  </div>
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Abrechnung</legend>
+    <h3 class="form-section-title">Abrechnung</h3>
     <div class="form-grid">
       <div>
         <label for="rechnungsemail">Rechnungsemail</label>
@@ -50,9 +50,9 @@
         <input type="text" id="ust_id" name="ust_id" placeholder="z. B. DE123456789">
       </div>
     </div>
-  </fieldset>
+  </div>
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Erster Nutzer (wird Admin)</legend>
+    <h3 class="form-section-title">Erster Nutzer (wird Admin)</h3>
     <div class="form-grid">
       <div>
         <label for="email">E-Mail</label>
@@ -63,7 +63,7 @@
         <input type="password" id="password" name="password" minlength="8" required>
       </div>
     </div>
-  </fieldset>
+  </div>
   <div class="form-actions">
     <button type="submit">Firma anlegen</button>
   </div>

internal/web/templates/betreiber_werkzeug_form.html

@@ -14,8 +14,8 @@
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
 <div class="form-card">
 <form method="post" action="{{if .ID}}{{.ActionBase}}/{{.ID}}{{else}}{{.ActionBase}}{{end}}">
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Grunddaten</legend>
+    <h3 class="form-section-title">Grunddaten</h3>
     <div class="form-grid">
       <div>
         <label for="name">Name</label>
@@ -35,10 +35,10 @@
         <p class="hinweis">Tatsächliche Länder benennen, nicht "EU"/"Drittland" — die USA sind DSGVO-rechtlich bereits ein Drittland wie jedes andere.</p>
       </div>
     </div>
-  </fieldset>
+  </div>
 
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Rechtliches &amp; Datenschutz</legend>
+    <h3 class="form-section-title">Rechtliches &amp; Datenschutz</h3>
     <div class="form-grid">
       <div class="form-full">
         <label>Zusicherungen</label>
@@ -66,10 +66,10 @@
         <input type="text" id="subprozessoren" name="subprozessoren" value="{{.Subprozessoren}}">
       </div>
     </div>
-  </fieldset>
+  </div>
 
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Einsatzbereich</legend>
+    <h3 class="form-section-title">Einsatzbereich</h3>
     <div class="form-grid">
       <div class="form-full">
         <label>Geeignete Zwecke</label>
@@ -84,10 +84,10 @@
         <input type="text" id="einschraenkungen" name="einschraenkungen" value="{{.Einschraenkungen}}">
       </div>
     </div>
-  </fieldset>
+  </div>
 
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Beleg</legend>
+    <h3 class="form-section-title">Beleg</h3>
     <div class="form-grid">
       <div>
         <label for="letzte_pruefung">Letzte Prüfung</label>
@@ -98,7 +98,7 @@
         <input type="text" id="quelle" name="quelle" value="{{.Quelle}}" required>
       </div>
     </div>
-  </fieldset>
+  </div>
 
   <div class="form-actions">
     <button type="submit">Speichern</button>

internal/web/templates/einladung.html

@@ -6,15 +6,25 @@
 <h1>Einladung annehmen</h1>
 <p class="hinweis">Sie treten dem Konto von <strong>{{.Firmenname}}</strong> bei.</p>
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
+<div class="form-card">
 <form method="post">
-  <label for="email">E-Mail</label>
+  <div class="form-section">
-  <input type="email" id="email" name="email" required>
+    <div class="form-grid">
-
+      <div>
-  <label for="password">Passwort (mind. 8 Zeichen)</label>
+        <label for="email">E-Mail</label>
-  <input type="password" id="password" name="password" minlength="8" required>
+        <input type="email" id="email" name="email" required>
-
+      </div>
-  <button type="submit">Konto anlegen</button>
+      <div>
+        <label for="password">Passwort (mind. 8 Zeichen)</label>
+        <input type="password" id="password" name="password" minlength="8" required>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Konto anlegen</button>
+  </div>
 </form>
+</div>
 <p><a href="/login">Schon ein Konto? Anmelden</a></p>
 </div>
 </body>

internal/web/templates/email_vorlage_bearbeiten.html

@@ -18,8 +18,8 @@
 {{if .Gespeichert}}<p class="hinweis">Gespeichert.</p>{{end}}
 <div class="form-card">
 <form method="post" action="{{.ActionBase}}/{{.Typ}}">
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>{{.Label}}{{if .IstUebersteuert}} <span class="hinweis">(eigene Vorlage)</span>{{else if eq .ActionBase "/verwaltung/email-vorlagen"}} <span class="hinweis">(Plattform-Standard, nicht angepasst)</span>{{end}}</legend>
+    <h3 class="form-section-title">{{.Label}}{{if .IstUebersteuert}} <span class="hinweis">(eigene Vorlage)</span>{{else if eq .ActionBase "/verwaltung/email-vorlagen"}} <span class="hinweis">(Plattform-Standard, nicht angepasst)</span>{{end}}</h3>
     <div class="form-grid">
       <div class="form-full">
         <label for="betreff">Betreff</label>
@@ -30,7 +30,7 @@
         <textarea id="text" name="text" rows="10" required>{{.Text}}</textarea>
       </div>
     </div>
-  </fieldset>
+  </div>
   <div class="form-actions">
     <button type="submit">Speichern</button>
   </div>

internal/web/templates/fall_detail.html

@@ -53,30 +53,39 @@
 {{else if .CanEntscheiden}}
 <h2>Entscheiden</h2>
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
+<div class="form-card">
 <form method="post" action="/faelle/{{.ID}}/entscheiden">
-  <fieldset>
+  <div class="form-section">
-    <legend>Entscheidung</legend>
+    <div class="form-grid">
-    <label><input type="radio" name="entscheidung" value="genehmigt" required> Genehmigt</label>
+      <div class="form-full">
-    <label><input type="radio" name="entscheidung" value="genehmigt_mit_auflagen"> Genehmigt mit Auflagen</label>
+        <label>Entscheidung</label>
-    <label><input type="radio" name="entscheidung" value="abgelehnt"> Abgelehnt</label>
+        <div class="chip-group">
-    <label><input type="radio" name="entscheidung" value="rueckfrage"> Rückfrage</label>
+          <label><input type="radio" name="entscheidung" value="genehmigt" required> Genehmigt</label>
-  </fieldset>
+          <label><input type="radio" name="entscheidung" value="genehmigt_mit_auflagen"> Genehmigt mit Auflagen</label>
-
+          <label><input type="radio" name="entscheidung" value="abgelehnt"> Abgelehnt</label>
-  {{if .WerkzeugOptionen}}
+          <label><input type="radio" name="entscheidung" value="rueckfrage"> Rückfrage</label>
-  <label>Werkzeug (bei Genehmigung erforderlich)
+        </div>
-    <select name="werkzeug_id">
+      </div>
-      <option value="">— auswählen —</option>
+      {{if .WerkzeugOptionen}}
-      {{range .WerkzeugOptionen}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
+      <div class="form-full">
-    </select>
+        <label for="werkzeug_id">Werkzeug (bei Genehmigung erforderlich)</label>
-  </label>
+        <select id="werkzeug_id" name="werkzeug_id">
-  {{end}}
+          <option value="">— auswählen —</option>
-
+          {{range .WerkzeugOptionen}}<option value="{{.ID}}">{{.Name}}</option>{{end}}
-  <label>Begründung (Pflicht bei Abweichung vom Vorschlag)
+        </select>
-    <textarea name="begruendung" rows="3"></textarea>
+      </div>
-  </label>
+      {{end}}
-
+      <div class="form-full">
-  <button type="submit">Entscheidung speichern</button>
+        <label for="begruendung">Begründung (Pflicht bei Abweichung vom Vorschlag)</label>
+        <textarea id="begruendung" name="begruendung" rows="3"></textarea>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Entscheidung speichern</button>
+  </div>
 </form>
+</div>
 {{else}}
 <p class="hinweis">Noch keine Entscheidung getroffen. Nur die Rolle "Verantwortlicher" kann entscheiden.</p>
 {{end}}

internal/web/templates/firmendaten.html

@@ -14,8 +14,8 @@
 {{if .Gespeichert}}<p class="hinweis">Gespeichert.</p>{{end}}
 <div class="form-card">
 <form method="post" action="/verwaltung/firma">
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Firma</legend>
+    <h3 class="form-section-title">Firma</h3>
     <div class="form-grid">
       <div class="form-full">
         <label for="account_name">Firmenname</label>
@@ -38,9 +38,9 @@
         <input type="text" id="land" name="land" value="{{.Land}}" required>
       </div>
     </div>
-  </fieldset>
+  </div>
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Abrechnung</legend>
+    <h3 class="form-section-title">Abrechnung</h3>
     <div class="form-grid">
       <div>
         <label for="rechnungsemail">Rechnungsemail</label>
@@ -51,7 +51,7 @@
         <input type="text" id="ust_id" name="ust_id" value="{{.UStID}}" placeholder="z. B. DE123456789">
       </div>
     </div>
-  </fieldset>
+  </div>
   <div class="form-actions">
     <button type="submit">Speichern</button>
   </div>

internal/web/templates/freigabe_regeln_liste.html

@@ -28,8 +28,8 @@
 {{else}}
 <div class="form-card">
 <form method="post" action="/verwaltung/freigabe-regeln">
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Neue Freigabe-Regel</legend>
+    <h3 class="form-section-title">Neue Freigabe-Regel</h3>
     <div class="form-grid">
       <div>
         <label for="bedingung">Bedingung</label>
@@ -55,7 +55,7 @@
         </select>
       </div>
     </div>
-  </fieldset>
+  </div>
   <div class="form-actions">
     <button type="submit">Anlegen</button>
   </div>

internal/web/templates/genehmiger_rollen_liste.html

@@ -20,8 +20,8 @@
 
 <div class="form-card">
 <form method="post" action="/verwaltung/genehmiger-rollen">
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Neue Genehmiger-Rolle</legend>
+    <h3 class="form-section-title">Neue Genehmiger-Rolle</h3>
     <div class="form-grid">
       <div>
         <label for="name">Name</label>
@@ -32,7 +32,7 @@
         <input type="text" id="beschreibung" name="beschreibung" placeholder="z. B. Prüft den Antrag aus Sicherheitssicht">
       </div>
     </div>
-  </fieldset>
+  </div>
   <div class="form-actions">
     <button type="submit">Anlegen</button>
   </div>

internal/web/templates/loeschfristen_liste.html

@@ -21,8 +21,8 @@
 {{if .Gespeichert}}<p class="hinweis">Löschfristen gespeichert.</p>{{end}}
 <div class="form-card">
 <form method="post" action="/verwaltung/loeschfristen">
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Maximale Aufbewahrungsdauer (Tage)</legend>
+    <h3 class="form-section-title">Maximale Aufbewahrungsdauer (Tage)</h3>
     <div class="form-grid">
       {{range .Zeilen}}
       <div>
@@ -31,7 +31,7 @@
       </div>
       {{end}}
     </div>
-  </fieldset>
+  </div>
   <div class="form-actions">
     <button type="submit">Speichern</button>
   </div>

internal/web/templates/login.html

@@ -6,15 +6,26 @@
 <h1>Anmelden</h1>
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
 {{if .Message}}<p class="hinweis">{{.Message}}</p>{{end}}
+<div class="form-card">
 <form method="post" action="/login">
-  <label for="email">E-Mail</label>
+  <div class="form-section">
-  <input type="email" id="email" name="email" required>
+    <h3 class="form-section-title">Anmelden</h3>
-
+    <div class="form-grid">
-  <label for="password">Passwort</label>
+      <div class="form-full">
-  <input type="password" id="password" name="password" required>
+        <label for="email">E-Mail</label>
-
+        <input type="email" id="email" name="email" required>
-  <button type="submit">Anmelden</button>
+      </div>
+      <div class="form-full">
+        <label for="password">Passwort</label>
+        <input type="password" id="password" name="password" required>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Anmelden</button>
+  </div>
 </form>
+</div>
 <p><a href="/register">Noch kein Konto? Registrieren</a></p>
 <p><a href="/passwort-vergessen">Passwort vergessen?</a></p>
 </div>

internal/web/templates/nutzer_import.html

@@ -15,13 +15,22 @@
   geschlossen wird.
 </p>
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
+<div class="form-card">
 <form method="post" action="/verwaltung/nutzer/import" enctype="multipart/form-data">
-  <label for="csv">CSV-Datei</label>
+  <div class="form-section">
-  <input type="file" id="csv" name="csv" accept=".csv,text/csv" required>
+    <div class="form-grid">
-
+      <div class="form-full">
-  <button type="submit">Importieren</button>
+        <label for="csv">CSV-Datei</label>
+        <input type="file" id="csv" name="csv" accept=".csv,text/csv" required>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Importieren</button>
+  </div>
 </form>
 </div>
+</div>
 </body>
 </html>
 {{end}}

internal/web/templates/nutzer_neu.html

@@ -11,23 +11,34 @@
   auf einem anderen Weg an die neue Person weitergegeben werden.
 </p>
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
+<div class="form-card">
 <form method="post" action="/verwaltung/nutzer">
-  <label for="email">E-Mail</label>
+  <div class="form-section">
-  <input type="email" id="email" name="email" required>
+    <div class="form-grid">
-
+      <div>
-  <label for="password">Initialpasswort (mind. 8 Zeichen)</label>
+        <label for="email">E-Mail</label>
-  <input type="password" id="password" name="password" minlength="8" required>
+        <input type="email" id="email" name="email" required>
-
+      </div>
-  <fieldset>
+      <div>
-    <legend>Rolle</legend>
+        <label for="password">Initialpasswort (mind. 8 Zeichen)</label>
-    {{range .Rollen}}
+        <input type="password" id="password" name="password" minlength="8" required>
-    <label><input type="radio" name="role" value="{{.}}" required> {{.}}</label>
+      </div>
-    {{end}}
+      <div class="form-full">
-  </fieldset>
+        <label>Rolle</label>
-
+        <div class="chip-group">
-  <button type="submit">Nutzer anlegen</button>
+          {{range .Rollen}}
+          <label><input type="radio" name="role" value="{{.}}" required> {{.}}</label>
+          {{end}}
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Nutzer anlegen</button>
+  </div>
 </form>
 </div>
+</div>
 </body>
 </html>
 {{end}}

internal/web/templates/passwort_vergessen.html

@@ -6,11 +6,21 @@
 <h1>Passwort vergessen</h1>
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
 {{if .Message}}<p class="hinweis">{{.Message}}</p>{{end}}
+<div class="form-card">
 <form method="post" action="/passwort-vergessen">
-  <label for="email">E-Mail</label>
+  <div class="form-section">
-  <input type="email" id="email" name="email" required>
+    <div class="form-grid">
-  <button type="submit">Link anfordern</button>
+      <div class="form-full">
+        <label for="email">E-Mail</label>
+        <input type="email" id="email" name="email" required>
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Link anfordern</button>
+  </div>
 </form>
+</div>
 <p><a href="/login">Zurück zur Anmeldung</a></p>
 </div>
 </body>

internal/web/templates/passwort_zuruecksetzen.html

@@ -5,12 +5,22 @@
 <div class="page">
 <h1>Neues Passwort setzen</h1>
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
+<div class="form-card">
 <form method="post" action="/passwort-zuruecksetzen/{{.Token}}">
-  <label for="password">Neues Passwort</label>
+  <div class="form-section">
-  <input type="password" id="password" name="password" required minlength="8">
+    <div class="form-grid">
-  <button type="submit">Passwort setzen</button>
+      <div class="form-full">
+        <label for="password">Neues Passwort</label>
+        <input type="password" id="password" name="password" required minlength="8">
+      </div>
+    </div>
+  </div>
+  <div class="form-actions">
+    <button type="submit">Passwort setzen</button>
+  </div>
 </form>
 </div>
+</div>
 </body>
 </html>
 {{end}}

internal/web/templates/register.html

@@ -11,8 +11,8 @@
 {{if .Error}}<p class="fehler">{{.Error}}</p>{{end}}
 <div class="form-card">
 <form method="post" action="/register">
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Firma</legend>
+    <h3 class="form-section-title">Firma</h3>
     <div class="form-grid">
       <div class="form-full">
         <label for="account_name">Firmenname</label>
@@ -35,9 +35,9 @@
         <input type="text" id="land" name="land" value="Deutschland" required>
       </div>
     </div>
-  </fieldset>
+  </div>
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Abrechnung</legend>
+    <h3 class="form-section-title">Abrechnung</h3>
     <div class="form-grid">
       <div>
         <label for="rechnungsemail">Rechnungsemail</label>
@@ -48,9 +48,9 @@
         <input type="text" id="ust_id" name="ust_id" placeholder="z. B. DE123456789">
       </div>
     </div>
-  </fieldset>
+  </div>
-  <fieldset class="form-section">
+  <div class="form-section">
-    <legend>Erster Nutzer (wird Admin)</legend>
+    <h3 class="form-section-title">Erster Nutzer (wird Admin)</h3>
     <div class="form-grid">
       <div>
         <label for="email">E-Mail</label>
@@ -61,7 +61,7 @@
         <input type="password" id="password" name="password" minlength="8" required>
       </div>
     </div>
-  </fieldset>
+  </div>
   <div class="form-actions">
     <button type="submit">Konto anlegen</button>
   </div>