Add registratie wizard, BFF dashboard-view, contracts/value-objects, and architecture docs

Checkpoint of in-progress work: the registration wizard (address prefill,
DUO diploma lookup, policy questions), decision-DTO contracts, parse-don't-
validate value objects, infrastructure adapters, plus CLAUDE.md and the
architecture/ADR docs.

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

src/app/shared/ui/stepper/stepper.component.ts

@@ -0,0 +1,46 @@
+import { Component, input } from '@angular/core';
+
+/** Molecule: a horizontal step indicator for a multi-step flow. Visual progress
+    plus accessible semantics — an ordered list with `aria-current="step"` on the
+    active step and a visually-hidden "Stap X van Y" summary. Domain-free. */
+@Component({
+  selector: 'app-stepper',
+  styles: [`
+    :host{display:block}
+    .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
+    .steps{display:flex;flex-wrap:wrap;gap:var(--rhc-space-max-xl);list-style:none;margin:0;padding:0}
+    .step{display:flex;align-items:center;gap:var(--rhc-space-max-md);color:var(--rhc-color-foreground-subtle)}
+    .num{
+      display:grid;place-items:center;
+      inline-size:var(--rhc-space-max-4xl);block-size:var(--rhc-space-max-4xl);
+      border-radius:var(--rhc-border-radius-round);
+      border:var(--rhc-space-max-xs) solid var(--rhc-color-cool-grey-400);
+      font-weight:var(--rhc-text-font-weight-bold);
+    }
+    .step--done .num{background:var(--rhc-color-lintblauw-500);border-color:var(--rhc-color-lintblauw-500);color:var(--rhc-color-wit)}
+    .step--current{color:var(--rhc-color-foreground-default)}
+    .step--current .num{background:var(--rhc-color-lintblauw-700);border-color:var(--rhc-color-lintblauw-700);color:var(--rhc-color-wit)}
+    .step--current .label{font-weight:var(--rhc-text-font-weight-semi-bold)}
+  `],
+  template: `
+    <nav aria-label="Voortgang">
+      <p class="sr-only">Stap {{ current() + 1 }} van {{ steps().length }}: {{ steps()[current()] }}</p>
+      <ol class="steps">
+        @for (label of steps(); track label; let i = $index) {
+          <li
+            class="step"
+            [class.step--current]="i === current()"
+            [class.step--done]="i < current()"
+            [attr.aria-current]="i === current() ? 'step' : null">
+            <span class="num" aria-hidden="true">{{ i + 1 }}</span>
+            <span class="label">{{ label }}</span>
+          </li>
+        }
+      </ol>
+    </nav>
+  `,
+})
+export class StepperComponent {
+  steps = input.required<string[]>();
+  current = input.required<number>();
+}

src/app/shared/ui/stepper/stepper.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { StepperComponent } from './stepper.component';
+
+const meta: Meta<StepperComponent> = {
+  title: 'Molecules/Stepper',
+  component: StepperComponent,
+  render: (args) => ({
+    props: args,
+    template: `<app-stepper [steps]="steps" [current]="current" />`,
+  }),
+};
+export default meta;
+type Story = StoryObj<StepperComponent>;
+
+const steps = ['Adres', 'Beroep', 'Controle'];
+
+export const Eerste: Story = { args: { steps, current: 0 } };
+export const Midden: Story = { args: { steps, current: 1 } };
+export const Laatste: Story = { args: { steps, current: 2 } };