snapshot: preserve form and app shell alignment before component unification

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',
+    'stammdaten': _('1. Stammdaten'),
-    'vertrag': '2. Vertrag',
+    'vertrag': _('2. Vertrag'),
-    'itsetup': '3. IT-Setup',
+    'itsetup': _('3. IT-Setup'),
-    'abschluss': '4. Abschluss',
+    'abschluss': _('4. Abschluss'),
 }
 OFFBOARDING_PAGE_LABELS = {
-    'mitarbeitende': '1. Mitarbeitende',
+    'mitarbeitende': _('1. Mitarbeitende'),
-    'austritt': '2. Austritt',
+    'austritt': _('2. Austritt'),
-    'abschluss': '3. Abschluss',
+    '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,

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:

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); }

backend/workflows/static/workflows/css/app_chrome.css

@@ -1,13 +1,13 @@
 :root {
-  --app-shell-width: 1380px;
+  --app-shell-width: var(--ds-shell-width);
-  --app-line: #d9e3ee;
+  --app-line: var(--ds-line);
-  --app-brand-blue: #000078;
+  --app-brand-blue: var(--ds-brand);
-  --app-panel: rgba(255, 255, 255, 0.9);
+  --app-panel: var(--ds-surface);
-  --app-shadow: 0 22px 48px rgba(18, 34, 56, 0.14);
+  --app-shadow: var(--ds-shadow-shell);
-  --motion-fast: 160ms;
+  --motion-fast: var(--ds-motion-fast);
-  --motion-base: 200ms;
+  --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 {

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);
+  background: var(--ds-brand);
-  border-color: var(--btn-primary-border);
+  border-color: var(--ds-brand);
-  color: var(--btn-primary-text);
+  color: #fff;
 }
 
 .btn-primary:hover:not(:disabled) {
@@ -56,9 +47,9 @@
 }
 
 .btn-secondary {
-  background: var(--btn-secondary-bg);
+  background: rgba(255, 255, 255, 0.96);
-  border-color: var(--btn-secondary-border);
+  border-color: var(--ds-line-strong);
-  color: var(--btn-secondary-text);
+  color: var(--ds-brand);
 }
 
 .btn-secondary:hover:not(:disabled) {

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;
+  }
+}

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; }
+.page-stack { width: min(1280px, 100%); margin: 0 auto; }
-.shell { max-width: 1120px; margin: 0 auto; background: #fff; border: 1px solid #d7e0ea; border-radius: 14px; padding: 18px; }
 .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; }
+.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: 16px; }
+.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; }

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 {

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;
+      --ink: var(--ds-ink);
-      --muted: #5f6f85;
+      --muted: var(--ds-muted);
-      --line: #d8e1ee;
+      --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);

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:

backend/workflows/static/workflows/css/offboarding_form.css

@@ -1,37 +1,286 @@
-body {
+:root {
-  font-family: "IBM Plex Sans", "Trebuchet MS", "Segoe UI", sans-serif;
+  --off-ink: #182233;
-  margin: 24px;
+  --off-muted: #5e6f85;
-  color: #1f2937;
+  --off-brand: #000078;
-  background:
+  --off-brand-soft: #eef1ff;
-    radial-gradient(900px 520px at 8% 0%, #dbe8ff, transparent),
+  --off-line: #d7dfeb;
-    radial-gradient(900px 520px at 92% 0%, #eef4ff, transparent),
+  --off-card: #ffffff;
-    #edf2fb;
+}
+
+.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; } }

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;

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; }
+    .page-stack { width: min(1280px, 100%); margin: 0 auto; }
-    .shell { max-width: 1120px; 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; }

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; } }

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;
+      --ink: var(--ds-ink);
-      --muted: #607086;
+      --muted: var(--ds-muted);
-      --line: #d9e3ee;
+      --line: var(--ds-line);
-      --line-strong: #c8d5e5;
+      --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;

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; }
+.page-stack { max-width: 920px; }
-.shell { background: #fff; border: 1px solid #d7e0ea; border-radius: 16px; padding: 20px; box-shadow: 0 16px 36px rgba(18,34,56,0.10); }
+.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; }

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');

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 %}
+<div class="page-stack">
-<h1>{% trans "App Registry" %}</h1>
+<header class="page-header">
-<p class="sub">{% trans "Apps zentral steuern, für Kunden vorbereiten und ohne Template-Eingriffe auf der Landing Page ausspielen." %}</p>
+  <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 %}

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="page-stack">
-
+<header class="page-header">
-<div class="toolbar">
+  <div class="page-header-copy">
-  <div>
+    <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">
+  <div class="table-wrap app-table-shell">
-    <table class="table-controls">
+    <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 %}

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 %}
+<div class="page-stack">
-<h1>{% trans "Backup & Recovery" %}</h1>
+<header class="page-header">
-<p class="sub">{% trans "Datenbank- und Media-Backups erstellen und vorhandene Bundles sicher verifizieren." %}</p>
+  <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">
+  <div class="table-wrap app-table-shell">
-    <table>
+    <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 %}

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 %}

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 %}
+<div class="page-stack">
-<h1>{% trans "Branding" %}</h1>
+  <header class="page-header">
-<p class="sub">{% trans "Portalname, Firmenauftritt, Logo und PDF-Briefkopf zentral verwalten." %}</p>
+    <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 %}

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 %}
+<div class="page-stack">
-<h1>{% trans "Company Config" %}</h1>
+  <header class="page-header">
-<p class="sub">{% trans "Strukturierte Firmendaten, Kontaktpunkte und öffentliche Unternehmenslinks zentral pflegen." %}</p>
+    <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 %}

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 %}

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>

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 %}

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 %}
+    <div class="page-stack">
-    <h1>{% trans "Integrationen Setup" %}</h1>
+    <header class="page-header">
-    <p class="sub">{% trans "Verwalten Sie Nextcloud- und Mail-Konfiguration ohne Backend-Wechsel." %}</p>
+      <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);
         });
       };
 

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="page-stack">
-
+    <header class="page-header">
-    <div class="toolbar">
+      <div class="page-header-copy">
-      <div>
+        <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">
+      <div class="table-wrap app-table-shell">
-        <table class="table-controls">
+        <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 %}

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 %}
+<div class="page-stack">
-<h1>{% trans "Job Monitor" %}</h1>
+<header class="page-header">
-<p class="sub">{% trans "Asynchrone Aufgaben, Fehler und letzte Worker-Läufe zentral prüfen." %}</p>
+  <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;">
+  <div class="table-wrap u-mt-12 app-table-shell">
-    <table>
+    <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">
+  <div class="table-wrap app-table-shell">
-    <table>
+    <table class="app-table">
       <thead>
         <tr>
           <th>{% trans "Start" %}</th>
