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/radio-group/radio-group.component.ts

@@ -13,21 +13,11 @@ export const JA_NEE: RadioOption[] = [
   { value: 'nee', label: $localize`:@@common.nee:Nee` },
 ];
 
-/** Atom: a radio group. Thin wrapper over the Utrecht/RHC radio CSS, wired as a
-    form control so it works with ngModel just like the text-input atom. */
+/** Atom: a radio group. Thin wrapper over the CIBG Huisstijl `.form-check.styled`
+    radio CSS, wired as a form control so it works with ngModel just like the
+    text-input atom. */
 @Component({
   selector: 'app-radio-group',
-  styles: [`
-    .radio-option {
-      display: flex;
-      align-items: center;
-      gap: var(--rhc-space-max-md);
-      padding-block: var(--rhc-space-max-sm);
-      margin: 0;
-    }
-    /* form-check-input floats/margins for the .form-check layout; here it's flex-aligned. */
-    .radio-option .form-check-input { margin: 0; float: none; }
-  `],
   template: `
     <div
       role="radiogroup"
@@ -35,19 +25,20 @@ export const JA_NEE: RadioOption[] = [
       [attr.aria-invalid]="invalid() ? 'true' : null"
       [attr.aria-describedby]="invalid() ? name() + '-error' : null">
       @for (opt of options(); track opt.value) {
-        <label class="form-check-label radio-option">
+        <div class="form-check styled">
           <input
             class="form-check-input"
             [class.is-invalid]="invalid()"
             type="radio"
+            [id]="name() + '-' + opt.value"
             [name]="name()"
             [value]="opt.value"
             [checked]="value === opt.value"
             [disabled]="disabled"
             (change)="select(opt.value)"
             (blur)="onTouched()" />
-          {{ opt.label }}
-        </label>
+          <label class="form-check-label" [for]="name() + '-' + opt.value">{{ opt.label }}</label>
+        </div>
       }
     </div>
   `,