feat(design): adopt CIBG component patterns (header, forms, wizards, dashboard)

Re-skins the app's layout on top of the CIBG Huisstijl theme (previous commit) so it
matches designsystem.cibg.nl, not just its colour tokens — magenta ("robijn") header,
horizontal nav, and the CIBG component markup for forms/wizards/dashboard.

- Header: logo block + robijn titlebar (breadcrumb + user menu) + grey horizontal nav
  (4 links) replacing the dashboard side-nav; breadcrumb restyled for the titlebar
  (no background of its own — CIBG's global `header nav` rule otherwise bleeds a grey
  fill into it, fixed by scoping an override inside BreadcrumbComponent).
- Forms: form-field/radio-group/checkbox rebuilt on CIBG's horizontal `form-group row`
  / `form-check.styled` markup (label col-md-4, control col-md-8); same input() APIs.
- Wizards: stepper rebuilt as the CIBG "stappenindicator" (numbered circles, visited
  steps clickable for back-nav, title merged in); wizard-shell adopts the CIBG
  procesnavigatie button row. Back-navigation wired into all three wizard machines
  (registratie-wizard already had it; added `GaNaarStap` to intake/herregistratie
  machines, pure + spec'd).
- New shared/ui molecules: confirmation (animated bevestiging checkmark, replaces
  plain alerts on submit), review-section (controlestap sections with "Wijzigen"),
  application-list/application-link (CIBG "aanvragen" rows, replace the dashboard's
  card grid and aanvraag-block).
- Cleanup: delete side-nav and now-unused styles.scss utilities (.app-overview,
  .app-form-panel, .app-card-grid); correct design-tokens.mdx (it referenced tokens
  that no longer exist) and document the CIBG-value token bridge.

Verified: build/lint/check:tokens green, 178 tests pass (4 new GaNaarStap cases), and
manually driven end-to-end (dashboard, a full herregistratie submission through to the
confirmation screen, mobile width, keyboard focus).

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

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

@@ -5,6 +5,11 @@ import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { SpinnerComponent } from '@shared/ui/spinner/spinner.component';
 import { StepperComponent } from '@shared/ui/stepper/stepper.component';
 
+/** CIBG procesnavigatie primary-button copy for a non-final step: "Naar stap 2 - Werk".
+    Shared so every wizard's `primaryLabel` reads the same way. */
+export const naarStapLabel = (stepNumber: number, stepLabel: string) =>
+  $localize`:@@wizard.naarStap:Naar stap ${stepNumber}:nummer: - ${stepLabel}:label:`;
+
 /** A flat validation error pointing at a field: `id` matches the field's anchor. */
 export interface WizardError {
   readonly id: string;
@@ -15,9 +20,9 @@ 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.
+ * It owns the consistent outline — CIBG stappenindicator (title merged in) + error
+ * summary + the horizontal <form> + the CIBG procesnavigatie button row + 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
@@ -34,8 +39,8 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
   template: `
     @switch (status()) {
       @case ('editing') {
-        <app-stepper class="app-section" [steps]="steps()" [current]="current()" />
-        <h2 #stepHeading tabindex="-1" class="app-section">{{ stepTitle() }}</h2>
+        <app-stepper class="app-section" [steps]="steps()" [current]="current()"
+          [processName]="processName()" [stepTitle]="stepTitle()" (stepSelected)="goToStep.emit($event)" />
         @if (errors().length) {
           <div #errorSummary tabindex="-1" role="alert" aria-labelledby="wizard-error-title" class="app-section">
             <app-alert type="error">
@@ -48,13 +53,19 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
             </app-alert>
           </div>
         }
-        <form (ngSubmit)="primary.emit()" class="app-form app-form-panel">
+        <form (ngSubmit)="primary.emit()" class="form-horizontal app-section">
+          <div class="form-header">
+            <div class="form-action"><span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span></div>
+          </div>
           <ng-content />
-          <div class="app-button-row app-button-row--spaced">
+          <hr />
+          <div class="d-flex flex-column flex-sm-row-reverse">
+            <div class="m-0"><app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button></div>
             @if (canGoBack()) {
-              <app-button type="button" variant="secondary" (click)="back.emit()" i18n="@@wizard.vorige">Vorige</app-button>
+              <app-button type="button" variant="subtle" class="me-auto" (click)="back.emit()" i18n="@@wizard.terugVorige">Terug naar vorige stap</app-button>
             }
-            <app-button type="submit" variant="primary">{{ primaryLabel() }}</app-button>
+          </div>
+          <div class="app-section">
             <app-button type="button" variant="subtle" (click)="cancel.emit()" i18n="@@wizard.annuleren">Annuleren</app-button>
           </div>
         </form>
@@ -78,6 +89,8 @@ export class WizardShellComponent {
   steps = input.required<string[]>();
   current = input.required<number>();
   stepTitle = input.required<string>();
+  /** Overall process name, shown above the step title (e.g. "Herregistratie aanvragen"). */
+  processName = input('');
   status = input.required<WizardStatus>();
   primaryLabel = input.required<string>();
   canGoBack = input(false);
@@ -89,6 +102,8 @@ export class WizardShellComponent {
   back = output<void>();
   cancel = output<void>();
   retry = output<void>();
+  /** A visited step number was clicked in the stepper — back-navigation only. */
+  goToStep = output<number>();
 
   /** Error-summary link: focus the field instead of letting the browser navigate.
       A fragment href resolves against <base href="/">, not the current route, so
@@ -98,18 +113,18 @@ export class WizardShellComponent {
     document.getElementById(id)?.focus(); // focus() scrolls the input into view
   }
 
-  private stepHeading = viewChild<ElementRef<HTMLElement>>('stepHeading');
+  private stepper = viewChild(StepperComponent);
   private errorSummary = viewChild<ElementRef<HTMLElement>>('errorSummary');
 
   constructor() {
-    // A11y: move focus to the step heading when the step changes (skip first run
+    // A11y: move focus to the step title 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()));
+      untracked(() => queueMicrotask(() => this.stepper()?.focusTitle()));
     });
     // A11y: when validation errors first appear (after a failed submit), move
     // focus to the error summary so it's announced. Only on the rising edge