@@ -109,4 +118,5 @@
     </table>
   </div>
 </section>
+</div>
 {% endblock %}

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="offboarding-shell-body">
-    <div class="card">
+      <aside class="offboarding-panel">
-<h1>{% trans "Offboarding-Anfrage" %}</h1>
+        <h1>{% trans "Offboarding" %}</h1>
-      <form method="get" action="/offboarding/new/">
+        <p class="offboarding-sub">{% trans "Strukturierte Austrittsanfrage mit denselben klaren Oberflächenmustern wie im Onboarding." %}</p>
-        <div class="field">
+        <ol class="offboarding-step-list">
-<label for="q">{% trans "Mitarbeitende suchen (Name oder E-Mail)" %}</label>
+          {% for section in offboarding_sections %}
-<input id="q" name="q" value="{{ search_query }}" placeholder="{% blocktrans trimmed with domain=portal_email_domain %}z. B. max.mustermann@{{ domain }}{% endblocktrans %}" />
+          <li class="offboarding-step-item">
-        </div>
+            <span class="offboarding-dot">{{ forloop.counter }}</span>
-<button class="btn btn-primary" type="submit">{% trans "Suchen" %}</button>
+            <div>
-      </form>
+              <div class="offboarding-step-title">{{ section.title }}</div>
+              <div class="offboarding-step-sub">{{ section.subtitle }}</div>
+            </div>
+          </li>
+          {% endfor %}
+        </ol>
+      </aside>
 
-      {% if search_results %}
+      <main class="offboarding-main">
-        <div class="results" style="margin-top:10px;">
+      <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 %}
+        {% 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>
+        <p class="offboarding-prefill-note">{% trans "Vorbefüllt aus:" %} <strong>{{ selected_profile.full_name }}</strong> ({{ selected_profile.work_email }})</p>
-      {% endif %}
+        {% endif %}
-    </div>
+      </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 %}

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 %}

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 %}

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 %}

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 %}

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>
+<link rel="stylesheet" href="{% static 'workflows/css/request_timeline.css' %}" />
-.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>
 {% 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 %}

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="page-stack">
-      <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>
-
     <section class="top-stack">
       <section class="hero">
         <div class="hero-grid">
@@ -180,8 +170,8 @@
             {% endif %}
           </div>
         </div>
-        <div class="table-wrap">
+        <div class="table-wrap app-table-shell">
-          <table>
+          <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 %}

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 %}
+<div class="page-stack">
-<h1>{% trans "Trial Management" %}</h1>
+<header class="page-header">
-<p class="sub">{% trans "Testlaufzeit, Banner und sichere Einschränkungen für Demo- und Pilotumgebungen steuern." %}</p>
+  <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 %}

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="page-stack">
-  <div class="toolbar">
+  <header class="page-header">
-    <div>
+    <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">
+    <div class="table-wrap app-table-shell">
-      <table>
+      <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">
+    <div class="table-wrap app-table-shell">
-      <table>
+      <table class="app-table">
         <thead>
           <tr>
             <th>{% trans "Zeit" %}</th>
@@ -184,4 +189,5 @@
       </table>
     </div>
   </section>
+  </div>
 {% endblock %}

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>
+    <div class="page-stack">
-    <p class="sub">{% trans "Welcome-Mails konfigurieren und geplante Mails steuern (sofort senden, pausieren, fortsetzen, abbrechen)." %}</p>
+    <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 %}

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):