diff --git a/backend/workflows/static/workflows/css/form_builder.css b/backend/workflows/static/workflows/css/form_builder.css
index 4f7ce6c..dc9b3e4 100644
--- a/backend/workflows/static/workflows/css/form_builder.css
+++ b/backend/workflows/static/workflows/css/form_builder.css
@@ -18,6 +18,121 @@ body {
   backdrop-filter: blur(12px);
 }
 
+.builder-workspace {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.builder-sidebar {
+  position: sticky;
+  top: 18px;
+  display: grid;
+  gap: 14px;
+}
+
+.builder-main {
+  min-width: 0;
+}
+
+.builder-sidebar-card {
+  padding: 16px;
+  border: 1px solid #d7e0ec;
+  border-radius: 18px;
+  background: linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
+}
+
+.builder-sidebar-card h2 {
+  margin: 6px 0 8px;
+  font-size: 20px;
+  color: #142033;
+}
+
+.builder-sidebar-card p {
+  margin: 0;
+  color: #5f7089;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.builder-sidebar-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 9px;
+  border-radius: 999px;
+  background: #eaf1ff;
+  color: #214d99;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.builder-side-nav {
+  display: grid;
+  gap: 8px;
+}
+
+.builder-side-link {
+  display: grid;
+  gap: 4px;
+  padding: 14px 16px;
+  border: 1px solid #d7e0ec;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #fbfdff, #ffffff);
+  color: #142033;
+  text-decoration: none;
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.builder-side-link:hover {
+  transform: translateY(-1px);
+  border-color: #b8cae0;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
+}
+
+.builder-side-link.is-active {
+  border-color: #9eb6d8;
+  background: linear-gradient(180deg, #eef5ff, #ffffff);
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+}
+
+.builder-side-link-title {
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.builder-side-link-meta {
+  color: #607086;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.builder-sidebar-stats {
+  display: grid;
+  gap: 12px;
+}
+
+.builder-side-stat {
+  display: grid;
+  gap: 2px;
+}
+
+.builder-side-stat strong {
+  font-size: 22px;
+  line-height: 1;
+  color: #163566;
+}
+
+.builder-side-stat span {
+  color: #607086;
+  font-size: 12px;
+  font-weight: 700;
+}
+
 .builder-hero,
 .builder-panel,
 .builder-stat-card,
@@ -39,6 +154,14 @@ body {
   max-width: 760px;
 }
 
+.builder-hero-sub {
+  margin: 10px 0 0;
+  max-width: 640px;
+  color: #5c6d87;
+  font-size: 15px;
+  line-height: 1.6;
+}
+
 .builder-eyebrow {
   display: inline-flex;
   align-items: center;
@@ -142,12 +265,91 @@ body {
   box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
 }
 
+.builder-module-surface {
+  overflow: hidden;
+}
+
+.builder-module-hidden {
+  display: none;
+}
+
+.builder-module-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+.builder-module-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid #d1dbea;
+  border-radius: 999px;
+  background: #f7fbff;
+  color: #304159;
+  font-size: 13px;
+  font-weight: 800;
+  text-decoration: none;
+  transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.builder-module-link:hover {
+  transform: translateY(-1px);
+  border-color: #adc2dd;
+  background: #ffffff;
+  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
+}
+
+.builder-module-link.is-active {
+  border-color: #164a99;
+  background: linear-gradient(135deg, #0f3b7a 0%, #1759b8 100%);
+  color: #ffffff;
+}
+
 .builder-panel-head h2,
 .options-head h2 {
   margin: 0;
   color: #142033;
 }
 
+.builder-panel-copy,
+.options-copy {
+  min-width: 0;
+}
+
+.builder-panel-sub,
+.options-sub {
+  margin: 6px 0 0;
+  color: #61718a;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.builder-panel-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.builder-panel-count {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  padding: 0 10px;
+  border: 1px solid #d7e1ee;
+  border-radius: 999px;
+  background: #f8fbff;
+  color: #294567;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
 .mini {
   color: #61718a;
   font-size: 13px;
@@ -234,114 +436,18 @@ body {
   margin-bottom: 14px;
 }
 
-.builder-accordion {
-  padding: 0;
-  overflow: hidden;
-}
-
-.nested-accordion {
-  padding: 0;
-  overflow: hidden;
-}
-
-.nested-accordion-summary {
-  list-style: none;
-  cursor: pointer;
-  padding: 14px 16px;
-  transition: background-color 0.18s ease;
-}
-
-.nested-accordion-summary::-webkit-details-marker {
-  display: none;
-}
-
-.nested-accordion-summary .options-head {
-  margin-bottom: 0;
-}
-
-.nested-accordion-summary:hover {
-  background: rgba(242, 247, 255, 0.72);
-}
-
-.nested-accordion[open] .nested-accordion-summary {
-  border-bottom: 1px solid rgba(201, 212, 226, 0.8);
-}
-
-.nested-accordion:not([open]) .builder-panel-toggle::after {
-  transform: rotate(-90deg);
-}
-
-.nested-accordion[open] .builder-panel-toggle {
-  color: #194ea7;
-}
-
-.nested-accordion-body {
-  padding: 14px 16px 16px;
-}
-
-.nested-accordion[open] .nested-accordion-body {
-  animation: builderReveal 0.24s ease;
-}
-
-.builder-panel-summary {
-  list-style: none;
-  cursor: pointer;
-  padding: 14px 16px;
-  transition: background-color 0.18s ease;
-}
-
-.builder-panel-summary::-webkit-details-marker {
-  display: none;
-}
-
-.builder-panel-summary .builder-panel-head {
-  margin-bottom: 0;
-}
-
-.builder-panel-summary:hover {
-  background: rgba(242, 247, 255, 0.72);
-}
-
-.builder-panel-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: #5f7089;
-  font-size: 12px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.builder-panel-toggle::after {
-  content: "▾";
-  font-size: 13px;
-  line-height: 1;
-  transition: transform 0.18s ease;
-}
-
-.builder-accordion:not([open]) .builder-panel-toggle::after {
-  transform: rotate(-90deg);
-}
-
-.builder-accordion[open] .builder-panel-toggle {
-  color: #194ea7;
-}
-
-.builder-accordion[open] .builder-panel-toggle::before {
-  content: "";
-}
-
-.builder-accordion[open] .builder-panel-summary {
-  border-bottom: 1px solid rgba(201, 212, 226, 0.8);
+.module-card-body {
+  display: grid;
+  gap: 14px;
 }
 
 .builder-panel-body {
   padding: 14px 16px 16px;
 }
 
-.builder-accordion[open] .builder-panel-body {
-  animation: builderReveal 0.24s ease;
+.builder-panel-body-static {
+  display: grid;
+  gap: 16px;
 }
 
 .builder-rule-layout {
@@ -355,6 +461,10 @@ body {
   gap: 14px;
 }
 
+.builder-module-card {
+  overflow: hidden;
+}
+
 .preview-shell {
   display: grid;
   gap: 12px;
@@ -458,29 +568,43 @@ body {
 
 .field-rule-list {
   display: grid;
+  gap: 10px;
+  padding: 10px;
 }
 
 .field-rule-row {
   display: grid;
-  grid-template-columns: minmax(220px, 1.4fr) 120px 160px 120px;
-  gap: 12px;
+  grid-template-columns: minmax(240px, 1.5fr) minmax(120px, 0.55fr) minmax(170px, 0.7fr) auto;
+  gap: 14px;
   align-items: center;
-  padding: 12px 14px;
-  border-top: 1px solid #edf2f7;
+  padding: 14px;
+  border: 1px solid #e7edf6;
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.96);
   transition: background-color 0.18s ease;
 }
 
 .field-rule-row:first-child {
-  border-top: 0;
+  border-top: 1px solid #e7edf6;
 }
 
 .field-rule-row:hover {
-  background: rgba(246, 250, 255, 0.92);
+  background: rgba(246, 250, 255, 0.96);
 }
 
 .field-rule-main strong {
   display: block;
   color: #162133;
+  font-size: 14px;
+}
+
+.field-rule-meta {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
 }
 
 .field-rule-control {
@@ -491,6 +615,18 @@ body {
   font-weight: 700;
 }
 
+.field-rule-settings {
+  display: flex;
+  align-items: end;
+  justify-content: flex-end;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.field-rule-control-compact {
+  min-width: 120px;
+}
+
 .field-rule-control input[type='checkbox'] {
   width: 16px;
   height: 16px;
@@ -501,6 +637,10 @@ body {
   justify-content: flex-end;
 }
 
+.field-rule-status-inline {
+  justify-content: flex-start;
+}
+
 .conditional-rule-grid {
   display: grid;
   gap: 12px;
@@ -573,6 +713,33 @@ body {
 .conditional-targets {
   display: grid;
   gap: 8px;
+  padding: 12px;
+  border: 1px solid #e7edf6;
+  border-radius: 14px;
+  background: #f9fbff;
+}
+
+.conditional-rule-summary {
+  display: grid;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid #dbe6f5;
+  border-radius: 14px;
+  background: linear-gradient(180deg, #f6faff, #ffffff);
+}
+
+.conditional-summary-prefix {
+  color: #294567;
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.conditional-summary-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
 .conditional-target-label {
@@ -594,6 +761,42 @@ body {
   gap: 10px;
 }
 
+.conditional-sentence-builder {
+  display: grid;
+  gap: 10px;
+}
+
+.conditional-sentence-row {
+  display: grid;
+  grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.3fr) minmax(160px, 0.9fr) minmax(160px, 0.9fr);
+  gap: 10px;
+  align-items: end;
+  padding: 12px;
+  border: 1px solid #e5ebf3;
+  border-radius: 14px;
+  background: #f8fbff;
+}
+
+.conditional-sentence-label {
+  color: #33506f;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.45;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.conditional-sentence-row select,
+.conditional-sentence-row input[type='text'] {
+  width: 100%;
+  min-height: 40px;
+  border: 1px solid #cbd5e1;
+  border-radius: 10px;
+  padding: 8px 10px;
+  box-sizing: border-box;
+  background: #fff;
+}
+
 .conditional-clause-row {
   display: grid;
   grid-template-columns: 56px minmax(220px, 1.35fr) minmax(180px, 0.8fr) minmax(180px, 0.85fr);
@@ -666,14 +869,161 @@ body {
 
 .columns {
   display: grid;
-  grid-template-columns: repeat(4, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 12px;
+  min-width: 0;
+}
+
+.structure-workspace {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+  min-width: 0;
+}
+
+.structure-sidebar {
+  display: grid;
+  gap: 12px;
+  position: sticky;
+  top: 18px;
+}
+
+.structure-canvas {
+  min-width: 0;
+  overflow: visible;
+  padding-bottom: 4px;
+  display: grid;
+  gap: 14px;
+}
+
+.structure-section-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.structure-section-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  padding: 0 14px 0 10px;
+  border: 1px solid #d7e0ec;
+  border-radius: 16px;
+  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
+  color: #142033;
+  text-decoration: none;
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.structure-section-pill:hover {
+  transform: translateY(-1px);
+  border-color: #bfd0e4;
+  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
+}
+
+.structure-section-pill.is-active {
+  border-color: #9eb6d8;
+  background: linear-gradient(180deg, #eef5ff 0%, #ffffff 100%);
+  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
+}
+
+.structure-section-pill-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999px;
+  background: #eaf1ff;
+  color: #214d99;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.structure-section-pill-copy {
+  display: grid;
+  gap: 1px;
+}
+
+.structure-section-pill-copy strong {
+  font-size: 14px;
+  line-height: 1.2;
+}
+
+.structure-section-pill-copy span {
+  color: #607086;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.structure-card {
+  display: grid;
+  gap: 8px;
+  padding: 16px;
+  border: 1px solid #d7e0ec;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
+}
+
+.structure-card h3 {
+  margin: 0;
+  font-size: 17px;
+  color: #142033;
+}
+
+.structure-card p {
+  margin: 0;
+  color: #5f7089;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.structure-card-muted {
+  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
+}
+
+.structure-card-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 9px;
+  border-radius: 999px;
+  background: #eaf1ff;
+  color: #214d99;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.structure-stat {
+  display: grid;
+  gap: 2px;
+}
+
+.structure-stat strong {
+  font-size: 22px;
+  line-height: 1;
+  color: #163566;
+}
+
+.structure-stat span {
+  color: #607086;
+  font-size: 12px;
+  font-weight: 700;
 }
 
 .columns.single {
   grid-template-columns: minmax(320px, 1fr);
 }
 
+.structure-columns-single {
+  grid-template-columns: 1fr;
+}
+
 .column {
   border: 1px solid #d7e0ec;
   border-radius: 16px;
@@ -685,6 +1035,10 @@ body {
   transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
 }
 
+.column.is-collapsed {
+  min-height: 0;
+}
+
 .column:hover {
   transform: translateY(-2px);
   border-color: #bfd0e4;
@@ -721,10 +1075,30 @@ body {
   flex: 1;
 }
 
+.column.is-collapsed .dropzone {
+  display: none;
+}
+
+.btn-compact {
+  min-height: 34px;
+  padding: 0 12px;
+}
+
 .dropzone.drag-over {
   background: #ecf5ff;
 }
 
+.structure-empty {
+  padding: 14px;
+  border: 1px dashed #cbd7e6;
+  border-radius: 14px;
+  background: #f8fbff;
+  color: #61718a;
+  font-size: 13px;
+  font-weight: 700;
+  text-align: center;
+}
+
 .field-card {
   background: rgba(255, 255, 255, 0.96);
   border: 1px solid #d7dfeb;
@@ -815,8 +1189,9 @@ body {
 }
 
 .category-switch select,
-.option-table select,
 .add-option-form input,
+.option-card input[type='text'],
+.option-table select,
 .option-table input[type='text'] {
   border: 1px solid #cbd5e1;
   border-radius: 10px;
@@ -832,10 +1207,6 @@ body {
   margin-bottom: 12px;
 }
 
-.option-table-wrap {
-  overflow-x: auto;
-}
-
 .option-table {
   width: 100%;
   border-collapse: collapse;
@@ -852,6 +1223,9 @@ body {
 .option-table th {
   background: #f8fbff;
   color: #3d4c63;
+  position: sticky;
+  top: 0;
+  z-index: 1;
 }
 
 .option-table-group-row th {
@@ -862,15 +1236,6 @@ body {
   letter-spacing: 0.04em;
 }
 
-.option-row {
-  cursor: grab;
-}
-
-.option-row.dragging {
-  opacity: 0.5;
-  background: #ecf5ff;
-}
-
 .drag-handle {
   display: inline-flex;
   align-items: center;
@@ -886,20 +1251,186 @@ body {
   user-select: none;
 }
 
+.option-card-list {
+  display: grid;
+  gap: 12px;
+}
+
+.option-card {
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+  border: 1px solid #d7e0ec;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
+  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
+  cursor: grab;
+  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
+}
+
+.option-card:hover {
+  transform: translateY(-1px);
+  border-color: #c4d4e7;
+  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.06);
+}
+
+.option-row.dragging {
+  opacity: 0.55;
+  background: #ecf5ff;
+  box-shadow: none;
+}
+
+.option-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.option-card-order {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.option-card-title-block {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.option-card-title-block strong {
+  color: #142033;
+  font-size: 15px;
+  line-height: 1.35;
+}
+
+.option-card-meta {
+  color: #61718a;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.option-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.option-card-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 1px solid #d7e1ee;
+  border-radius: 999px;
+  background: #f8fbff;
+  color: #294567;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.option-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.option-empty-state {
+  padding: 18px;
+  border: 1px dashed #c8d5e7;
+  border-radius: 16px;
+  background: #f8fbff;
+  color: #61718a;
+  font-size: 14px;
+  font-weight: 700;
+  text-align: center;
+}
+
 .options-actions {
   margin-top: 12px;
   display: flex;
   justify-content: flex-end;
 }
 
+.options-actions-sticky {
+  position: sticky;
+  bottom: 0;
+  z-index: 2;
+  padding-top: 12px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98) 32%);
+}
+
+.field-text-card-list {
+  display: grid;
+  gap: 12px;
+}
+
+.field-text-card {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid #d7e0ec;
+  border-radius: 18px;
+  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
+  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.04);
+}
+
+.field-text-card-head strong {
+  color: #142033;
+  font-size: 15px;
+}
+
+.field-text-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.custom-fields-surface .builder-entity-form {
+  gap: 10px;
+  padding: 14px;
+}
+
+.custom-fields-surface .builder-entity-grid {
+  gap: 10px;
+}
+
+.custom-fields-surface .builder-group-stack {
+  gap: 10px;
+}
+
+.custom-fields-surface .builder-group-card {
+  border-radius: 16px;
+}
+
+.custom-fields-surface .builder-group-head {
+  padding: 10px 12px;
+}
+
+.custom-fields-surface .builder-entity-card {
+  padding: 14px;
+  gap: 10px;
+  border-radius: 14px;
+}
+
+.custom-fields-surface .builder-entity-card-head strong {
+  font-size: 14px;
+}
+
 .builder-entity-form {
   display: grid;
   gap: 12px;
   margin-bottom: 14px;
-  padding: 14px;
+  padding: 16px;
   border: 1px solid #d7e0ec;
-  border-radius: 16px;
-  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
+  border-radius: 18px;
+  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
 }
 
 .builder-entity-head h3,
@@ -930,6 +1461,10 @@ body {
   font-weight: 800;
 }
 
+.builder-entity-control input[type='text'] {
+  width: 100%;
+}
+
 .builder-entity-control-narrow {
   max-width: 180px;
 }
@@ -946,9 +1481,10 @@ body {
 
 .builder-group-card {
   border: 1px solid #d7e0ec;
-  border-radius: 16px;
+  border-radius: 18px;
   background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
   overflow: hidden;
+  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
 }
 
 .builder-group-head {
@@ -962,12 +1498,13 @@ body {
 }
 
 .builder-entity-card {
-  padding: 14px;
+  padding: 16px;
   border: 1px solid #e5ebf3;
   border-radius: 16px;
   background: #ffffff;
   display: grid;
   gap: 12px;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
 }
 
 .builder-entity-card-head {
@@ -998,6 +1535,14 @@ body {
   overflow-wrap: anywhere;
 }
 
+.builder-inline-meta {
+  margin-top: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
 .builder-switch,
 .builder-switch-inline {
   display: inline-flex;
@@ -1042,7 +1587,7 @@ body {
 
 .section-rule-card {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 12px;
   padding: 14px 16px;
@@ -1063,6 +1608,20 @@ body {
   background: linear-gradient(180deg, #f5f8fc, #fbfdff);
 }
 
+.section-rule-order {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: #eaf1ff;
+  color: #23457a;
+  font-size: 12px;
+  font-weight: 800;
+  box-shadow: inset 0 0 0 1px #cdddff;
+}
+
 .section-rule-actions {
   display: inline-flex;
   align-items: center;
@@ -1172,9 +1731,6 @@ body {
     transition: none;
   }
 
-  .builder-accordion[open] .builder-panel-body {
-    animation: none;
-  }
 }
 
 @media (max-width: 1220px) {
@@ -1182,9 +1738,30 @@ body {
   .columns {
     grid-template-columns: repeat(2, minmax(220px, 1fr));
   }
+
+  .structure-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .structure-sidebar {
+    position: static;
+    grid-template-columns: repeat(2, minmax(220px, 1fr));
+  }
+
+  .structure-canvas {
+    overflow-x: visible;
+  }
 }
 
 @media (max-width: 900px) {
+  .builder-workspace {
+    grid-template-columns: 1fr;
+  }
+
+  .builder-sidebar {
+    position: static;
+  }
+
   .builder-hero,
   .builder-panel-head,
   .options-head,
@@ -1197,6 +1774,10 @@ body {
     justify-content: flex-start;
   }
 
+  .builder-panel-meta {
+    justify-content: flex-start;
+  }
+
   .builder-rule-layout {
     grid-template-columns: 1fr;
   }
@@ -1212,11 +1793,26 @@ body {
     grid-template-columns: 1fr;
   }
 
-  .field-rule-row,
-  .conditional-clause-row {
+  .structure-sidebar {
     grid-template-columns: 1fr;
   }
 
+  .field-rule-row,
+  .conditional-clause-row,
+  .conditional-sentence-row,
+  .field-text-card-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section-rule-card {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .section-rule-toggle {
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+  }
+
   .field-rule-status {
     justify-content: flex-start;
   }
diff --git a/backend/workflows/templates/workflows/form_builder.html b/backend/workflows/templates/workflows/form_builder.html
index 1380495..576a138 100644
--- a/backend/workflows/templates/workflows/form_builder.html
+++ b/backend/workflows/templates/workflows/form_builder.html
@@ -10,10 +10,51 @@
 {% block shell_body %}
 {% include 'workflows/includes/app_header.html' with header_show_home=1 header_inside_shell=1 %}
 
+    <div class="builder-workspace">
+      <aside class="builder-sidebar">
+        <div class="builder-sidebar-card">
+          <span class="builder-sidebar-eyebrow">{% trans "Arbeitsbereich" %}</span>
+          <h2>{% trans "Formularsteuerung" %}</h2>
+          <p>{% trans "Arbeiten Sie blockweise: zuerst Struktur, dann Regeln, danach Inhalte und Erweiterungen." %}</p>
+        </div>
+
+        <nav class="builder-side-nav" aria-label="{% trans 'Builder Navigation' %}">
+          <a class="builder-side-link{% if active_module == 'structure' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=structure">
+            <span class="builder-side-link-title">{% trans "Struktur & Reihenfolge" %}</span>
+            <span class="builder-side-link-meta">{{ columns|length }} {% trans "Abschnitte" %}</span>
+          </a>
+          <a class="builder-side-link{% if active_module == 'section-rules' or active_module == 'field-rules' or active_module == 'conditional-rules' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-rules">
+            <span class="builder-side-link-title">{% trans "Sichtbarkeit & Regeln" %}</span>
+            <span class="builder-side-link-meta">{{ builder_summary.hidden_field_count }} {% trans "ausgeblendet" %}</span>
+          </a>
+          <a class="builder-side-link{% if active_module == 'options' or active_module == 'field-texts' or active_module == 'custom-sections' or active_module == 'custom-fields' or active_module == 'preview' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=options">
+            <span class="builder-side-link-title">{% trans "Optionen & Texte" %}</span>
+            <span class="builder-side-link-meta">{{ builder_summary.custom_field_count }} {% trans "eigene Felder" %}</span>
+          </a>
+        </nav>
+
+        <div class="builder-sidebar-card builder-sidebar-stats">
+          <div class="builder-side-stat">
+            <strong>{{ builder_summary.configurable_field_count }}</strong>
+            <span>{% trans "konfigurierbare Felder" %}</span>
+          </div>
+          <div class="builder-side-stat">
+            <strong>{{ builder_summary.custom_section_count }}</strong>
+            <span>{% trans "eigene Abschnitte" %}</span>
+          </div>
+          <div class="builder-side-stat">
+            <strong>{{ builder_summary.custom_field_count }}</strong>
+            <span>{% trans "eigene Felder" %}</span>
+          </div>
+        </div>
+      </aside>
+
+      <main class="builder-main">
     <section class="builder-hero">
       <div class="builder-hero-copy">
         <span class="builder-eyebrow">{% trans "Deployment Configuration" %}</span>
         <h1>{% trans "Form Builder" %}</h1>
+        <p class="builder-hero-sub">{% trans "Steuern Sie Struktur, Regeln und Inhalte Ihrer Standard-Workflows an einem Ort." %}</p>
       </div>
       <div class="builder-hero-actions">
         {% for key, label in form_types %}
@@ -32,75 +73,150 @@
 
     <div id="status-message" class="status" aria-live="polite"></div>
 
-    <details class="builder-panel builder-accordion js-single-accordion" data-accordion-group="builder-panels" id="builder-structure" {% if active_panel == 'builder-structure' %}open{% endif %}>
-      <summary class="builder-panel-summary">
+    <section class="builder-panel builder-module-surface{% if active_module != 'structure' %} builder-module-hidden{% endif %}" id="builder-structure">
+      <div class="builder-panel-body builder-panel-body-static">
         <div class="builder-panel-head">
-          <div>
+          <div class="builder-panel-copy">
             <h2>{% trans "Struktur & Reihenfolge" %}</h2>
+            <p class="builder-panel-sub">{% trans "Ordnen Sie Abschnitte und Felder in der Reihenfolge, in der sie im Formular erscheinen sollen." %}</p>
+          </div>
+          <div class="builder-panel-meta">
+            <span class="builder-panel-count">{{ columns|length }} {% trans "Abschnitte" %}</span>
+            <span class="builder-panel-count">{{ builder_summary.configurable_field_count }} {% trans "konfigurierbare Felder" %}</span>
           </div>
-          <span class="builder-panel-toggle">{% trans "Geöffnet" %}</span>
         </div>
-      </summary>
-      <div class="builder-panel-body">
 
-      <div class="columns {% if columns|length == 1 %}single{% endif %}" id="builder-columns" data-form-type="{{ form_type }}">
-        {% for column in columns %}
-        <section class="column" data-column-key="{{ column.key }}">
-          <div class="column-head">
-            <h3>{{ column.title }}</h3>
-            <span class="column-count">{% blocktrans trimmed with count=column.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
-          </div>
-          <div class="dropzone" data-column-key="{{ column.key }}">
-            {% for item in column.items %}
-            <article class="field-card" draggable="true" data-field-name="{{ item.field_name }}">
-              <div class="field-main">
-                <div class="field-label">{{ item.label }}</div>
-                <div class="field-name">{{ item.field_name }}</div>
-              </div>
-              <div class="badges">
-                {% if item.is_custom %}<span class="badge">{% trans "Eigen" %}</span>{% endif %}
-                {% if item.locked %}<span class="badge locked">{% trans "Fix" %}</span>{% endif %}
-                {% if not item.is_visible %}<span class="badge hidden">{% trans "Ausgeblendet" %}</span>{% endif %}
-                {% if item.is_required %}<span class="badge required">{% trans "Pflicht" %}</span>{% endif %}
-              </div>
-            </article>
-            {% endfor %}
-          </div>
-        </section>
-        {% endfor %}
-      </div>
-      </div>
-    </details>
+        <div class="structure-workspace">
+          <aside class="structure-sidebar">
+            <section class="structure-card">
+              <span class="structure-card-eyebrow">{% trans "Arbeitsmodus" %}</span>
+              <h3>{% trans "Direkte Anordnung" %}</h3>
+              <p>{% trans "Verschieben Sie Felder direkt zwischen Abschnitten. Die Reihenfolge wird erst mit dem globalen Speichern oben übernommen." %}</p>
+            </section>
 
-    <details class="builder-panel builder-accordion js-single-accordion" data-accordion-group="builder-panels" id="builder-rules" {% if active_panel == 'builder-rules' %}open{% endif %}>
-      <summary class="builder-panel-summary">
+            <section class="structure-card structure-card-muted">
+              <div class="structure-stat">
+                <strong>{{ columns|length }}</strong>
+                <span>{% trans "aktive Abschnitte" %}</span>
+              </div>
+              <div class="structure-stat">
+                <strong>{{ builder_summary.custom_field_count }}</strong>
+                <span>{% trans "eigene Felder" %}</span>
+              </div>
+              <div class="structure-stat">
+                <strong>{{ builder_summary.hidden_field_count }}</strong>
+                <span>{% trans "ausgeblendete Felder" %}</span>
+              </div>
+            </section>
+          </aside>
+
+          <div class="structure-canvas">
+            <nav class="structure-section-nav" aria-label="{% trans 'Abschnitte' %}">
+              {% for column in columns %}
+              <a class="structure-section-pill{% if active_structure_section == column.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=structure&structure_section={{ column.key }}">
+                <span class="structure-section-pill-index">{{ forloop.counter }}</span>
+                <span class="structure-section-pill-copy">
+                  <strong>{{ column.title }}</strong>
+                  <span>{% blocktrans trimmed with count=column.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
+                </span>
+              </a>
+              {% endfor %}
+            </nav>
+
+            <div class="columns structure-columns-single" id="builder-columns" data-form-type="{{ form_type }}">
+              {% for column in columns %}
+              {% if active_structure_section == column.key %}
+              <section class="column is-active" data-column-key="{{ column.key }}">
+                <div class="column-head">
+                  <div>
+                    <h3>{{ column.title }}</h3>
+                    <span class="column-count">{% blocktrans trimmed with count=column.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
+                  </div>
+                  <span class="builder-panel-count">{% trans "Geöffnet" %}</span>
+                </div>
+                <div class="dropzone" data-column-key="{{ column.key }}">
+                  {% for item in column.items %}
+                  <article class="field-card" draggable="true" data-field-name="{{ item.field_name }}">
+                    <div class="field-main">
+                      <div class="field-label">{{ item.label }}</div>
+                      <div class="field-name">{{ item.field_name }}</div>
+                    </div>
+                    <div class="badges">
+                      {% if item.is_custom %}<span class="badge">{% trans "Eigen" %}</span>{% endif %}
+                      {% if item.locked %}<span class="badge locked">{% trans "Fix" %}</span>{% endif %}
+                      {% if not item.is_visible %}<span class="badge hidden">{% trans "Ausgeblendet" %}</span>{% endif %}
+                      {% if item.is_required %}<span class="badge required">{% trans "Pflicht" %}</span>{% endif %}
+                    </div>
+                  </article>
+                  {% empty %}
+                  <div class="structure-empty">{% trans "Noch keine Felder in diesem Abschnitt." %}</div>
+                  {% endfor %}
+                </div>
+              </section>
+              {% endif %}
+              {% endfor %}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="builder-panel builder-module-surface{% if active_module != 'section-rules' and active_module != 'field-rules' and active_module != 'conditional-rules' %} builder-module-hidden{% endif %}" id="builder-rules">
+      <div class="builder-panel-body builder-panel-body-static">
         <div class="builder-panel-head">
-          <div>
+          <div class="builder-panel-copy">
             <h2>{% trans "Sichtbarkeit & Regeln" %}</h2>
+            <p class="builder-panel-sub">{% trans "Legen Sie fest, welche Teile sichtbar, erforderlich oder regelgesteuert sein sollen." %}</p>
+          </div>
+          <div class="builder-panel-meta">
+            <span class="builder-panel-count">{{ builder_summary.hidden_field_count }} {% trans "ausgeblendet" %}</span>
+            <span class="builder-panel-count">{{ builder_summary.hidden_section_count }} {% trans "versteckte Abschnitte" %}</span>
           </div>
-          <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
         </div>
-      </summary>
-      <div class="builder-panel-body">
+
+      <nav class="builder-module-nav" aria-label="{% trans 'Regelmodule' %}">
+        <a class="builder-module-link{% if active_module == 'section-rules' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=section-rules">{% trans "Abschnitte" %}</a>
+        <a class="builder-module-link{% if active_module == 'field-rules' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-rules">{% trans "Feldregeln" %}</a>
+        {% if form_type == 'onboarding' %}
+        <a class="builder-module-link{% if active_module == 'conditional-rules' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=conditional-rules">{% trans "Bedingte Logik" %}</a>
+        {% endif %}
+      </nav>
 
       <div class="builder-stack-layout">
-        <details class="options-panel nested-accordion js-single-accordion" data-accordion-group="builder-rules-subpanels" {% if active_rules_panel == 'section-rules' %}open{% endif %}>
-          <summary class="nested-accordion-summary">
+        {% if active_module == 'section-rules' %}
+        <section class="options-panel builder-module-card custom-fields-surface">
+          <div class="module-card-body">
             <div class="options-head">
-              <h2>{% trans "Abschnitte steuern" %}</h2>
-              <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
+              <div class="options-copy">
+                <h2>{% trans "Abschnitte steuern" %}</h2>
+                <p class="options-sub">{% trans "Reihenfolge und Sichtbarkeit der Formularabschnitte." %}</p>
+              </div>
+              <div class="builder-panel-meta">
+                <span class="builder-panel-count">{{ section_rule_items|length }} {% trans "Abschnitte" %}</span>
+              </div>
             </div>
-          </summary>
-          <div class="nested-accordion-body">
           <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
             {% csrf_token %}
+            <input type="hidden" name="section_rules_section" value="{{ active_section_rules_section }}" />
+            <nav class="structure-section-nav" aria-label="{% trans 'Abschnittsregeln' %}">
+              {% for section in section_rule_items %}
+              <a class="structure-section-pill{% if active_section_rules_section == section.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=section-rules&section_rules_section={{ section.key }}">
+                <span class="structure-section-pill-copy">
+                  <strong>{{ section.title }}</strong>
+                  <span>{% blocktrans trimmed with count=section.field_count %}{{ count }} Feld/Felder{% endblocktrans %}</span>
+                </span>
+              </a>
+              {% endfor %}
+            </nav>
             <div class="section-rule-grid" id="section-rule-grid">
               {% for section in section_rule_items %}
+              {% if active_section_rules_section == section.key %}
               <article
                 class="section-rule-card{% if section.locked %} is-locked{% endif %}"
                 data-section-key="{{ section.key }}"
               >
                 <input type="hidden" name="section_order" value="{{ section.key }}" />
+                <div class="section-rule-order">{{ forloop.counter }}</div>
                 <div class="section-rule-actions">
                   <button class="section-move-btn" type="button" data-move-section="up" aria-label="{% trans 'Nach oben' %}" title="{% trans 'Nach oben' %}">
                     <span aria-hidden="true">↑</span>
@@ -129,27 +245,44 @@
                   </span>
                 </div>
               </article>
+              {% endif %}
               {% endfor %}
             </div>
-            <div class="options-actions">
+            <div class="options-actions options-actions-sticky">
               <button class="btn btn-primary" type="submit" name="builder_action" value="save_section_rules">{% trans "Abschnittsregeln speichern" %}</button>
             </div>
           </form>
           </div>
-        </details>
+        </section>
+        {% elif active_module == 'field-rules' %}
 
-        <details class="options-panel nested-accordion js-single-accordion" data-accordion-group="builder-rules-subpanels" {% if active_rules_panel == 'field-rules' %}open{% endif %}>
-          <summary class="nested-accordion-summary">
+        <section class="options-panel builder-module-card">
+          <div class="module-card-body">
             <div class="options-head">
-              <h2>{% trans "Feldregeln verwalten" %}</h2>
-              <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
+              <div class="options-copy">
+                <h2>{% trans "Feldregeln verwalten" %}</h2>
+                <p class="options-sub">{% trans "Steuern Sie Sichtbarkeit und Pflichtstatus für einzelne Felder." %}</p>
+              </div>
+              <div class="builder-panel-meta">
+                <span class="builder-panel-count">{{ builder_summary.configurable_field_count }} {% trans "konfigurierbar" %}</span>
+              </div>
             </div>
-          </summary>
-          <div class="nested-accordion-body">
           <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
             {% csrf_token %}
+            <input type="hidden" name="field_rules_section" value="{{ active_field_rules_section }}" />
+            <nav class="structure-section-nav" aria-label="{% trans 'Feldregel-Abschnitte' %}">
+              {% for group in field_rule_groups %}
+              <a class="structure-section-pill{% if active_field_rules_section == group.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-rules&field_rules_section={{ group.key }}">
+                <span class="structure-section-pill-copy">
+                  <strong>{{ group.title }}</strong>
+                  <span>{% blocktrans trimmed with count=group.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
+                </span>
+              </a>
+              {% endfor %}
+            </nav>
             <div class="field-rule-groups">
               {% for group in field_rule_groups %}
+              {% if active_field_rules_section == group.key %}
               <section class="field-rule-group">
                 <div class="field-rule-group-head">
                   <h3>{{ group.title }}</h3>
@@ -161,30 +294,34 @@
                     <div class="field-rule-main">
                       <input type="hidden" name="field_rule_ids" value="{{ item.id }}" />
                       <strong>{{ item.label }}</strong>
-                      <div class="mini">{{ item.field_name }}</div>
+                      <div class="field-rule-meta">
+                        <span class="entity-meta">{{ item.field_name }}</span>
+                        <div class="field-rule-status field-rule-status-inline">
+                          {% if item.locked %}
+                          <span class="badge locked">{% trans "Fix" %}</span>
+                          {% elif not item.is_visible %}
+                          <span class="badge hidden">{% trans "Ausgeblendet" %}</span>
+                          {% elif item.is_required %}
+                          <span class="badge required">{% trans "Pflicht" %}</span>
+                          {% else %}
+                          <span class="badge">{% trans "Flexibel" %}</span>
+                          {% endif %}
+                        </div>
+                      </div>
                     </div>
-                    <label class="field-rule-control">
-                      <span>{% trans "Sichtbar" %}</span>
-                      <input type="checkbox" name="is_visible_{{ item.id }}" {% if item.is_visible %}checked{% endif %} {% if item.locked %}disabled{% endif %}/>
-                    </label>
-                    <label class="field-rule-control">
-                      <span>{% trans "Pflicht" %}</span>
-                      <select name="is_required_{{ item.id }}" {% if item.locked %}disabled{% endif %}>
-                        <option value="" {% if item.is_required is None %}selected{% endif %}>{% trans "Standard" %}</option>
-                        <option value="required" {% if item.is_required is True %}selected{% endif %}>{% trans "Pflicht" %}</option>
-                        <option value="optional" {% if item.is_required is False %}selected{% endif %}>{% trans "Optional" %}</option>
-                      </select>
-                    </label>
-                    <div class="field-rule-status">
-                      {% if item.locked %}
-                      <span class="badge locked">{% trans "Fix" %}</span>
-                      {% elif not item.is_visible %}
-                      <span class="badge hidden">{% trans "Ausgeblendet" %}</span>
-                      {% elif item.is_required %}
-                      <span class="badge required">{% trans "Pflicht" %}</span>
-                      {% else %}
-                      <span class="badge">{% trans "Flexibel" %}</span>
-                      {% endif %}
+                    <div class="field-rule-settings">
+                      <label class="field-rule-control field-rule-control-compact">
+                        <span>{% trans "Sichtbar" %}</span>
+                        <input type="checkbox" name="is_visible_{{ item.id }}" {% if item.is_visible %}checked{% endif %} {% if item.locked %}disabled{% endif %}/>
+                      </label>
+                      <label class="field-rule-control field-rule-control-compact">
+                        <span>{% trans "Pflicht" %}</span>
+                        <select name="is_required_{{ item.id }}" {% if item.locked %}disabled{% endif %}>
+                          <option value="" {% if item.is_required is None %}selected{% endif %}>{% trans "Standard" %}</option>
+                          <option value="required" {% if item.is_required is True %}selected{% endif %}>{% trans "Pflicht" %}</option>
+                          <option value="optional" {% if item.is_required is False %}selected{% endif %}>{% trans "Optional" %}</option>
+                        </select>
+                      </label>
                     </div>
                   </div>
                   {% empty %}
@@ -192,28 +329,44 @@
                   {% endfor %}
                 </div>
               </section>
+              {% endif %}
               {% endfor %}
             </div>
-            <div class="options-actions">
+            <div class="options-actions options-actions-sticky">
               <button class="btn btn-primary" type="submit" name="builder_action" value="save_field_rules">{% trans "Feldregeln speichern" %}</button>
             </div>
           </form>
           </div>
-        </details>
+        </section>
+        {% elif form_type == 'onboarding' and active_module == 'conditional-rules' %}
 
-        {% if form_type == 'onboarding' %}
-        <details class="options-panel nested-accordion js-single-accordion" data-accordion-group="builder-rules-subpanels" {% if active_rules_panel == 'conditional-rules' %}open{% endif %}>
-          <summary class="nested-accordion-summary">
+        <section class="options-panel builder-module-card">
+          <div class="module-card-body">
             <div class="options-head">
-              <h2>{% trans "Bedingte Logik" %}</h2>
-              <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
+              <div class="options-copy">
+                <h2>{% trans "Bedingte Logik" %}</h2>
+                <p class="options-sub">{% trans "Lassen Sie Felder abhängig von anderen Antworten ein- oder ausblenden." %}</p>
+              </div>
+              <div class="builder-panel-meta">
+                <span class="builder-panel-count">{{ conditional_rule_items|length }} {% trans "Regeln" %}</span>
+              </div>
             </div>
-          </summary>
-          <div class="nested-accordion-body">
           <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
             {% csrf_token %}
+            <input type="hidden" name="conditional_target" value="{{ active_conditional_target }}" />
+            <nav class="structure-section-nav" aria-label="{% trans 'Bedingte Regeln' %}">
+              {% for item in conditional_rule_items %}
+              <a class="structure-section-pill{% if active_conditional_target == item.target_key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=conditional-rules&conditional_target={{ item.target_key }}">
+                <span class="structure-section-pill-copy">
+                  <strong>{{ item.title }}</strong>
+                  <span>{% blocktrans trimmed with count=item.target_fields|length %}{{ count }} Ziel-Feld/Felder{% endblocktrans %}</span>
+                </span>
+              </a>
+              {% endfor %}
+            </nav>
             <div class="conditional-rule-grid">
               {% for item in conditional_rule_items %}
+              {% if active_conditional_target == item.target_key %}
               <section class="conditional-rule-card">
                 <div class="conditional-rule-head">
                   <div class="conditional-rule-head-main">
@@ -228,6 +381,26 @@
                     <input type="checkbox" name="conditional_active_{{ item.target_key }}" {% if item.is_active %}checked{% endif %} />
                   </label>
                 </div>
+                <div class="conditional-rule-summary">
+                  <span class="conditional-summary-prefix">{% trans "Sichtbar, wenn" %}</span>
+                  <div class="conditional-summary-chips">
+                    {% with first_clause=item.clauses.0 second_clause=item.clauses.1 %}
+                      {% if first_clause.field %}
+                        <span class="preview-chip">{{ first_clause.field }}</span>
+                        <span class="preview-chip">{{ first_clause.operator }}</span>
+                        {% if first_clause.value %}<span class="preview-chip">{{ first_clause.value }}</span>{% endif %}
+                      {% else %}
+                        <span class="preview-chip">{% trans "Keine Bedingung" %}</span>
+                      {% endif %}
+                      {% if second_clause.field %}
+                        <span class="preview-chip">{% trans "und" %}</span>
+                        <span class="preview-chip">{{ second_clause.field }}</span>
+                        <span class="preview-chip">{{ second_clause.operator }}</span>
+                        {% if second_clause.value %}<span class="preview-chip">{{ second_clause.value }}</span>{% endif %}
+                      {% endif %}
+                    {% endwith %}
+                  </div>
+                </div>
                 <div class="conditional-targets">
                   <span class="conditional-target-label">{% trans "Steuert" %}</span>
                   <div class="conditional-target-chips">
@@ -238,105 +411,94 @@
                     {% endfor %}
                   </div>
                 </div>
-                <div class="conditional-clause-list">
+                <div class="conditional-sentence-builder">
                   {% with first_clause=item.clauses.0 second_clause=item.clauses.1 %}
-                  <div class="conditional-clause-row">
-                    <div class="conditional-clause-index">
-                      {% trans "Wenn" %}
-                    </div>
-                    <label class="conditional-clause-control conditional-clause-field">
-                      <span>{% trans "Feld" %}</span>
-                      <select name="conditional_field_{{ item.target_key }}_0">
-                        <option value="">{% trans "Keine" %}</option>
-                        {% for value, label in item.field_choices %}
-                        <option value="{{ value }}" {% if first_clause.field == value %}selected{% endif %}>{{ label }}</option>
-                        {% endfor %}
-                      </select>
-                    </label>
-                    <label class="conditional-clause-control conditional-clause-operator">
-                      <span>{% trans "Operator" %}</span>
-                      <select name="conditional_operator_{{ item.target_key }}_0">
-                        {% for value, label in item.operator_choices %}
-                        <option value="{{ value }}" {% if first_clause.operator == value %}selected{% endif %}>{{ label }}</option>
-                        {% endfor %}
-                      </select>
-                    </label>
-                    <label class="conditional-clause-control conditional-clause-value">
-                      <span>{% trans "Wert" %}</span>
-                      <input type="text" name="conditional_value_{{ item.target_key }}_0" value="{{ first_clause.value }}" {% if first_clause.operator == 'checked' %}placeholder="{% trans 'wird ignoriert' %}"{% endif %} />
-                    </label>
+                  <div class="conditional-sentence-row">
+                    <span class="conditional-sentence-label">{% trans "Zeige dieses Element, wenn" %}</span>
+                    <select name="conditional_field_{{ item.target_key }}_0">
+                      <option value="">{% trans "Keine" %}</option>
+                      {% for value, label in item.field_choices %}
+                      <option value="{{ value }}" {% if first_clause.field == value %}selected{% endif %}>{{ label }}</option>
+                      {% endfor %}
+                    </select>
+                    <select name="conditional_operator_{{ item.target_key }}_0">
+                      {% for value, label in item.operator_choices %}
+                      <option value="{{ value }}" {% if first_clause.operator == value %}selected{% endif %}>{{ label }}</option>
+                      {% endfor %}
+                    </select>
+                    <input type="text" name="conditional_value_{{ item.target_key }}_0" value="{{ first_clause.value }}" placeholder="{% trans 'Wert' %}" />
                   </div>
                   <details class="conditional-extra-clause" {% if second_clause.field %}open{% endif %}>
                     <summary>{% trans "Zusätzliche Bedingung" %}</summary>
-                    <div class="conditional-clause-row conditional-clause-row-secondary">
-                      <div class="conditional-clause-index">
-                        {% trans "Und" %}
-                      </div>
-                      <label class="conditional-clause-control conditional-clause-field">
-                        <span>{% trans "Feld" %}</span>
-                        <select name="conditional_field_{{ item.target_key }}_1">
-                          <option value="">{% trans "Keine" %}</option>
-                          {% for value, label in item.field_choices %}
-                          <option value="{{ value }}" {% if second_clause.field == value %}selected{% endif %}>{{ label }}</option>
-                          {% endfor %}
-                        </select>
-                      </label>
-                      <label class="conditional-clause-control conditional-clause-operator">
-                        <span>{% trans "Operator" %}</span>
-                        <select name="conditional_operator_{{ item.target_key }}_1">
-                          {% for value, label in item.operator_choices %}
-                          <option value="{{ value }}" {% if second_clause.operator == value %}selected{% endif %}>{{ label }}</option>
-                          {% endfor %}
-                        </select>
-                      </label>
-                      <label class="conditional-clause-control conditional-clause-value">
-                        <span>{% trans "Wert" %}</span>
-                        <input type="text" name="conditional_value_{{ item.target_key }}_1" value="{{ second_clause.value }}" {% if second_clause.operator == 'checked' %}placeholder="{% trans 'wird ignoriert' %}"{% endif %} />
-                      </label>
+                    <div class="conditional-sentence-row conditional-sentence-row-secondary">
+                      <span class="conditional-sentence-label">{% trans "Und zusätzlich" %}</span>
+                      <select name="conditional_field_{{ item.target_key }}_1">
+                        <option value="">{% trans "Keine" %}</option>
+                        {% for value, label in item.field_choices %}
+                        <option value="{{ value }}" {% if second_clause.field == value %}selected{% endif %}>{{ label }}</option>
+                        {% endfor %}
+                      </select>
+                      <select name="conditional_operator_{{ item.target_key }}_1">
+                        {% for value, label in item.operator_choices %}
+                        <option value="{{ value }}" {% if second_clause.operator == value %}selected{% endif %}>{{ label }}</option>
+                        {% endfor %}
+                      </select>
+                      <input type="text" name="conditional_value_{{ item.target_key }}_1" value="{{ second_clause.value }}" placeholder="{% trans 'Wert' %}" />
                     </div>
                   </details>
                   {% endwith %}
                 </div>
+                <div class="conditional-clause-list">
+                  <span class="mini">{% trans "Nutzen Sie die zusätzliche Bedingung nur, wenn ein zweites Kriterium wirklich nötig ist." %}</span>
+                </div>
               </section>
+              {% endif %}
               {% endfor %}
             </div>
-            <div class="options-actions">
+            <div class="options-actions options-actions-sticky">
               <button class="btn btn-primary" type="submit" name="builder_action" value="save_conditional_rules">{% trans "Bedingte Logik speichern" %}</button>
             </div>
           </form>
           </div>
-        </details>
+        </section>
         {% endif %}
       </div>
       </div>
-    </details>
+    </section>
 
-    <details class="builder-panel builder-accordion js-single-accordion" data-accordion-group="builder-panels" id="builder-content" {% if active_panel == 'builder-content' %}open{% endif %}>
-      <summary class="builder-panel-summary">
+    <section class="builder-panel builder-module-surface{% if active_module != 'options' and active_module != 'field-texts' and active_module != 'custom-sections' and active_module != 'custom-fields' and active_module != 'preview' %} builder-module-hidden{% endif %}" id="builder-content">
+      <div class="builder-panel-body builder-panel-body-static">
         <div class="builder-panel-head">
-          <div>
+          <div class="builder-panel-copy">
             <h2>{% trans "Optionen & Texte" %}</h2>
+            <p class="builder-panel-sub">{% trans "Pflegen Sie Auswahlwerte, Feldtexte und benutzerdefinierte Erweiterungen." %}</p>
+          </div>
+          <div class="builder-panel-meta">
+            <span class="builder-panel-count">{{ builder_summary.custom_field_count }} {% trans "eigene Felder" %}</span>
+            {% if form_type == 'onboarding' %}
+            <span class="builder-panel-count">{{ builder_summary.custom_section_count }} {% trans "eigene Abschnitte" %}</span>
+            {% endif %}
           </div>
-          <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
         </div>
-      </summary>
-      <div class="builder-panel-body">
+
+      <nav class="builder-module-nav" aria-label="{% trans 'Inhaltsmodule' %}">
+        <a class="builder-module-link{% if active_module == 'options' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=options">{% trans "Optionen" %}</a>
+        <a class="builder-module-link{% if active_module == 'field-texts' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-texts">{% trans "Feldtexte" %}</a>
+        {% if form_type == 'onboarding' %}
+        <a class="builder-module-link{% if active_module == 'custom-sections' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=custom-sections">{% trans "Eigene Abschnitte" %}</a>
+        {% endif %}
+        <a class="builder-module-link{% if active_module == 'custom-fields' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=custom-fields">{% trans "Eigene Felder" %}</a>
+        <a class="builder-module-link{% if active_module == 'preview' %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=preview">{% trans "Vorschau" %}</a>
+      </nav>
 
       <div class="builder-stack-layout">
-        <details class="options-panel nested-accordion js-single-accordion" data-accordion-group="builder-content-subpanels" {% if active_subpanel == 'options' %}open{% endif %}>
-          <summary class="nested-accordion-summary">
-            <div class="options-head">
-              <h2>{% trans "Optionen verwalten" %}</h2>
-              <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
-            </div>
-          </summary>
-          <div class="nested-accordion-body">
+        {% if active_module == 'options' %}
+        <section class="options-panel builder-module-card">
+          <div class="module-card-body">
             <div class="options-head options-head-inline">
               <form class="category-switch" method="get" action="/admin-tools/form-builder/">
                 <input type="hidden" name="form_type" value="{{ form_type }}" />
-                <input type="hidden" name="anchor" value="builder-content" />
-                <input type="hidden" name="panel" value="builder-content" />
-                <input type="hidden" name="subpanel" value="options" />
+                <input type="hidden" name="module" value="options" />
                 <label for="option_category">{% trans "Kategorie" %}</label>
                 <select id="option_category" name="option_category" onchange="this.form.submit()">
                   {% for value, label in option_categories %}
@@ -358,106 +520,130 @@
 
             <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
               {% csrf_token %}
-              <div class="option-table-wrap">
-                <table class="option-table">
-                  <thead>
-                    <tr>
-                      <th>{% trans "Sortierung" %}</th>
-                      <th>{% trans "Label (DE)" %}</th>
-                      <th>{% trans "Label (EN)" %}</th>
-                      <th>Value</th>
-                      <th>{% trans "Aktiv" %}</th>
-                      <th>{% trans "Löschen" %}</th>
-                    </tr>
-                  </thead>
-                  <tbody id="option-table-body">
-                    {% for item in option_items %}
-                    <tr class="option-row" draggable="true" data-option-row="1">
-                      <td>
-                        <input type="hidden" name="option_ids" value="{{ item.id }}" />
-                        <span class="drag-handle" title="{% trans 'Ziehen zum Sortieren' %}">⋮⋮</span>
-                      </td>
-                      <td><input type="text" name="label_{{ item.id }}" value="{{ item.label }}" required /></td>
-                      <td><input type="text" name="label_en_{{ item.id }}" value="{{ item.label_en }}" /></td>
-                      <td><input type="text" name="value_{{ item.id }}" value="{{ item.value }}" /></td>
-                      <td><input type="checkbox" name="active_{{ item.id }}" {% if item.is_active %}checked{% endif %} /></td>
-                      <td>
-                        <button class="btn btn-secondary" type="submit" name="delete_option_id" value="{{ item.id }}" data-confirm="{% trans 'Option wirklich löschen?' %}">{% trans "Löschen" %}</button>
-                      </td>
-                    </tr>
-                    {% empty %}
-                    <tr><td colspan="6">{% trans "Keine Optionen in dieser Kategorie." %}</td></tr>
-                    {% endfor %}
-                  </tbody>
-                </table>
+              <div class="option-card-list" id="option-table-body">
+                {% for item in option_items %}
+                <article class="option-row option-card" draggable="true" data-option-row="1">
+                  <input type="hidden" name="option_ids" value="{{ item.id }}" />
+                  <div class="option-card-head">
+                    <div class="option-card-order">
+                      <span class="drag-handle" title="{% trans 'Ziehen zum Sortieren' %}">⋮⋮</span>
+                      <div class="option-card-title-block">
+                        <strong>{{ item.label }}</strong>
+                        <span class="option-card-meta">#{{ forloop.counter }}{% if item.value %} · {{ item.value }}{% endif %}</span>
+                      </div>
+                    </div>
+                    <div class="option-card-actions">
+                      <label class="option-card-toggle">
+                        <input type="checkbox" name="active_{{ item.id }}" {% if item.is_active %}checked{% endif %} />
+                        <span>{% trans "Aktiv" %}</span>
+                      </label>
+                      <button class="btn btn-secondary" type="submit" name="delete_option_id" value="{{ item.id }}" data-confirm="{% trans 'Option wirklich löschen?' %}">{% trans "Löschen" %}</button>
+                    </div>
+                  </div>
+                  <div class="option-card-grid">
+                    <label class="builder-entity-control">
+                      <span>{% trans "Label (DE)" %}</span>
+                      <input type="text" name="label_{{ item.id }}" value="{{ item.label }}" required />
+                    </label>
+                    <label class="builder-entity-control">
+                      <span>{% trans "Label (EN)" %}</span>
+                      <input type="text" name="label_en_{{ item.id }}" value="{{ item.label_en }}" />
+                    </label>
+                    <label class="builder-entity-control">
+                      <span>Value</span>
+                      <input type="text" name="value_{{ item.id }}" value="{{ item.value }}" />
+                    </label>
+                  </div>
+                </article>
+                {% empty %}
+                <div class="option-empty-state">{% trans "Keine Optionen in dieser Kategorie." %}</div>
+                {% endfor %}
               </div>
-              <div class="options-actions">
+              <div class="options-actions options-actions-sticky">
                 <button class="btn btn-primary" type="submit" name="builder_action" value="save_options">{% trans "Optionen speichern" %}</button>
               </div>
             </form>
           </div>
-        </details>
+        </section>
+        {% elif active_module == 'field-texts' %}
 
-        <details class="options-panel nested-accordion js-single-accordion" data-accordion-group="builder-content-subpanels" {% if active_subpanel == 'field-texts' %}open{% endif %}>
-          <summary class="nested-accordion-summary">
+        <section class="options-panel builder-module-card">
+          <div class="module-card-body">
             <div class="options-head">
-              <h2>{% trans "Feldtexte verwalten" %}</h2>
-              <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
+              <div class="options-copy">
+                <h2>{% trans "Feldtexte verwalten" %}</h2>
+                <p class="options-sub">{% trans "Überschreiben Sie Labels und Hilfetexte pro Feld." %}</p>
+              </div>
             </div>
-          </summary>
-          <div class="nested-accordion-body">
             <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
               {% csrf_token %}
-              <div class="option-table-wrap">
-                <table class="option-table">
-                  <thead>
-                    <tr>
-                      <th>{% trans "Feld" %}</th>
-                      <th>{% trans "Label (DE)" %}</th>
-                      <th>{% trans "Label (EN)" %}</th>
-                      <th>{% trans "Hilfetext (DE)" %}</th>
-                      <th>{% trans "Hilfetext (EN)" %}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {% for group in field_text_groups %}
-                    <tr class="option-table-group-row">
-                      <th colspan="5">{{ group.title }}</th>
-                    </tr>
-                    {% for item in group.items %}
-                    <tr>
-                      <td>
-                        <input type="hidden" name="field_ids" value="{{ item.id }}" />
-                        <strong>{{ item.field_name }}</strong>
-                      </td>
-                      <td><input type="text" name="label_override_{{ item.id }}" value="{{ item.label_override }}" placeholder="{% trans 'Fallback: Standardlabel' %}" /></td>
-                      <td><input type="text" name="label_override_en_{{ item.id }}" value="{{ item.label_override_en }}" placeholder="{% trans 'English label' %}" /></td>
-                      <td><input type="text" name="help_text_override_{{ item.id }}" value="{{ item.help_text_override }}" placeholder="{% trans 'Optionaler Hilfetext' %}" /></td>
-                      <td><input type="text" name="help_text_override_en_{{ item.id }}" value="{{ item.help_text_override_en }}" placeholder="{% trans 'Optional English help text' %}" /></td>
-                    </tr>
-                    {% empty %}
-                    <tr><td colspan="5">{% trans "Keine Feldkonfigurationen verfügbar." %}</td></tr>
-                    {% endfor %}
-                    {% endfor %}
-                  </tbody>
-                </table>
+              <input type="hidden" name="field_texts_section" value="{{ active_field_texts_section }}" />
+              <nav class="structure-section-nav" aria-label="{% trans 'Feldtext-Abschnitte' %}">
+                {% for group in field_text_groups %}
+                <a class="structure-section-pill{% if active_field_texts_section == group.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=field-texts&field_texts_section={{ group.key }}">
+                  <span class="structure-section-pill-copy">
+                    <strong>{{ group.title }}</strong>
+                    <span>{% blocktrans trimmed with count=group.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
+                  </span>
+                </a>
+                {% endfor %}
+              </nav>
+              <div class="field-text-card-list">
+                {% for group in field_text_groups %}
+                {% if active_field_texts_section == group.key %}
+                {% for item in group.items %}
+                <article class="field-text-card">
+                  <input type="hidden" name="field_ids" value="{{ item.id }}" />
+                  <div class="field-text-card-head">
+                    <div>
+                      <strong>{{ item.label_override|default:item.field_name }}</strong>
+                      <div class="entity-meta">{{ item.field_name }}</div>
+                    </div>
+                  </div>
+                  <div class="field-text-card-grid">
+                    <label class="builder-entity-control">
+                      <span>{% trans "Label (DE)" %}</span>
+                      <input type="text" name="label_override_{{ item.id }}" value="{{ item.label_override }}" placeholder="{% trans 'Fallback: Standardlabel' %}" />
+                    </label>
+                    <label class="builder-entity-control">
+                      <span>{% trans "Label (EN)" %}</span>
+                      <input type="text" name="label_override_en_{{ item.id }}" value="{{ item.label_override_en }}" placeholder="{% trans 'English label' %}" />
+                    </label>
+                    <label class="builder-entity-control">
+                      <span>{% trans "Hilfetext (DE)" %}</span>
+                      <input type="text" name="help_text_override_{{ item.id }}" value="{{ item.help_text_override }}" placeholder="{% trans 'Optionaler Hilfetext' %}" />
+                    </label>
+                    <label class="builder-entity-control">
+                      <span>{% trans "Hilfetext (EN)" %}</span>
+                      <input type="text" name="help_text_override_en_{{ item.id }}" value="{{ item.help_text_override_en }}" placeholder="{% trans 'Optional English help text' %}" />
+                    </label>
+                  </div>
+                </article>
+                {% empty %}
+                <div class="builder-empty-state">{% trans "Keine Feldkonfigurationen verfügbar." %}</div>
+                {% endfor %}
+                {% endif %}
+                {% endfor %}
               </div>
-              <div class="options-actions">
+              <div class="options-actions options-actions-sticky">
                 <button class="btn btn-primary" type="submit" name="builder_action" value="save_field_texts">{% trans "Feldtexte speichern" %}</button>
               </div>
             </form>
           </div>
-        </details>
+        </section>
+        {% elif form_type == 'onboarding' and active_module == 'custom-sections' %}
 
-        {% if form_type == 'onboarding' %}
-        <details class="options-panel nested-accordion js-single-accordion" data-accordion-group="builder-content-subpanels" {% if active_subpanel == 'custom-sections' %}open{% endif %}>
-          <summary class="nested-accordion-summary">
+        <section class="options-panel builder-module-card">
+          <div class="module-card-body">
             <div class="options-head">
-              <h2>{% trans "Eigene Abschnitte" %}</h2>
-              <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
+              <div class="options-copy">
+                <h2>{% trans "Eigene Abschnitte" %}</h2>
+                <p class="options-sub">{% trans "Erweitern Sie den Workflow um eigene inhaltliche Blöcke." %}</p>
+              </div>
+              <div class="builder-panel-meta">
+                <span class="builder-panel-count">{{ builder_summary.custom_section_count }} {% trans "eigene Abschnitte" %}</span>
+              </div>
             </div>
-          </summary>
-          <div class="nested-accordion-body">
             <form class="builder-entity-form" method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
               {% csrf_token %}
               <input type="hidden" name="builder_action" value="add_custom_section" />
@@ -496,13 +682,16 @@
                     <div>
                       <strong>{{ item.title }}</strong>
                       <div class="entity-meta">{{ item.section_key }}</div>
+                      <div class="builder-inline-meta">
+                        <span class="badge">{{ item.custom_field_count }} {% trans "Feld/Felder" %}</span>
+                      </div>
                     </div>
                     <div class="builder-card-head-actions">
                       <label class="builder-switch">
                         <input type="checkbox" name="custom_section_is_active_{{ item.id }}" {% if item.is_active %}checked{% endif %} />
                         <span>{% trans "Aktiv" %}</span>
                       </label>
-                      <button class="btn btn-secondary" type="submit" name="delete_custom_section_id" value="{{ item.id }}" data-confirm="{% trans 'Eigenen Abschnitt wirklich löschen? Zugehörige eigene Felder werden ebenfalls entfernt.' %}">{% trans "Löschen" %}</button>
+                      <button class="btn btn-secondary" type="submit" name="delete_custom_section_id" value="{{ item.id }}" data-confirm="{% blocktrans trimmed with count=item.custom_field_count %}Eigenen Abschnitt wirklich löschen? {{ count }} zugehörige eigene Felder werden ebenfalls entfernt.{% endblocktrans %}">{% trans "Löschen" %}</button>
                     </div>
                   </div>
                   <div class="builder-entity-grid">
@@ -524,22 +713,25 @@
                 <div class="builder-empty-state">{% trans "Keine eigenen Abschnitte vorhanden." %}</div>
                 {% endfor %}
               </div>
-              <div class="options-actions">
+              <div class="options-actions options-actions-sticky">
                 <button class="btn btn-primary" type="submit" name="builder_action" value="save_custom_sections">{% trans "Abschnitte speichern" %}</button>
               </div>
             </form>
           </div>
-        </details>
-        {% endif %}
+        </section>
+        {% elif active_module == 'custom-fields' %}
 
-        <details class="options-panel nested-accordion js-single-accordion" data-accordion-group="builder-content-subpanels" {% if active_subpanel == 'custom-fields' %}open{% endif %}>
-          <summary class="nested-accordion-summary">
+        <section class="options-panel builder-module-card">
+          <div class="module-card-body">
             <div class="options-head">
-              <h2>{% trans "Eigene Felder" %}</h2>
-              <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
+              <div class="options-copy">
+                <h2>{% trans "Eigene Felder" %}</h2>
+                <p class="options-sub">{% trans "Erstellen Sie zusätzliche Eingaben innerhalb bestehender oder eigener Abschnitte." %}</p>
+              </div>
+              <div class="builder-panel-meta">
+                <span class="builder-panel-count">{{ builder_summary.custom_field_count }} {% trans "eigene Felder" %}</span>
+              </div>
             </div>
-          </summary>
-          <div class="nested-accordion-body">
             <form class="builder-entity-form" method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
               {% csrf_token %}
               <input type="hidden" name="builder_action" value="add_custom_field" />
@@ -606,8 +798,20 @@
 
             <form method="post" action="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}">
               {% csrf_token %}
+              <input type="hidden" name="custom_fields_section" value="{{ active_custom_fields_section }}" />
+              <nav class="structure-section-nav" aria-label="{% trans 'Eigene Feld-Abschnitte' %}">
+                {% for group in custom_field_groups %}
+                <a class="structure-section-pill{% if active_custom_fields_section == group.key %} is-active{% endif %}" href="/admin-tools/form-builder/?form_type={{ form_type }}&option_category={{ selected_option_category }}&module=custom-fields&custom_fields_section={{ group.key }}">
+                  <span class="structure-section-pill-copy">
+                    <strong>{{ group.title }}</strong>
+                    <span>{% blocktrans trimmed with count=group.items|length %}{{ count }} Feld/Felder{% endblocktrans %}</span>
+                  </span>
+                </a>
+                {% endfor %}
+              </nav>
               <div class="builder-group-stack">
                 {% for group in custom_field_groups %}
+                {% if active_custom_fields_section == group.key %}
                 <section class="builder-group-card">
                   <div class="builder-group-head">
                     <h3>{{ group.title }}</h3>
@@ -686,23 +890,25 @@
                     {% endfor %}
                   </div>
                 </section>
+                {% endif %}
                 {% endfor %}
               </div>
-              <div class="options-actions">
+              <div class="options-actions options-actions-sticky">
                 <button class="btn btn-primary" type="submit" name="builder_action" value="save_custom_fields">{% trans "Eigene Felder speichern" %}</button>
               </div>
             </form>
           </div>
-        </details>
+        </section>
+        {% elif active_module == 'preview' %}
 
-        <details class="options-panel nested-accordion js-single-accordion" data-accordion-group="builder-content-subpanels" {% if active_subpanel == 'preview' %}open{% endif %}>
-          <summary class="nested-accordion-summary">
+        <section class="options-panel builder-module-card">
+          <div class="module-card-body">
             <div class="options-head">
-              <h2>{% trans "Live-Vorschau" %}</h2>
-              <span class="builder-panel-toggle">{% trans "Öffnen" %}</span>
+              <div class="options-copy">
+                <h2>{% trans "Live-Vorschau" %}</h2>
+                <p class="options-sub">{% trans "So wirkt die aktuelle Struktur für das aktive Formular." %}</p>
+              </div>
             </div>
-          </summary>
-          <div class="nested-accordion-body">
             <div class="preview-shell preview-shell-compact">
               {% for section in preview_sections %}
               <section class="preview-section">
@@ -721,27 +927,16 @@
               {% endfor %}
             </div>
           </div>
-        </details>
+        </section>
+        {% endif %}
       </div>
       </div>
-    </details>
+    </section>
+      </main>
+    </div>
 
 {% endblock %}
 
 {% block extra_scripts %}
   <script src="{% static 'workflows/js/form_builder.js' %}"></script>
-  <script>
-    (() => {
-      const accordions = document.querySelectorAll('.js-single-accordion[data-accordion-group]');
-      accordions.forEach((accordion) => {
-        accordion.addEventListener('toggle', () => {
-          if (!accordion.open) return;
-          const group = accordion.dataset.accordionGroup;
-          document.querySelectorAll(`.js-single-accordion[data-accordion-group="${group}"]`).forEach((peer) => {
-            if (peer !== accordion) peer.open = false;
-          });
-        });
-      });
-    })();
-  </script>
 {% endblock %}
diff --git a/backend/workflows/views.py b/backend/workflows/views.py
index 9f3faa0..4aa33ba 100644
--- a/backend/workflows/views.py
+++ b/backend/workflows/views.py
@@ -2189,6 +2189,13 @@ def form_builder_page(request):
     active_panel = (request.GET.get('panel') or '').strip()
     active_subpanel = (request.GET.get('subpanel') or '').strip()
     active_rules_panel = (request.GET.get('rules_panel') or '').strip()
+    active_module = (request.GET.get('module') or '').strip()
+    active_structure_section = (request.GET.get('structure_section') or '').strip()
+    active_field_rules_section = ((request.POST.get('field_rules_section') if request.method == 'POST' else '') or request.GET.get('field_rules_section') or '').strip()
+    active_field_texts_section = ((request.POST.get('field_texts_section') if request.method == 'POST' else '') or request.GET.get('field_texts_section') or '').strip()
+    active_custom_fields_section = ((request.POST.get('custom_fields_section') if request.method == 'POST' else '') or request.GET.get('custom_fields_section') or '').strip()
+    active_section_rules_section = ((request.POST.get('section_rules_section') if request.method == 'POST' else '') or request.GET.get('section_rules_section') or '').strip()
+    active_conditional_target = ((request.POST.get('conditional_target') if request.method == 'POST' else '') or request.GET.get('conditional_target') or '').strip()
     if form_type not in DEFAULT_FIELD_ORDER:
         form_type = 'onboarding'
     option_category = request.GET.get('option_category', 'department')
@@ -2196,6 +2203,34 @@ def form_builder_page(request):
     if option_category not in option_categories:
         option_category = option_categories[0]
 
+    valid_modules = {
+        'structure',
+        'section-rules',
+        'field-rules',
+        'conditional-rules',
+        'options',
+        'field-texts',
+        'custom-sections',
+        'custom-fields',
+        'preview',
+    }
+
+    if not active_module:
+        if active_panel == 'builder-structure':
+            active_module = 'structure'
+        elif active_panel == 'builder-rules':
+            active_module = active_rules_panel or 'section-rules'
+        elif active_panel == 'builder-content':
+            active_module = active_subpanel or 'options'
+        else:
+            active_module = 'structure'
+    if active_module not in valid_modules:
+        active_module = 'structure'
+    if form_type != 'onboarding' and active_module == 'custom-sections':
+        active_module = 'options'
+    if form_type != 'onboarding' and active_module == 'conditional-rules':
+        active_module = 'field-rules'
+
     if request.method == 'POST':
         delete_option_id = request.POST.get('delete_option_id', '').strip()
         delete_custom_field_id = request.POST.get('delete_custom_field_id', '').strip()
@@ -2211,7 +2246,7 @@ def form_builder_page(request):
                 option.delete()
                 _audit(request, 'form_option_deleted', target_type='form_option', target_id=deleted_id, target_label=deleted_label)
                 messages.success(request, 'Option wurde gelöscht.')
-            return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}&panel=builder-content&subpanel=options#builder-content")
+            return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}&module=options")
         if delete_custom_field_id:
             custom_field = FormCustomFieldConfig.objects.filter(id=delete_custom_field_id, form_type=form_type).first()
             if not custom_field:
@@ -2222,7 +2257,7 @@ def form_builder_page(request):
                 custom_field.delete()
                 _audit(request, 'form_custom_field_deleted', target_type='form_custom_field', target_id=deleted_id, target_label=deleted_label)
                 messages.success(request, 'Benutzerdefiniertes Feld wurde gelöscht.')
-            return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}&panel=builder-content&subpanel=custom-fields#builder-content")
+            return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}&module=custom-fields")
         if delete_custom_section_id:
             custom_section = FormCustomSectionConfig.objects.filter(id=delete_custom_section_id, form_type=form_type).first()
             if not custom_section:
@@ -2250,7 +2285,7 @@ def form_builder_page(request):
                     details={'section_key': section_key, 'deleted_field_count': deleted_field_count},
                 )
                 messages.success(request, 'Benutzerdefinierter Abschnitt wurde gelöscht.')
-            return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}&panel=builder-content&subpanel=custom-sections#builder-content")
+            return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}&module=custom-sections")
 
         action = request.POST.get('builder_action', '')
         if action == 'add_option':
@@ -2301,7 +2336,7 @@ def form_builder_page(request):
                     option.save(update_fields=['label', 'label_en', 'value', 'is_active', 'sort_order'])
                 except IntegrityError:
                     messages.error(request, f'Doppelte Bezeichnung in Kategorie: {next_label}')
-                    return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option.category}&panel=builder-content&subpanel=options#builder-content")
+                    return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option.category}&module=options")
                 option_category = option.category
             _audit(request, 'form_options_saved', target_type='form_option', target_label=option_category, details={'count': len(option_ids)})
             messages.success(request, 'Optionen wurden gespeichert.')
@@ -2447,7 +2482,7 @@ def form_builder_page(request):
                 cfg.select_options_en = (request.POST.get(f'custom_select_options_en_{cfg.id}') or '').strip()
                 if cfg.field_type == FormCustomFieldConfig.FIELD_TYPE_SELECT and not cfg.select_options:
                     messages.error(request, f'Auswahlfeld "{cfg.label}" benötigt mindestens eine Option.')
-                    return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}&panel=builder-content&subpanel=custom-fields#builder-content")
+                    return redirect(f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}&module=custom-fields")
                 cfg.save()
                 updated += 1
             _audit(request, 'form_custom_fields_saved', target_type='form_custom_field', target_label=form_type, details={'count': updated})
@@ -2536,40 +2571,43 @@ def form_builder_page(request):
         elif action == 'apply_preset':
             preset_key = (request.POST.get('preset_key') or '').strip()
             if apply_form_preset(form_type, preset_key):
-                active_panel = 'builder-content'
-                active_subpanel = 'preview'
+                active_module = 'preview'
                 _audit(request, 'form_preset_applied', target_type='form_config', target_label=form_type, details={'preset': preset_key})
                 messages.success(request, 'Preset wurde angewendet.')
             else:
                 messages.error(request, 'Preset konnte nicht angewendet werden.')
 
-        if action in {'add_option', 'save_options', 'save_field_texts', 'add_custom_field', 'save_custom_fields', 'add_custom_section', 'save_custom_sections'}:
-            active_panel = 'builder-content'
         if action in {'add_option', 'save_options'}:
-            active_subpanel = 'options'
+            active_module = 'options'
         elif action == 'save_field_texts':
-            active_subpanel = 'field-texts'
+            active_module = 'field-texts'
         elif action in {'add_custom_field', 'save_custom_fields'}:
-            active_subpanel = 'custom-fields'
+            active_module = 'custom-fields'
         elif action in {'add_custom_section', 'save_custom_sections'}:
-            active_subpanel = 'custom-sections'
+            active_module = 'custom-sections'
         elif action in {'save_field_rules', 'save_section_rules', 'save_conditional_rules'}:
-            active_panel = 'builder-rules'
+            active_module = 'section-rules'
         if action == 'save_section_rules':
-            active_rules_panel = 'section-rules'
+            active_module = 'section-rules'
         elif action == 'save_field_rules':
-            active_rules_panel = 'field-rules'
+            active_module = 'field-rules'
         elif action == 'save_conditional_rules':
-            active_rules_panel = 'conditional-rules'
+            active_module = 'conditional-rules'
         redirect_target = f"/admin-tools/form-builder/?form_type={form_type}&option_category={option_category}"
-        if active_panel:
-            redirect_target += f"&panel={active_panel}"
-        if active_subpanel:
-            redirect_target += f"&subpanel={active_subpanel}"
-        if active_rules_panel:
-            redirect_target += f"&rules_panel={active_rules_panel}"
-        if anchor == 'builder-content' or active_panel == 'builder-content':
-            redirect_target += "#builder-content"
+        if active_module:
+            redirect_target += f"&module={active_module}"
+        if active_structure_section:
+            redirect_target += f"&structure_section={active_structure_section}"
+        if active_section_rules_section and active_module == 'section-rules':
+            redirect_target += f"&section_rules_section={active_section_rules_section}"
+        if active_field_rules_section and active_module == 'field-rules':
+            redirect_target += f"&field_rules_section={active_field_rules_section}"
+        if active_conditional_target and active_module == 'conditional-rules':
+            redirect_target += f"&conditional_target={active_conditional_target}"
+        if active_field_texts_section and active_module == 'field-texts':
+            redirect_target += f"&field_texts_section={active_field_texts_section}"
+        if active_custom_fields_section and active_module == 'custom-fields':
+            redirect_target += f"&custom_fields_section={active_custom_fields_section}"
         return redirect(redirect_target)
 
     default_names = list(DEFAULT_FIELD_ORDER.get(form_type, []))
@@ -2700,6 +2738,8 @@ def form_builder_page(request):
 
     section_rule_items = []
     if section_order:
+        if active_structure_section not in section_order:
+            active_structure_section = section_order[0]
         fallback_section = section_order[-1] if section_order else ''
         custom_section_map = {cfg.section_key: cfg for cfg in custom_section_configs}
         for key in section_order:
@@ -2717,6 +2757,9 @@ def form_builder_page(request):
                     'field_count': len([c for c in configs if (c.page_key or default_page_map.get(c.field_name, fallback_section)) == key]) + len([c for c in custom_field_configs if c.section_key == key]),
                 }
             )
+    section_rule_keys = [item['key'] for item in section_rule_items]
+    if section_rule_keys and active_section_rules_section not in section_rule_keys:
+        active_section_rules_section = section_rule_keys[0]
 
     field_rule_items = []
     for cfg in configs:
@@ -2747,6 +2790,11 @@ def form_builder_page(request):
                     'items': grouped_custom.get(key, []),
                 }
             )
+    custom_section_field_counts: dict[str, int] = {}
+    for cfg in custom_field_configs:
+        custom_section_field_counts[cfg.section_key] = custom_section_field_counts.get(cfg.section_key, 0) + 1
+    for cfg in custom_section_configs:
+        cfg.custom_field_count = custom_section_field_counts.get(cfg.section_key, 0)
 
     field_rule_groups = []
     if section_order:
@@ -2761,6 +2809,9 @@ def form_builder_page(request):
                     'items': grouped_rules.get(key, []),
                 }
             )
+    field_rule_group_keys = [group['key'] for group in field_rule_groups]
+    if field_rule_group_keys and active_field_rules_section not in field_rule_group_keys:
+        active_field_rules_section = field_rule_group_keys[0]
 
     field_text_groups = []
     if section_order:
@@ -2776,6 +2827,12 @@ def form_builder_page(request):
                     'items': grouped_texts.get(key, []),
                 }
             )
+    field_text_group_keys = [group['key'] for group in field_text_groups]
+    if field_text_group_keys and active_field_texts_section not in field_text_group_keys:
+        active_field_texts_section = field_text_group_keys[0]
+    custom_field_group_keys = [group['key'] for group in custom_field_groups]
+    if custom_field_group_keys and active_custom_fields_section not in custom_field_group_keys:
+        active_custom_fields_section = custom_field_group_keys[0]
 
     conditional_rule_items = []
     if form_type == 'onboarding':
@@ -2837,6 +2894,9 @@ def form_builder_page(request):
                     'target_fields': target_fields,
                 }
             )
+    conditional_rule_keys = [item['target_key'] for item in conditional_rule_items]
+    if conditional_rule_keys and active_conditional_target not in conditional_rule_keys:
+        active_conditional_target = conditional_rule_keys[0]
 
     preview_sections = []
     if section_order:
@@ -2906,6 +2966,13 @@ def form_builder_page(request):
             'active_panel': active_panel,
             'active_subpanel': active_subpanel,
             'active_rules_panel': active_rules_panel,
+            'active_module': active_module,
+            'active_structure_section': active_structure_section,
+            'active_field_rules_section': active_field_rules_section,
+            'active_field_texts_section': active_field_texts_section,
+            'active_custom_fields_section': active_custom_fields_section,
+            'active_section_rules_section': active_section_rules_section,
+            'active_conditional_target': active_conditional_target,
             'available_presets': FORM_PRESETS.get(form_type, {}),
             'can_override_locked_builder_rules': can_override_locked_builder_rules,
         },