From 631886a763c38ad480d757a2b8ef8b60824765a4 Mon Sep 17 00:00:00 2001
From: Md Bayazid  Bostame <bostame@bostame-2349.local>
Date: Fri, 27 Mar 2026 23:43:00 +0100
Subject: [PATCH] snapshot: preserve form and app shell alignment before
 component unification

---
 backend/locale/en/LC_MESSAGES/django.po       | 517 ++++++++++--------
 backend/workflows/form_builder.py             |  28 +-
 .../static/workflows/css/account.css          |  20 -
 .../static/workflows/css/admin_tools.css      |   6 +-
 .../static/workflows/css/app_chrome.css       |  16 +-
 .../static/workflows/css/buttons.css          |  21 +-
 .../static/workflows/css/design_system.css    | 288 ++++++++++
 .../static/workflows/css/docs_pages.css       |   7 +-
 .../static/workflows/css/form_builder.css     |  21 +-
 .../workflows/static/workflows/css/home.css   |  70 +--
 .../workflows/static/workflows/css/login.css  |  20 -
 .../static/workflows/css/offboarding_form.css | 321 +++++++++--
 .../static/workflows/css/onboarding_form.css  |  22 -
 .../workflows/css/release_checklist.css       |   3 +-
 .../static/workflows/css/request_timeline.css |  40 ++
 .../workflows/css/requests_dashboard.css      |  72 +--
 .../static/workflows/css/success_pages.css    |   4 +-
 .../static/workflows/js/form_builder.js       |   4 +-
 .../templates/workflows/app_registry.html     |  16 +-
 .../templates/workflows/audit_log.html        |  25 +-
 .../templates/workflows/backup_recovery.html  |  24 +-
 .../templates/workflows/base_shell.html       |   1 +
 .../workflows/branding_settings.html          |  18 +-
 .../templates/workflows/company_config.html   |  16 +-
 .../workflows/developer_handbook.html         |   2 +
 .../templates/workflows/form_builder.html     |   2 +-
 .../templates/workflows/handbook.html         |   2 +
 .../workflows/integrations_setup.html         |  31 +-
 .../templates/workflows/intro_builder.html    |  23 +-
 .../templates/workflows/job_monitor.html      |  26 +-
 .../templates/workflows/offboarding_form.html |  64 ++-
 .../workflows/offboarding_success.html        |   4 +
 .../workflows/onboarding_success.html         |   4 +
 .../templates/workflows/project_wiki.html     |   2 +
 .../workflows/release_checklist.html          |   2 +
 .../templates/workflows/request_timeline.html |  45 +-
 .../workflows/requests_dashboard.html         |  29 +-
 .../templates/workflows/trial_management.html |  18 +-
 .../templates/workflows/user_management.html  |  24 +-
 .../templates/workflows/welcome_emails.html   |  25 +-
 backend/workflows/views.py                    |  10 +-
 41 files changed, 1198 insertions(+), 695 deletions(-)
 create mode 100644 backend/workflows/static/workflows/css/design_system.css
 create mode 100644 backend/workflows/static/workflows/css/request_timeline.css

diff --git a/backend/locale/en/LC_MESSAGES/django.po b/backend/locale/en/LC_MESSAGES/django.po
index 0268d95..5aae7a2 100644
--- a/backend/locale/en/LC_MESSAGES/django.po
+++ b/backend/locale/en/LC_MESSAGES/django.po
@@ -2,7 +2,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: tubco-portal\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2026-03-27 22:05+0000\n"
+"POT-Creation-Date: 2026-03-27 22:17+0000\n"
 "PO-Revision-Date: 2026-03-24 00:00+0000\n"
 "Language: en\n"
 "MIME-Version: 1.0\n"
@@ -97,7 +97,7 @@ msgstr "Search"
 #: workflows/app_registry.py:62
 #: workflows/templates/workflows/app_registry.html:32
 #: workflows/templates/workflows/backup_recovery.html:72
-#: workflows/templates/workflows/form_builder.html:430
+#: workflows/templates/workflows/form_builder.html:370
 #: workflows/templates/workflows/job_monitor.html:68
 #: workflows/templates/workflows/job_monitor.html:89
 #: workflows/templates/workflows/onboarding_intro_session.html:37
@@ -225,7 +225,7 @@ msgstr "Manage scheduled welcome emails."
 
 #: workflows/app_registry.py:158
 #: workflows/templates/workflows/form_builder.html:5
-#: workflows/templates/workflows/form_builder.html:76
+#: workflows/templates/workflows/form_builder.html:56
 msgid "Form Builder"
 msgstr "Form Builder"
 
@@ -390,6 +390,65 @@ msgstr ""
 msgid "Remote Backup in Nextcloud konnte nicht gelöscht werden."
 msgstr ""
 
+#: workflows/form_builder.py:65
+#, fuzzy
+#| msgid "Stammdaten"
+msgid "1. Stammdaten"
+msgstr "Master data"
+
+#: workflows/form_builder.py:66
+#, fuzzy
+#| msgid "Vertrag"
+msgid "2. Vertrag"
+msgstr "Contract"
+
+#: workflows/form_builder.py:67
+#, fuzzy
+#| msgid "IT-Setup"
+msgid "3. IT-Setup"
+msgstr "IT setup"
+
+#: workflows/form_builder.py:68
+#, fuzzy
+#| msgid "Abschluss"
+msgid "4. Abschluss"
+msgstr "Finish"
+
+#: workflows/form_builder.py:71
+#, fuzzy
+#| msgid "Mitarbeiter"
+msgid "1. Mitarbeitende"
+msgstr "Staff"
+
+#: workflows/form_builder.py:72
+msgid "2. Austritt"
+msgstr ""
+
+#: workflows/form_builder.py:73
+#, fuzzy
+#| msgid "Abschluss"
+msgid "3. Abschluss"
+msgstr "Finish"
+
+#: workflows/form_builder.py:503 workflows/form_builder.py:556
+#: workflows/templates/workflows/form_builder.html:291
+#, fuzzy
+#| msgid "Standardsprache"
+msgid "Standard"
+msgstr "Default language"
+
+#: workflows/form_builder.py:513 workflows/form_builder.py:565
+msgid "Lean"
+msgstr ""
+
+#: workflows/form_builder.py:534
+msgid "IT-heavy"
+msgstr ""
+
+#: workflows/form_builder.py:578
+msgid "HR-heavy"
+msgstr ""
+
 #: workflows/forms.py:112 workflows/forms.py:476
 #: workflows/templates/workflows/user_management.html:72
 #: workflows/templates/workflows/user_management.html:170
@@ -581,8 +640,7 @@ msgstr "Introduction"
 msgid "System-Hinweise"
 msgstr "Introduction"
 
-#: workflows/forms.py:418 workflows/templates/workflows/form_builder.html:40
-#: workflows/templates/workflows/form_builder.html:100
+#: workflows/forms.py:418
 #, fuzzy
 #| msgid "Workflow-Regeln"
 msgid "Workflow"
@@ -1536,12 +1594,11 @@ msgstr ""
 #: workflows/templates/workflows/account_profile.html:262
 #: workflows/templates/workflows/app_registry.html:35
 #: workflows/templates/workflows/app_registry.html:84
-#: workflows/templates/workflows/form_builder.html:109
-#: workflows/templates/workflows/form_builder.html:420
-#: workflows/templates/workflows/form_builder.html:431
-#: workflows/templates/workflows/form_builder.html:558
-#: workflows/templates/workflows/form_builder.html:712
-#: workflows/templates/workflows/form_builder.html:856
+#: workflows/templates/workflows/form_builder.html:360
+#: workflows/templates/workflows/form_builder.html:371
+#: workflows/templates/workflows/form_builder.html:498
+#: workflows/templates/workflows/form_builder.html:652
+#: workflows/templates/workflows/form_builder.html:801
 #: workflows/templates/workflows/integrations_setup.html:263
 #: workflows/templates/workflows/intro_builder.html:65
 #: workflows/templates/workflows/trial_management.html:28
@@ -1730,10 +1787,11 @@ msgstr "Last updated"
 
 #: workflows/templates/workflows/app_registry.html:4
 #: workflows/templates/workflows/app_registry.html:103
-#: workflows/templates/workflows/form_builder.html:686
-#: workflows/templates/workflows/form_builder.html:727
-#: workflows/templates/workflows/form_builder.html:790
-#: workflows/templates/workflows/form_builder.html:879
+#: workflows/templates/workflows/form_builder.html:626
+#: workflows/templates/workflows/form_builder.html:667
+#: workflows/templates/workflows/form_builder.html:730
+#: workflows/templates/workflows/form_builder.html:791
+#: workflows/templates/workflows/form_builder.html:824
 #: workflows/templates/workflows/intro_builder.html:58
 msgid "Sortierung"
 msgstr "Sort order"
@@ -1985,8 +2043,8 @@ msgid "Zeit"
 msgstr ""
 
 #: workflows/templates/workflows/audit_log.html:55
-#: workflows/templates/workflows/form_builder.html:782
-#: workflows/templates/workflows/form_builder.html:871
+#: workflows/templates/workflows/form_builder.html:722
+#: workflows/templates/workflows/form_builder.html:816
 #: workflows/templates/workflows/request_timeline.html:68
 #: workflows/templates/workflows/requests_dashboard.html:128
 #: workflows/templates/workflows/requests_dashboard.html:188
@@ -2223,9 +2281,9 @@ msgid "Backup-Bundle wirklich löschen?"
 msgstr "Delete this backup bundle?"
 
 #: workflows/templates/workflows/backup_recovery.html:133
-#: workflows/templates/workflows/form_builder.html:560
-#: workflows/templates/workflows/form_builder.html:714
-#: workflows/templates/workflows/form_builder.html:859
+#: workflows/templates/workflows/form_builder.html:500
+#: workflows/templates/workflows/form_builder.html:654
+#: workflows/templates/workflows/form_builder.html:804
 #: workflows/templates/workflows/integrations_setup.html:265
 #: workflows/templates/workflows/intro_builder.html:66
 #: workflows/templates/workflows/intro_builder.html:102
@@ -2367,651 +2425,599 @@ msgid "Builder Navigation"
 msgstr ""
 
 #: workflows/templates/workflows/form_builder.html:23
-#: workflows/templates/workflows/form_builder.html:124 workflows/views.py:2996
+#: workflows/templates/workflows/form_builder.html:85 workflows/views.py:2996
 #, fuzzy
 #| msgid "Reihenfolge speichern"
 msgid "Struktur & Reihenfolge"
 msgstr "Save order"
 
 #: workflows/templates/workflows/form_builder.html:24
-#: workflows/templates/workflows/form_builder.html:128
-#: workflows/templates/workflows/form_builder.html:157
-#: workflows/templates/workflows/form_builder.html:221
-#: workflows/templates/workflows/form_builder.html:238 workflows/views.py:2997
+#: workflows/templates/workflows/form_builder.html:92
+#: workflows/templates/workflows/form_builder.html:156
+#: workflows/templates/workflows/form_builder.html:173 workflows/views.py:2997
 #, fuzzy
 #| msgid "Abschnitt"
 msgid "Abschnitte"
 msgstr "Section"
 
 #: workflows/templates/workflows/form_builder.html:27
-#: workflows/templates/workflows/form_builder.html:211
+#: workflows/templates/workflows/form_builder.html:146
 #, fuzzy
 #| msgid "Sicherheitsregeln"
 msgid "Sichtbarkeit & Regeln"
 msgstr "Safety rules"
 
 #: workflows/templates/workflows/form_builder.html:28
-#: workflows/templates/workflows/form_builder.html:215
+#: workflows/templates/workflows/form_builder.html:150
 #, fuzzy
 #| msgid "Ausgeblendet"
 msgid "ausgeblendet"
 msgstr "Hidden"
 
 #: workflows/templates/workflows/form_builder.html:31
-#: workflows/templates/workflows/form_builder.html:493
+#: workflows/templates/workflows/form_builder.html:433
 #, fuzzy
 #| msgid "Optionen verwalten"
 msgid "Optionen & Texte"
 msgstr "Manage options"
 
 #: workflows/templates/workflows/form_builder.html:32
-#: workflows/templates/workflows/form_builder.html:67
-#: workflows/templates/workflows/form_builder.html:147
-#: workflows/templates/workflows/form_builder.html:497
-#: workflows/templates/workflows/form_builder.html:752
+#: workflows/templates/workflows/form_builder.html:47
+#: workflows/templates/workflows/form_builder.html:437
+#: workflows/templates/workflows/form_builder.html:692
 #, fuzzy
 #| msgid "Feldtexte speichern"
 msgid "eigene Felder"
 msgstr "Save field text"
 
-#: workflows/templates/workflows/form_builder.html:37
-#, fuzzy
-#| msgid "Abschnitt"
-msgid "Aktive Ansicht"
-msgstr "Section"
-
-#: workflows/templates/workflows/form_builder.html:44
-#: workflows/templates/workflows/form_builder.html:104
-msgid "Modul"
-msgstr ""
-
-#: workflows/templates/workflows/form_builder.html:49
-msgid "Fokus"
-msgstr ""
-
-#: workflows/templates/workflows/form_builder.html:59
-#: workflows/templates/workflows/form_builder.html:129
+#: workflows/templates/workflows/form_builder.html:39
 msgid "konfigurierbare Felder"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:63
-#: workflows/templates/workflows/form_builder.html:499
-#: workflows/templates/workflows/form_builder.html:664
+#: workflows/templates/workflows/form_builder.html:43
+#: workflows/templates/workflows/form_builder.html:439
+#: workflows/templates/workflows/form_builder.html:604
 #, fuzzy
 #| msgid "Abschnitt"
 msgid "eigene Abschnitte"
 msgstr "Section"
 
-#: workflows/templates/workflows/form_builder.html:75
+#: workflows/templates/workflows/form_builder.html:55
 msgid "Deployment Configuration"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:93
+#: workflows/templates/workflows/form_builder.html:73
 msgid "Reihenfolge speichern"
 msgstr "Save order"
 
-#: workflows/templates/workflows/form_builder.html:97
-#, fuzzy
-#| msgid "Testmodus"
-msgid "Arbeitskontext"
-msgstr "Test mode"
-
-#: workflows/templates/workflows/form_builder.html:125
+#: workflows/templates/workflows/form_builder.html:86
 msgid ""
 "Ordnen Sie Abschnitte und Felder in der Reihenfolge, in der sie im Formular "
 "erscheinen sollen."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:136
-#, fuzzy
-#| msgid "Testmodus"
-msgid "Arbeitsmodus"
-msgstr "Test mode"
-
-#: workflows/templates/workflows/form_builder.html:137
-#, fuzzy
-#| msgid "Letzte Anmeldung"
-msgid "Direkte Anordnung"
-msgstr "Last login"
-
-#: workflows/templates/workflows/form_builder.html:143
-#, fuzzy
-#| msgid "Abschnitt"
-msgid "aktive Abschnitte"
-msgstr "Section"
-
-#: workflows/templates/workflows/form_builder.html:151
-#, fuzzy
-#| msgid "Ausgeblendet"
-msgid "ausgeblendete Felder"
-msgstr "Hidden"
-
-#: workflows/templates/workflows/form_builder.html:163
-#: workflows/templates/workflows/form_builder.html:176
-#: workflows/templates/workflows/form_builder.html:308
-#: workflows/templates/workflows/form_builder.html:319
-#: workflows/templates/workflows/form_builder.html:606
-#: workflows/templates/workflows/form_builder.html:827
-#: workflows/templates/workflows/form_builder.html:838
-#: workflows/templates/workflows/form_builder.html:937
+#: workflows/templates/workflows/form_builder.html:98
+#: workflows/templates/workflows/form_builder.html:111
+#: workflows/templates/workflows/form_builder.html:197
+#: workflows/templates/workflows/form_builder.html:248
+#: workflows/templates/workflows/form_builder.html:259
+#: workflows/templates/workflows/form_builder.html:546
+#: workflows/templates/workflows/form_builder.html:767
+#: workflows/templates/workflows/form_builder.html:778
+#: workflows/templates/workflows/form_builder.html:882
 #, fuzzy, python-format
 #| msgid "Keine konfigurierten Felder in diesem Schritt."
 msgid "%(count)s Feld/Felder"
 msgstr "No configured fields in this step."
 
-#: workflows/templates/workflows/form_builder.html:178
+#: workflows/templates/workflows/form_builder.html:113
 #, fuzzy
 #| msgid "öffnen"
 msgid "Geöffnet"
 msgstr "open"
 
