feat(demo): add Demo Guide (8-step guided tour) and scenario overview

Adds a compact "Probeer een demonstratiescenario" page listing the 5 named
scenarios with live readiness from the manifest, plus a Demo Guide side
panel (bottom sheet on mobile) that walks an Operations Manager through
all 8 steps with per-step context, live-resolved routes, sessionStorage
progress, and a "Demo opnieuw voorbereiden" restart. Login's guided-demo
CTA now actually opens the guide. Fixes a real mobile topbar overflow the
new guide trigger introduced.

frontend/e2e/demo-entry.spec.ts

@@ -12,11 +12,16 @@ test("demo entry screen names the fictional org and never shows a password", asy
   await expect(page.locator('input[type="password"]')).toHaveCount(0);
 });
 
-test("start guided demo logs in as Operations Manager and marks the guide to start", async ({ page }) => {
+test("start guided demo logs in as Operations Manager and opens the guide at step 1", async ({ page }) => {
   await page.goto("/login");
   await page.getByRole("button", { name: "Start begeleide demo" }).click();
-  await expect(page).toHaveURL(/\/dashboard\?guide=start$/);
+  // The ?guide=start marker is a one-shot signal the dashboard strips immediately after
+  // consuming it, so assert on its effect (the guide panel opens at step 1) rather than
+  // the transient URL, which can already be gone by the time this assertion runs.
+  await expect(page).toHaveURL(/\/dashboard/);
   await expect(page.getByText("Amelie De Ridder")).toBeVisible();
+  await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "1. Begrijp de operationele status" })).toBeVisible();
 });
 
 test("permanent demo badge shows a popover with last reset info and a working About link", async ({ page }) => {

frontend/e2e/demo-guide.spec.ts

@@ -0,0 +1,85 @@
+import { expect, test, type APIRequestContext } from "@playwright/test";
+
+async function resetDemoData(request: APIRequestContext) {
+  const login = await request.post("/api/v1/demo/login", { data: { role: "operations_manager" } });
+  expect(login.ok()).toBeTruthy();
+  const reset = await request.post("/api/v1/demo/reset");
+  expect(reset.ok()).toBeTruthy();
+}
+
+test.describe.configure({ mode: "serial" });
+
+test("scenario overview lists all 5 scenarios, ready right after a reset", async ({ page, request }) => {
+  await resetDemoData(request);
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
+  await page.goto("/scenarios");
+
+  await expect(page.getByRole("heading", { name: "Probeer een demonstratiescenario" })).toBeVisible();
+  const cards = page.locator(".scenario-card");
+  await expect(cards).toHaveCount(5);
+  for (const label of ["Klaar voor demo"]) {
+    await expect(page.getByText(label).first()).toBeVisible();
+  }
+  await expect(page.getByText("Niet beschikbaar")).toHaveCount(0);
+});
+
+test("starting a scenario navigates to its fixed record", async ({ page }) => {
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Verken als Operations Manager" }).click();
+  await page.goto("/scenarios");
+
+  const duplicateCard = page.locator(".scenario-card", { hasText: "dubbele klant" });
+  await duplicateCard.getByRole("link", { name: "Start scenario" }).click();
+  await expect(page).toHaveURL(/\/data-quality\/DQ-DEMO-DUPLICATE$/);
+});
+
+test("demo guide: navigating steps, jumping to a step, and closing works", async ({ page }) => {
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Start begeleide demo" }).click();
+  await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "1. Begrijp de operationele status" })).toBeVisible();
+
+  await page.getByRole("button", { name: "Volgende" }).click();
+  await expect(page.getByRole("heading", { name: "2. Open een boeking die aandacht nodig heeft" })).toBeVisible();
+
+  await page.getByRole("button", { name: /6\. Stel een vraag/ }).click();
+  await expect(page.getByRole("heading", { name: "6. Stel een vraag aan de procedureassistent" })).toBeVisible();
+
+  await page.getByRole("button", { name: "Ga naar deze stap" }).click();
+  await expect(page).toHaveURL(/\/knowledge$/);
+  await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
+
+  await page.getByRole("button", { name: "Sluiten" }).click();
+  await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeHidden();
+});
+
+test("demo guide progress persists across navigation and the trigger shows it", async ({ page }) => {
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Start begeleide demo" }).click();
+  await page.getByRole("button", { name: "Volgende" }).click();
+  await page.getByRole("button", { name: "Volgende" }).click();
+  await page.getByRole("button", { name: "Sluiten" }).click();
+
+  await expect(page.getByRole("button", { name: /Demo-gids/ })).toContainText("2/8");
+
+  await page.goto("/vehicles");
+  await page.getByRole("button", { name: /Demo-gids/ }).click();
+  await expect(page.getByRole("heading", { name: "3. Verwerk een retour" })).toBeVisible();
+});
+
+test("demo guide is not shown to a rental employee", async ({ page }) => {
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Verken als Rental Employee" }).click();
+  await expect(page).toHaveURL(/\/dashboard$/);
+  await expect(page.getByRole("button", { name: /Demo-gids/ })).toHaveCount(0);
+});
+
+test("restarting the demo from the guide resets data and returns to login", async ({ page }) => {
+  await page.goto("/login");
+  await page.getByRole("button", { name: "Start begeleide demo" }).click();
+  await expect(page.getByRole("dialog", { name: "Gegidste demo" })).toBeVisible();
+
+  await page.getByRole("button", { name: "Demo opnieuw voorbereiden" }).click();
+  await expect(page).toHaveURL(/\/login$/, { timeout: 10000 });
+});