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/ui/checkbox/checkbox.component.ts

@@ -1,22 +1,17 @@
 import { Component, forwardRef, input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
-/** Atom: a labelled checkbox wired as a form control (ngModel/reactive). Native
-    input for full keyboard + screen-reader support; the label is the click target. */
+/** Atom: a labelled checkbox wired as a form control (ngModel/reactive). Thin
+    wrapper over the CIBG Huisstijl `.form-check.styled` checkbox CSS; native
+    input for full keyboard + screen-reader support. */
 @Component({
   selector: 'app-checkbox',
-  styles: [`
-    :host{display:block}
-    label{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md);cursor:pointer}
-    /* form-check-input floats/margins for the .form-check layout; here it's flex-aligned. */
-    .form-check-input{margin:0;float:none;inline-size:1.1rem;block-size:1.1rem}
-  `],
   template: `
-    <label class="form-check-label">
+    <div class="form-check styled">
       <input class="form-check-input" type="checkbox" [id]="checkboxId()" [checked]="value" [disabled]="disabled"
         (change)="onToggle($event)" (blur)="onTouched()" />
-      <span>{{ label() }}</span>
-    </label>
+      <label class="form-check-label" [for]="checkboxId()">{{ label() }}</label>
+    </div>
   `,
   providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CheckboxComponent), multi: true }],
 })