Add ASP.NET Core backend hosting business rules; FE consumes via typed client

Move the authoritative business rules off the frontend into a real backend,
realising the BFF-lite + decision-DTO design (ADR-0001) that until now lived
only in static mock JSON.

Backend (backend/):
- ASP.NET Core (.NET 10) minimal API, contract-first, Swagger UI at /swagger.
- DDD Domain/ rules layer: profession derivation + applicable policy questions
  (DiplomaRules), herregistratie eligibility + reason (HerregistratieRule),
  scholing threshold (IntakePolicy), submit rejections + reference generation
  (SubmissionRules). In-memory seeded data, ProblemDetails (RFC 7807) errors.
- 27 xUnit tests: rule units + endpoint integration incl. BRP no-address and
  DUO not-found fallbacks and 422 submit paths.

Frontend (only infrastructure/ + contracts/ change, as the architecture promised):
- NSwag-generated typed client (api-client.ts), routed through Angular HttpClient
  via a small fetch adapter so the ?scenario= interceptor still applies.
- GET adapters use resource({ loader: client.x }); submit commands call the client
  and map ProblemDetails -> err. The hardcoded uren==0 / manual-diploma rules are
  deleted (now server-side). Domain, stores, UI and format validators unchanged.
- Deleted the now-dead public/mock/*.json.

Tooling/docs:
- npm start proxies /api -> backend; npm run gen:api regenerates the client;
  docker compose up runs both (bind mounts use :z for SELinux/Fedora).
- backend/README.md walkthrough: adding a policy question is a one-file backend
  change, no FE change, no client regen. Updated CLAUDE.md + ARCHITECTURE.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/shared/layout/wizard-shell/wizard-shell.component.ts

@@ -0,0 +1,115 @@
+import { Component, ElementRef, effect, input, output, untracked, viewChild } from '@angular/core';
+import { ButtonComponent } from '@shared/ui/button/button.component';
+import { AlertComponent } from '@shared/ui/alert/alert.component';
+import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
+import { StepperComponent } from '@shared/ui/stepper/stepper.component';
+
+/** A flat validation error pointing at a field: `id` matches the field's anchor. */
+export interface WizardError {
+  readonly id: string;
+  readonly message: string;
+}
+
+export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
+
+/**
+ * Template: the canonical shell every wizard renders into, so they cannot drift.
+ * It owns the consistent outline — stepper + focusable step heading + error
+ * summary + the <form> + the Back/Next/Cancel action bar + the submitting/
+ * submitted/failed states — and the a11y focus management.
+ *
+ * Presentational and unidirectional: all state stays in the wizard container
+ * (the Elm-style store). Inputs flow down; the container reacts to the outputs
+ * and dispatches messages. The step's own fields are projected as the default
+ * slot; the success screen is projected via [wizardSuccess].
+ */
+@Component({
+  selector: 'app-wizard-shell',
+  imports: [ButtonComponent, AlertComponent, SpinnerComponent, StepperComponent],
+  styles: [`
+    .es-title{margin:0 0 var(--rhc-space-max-sm)}
+    .es-list{margin:0;padding-inline-start:var(--rhc-space-max-xl)}
+  `],
+  template: `
+    @switch (status()) {
+      @case ('editing') {
+        <app-stepper class="app-section" [steps]="steps()" [current]="current()" />
+        <h2 #stepHeading tabindex="-1" class="rhc-heading nl-heading--level-2 app-section">{{ stepTitle() }}</h2>
+        @if (errors().length) {
+          <div #errorSummary tabindex="-1" role="alert" aria-labelledby="wizard-error-title" class="app-section">
+            <app-alert type="error">
+              <h3 id="wizard-error-title" class="rhc-heading nl-heading--level-3 es-title">Er ging iets mis met uw invoer</h3>
+              <ul class="es-list">
+                @for (e of errors(); track e.id) {
+                  <li><a [href]="'#' + e.id">{{ e.message }}</a></li>
+                }
+              </ul>
+            </app-alert>
+          </div>
+        }
+        <form (ngSubmit)="primary.emit()" class="app-form">
+          <ng-content />
+          <div class="app-button-row app-button-row--spaced">
+            @if (canGoBack()) {
+              <app-button type="button" variant="secondary" (click)="back.emit()">Vorige</app-button>
+            }
+            <app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button>
+            <app-button type="button" variant="subtle" (click)="cancel.emit()">Annuleren</app-button>
+          </div>
+        </form>
+      }
+      @case ('submitting') {
+        <app-spinner /> <span>{{ submittingLabel() }}</span>
+      }
+      @case ('submitted') {
+        <ng-content select="[wizardSuccess]" />
+      }
+      @case ('failed') {
+        <app-alert type="error">{{ errorMessage() }}</app-alert>
+        <div class="app-section">
+          <app-button variant="secondary" (click)="retry.emit()">Opnieuw proberen</app-button>
+        </div>
+      }
+    }
+  `,
+})
+export class WizardShellComponent {
+  steps = input.required<string[]>();
+  current = input.required<number>();
+  stepTitle = input.required<string>();
+  status = input.required<WizardStatus>();
+  primaryLabel = input.required<string>();
+  canGoBack = input(false);
+  errors = input<readonly WizardError[]>([]);
+  errorMessage = input('');
+  submittingLabel = input('Aanvraag wordt verwerkt…');
+
+  primary = output<void>();
+  back = output<void>();
+  cancel = output<void>();
+  retry = output<void>();
+
+  private stepHeading = viewChild<ElementRef<HTMLElement>>('stepHeading');
+  private errorSummary = viewChild<ElementRef<HTMLElement>>('errorSummary');
+
+  constructor() {
+    // A11y: move focus to the step heading when the step changes (skip first run
+    // so we don't grab focus on initial load). Tracks current(), which is value-
+    // stable across keystrokes, so typing never steals focus.
+    let firstStep = true;
+    effect(() => {
+      this.current();
+      if (firstStep) { firstStep = false; return; }
+      untracked(() => queueMicrotask(() => this.stepHeading()?.nativeElement.focus()));
+    });
+    // A11y: when validation errors appear (after a failed submit), move focus to
+    // the error summary so it's announced. The reducer returns a fresh errors
+    // object per attempt, so resubmitting the same invalid step re-announces.
+    let firstErr = true;
+    effect(() => {
+      const has = this.errors().length > 0;
+      if (firstErr) { firstErr = false; return; }
+      if (has) untracked(() => queueMicrotask(() => this.errorSummary()?.nativeElement.focus()));
+    });
+  }
+}