-#: workflows/templates/workflows/form_builder.html:188
+#: workflows/templates/workflows/form_builder.html:123
 msgid "Eigen"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:189
-#: workflows/templates/workflows/form_builder.html:273
-#: workflows/templates/workflows/form_builder.html:332
+#: workflows/templates/workflows/form_builder.html:124
+#: workflows/templates/workflows/form_builder.html:213
+#: workflows/templates/workflows/form_builder.html:272
 msgid "Fix"
 msgstr "Fixed"
 
-#: workflows/templates/workflows/form_builder.html:190
-#: workflows/templates/workflows/form_builder.html:275
-#: workflows/templates/workflows/form_builder.html:334
+#: workflows/templates/workflows/form_builder.html:125
+#: workflows/templates/workflows/form_builder.html:215
+#: workflows/templates/workflows/form_builder.html:274
 msgid "Ausgeblendet"
 msgstr "Hidden"
 
-#: workflows/templates/workflows/form_builder.html:191
-#: workflows/templates/workflows/form_builder.html:336
-#: workflows/templates/workflows/form_builder.html:349
-#: workflows/templates/workflows/form_builder.html:352
-#: workflows/templates/workflows/form_builder.html:852
+#: workflows/templates/workflows/form_builder.html:126
+#: workflows/templates/workflows/form_builder.html:276
+#: workflows/templates/workflows/form_builder.html:289
+#: workflows/templates/workflows/form_builder.html:292
+#: workflows/templates/workflows/form_builder.html:797
 msgid "Pflicht"
 msgstr "Required"
 
-#: workflows/templates/workflows/form_builder.html:195
+#: workflows/templates/workflows/form_builder.html:130
 #, fuzzy
 #| msgid "Keine konfigurierten Felder in diesem Schritt."
 msgid "Noch keine Felder in diesem Abschnitt."
 msgstr "No configured fields in this step."
 
-#: workflows/templates/workflows/form_builder.html:212
+#: workflows/templates/workflows/form_builder.html:147
 msgid ""
 "Legen Sie fest, welche Teile sichtbar, erforderlich oder regelgesteuert sein "
 "sollen."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:216
+#: workflows/templates/workflows/form_builder.html:151
 #, fuzzy
 #| msgid "Abschnitt"
 msgid "versteckte Abschnitte"
 msgstr "Section"
 
-#: workflows/templates/workflows/form_builder.html:220
+#: workflows/templates/workflows/form_builder.html:155
 #, fuzzy
 #| msgid "Regelname"
 msgid "Regelmodule"
 msgstr "Rule name"
 
-#: workflows/templates/workflows/form_builder.html:222 workflows/views.py:2998
+#: workflows/templates/workflows/form_builder.html:157 workflows/views.py:2998
 #, fuzzy
 #| msgid "Feldtexte verwalten"
 msgid "Feldregeln"
 msgstr "Manage field text"
 
-#: workflows/templates/workflows/form_builder.html:224
-#: workflows/templates/workflows/form_builder.html:378 workflows/views.py:2999
+#: workflows/templates/workflows/form_builder.html:159
+#: workflows/templates/workflows/form_builder.html:318 workflows/views.py:2999
 msgid "Bedingte Logik"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:234
+#: workflows/templates/workflows/form_builder.html:169
 #, fuzzy
 #| msgid "Abschnitt"
 msgid "Abschnitte steuern"
 msgstr "Section"
 
-#: workflows/templates/workflows/form_builder.html:235
+#: workflows/templates/workflows/form_builder.html:170
 msgid "Reihenfolge und Sichtbarkeit der Formularabschnitte."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:252
+#: workflows/templates/workflows/form_builder.html:187
 #, fuzzy
 #| msgid "Reihenfolge speichern"
 msgid "Nach oben"
 msgstr "Save order"
 
-#: workflows/templates/workflows/form_builder.html:255
+#: workflows/templates/workflows/form_builder.html:190
 msgid "Nach unten"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:261
-#, fuzzy, python-format
-#| msgid "Keine konfigurierten Felder in diesem Schritt."
-msgid "%(count)s Feld/Felder in diesem Abschnitt."
-msgstr "No configured fields in this step."
+#: workflows/templates/workflows/form_builder.html:199
+#, fuzzy
+#| msgid "Abschnitt"
+msgid "Fixer Abschnitt"
+msgstr "Section"
 
-#: workflows/templates/workflows/form_builder.html:274
-#: workflows/templates/workflows/form_builder.html:345
+#: workflows/templates/workflows/form_builder.html:214
+#: workflows/templates/workflows/form_builder.html:285
 msgid "Sichtbar"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:282
+#: workflows/templates/workflows/form_builder.html:222
 #, fuzzy
 #| msgid "Regeln speichern"
 msgid "Abschnittsregeln speichern"
 msgstr "Save rules"
 
-#: workflows/templates/workflows/form_builder.html:293
+#: workflows/templates/workflows/form_builder.html:233
 #, fuzzy
 #| msgid "Feldtexte verwalten"
 msgid "Feldregeln verwalten"
 msgstr "Manage field text"
 
-#: workflows/templates/workflows/form_builder.html:294
+#: workflows/templates/workflows/form_builder.html:234
 msgid "Steuern Sie Sichtbarkeit und Pflichtstatus für einzelne Felder."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:297
+#: workflows/templates/workflows/form_builder.html:237
 msgid "konfigurierbar"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:303
+#: workflows/templates/workflows/form_builder.html:243
 #, fuzzy
 #| msgid "Abschnitt"
 msgid "Feldregel-Abschnitte"
 msgstr "Section"
 
-#: workflows/templates/workflows/form_builder.html:338
+#: workflows/templates/workflows/form_builder.html:278
 msgid "Flexibel"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:351
-#, fuzzy
-#| msgid "Standardsprache"
-msgid "Standard"
-msgstr "Default language"
-
-#: workflows/templates/workflows/form_builder.html:353
+#: workflows/templates/workflows/form_builder.html:293
 #: workflows/templates/workflows/user_management.html:109
 msgid "Optional"
 msgstr "Optional"
 
-#: workflows/templates/workflows/form_builder.html:359
+#: workflows/templates/workflows/form_builder.html:299
 #, fuzzy
 #| msgid "Keine Feldkonfigurationen verfügbar."
 msgid "Keine Feldregeln verfügbar."
 msgstr "No field configurations available."
 
-#: workflows/templates/workflows/form_builder.html:367
+#: workflows/templates/workflows/form_builder.html:307
 #, fuzzy
 #| msgid "Regeln speichern"
 msgid "Feldregeln speichern"
 msgstr "Save rules"
 
-#: workflows/templates/workflows/form_builder.html:379
+#: workflows/templates/workflows/form_builder.html:319
 msgid "Lassen Sie Felder abhängig von anderen Antworten ein- oder ausblenden."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:382
+#: workflows/templates/workflows/form_builder.html:322
 #, fuzzy
 #| msgid "Regelname"
 msgid "Regeln"
 msgstr "Rule name"
 
-#: workflows/templates/workflows/form_builder.html:388
+#: workflows/templates/workflows/form_builder.html:328
 #, fuzzy
 #| msgid "Branding speichern"
 msgid "Bedingte Regeln"
 msgstr "Save branding"
 
-#: workflows/templates/workflows/form_builder.html:393
+#: workflows/templates/workflows/form_builder.html:333
 #, fuzzy, python-format
 #| msgid "Keine konfigurierten Felder in diesem Schritt."
 msgid "%(count)s Ziel-Feld/Felder"
 msgstr "No configured fields in this step."
 
-#: workflows/templates/workflows/form_builder.html:405
+#: workflows/templates/workflows/form_builder.html:345
 #, fuzzy
 #| msgid "Sicherheitsregeln"
 msgid "Sichtbarkeit"
 msgstr "Safety rules"
 
-#: workflows/templates/workflows/form_builder.html:409
+#: workflows/templates/workflows/form_builder.html:349
 msgid "Steuert"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:414
+#: workflows/templates/workflows/form_builder.html:354
 #, fuzzy
 #| msgid "Keine geplanten Welcome E-Mails vorhanden."
 msgid "Keine Ziel-Felder."
 msgstr "No scheduled welcome emails available."
 
-#: workflows/templates/workflows/form_builder.html:426
+#: workflows/templates/workflows/form_builder.html:366
 #, fuzzy
 #| msgid "Sicherheitsregeln"
 msgid "Sichtbar, wenn"
 msgstr "Safety rules"
 
-#: workflows/templates/workflows/form_builder.html:431
+#: workflows/templates/workflows/form_builder.html:371
 #, fuzzy
 #| msgid "inaktiv"
 msgid "Inaktiv"
 msgstr "inactive"
 
-#: workflows/templates/workflows/form_builder.html:440
+#: workflows/templates/workflows/form_builder.html:380
 msgid "Zeige dieses Element, wenn"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:442
-#: workflows/templates/workflows/form_builder.html:459
+#: workflows/templates/workflows/form_builder.html:382
+#: workflows/templates/workflows/form_builder.html:399
 msgid "Keine"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:452
-#: workflows/templates/workflows/form_builder.html:469
+#: workflows/templates/workflows/form_builder.html:392
+#: workflows/templates/workflows/form_builder.html:409
+#: workflows/templates/workflows/form_builder.html:513
 #: workflows/templates/workflows/intro_builder.html:64
 msgid "Wert"
 msgstr "Value"
 
-#: workflows/templates/workflows/form_builder.html:455
+#: workflows/templates/workflows/form_builder.html:395
 #, fuzzy
 #| msgid "Zusätzlicher Zugang besprochen: %(item)s"
 msgid "Zusätzliche Bedingung"
 msgstr "Additional access discussed: %(item)s"
 
-#: workflows/templates/workflows/form_builder.html:457
+#: workflows/templates/workflows/form_builder.html:397
 msgid "Und zusätzlich"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:479
+#: workflows/templates/workflows/form_builder.html:419
 #, fuzzy
 #| msgid "Branding speichern"
 msgid "Bedingte Logik speichern"
 msgstr "Save branding"
 
-#: workflows/templates/workflows/form_builder.html:494
+#: workflows/templates/workflows/form_builder.html:434
 msgid ""
 "Pflegen Sie Auswahlwerte, Feldtexte und benutzerdefinierte Erweiterungen."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:504
+#: workflows/templates/workflows/form_builder.html:444
 #, fuzzy
 #| msgid "Inhalt"
 msgid "Inhaltsmodule"
 msgstr "Contents"
 
-#: workflows/templates/workflows/form_builder.html:505 workflows/views.py:3000
+#: workflows/templates/workflows/form_builder.html:445 workflows/views.py:3000
 #, fuzzy
 #| msgid "Aktion"
 msgid "Optionen"
 msgstr "Action"
 
-#: workflows/templates/workflows/form_builder.html:506 workflows/views.py:3001
+#: workflows/templates/workflows/form_builder.html:446 workflows/views.py:3001
 #, fuzzy
 #| msgid "Feldtexte verwalten"
 msgid "Feldtexte"
 msgstr "Manage field text"
 
-#: workflows/templates/workflows/form_builder.html:508
-#: workflows/templates/workflows/form_builder.html:660 workflows/views.py:3002
+#: workflows/templates/workflows/form_builder.html:448
+#: workflows/templates/workflows/form_builder.html:600 workflows/views.py:3002
 #, fuzzy
 #| msgid "Abschnitt"
 msgid "Eigene Abschnitte"
 msgstr "Section"
 
-#: workflows/templates/workflows/form_builder.html:510
-#: workflows/templates/workflows/form_builder.html:748 workflows/views.py:3003
+#: workflows/templates/workflows/form_builder.html:450
+#: workflows/templates/workflows/form_builder.html:688 workflows/views.py:3003
 msgid "Eigene Felder"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:511 workflows/views.py:3004
+#: workflows/templates/workflows/form_builder.html:451 workflows/views.py:3004
 msgid "Vorschau"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:522
+#: workflows/templates/workflows/form_builder.html:462
 msgid "Kategorie"
 msgstr "Category"
 
-#: workflows/templates/workflows/form_builder.html:535
+#: workflows/templates/workflows/form_builder.html:475
+#: workflows/templates/workflows/form_builder.html:505
 #: workflows/templates/workflows/form_builder.html:565
-#: workflows/templates/workflows/form_builder.html:625
-#: workflows/templates/workflows/form_builder.html:766
-#: workflows/templates/workflows/form_builder.html:883
+#: workflows/templates/workflows/form_builder.html:706
+#: workflows/templates/workflows/form_builder.html:828
 msgid "Label (DE)"
 msgstr "Label (DE)"
 
-#: workflows/templates/workflows/form_builder.html:536
+#: workflows/templates/workflows/form_builder.html:476
 msgid "Label (EN, optional)"
 msgstr "Label (EN, optional)"
 
-#: workflows/templates/workflows/form_builder.html:537
+#: workflows/templates/workflows/form_builder.html:477
 msgid "Technischer Wert (optional)"
 msgstr "Technical value (optional)"
 
-#: workflows/templates/workflows/form_builder.html:538
+#: workflows/templates/workflows/form_builder.html:478
 msgid "Option hinzufügen"
 msgstr "Add option"
 
-#: workflows/templates/workflows/form_builder.html:549
+#: workflows/templates/workflows/form_builder.html:489
 msgid "Ziehen zum Sortieren"
 msgstr "Drag to reorder"
 
-#: workflows/templates/workflows/form_builder.html:560
+#: workflows/templates/workflows/form_builder.html:500
 msgid "Option wirklich löschen?"
 msgstr "Delete this option?"
 
+#: workflows/templates/workflows/form_builder.html:509
 #: workflows/templates/workflows/form_builder.html:569
-#: workflows/templates/workflows/form_builder.html:629
-#: workflows/templates/workflows/form_builder.html:770
-#: workflows/templates/workflows/form_builder.html:887
+#: workflows/templates/workflows/form_builder.html:710
+#: workflows/templates/workflows/form_builder.html:832
 msgid "Label (EN)"
 msgstr "Label (EN)"
 
-#: workflows/templates/workflows/form_builder.html:579
+#: workflows/templates/workflows/form_builder.html:519
 msgid "Keine Optionen in dieser Kategorie."
 msgstr "No options in this category."
 
-#: workflows/templates/workflows/form_builder.html:583
+#: workflows/templates/workflows/form_builder.html:523
 msgid "Optionen speichern"
 msgstr "Save options"
 
-#: workflows/templates/workflows/form_builder.html:594
+#: workflows/templates/workflows/form_builder.html:534
 msgid "Feldtexte verwalten"
 msgstr "Manage field text"
 
-#: workflows/templates/workflows/form_builder.html:595
+#: workflows/templates/workflows/form_builder.html:535
 msgid "Überschreiben Sie Labels und Hilfetexte pro Feld."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:601
+#: workflows/templates/workflows/form_builder.html:541
 #, fuzzy
 #| msgid "Abschnitt"
 msgid "Feldtext-Abschnitte"
 msgstr "Section"
 
-#: workflows/templates/workflows/form_builder.html:626
+#: workflows/templates/workflows/form_builder.html:566
 msgid "Fallback: Standardlabel"
 msgstr "Fallback: default label"
 
-#: workflows/templates/workflows/form_builder.html:630
+#: workflows/templates/workflows/form_builder.html:570
 msgid "English label"
 msgstr "English label"
 
-#: workflows/templates/workflows/form_builder.html:633
-#: workflows/templates/workflows/form_builder.html:798
-#: workflows/templates/workflows/form_builder.html:891
+#: workflows/templates/workflows/form_builder.html:573
+#: workflows/templates/workflows/form_builder.html:738
+#: workflows/templates/workflows/form_builder.html:836
 msgid "Hilfetext (DE)"
 msgstr "Help text (DE)"
 
-#: workflows/templates/workflows/form_builder.html:634
+#: workflows/templates/workflows/form_builder.html:574
 msgid "Optionaler Hilfetext"
 msgstr "Optional help text"
 
-#: workflows/templates/workflows/form_builder.html:637
-#: workflows/templates/workflows/form_builder.html:802
-#: workflows/templates/workflows/form_builder.html:895
+#: workflows/templates/workflows/form_builder.html:577
+#: workflows/templates/workflows/form_builder.html:742
+#: workflows/templates/workflows/form_builder.html:840
 msgid "Hilfetext (EN)"
 msgstr "Help text (EN)"
 
-#: workflows/templates/workflows/form_builder.html:638
+#: workflows/templates/workflows/form_builder.html:578
 msgid "Optional English help text"
 msgstr "Optional English help text"
 
-#: workflows/templates/workflows/form_builder.html:643
+#: workflows/templates/workflows/form_builder.html:583
 msgid "Keine Feldkonfigurationen verfügbar."
 msgstr "No field configurations available."
 
-#: workflows/templates/workflows/form_builder.html:649
+#: workflows/templates/workflows/form_builder.html:589
 msgid "Feldtexte speichern"
 msgstr "Save field text"
 
-#: workflows/templates/workflows/form_builder.html:661
+#: workflows/templates/workflows/form_builder.html:601
 msgid "Erweitern Sie den Workflow um eigene inhaltliche Blöcke."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:672
-#: workflows/templates/workflows/form_builder.html:691
+#: workflows/templates/workflows/form_builder.html:612
+#: workflows/templates/workflows/form_builder.html:631
 #, fuzzy
 #| msgid "Punkt hinzufügen"
 msgid "Abschnitt hinzufügen"
 msgstr "Add item"
 
-#: workflows/templates/workflows/form_builder.html:673
+#: workflows/templates/workflows/form_builder.html:613
 msgid ""
 "Erstellen Sie zusätzliche Bereiche für deployment-spezifische Informationen."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:678
-#: workflows/templates/workflows/form_builder.html:719
+#: workflows/templates/workflows/form_builder.html:618
+#: workflows/templates/workflows/form_builder.html:659
 #, fuzzy
 #| msgid "Label (DE)"
 msgid "Titel (DE)"
 msgstr "Label (DE)"
 
-#: workflows/templates/workflows/form_builder.html:682
-#: workflows/templates/workflows/form_builder.html:723
+#: workflows/templates/workflows/form_builder.html:622
+#: workflows/templates/workflows/form_builder.html:663
 #, fuzzy
 #| msgid "Label (EN)"
 msgid "Titel (EN)"
 msgstr "Label (EN)"
 
-#: workflows/templates/workflows/form_builder.html:706
+#: workflows/templates/workflows/form_builder.html:646
 #, fuzzy
 #| msgid "Keine konfigurierten Felder in diesem Schritt."
 msgid "Feld/Felder"
 msgstr "No configured fields in this step."
 
-#: workflows/templates/workflows/form_builder.html:714
+#: workflows/templates/workflows/form_builder.html:654
 #, python-format
 msgid ""
 "Eigenen Abschnitt wirklich löschen? %(count)s zugehörige eigene Felder "
 "werden ebenfalls entfernt."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:733
+#: workflows/templates/workflows/form_builder.html:673
 #, fuzzy
 #| msgid "Keine geplanten Welcome E-Mails vorhanden."
 msgid "Keine eigenen Abschnitte vorhanden."
 msgstr "No scheduled welcome emails available."
 
-#: workflows/templates/workflows/form_builder.html:737
+#: workflows/templates/workflows/form_builder.html:677
 #, fuzzy
 #| msgid "Regeln speichern"
 msgid "Abschnitte speichern"
 msgstr "Save rules"
 
-#: workflows/templates/workflows/form_builder.html:749
+#: workflows/templates/workflows/form_builder.html:689
 msgid ""
 "Erstellen Sie zusätzliche Eingaben innerhalb bestehender oder eigener "
 "Abschnitte."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:760
+#: workflows/templates/workflows/form_builder.html:700
 #, fuzzy
 #| msgid "Neue Regel hinzufügen"
 msgid "Feld hinzufügen"
 msgstr "Add new rule"
 
-#: workflows/templates/workflows/form_builder.html:761
+#: workflows/templates/workflows/form_builder.html:701
 msgid ""
 "Erstellen Sie zusätzliche Eingaben innerhalb eines bestehenden oder eigenen "
 "Abschnitts."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:774
-#: workflows/templates/workflows/form_builder.html:863
+#: workflows/templates/workflows/form_builder.html:714
+#: workflows/templates/workflows/form_builder.html:808
 #: workflows/templates/workflows/intro_builder.html:29
 #: workflows/templates/workflows/intro_builder.html:59
 msgid "Abschnitt"
 msgstr "Section"
 
-#: workflows/templates/workflows/form_builder.html:795
+#: workflows/templates/workflows/form_builder.html:735
 #, fuzzy
 #| msgid "Pflicht"
 msgid "Pflichtfeld"
 msgstr "Required"
 
-#: workflows/templates/workflows/form_builder.html:806
-#: workflows/templates/workflows/form_builder.html:899
+#: workflows/templates/workflows/form_builder.html:746
+#: workflows/templates/workflows/form_builder.html:844
 #, fuzzy
 #| msgid "Aktion"
 msgid "Optionen (DE)"
 msgstr "Action"
 
-#: workflows/templates/workflows/form_builder.html:807
+#: workflows/templates/workflows/form_builder.html:747
 msgid "Eine Option pro Zeile, optional: wert|Label"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:810
-#: workflows/templates/workflows/form_builder.html:903
+#: workflows/templates/workflows/form_builder.html:750
+#: workflows/templates/workflows/form_builder.html:848
 #, fuzzy
 #| msgid "Aktion"
 msgid "Optionen (EN)"
 msgstr "Action"
 
-#: workflows/templates/workflows/form_builder.html:811
+#: workflows/templates/workflows/form_builder.html:751
 msgid "Eine Option pro Zeile, optional: value|Label"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:815
+#: workflows/templates/workflows/form_builder.html:755
 #, fuzzy
 #| msgid "Neue Regel hinzufügen"
 msgid "Eigenes Feld hinzufügen"
 msgstr "Add new rule"
 
-#: workflows/templates/workflows/form_builder.html:822
+#: workflows/templates/workflows/form_builder.html:762
 #, fuzzy
 #| msgid "Feldtexte speichern"
 msgid "Eigene Feld-Abschnitte"
 msgstr "Save field text"
 
-#: workflows/templates/workflows/form_builder.html:859
+#: workflows/templates/workflows/form_builder.html:804
 #, fuzzy
 #| msgid "Option wirklich löschen?"
 msgid "Eigenes Feld wirklich löschen?"
 msgstr "Delete this option?"
 
-#: workflows/templates/workflows/form_builder.html:909
+#: workflows/templates/workflows/form_builder.html:854
 #, fuzzy
 #| msgid "Keine geplanten Welcome E-Mails vorhanden."
 msgid "Keine eigenen Felder vorhanden."
 msgstr "No scheduled welcome emails available."
 
-#: workflows/templates/workflows/form_builder.html:917
+#: workflows/templates/workflows/form_builder.html:862
 #, fuzzy
 #| msgid "Feldtexte speichern"
 msgid "Eigene Felder speichern"
 msgstr "Save field text"
 
-#: workflows/templates/workflows/form_builder.html:928 workflows/views.py:3029
+#: workflows/templates/workflows/form_builder.html:873 workflows/views.py:3029
 msgid "Live-Vorschau"
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:929
+#: workflows/templates/workflows/form_builder.html:874
 msgid "So wirkt die aktuelle Struktur für das aktive Formular."
 msgstr ""
 
-#: workflows/templates/workflows/form_builder.html:943
+#: workflows/templates/workflows/form_builder.html:888
 msgid "Keine sichtbaren Felder."
 msgstr ""
 
@@ -5764,6 +5770,28 @@ msgstr ""
 msgid "Alle Abschnitte"
 msgstr "Section"
 
+#: workflows/views.py:3501
+#, fuzzy
+#| msgid "Ungültige Rolle."
+msgid "Ungültige JSON-Daten."
+msgstr "Invalid role."
+
+#: workflows/views.py:3505
+#, fuzzy
+#| msgid "Ungültige Rolle."
+msgid "Ungültiger Formulartyp."
+msgstr "Invalid role."
+
+#: workflows/views.py:3510
+msgid "Spalten-Daten fehlen."
+msgstr ""
+
+#: workflows/views.py:3527
+#, fuzzy, python-format
+#| msgid "Ungültige Rolle."
+msgid "Ungültige Spalte: %(column)s"
+msgstr "Invalid role."
+
 #: workflows/views.py:3585
 #, fuzzy
 #| msgid "SMTP-Test starten"
@@ -5808,6 +5836,41 @@ msgstr "Run Nextcloud test"
 msgid "Der Testupload nach Nextcloud ist fehlgeschlagen."
 msgstr ""
 
+#, fuzzy
+#~| msgid "Abschnitt"
+#~ msgid "Aktive Ansicht"
+#~ msgstr "Section"
+
+#, fuzzy
+#~| msgid "Testmodus"
+#~ msgid "Arbeitskontext"
+#~ msgstr "Test mode"
+
+#, fuzzy
+#~| msgid "Testmodus"
+#~ msgid "Arbeitsmodus"
+#~ msgstr "Test mode"
+
+#, fuzzy
+#~| msgid "Letzte Anmeldung"
+#~ msgid "Direkte Anordnung"
+#~ msgstr "Last login"
+
+#, fuzzy
+#~| msgid "Abschnitt"
+#~ msgid "aktive Abschnitte"
+#~ msgstr "Section"
+
+#, fuzzy
+#~| msgid "Ausgeblendet"
+#~ msgid "ausgeblendete Felder"
+#~ msgstr "Hidden"
+
+#, fuzzy, python-format
+#~| msgid "Keine konfigurierten Felder in diesem Schritt."
+#~ msgid "%(count)s Feld/Felder in diesem Abschnitt."
+#~ msgstr "No configured fields in this step."
+
 #, fuzzy
 #~| msgid "Feld-Bedingung"
 #~ msgid "Keine Bedingung"
diff --git a/backend/workflows/form_builder.py b/backend/workflows/form_builder.py
index 8d6e06b..84c12c1 100644
--- a/backend/workflows/form_builder.py
+++ b/backend/workflows/form_builder.py
@@ -1,7 +1,7 @@
 from collections import OrderedDict
 from django import forms
 from django.utils.text import slugify
-from django.utils.translation import get_language
+from django.utils.translation import get_language, gettext_lazy as _
 
 from .models import FormConditionalRuleConfig, FormCustomFieldConfig, FormCustomSectionConfig, FormFieldConfig, FormSectionConfig
 