src/app/shared/layout/wizard-shell/wizard-shell.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { WizardShellComponent } from './wizard-shell.component';
+
+const meta: Meta<WizardShellComponent> = {
+  title: 'Templates/WizardShell',
+  component: WizardShellComponent,
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-wizard-shell
+        [steps]="steps" [current]="current" [stepTitle]="stepTitle" [status]="status"
+        [primaryLabel]="primaryLabel" [canGoBack]="canGoBack" [errors]="errors" [errorMessage]="errorMessage">
+        <p class="rhc-paragraph">Voorbeeld-stapinhoud (de stapvelden worden hier geprojecteerd).</p>
+        <div wizardSuccess><p class="rhc-paragraph">Uw aanvraag is ontvangen.</p></div>
+      </app-wizard-shell>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<WizardShellComponent>;
+
+const steps = ['Adres', 'Beroep', 'Controle'];
+const base = { steps, current: 1, stepTitle: 'Beroep op basis van uw diploma', primaryLabel: 'Volgende', canGoBack: true, errors: [], errorMessage: '' };
+
+export const Editing: Story = { args: { ...base, status: 'editing' } };
+export const EditingMetFouten: Story = {
+  args: {
+    ...base,
+    status: 'editing',
+    errors: [
+      { id: 'uren', message: 'Vul het aantal gewerkte uren in.' },
+      { id: 'diploma', message: 'Kies een diploma.' },
+    ],
+  },
+};
+export const Submitting: Story = { args: { ...base, status: 'submitting' } };
+export const Submitted: Story = { args: { ...base, status: 'submitted' } };
+export const Failed: Story = { args: { ...base, status: 'failed', errorMessage: 'Het indienen is niet gelukt: netwerkfout.' } };