@@ -62,15 +62,15 @@ DEFAULT_FIELD_ORDER = {
 ONBOARDING_PAGE_ORDER = ['stammdaten', 'vertrag', 'itsetup', 'abschluss']
 OFFBOARDING_PAGE_ORDER = ['mitarbeitende', 'austritt', 'abschluss']
 ONBOARDING_PAGE_LABELS = {
-    'stammdaten': '1. Stammdaten',
-    'vertrag': '2. Vertrag',
-    'itsetup': '3. IT-Setup',
-    'abschluss': '4. Abschluss',
+    'stammdaten': _('1. Stammdaten'),
+    'vertrag': _('2. Vertrag'),
+    'itsetup': _('3. IT-Setup'),
+    'abschluss': _('4. Abschluss'),
 }
 OFFBOARDING_PAGE_LABELS = {
-    'mitarbeitende': '1. Mitarbeitende',
-    'austritt': '2. Austritt',
-    'abschluss': '3. Abschluss',
+    'mitarbeitende': _('1. Mitarbeitende'),
+    'austritt': _('2. Austritt'),
+    'abschluss': _('3. Abschluss'),
 }
 CORE_SECTION_LABELS = {
     'onboarding': ONBOARDING_PAGE_LABELS,
@@ -500,7 +500,7 @@ def apply_form_field_config(form_type: str, form) -> None:
 FORM_PRESETS = {
     'onboarding': {
         'standard': {
-            'label': 'Standard',
+            'label': _('Standard'),
             'sections': {
                 'stammdaten': True,
                 'vertrag': True,
@@ -510,7 +510,7 @@ FORM_PRESETS = {
             'fields': {},
         },
         'lean': {
-            'label': 'Lean',
+            'label': _('Lean'),
             'sections': {
                 'stammdaten': True,
                 'vertrag': True,
@@ -531,7 +531,7 @@ FORM_PRESETS = {
             },
         },
         'it_heavy': {
-            'label': 'IT-heavy',
+            'label': _('IT-heavy'),
             'sections': {
                 'stammdaten': True,
                 'vertrag': True,
@@ -553,7 +553,7 @@ FORM_PRESETS = {
     },
     'offboarding': {
         'standard': {
-            'label': 'Standard',
+            'label': _('Standard'),
             'sections': {
                 'mitarbeitende': True,
                 'austritt': True,
@@ -562,7 +562,7 @@ FORM_PRESETS = {
             'fields': {},
         },
         'lean': {
-            'label': 'Lean',
+            'label': _('Lean'),
             'sections': {
                 'mitarbeitende': True,
                 'austritt': True,
@@ -575,7 +575,7 @@ FORM_PRESETS = {
             },
         },
         'hr_heavy': {
-            'label': 'HR-heavy',
+            'label': _('HR-heavy'),
             'sections': {
                 'mitarbeitende': True,
                 'austritt': True,
diff --git a/backend/workflows/static/workflows/css/account.css b/backend/workflows/static/workflows/css/account.css
index 648f1b0..dd7fa18 100644
--- a/backend/workflows/static/workflows/css/account.css
+++ b/backend/workflows/static/workflows/css/account.css
@@ -1,23 +1,3 @@
-body {
-  margin: 0;
-  min-height: 100vh;
-  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  background:
-    radial-gradient(76% 96% at 8% 10%, rgba(0, 0, 120, 0.12), rgba(0, 0, 120, 0)),
-    radial-gradient(64% 86% at 92% 88%, rgba(163, 32, 32, 0.1), rgba(163, 32, 32, 0)),
-    linear-gradient(160deg, #eef3ff 0%, #f8fbff 52%, #edf4ff 100%);
-  padding: 24px;
-}
-
-.shell {
-  background: rgba(255, 255, 255, 0.78);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(217, 227, 238, 0.9);
-  border-radius: 28px;
-  box-shadow: 0 22px 48px rgba(18, 34, 56, 0.14);
-  overflow: hidden;
-}
-
 .account-shell-body {
   padding: 24px;
   background:
diff --git a/backend/workflows/static/workflows/css/admin_tools.css b/backend/workflows/static/workflows/css/admin_tools.css
index cf2d4af..92d2c72 100644
--- a/backend/workflows/static/workflows/css/admin_tools.css
+++ b/backend/workflows/static/workflows/css/admin_tools.css
@@ -1,11 +1,7 @@
-body { margin: 0; font-family: Arial, sans-serif; background: #f4f8ff; color: #0f172a; padding: 20px; }
 [hidden] { display: none !important; }
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-.shell { max-width: 1100px; margin: 0 auto; background: #fff; border: 1px solid #d8e3f0; border-radius: 14px; padding: 16px; }
-h1 { margin: 12px 0 6px; color: #000078; }
-.sub { margin: 0 0 12px; color: #54657c; }
 .app-messages { margin-bottom: 12px; }
-.card { border: 1px solid #d8e3f0; border-radius: 12px; background: #fbfdff; padding: 12px; margin-bottom: 14px; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
+.card { padding: 14px; margin-bottom: 14px; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
 .grid { display: grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 10px; }
 .branding-sections { display: grid; gap: 14px; }
 .branding-block { border: 1px solid #dce5f1; border-radius: 16px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.94)); padding: 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.92); }
diff --git a/backend/workflows/static/workflows/css/app_chrome.css b/backend/workflows/static/workflows/css/app_chrome.css
index f1d184f..48271f0 100644
--- a/backend/workflows/static/workflows/css/app_chrome.css
+++ b/backend/workflows/static/workflows/css/app_chrome.css
@@ -1,13 +1,13 @@
 :root {
-  --app-shell-width: 1380px;
-  --app-line: #d9e3ee;
-  --app-brand-blue: #000078;
-  --app-panel: rgba(255, 255, 255, 0.9);
-  --app-shadow: 0 22px 48px rgba(18, 34, 56, 0.14);
-  --motion-fast: 160ms;
-  --motion-base: 200ms;
+  --app-shell-width: var(--ds-shell-width);
+  --app-line: var(--ds-line);
+  --app-brand-blue: var(--ds-brand);
+  --app-panel: var(--ds-surface);
+  --app-shadow: var(--ds-shadow-shell);
+  --motion-fast: var(--ds-motion-fast);
+  --motion-base: var(--ds-motion-base);
   --motion-slow: 260ms;
-  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --motion-ease: var(--ds-ease);
 }
 
 .app-header {
diff --git a/backend/workflows/static/workflows/css/buttons.css b/backend/workflows/static/workflows/css/buttons.css
index be716fb..a8f641f 100644
--- a/backend/workflows/static/workflows/css/buttons.css
+++ b/backend/workflows/static/workflows/css/buttons.css
@@ -1,12 +1,3 @@
-:root {
-  --btn-primary-bg: #000078;
-  --btn-primary-border: #000078;
-  --btn-primary-text: #ffffff;
-  --btn-secondary-bg: #ffffff;
-  --btn-secondary-border: #c7d3e0;
-  --btn-secondary-text: #000078;
-}
-
 .btn {
   display: inline-flex;
   align-items: center;
@@ -44,9 +35,9 @@
 }
 
 .btn-primary {
-  background: var(--btn-primary-bg);
-  border-color: var(--btn-primary-border);
-  color: var(--btn-primary-text);
+  background: var(--ds-brand);
+  border-color: var(--ds-brand);
+  color: #fff;
 }
 
 .btn-primary:hover:not(:disabled) {
@@ -56,9 +47,9 @@
 }
 
 .btn-secondary {
-  background: var(--btn-secondary-bg);
-  border-color: var(--btn-secondary-border);
-  color: var(--btn-secondary-text);
+  background: rgba(255, 255, 255, 0.96);
+  border-color: var(--ds-line-strong);
+  color: var(--ds-brand);
 }
 
 .btn-secondary:hover:not(:disabled) {
diff --git a/backend/workflows/static/workflows/css/design_system.css b/backend/workflows/static/workflows/css/design_system.css
new file mode 100644
index 0000000..8d380d5
--- /dev/null
+++ b/backend/workflows/static/workflows/css/design_system.css
@@ -0,0 +1,288 @@
+:root {
+  --ds-shell-width: 1380px;
+  --ds-font-sans: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  --ds-ink: #152338;
+  --ds-ink-strong: #0f1b2d;
+  --ds-muted: #607086;
+  --ds-line: #d8e2ef;
+  --ds-line-strong: #c8d5e5;
+  --ds-surface: rgba(255, 255, 255, 0.88);
+  --ds-surface-strong: rgba(255, 255, 255, 0.96);
+  --ds-surface-soft: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,250,255,0.95));
+  --ds-surface-soft-blue: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(247,250,255,0.96));
+  --ds-brand: #000078;
+  --ds-brand-strong: #173f8d;
+  --ds-accent: #1f4fd6;
+  --ds-danger: #a32020;
+  --ds-success: #1f7a3f;
+  --ds-warning: #9a6400;
+  --ds-radius-shell: 28px;
+  --ds-radius-xl: 24px;
+  --ds-radius-lg: 20px;
+  --ds-radius-md: 16px;
+  --ds-radius-sm: 12px;
+  --ds-shadow-shell: 0 22px 56px rgba(18, 34, 56, 0.14);
+  --ds-shadow-card: 0 14px 28px rgba(15, 23, 42, 0.06);
+  --ds-shadow-hover: 0 18px 32px rgba(15, 23, 42, 0.08);
+  --ds-motion-fast: 160ms;
+  --ds-motion-base: 220ms;
+  --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  padding: 24px;
+  font-family: var(--ds-font-sans);
+  color: var(--ds-ink);
+  background:
+    radial-gradient(72% 90% at 8% 8%, rgba(0, 0, 120, 0.12), rgba(0, 0, 120, 0)),
+    radial-gradient(60% 82% at 92% 88%, rgba(163, 32, 32, 0.08), rgba(163, 32, 32, 0)),
+    linear-gradient(160deg, #eef3ff 0%, #f9fbff 48%, #edf4ff 100%);
+}
+
+.shell {
+  width: min(var(--ds-shell-width), 100%);
+  margin: 0 auto;
+  background: rgba(255, 255, 255, 0.78);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(216, 226, 239, 0.9);
+  border-radius: var(--ds-radius-shell);
+  box-shadow: var(--ds-shadow-shell);
+  overflow: hidden;
+}
+
+.page-stack {
+  display: grid;
+  gap: 18px;
+  padding: 24px;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.page-header-copy {
+  min-width: 0;
+  max-width: 760px;
+}
+
+.page-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0 12px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 120, 0.12);
+  background: rgba(0, 0, 120, 0.05);
+  color: var(--ds-brand);
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.page-header h1,
+.page-title {
+  margin: 10px 0 0;
+  color: var(--ds-ink-strong);
+  font-size: clamp(30px, 4vw, 42px);
+  line-height: 1.02;
+  letter-spacing: -0.04em;
+}
+
+.page-subtitle,
+.sub {
+  margin: 8px 0 0;
+  color: var(--ds-muted);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.page-section,
+.card,
+.surface-card {
+  border: 1px solid rgba(216, 226, 239, 0.94);
+  border-radius: var(--ds-radius-lg);
+  background:
+    radial-gradient(120% 120% at 100% 0%, rgba(31, 79, 214, 0.05), rgba(31, 79, 214, 0)),
+    var(--ds-surface-soft);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), var(--ds-shadow-card);
+}
+
+.page-section {
+  padding: 18px;
+}
+
+.page-section-head,
+.surface-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 14px;
+  flex-wrap: wrap;
+  margin-bottom: 14px;
+}
+
+.page-section-head h2,
+.surface-head h2 {
+  margin: 0;
+  color: #17345e;
+  font-size: 20px;
+}
+
+.page-section-head p,
+.surface-head p {
+  margin: 4px 0 0;
+  color: var(--ds-muted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.surface-grid {
+  display: grid;
+  gap: 14px;
+}
+
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.metric-card {
+  border: 1px solid var(--ds-line);
+  border-radius: var(--ds-radius-md);
+  background: rgba(255,255,255,0.86);
+  padding: 14px;
+  display: grid;
+  gap: 6px;
+}
+
+.metric-card strong {
+  color: #17345e;
+  font-size: 24px;
+  line-height: 1.05;
+}
+
+.metric-card span,
+.mini,
+.hint {
+  color: var(--ds-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.app-table-wrap,
+.table-wrap,
+.option-table-wrap {
+  overflow-x: auto;
+}
+
+.app-table-shell {
+  border: 1px solid rgba(216, 226, 239, 0.94);
+  border-radius: var(--ds-radius-md);
+  background: rgba(255,255,255,0.86);
+  overflow: hidden;
+}
+
+.app-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.app-table th,
+.app-table td,
+table th,
+table td {
+  border: 1px solid #dce5f1;
+  padding: 10px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.app-table th,
+table th {
+  background: #f6f9ff;
+  color: #334155;
+}
+
+.app-table tr:last-child td {
+  border-bottom: 0;
+}
+
+.table-actions,
+.inline-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.inline-action-form {
+  display: inline;
+}
+
+.inline-flex-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin: 0;
+}
+
+.u-mt-12 {
+  margin-top: 12px;
+}
+
+.u-mt-16 {
+  margin-top: 16px;
+}
+
+.u-align-end {
+  align-items: end;
+}
+
+.audit-request-list {
+  margin: 6px 0 10px 18px;
+  padding: 0;
+}
+
+.status-note-error {
+  margin-top: 8px;
+  color: #8e1e1e;
+}
+
+.status-note-error + .status-note-error {
+  margin-top: 6px;
+}
+
+@media (max-width: 900px) {
+  body {
+    padding: 18px;
+  }
+
+  .page-stack {
+    padding: 18px;
+  }
+}
+
+@media (max-width: 760px) {
+  body {
+    padding: 12px;
+  }
+
+  .shell {
+    border-radius: 22px;
+  }
+
+  .page-stack {
+    padding: 16px;
+  }
+}
diff --git a/backend/workflows/static/workflows/css/docs_pages.css b/backend/workflows/static/workflows/css/docs_pages.css
index 02b429d..7c8cfdb 100644
--- a/backend/workflows/static/workflows/css/docs_pages.css
+++ b/backend/workflows/static/workflows/css/docs_pages.css
@@ -1,5 +1,4 @@
-body { margin: 0; font-family: Arial, sans-serif; background: #f4f8ff; color: #1b2b43; padding: 20px; }
-.shell { max-width: 1120px; margin: 0 auto; background: #fff; border: 1px solid #d7e0ea; border-radius: 14px; padding: 18px; }
+.page-stack { width: min(1280px, 100%); margin: 0 auto; }
 .brand-logo { width: 190px; max-width: 100%; height: auto; margin: 0 0 10px; display: block; }
 .top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
 h1 { margin: 0; color: #000078; font-size: 30px; }
@@ -14,8 +13,8 @@ code { background: #f1f5fb; border: 1px solid #dce6f3; border-radius: 6px; paddi
 pre { background: #f7fbff; border: 1px solid #dce6f3; border-radius: 10px; padding: 10px; overflow-x: auto; }
 .box { border: 1px solid #d7e0ea; border-radius: 10px; padding: 10px; background: #fcfdff; margin: 8px 0 12px; }
 .note { border-left: 4px solid #000078; padding: 8px 10px; background: #f4f8ff; margin: 10px 0; }
-.grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px; }
-.card { border: 1px solid #d7e0ea; border-radius: 14px; background: #fcfdff; padding: 16px; }
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: stretch; }
+.card { border: 1px solid #d7e0ea; border-radius: 14px; background: #fcfdff; padding: 18px; height: 100%; }
 .eyebrow { display: inline-block; padding: 5px 10px; border-radius: 999px; background: #eef4ff; color: #244a8f; border: 1px solid #d5e2f9; font-size: 12px; font-weight: 700; margin-bottom: 10px; }
 p { margin: 0 0 14px; color: #5f6f85; }
 .actions { display: flex; gap: 8px; flex-wrap: wrap; }
diff --git a/backend/workflows/static/workflows/css/form_builder.css b/backend/workflows/static/workflows/css/form_builder.css
index 9a178e5..d259085 100644
--- a/backend/workflows/static/workflows/css/form_builder.css
+++ b/backend/workflows/static/workflows/css/form_builder.css
@@ -1,28 +1,9 @@
-body {
-  margin: 0;
-  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
-  background:
-    radial-gradient(circle at top right, rgba(0, 120, 255, 0.08), transparent 28%),
-    linear-gradient(180deg, #eef4fb 0%, #f7f9fc 100%);
-  color: #142033;
-}
-
-.shell {
-  width: min(1320px, 94%);
-  margin: 20px auto 32px;
-  background: rgba(255, 255, 255, 0.92);
-  border: 1px solid rgba(191, 204, 222, 0.8);
-  border-radius: 20px;
-  padding: 20px;
-  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.08);
-  backdrop-filter: blur(12px);
-}
-
 .builder-workspace {
   display: grid;
   grid-template-columns: 280px minmax(0, 1fr);
   gap: 18px;
   align-items: start;
+  padding: 24px;
 }
 
 .builder-sidebar {
diff --git a/backend/workflows/static/workflows/css/home.css b/backend/workflows/static/workflows/css/home.css
index af00405..f60f832 100644
--- a/backend/workflows/static/workflows/css/home.css
+++ b/backend/workflows/static/workflows/css/home.css
@@ -1,9 +1,9 @@
 :root {
-      --brand-blue: #000078;
+      --brand-blue: var(--ds-brand);
       --brand-red: #8c1d1d;
-      --ink: #102039;
-      --muted: #5f6f85;
-      --line: #d8e1ee;
+      --ink: var(--ds-ink);
+      --muted: var(--ds-muted);
+      --line: var(--ds-line);
       --panel: #ffffff;
       --bg-soft: #eff4ff;
       --ok-bg: #effaf2;
@@ -12,68 +12,6 @@
       --warn-ink: #8a4f00;
     }
 
-    * { box-sizing: border-box; }
-
-    body {
-      margin: 0;
-      font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-      color: var(--ink);
-      background:
-        radial-gradient(80% 120% at 85% 8%, rgba(0, 0, 120, 0.12), rgba(0, 0, 120, 0)),
-        radial-gradient(70% 90% at 8% 92%, rgba(140, 29, 29, 0.10), rgba(140, 29, 29, 0)),
-        linear-gradient(165deg, #eef3ff, #f7f9ff 48%, #f0f5ff);
-      min-height: 100vh;
-      padding: 24px;
-    }
-
-    .shell {
-      width: min(1380px, 100%);
-      margin: 0 auto;
-      background: var(--panel);
-      border: 1px solid var(--line);
-      border-radius: 20px;
-      box-shadow: 0 20px 44px rgba(16, 32, 57, 0.13);
-      overflow: hidden;
-    }
-
-    .topbar {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      gap: 16px;
-      padding: 18px 22px;
-      border-bottom: 1px solid var(--line);
-      background: #fff;
-    }
-
-    .brand-wrap {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      flex: 0 0 auto;
-      min-width: 0;
-    }
-
-    .brand-logo {
-      width: 210px;
-      max-width: 100%;
-      height: auto;
-      display: block;
-      margin: 0;
-      flex: 0 0 auto;
-    }
-
-    .quick-actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      align-items: center;
-    }
-    .lang-switch { display:flex; gap:6px; }
-    .lang-btn { border:1px solid var(--line); background:#f8fbff; color:#1f3a5f; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; }
-    .lang-btn.active { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
-
     .hero {
       padding: 24px;
       border-bottom: 1px solid var(--line);
diff --git a/backend/workflows/static/workflows/css/login.css b/backend/workflows/static/workflows/css/login.css
index 78a976a..5ea0f3b 100644
--- a/backend/workflows/static/workflows/css/login.css
+++ b/backend/workflows/static/workflows/css/login.css
@@ -1,23 +1,3 @@
-body {
-  margin: 0;
-  min-height: 100vh;
-  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  background:
-    radial-gradient(70% 90% at 8% 8%, rgba(0, 0, 120, 0.14), rgba(0, 0, 120, 0)),
-    radial-gradient(60% 85% at 92% 88%, rgba(163, 32, 32, 0.12), rgba(163, 32, 32, 0)),
-    linear-gradient(160deg, #eef3ff 0%, #f9fbff 48%, #edf4ff 100%);
-  padding: 24px;
-}
-
-.shell {
-  background: rgba(255, 255, 255, 0.78);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(217, 227, 238, 0.9);
-  border-radius: 28px;
-  box-shadow: 0 22px 48px rgba(18, 34, 56, 0.14);
-  overflow: hidden;
-}
-
 .login-shell-body {
   padding: 24px;
   background:
diff --git a/backend/workflows/static/workflows/css/offboarding_form.css b/backend/workflows/static/workflows/css/offboarding_form.css
index 3c2a507..f019a41 100644
--- a/backend/workflows/static/workflows/css/offboarding_form.css
+++ b/backend/workflows/static/workflows/css/offboarding_form.css
@@ -1,37 +1,286 @@
-body {
-  font-family: "IBM Plex Sans", "Trebuchet MS", "Segoe UI", sans-serif;
-  margin: 24px;
-  color: #1f2937;
-  background:
-    radial-gradient(900px 520px at 8% 0%, #dbe8ff, transparent),
-    radial-gradient(900px 520px at 92% 0%, #eef4ff, transparent),
-    #edf2fb;
+:root {
+  --off-ink: #182233;
+  --off-muted: #5e6f85;
+  --off-brand: #000078;
+  --off-brand-soft: #eef1ff;
+  --off-line: #d7dfeb;
+  --off-card: #ffffff;
+}
+
+.offboarding-shell-body {
+  display: grid;
+  grid-template-columns: 290px 1fr;
+  gap: 16px;
+  padding: 18px;
+}
+
+.offboarding-panel,
+.offboarding-main,
+.offboarding-search-card,
+.offboarding-section-card {
+  background: var(--off-card);
+  border: 1px solid var(--off-line);
+  box-shadow: 0 12px 28px rgba(30, 52, 87, 0.08);
+}
+
+.offboarding-panel,
+.offboarding-search-card,
+.offboarding-section-card {
+  border-radius: 16px;
+}
+
+.offboarding-panel {
+  padding: 18px;
+  height: fit-content;
+  position: sticky;
+  top: 20px;
+}
+
+.offboarding-main {
+  padding: 22px;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
+}
+
+.offboarding-panel h1 {
+  margin: 0 0 8px;
+  font-size: 28px;
+  letter-spacing: -0.02em;
+  color: var(--off-ink);
+}
+
+.offboarding-sub {
+  margin: 0 0 16px;
+  color: var(--off-muted);
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.offboarding-step-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 8px;
+}
+
+.offboarding-step-item {
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  border: 1px solid #d8e0f4;
+  border-radius: 12px;
+  padding: 10px;
+  background: linear-gradient(160deg, #f8faff, #fcfdff);
+}
+
+.offboarding-dot {
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--off-brand-soft);
+  border: 1px solid #c4cdf7;
+  color: var(--off-brand);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.offboarding-step-title {
+  font-weight: 700;
+  color: #1d2c68;
+  margin-bottom: 2px;
+}
+
+.offboarding-step-sub {
+  font-size: 12px;
+  color: var(--off-muted);
+}
+
+.offboarding-main form {
+  margin: 0;
+}
+
+.offboarding-search-card {
+  padding: 14px;
+  margin-bottom: 16px;
+  background: linear-gradient(160deg, #ffffff, #fbfcff);
+}
+
+.offboarding-section-card {
+  overflow: hidden;
+  background: linear-gradient(160deg, #ffffff, #fbfcff);
+}
+
+.offboarding-sections {
+  display: grid;
+  gap: 14px;
+  margin-bottom: 14px;
+}
+
+.offboarding-section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border-bottom: 1px solid #d5e2f9;
+  background: #eef4ff;
+}
+
+.offboarding-search-head {
+  margin: -14px -14px 14px;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+
+.offboarding-section-head h2 {
+  margin: 0;
+  font-size: 20px;
+  color: #1f376b;
+}
+
+.offboarding-section-head p {
+  margin: 4px 0 0;
+  color: #5e7088;
+  font-size: 13px;
+}
+
+.offboarding-section-card .grid {
+  padding: 16px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+.field {
+  margin-bottom: 10px;
+}
+
+.field-full {
+  grid-column: 1 / -1;
+}
+
+label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+input,
+textarea,
+select {
+  width: 100%;
+  min-height: 44px;
+  padding: 9px 11px;
+  box-sizing: border-box;
+  border: 1px solid #d4dbf7;
+  border-radius: 10px;
+  background: #fff;
+}
+
+textarea {
+  min-height: 120px;
+  resize: vertical;
+}
+
+.inline-check {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid #d7e0ea;
+  border-radius: 14px;
+  background: #ffffff;
+}
+
+.inline-check input[type="checkbox"] {
+  width: auto;
+  min-height: 0;
+  margin-top: 2px;
+}
+
+.hint {
+  color: #64748b;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.results {
+  margin-top: 10px;
+}
+
+.results a {
+  display: inline-block;
+  margin: 4px 8px 4px 0;
+  padding: 6px 8px;
+  border: 1px solid #d4dbf7;
+  border-radius: 8px;
+  text-decoration: none;
+  color: #000078;
+  background: #f7f8ff;
+}
+
+.offboarding-prefill-note {
+  margin-top: 10px;
+  color: #2563eb;
+}
+
+.errorlist {
+  color: #b91c1c;
+  margin: 4px 0;
+}
+
+.popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.38);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.popup-backdrop.show {
+  display: flex;
+}
+
+.popup {
+  background: #fff;
+  border: 1px solid #d8e0ec;
+  border-radius: 12px;
+  padding: 18px;
+  width: min(460px, calc(100% - 28px));
+  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.25);
+}
+
+.popup h3 {
+  margin: 0 0 8px;
+  color: #000078;
+}
+
+.popup p {
+  margin: 0 0 14px;
+  color: #475569;
+}
+
+@media (max-width: 980px) {
+  .offboarding-shell-body {
+    grid-template-columns: 1fr;
+  }
+
+  .offboarding-panel {
+    position: static;
+  }
+}
+
+@media (max-width: 820px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
 }
-.wrap { width: min(var(--app-shell-width), 100%); margin: 0 auto; background: #ffffff; border: 1px solid #d8e1ee; border-radius: 20px; box-shadow: 0 20px 44px rgba(16, 32, 57, 0.13); overflow: hidden; }
-.wrap-body { padding: 18px; }
-.brand-logo { width: 180px; max-width: 100%; height: auto; margin: 0 0 10px; display: block; }
-.top-link { margin-bottom: 10px; }
-.card { background: linear-gradient(180deg, #ffffff, #fbfcff); border: 1px solid #d9dcf3; border-radius: 14px; padding: 18px; margin-bottom: 14px; box-shadow: 0 10px 24px rgba(0, 0, 120, 0.08); }
-.wrap-body .card:last-child { margin-bottom: 0; }
-h1 { margin-top: 0; color: #000078; }
-h2 { margin: 0; color: #17335e; font-size: 18px; }
-.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-.field { margin-bottom: 12px; }
-.field-full { grid-column: 1 / -1; }
-label { display: block; font-weight: 600; margin-bottom: 6px; }
-input, textarea { width: 100%; min-height: 44px; padding: 9px 11px; box-sizing: border-box; border: 1px solid #d4dbf7; border-radius: 10px; background: #fff; }
-textarea { min-height: 120px; resize: vertical; }
-.hint { color: #64748b; font-size: 12px; margin-top: 4px; }
-.offboarding-sections { display: grid; gap: 14px; margin-bottom: 14px; }
-.offboarding-section-card { border: 1px solid #dbe5f1; border-radius: 14px; background: linear-gradient(180deg, #f9fbff, #ffffff); overflow: hidden; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05); }
-.offboarding-section-head { padding: 14px 16px; border-bottom: 1px solid #e2e8f4; background: #f2f7ff; }
-.offboarding-section-head p { margin: 4px 0 0; color: #5f7089; font-size: 13px; }
-.offboarding-section-card .grid { padding: 16px; }
-.results a { display: inline-block; margin: 4px 8px 4px 0; padding: 6px 8px; border: 1px solid #d4dbf7; border-radius: 6px; text-decoration: none; color: #000078; background: #f7f8ff; }
-.errorlist { color: #b91c1c; margin: 4px 0; }
-.popup-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.38); display: none; align-items: center; justify-content: center; z-index: 1000; }
-.popup-backdrop.show { display: flex; }
-.popup { background: #fff; border: 1px solid #d8e0ec; border-radius: 12px; padding: 18px; width: min(460px, calc(100% - 28px)); box-shadow: 0 18px 40px rgba(2, 6, 23, 0.25); }
-.popup h3 { margin: 0 0 8px; color: #000078; }
-.popup p { margin: 0 0 14px; color: #475569; }
-@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } }
diff --git a/backend/workflows/static/workflows/css/onboarding_form.css b/backend/workflows/static/workflows/css/onboarding_form.css
index 9030da4..f569e6c 100644
--- a/backend/workflows/static/workflows/css/onboarding_form.css
+++ b/backend/workflows/static/workflows/css/onboarding_form.css
@@ -12,28 +12,6 @@
   --card: #ffffff;
 }
 
-body {
-  margin: 0;
-  font-family: "IBM Plex Sans", "Trebuchet MS", "Segoe UI", sans-serif;
-  color: var(--ink);
-  background:
-    radial-gradient(980px 540px at 12% 0%, var(--bg-a), transparent),
-    radial-gradient(900px 520px at 88% 0%, var(--bg-b), transparent),
-    #edf2fb;
-  min-height: 100vh;
-  padding: 26px 14px;
-}
-
-.shell {
-  width: min(var(--app-shell-width), 100%);
-  margin: 0 auto;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 20px;
-  box-shadow: 0 20px 44px rgba(16, 32, 57, 0.13);
-  overflow: hidden;
-}
-
 .shell-body {
   display: grid;
   grid-template-columns: 290px 1fr;
diff --git a/backend/workflows/static/workflows/css/release_checklist.css b/backend/workflows/static/workflows/css/release_checklist.css
index 5011299..2e2ce5f 100644
--- a/backend/workflows/static/workflows/css/release_checklist.css
+++ b/backend/workflows/static/workflows/css/release_checklist.css
@@ -1,5 +1,4 @@
-body { margin: 0; font-family: Arial, sans-serif; background: #f4f8ff; color: #1b2b43; padding: 20px; }
-    .shell { max-width: 1120px; margin: 0 auto; }
+    .page-stack { width: min(1280px, 100%); margin: 0 auto; }
     .brand-logo { width: 190px; max-width: 100%; height: auto; margin: 0 0 10px; display: block; }
     .hero, .panel { background: #fff; border: 1px solid #d7e0ea; border-radius: 16px; box-shadow: 0 20px 40px rgba(17, 58, 116, 0.08); }
     .hero { padding: 20px; margin-bottom: 18px; }
diff --git a/backend/workflows/static/workflows/css/request_timeline.css b/backend/workflows/static/workflows/css/request_timeline.css
new file mode 100644
index 0000000..6f78f1e
--- /dev/null
+++ b/backend/workflows/static/workflows/css/request_timeline.css
@@ -0,0 +1,40 @@
+.timeline-summary-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin-bottom:20px; }
+.timeline-stat { border:1px solid #d9e3f8; border-radius:20px; padding:16px 18px; background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%); box-shadow:0 18px 40px rgba(23,39,90,.08); }
+.timeline-stat label { display:block; margin-bottom:6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7081a5; }
+.timeline-stat strong { display:block; font-size:18px; line-height:1.35; color:#20345f; }
+.timeline-list { position:relative; display:grid; gap:18px; padding-left:28px; }
+.timeline-list::before { content:""; position:absolute; top:6px; bottom:6px; left:11px; width:2px; background:linear-gradient(180deg,#cad8f8 0%,#e8eefc 100%); }
+.timeline-item { position:relative; border:1px solid #d9e3f8; border-radius:20px; padding:18px 20px 18px 22px; background:#fff; box-shadow:0 18px 40px rgba(23,39,90,.08); }
+.timeline-item::before { content:""; position:absolute; top:22px; left:-24px; width:16px; height:16px; border-radius:999px; background:#1e2bb8; box-shadow:0 0 0 4px #eef3ff; }
+.timeline-item[data-kind="document"]::before { background:#1f7a45; }
+.timeline-item[data-kind="audit"]::before { background:#6a5acd; }
+.timeline-item[data-kind="session"]::before { background:#b86b12; }
+.timeline-item[data-kind="email"]::before { background:#c2354e; }
+.timeline-item[data-kind="milestone"]::before { background:#0d7c88; }
+.timeline-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:8px; }
+.timeline-title-wrap { display:grid; gap:8px; }
+.timeline-kind { display:inline-flex; align-items:center; width:max-content; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:#eef3ff; color:#27407a; }
+.timeline-item[data-kind="document"] .timeline-kind { background:#edf8f0; color:#20623c; }
+.timeline-item[data-kind="audit"] .timeline-kind { background:#f2efff; color:#5b49aa; }
+.timeline-item[data-kind="session"] .timeline-kind { background:#fff2df; color:#8a560a; }
+.timeline-item[data-kind="email"] .timeline-kind { background:#ffe8ee; color:#9f2749; }
+.timeline-item[data-kind="milestone"] .timeline-kind { background:#e8fbfd; color:#0e6a72; }
+.timeline-stamp { font-size:13px; color:#6b7a9b; white-space:nowrap; }
+.timeline-title { margin:0; font-size:20px; color:#20345f; }
+.timeline-summary { margin:0; font-size:15px; color:#22324d; line-height:1.55; }
+.timeline-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
+.timeline-chip { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f7faff; border:1px solid #d8e1f5; color:#4d6087; font-size:12px; }
+.timeline-actions { margin-top:14px; }
+.timeline-details { margin-top:14px; padding-top:14px; border-top:1px dashed #d7e0f5; display:grid; gap:8px; }
+.timeline-detail-row { display:grid; grid-template-columns:160px 1fr; gap:12px; font-size:13px; }
+.timeline-detail-row strong { color:#566886; }
+.timeline-detail-list { margin:0; padding-left:18px; color:#4f617f; }
+.timeline-custom-fields { margin:0 0 20px; padding:18px 20px; border:1px solid #d9e3f8; border-radius:20px; background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%); box-shadow:0 18px 40px rgba(23,39,90,.08); }
+.timeline-custom-fields h2 { margin:0 0 14px; font-size:18px; color:#20345f; }
+.timeline-custom-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px 16px; }
+.timeline-custom-item { padding:12px 14px; border:1px solid #d8e1f5; border-radius:16px; background:#fff; }
+.timeline-custom-item strong { display:block; margin-bottom:4px; color:#566886; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
+.timeline-custom-item span { color:#22324d; font-size:14px; line-height:1.45; }
+@media (max-width: 1160px) { .timeline-summary-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
+@media (max-width: 820px) { .timeline-summary-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
+@media (max-width: 700px) { .timeline-summary-grid { grid-template-columns:1fr; } .timeline-custom-grid { grid-template-columns:1fr; } .timeline-head { flex-direction:column; } .timeline-stamp { white-space:normal; } .timeline-detail-row { grid-template-columns:1fr; } }
diff --git a/backend/workflows/static/workflows/css/requests_dashboard.css b/backend/workflows/static/workflows/css/requests_dashboard.css
index ca6f26a..e523c58 100644
--- a/backend/workflows/static/workflows/css/requests_dashboard.css
+++ b/backend/workflows/static/workflows/css/requests_dashboard.css
@@ -1,11 +1,11 @@
 :root {
-      --brand-blue: #000078;
+      --brand-blue: var(--ds-brand);
       --brand-blue-soft: #1f4fd6;
       --brand-red: #a32020;
-      --ink: #132238;
-      --muted: #607086;
-      --line: #d9e3ee;
-      --line-strong: #c8d5e5;
+      --ink: var(--ds-ink);
+      --muted: var(--ds-muted);
+      --line: var(--ds-line);
+      --line-strong: var(--ds-line-strong);
       --panel: rgba(255, 255, 255, 0.9);
       --panel-strong: #ffffff;
       --bg-soft: #eef3ff;
@@ -15,69 +15,9 @@
       --warn-ink: #9a6400;
       --danger-bg: #fff1f1;
       --danger-ink: #982222;
-      --shadow: 0 22px 48px rgba(18, 34, 56, 0.14);
+      --shadow: var(--ds-shadow-shell);
     }
 
-    * { box-sizing: border-box; }
-
-    body {
-      margin: 0;
-      font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-      color: var(--ink);
-      min-height: 100vh;
-      background:
-        radial-gradient(70% 90% at 8% 8%, rgba(0, 0, 120, 0.14), rgba(0, 0, 120, 0)),
-        radial-gradient(60% 85% at 92% 88%, rgba(163, 32, 32, 0.12), rgba(163, 32, 32, 0)),
-        linear-gradient(160deg, #eef3ff 0%, #f9fbff 48%, #edf4ff 100%);
-      padding: 24px;
-    }
-
-    .shell {
-      width: min(1380px, 100%);
-      margin: 0 auto;
-      background: rgba(255, 255, 255, 0.78);
-      backdrop-filter: blur(12px);
-      border: 1px solid rgba(217, 227, 238, 0.9);
-      border-radius: 28px;
-      box-shadow: var(--shadow);
-      overflow: hidden;
-    }
-
-    .topbar {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-      gap: 18px;
-      padding: 22px 24px 18px;
-      border-bottom: 1px solid rgba(217, 227, 238, 0.9);
-      background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.84));
-    }
-
-    .brand-wrap {
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .brand-logo {
-      width: 212px;
-      max-width: 100%;
-      height: auto;
-      display: block;
-      margin: 0;
-    }
-
-    .quick-actions {
-      display: flex;
-      gap: 8px;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      align-items: center;
-    }
-    .lang-switch { display:flex; gap:6px; }
-    .lang-btn { border:1px solid var(--line); background:#f8fbff; color:#1f3a5f; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; }
-    .lang-btn.active { background:var(--brand-blue); border-color:var(--brand-blue); color:#fff; }
-
     .hero {
       padding: 0;
       border-bottom: 0;
diff --git a/backend/workflows/static/workflows/css/success_pages.css b/backend/workflows/static/workflows/css/success_pages.css
index bbb1e02..b611d08 100644
--- a/backend/workflows/static/workflows/css/success_pages.css
+++ b/backend/workflows/static/workflows/css/success_pages.css
@@ -1,5 +1,5 @@
-body { margin: 0; font-family: Arial, sans-serif; background: #f4f8ff; color: #1b2b43; padding: 24px; }
-.shell { background: #fff; border: 1px solid #d7e0ea; border-radius: 16px; padding: 20px; box-shadow: 0 16px 36px rgba(18,34,56,0.10); }
+.page-stack { max-width: 920px; }
+.success-card { padding: 20px; }
 h1 { margin: 0 0 10px; color: #000078; }
 p { margin: 0 0 10px; }
 code { background: #f4f6fa; padding: 2px 6px; border-radius: 6px; }
diff --git a/backend/workflows/static/workflows/js/form_builder.js b/backend/workflows/static/workflows/js/form_builder.js
index 393cf0e..87bd42c 100644
--- a/backend/workflows/static/workflows/js/form_builder.js
+++ b/backend/workflows/static/workflows/js/form_builder.js
@@ -114,14 +114,14 @@
     let draggingRow = null;
 
     function getOptionInsertBeforeNode(mouseY) {
-      const rows = Array.from(optionTableBody.querySelectorAll('tr.option-row:not(.dragging)'));
+      const rows = Array.from(optionTableBody.querySelectorAll('.option-row:not(.dragging)'));
       return rows.find((row) => {
         const box = row.getBoundingClientRect();
         return mouseY < box.top + box.height / 2;
       });
     }
 
-    optionTableBody.querySelectorAll('tr.option-row').forEach((row) => {
+    optionTableBody.querySelectorAll('.option-row').forEach((row) => {
       row.addEventListener('dragstart', (event) => {
         draggingRow = row;
         row.classList.add('dragging');
diff --git a/backend/workflows/templates/workflows/app_registry.html b/backend/workflows/templates/workflows/app_registry.html
index d58d709..eb9130e 100644
--- a/backend/workflows/templates/workflows/app_registry.html
+++ b/backend/workflows/templates/workflows/app_registry.html
@@ -5,14 +5,23 @@
 
 {% block title %}{% trans "App Registry" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
+{% endblock %}
+
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
-<h1>{% trans "App Registry" %}</h1>
-<p class="sub">{% trans "Apps zentral steuern, für Kunden vorbereiten und ohne Template-Eingriffe auf der Landing Page ausspielen." %}</p>
+<div class="page-stack">
+<header class="page-header">
+  <div class="page-header-copy">
+    <span class="page-eyebrow">{% trans "Administration" %}</span>
+    <h1>{% trans "App Registry" %}</h1>
+    <p class="page-subtitle">{% trans "Apps zentral steuern, für Kunden vorbereiten und ohne Template-Eingriffe auf der Landing Page ausspielen." %}</p>
+  </div>
+</header>
 
 {% include 'workflows/includes/messages.html' %}
 
@@ -230,6 +239,7 @@
     </div>
   </form>
 </section>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
diff --git a/backend/workflows/templates/workflows/audit_log.html b/backend/workflows/templates/workflows/audit_log.html
index c1903ab..a86e8b6 100644
--- a/backend/workflows/templates/workflows/audit_log.html
+++ b/backend/workflows/templates/workflows/audit_log.html
@@ -3,22 +3,26 @@
 
 {% block title %}{% trans "Audit Log" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
+{% endblock %}
+
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
-
-<div class="toolbar">
-  <div>
+<div class="page-stack">
+<header class="page-header">
+  <div class="page-header-copy">
+    <span class="page-eyebrow">{% trans "Operations" %}</span>
     <h1>{% trans "Audit Log" %}</h1>
-    <p class="sub">{% trans "Nachvollziehbarkeit aller wichtigen Admin-Aktionen im Portal." %}</p>
+    <p class="page-subtitle">{% trans "Nachvollziehbarkeit aller wichtigen Admin-Aktionen im Portal." %}</p>
   </div>
-</div>
+</header>
 
 <div class="card">
-  <form method="get" class="grid" style="margin-bottom:12px;">
+  <form method="get" class="grid u-mt-12">
     <div class="field">
       <label for="action">{% trans "Aktion" %}</label>
       <select id="action" name="action">
@@ -45,8 +49,8 @@
       <a class="btn btn-secondary" href="/admin-tools/audit-log/">{% trans "Zurücksetzen" %}</a>
     </div>
   </form>
-  <div class="table-wrap">
-    <table class="table-controls">
+  <div class="table-wrap app-table-shell">
+    <table class="app-table table-controls">
       <thead>
         <tr>
           <th>{% trans "Zeit" %}</th>
@@ -76,7 +80,7 @@
           <td>
             {% if row.details.request_labels %}
               <div class="hint">{% trans "Betroffene Vorgänge" %}</div>
-              <ul class="hint" style="margin:6px 0 10px 18px; padding:0;">
+              <ul class="hint audit-request-list">
                 {% for label in row.details.request_labels %}
                   <li>{{ label }}</li>
                 {% endfor %}
@@ -99,4 +103,5 @@
     </table>
   </div>
 </div>
+</div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/backup_recovery.html b/backend/workflows/templates/workflows/backup_recovery.html
index 91b8065..4ce6216 100644
--- a/backend/workflows/templates/workflows/backup_recovery.html
+++ b/backend/workflows/templates/workflows/backup_recovery.html
@@ -3,21 +3,30 @@
 
 {% block title %}{% trans "Backup & Recovery" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
+{% endblock %}
+
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
-<h1>{% trans "Backup & Recovery" %}</h1>
-<p class="sub">{% trans "Datenbank- und Media-Backups erstellen und vorhandene Bundles sicher verifizieren." %}</p>
+<div class="page-stack">
+<header class="page-header">
+  <div class="page-header-copy">
+    <span class="page-eyebrow">{% trans "Operations" %}</span>
+    <h1>{% trans "Backup & Recovery" %}</h1>
+    <p class="page-subtitle">{% trans "Datenbank- und Media-Backups erstellen und vorhandene Bundles sicher verifizieren." %}</p>
+  </div>
+</header>
 
 {% include 'workflows/includes/messages.html' %}
 
 <section class="card">
   <div class="toolbar">
     <div>
-      <h2 style="margin:0;">{% trans "Backup-Status" %}</h2>
+      <h2>{% trans "Backup-Status" %}</h2>
       <div class="hint">{{ backup_health.summary }}</div>
     </div>
     <div class="actions">
@@ -43,7 +52,7 @@
 <section class="card">
   <div class="toolbar">
     <div>
-      <h2 style="margin:0;">{% trans "Aktionen" %}</h2>
+      <h2>{% trans "Aktionen" %}</h2>
       <div class="hint">{% trans "Erstellung und Verifikation laufen im App-Kontext. Restore bleibt bewusst CLI-only." %}</div>
     </div>
     <form method="post" action="{% url 'create_backup_from_admin' %}" data-confirm="{% trans 'Neues Backup jetzt erstellen?' %}" data-progress-title="{% trans 'Backup wird erstellt' %}" data-progress-copy="{% trans 'Bitte warten. Datenbank- und Media-Bundle werden gerade vorbereitet.' %}">
@@ -62,8 +71,8 @@
 <section class="card">
   <h2>{% trans "Verfügbare Backup-Bundles" %}</h2>
   {% if rows %}
-  <div class="table-wrap">
-    <table>
+  <div class="table-wrap app-table-shell">
+    <table class="app-table">
       <thead>
         <tr>
           <th>{% trans "Bundle" %}</th>
@@ -143,4 +152,5 @@
     <div class="hint">{% trans "Noch keine Backup-Bundles vorhanden." %}</div>
   {% endif %}
 </section>
+</div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/base_shell.html b/backend/workflows/templates/workflows/base_shell.html
index 197c0ba..adf0265 100644
--- a/backend/workflows/templates/workflows/base_shell.html
+++ b/backend/workflows/templates/workflows/base_shell.html
@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>{% block title %}{% endblock %}</title>
   <link rel="icon" href="{{ portal_favicon_url }}" />
+  <link rel="stylesheet" href="{% static 'workflows/css/design_system.css' %}" />
   <link rel="stylesheet" href="{% static 'workflows/css/buttons.css' %}" />
   <link rel="stylesheet" href="{% static 'workflows/css/app_chrome.css' %}" />
   {% block extra_css %}{% endblock %}
diff --git a/backend/workflows/templates/workflows/branding_settings.html b/backend/workflows/templates/workflows/branding_settings.html
index 45815cd..2c541fa 100644
--- a/backend/workflows/templates/workflows/branding_settings.html
+++ b/backend/workflows/templates/workflows/branding_settings.html
@@ -3,16 +3,25 @@
 
 {% block title %}{% trans "Branding" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
+{% endblock %}
+
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
-<h1>{% trans "Branding" %}</h1>
-<p class="sub">{% trans "Portalname, Firmenauftritt, Logo und PDF-Briefkopf zentral verwalten." %}</p>
+<div class="page-stack">
+  <header class="page-header">
+    <div class="page-header-copy">
+      <span class="page-eyebrow">{% trans "Administration" %}</span>
+      <h1>{% trans "Branding" %}</h1>
+      <p class="page-subtitle">{% trans "Portalname, Firmenauftritt, Logo und PDF-Briefkopf zentral verwalten." %}</p>
+    </div>
+  </header>
 
-{% include 'workflows/includes/messages.html' %}
+  {% include 'workflows/includes/messages.html' %}
 
 <section class="card">
   <div class="branding-sections">
@@ -186,6 +195,7 @@
     </div>
   </div>
 </section>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
diff --git a/backend/workflows/templates/workflows/company_config.html b/backend/workflows/templates/workflows/company_config.html
index ee745f9..8bb8657 100644
--- a/backend/workflows/templates/workflows/company_config.html
+++ b/backend/workflows/templates/workflows/company_config.html
@@ -3,14 +3,23 @@
 
 {% block title %}{% trans "Company Config" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
+{% endblock %}
+
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
-<h1>{% trans "Company Config" %}</h1>
-<p class="sub">{% trans "Strukturierte Firmendaten, Kontaktpunkte und öffentliche Unternehmenslinks zentral pflegen." %}</p>
+<div class="page-stack">
+  <header class="page-header">
+    <div class="page-header-copy">
+      <span class="page-eyebrow">{% trans "Administration" %}</span>
+      <h1>{% trans "Company Config" %}</h1>
+      <p class="page-subtitle">{% trans "Strukturierte Firmendaten, Kontaktpunkte und öffentliche Unternehmenslinks zentral pflegen." %}</p>
+    </div>
+  </header>
 
 {% include 'workflows/includes/messages.html' %}
 
@@ -62,6 +71,7 @@
     <div class="hint">{% trans "Diese Ebene ist bewusst von Branding getrennt: Hier geht es um strukturierte Firmendaten, nicht um visuelle Gestaltung." %}</div>
   </div>
 </section>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
diff --git a/backend/workflows/templates/workflows/developer_handbook.html b/backend/workflows/templates/workflows/developer_handbook.html
index ca7140b..205a165 100644
--- a/backend/workflows/templates/workflows/developer_handbook.html
+++ b/backend/workflows/templates/workflows/developer_handbook.html
@@ -11,6 +11,7 @@
 
 {% block shell_body %}
       {% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
+    <div class="page-stack">
     <div class="top">
       <h1>Developer Handbook</h1>
       <div style="display:flex; gap:8px; flex-wrap:wrap;">
@@ -297,5 +298,6 @@ make backup-verify BACKUP_DIR=backups/backup_YYYYmmdd_HHMMSS</code></pre>
       <li>Prefer standard framework workflows over custom one-off maintenance scripts.</li>
       <li>When adding new features, document them in both the Project Wiki and this handbook if they change engineering workflow.</li>
     </ul>
+    </div>
   
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/form_builder.html b/backend/workflows/templates/workflows/form_builder.html
index 316257c..cb09baf 100644
--- a/backend/workflows/templates/workflows/form_builder.html
+++ b/backend/workflows/templates/workflows/form_builder.html
@@ -510,7 +510,7 @@
                       <input type="text" name="label_en_{{ item.id }}" value="{{ item.label_en }}" />
                     </label>
                     <label class="builder-entity-control">
-                      <span>Value</span>
+                      <span>{% trans "Wert" %}</span>
                       <input type="text" name="value_{{ item.id }}" value="{{ item.value }}" />
                     </label>
                   </div>
diff --git a/backend/workflows/templates/workflows/handbook.html b/backend/workflows/templates/workflows/handbook.html
index decb080..52747d7 100644
--- a/backend/workflows/templates/workflows/handbook.html
+++ b/backend/workflows/templates/workflows/handbook.html
@@ -11,6 +11,7 @@
 
 {% block shell_body %}
       {% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
+    <div class="page-stack">
     <div class="top">
       <h1>{% trans "Handbook" %}</h1>
     </div>
@@ -62,5 +63,6 @@
         </div>
       </section>
     </div>
+    </div>
   
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/integrations_setup.html b/backend/workflows/templates/workflows/integrations_setup.html
index dc6cd46..df9ecdd 100644
--- a/backend/workflows/templates/workflows/integrations_setup.html
+++ b/backend/workflows/templates/workflows/integrations_setup.html
@@ -3,6 +3,10 @@
 
 {% block title %}{% trans "Integrationen Setup" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
+{% endblock %}
+
 
 
 {% block extra_css %}
@@ -10,9 +14,14 @@
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
-    <h1>{% trans "Integrationen Setup" %}</h1>
-    <p class="sub">{% trans "Verwalten Sie Nextcloud- und Mail-Konfiguration ohne Backend-Wechsel." %}</p>
+    <div class="page-stack">
+    <header class="page-header">
+      <div class="page-header-copy">
+        <span class="page-eyebrow">{% trans "Administration" %}</span>
+        <h1>{% trans "Integrationen Setup" %}</h1>
+        <p class="page-subtitle">{% trans "Verwalten Sie Nextcloud- und Mail-Konfiguration ohne Backend-Wechsel." %}</p>
+      </div>
+    </header>
 
     <div class="switch">
       <a class="tab {% if kind == 'nextcloud' %}active{% endif %}" href="/admin-tools/integrations/?kind=nextcloud">{% trans "Setup Nextcloud" %}</a>
@@ -367,14 +376,14 @@
     {% if kind == 'backup' %}
       <form class="card" method="post" action="/admin-tools/integrations/save-backup-settings/" data-remote-backup-form>
         {% csrf_token %}
-        <div class="grid backup-grid" style="grid-template-columns:1fr">
+        <div class="grid backup-grid">
           <div class="field-full">
             <label for="remote_backup_enabled">{% trans "Remote Backup aktiviert" %}</label>
             <div class="check-row">
               <label><input id="remote_backup_enabled" type="checkbox" name="remote_backup_enabled" {% if workflow_config.remote_backup_enabled %}checked{% endif %} onchange="window.syncRemoteBackupSettingsVisibility && window.syncRemoteBackupSettingsVisibility(this.form)" /> {% trans "Remote Kopie nach lokalem Bundle erstellen" %}</label>
             </div>
           </div>
-          <div class="grid" style="grid-template-columns:repeat(2,minmax(240px,1fr)); align-items:end;">
+          <div class="grid integration-remote-grid">
             <div class="remote-backup-targets">
               <label for="remote_backup_target_type">{% trans "Remote Backup Zieltyp" %}</label>
               <select id="remote_backup_target_type" name="remote_backup_target_type" onchange="window.syncRemoteBackupSettingsVisibility && window.syncRemoteBackupSettingsVisibility(this.form)">
@@ -383,15 +392,15 @@
                 {% endfor %}
               </select>
             </div>
-            <div class="remote-backup-targets" data-remote-target="nextcloud"{% if not workflow_config.remote_backup_enabled or workflow_config.remote_backup_target_type != 'nextcloud' %} style="display:none"{% endif %}>
+            <div class="remote-backup-targets{% if not workflow_config.remote_backup_enabled or workflow_config.remote_backup_target_type != 'nextcloud' %} is-hidden{% endif %}" data-remote-target="nextcloud">
               <label for="remote_backup_nextcloud_directory">{% trans "Nextcloud Backup-Verzeichnis" %}</label>
               <input id="remote_backup_nextcloud_directory" name="remote_backup_nextcloud_directory" value="{{ workflow_config.remote_backup_nextcloud_directory }}" placeholder="Group-on-off-boarding-backups" />
             </div>
-            <div class="remote-backup-targets" data-remote-target="s3"{% if not workflow_config.remote_backup_enabled or workflow_config.remote_backup_target_type != 's3' %} style="display:none"{% endif %}>
+            <div class="remote-backup-targets{% if not workflow_config.remote_backup_enabled or workflow_config.remote_backup_target_type != 's3' %} is-hidden{% endif %}" data-remote-target="s3">
               <label for="remote_backup_s3_bucket">{% trans "S3 Bucket (optional)" %}</label>
               <input id="remote_backup_s3_bucket" name="remote_backup_s3_bucket" value="{{ workflow_config.remote_backup_s3_bucket }}" placeholder="reserved for future support" />
             </div>
-            <div class="remote-backup-targets" data-remote-target="nfs"{% if not workflow_config.remote_backup_enabled or workflow_config.remote_backup_target_type != 'nfs' %} style="display:none"{% endif %}>
+            <div class="remote-backup-targets{% if not workflow_config.remote_backup_enabled or workflow_config.remote_backup_target_type != 'nfs' %} is-hidden{% endif %}" data-remote-target="nfs">
               <label for="remote_backup_nfs_path">{% trans "NFS Pfad (optional)" %}</label>
               <input id="remote_backup_nfs_path" name="remote_backup_nfs_path" value="{{ workflow_config.remote_backup_nfs_path }}" placeholder="/mnt/backup-share" />
             </div>
@@ -401,10 +410,10 @@
           <button class="btn btn-primary" type="submit">{% trans "Backup-Einstellungen speichern" %}</button>
         </div>
         <div class="hint remote-backup-targets">{% trans "Empfehlung: Nextcloud als erstes Remote-Ziel verwenden. S3 und NFS sind als Zieltypen vorbereitet, aber noch nicht aktiv implementiert." %}</div>
-        <div class="hint remote-backup-targets" data-remote-target="nextcloud"{% if not workflow_config.remote_backup_enabled or workflow_config.remote_backup_target_type != 'nextcloud' %} style="display:none"{% endif %}>{% trans "Das Backup-Verzeichnis muss getrennt vom normalen Nextcloud Dokumentenordner sein, z. B. Group-on-off-boarding-backups." %}</div>
+        <div class="hint remote-backup-targets{% if not workflow_config.remote_backup_enabled or workflow_config.remote_backup_target_type != 'nextcloud' %} is-hidden{% endif %}" data-remote-target="nextcloud">{% trans "Das Backup-Verzeichnis muss getrennt vom normalen Nextcloud Dokumentenordner sein, z. B. Group-on-off-boarding-backups." %}</div>
       </form>
     {% endif %}
-
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
@@ -418,7 +427,7 @@
         const selectedTarget = String(target.value || '').toLowerCase();
 
         form.querySelectorAll('[data-remote-target]').forEach((node) => {
-          node.style.display = node.dataset.remoteTarget === selectedTarget ? '' : 'none';
+          node.classList.toggle('is-hidden', node.dataset.remoteTarget !== selectedTarget);
         });
       };
 
diff --git a/backend/workflows/templates/workflows/intro_builder.html b/backend/workflows/templates/workflows/intro_builder.html
index 691eb40..2aaa4e6 100644
--- a/backend/workflows/templates/workflows/intro_builder.html
+++ b/backend/workflows/templates/workflows/intro_builder.html
@@ -3,6 +3,10 @@
 
 {% block title %}{% trans "Einweisungs-Builder" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_dashboard=1 header_show_home=1 header_inside_shell=1 %}
+{% endblock %}
+
 
 
 {% block extra_css %}
@@ -10,14 +14,14 @@
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_dashboard=1 header_show_home=1 header_inside_shell=1 %}
-
-    <div class="toolbar">
-      <div>
+    <div class="page-stack">
+    <header class="page-header">
+      <div class="page-header-copy">
+        <span class="page-eyebrow">{% trans "Administration" %}</span>
         <h1>{% trans "Einweisungs-Builder" %}</h1>
-        <p class="sub">{% trans "Checklistenpunkte für das Einweisungs- und Übergabeprotokoll verwalten." %}</p>
+        <p class="page-subtitle">{% trans "Checklistenpunkte für das Einweisungs- und Übergabeprotokoll verwalten." %}</p>
       </div>
-    </div>
+    </header>
 
     {% include 'workflows/includes/messages.html' %}
 
@@ -51,8 +55,8 @@
     <form class="card" method="post" action="/admin-tools/intro-builder/">
       {% csrf_token %}
       <input type="hidden" name="builder_action" value="save_items" />
-      <div class="table-wrap">
-        <table class="table-controls">
+      <div class="table-wrap app-table-shell">
+        <table class="app-table table-controls">
           <thead>
             <tr>
               <th>{% trans "Sortierung" %}</th>
@@ -109,8 +113,9 @@
         </table>
       </div>
       <div class="hint">{% trans "Reihenfolge folgt derzeit der Tabellenreihenfolge beim Speichern." %}</div>
-      <div style="margin-top:12px;">
+      <div class="u-mt-12">
         <button class="btn btn-primary" type="submit">{% trans "Checkliste speichern" %}</button>
       </div>
     </form>
+    </div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/job_monitor.html b/backend/workflows/templates/workflows/job_monitor.html
index 6e32a7b..8a01632 100644
--- a/backend/workflows/templates/workflows/job_monitor.html
+++ b/backend/workflows/templates/workflows/job_monitor.html
@@ -3,14 +3,23 @@
 
 {% block title %}{% trans "Job Monitor" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
+{% endblock %}
+
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
-<h1>{% trans "Job Monitor" %}</h1>
-<p class="sub">{% trans "Asynchrone Aufgaben, Fehler und letzte Worker-Läufe zentral prüfen." %}</p>
+<div class="page-stack">
+<header class="page-header">
+  <div class="page-header-copy">
+    <span class="page-eyebrow">{% trans "Operations" %}</span>
+    <h1>{% trans "Job Monitor" %}</h1>
+    <p class="page-subtitle">{% trans "Asynchrone Aufgaben, Fehler und letzte Worker-Läufe zentral prüfen." %}</p>
+  </div>
+</header>
 
 {% include 'workflows/includes/messages.html' %}
 
@@ -30,8 +39,8 @@
     </div>
   </div>
   {% if job_summary.recent_failed %}
-  <div class="table-wrap" style="margin-top:12px;">
-    <table>
+  <div class="table-wrap u-mt-12 app-table-shell">
+    <table class="app-table">
       <thead>
         <tr>
           <th>{% trans "Zuletzt fehlgeschlagen" %}</th>
@@ -73,15 +82,15 @@
         {% endfor %}
       </select>
     </div>
-    <div class="field actions" style="align-items:end;">
+    <div class="field actions u-align-end">
       <button class="btn btn-secondary" type="submit">{% trans "Filtern" %}</button>
     </div>
   </form>
 </section>
 
 <section class="card">
-  <div class="table-wrap">
-    <table>
+  <div class="table-wrap app-table-shell">
+    <table class="app-table">
       <thead>
         <tr>
           <th>{% trans "Start" %}</th>
@@ -109,4 +118,5 @@
     </table>
   </div>
 </section>
+</div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/offboarding_form.html b/backend/workflows/templates/workflows/offboarding_form.html
index 300e96c..0ae2684 100644
--- a/backend/workflows/templates/workflows/offboarding_form.html
+++ b/backend/workflows/templates/workflows/offboarding_form.html
@@ -3,8 +3,6 @@
 
 {% block title %}{% trans "Offboarding-Anfrage" %}{% endblock %}
 
-{% block shell_class %}wrap{% endblock %}
-
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/offboarding_form.css' %}" />
 {% endblock %}
@@ -22,31 +20,52 @@
 {% block shell_body %}
 {% include 'workflows/includes/app_header.html' with header_show_lang=1 header_show_home=1 header_inside_shell=1 %}
 
-    <div class="wrap-body">
-    <div class="card">
-<h1>{% trans "Offboarding-Anfrage" %}</h1>
-      <form method="get" action="/offboarding/new/">
-        <div class="field">
-<label for="q">{% trans "Mitarbeitende suchen (Name oder E-Mail)" %}</label>
-<input id="q" name="q" value="{{ search_query }}" placeholder="{% blocktrans trimmed with domain=portal_email_domain %}z. B. max.mustermann@{{ domain }}{% endblocktrans %}" />
-        </div>
-<button class="btn btn-primary" type="submit">{% trans "Suchen" %}</button>
-      </form>
+    <div class="offboarding-shell-body">
+      <aside class="offboarding-panel">
+        <h1>{% trans "Offboarding" %}</h1>
+        <p class="offboarding-sub">{% trans "Strukturierte Austrittsanfrage mit denselben klaren Oberflächenmustern wie im Onboarding." %}</p>
+        <ol class="offboarding-step-list">
+          {% for section in offboarding_sections %}
+          <li class="offboarding-step-item">
+            <span class="offboarding-dot">{{ forloop.counter }}</span>
+            <div>
+              <div class="offboarding-step-title">{{ section.title }}</div>
+              <div class="offboarding-step-sub">{{ section.subtitle }}</div>
+            </div>
+          </li>
+          {% endfor %}
+        </ol>
+      </aside>
 
-      {% if search_results %}
-        <div class="results" style="margin-top:10px;">
+      <main class="offboarding-main">
+      <section class="offboarding-search-card">
+        <div class="offboarding-section-head offboarding-search-head">
+          <div>
+            <h2>{% trans "Mitarbeitende suchen" %}</h2>
+            <p>{% trans "Vorhandene Profildaten laden, bevor die Austrittsangaben erfasst werden." %}</p>
+          </div>
+        </div>
+        <form method="get" action="/offboarding/new/">
+          <div class="field">
+            <label for="q">{% trans "Mitarbeitende suchen (Name oder E-Mail)" %}</label>
+            <input id="q" name="q" value="{{ search_query }}" placeholder="{% blocktrans trimmed with domain=portal_email_domain %}z. B. max.mustermann@{{ domain }}{% endblocktrans %}" />
+          </div>
+          <button class="btn btn-primary" type="submit">{% trans "Suchen" %}</button>
+        </form>
+
+        {% if search_results %}
+        <div class="results">
           {% for p in search_results %}
-            <a href="/offboarding/new/?profile={{ p.id }}">{{ p.full_name }} ({{ p.work_email }})</a>
+          <a href="/offboarding/new/?profile={{ p.id }}">{{ p.full_name }} ({{ p.work_email }})</a>
           {% endfor %}
         </div>
-      {% endif %}
+        {% endif %}
 
-      {% if selected_profile %}
-<p style="margin-top:10px; color:#2563eb;">{% trans "Vorbefüllt aus:" %} <strong>{{ selected_profile.full_name }}</strong> ({{ selected_profile.work_email }})</p>
-      {% endif %}
-    </div>
+        {% if selected_profile %}
+        <p class="offboarding-prefill-note">{% trans "Vorbefüllt aus:" %} <strong>{{ selected_profile.full_name }}</strong> ({{ selected_profile.work_email }})</p>
+        {% endif %}
+      </section>
 
-    <div class="card">
       <form method="post" data-email-domain="{{ portal_email_domain }}">
         {% csrf_token %}
         <div class="offboarding-sections">
@@ -81,9 +100,8 @@
         </div>
         <button class="btn btn-primary" type="submit">{% trans "Offboarding-Anfrage speichern" %}</button>
       </form>
+      </main>
     </div>
-    </div>
-  </div>
 {% endblock %}
 
 {% block extra_scripts %}
diff --git a/backend/workflows/templates/workflows/offboarding_success.html b/backend/workflows/templates/workflows/offboarding_success.html
index 3a1d23f..8842451 100644
--- a/backend/workflows/templates/workflows/offboarding_success.html
+++ b/backend/workflows/templates/workflows/offboarding_success.html
@@ -14,6 +14,8 @@
 {% endblock %}
 
 {% block shell_body %}
+<div class="page-stack">
+<section class="page-section success-card">
 <h1>{% trans "Offboarding gespeichert" %}</h1>
     <p>{% trans "Vorgangs-ID:" %} <code>{{ obj.id }}</code></p>
     <p>{% trans "Name:" %} <code>{{ obj.full_name }}</code></p>
@@ -29,4 +31,6 @@
       <a class="btn btn-secondary" href="/offboarding/new/">{% trans "Neue Offboarding-Anfrage erfassen" %}</a>
       <a class="btn btn-secondary" href="/requests/">{% trans "Zum Dashboard" %}</a>
     </div>
+</section>
+</div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/onboarding_success.html b/backend/workflows/templates/workflows/onboarding_success.html
index 8d61112..90c374b 100644
--- a/backend/workflows/templates/workflows/onboarding_success.html
+++ b/backend/workflows/templates/workflows/onboarding_success.html
@@ -14,6 +14,8 @@
 {% endblock %}
 
 {% block shell_body %}
+<div class="page-stack">
+<section class="page-section success-card">
 <h1>{% trans "Anfrage erfolgreich gespeichert" %}</h1>
     <p>{% trans "Vorgangs-ID:" %} <code>{{ obj.id }}</code></p>
     <p>{% trans "Name:" %} <code>{{ obj.full_name }}</code></p>
@@ -28,4 +30,6 @@
       <a class="btn btn-secondary" href="/onboarding/new/">{% trans "Neue Anfrage erfassen" %}</a>
       <a class="btn btn-secondary" href="/requests/">{% trans "Zum Dashboard" %}</a>
     </div>
+</section>
+</div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/project_wiki.html b/backend/workflows/templates/workflows/project_wiki.html
index 437de2d..1313617 100644
--- a/backend/workflows/templates/workflows/project_wiki.html
+++ b/backend/workflows/templates/workflows/project_wiki.html
@@ -11,6 +11,7 @@
 
 {% block shell_body %}
       {% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
+    <div class="page-stack">
     <div class="top">
       <h1>Project Wiki</h1>
     </div>
@@ -305,5 +306,6 @@
     <div class="note">
       Last updated for current system behavior as of March 19, 2026.
     </div>
+    </div>
   
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/release_checklist.html b/backend/workflows/templates/workflows/release_checklist.html
index 8e9f72c..1c247c9 100644
--- a/backend/workflows/templates/workflows/release_checklist.html
+++ b/backend/workflows/templates/workflows/release_checklist.html
@@ -11,6 +11,7 @@
 
 {% block shell_body %}
       {% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
+    <div class="page-stack">
     <section class="hero">
       <div class="eyebrow">{% trans "Release" %}</div>
       <div class="top">
@@ -102,5 +103,6 @@ docker compose logs --no-color --tail=200 worker</code></pre>
     </div>
 
     <div class="note">{% trans "Project rule: German remains the primary/fallback language. English is secondary. If a release adds new dynamic text, add the German source first and then the English value." %}</div>
+    </div>
   
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/request_timeline.html b/backend/workflows/templates/workflows/request_timeline.html
index c59c416..b16836e 100644
--- a/backend/workflows/templates/workflows/request_timeline.html
+++ b/backend/workflows/templates/workflows/request_timeline.html
@@ -5,53 +5,13 @@
 
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
-<style>
-.timeline-summary-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin-bottom:20px; }
-.timeline-stat { border:1px solid #d9e3f8; border-radius:20px; padding:16px 18px; background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%); box-shadow:0 18px 40px rgba(23,39,90,.08); }
-.timeline-stat label { display:block; margin-bottom:6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7081a5; }
-.timeline-stat strong { display:block; font-size:18px; line-height:1.35; color:#20345f; }
-.timeline-list { position:relative; display:grid; gap:18px; padding-left:28px; }
-.timeline-list::before { content:""; position:absolute; top:6px; bottom:6px; left:11px; width:2px; background:linear-gradient(180deg,#cad8f8 0%,#e8eefc 100%); }
-.timeline-item { position:relative; border:1px solid #d9e3f8; border-radius:20px; padding:18px 20px 18px 22px; background:#fff; box-shadow:0 18px 40px rgba(23,39,90,.08); }
-.timeline-item::before { content:""; position:absolute; top:22px; left:-24px; width:16px; height:16px; border-radius:999px; background:#1e2bb8; box-shadow:0 0 0 4px #eef3ff; }
-.timeline-item[data-kind="document"]::before { background:#1f7a45; }
-.timeline-item[data-kind="audit"]::before { background:#6a5acd; }
-.timeline-item[data-kind="session"]::before { background:#b86b12; }
-.timeline-item[data-kind="email"]::before { background:#c2354e; }
-.timeline-item[data-kind="milestone"]::before { background:#0d7c88; }
-.timeline-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:8px; }
-.timeline-title-wrap { display:grid; gap:8px; }
-.timeline-kind { display:inline-flex; align-items:center; width:max-content; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:#eef3ff; color:#27407a; }
-.timeline-item[data-kind="document"] .timeline-kind { background:#edf8f0; color:#20623c; }
-.timeline-item[data-kind="audit"] .timeline-kind { background:#f2efff; color:#5b49aa; }
-.timeline-item[data-kind="session"] .timeline-kind { background:#fff2df; color:#8a560a; }
-.timeline-item[data-kind="email"] .timeline-kind { background:#ffe8ee; color:#9f2749; }
-.timeline-item[data-kind="milestone"] .timeline-kind { background:#e8fbfd; color:#0e6a72; }
-.timeline-stamp { font-size:13px; color:#6b7a9b; white-space:nowrap; }
-.timeline-title { margin:0; font-size:20px; color:#20345f; }
-.timeline-summary { margin:0; font-size:15px; color:#22324d; line-height:1.55; }
-.timeline-meta { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
-.timeline-chip { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; background:#f7faff; border:1px solid #d8e1f5; color:#4d6087; font-size:12px; }
-.timeline-actions { margin-top:14px; }
-.timeline-details { margin-top:14px; padding-top:14px; border-top:1px dashed #d7e0f5; display:grid; gap:8px; }
-.timeline-detail-row { display:grid; grid-template-columns:160px 1fr; gap:12px; font-size:13px; }
-.timeline-detail-row strong { color:#566886; }
-.timeline-detail-list { margin:0; padding-left:18px; color:#4f617f; }
-.timeline-custom-fields { margin: 0 0 20px; padding: 18px 20px; border: 1px solid #d9e3f8; border-radius: 20px; background: linear-gradient(180deg,#ffffff 0%,#f7faff 100%); box-shadow: 0 18px 40px rgba(23,39,90,.08); }
-.timeline-custom-fields h2 { margin: 0 0 14px; font-size: 18px; color: #20345f; }
-.timeline-custom-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px; }
-.timeline-custom-item { padding: 12px 14px; border: 1px solid #d8e1f5; border-radius: 16px; background: #fff; }
-.timeline-custom-item strong { display:block; margin-bottom: 4px; color:#566886; font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
-.timeline-custom-item span { color:#22324d; font-size:14px; line-height:1.45; }
-@media (max-width: 1160px) { .timeline-summary-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
-@media (max-width: 820px) { .timeline-summary-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
-@media (max-width: 700px) { .timeline-summary-grid { grid-template-columns:1fr; } .timeline-custom-grid { grid-template-columns:1fr; } .timeline-head { flex-direction:column; } .timeline-stamp { white-space:normal; } .timeline-detail-row { grid-template-columns:1fr; } }
-</style>
+<link rel="stylesheet" href="{% static 'workflows/css/request_timeline.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
 {% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_dashboard=1 header_inside_shell=1 %}
 
+<div class="page-stack">
 <div class="toolbar">
   <div>
     <h1>{% trans "Request Timeline" %}</h1>
@@ -151,4 +111,5 @@
     {% endfor %}
   </div>
 </div>
+</div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/requests_dashboard.html b/backend/workflows/templates/workflows/requests_dashboard.html
index c4a4e98..0e6a7ce 100644
--- a/backend/workflows/templates/workflows/requests_dashboard.html
+++ b/backend/workflows/templates/workflows/requests_dashboard.html
@@ -3,6 +3,10 @@
 
 {% block title %}{% trans "Anfragen Dashboard" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
+{% endblock %}
+
 
 
 {% block extra_css %}
@@ -10,21 +14,7 @@
 {% endblock %}
 
 {% block shell_body %}
-<div class="topbar">
-      <div class="brand-wrap">
-        <a class="app-brand" href="/"><img class="brand-logo" src="{{ portal_logo_url }}" alt="{{ portal_company_name }} Logo" /></a>
-      </div>
-      <div class="quick-actions">
-        <form method="post" action="{% url 'set_language' %}" class="lang-switch">
-          {% csrf_token %}
-          <input type="hidden" name="next" value="{{ request.get_full_path }}" />
-          <button class="lang-btn {% if CURRENT_LANGUAGE == 'de' %}active{% endif %}" type="submit" name="language" value="de">DE</button>
-          <button class="lang-btn {% if CURRENT_LANGUAGE == 'en' %}active{% endif %}" type="submit" name="language" value="en">EN</button>
-        </form>
-        <a class="btn btn-secondary" href="/">{% trans "Zur Startseite" %}</a>
-      </div>
-    </div>
-
+<div class="page-stack">
     <section class="top-stack">
       <section class="hero">
         <div class="hero-grid">
@@ -180,8 +170,8 @@
             {% endif %}
           </div>
         </div>
-        <div class="table-wrap">
-          <table>
+        <div class="table-wrap app-table-shell">
+          <table class="app-table">
             <thead>
               <tr>
                 {% if can_delete_requests %}<th class="select-col"><input type="checkbox" id="select-all" aria-label="Alle auswählen" /></th>{% endif %}
@@ -219,9 +209,9 @@
 <span class="person-meta">{% trans "Noch nicht verfügbar" %}</span>
                   {% endif %}
                   {% if row.status_key == 'failed' %}
-                  <div class="person-meta" style="margin-top:8px; color:#8e1e1e;">{% trans "Fehlgeschlagen" %}</div>
+                  <div class="person-meta status-note-error">{% trans "Fehlgeschlagen" %}</div>
                     {% if row.last_error %}
-                  <div class="person-meta" style="margin-top:6px; color:#8e1e1e;">{{ row.last_error|truncatechars:140 }}</div>
+                  <div class="person-meta status-note-error">{{ row.last_error|truncatechars:140 }}</div>
                     {% endif %}
                   {% endif %}
                 </td>
@@ -304,6 +294,7 @@
     <div class="footer-bar">
 <div class="footer-note">{{ portal_title }}</div>
     </div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
diff --git a/backend/workflows/templates/workflows/trial_management.html b/backend/workflows/templates/workflows/trial_management.html
index fe1c890..fa6b33a 100644
--- a/backend/workflows/templates/workflows/trial_management.html
+++ b/backend/workflows/templates/workflows/trial_management.html
@@ -3,14 +3,23 @@
 
 {% block title %}{% trans "Trial Management" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
+{% endblock %}
+
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
-{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
-<h1>{% trans "Trial Management" %}</h1>
-<p class="sub">{% trans "Testlaufzeit, Banner und sichere Einschränkungen für Demo- und Pilotumgebungen steuern." %}</p>
+<div class="page-stack">
+<header class="page-header">
+  <div class="page-header-copy">
+    <span class="page-eyebrow">{% trans "Administration" %}</span>
+    <h1>{% trans "Trial Management" %}</h1>
+    <p class="page-subtitle">{% trans "Testlaufzeit, Banner und sichere Einschränkungen für Demo- und Pilotumgebungen steuern." %}</p>
+  </div>
+</header>
 
 {% include 'workflows/includes/messages.html' %}
 
@@ -118,10 +127,11 @@
       </div>
     </section>
 
-    <div class="toolbar" style="margin-top:1rem;">
+    <div class="toolbar u-mt-16">
       <div class="hint">{% trans "Die eigentliche Datenbereinigung läuft bewusst nicht über die Web-UI. Nutzen Sie dafür den Cleanup-Command im Betrieb." %}</div>
       <button class="btn btn-primary" type="submit">{% trans "Trial-Konfiguration speichern" %}</button>
     </div>
   </form>
 </section>
+</div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/user_management.html b/backend/workflows/templates/workflows/user_management.html
index 5a68b68..e26dfae 100644
--- a/backend/workflows/templates/workflows/user_management.html
+++ b/backend/workflows/templates/workflows/user_management.html
@@ -3,18 +3,23 @@
 
 {% block title %}{% trans "Benutzer & Rollen" %}{% endblock %}
 
+{% block shell_header %}
+{% include 'workflows/includes/app_header.html' with header_show_lang=1 header_show_home=1 header_inside_shell=1 %}
+{% endblock %}
+
 {% block extra_css %}
 <link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
 {% endblock %}
 
 {% block shell_body %}
-  {% include 'workflows/includes/app_header.html' with header_show_lang=1 header_show_home=1 header_inside_shell=1 %}
-  <div class="toolbar">
-    <div>
+  <div class="page-stack">
+  <header class="page-header">
+    <div class="page-header-copy">
+      <span class="page-eyebrow">{% trans "Administration" %}</span>
       <h1>{% trans "Benutzer & Rollen" %}</h1>
-      <p class="sub">{% trans "Platform Owner und Super Admins verwalten Benutzerkonten, Rollen und den aktiven Zugriff." %}</p>
+      <p class="page-subtitle">{% trans "Platform Owner und Super Admins verwalten Benutzerkonten, Rollen und den aktiven Zugriff." %}</p>
     </div>
-  </div>
+  </header>
 
   {% include 'workflows/includes/messages.html' %}
 
@@ -64,8 +69,8 @@
         <p class="sub">{% trans "Rollen ändern, Zugriffe sperren oder ein neues Passwort setzen." %}</p>
       </div>
     </div>
-    <div class="table-wrap">
-      <table>
+    <div class="table-wrap app-table-shell">
+      <table class="app-table">
         <thead>
           <tr>
             <th>{% trans "Name" %}</th>
@@ -148,8 +153,8 @@
       </div>
       <a class="btn btn-secondary" href="/admin-tools/audit-log/">{% trans "Zum Audit Log" %}</a>
     </div>
-    <div class="table-wrap">
-      <table>
+    <div class="table-wrap app-table-shell">
+      <table class="app-table">
         <thead>
           <tr>
             <th>{% trans "Zeit" %}</th>
@@ -184,4 +189,5 @@
       </table>
     </div>
   </section>
+  </div>
 {% endblock %}
diff --git a/backend/workflows/templates/workflows/welcome_emails.html b/backend/workflows/templates/workflows/welcome_emails.html
index d2175cb..4718259 100644
--- a/backend/workflows/templates/workflows/welcome_emails.html
+++ b/backend/workflows/templates/workflows/welcome_emails.html
@@ -11,8 +11,14 @@
 
 {% block shell_body %}
 {% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
-    <h1>{% trans "Geplante Welcome E-Mails" %}</h1>
-    <p class="sub">{% trans "Welcome-Mails konfigurieren und geplante Mails steuern (sofort senden, pausieren, fortsetzen, abbrechen)." %}</p>
+    <div class="page-stack">
+    <header class="page-header">
+      <div class="page-header-copy">
+        <span class="page-eyebrow">{% trans "Operations" %}</span>
+        <h1>{% trans "Geplante Welcome E-Mails" %}</h1>
+        <p class="page-subtitle">{% trans "Welcome-Mails konfigurieren und geplante Mails steuern (sofort senden, pausieren, fortsetzen, abbrechen)." %}</p>
+      </div>
+    </header>
 
     {% include 'workflows/includes/messages.html' %}
 
@@ -60,7 +66,7 @@
 
     <form class="bulk-bar" id="welcome-bulk-form" method="post" action="/admin-tools/welcome-emails/bulk-action/" data-alert-empty="{% trans 'Bitte mindestens einen Welcome-Eintrag auswählen.' %}" data-confirm-delete="{% trans 'Ausgewählte Welcome-Einträge wirklich löschen?' %}" data-confirm-pause="{% trans 'Ausgewählte Welcome-Einträge pausieren?' %}" data-confirm-send="{% trans 'Ausgewählte Welcome-Einträge sofort senden?' %}">
       {% csrf_token %}
-      <label style="display:inline-flex; align-items:center; gap:6px; margin:0;">
+      <label class="inline-flex-label">
         <input type="checkbox" id="select-all-welcome" />
         {% trans "Alle auswählen" %}
       </label>
@@ -74,7 +80,8 @@
       <span class="bulk-note"><span id="selected-count">0</span> {% trans "ausgewählt" %}</span>
     </form>
 
-    <table>
+    <div class="app-table-shell">
+    <table class="app-table">
       <thead>
         <tr>
           <th class="select-col">{% trans "Auswahl" %}</th>
@@ -112,24 +119,24 @@
             <td>
               <div class="table-actions">
                 {% if row.status != 'sent' and row.status != 'cancelled' %}
-                  <form method="post" action="/admin-tools/welcome-emails/{{ row.id }}/trigger-now/" style="display:inline;">
+                  <form class="inline-action-form" method="post" action="/admin-tools/welcome-emails/{{ row.id }}/trigger-now/">
                     {% csrf_token %}
                     <button class="btn btn-secondary" type="submit">{% trans "Sofort senden" %}</button>
                   </form>
                 {% endif %}
                 {% if row.status == 'scheduled' %}
-                  <form method="post" action="/admin-tools/welcome-emails/{{ row.id }}/pause/" style="display:inline;">
+                  <form class="inline-action-form" method="post" action="/admin-tools/welcome-emails/{{ row.id }}/pause/">
                     {% csrf_token %}
                     <button class="btn btn-secondary" type="submit">{% trans "Pausieren" %}</button>
                   </form>
                 {% elif row.status == 'paused' %}
-                  <form method="post" action="/admin-tools/welcome-emails/{{ row.id }}/resume/" style="display:inline;">
+                  <form class="inline-action-form" method="post" action="/admin-tools/welcome-emails/{{ row.id }}/resume/">
                     {% csrf_token %}
                     <button class="btn btn-secondary" type="submit">{% trans "Fortsetzen" %}</button>
                   </form>
                 {% endif %}
                 {% if row.status != 'sent' and row.status != 'cancelled' %}
-                  <form method="post" action="/admin-tools/welcome-emails/{{ row.id }}/cancel/" style="display:inline;">
+                  <form class="inline-action-form" method="post" action="/admin-tools/welcome-emails/{{ row.id }}/cancel/">
                     {% csrf_token %}
                     <button class="btn btn-secondary" type="submit">{% trans "Abbrechen" %}</button>
                   </form>
@@ -142,6 +149,8 @@
         {% endfor %}
       </tbody>
     </table>
+    </div>
+    </div>
 {% endblock %}
 
 {% block extra_scripts %}
diff --git a/backend/workflows/views.py b/backend/workflows/views.py
index b1d8699..718bc3c 100644
--- a/backend/workflows/views.py
+++ b/backend/workflows/views.py
@@ -2787,7 +2787,7 @@ def form_builder_page(request):
             cfg = section_configs.get(key)
             custom_cfg = custom_section_map.get(key)
             is_custom = custom_cfg is not None
-            raw_title = section_labels.get(key, key)
+            raw_title = str(section_labels.get(key, key))
             display_title = re.sub(r'^\d+\.\s*', '', raw_title) if not is_custom else raw_title
             section_rule_items.append(
                 {
@@ -3498,16 +3498,16 @@ def form_builder_save_order(request):
     try:
         payload = json.loads(request.body.decode('utf-8'))
     except (json.JSONDecodeError, UnicodeDecodeError):
-        return JsonResponse({'ok': False, 'error': 'Ungültige JSON-Daten.'}, status=400)
+        return JsonResponse({'ok': False, 'error': _('Ungültige JSON-Daten.')}, status=400)
 
     form_type = payload.get('form_type')
     if form_type not in DEFAULT_FIELD_ORDER:
-        return JsonResponse({'ok': False, 'error': 'Ungültiger Formulartyp.'}, status=400)
+        return JsonResponse({'ok': False, 'error': _('Ungültiger Formulartyp.')}, status=400)
     default_page_map = get_default_page_map(form_type)
 
     columns = payload.get('columns')
     if not isinstance(columns, dict):
-        return JsonResponse({'ok': False, 'error': 'Spalten-Daten fehlen.'}, status=400)
+        return JsonResponse({'ok': False, 'error': _('Spalten-Daten fehlen.')}, status=400)
 
     configs = list(FormFieldConfig.objects.filter(form_type=form_type).order_by('sort_order', 'field_name'))
     custom_configs = list(FormCustomFieldConfig.objects.filter(form_type=form_type).order_by('sort_order', 'field_key'))
@@ -3524,7 +3524,7 @@ def form_builder_save_order(request):
     for column_key in allowed_columns:
         names = columns.get(column_key, [])
         if not isinstance(names, list):
-            return JsonResponse({'ok': False, 'error': f'Ungültige Spalte: {column_key}'}, status=400)
+            return JsonResponse({'ok': False, 'error': _('Ungültige Spalte: %(column)s') % {'column': column_key}}, status=400)
 
         for name in names:
             if not isinstance(name, str):