feat(design): re-theme to CIBG Huisstijl (Bootstrap 5.2), replacing RHC/Utrecht

The portal now adheres to the CIBG design system (designsystem.cibg.nl) — a customized
Bootstrap 5.2 build — replacing the Rijkshuisstijl-Community / Utrecht theme. See ADR-0003.

- Vendor @cibg/huisstijl@3.22.0 under public/cibg-huisstijl/, loaded via a <link> in
  index.html (Storybook serves it via staticDirs). Drop the two @rijkshuisstijl-community deps.
- Token bridge in styles.scss: redefine the app's ~54 --rhc-* tokens onto CIBG/--bs-* values,
  so components keep referencing tokens (no 300+ site rewrite). System-font stack; licensed
  RO/Rijks text fonts intentionally not shipped.
- Re-skin every shared atom to Bootstrap/CIBG classes (btn, form-control, form-check-*,
  table, breadcrumb, …) keeping their input() APIs. alert is hand-rolled (CIBG drops .alert);
  local .card/.badge renamed to avoid Bootstrap collisions.
- Domain pages: drop stray rhc-*/utrecht-* classes; registration-table → table table-striped.

Verified: build green, check:tokens OK, lint clean, 174 tests pass, build-storybook OK,
and the served build loads the vendored CSS (200, .btn-primary present).

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

.storybook/main.ts

@@ -10,6 +10,9 @@ const config: StorybookConfig = {
     "@storybook/addon-docs",
     "@storybook/addon-onboarding"
   ],
-  "framework": "@storybook/angular"
+  "framework": "@storybook/angular",
+  // Serve the vendored CIBG package so preview-head.html can <link> its CSS (and its
+  // relative font/icon/image url()s resolve) — mirrors index.html for the real app.
+  "staticDirs": ["../public"]
 };
 export default config;

.storybook/preview-head.html

@@ -1,3 +1,3 @@
-<link rel="preconnect" href="https://fonts.googleapis.com" />
+<!-- CIBG Huisstijl (customized Bootstrap 5.2), served from the vendored public/ staticDir.
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+     Mirrors src/index.html so stories match the app. System font per styles.scss. -->
-<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<link rel="stylesheet" href="cibg-huisstijl/css/huisstijl.min.css" />

.storybook/preview.ts

@@ -5,12 +5,10 @@ import docJson from '../documentation.json';
 setCompodocJson(docJson);
 
 const preview: Preview = {
-  // Apply the Rijkshuisstijl theme classes around every story so the design
+  // CIBG/Bootstrap styles bare elements — no theme wrapper class needed; just pad.
-  // tokens cascade (global component CSS comes from the app's build target).
+  // The token bridge lives in styles.scss (loaded via the app build target).
   decorators: [
-    componentWrapperDecorator(
+    componentWrapperDecorator((story) => `<div style="padding:1.5rem">${story}</div>`),
-      (story) => `<div class="rhc-theme lintblauw utrecht-document" style="padding:1.5rem">${story}</div>`
-    ),
   ],
   parameters: {
     layout: 'padded',

CLAUDE.md

@@ -54,8 +54,10 @@ advisories are pinned via `package.json` `overrides`; the shipped bundle audits
 `shared/ui` atoms → molecules → organisms; `shared/layout` templates (`shell`,
 `page-shell`); context `ui/` pages. Each level only uses levels below. A new page
 should be **composition of existing blocks** — adding building blocks is the
-exception, not the default. Atoms are thin wrappers over Utrecht/RHC CSS classes;
+exception, not the default. Atoms are thin wrappers over CIBG Huisstijl (Bootstrap 5.2)
-we own only a small typed `input()` API, the design system does the visuals.
+CSS classes (`btn`, `form-control`, `card`, …); we own only a small typed `input()` API,
+the design system does the visuals. (Where CIBG lacks a class — e.g. `alert` — the atom is a
+small hand-rolled surface built from the token bridge; see ADR-0003.)
 
 ### 3. State: make illegal states unrepresentable
 
@@ -135,7 +137,10 @@ not heavy component tests.
   fields + ad-hoc error signals.
 - Routes: lazy `loadComponent`, persistent `ShellComponent` parent, `canActivate:
 [authGuard]` on protected routes (`app.routes.ts`).
-- Theming is one import — `src/styles.scss` pulls the RHC palette; no hand-written theme.
+- Theming: CIBG Huisstijl (a customized Bootstrap 5.2 build) is vendored under
+  `public/cibg-huisstijl/` and loaded via a `<link>` in `index.html`; `src/styles.scss` holds a
+  **token bridge** mapping the app's `--rhc-*` token vocabulary onto CIBG/`--bs-*` values (so
+  components keep referencing tokens). System-font stack (licensed RO/Rijks fonts not shipped). See ADR-0003.
 - Scenario toggle (**dev-only**, not wired in prod builds): `?scenario=slow|loading|empty|error`
   on data pages (`scenario.interceptor.ts`) to see every async state.
 - Prettier; `.editorconfig`. tsconfig: `noImplicitReturns`,
@@ -155,5 +160,5 @@ dispatch messages). Worked example: the intake wizard (`herregistratie/`).
 
 ## Out of scope (POC, don't build unprompted)
 
-Real auth/DigiD, NgRx, licensed Rijkshuisstijl font/logo,
+Real auth/DigiD, NgRx, licensed RO/Rijks fonts + logo (system-font stack; text wordmark),
 runtime DTO validation on every endpoint, multi-tab session sync.

docs/architecture/0003-cibg-huisstijl.md

@@ -0,0 +1,50 @@
+# ADR-0003 — Adopt the CIBG Huisstijl (Bootstrap 5.2) as the design system
+
+Status: Accepted · Date: 2026-07-02
+
+## Context
+
+The portal must adhere visually to the **CIBG design system** (designsystem.cibg.nl) — CIBG runs
+the real BIG-register. Until now the app was themed with **Rijkshuisstijl-Community / Utrecht**
+(`@rijkshuisstijl-community/components-css` + `design-tokens`), emitting `utrecht-*`/`rhc-*` classes
+and consuming a `--rhc-*` CSS-custom-property token set.
+
+CIBG Huisstijl (`@cibg/huisstijl`, v3.22.0) is **a customized build of Bootstrap 5.2.0**: standard
+Bootstrap CSS classes (`btn`, `form-control`, `card`, `table`, `breadcrumb`) themed via SCSS variable
+overrides, with a full `--bs-*` runtime variable surface. For SPA frameworks it is **CSS-only — no
+Bootstrap JS** (the framework drives interactivity). The two systems share neither class names nor
+tokens, so adopting CIBG is a re-skin of the shared component layer plus a replacement of the token
+layer — not a palette swap.
+
+## Decision
+
+1. **Vendor the package** under `public/cibg-huisstijl/` (not an npm dep — it was delivered as files),
+   loaded via a `<link>` in `src/index.html` so the CSS's relative `url(../fonts|icons|images)`
+   references resolve at runtime. Storybook serves the same via `staticDirs`.
+2. **Token bridge over token rewrite.** `src/styles.scss` redefines the app's ~54 `--rhc-*` tokens
+   onto CIBG values (`--bs-*` where one exists, CIBG palette hex otherwise). The `--rhc-*` names are
+   now an internal alias set; the *values* are CIBG. This avoided rewriting 300+ token references and
+   keeps the "components reference tokens" convention intact. (`styles.scss` is exempt from
+   `check:tokens`, so palette hex lives in that one file only.)
+3. **Re-skin atoms, keep their `input()` APIs.** Each `shared/ui` atom now emits Bootstrap/CIBG classes
+   (`app-button` → `btn btn-primary`, `text-input` → `form-control`, radio/checkbox → `form-check-*`);
+   domain pages compose the same atoms and barely changed.
+4. **Hand-roll what CIBG's build drops.** CIBG omits Bootstrap's `.alert` and `.navbar`, so `app-alert`
+   is a small token-styled surface and the header/side-nav use `.nav` + a local blue bar. Local class
+   names that collide with Bootstrap components were renamed (`.card` → `.app-card`, badge → `.status-badge`).
+5. **System-font stack; no licensed fonts.** `--bs-font-sans-serif` is overridden to `system-ui`; the
+   licensed RO/Rijks **text** woffs are removed from the vendored copy (CIBG icon font kept). Logo stays
+   a text wordmark. Interactivity stays Angular-driven (no Bootstrap JS).
+
+## Consequences
+
+- Wiring the design system touches `styles.scss` (token bridge), `index.html`, `angular.json`
+  (`public/` already copied), and `.storybook/` — plus the class strings in ~40 `shared/ui` +
+  `shared/layout` + a few domain components. The `@rijkshuisstijl-community/*` deps are dropped.
+- `check:tokens` still guards raw hex in components; the token bridge + hand-rolled surfaces comply.
+- Known benign build warning: *"Unable to locate stylesheet: /cibg-huisstijl/css/huisstijl.min.css"* —
+  Angular's index optimizer doesn't process a `public/` stylesheet at build time. The asset is copied
+  and the link is preserved (verified: served 200, `.btn-primary` present); the build exits green. The
+  alternative (adding the CSS to `angular.json` `styles`) would force-bundle the licensed fonts we
+  intentionally dropped, so we accept the warning.
+- Renaming the internal token names from `--rhc-*` to `--app-*` is possible later but out of scope.

package.json

@@ -22,8 +22,6 @@
     "@angular/forms": "^22.0.0",
     "@angular/platform-browser": "^22.0.0",
     "@angular/router": "^22.0.0",
-    "@rijkshuisstijl-community/components-css": "^17.1.2",
-    "@rijkshuisstijl-community/design-tokens": "^16.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"
   },

public/cibg-huisstijl/LICENSE.txt

@@ -0,0 +1,22 @@
+CIBG Huisstijl Licences
+-----------------------
+
+The CIBG Huisstijl is free en MIT friendly. You can use it for applications build
+for the CIBG. Part is the assets used by the CIBG Huisstijl have a limited licence (see below).
+
+# Code: MIT License
+In the CIBG Huisstijl the MIT license applies to all non-font and non-icon files.
+
+# Fonts and images
+[Applicable to: All RO-SansWebText-* fonts, Rijklogo and favicons]
+By ministerial order of 16 June 2008 (Government Gazette 2008, no. 115), the State of the Netherlands
+(Ministry of General Affairs) entered a copyright reservation, as referred to in section 15b of the Copyright Act 1912,
+concerning the use and application of central government's general purpose Rijkslogo and visual identity, including the
+fonts Rijksoverheid Serif and Rijksoverheid Sans. This reservation does not apply to parties to whom central government
+has supplied the Rijkslogo and the visual identity for use in carrying out activities or services commissioned by
+central government. Any use in any form or by any means, electronic, mechanical, photocopying, recording or otherwise
+is prohibited unless prior written authorisation has been obtained from central government. To obtain authorisation,
+you should apply to the Government Information Service.
+
+# CIBG Icon font
+The CIBG Icon font is a combination of custom icons and Font Awesome icons. The MIT licence applies to this font.

public/cibg-huisstijl/MIGRATION.md

@@ -0,0 +1,76 @@
+# Migratie naar CIBG Huisstijl 2.0.0
+In dit document staat beschreven welke stappen er moeten worden doorlopen om een prototype
+bij te werken naar versie 2.0.0 van de CIBG Huisstijl. Deze versie is gebaseerd op Bootstrap 5.2, waardoor er een
+aantal class en data-attribute migraties moeten worden doorgevoerd. 
+
+Je kunt deze migratiegids ook gebruiken voor het bijwerken van de applicaties. In appplicaties is Bootstrap alleen geen 
+dependency, dus deze hoef je dan ook niet bij te werken.
+
+## Voorbereiding
+* Update naar CIBG Huisstijl 2.0.1 package (`npm install -s @cibg/huisstijl@2.0.1`)
+* Update de boostrap dependency naar versie 5.2.0. Dit is nodig omdat we de bootstrap.bundle.min.js van Bootstrap
+  gebruiken (alleen voor prototypes).
+
+## Hernoemingen
+Er zijn een aantal classes en data-attributes gewijzigd. Doorloop de onderstaand wijzigingen. Hierin de dingen die we
+vaak gebruiken in prototypes. 
+
+Let op dat je alles in de folder 'pages' en 'includes' vervangt, maar vooral niet
+de eventueel gearchiveerde sprints omdat deze nog gebruik maken van Bootstrap 4.X.
+
+De hernoemingen die hieronder staan zijn veel in prototypes gebruikte classes. Het kan echter zijn dat je zelf nog
+andere classes
+gebruikt die gewijzigd zijn. Werkt iets niet naar verwachting? Check dan de Bootstap 5 migration guide
+op https://getbootstrap.com/docs/5.2/migration/
+om te kijken of je classes gebruikt die gewijzigd zijn.
+
+### Classes
+De volgende classes worden veel gebruikt in de prototypes en moeten worden hernoemd. Let op dat je eerst de skiplink class
+vervangt en daarna de screenreader-only classes.
+
+| Was                         | Wordt                       | 
+|-----------------------------|-----------------------------|
+| `sr-only sr-only-focusable` | `visually-hidden-focusable` |
+| `sr-only`                   | `visually-hidden`           | 
+| `ml-*`                      | `ms-*`                      |
+| `mr-*`                      | `me-*`                      |
+| `pl-*`                      | `ps-*`                      |
+| `pr-*`                      | `pe-*`                      |
+| `text-left`                 | `text-start`                |
+| `text-right`                | `text-end`                  |
+| `font-weight-*`             | `fw-*`                      | 
+| `badge badge-primary`       | `badge bg-primary`          |
+| `dropdown-menu-right`       | `dropdown-menu-end`         |
+| `dropdown-menu-left`        | `dropdown-menu-start`       |
+
+### Classes van dropdown select lists
+Styling van dropdowns is verplaats onder een andere class-name, waardoor de classes veranderd moeten worden. Wijzig de
+class van `select` elementen met de class `form-control` naar `form-control form-select`. Dit kun je niet met een
+(eenvoudige) replace-all doen, omdat andere controls ook de `form-control` gebruiken.
+
+
+**Let op**: Dit is niet van toepassing bij de paginering select, die gebruikt andere classes die niet gewijzigd
+zijn.
+
+
+
+### Data attributes (alleen voor prototypes)
+Bootstrap data-toggles zijn voortaan genamespaced. Alle `data-*="*"` moeten worden gewijzigd in `data-bs-*="*"`.
+
+| Was                      | Wordt                       |  
+|--------------------------|-----------------------------|
+| `data-toggle="tab"`      | `data-bs-toggle="tab"`      |
+| `data-toggle="tooltip"`  | `data-bs-toggle="tooltip"`  | 
+| `data-toggle="dropdown"` | `data-bs-toggle="dropdown"` |
+| `data-toggle="collapse"` | `data-bs-toggle="collapse"` |
+| `data-toggle="modal"`    | `data-bs-toggle="modal"`    |
+| `data-dismiss="modal"`   | `data-bs-dismiss="modal"`   |
+| `data-target=""`         | `data-bs-target=""`         |
+| `data-original-title=""` | `data-bs-title=""` | 
+
+
+### Javascript
+Controleer of er javascript in je project zit dat dymamisch HTML injecteert en of daarin de bovenstaande hernoemingen
+  voorkomen. In een standaard project is dit meestal alleen een `sr-only` class voor menu-items in de header.
+
+

public/cibg-huisstijl/README.md

@@ -0,0 +1,24 @@
+# CIBG Huisstijl
+This package contains all that files that are required to build front-end applications meeting
+the CIBG design criteria.
+
+## Getting started
+After installation you can use the code examples from https://applicationframework.cibg.nl/ontwerp 
+in your application.
+
+1. Copy all files and assets
+To use the CIBG Huisstijl you have to copy all assets and the huisstijl.min.css file into your project. If you are 
+including the CIBG Huisstijl as a dependency you should integrate the copying of assets
+and files in your build script to make sure you always have all updated files when the package is updated.
+
+2. Copy Bootstrap and JQuery Javascript (Optional)
+The CIBG Huisstijl is a customized and extended build of Bootstrap. Bootstrap's Javascript is only required
+if you are want to make use of Bootstrap to bring your app to life. For more information go to https://getbootstrap.com/docs/4.4.1/getting-started/javascript/
+
+Note that the code examples in our design system use Bootstrap.JS and JQuery.
+ 
+## Extending the styling
+The NPM package on purpose does not contain source files to prevent projects from customizing the Huisstijl. The CIBG Huisstijl contains styling for all components that are described in the design system and should cover most of your needs.
+
+If you feel like something is missing and feel the need to extend the CIBG Huistijl you can use the ./scss/_variables.scss 
+file as a basis.

public/cibg-huisstijl/css/back-office/huisstijl-back-office.css

@@ -0,0 +1,665 @@
+/*! CIBG Huisstijl 3.22.0 */
+.back-office .btn-group .btn.active {
+  background-color: #d9ebf7;
+}
+.back-office .editor-container .edit-area {
+  background-color: #fff;
+  border: 1px solid #000;
+  border-top: 0;
+  font-family: "Verdana", sans-serif;
+  font-size: 0.825rem;
+  height: auto;
+  min-height: 200px;
+  padding: 1.25rem 1rem 0.75rem 1rem;
+}
+.back-office .editor-container .edit-area:active, .back-office .editor-container .edit-area:focus-visible {
+  outline: 2px dotted #000;
+  outline-offset: -2px;
+}
+.back-office .editor-container .edit-area h2, .back-office .editor-container .edit-area h3, .back-office .editor-container .edit-area h4 {
+  color: #000;
+  font-size: 0.825rem;
+  font-weight: bold;
+  line-height: 1.25rem;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+.back-office .btn-toolbar {
+  background-color: #fff;
+  border: 1px solid #000;
+  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 0;
+  box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07);
+  display: flex;
+  flex-wrap: wrap;
+  padding: 7px 0;
+  position: relative;
+  z-index: 2;
+}
+.back-office .btn-toolbar .btn-group {
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  padding: 0 6px;
+}
+.back-office .btn-toolbar .btn-group [aria-disabled=true] {
+  opacity: 0.5;
+}
+.back-office .btn-toolbar .btn-group:last-child {
+  border-right: none;
+}
+.back-office .btn-toolbar .btn-group .btn {
+  background-color: #fff;
+  border: 0;
+  color: #000;
+  min-width: 30px;
+  padding: 2px 8px;
+}
+.back-office .btn-toolbar .btn-group .btn.active {
+  background-color: #d9ebf7;
+}
+.back-office .btn-toolbar .btn-group .btn.disabled {
+  cursor: not-allowed;
+}
+.back-office .btn-toolbar .btn-group .btn:hover {
+  background: #f1f5f9;
+}
+.back-office .btn-toolbar .btn-group .btn:active, .back-office .btn-toolbar .btn-group .btn:focus-visible {
+  outline: 2px dotted #000;
+  outline-offset: -2px;
+}
+.back-office .editor-icon {
+  background-size: contain;
+  display: inline-block;
+  height: 1.25em;
+  vertical-align: middle;
+  width: 1.25em;
+}
+.back-office .editor-icon--indent {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96 128C96 110.3 110.3 96 128 96L512 96C529.7 96 544 110.3 544 128C544 145.7 529.7 160 512 160L128 160C110.3 160 96 145.7 96 128zM288 256C288 238.3 302.3 224 320 224L512 224C529.7 224 544 238.3 544 256C544 273.7 529.7 288 512 288L320 288C302.3 288 288 273.7 288 256zM320 352L512 352C529.7 352 544 366.3 544 384C544 401.7 529.7 416 512 416L320 416C302.3 416 288 401.7 288 384C288 366.3 302.3 352 320 352zM96 512C96 494.3 110.3 480 128 480L512 480C529.7 480 544 494.3 544 512C544 529.7 529.7 544 512 544L128 544C110.3 544 96 529.7 96 512zM223.8 332.6L121.8 411.9C111.3 420.1 96 412.6 96 399.3L96 240.7C96 227.4 111.3 219.9 121.8 228.1L223.7 307.4C231.9 313.8 231.9 326.3 223.7 332.7z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--remove-style {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M73 39.1C63.6 29.7 48.4 29.7 39.1 39.1C29.8 48.5 29.7 63.7 39 73.1L567 601.1C576.4 610.5 591.6 610.5 600.9 601.1C610.2 591.7 610.3 576.5 600.9 567.2L354.7 320.9L400.2 160L503 160L497 184.2C492.7 201.3 503.1 218.7 520.3 223C537.5 227.3 554.8 216.9 559.1 199.7L570.1 155.6C577.6 125.3 554.7 96 523.5 96L204.5 96C184.7 96 167.2 108.1 160 126.1L73 39.1zM212.4 178.5L217 160L333.7 160L302.9 269L212.4 178.5zM273 374.8L243.3 480L192 480C174.3 480 160 494.3 160 512C160 529.7 174.3 544 192 544L352 544C369.7 544 384 529.7 384 512C384 494.3 369.7 480 352 480L309.8 480L324.9 426.7L273 374.8z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--ul {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M112 208C138.5 208 160 186.5 160 160C160 133.5 138.5 112 112 112C85.5 112 64 133.5 64 160C64 186.5 85.5 208 112 208zM256 128C238.3 128 224 142.3 224 160C224 177.7 238.3 192 256 192L544 192C561.7 192 576 177.7 576 160C576 142.3 561.7 128 544 128L256 128zM256 288C238.3 288 224 302.3 224 320C224 337.7 238.3 352 256 352L544 352C561.7 352 576 337.7 576 320C576 302.3 561.7 288 544 288L256 288zM256 448C238.3 448 224 462.3 224 480C224 497.7 238.3 512 256 512L544 512C561.7 512 576 497.7 576 480C576 462.3 561.7 448 544 448L256 448zM112 528C138.5 528 160 506.5 160 480C160 453.5 138.5 432 112 432C85.5 432 64 453.5 64 480C64 506.5 85.5 528 112 528zM160 320C160 293.5 138.5 272 112 272C85.5 272 64 293.5 64 320C64 346.5 85.5 368 112 368C138.5 368 160 346.5 160 320z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--ol {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M64 136C64 122.8 74.7 112 88 112L136 112C149.3 112 160 122.7 160 136L160 240L184 240C197.3 240 208 250.7 208 264C208 277.3 197.3 288 184 288L88 288C74.7 288 64 277.3 64 264C64 250.7 74.7 240 88 240L112 240L112 160L88 160C74.7 160 64 149.3 64 136zM94.4 365.2C105.8 356.6 119.7 352 134 352L138.9 352C172.6 352 200 379.4 200 413.1C200 432.7 190.6 451 174.8 462.5L150.8 480L184 480C197.3 480 208 490.7 208 504C208 517.3 197.3 528 184 528L93.3 528C77.1 528 64 514.9 64 498.7C64 489.3 68.5 480.5 76.1 475L146.6 423.7C150 421.2 152 417.3 152 413.1C152 405.9 146.1 400 138.9 400L134 400C130.1 400 126.3 401.3 123.2 403.6L102.4 419.2C91.8 427.2 76.8 425 68.8 414.4C60.8 403.8 63 388.8 73.6 380.8L94.4 365.2zM288 128L544 128C561.7 128 576 142.3 576 160C576 177.7 561.7 192 544 192L288 192C270.3 192 256 177.7 256 160C256 142.3 270.3 128 288 128zM288 288L544 288C561.7 288 576 302.3 576 320C576 337.7 561.7 352 544 352L288 352C270.3 352 256 337.7 256 320C256 302.3 270.3 288 288 288zM288 448L544 448C561.7 448 576 462.3 576 480C576 497.7 561.7 512 544 512L288 512C270.3 512 256 497.7 256 480C256 462.3 270.3 448 288 448z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--link {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--square-yellow {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23f1c40f" d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--square-red {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23e03e2d" d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--square-green {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%236AA549" d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--square-blue {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path fill="%23409CD5" d="M160 96L480 96C515.3 96 544 124.7 544 160L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 160C96 124.7 124.7 96 160 96z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--undo {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M88 256L232 256C241.7 256 250.5 250.2 254.2 241.2C257.9 232.2 255.9 221.9 249 215L202.3 168.3C277.6 109.7 386.6 115 455.8 184.2C530.8 259.2 530.8 380.7 455.8 455.7C380.8 530.7 259.3 530.7 184.3 455.7C174.1 445.5 165.3 434.4 157.9 422.7C148.4 407.8 128.6 403.4 113.7 412.9C98.8 422.4 94.4 442.2 103.9 457.1C113.7 472.7 125.4 487.5 139 501C239 601 401 601 501 501C601 401 601 239 501 139C406.8 44.7 257.3 39.3 156.7 122.8L105 71C98.1 64.2 87.8 62.1 78.8 65.8C69.8 69.5 64 78.3 64 88L64 232C64 245.3 74.7 256 88 256z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--redo {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M552 256L408 256C398.3 256 389.5 250.2 385.8 241.2C382.1 232.2 384.1 221.9 391 215L437.7 168.3C362.4 109.7 253.4 115 184.2 184.2C109.2 259.2 109.2 380.7 184.2 455.7C259.2 530.7 380.7 530.7 455.7 455.7C463.9 447.5 471.2 438.8 477.6 429.6C487.7 415.1 507.7 411.6 522.2 421.7C536.7 431.8 540.2 451.8 530.1 466.3C521.6 478.5 511.9 490.1 501 501C401 601 238.9 601 139 501C39.1 401 39 239 139 139C233.3 44.7 382.7 39.4 483.3 122.8L535 71C541.9 64.1 552.2 62.1 561.2 65.8C570.2 69.5 576 78.3 576 88L576 232C576 245.3 565.3 256 552 256z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--outdent {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96.4 128C96.4 110.3 110.7 96 128.4 96L512.4 96C530.1 96 544.4 110.3 544.4 128C544.4 145.7 530.1 160 512.4 160L128.4 160C110.8 160 96.4 145.7 96.4 128zM288.4 256C288.4 238.3 302.7 224 320.4 224L512.4 224C530.1 224 544.4 238.3 544.4 256C544.4 273.7 530.1 288 512.4 288L320.4 288C302.7 288 288.4 273.7 288.4 256zM320.4 352L512.4 352C530.1 352 544.4 366.3 544.4 384C544.4 401.7 530.1 416 512.4 416L320.4 416C302.7 416 288.4 401.7 288.4 384C288.4 366.3 302.7 352 320.4 352zM96.4 512C96.4 494.3 110.7 480 128.4 480L512.4 480C530.1 480 544.4 494.3 544.4 512C544.4 529.7 530.1 544 512.4 544L128.4 544C110.7 544 96.4 529.7 96.4 512zM96.7 332.6C88.5 326.2 88.5 313.7 96.7 307.3L198.6 228C209.1 219.8 224.4 227.3 224.4 240.6L224.4 399.2C224.4 412.5 209.1 420 198.6 411.8L96.7 332.6z"/></svg>') no-repeat center center;
+}
+.back-office .editor-icon--chevron-down {
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M8.7 2.2c.3-.3.8-.3 1 0 .4.4.4.9 0 1.2L5.7 7.8c-.3.3-.9.3-1.2 0L.2 3.4a.8.8 0 0 1 0-1.2c.3-.3.8-.3 1.1 0L5 6l3.7-3.8Z"/></svg>') no-repeat center center;
+}
+.back-office .editor-select {
+  background: #f1f5f9;
+  border: 0;
+  border-radius: 2px;
+  border-right: 5px solid #f1f5f9;
+  font-size: 1rem;
+  padding: 6px 4px 6px 6px;
+  width: 5.5em;
+}
+.back-office .editor-select:active, .back-office .editor-select:focus-visible {
+  outline: 2px dotted #000;
+  outline-offset: -2px;
+}
+.back-office .editor-select--h2, .back-office .editor-select--h3, .back-office .editor-select--h4 {
+  font-weight: bold;
+}
+.back-office .editor-select--h2 {
+  font-size: 1.25rem;
+}
+.back-office .editor-select--h3 {
+  font-size: 1.125rem;
+}
+.back-office .editor-select--h4 {
+  font-size: 1rem;
+}
+.back-office .menu-color-picker {
+  background-color: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  margin-top: -2px;
+  max-height: 323px;
+  overflow: hidden auto;
+  position: absolute;
+  z-index: 2;
+}
+.back-office .menu-color-picker__color-list {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  padding: 8px;
+}
+.back-office .menu-color-picker__color-btn {
+  border-radius: 4px;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+}
+.back-office .btn--split-button {
+  padding: 0.425rem 0.25rem;
+  user-select: none;
+}
+.back-office .btn--split-button:hover {
+  background: #f1f5f9;
+}
+.back-office .btn--split-button:active, .back-office .btn--split-button:focus-visible {
+  outline: 2px dotted #000;
+  outline-offset: -2px;
+}
+
+@media (min-width: 1200px) {
+  body.back-office .container,
+  html.back-office .container {
+    max-width: 1860px;
+    padding: 0 1.5rem;
+  }
+}
+
+.back-office .form-horizontal .form-group {
+  margin-bottom: 0.75rem;
+}
+.back-office .form-horizontal .form-group .col-control {
+  padding-right: 1em;
+}
+.back-office .form-horizontal .form-group.last {
+  margin-bottom: 0;
+}
+.back-office .form-horizontal .form-group .form-control {
+  height: 2rem;
+}
+.back-office .form-horizontal .form-group .help {
+  height: 2rem;
+  width: 2rem;
+}
+.back-office .form-horizontal .form-group .help.open::before {
+  font-size: 0.9rem;
+  line-height: 2rem;
+}
+.back-office .form-horizontal .form-group .help.close::before {
+  font-size: 0.85rem;
+  line-height: 2rem;
+}
+.back-office .form-horizontal .form-group .form-check.styled {
+  margin-bottom: 0;
+  padding-left: 1.575rem;
+}
+.back-office .form-horizontal .form-group .form-check.styled input + label {
+  margin-bottom: 0.25rem;
+}
+.back-office .form-horizontal .form-group .form-check.styled input[type=checkbox] + label {
+  line-height: 1.5rem;
+}
+.back-office .form-horizontal .form-group .form-check.styled input[type=checkbox] + label::before {
+  height: 1.1rem;
+  top: 5px;
+  width: 1.1rem;
+}
+.back-office .form-horizontal .form-group .form-check.styled input[type=checkbox] + label::after {
+  height: 5px;
+  left: 4px;
+  top: 10px;
+  width: 10px;
+}
+.back-office .form-horizontal .form-group .form-check.styled input[type=radio] + label {
+  line-height: 1.5rem;
+}
+.back-office .form-horizontal--has-help .form-group .col-control {
+  padding-right: 70px;
+}
+.back-office .form-horizontal--has-help .form-group .col-control.loader-right .loader {
+  top: -2px;
+}
+.back-office .form-horizontal--has-help .period-input_field .form-group .col-control {
+  padding-right: 1rem;
+}
+.back-office .form-horizontal.table-form fieldset {
+  background: none;
+  margin-bottom: 0;
+  padding: 0;
+}
+.back-office .form-horizontal.table-form h2 {
+  display: block;
+}
+.back-office .form-horizontal .filter-bar {
+  padding-bottom: 0;
+}
+.back-office .form-horizontal .filter-bar .col-control {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+.back-office .form-horizontal .filter-bar .col-form-label {
+  color: #617286;
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+@media (min-width: 992px) {
+  .back-office .form-horizontal .filter-bar {
+    padding: 0.375rem 0.75rem 1rem;
+  }
+  .back-office .form-horizontal .filter-bar .form-group {
+    margin-bottom: 0;
+  }
+  .back-office .form-horizontal .filter-bar .col-control {
+    padding-right: 0.1rem;
+  }
+  .back-office .form-horizontal .filter-bar__buttons .btn {
+    border-radius: 1px;
+    padding: 0.1375rem 0.75rem;
+  }
+  .back-office .form-horizontal .filter-bar__buttons .btn.btn-loader {
+    padding-right: 40px;
+  }
+  .back-office .form-horizontal .filter-bar__buttons .btn.btn-loader:after {
+    top: 14px;
+  }
+}
+.back-office .feedback-cta {
+  background-color: #f1f5f9;
+  border-radius: 1px;
+}
+.back-office .feedback-cta .icon {
+  background: url("../../icons/information-symbol.svg") center center no-repeat #617286;
+  background-size: 11px;
+}
+.back-office .data-block .modified {
+  background-color: #fff4dc;
+  border-radius: 4px;
+  font-weight: bold;
+  padding: 5px;
+}
+.back-office .data-block .modified::after {
+  content: " *";
+}
+@media (max-width: 575.98px) {
+  .back-office table.multi-axis tbody tr td {
+    background-color: #f1f5f9;
+    border-bottom: 0;
+  }
+  .back-office table.multi-axis tbody tr td::before {
+    border-left: 0;
+    color: #475569;
+    font-weight: normal;
+  }
+  .back-office table.multi-axis th {
+    background-color: #e2e8f0;
+    border: 0;
+    border-bottom: 2px solid #fff;
+    border-top: 2px solid #fff;
+  }
+}
+.back-office table {
+  margin-bottom: 1em;
+}
+.back-office table .status::before {
+  border-radius: 2px;
+  display: inline-block;
+  font-family: "CIBG Icons", serif;
+  font-size: 13px;
+  height: 20px;
+  line-height: 20px;
+  margin: -3px 5px 0 0;
+  padding-left: 4px;
+  speak: none;
+  vertical-align: middle;
+  width: 20px;
+}
+.back-office table .status.failed {
+  color: #d52b1e;
+}
+.back-office table .status.failed::before {
+  background-color: #d52b1e;
+  color: #fff;
+  content: "\ea35"/"";
+}
+.back-office table .status.warning {
+  color: #000;
+}
+.back-office table .status.warning::before {
+  background-color: #ffb612;
+  color: #000;
+  content: "\ea35"/"";
+}
+.back-office table .status.success {
+  color: #176e1b;
+}
+.back-office table .status.success::before {
+  background-color: #39870c;
+  color: #fff;
+  content: "\ea34"/"";
+}
+.back-office .table--form-grid .form-group {
+  margin-bottom: 0;
+}
+.back-office .table--form-grid .col-control {
+  flex: 0 0 100%;
+  max-width: 100%;
+}
+.back-office .btn-approve::before, .back-office .btn-approve::after, .back-office .btn-reject::before, .back-office .btn-reject::after, .back-office .btn-next::before, .back-office .btn-next::after, .back-office .btn-previous::before, .back-office .btn-previous::after, .back-office .btn-icon::before, .back-office .btn-icon::after {
+  display: inline-block;
+  font-family: "CIBG Icons", serif;
+  font-size: 0.8em;
+  font-weight: normal;
+  line-height: 10px;
+  margin: -3px 5px 0 0;
+  speak: none;
+  vertical-align: middle;
+}
+.back-office .btn-approve:focus, .back-office .btn-reject:focus, .back-office .btn-next:focus, .back-office .btn-previous:focus, .back-office .btn-icon:focus {
+  box-shadow: 0 0 0 2px #fff;
+  outline: 2px dotted #000;
+  outline-offset: 1px;
+  transition: all 0.2s linear;
+}
+.back-office .btn-approve {
+  background-color: #39870c;
+  color: #fff;
+}
+.back-office .btn-approve::before {
+  content: "\ea34"/"";
+}
+.back-office .btn-reject {
+  background-color: #d52b1e;
+  color: #fff;
+}
+.back-office .btn-reject::before {
+  content: "\ea18"/"";
+}
+.back-office .btn-next::after {
+  content: "\ea09"/"";
+  margin: -2px -2px 0 4px;
+}
+.back-office .btn-previous::before {
+  content: "\ea06"/"";
+  margin: -3px 4px 0 -2px;
+}
+.back-office .btn.btn-icon {
+  vertical-align: top;
+}
+.back-office .btn.btn-icon::before {
+  font-family: "CIBG Icons", sans-serif;
+  font-size: 1em;
+  vertical-align: middle;
+}
+.back-office .btn.btn-icon.verwijderen.btn-link {
+  color: #d52b1e;
+}
+.back-office .btn.btn-icon.verwijderen::before {
+  content: "\ea20"/"";
+}
+.back-office .btn.btn-icon.bewerken::before {
+  content: "\ea31"/"";
+  font-size: 1.1em;
+}
+.back-office .icon-add::before {
+  content: "\ea15"/"";
+  font-size: 1em;
+  margin: -3px 4px 0 -2px;
+}
+.back-office .notes {
+  background-color: #f1f5f9;
+  padding: 0.5em 0.75em;
+}
+.back-office .notes .note-item {
+  margin-bottom: 1em;
+}
+.back-office .notes .note-item h2, .back-office .notes .note-item h3, .back-office .notes .note-item h4, .back-office .notes .note-item h5 {
+  font-size: 1em;
+  font-weight: bold;
+  line-height: 2em;
+}
+.back-office .notes .note-item .title {
+  font-weight: 700;
+  line-height: 2em;
+}
+.back-office .notes .note-item .title .separator {
+  color: #617286;
+  display: inline-block;
+  line-height: 1em;
+  margin: 0 0.15em;
+}
+.back-office .notes .note-item .remove {
+  display: inline-block;
+  padding-top: 2px;
+  text-decoration: none;
+}
+.back-office .notes .note-item .remove.icon {
+  color: #d52b1e;
+  font-size: 0.9em;
+}
+.back-office .notes .note-item .sub-title {
+  color: #617286;
+  font-size: 0.9em;
+}
+.back-office .notes .note-item .description {
+  background-color: #fff;
+  margin-bottom: 0.25em;
+  padding: 0.5em 0.75em;
+  white-space: pre-line;
+}
+.back-office .input-counter {
+  font-size: 0.9em;
+  text-align: right;
+}
+.back-office .tag {
+  border-radius: 0.25em;
+  font-size: 0.9em;
+  margin-left: 2px;
+  padding: 0.2em 0.4em;
+}
+.back-office .tag.grey {
+  background-color: #617286;
+  color: #fff;
+}
+.back-office .tag.white {
+  background-color: #fff;
+  border: 1px solid #617286;
+  color: #000;
+}
+.back-office .feedback.compact, .back-office .feedback--compact {
+  border-radius: 3px;
+  display: flex;
+  line-height: 1.35em;
+  margin-bottom: 0.375em;
+  padding: 0.5rem 0.5rem 0.425rem 2.375rem;
+}
+.back-office .feedback.compact .icon, .back-office .feedback--compact .icon {
+  height: 1rem;
+  left: 0.65rem;
+  margin: 0 0.3em 0 0;
+  min-width: 21px;
+  top: 0.575rem;
+  width: 1rem;
+}
+.back-office .feedback.compact p, .back-office .feedback--compact p {
+  line-height: inherit;
+  margin-bottom: 0;
+}
+.back-office .dropdown-menu[role=listbox] {
+  right: calc(17px + 1em);
+}
+.back-office .page-summary {
+  background-color: #f1f5f9;
+  border-left: 8px solid #0E7C77;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  padding: 0.75em 0.75em 0.25em 1em;
+}
+@media (min-width: 768px) {
+  .back-office .page-summary {
+    flex-direction: row;
+  }
+}
+.back-office .page-summary__item {
+  padding-right: 3em;
+}
+.back-office .page-summary__item-term {
+  color: #475569;
+  font-size: 0.9em;
+  font-weight: bold;
+}
+.back-office .dropdown li a {
+  text-decoration: none;
+}
+.back-office .dropdown li:before {
+  display: none;
+}
+.back-office .dropdown-item:focus {
+  box-shadow: 0 0 0 2px #fff;
+  outline: 2px dotted #000;
+  outline-offset: 1px;
+  transition: all 0.2s linear;
+}
+.back-office--hide-logo header .visually-hidden-focusable {
+  background-color: #fff;
+  color: var(--ro-brand-primary);
+  z-index: 1000;
+}
+.back-office--hide-logo header .logo {
+  display: none;
+}
+.back-office--hide-logo header .title a,
+.back-office--hide-logo header .title span {
+  font-size: 1.425rem;
+}
+.back-office .modal-content {
+  animation-name: unset;
+}
+.back-office .doc-visibility::before {
+  color: #475569;
+  display: inline-block;
+  font-family: "CIBG Icons", serif;
+  font-size: 1.325rem;
+  line-height: 10px;
+  margin-right: -0.25rem;
+  vertical-align: middle;
+}
+.back-office .doc-visibility--invisible::before {
+  content: "\ea46"/"";
+}
+.back-office .doc-visibility--visible::before {
+  content: "\ea47"/"";
+}
+.back-office .doc-direction {
+  white-space: nowrap;
+}
+.back-office .doc-direction::before {
+  display: inline-block;
+  font-family: "CIBG Icons", serif;
+  font-size: 0.925rem;
+  font-weight: 400;
+  line-height: 1rem;
+  margin: -2px 0.325rem 0 -2px;
+  vertical-align: middle;
+}
+.back-office .doc-direction--in::before {
+  color: #0E7C77;
+  content: "\ea13"/"";
+}
+.back-office .doc-direction--out::before {
+  color: var(--ro-brand-contrast);
+  content: "\ea12"/"";
+}
+.back-office .doc-direction--internal:before {
+  color: #475569;
+  content: "\ea4a"/"";
+  font-size: 1.325rem;
+  margin: -2px 2px 0 -5px;
+}
+.back-office main > :last-child {
+  margin-bottom: 0;
+}
+.back-office .preview-docs {
+  border: 1px solid #e2e8f0;
+  border-radius: 3px;
+  height: 75vh;
+  width: 100%;
+}
+.back-office .document-placeholder {
+  align-items: center;
+  background-color: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 3px;
+  color: #617286;
+  display: flex;
+  height: 40vh;
+  justify-content: center;
+  padding: 1rem;
+}
+.back-office form:not(.form-horizontal--has-help) .col-control.loader-right .loader {
+  margin: 0.5rem;
+  opacity: 1;
+  position: absolute;
+  right: 1rem;
+  top: -2px;
+}
+.back-office form:not(.form-horizontal--has-help) .col-control.loader-right select ~ .loader {
+  right: 2.25rem;
+}
+
+@media (min-width: 992px) {
+  .sticky-tabs {
+    bottom: 0.75rem;
+    overflow-y: hidden;
+    padding: 0;
+    position: sticky;
+    top: 0.75rem;
+  }
+  .sticky-tabs .tab-content.scrollable {
+    max-height: 90vh;
+    overflow-y: scroll;
+    padding: 1rem;
+  }
+  .sticky-tabs .tab-content.scrollable .tab-pane {
+    padding: 0;
+  }
+  .sticky-tabs .tab-content.scrollable .tab-pane::after {
+    background: linear-gradient(to bottom, transparent, #fff 85%);
+    bottom: 1px;
+    content: " ";
+    height: 3.5rem;
+    left: 1px;
+    position: absolute;
+    right: 1rem;
+    z-index: 1;
+  }
+  .tox.tox-tinymce {
+    border: 1px solid #475569;
+    border-bottom: 1px solid #000;
+    border-radius: 0;
+  }
+  .tox.tox-tinymce.active {
+    outline: 2px dotted #000;
+    outline-offset: 2px;
+  }
+  .tox.tox-tinymce .tox-edit-area::before {
+    border: none;
+  }
+}

public/cibg-huisstijl/css/components/vragenlijst.css

@@ -0,0 +1,99 @@
+/*! CIBG Huisstijl 3.22.0 */
+.vragenlijst .form-horizontal .form-group .col-control {
+  padding-right: 0.833em;
+}
+.vragenlijst .form-horizontal .form-group .col-form-label {
+  font-size: 1.1em;
+  font-weight: 600;
+}
+.vragenlijst .conclusion {
+  border: 1px solid #cccccc;
+  padding: 1em;
+}
+.vragenlijst .conclusion .feedback.disclaimer {
+  font-size: 0.8em;
+  margin-bottom: 0;
+  margin-top: 1.5em;
+}
+.vragenlijst .answers-summary {
+  background-color: #f1f5f9;
+  margin-bottom: 0.75em;
+  padding: 0.75em;
+}
+.vragenlijst .answers-summary .edit-link {
+  font-size: 0.85em;
+  line-height: 1.5em;
+}
+.vragenlijst .answers-summary .row {
+  border-bottom: 1px solid #f1f5f9;
+  padding-bottom: 0.5em;
+  padding-top: 0.5em;
+}
+.vragenlijst .answers-summary .row:last-of-type {
+  border-bottom: 0;
+}
+.vragenlijst .answers-summary .block-wrapper {
+  background-color: #fff;
+  margin-bottom: 0.75em;
+  padding: 0.25em 1.75em 0.5em;
+}
+.vragenlijst .answers-summary .block-wrapper:last-of-type {
+  margin-bottom: 0;
+}
+.vragenlijst .answers-summary .block-wrapper dt,
+.vragenlijst .answers-summary .block-wrapper dd {
+  padding: 6px 12px 6px 0;
+}
+.vragenlijst .answers-summary .block-wrapper dt:first-of-type,
+.vragenlijst .answers-summary .block-wrapper dd:first-of-type {
+  padding-top: 0;
+}
+.vragenlijst .answers-summary .block-wrapper dt:last-of-type,
+.vragenlijst .answers-summary .block-wrapper dd:last-of-type {
+  padding-bottom: 0;
+}
+.vragenlijst .answers-summary .block-wrapper dd {
+  line-height: 1.5em;
+  margin-bottom: 0;
+}
+.vragenlijst .answers-summary .block-wrapper dt {
+  color: #617286;
+  font-weight: normal;
+  padding-right: 5em;
+}
+.vragenlijst .progress {
+  border: 1px solid #f1f5f9;
+}
+.vragenlijst .progress .progress-bar {
+  background-color: #01689b;
+}
+.vragenlijst .progress .w10 {
+  width: 10%;
+}
+.vragenlijst .progress .w20 {
+  width: 20%;
+}
+.vragenlijst .progress .w30 {
+  width: 30%;
+}
+.vragenlijst .progress .w40 {
+  width: 40%;
+}
+.vragenlijst .progress .w50 {
+  width: 50%;
+}
+.vragenlijst .progress .w60 {
+  width: 60%;
+}
+.vragenlijst .progress .w70 {
+  width: 70%;
+}
+.vragenlijst .progress .w80 {
+  width: 80%;
+}
+.vragenlijst .progress .w90 {
+  width: 90%;
+}
+.vragenlijst .progress .w100 {
+  width: 100%;
+}

public/cibg-huisstijl/css/components/vragenlijst.min.css

@@ -0,0 +1 @@
+/*! CIBG Huisstijl 3.22.0 */.vragenlijst .form-horizontal .form-group .col-control{padding-right:.833em}.vragenlijst .form-horizontal .form-group .col-form-label{font-size:1.1em;font-weight:600}.vragenlijst .conclusion{border:1px solid #ccc;padding:1em}.vragenlijst .conclusion .feedback.disclaimer{font-size:.8em;margin-bottom:0;margin-top:1.5em}.vragenlijst .answers-summary{background-color:#f1f5f9;margin-bottom:.75em;padding:.75em}.vragenlijst .answers-summary .edit-link{font-size:.85em;line-height:1.5em}.vragenlijst .answers-summary .row{border-bottom:1px solid #f1f5f9;padding-bottom:.5em;padding-top:.5em}.vragenlijst .answers-summary .row:last-of-type{border-bottom:0}.vragenlijst .answers-summary .block-wrapper{background-color:#fff;margin-bottom:.75em;padding:.25em 1.75em .5em}.vragenlijst .answers-summary .block-wrapper:last-of-type{margin-bottom:0}.vragenlijst .answers-summary .block-wrapper dd,.vragenlijst .answers-summary .block-wrapper dt{padding:6px 12px 6px 0}.vragenlijst .answers-summary .block-wrapper dd:first-of-type,.vragenlijst .answers-summary .block-wrapper dt:first-of-type{padding-top:0}.vragenlijst .answers-summary .block-wrapper dd:last-of-type,.vragenlijst .answers-summary .block-wrapper dt:last-of-type{padding-bottom:0}.vragenlijst .answers-summary .block-wrapper dd{line-height:1.5em;margin-bottom:0}.vragenlijst .answers-summary .block-wrapper dt{color:#617286;font-weight:400;padding-right:5em}.vragenlijst .progress{border:1px solid #f1f5f9}.vragenlijst .progress .progress-bar{background-color:#01689b}.vragenlijst .progress .w10{width:10%}.vragenlijst .progress .w20{width:20%}.vragenlijst .progress .w30{width:30%}.vragenlijst .progress .w40{width:40%}.vragenlijst .progress .w50{width:50%}.vragenlijst .progress .w60{width:60%}.vragenlijst .progress .w70{width:70%}.vragenlijst .progress .w80{width:80%}.vragenlijst .progress .w90{width:90%}.vragenlijst .progress .w100{width:100%}

public/cibg-huisstijl/css/tinymce/tinymce-cibg.css

@@ -0,0 +1,26 @@
+/*! Part of CIBG Huisstijl 3.22.0 */
+/**
+  Dit bestand kan optioneel gebruikt worden als je TinyMCE editors in je applicatie gebruikt.
+  Deze CSS bepaalt de styling van de content van de tinymce editors en niet controls van de editor zelf.
+ */
+body, * {
+  font-family: "Verdana", sans-serif;
+  line-height: 1.25rem;
+}
+
+p, li {
+  font-family: "Verdana", sans-serif;
+  font-size: 0.825rem;
+}
+
+p {
+  margin-top: 0;
+}
+
+h2, h3, h4 {
+  font-size: 0.825rem;
+  font-weight: bold;
+  line-height: 1.25rem;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}

public/cibg-huisstijl/css/tinymce/tinymce-cibg.min.css

@@ -0,0 +1 @@
+/*! Part of CIBG Huisstijl 3.22.0 */*,body{font-family:Verdana,sans-serif;line-height:1.25rem}li,p{font-family:Verdana,sans-serif;font-size:.825rem}p{margin-top:0}h2,h3,h4{font-size:.825rem;font-weight:700;line-height:1.25rem;margin-bottom:0;padding-bottom:0}

public/cibg-huisstijl/icons/correct-symbol.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 442.533 442.533" style="enable-background:new 0 0 442.533 442.533;" xml:space="preserve">
+<g>
+	<path d="M434.539,98.499l-38.828-38.828c-5.324-5.328-11.799-7.993-19.41-7.993c-7.618,0-14.093,2.665-19.417,7.993L169.59,247.248   l-83.939-84.225c-5.33-5.33-11.801-7.992-19.412-7.992c-7.616,0-14.087,2.662-19.417,7.992L7.994,201.852   C2.664,207.181,0,213.654,0,221.269c0,7.609,2.664,14.088,7.994,19.416l103.351,103.349l38.831,38.828   c5.327,5.332,11.8,7.994,19.414,7.994c7.611,0,14.084-2.669,19.414-7.994l38.83-38.828L434.539,137.33   c5.325-5.33,7.994-11.802,7.994-19.417C442.537,110.302,439.864,103.829,434.539,98.499z" fill="#FFFFFF"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/cibg-huisstijl/icons/exclamation-black.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 401.999 401.998" style="enable-background:new 0 0 401.999 401.998;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M237.543,301.499h-73.091c-4.95,0-9.233,1.811-12.851,5.425c-3.615,3.617-5.424,7.897-5.424,12.847v63.953    c0,4.948,1.809,9.232,5.424,12.854c3.621,3.61,7.9,5.421,12.851,5.421h73.097c4.942,0,9.227-1.811,12.848-5.421    c3.61-3.621,5.42-7.905,5.42-12.854v-63.953c0-4.949-1.813-9.229-5.427-12.847C246.773,303.307,242.488,301.499,237.543,301.499z" fill="#000000"/>
+		<path d="M259.383,5.424C255.862,1.812,251.628,0,246.676,0h-91.359c-4.948,0-9.18,1.812-12.703,5.424    c-3.521,3.617-5.186,7.902-4.996,12.85l7.992,219.265c0.19,4.948,2.139,9.236,5.852,12.847c3.711,3.621,8.041,5.431,12.991,5.431    h73.097c4.942,0,9.271-1.81,12.991-5.431c3.71-3.61,5.653-7.898,5.852-12.847l7.987-219.265    C264.578,13.326,262.905,9.045,259.383,5.424z" fill="#000000"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/cibg-huisstijl/icons/exclamation.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 401.999 401.998" style="enable-background:new 0 0 401.999 401.998;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M237.543,301.499h-73.091c-4.95,0-9.233,1.811-12.851,5.425c-3.615,3.617-5.424,7.897-5.424,12.847v63.953    c0,4.948,1.809,9.232,5.424,12.854c3.621,3.61,7.9,5.421,12.851,5.421h73.097c4.942,0,9.227-1.811,12.848-5.421    c3.61-3.621,5.42-7.905,5.42-12.854v-63.953c0-4.949-1.813-9.229-5.427-12.847C246.773,303.307,242.488,301.499,237.543,301.499z" fill="#FFFFFF"/>
+		<path d="M259.383,5.424C255.862,1.812,251.628,0,246.676,0h-91.359c-4.948,0-9.18,1.812-12.703,5.424    c-3.521,3.617-5.186,7.902-4.996,12.85l7.992,219.265c0.19,4.948,2.139,9.236,5.852,12.847c3.711,3.621,8.041,5.431,12.991,5.431    h73.097c4.942,0,9.271-1.81,12.991-5.431c3.71-3.61,5.653-7.898,5.852-12.847l7.987-219.265    C264.578,13.326,262.905,9.045,259.383,5.424z" fill="#FFFFFF"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/cibg-huisstijl/icons/generic-icons.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="150px" height="145.7px" viewBox="0 0 150 145.7" style="enable-background:new 0 0 150 145.7;" xml:space="preserve">
+<g>
+	<path d="M4.7,35.3l1.5-1.5l3.7,3.7l3.7-3.7l1.5,1.5L11.4,39l3.7,3.7l-1.5,1.5l-3.7-3.7l-3.7,3.7l-1.5-1.5L8.4,39L4.7,35.3z"/>
+</g>
+	<g>
+	<path d="M4,76.8v-2h5v-5.2h2.2v5.2h5v2h-5v5.2H9v-5.2H4z"/>
+</g>
+	<g>
+	<path d="M4.1,106.8v-2h12v2H4.1z"/>
+</g>
+	<g>
+	<path d="M14.8,7.4c0,0.8-0.2,1.4-0.5,1.9c-0.3,0.5-0.9,0.9-1.7,1.4l-1,0.5c-0.3,0.1-0.5,0.3-0.6,0.5c-0.1,0.2-0.2,0.4-0.2,0.6
+		c0,0.2,0,0.4,0.1,0.5c0,0.2,0.1,0.4,0.2,0.6l-2,0.1c-0.2-0.2-0.4-0.4-0.5-0.7c-0.1-0.2-0.2-0.5-0.2-0.9c0-0.5,0.1-0.9,0.4-1.2
+		c0.2-0.4,0.6-0.7,1.2-1l1.1-0.6c0.4-0.2,0.7-0.5,0.9-0.7c0.2-0.2,0.2-0.5,0.2-0.8c0-0.3-0.2-0.6-0.5-0.8c-0.3-0.2-0.8-0.3-1.4-0.3
+		c-0.5,0-0.9,0-1.4,0.1S8,7,7.5,7.2V5c0.6-0.2,1.1-0.4,1.7-0.5c0.6-0.1,1.2-0.2,1.8-0.2c1.1,0,2.1,0.3,2.8,0.8
+		C14.5,5.8,14.8,6.5,14.8,7.4z M8.6,16c0-0.5,0.1-0.9,0.4-1.2c0.3-0.3,0.7-0.5,1.2-0.5c0.5,0,0.9,0.1,1.2,0.4
+		c0.3,0.3,0.4,0.7,0.4,1.3c0,0.5-0.1,0.9-0.4,1.2c-0.3,0.3-0.7,0.5-1.2,0.5c-0.5,0-0.9-0.1-1.2-0.4C8.7,17,8.6,16.6,8.6,16z"/>
+</g>
+	<g>
+	<path fill="#FFFFFF" d="M44.5,7.4c0,0.8-0.2,1.4-0.5,1.9c-0.3,0.5-0.9,0.9-1.7,1.4l-1,0.5c-0.3,0.1-0.5,0.3-0.6,0.5
+		c-0.1,0.2-0.2,0.4-0.2,0.6c0,0.2,0,0.4,0.1,0.5c0,0.2,0.1,0.4,0.2,0.6l-2,0.1c-0.2-0.2-0.4-0.4-0.5-0.7c-0.1-0.2-0.2-0.5-0.2-0.9
+		c0-0.5,0.1-0.9,0.4-1.2c0.2-0.4,0.6-0.7,1.2-1l1.1-0.6c0.4-0.2,0.7-0.5,0.9-0.7c0.2-0.2,0.2-0.5,0.2-0.8c0-0.3-0.2-0.6-0.5-0.8
+		C41,6.7,40.6,6.6,40,6.6c-0.5,0-0.9,0-1.4,0.1S37.6,7,37.1,7.2V5c0.6-0.2,1.1-0.4,1.7-0.5c0.6-0.1,1.2-0.2,1.8-0.2
+		c1.1,0,2.1,0.3,2.8,0.8C44.1,5.8,44.5,6.5,44.5,7.4z M38.2,16c0-0.5,0.1-0.9,0.4-1.2c0.3-0.3,0.7-0.5,1.2-0.5
+		c0.5,0,0.9,0.1,1.2,0.4c0.3,0.3,0.4,0.7,0.4,1.3c0,0.5-0.1,0.9-0.4,1.2c-0.3,0.3-0.7,0.5-1.2,0.5c-0.5,0-0.9-0.1-1.2-0.4
+		C38.4,17,38.2,16.6,38.2,16z"/>
+</g>
+	<g>
+	<path fill="#FFFFFF" d="M35.1,35.3l1.5-1.5l3.7,3.7l3.7-3.7l1.5,1.5L41.8,39l3.7,3.7L44,44.2l-3.7-3.7l-3.7,3.7l-1.5-1.5l3.7-3.7
+		L35.1,35.3z"/>
+</g>
+	<g>
+	<path fill="#FFFFFF" d="M34,76.8v-2h5v-5.2h2.2v5.2h5v2h-5v5.2H39v-5.2H34z"/>
+</g>
+	<g>
+	<path fill="#FFFFFF" d="M34.1,106.8v-2h12v2H34.1z"/>
+</g>
+</svg>

public/cibg-huisstijl/icons/information-symbol.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 401.998 401.998" style="enable-background:new 0 0 401.998 401.998;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M164.454,91.363h73.098c4.945,0,9.226-1.807,12.847-5.424c3.61-3.614,5.421-7.898,5.421-12.847V18.274    c0-4.948-1.811-9.229-5.428-12.85C246.777,1.812,242.49,0,237.544,0h-73.091c-4.946,0-9.229,1.812-12.847,5.424    c-3.615,3.617-5.424,7.902-5.424,12.85v54.818c0,4.949,1.809,9.233,5.424,12.847C155.224,89.556,159.507,91.363,164.454,91.363z" fill="#FFFFFF"/>
+		<path d="M286.936,334.331c-3.613-3.617-7.897-5.427-12.847-5.427h-18.274V164.452c0-4.947-1.807-9.229-5.421-12.845    c-3.62-3.617-7.904-5.426-12.847-5.426H127.912c-4.949,0-9.231,1.809-12.847,5.426c-3.618,3.616-5.424,7.898-5.424,12.845v36.547    c0,4.946,1.807,9.231,5.424,12.845c3.615,3.621,7.898,5.428,12.847,5.428h18.274v109.633h-18.274    c-4.949,0-9.231,1.81-12.847,5.427c-3.618,3.614-5.424,7.898-5.424,12.847v36.546c0,4.948,1.807,9.232,5.424,12.854    c3.615,3.61,7.898,5.421,12.847,5.421h146.177c4.949,0,9.233-1.811,12.847-5.421c3.614-3.621,5.421-7.905,5.421-12.854v-36.546    C292.357,342.229,290.56,337.945,286.936,334.331z" fill="#FFFFFF"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/cibg-huisstijl/images/edit.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="509.337px" height="509.338px" viewBox="0 0 509.337 509.338" style="enable-background:new 0 0 509.337 509.338;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M396.283,310.907c-3.809-1.52-7.143-0.853-9.996,1.998l-18.274,18.274c-1.711,1.708-2.573,3.806-2.573,6.276v35.978
+			c0,12.565-4.463,23.314-13.408,32.264c-8.952,8.945-19.701,13.418-32.264,13.418H82.224c-12.562,0-23.317-4.473-32.264-13.418
+			c-8.947-8.949-13.418-19.698-13.418-32.264V135.895c0-12.563,4.471-23.317,13.418-32.265c8.947-8.945,19.702-13.418,32.264-13.418
+			H319.77c4.186,0,8.47,0.571,12.847,1.714c3.433,1.141,6.472,0.381,9.134-2.284l13.986-13.99c2.286-2.281,3.138-5.043,2.57-8.278
+			c-0.571-3.044-2.286-5.234-5.141-6.565c-10.28-4.752-21.412-7.139-33.403-7.139H82.224c-22.648,0-42.017,8.042-58.102,24.126
+			C8.042,93.882,0,113.246,0,135.897V373.44c0,22.647,8.042,42.014,24.123,58.098c16.084,16.088,35.454,24.13,58.102,24.13h237.539
+			c22.647,0,42.014-8.042,58.098-24.13c16.088-16.084,24.13-35.45,24.13-58.098v-54.245
+			C401.991,315.191,400.084,312.434,396.283,310.907z"/>
+		<path d="M182.721,300.354v82.221h82.229L456.81,190.716l-82.228-82.225L182.721,300.354z M253.524,355.169L253.524,355.169
+			l-15.99-0.007v-27.401h-27.406v-15.984l33.12-33.12l43.396,43.4L253.524,355.169z M378.861,159.023l-99.931,99.928
+			c-3.234,3.241-6.376,3.334-9.421,0.288c-3.043-3.046-2.95-6.186,0.287-9.419l99.931-99.929c3.233-3.239,6.368-3.333,9.421-0.287
+			S382.091,155.789,378.861,159.023z"/>
+		<path d="M501.346,107.348L457.95,63.952c-5.328-5.33-11.796-7.995-19.413-7.995c-7.615,0-14.086,2.665-19.411,7.995
+			l-26.269,26.263l82.228,82.229l26.262-26.268c5.328-5.327,7.991-11.8,7.991-19.414S506.674,112.678,501.346,107.348z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/cibg-huisstijl/images/icon-calendar.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 19 20" style="enable-background:new 0 0 19 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#07699C;}
+	.st1{fill:#428EB4;}
+	.st2{fill:#CD1F3F;}
+</style>
+<rect class="st0" width="19" height="4"/>
+<rect y="5" class="st1" width="3" height="3"/>
+<rect x="4" y="5" class="st1" width="3" height="3"/>
+<rect x="8" y="5" class="st1" width="3" height="3"/>
+<rect x="12" y="5" class="st1" width="3" height="3"/>
+<rect x="16" y="5" class="st1" width="3" height="3"/>
+<rect x="16" y="9" class="st1" width="3" height="3"/>
+<rect x="12" y="9" class="st1" width="3" height="3"/>
+<rect x="8" y="9" class="st1" width="3" height="3"/>
+<rect y="9" class="st1" width="3" height="3"/>
+<rect x="4" y="9" class="st2" width="3" height="3"/>
+<rect y="13" class="st1" width="3" height="3"/>
+<rect x="4" y="13" class="st1" width="3" height="3"/>
+<rect x="8" y="13" class="st1" width="3" height="3"/>
+<rect x="12" y="13" class="st1" width="3" height="3"/>
+<rect x="16" y="13" class="st1" width="3" height="3"/>
+<rect x="16" y="17" class="st1" width="3" height="3"/>
+<rect x="12" y="17" class="st1" width="3" height="3"/>
+<rect x="8" y="17" class="st1" width="3" height="3"/>
+<rect x="4" y="17" class="st1" width="3" height="3"/>
+<rect y="17" class="st1" width="3" height="3"/>
+</svg>

public/cibg-huisstijl/images/open-folder.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 536.461 536.46" style="enable-background:new 0 0 536.461 536.46;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M144.752,263.52c19.603-9.038,38.354-13.559,56.243-13.559h237.548v-45.683c0-17.511-6.283-32.555-18.85-45.118    c-12.565-12.562-27.596-18.842-45.11-18.842H219.266v-9.136c0-17.511-6.28-32.548-18.842-45.107    c-12.563-12.562-27.6-18.846-45.111-18.846h-91.36c-17.511,0-32.548,6.283-45.111,18.846C6.279,98.635,0,113.672,0,131.183    v274.084c0,0.764,0.049,1.955,0.144,3.576c0.094,1.615,0.144,2.807,0.144,3.566l1.426-1.704L97.93,297.637    C109.54,283.931,125.148,272.556,144.752,263.52z" fill="#FFFFFF"/>
+		<path d="M528.898,290.214c-5.041-2.478-10.797-3.72-17.272-3.72H200.995c-12.562,0-26.219,3.381-40.968,10.14    c-14.75,6.766-26.219,14.986-34.401,24.701l-95.93,113.059c-5.902,6.662-8.853,12.945-8.853,18.849    c0,5.708,2.523,9.802,7.566,12.272c5.043,2.478,10.8,3.716,17.273,3.716h310.64c12.56,0,26.21-3.381,40.963-10.136    c14.75-6.756,26.214-14.989,34.399-24.701l95.931-113.059c5.899-6.663,8.846-12.939,8.846-18.849    C536.465,296.779,533.946,292.689,528.898,290.214z" fill="#FFFFFF"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/cibg-huisstijl/images/sort-asc.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 576"><defs><style>.cls-1{fill:#000;}</style></defs><title>sort-asc-2</title><path class="cls-1" d="M818,621q0,26-19,45t-45,19H-142q-26,0-45-19t-19-45q0-26,19-45L261,128q19-19,45-19t45,19L799,576Q818,595,818,621Z" transform="translate(206 -109)"/></svg>

public/cibg-huisstijl/images/sort-desc.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 576"><defs><style>.cls-1{fill:#000;}</style></defs><title>sort-desc-2</title><path class="cls-1" d="M818,172q0,26-19,45L351,665q-19,19-45,19t-45-19L-187,217q-19-19-19-45t19-45q19-19,45-19H754q26,0,45,19T818,172Z" transform="translate(206 -108)"/></svg>

public/cibg-huisstijl/images/sort.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1408"><defs><style>.cls-1{fill:#010101;}</style></defs><title>sort-2</title><path class="cls-1" d="M818,588q0,26-19,45L351,1081q-19,19-45,19t-45-19L-187,633q-19-19-19-45t19-45q19-19,45-19H754q26,0,45,19T818,588Zm0-384q0,26-19,45t-45,19H-142q-26,0-45-19t-19-45q0-26,19-45L261-289q19-19,45-19t45,19L799,159Q818,178,818,204Z" transform="translate(206 308)"/></svg>

public/cibg-huisstijl/images/trash.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="438.529px" height="438.529px" viewBox="0 0 438.529 438.529" style="enable-background:new 0 0 438.529 438.529;"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M417.689,75.654c-1.711-1.709-3.901-2.568-6.563-2.568h-88.224L302.917,25.41c-2.854-7.044-7.994-13.04-15.413-17.989
+			C280.078,2.473,272.556,0,264.945,0h-91.363c-7.611,0-15.131,2.473-22.554,7.421c-7.424,4.949-12.563,10.944-15.419,17.989
+			l-19.985,47.676h-88.22c-2.667,0-4.853,0.859-6.567,2.568c-1.709,1.713-2.568,3.903-2.568,6.567v18.274
+			c0,2.664,0.855,4.854,2.568,6.564c1.714,1.712,3.904,2.568,6.567,2.568h27.406v271.8c0,15.803,4.473,29.266,13.418,40.398
+			c8.947,11.139,19.701,16.703,32.264,16.703h237.542c12.566,0,23.319-5.756,32.265-17.268c8.945-11.52,13.415-25.174,13.415-40.971
+			V109.627h27.411c2.662,0,4.853-0.856,6.563-2.568c1.708-1.709,2.57-3.9,2.57-6.564V82.221
+			C420.26,79.557,419.397,77.367,417.689,75.654z M169.301,39.678c1.331-1.712,2.95-2.762,4.853-3.14h90.504
+			c1.903,0.381,3.525,1.43,4.854,3.14l13.709,33.404H155.311L169.301,39.678z M347.173,380.291c0,4.186-0.664,8.042-1.999,11.561
+			c-1.334,3.518-2.717,6.088-4.141,7.706c-1.431,1.622-2.423,2.427-2.998,2.427H100.493c-0.571,0-1.565-0.805-2.996-2.427
+			c-1.429-1.618-2.81-4.188-4.143-7.706c-1.331-3.519-1.997-7.379-1.997-11.561V109.627h255.815V380.291z"/>
+		<path d="M137.04,347.172h18.271c2.667,0,4.858-0.855,6.567-2.567c1.709-1.718,2.568-3.901,2.568-6.57V173.581
+			c0-2.663-0.859-4.853-2.568-6.567c-1.714-1.709-3.899-2.565-6.567-2.565H137.04c-2.667,0-4.854,0.855-6.567,2.565
+			c-1.711,1.714-2.568,3.904-2.568,6.567v164.454c0,2.669,0.854,4.853,2.568,6.57C132.186,346.316,134.373,347.172,137.04,347.172z"
+			/>
+		<path d="M210.129,347.172h18.271c2.666,0,4.856-0.855,6.564-2.567c1.718-1.718,2.569-3.901,2.569-6.57V173.581
+			c0-2.663-0.852-4.853-2.569-6.567c-1.708-1.709-3.898-2.565-6.564-2.565h-18.271c-2.664,0-4.854,0.855-6.567,2.565
+			c-1.714,1.714-2.568,3.904-2.568,6.567v164.454c0,2.669,0.854,4.853,2.568,6.57C205.274,346.316,207.465,347.172,210.129,347.172z
+			"/>
+		<path d="M283.22,347.172h18.268c2.669,0,4.859-0.855,6.57-2.567c1.711-1.718,2.562-3.901,2.562-6.57V173.581
+			c0-2.663-0.852-4.853-2.562-6.567c-1.711-1.709-3.901-2.565-6.57-2.565H283.22c-2.67,0-4.853,0.855-6.571,2.565
+			c-1.711,1.714-2.566,3.904-2.566,6.567v164.454c0,2.669,0.855,4.853,2.566,6.57C278.367,346.316,280.55,347.172,283.22,347.172z"
+			/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

public/cibg-huisstijl/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@cibg/huisstijl",
+  "description": "@CIBG Huisstijl contains all styling related files that you need to build an interface meeting the CIBG requirements",
+  "version": "3.22.0",
+  "keywords": [
+    "cibg",
+    "huisstijl",
+    "design system",
+    "front-end"
+  ],
+  "license": "SEE LICENSE in LICENSE.md",
+  "style": "css/huisstijl.css",
+  "author": {
+    "name": "CIBG Delivery"
+  },
+  "homepage": "https://applicationframework.cibg.nl/ontwerp"
+}

public/cibg-huisstijl/scss/variables.scss

@@ -0,0 +1,257 @@
+@use "sass:string";
+// -----------------------------------------------------------------------------
+// This file contains all application-wide Sass variables.
+// -----------------------------------------------------------------------------
+
+$grid-breakpoints: (
+        xs: 0,
+        sm: 576px,
+        md: 768px,
+        lg: 992px,
+        xl: 1200px
+);
+
+$container-max-widths: (
+        sm: 540px,
+        md: 720px,
+        lg: 960px,
+        xl: 1140px,
+);
+
+/// Regular font family
+$text-font-stack: RijksSans, Calibri, sans-serif;
+
+// Text color
+$text-color: #0f172a;
+$fieldset-meta: #617286; // Slighty changed from $grey-3 because of contrast
+
+
+// Brand color
+$brand-color: #01689b;
+$brand-color-2: #154273; // Active & hover
+$brand-contrast-color: #0E7C77; // groenish
+$header-base-color: $brand-color-2;
+
+// Nieuwe kleurteinten
+$robijn: #cc005d;
+$mintgroen: #76d2b6;
+$paars: #42145f;
+
+
+// Grijstinten
+$white: #fff; // Background-color
+$grey-0: #f8fafc;
+$grey-1: #f1f5f9; // Fieldset | mainNav  | stappenindicator not visited | tbody rows
+$grey-2: #e2e8f0; // thead bg | form toelichting bg
+$grey-3: #617286; // Visited links | Meta // Should be #64748b (not dark enough for usage on grey-1 background)
+$grey-4: #475569; // Table resoonsive labels
+$grey-5: #334155; // Table resoonsive labels
+$light-grey: #cccccc;
+$black: #000; // Text color
+
+// Lintblauwtinten
+$lintblauw-30: #b8c6d5;
+
+
+$placeholder: #6f6d6d;
+
+// Table responsive colors.
+$pro-odd-bg: #edeff5;
+$pro-even-bg: #fff;
+
+// Waarschuwingskleuren
+$red: #d52b1e;
+$light-red: #f9dfdd;
+
+$yellow: #ffb612; // warning | stappenindicator active
+$light-yellow: #fff4dc; // warning | stappenindicator visited
+$dark-yellow: #ffb612; // Todo: replace usage of variable
+
+$green: #39870c;
+$light-green: #e1eddb;
+$dark-green: #176e1b;
+
+$blue:  #007bc7;
+$light-blue: #d9ebf7;
+
+
+// Stappenindicator kleuren
+$step-default-color: #f8f8f9;
+$step-current-color: #fada3c;
+$step-finished-color: $light-yellow;
+
+
+$shadow-1: rgba(0, 0, 0, .075);
+$shadow-2: rgba(102, 175, 233, .6);
+
+// Input variabelen
+$input-padding-right: 70px;
+$input-focus-color: $black;
+$input-color: $black;
+$input-border-radius: 0;
+$input-height: 32px;
+$input-box-shadow: none;
+$input-focus-box-shadow: none;
+$input-focus-border-color: $brand-color;
+
+// Button outline overrides
+$outline-color: #82befb;
+$btn-active-box-shadow: none;
+$btn-focus-box-shadow: none;
+$btn-focus-width: 0;
+$enable-shadows: false;
+$pagination-focus-box-shadow: none;
+
+$btn-primary-outline-hover-bg: #e7f2f7;
+$btn-secondary-outline-hover-bg: #E9F8F6;
+$btn-danger-outline-hover-bg: #fbecf0;
+
+
+// Overschrijven van modal variabelen
+$modal-content-border-width: 0;
+$modal-content-border-radius: 2px;
+$modal-header-padding-x: 1.5rem;
+$modal-header-padding-y: 1.25rem;
+$modal-header-padding-bottom: 0;
+$modal-inner-padding: .5rem 1.5rem;
+$modal-footer-padding:  .5rem 1.5rem 1.5rem;
+$modal-footer-margin-between: 0;
+$modal-footer-padding: .5rem 1.5rem 1.5rem 1.5rem;
+
+//Dropdown
+$dropdown-border-radius: 0;
+$dropdown-padding-y: .325rem;
+$dropdown-item-padding-x: .875rem;
+$dropdown-item-padding-y: .275rem;
+$dropdown-link-active-bg: var(--ro-form-accent-color);
+$dropdown-link-active-color: $white;
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $brand-color;
+$dropdown-link-color: $black;
+
+// Overschrijven van badge variabelen
+$primary: $brand-color;
+$success: $green;
+$danger: $red;
+
+// Overschrijven tab variabelen
+$nav-tabs-border-color: $grey-2;
+$nav-tabs-border-radius: 0;
+$nav-tabs-link-active-color: $black;
+$nav-link-color: var(--ro-link-color);
+
+// Progress bar variabelen
+$progress-bar-bg: $green;
+$progress-bg: $white;
+$progress-border-radius: 0;
+$progress-height: 6px;
+
+// Table settings
+$table-border-color: $white;
+$table-group-separator-color: $white;
+$table-border-width: 1px;
+
+// SSP table
+$ssp-table-border-color: $grey-2;
+$ssp-table-hover-bg: $grey-0;
+$ssp-table-accent-color: #01817c; //slight darker than brand-secondary
+$ssp-table-tag-border-color: #ddd;
+
+// Data block
+$dt-color: $grey-3; // Term text color
+$dt-font-weight: 400;
+
+// Pagination
+$pagination-active-color: $white;
+$pagination-active-bg: var(--ro-pagination-color);
+$pagination-color: var(--ro-pagination-color);
+$pagination-line-height: 1.2381em;
+$pagination-bg: $white;
+$pagination-border-width: 0;
+$pagination-font-size: 1.4rem;
+
+$pagination-hover-bg: $white;
+$pagination-hover-color: var(--ro-pagination-color);
+
+// Tooltip
+$tooltip-border-radius: 2px;
+$tooltip-bg: var(--ro-form-accent-color);
+
+
+// Button hover colors
+$btn-outline-remove-bg-hover: #fff8f8;
+
+$hr-height: 3;
+$hr-opacity: 1;
+
+// Reset bootstrap's new min heigh for form-check
+$form-check-min-height: initial;
+
+// Set pagination focus color
+$pagination-focus-bg: $white;
+
+// Custom line height for input selects to match 4.6.1 style
+$form-select-bg-position: right .25rem center;
+
+// Breadcrumb
+$breadcrumb-font-size: 1rem;
+$breadcrumb-divider: string.quote("\EA1C");
+$breadcrumb-divider-font-size: .8rem;
+$breadcrumb-divider-font-family: 'CIBG Icons', Calibri, sans-serif;
+$breadcrumb-divider-pt: 0.225rem;
+$breadcrumb-margin-bottom: 0;
+$breadcrumb-active-color: $grey-3;
+
+$card-bg: $grey-1;
+$card-border-width: 0;
+$card-border-radius: 0;
+$card-cap-bg: $grey-1;
+$card-cap-padding-y: 1.5rem;
+$card-spacer-x: 1.5rem;
+$card-spacer-y: 1rem;
+$card-group-margin: 1rem;
+$card-group-gap: 1rem;
+
+// Lists
+$list-item-gutter: 3px;
+
+
+// Header border
+$nav-border-bottom: #ddd;
+
+// Timeline
+$timeline-done: var(--ro-timeline-color);
+$timeline-background-color: $light-grey;
+
+
+// RO styling update opt-in styling colors
+$feedback-error-bg: #f9dfdd;
+$feedback-error-icon: #d52b1e;
+
+$feedback-warning-bg: #fff4dc;
+$feedback-warning-icon: #ffb612;
+
+$feedback-success-bg: #e1eddb;
+$feedback-success-icon: #39870c;
+
+$feedback-info-bg: #d9ebf7;
+$feedback-info-icon: #007bc7;
+
+$checkbox-border-color: #444444;
+
+// User opinion service
+$feedback-service-cta-background:  #A90061;
+
+// Tooltip
+$tooltip-opacity: 1;
+
+// Backoffice accent colors
+$backoffice-yellow: #ffb612;
+$backoffice-accent: #a90061;
+
+//Typography
+$headings-font-weight: 600;
+
+//Default font-weight bold weight
+$font-weight-bold: 600;
+

src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts

@@ -81,7 +81,7 @@ import { IntakePolicyAdapter } from '@herregistratie/infrastructure/intake-polic
         }
         @case ('review') {
           <app-alert type="info" i18n="@@intake.review.controleer">Controleer uw antwoorden en dien de aanvraag in.</app-alert>
-          <dl class="rhc-data-summary rhc-data-summary--row app-section">
+          <dl class="app-section">
             <app-data-row i18n-key="@@intake.review.buitenNl" key="Buiten NL gewerkt" [value]="answers().buitenlandGewerkt ?? '—'" />
             @if (answers().buitenlandGewerkt === 'ja') {
               <app-data-row i18n-key="@@intake.review.land" key="Land" [value]="answers().land ?? ''" />

src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts

@@ -13,7 +13,7 @@ const TYPE_LABELS: Record<AanvraagType, string> = {
   intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
 };
 
-/** Organism: one application on the dashboard's "Mijn aanvragen" list. Which badge
+/** Organism: one application on the dashboard's"Mijn aanvragen" list. Which badge
     + actions it shows is driven by the pure `blockActions(status)` and the status
     tag; the block only renders. Composes card + status-badge + button. */
 @Component({
@@ -32,20 +32,20 @@ const TYPE_LABELS: Record<AanvraagType, string> = {
 
       @switch (aanvraag().status.tag) {
         @case ('Concept') {
-          <p class="rhc-paragraph" i18n="@@aanvraagBlock.stap">Stap {{ stap().index }} van {{ stap().count }}</p>
+          <p i18n="@@aanvraagBlock.stap">Stap {{ stap().index }} van {{ stap().count }}</p>
         }
         @case ('InBehandeling') {
-          <p class="rhc-paragraph" i18n="@@aanvraagBlock.inBehandeling">Referentie {{ ref() }} · ingediend op {{ aanvraag().submittedAt | date: 'longDate' }}</p>
+          <p i18n="@@aanvraagBlock.inBehandeling">Referentie {{ ref() }} · ingediend op {{ aanvraag().submittedAt | date: 'longDate' }}</p>
           @if (manual()) {
-            <p class="rhc-paragraph app-text-subtle" i18n="@@aanvraagBlock.manual">Uw aanvraag wordt handmatig beoordeeld in de backoffice.</p>
+            <p class="app-text-subtle" i18n="@@aanvraagBlock.manual">Uw aanvraag wordt handmatig beoordeeld in de backoffice.</p>
           }
         }
         @case ('Goedgekeurd') {
-          <p class="rhc-paragraph" i18n="@@aanvraagBlock.goedgekeurd">Referentie {{ ref() }}</p>
+          <p i18n="@@aanvraagBlock.goedgekeurd">Referentie {{ ref() }}</p>
         }
         @case ('Afgewezen') {
-          <p class="rhc-paragraph" i18n="@@aanvraagBlock.afgewezen">Referentie {{ ref() }}</p>
+          <p i18n="@@aanvraagBlock.afgewezen">Referentie {{ ref() }}</p>
-          <p class="rhc-paragraph app-text-subtle">{{ reden() }}</p>
+          <p class="app-text-subtle">{{ reden() }}</p>
         }
       }
 

src/app/registratie/ui/address-fields/address-fields.component.ts

@@ -25,8 +25,8 @@ export type AdresErrors = Partial<Record<keyof AdresValue, string>>;
     app-form-field + app-form-field{display:block;margin-block-start:var(--rhc-space-max-lg)}
   `],
   template: `
-    <fieldset class="utrecht-form-fieldset utrecht-form-fieldset--html-fieldset">
+    <fieldset>
-      <legend class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend">{{ legend() }}</legend>
+      <legend>{{ legend() }}</legend>
       <app-form-field i18n-label="@@address.straat" label="Straat en huisnummer" [fieldId]="idPrefix() + '-straat'" required [error]="errors().straat">
         <app-text-input [inputId]="idPrefix() + '-straat'" [invalid]="!!errors().straat"
           [ngModel]="value().straat" (ngModelChange)="fieldChange.emit({ key: 'straat', value: $event })"

src/app/registratie/ui/dashboard.page.ts

@@ -19,8 +19,8 @@ import { Registration } from '@registratie/domain/registration';
 import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
 import { tasksFromProfile } from '@registratie/domain/tasks';
 
-/** Page: "Mijn overzicht" — the portal home, following the NL Design System
+/** Page:"Mijn overzicht" — the portal home, following the NL Design System
-    "Mijn omgeving" pattern (side nav + "Wat moet ik regelen" + "Mijn zaken"). */
+"Mijn omgeving" pattern (side nav +"Wat moet ik regelen" +"Mijn zaken"). */
 @Component({
   selector: 'app-dashboard-page',
   imports: [
@@ -58,7 +58,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                 @if (tasks.length) {
                   <app-task-list class="app-section" [tasks]="tasks" />
                 } @else {
-                  <p class="rhc-paragraph app-text-subtle" i18n="@@dashboard.nietsOpenstaan">U heeft op dit moment niets openstaan.</p>
+                  <p class="app-text-subtle" i18n="@@dashboard.nietsOpenstaan">U heeft op dit moment niets openstaan.</p>
                 }
               </section>
 
@@ -68,7 +68,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                   <app-registration-summary [reg]="$any(p).registration" />
                 </div>
                 <app-card class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
-                  <dl class="rhc-data-summary rhc-data-summary--row">
+                  <dl>
                     <app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat" />
                     <app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode" />
                     <app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats" />
@@ -92,7 +92,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                   <app-skeleton height="2.5rem" [count]="3" />
                 </ng-template>
                 <ng-template appAsyncEmpty>
-                  <p class="rhc-paragraph app-text-subtle" i18n="@@dashboard.geenSpecialismen">U heeft nog geen specialismen of aantekeningen.</p>
+                  <p class="app-text-subtle" i18n="@@dashboard.geenSpecialismen">U heeft nog geen specialismen of aantekeningen.</p>
                 </ng-template>
               </app-async>
             </div>
@@ -104,7 +104,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
               @for (a of acties; track a.to) {
                 <li>
                   <app-card [heading]="a.titel">
-                    <p class="rhc-paragraph">{{ a.tekst }}</p>
+                    <p>{{ a.tekst }}</p>
                     <app-link [to]="a.to">{{ a.actie }} →</app-link>
                   </app-card>
                 </li>
@@ -128,7 +128,7 @@ export class DashboardPage {
   }
 
   /** The user's applications, sorted Concept → In behandeling → resolved. Empty →
-      the "Mijn aanvragen" section is hidden (see template). */
+      the"Mijn aanvragen" section is hidden (see template). */
   protected aanvragen = computed<Aanvraag[]>(() => {
     const rd = this.apps.applications();
     if (rd.tag !== 'Success') return [];

src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts

@@ -38,8 +38,8 @@ const KANALEN = [
   { value: 'email', label: $localize`:@@registratie.kanaalEmail:E-mail` },
   { value: 'post', label: $localize`:@@registratie.kanaalPost:Post` },
 ];
-const HANDMATIG = '__handmatig__'; // sentinel option: "my diploma isn't listed"
+const HANDMATIG = '__handmatig__'; // sentinel option:"my diploma isn't listed"
-/** The server-owned geldigheidsvraag whose "ja" answer requires a Dutch-taalvaardigheid
+/** The server-owned geldigheidsvraag whose"ja" answer requires a Dutch-taalvaardigheid
     upload (proof of the confirmed B2 level). Stable id shared with the backend. */
 const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
 
@@ -47,7 +47,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
     the pure `reduce` (registratie-wizard.machine.ts). The BRP address prefills the
     draft via an effect; the DUO diploma list renders through <app-async>; choosing
     a diploma reveals its server-derived beroep. The draft is persisted to the
-    backend as a Concept aanvraag (createDraftSync) so a reload — or a "Verder gaan"
+    backend as a Concept aanvraag (createDraftSync) so a reload — or a"Verder gaan"
     from the dashboard via `?aanvraag=<id>` — resumes progress. Built from existing
     atoms/molecules. */
 @Component({
@@ -119,7 +119,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                         [ngModel]="draft().beroep ?? ''" (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })" />
                     </app-form-field>
                   } @else if (draft().beroep) {
-                    <dl class="rhc-data-summary rhc-data-summary--row app-section">
+                    <dl class="app-section">
                       <app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''" />
                     </dl>
                   }
@@ -156,7 +156,7 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
             }
             @case ('controle') {
               <app-alert type="info" i18n="@@regWizard.controleer">Controleer uw gegevens en dien de registratie in.</app-alert>
-              <dl class="rhc-data-summary rhc-data-summary--row app-section">
+              <dl class="app-section">
                 <app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()" />
                 <app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()" />
                 <app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()" />
@@ -274,7 +274,7 @@ export class RegistratieWizardComponent {
   protected correspondentieLabel = computed(() => ({ email: $localize`:@@regWizard.corr.email:Per e-mail`, post: $localize`:@@regWizard.corr.post:Per post` }[this.draft().correspondentie ?? 'post']));
   protected diplomaHerkomstLabel = computed(() => ({ duo: $localize`:@@regWizard.herkomst.diplomaDuo:Geverifieerd via DUO`, handmatig: $localize`:@@regWizard.herkomst.diplomaHandmatig:Handmatig ingevoerd (wordt beoordeeld)` }[this.draft().diplomaHerkomst ?? 'handmatig']));
 
-  /** BRP lookup outcome. A failure or "geen adres" never blocks the wizard — both
+  /** BRP lookup outcome. A failure or"geen adres" never blocks the wizard — both
       fall back to manual entry (PRD §7). 'geen' covers both no-address-found and a
       malformed response; 'fout' is an unreachable BRP. */
   protected adresStatus = computed<'laden' | 'gevonden' | 'geen' | 'fout'>(() => {
@@ -311,7 +311,7 @@ export class RegistratieWizardComponent {
 
   /** True while the user is entering a diploma manually (not in the DUO list). */
   protected handmatigActief = computed(() => this.draft().diplomaHerkomst === 'handmatig');
-  /** The radio selection: a diploma id, or the "not listed" sentinel in manual mode. */
+  /** The radio selection: a diploma id, or the"not listed" sentinel in manual mode. */
   protected diplomaKeuze = computed(() => (this.handmatigActief() ? HANDMATIG : this.draft().diplomaId ?? ''));
 
   protected diplomaOptions = (data: DuoLookupDto) => [
@@ -384,7 +384,7 @@ export class RegistratieWizardComponent {
   }
 
   /** Reset the wizard to a fresh start. Reload the BRP lookup so the address
-      re-prefills, keeping the form and the "vooraf ingevuld" note consistent. */
+      re-prefills, keeping the form and the"vooraf ingevuld" note consistent. */
   restart() {
     this.draftSync.reset(); // discard the current Concept; a fresh one starts on next progress
     this.dispatch({ tag: 'Seed', state: initial });

src/app/registratie/ui/registration-summary/registration-summary.component.ts

@@ -12,7 +12,7 @@ import { CardComponent } from '@shared/ui/card/card.component';
   imports: [DatePipe, DataRowComponent, StatusBadgeComponent, CardComponent],
   template: `
     <app-card>
-      <dl class="rhc-data-summary rhc-data-summary--row">
+      <dl>
         <app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer" />
         <app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam" />
         <app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep" />

src/app/registratie/ui/registration-table/registration-table.component.ts

@@ -7,21 +7,21 @@ import { Aantekening } from '@registratie/domain/registration';
   selector: 'app-registration-table',
   imports: [DatePipe],
   template: `
-    <div class="utrecht-table-container utrecht-table-container--overflow-inline">
+    <div class="table-responsive">
-      <table class="utrecht-table utrecht-table--html-table utrecht-table--alternate-row-color">
+      <table class="table table-striped">
         <thead>
           <tr>
-            <th class="utrecht-table__header-cell" i18n="@@table.type">Type</th>
+            <th scope="col" i18n="@@table.type">Type</th>
-            <th class="utrecht-table__header-cell" i18n="@@table.omschrijving">Omschrijving</th>
+            <th scope="col" i18n="@@table.omschrijving">Omschrijving</th>
-            <th class="utrecht-table__header-cell" i18n="@@table.datum">Datum</th>
+            <th scope="col" i18n="@@table.datum">Datum</th>
           </tr>
         </thead>
         <tbody>
           @for (row of rows(); track row.omschrijving) {
             <tr>
-              <td class="utrecht-table__cell">{{ row.type }}</td>
+              <td>{{ row.type }}</td>
-              <td class="utrecht-table__cell">{{ row.omschrijving }}</td>
+              <td>{{ row.omschrijving }}</td>
-              <td class="utrecht-table__cell">{{ row.datum | date:'mediumDate' }}</td>
+              <td>{{ row.datum | date:'mediumDate' }}</td>
             </tr>
           }
         </tbody>

src/app/shared/layout/breadcrumb/breadcrumb.component.ts

@@ -26,10 +26,10 @@ export interface BreadcrumbItem {
     :host(.inverse) .sep { color: var(--rhc-color-foreground-on-primary); }
   `],
   template: `
-    <nav class="rhc-breadcrumb-nav utrecht-breadcrumb-nav" i18n-aria-label="@@breadcrumb.aria" aria-label="Kruimelpad">
+    <nav i18n-aria-label="@@breadcrumb.aria" aria-label="Kruimelpad">
-      <ol class="utrecht-breadcrumb-nav__list list">
+      <ol class="list">
         @for (item of items(); track item.label; let last = $last; let first = $first) {
-          <li class="utrecht-breadcrumb-nav__item crumb">
+          <li class="crumb">
             @if (!first) { <span class="sep" aria-hidden="true">›</span> }
             @if (item.link && !last) {
               <a [routerLink]="item.link">{{ item.label }}</a>

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

@@ -22,7 +22,7 @@ import { LinkComponent } from '@shared/ui/link/link.component';
       }
       <app-heading [level]="1">{{ heading() }}</app-heading>
       @if (intro()) {
-        <p class="rhc-paragraph intro">{{ intro() }}</p>
+        <p class="intro">{{ intro() }}</p>
       }
       <ng-content />
     </div>

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

@@ -11,16 +11,17 @@ import { DebugStateComponent } from '@shared/ui/debug-state/debug-state.componen
   imports: [RouterOutlet, SiteHeaderComponent, SiteFooterComponent, DebugStateComponent],
   styles: [`
     :host{display:block}
-    .skip{position:absolute;left:var(--app-skip-link-offset)}
+    .skip{position:absolute;left:var(--app-skip-link-offset);z-index:1030}
-    .layout{min-block-size:100vh;align-items:stretch}
+    .skip:focus{left:var(--rhc-space-max-md);top:var(--rhc-space-max-md);background:var(--rhc-color-wit);padding:var(--rhc-space-max-sm) var(--rhc-space-max-md);border-radius:var(--rhc-border-radius-sm)}
+    .layout{display:flex;flex-direction:column;min-block-size:100vh}
     .main{flex:1;inline-size:100%;box-sizing:border-box}
     .content{max-inline-size:var(--app-content-max);margin-inline:auto;padding:var(--rhc-space-max-3xl) var(--rhc-space-max-2xl);box-sizing:border-box}
   `],
   template: `
-    <a href="#main" class="rhc-skip-link skip" i18n="@@shell.skipLink">Naar de inhoud</a>
+    <a href="#main" class="skip" i18n="@@shell.skipLink">Naar de inhoud</a>
-    <div class="utrecht-page-layout utrecht-page-layout--stretch layout">
+    <div class="layout">
       <app-site-header />
-      <main id="main" class="utrecht-page-content main">
+      <main id="main" class="main">
         <div class="content">
           <router-outlet />
         </div>

src/app/shared/layout/site-footer/site-footer.component.ts

@@ -19,7 +19,7 @@ import { Component } from '@angular/core';
     .meta{inline-size:100%;border-block-start:var(--rhc-border-width-sm) solid var(--rhc-color-lintblauw-600);margin-block-start:var(--rhc-space-max-xl);padding-block-start:var(--rhc-space-max-lg);font-size:var(--rhc-text-font-size-sm);opacity:.85}
   `],
   template: `
-    <footer class="utrecht-page-footer bar">
+    <footer class="bar">
       <div class="inner">
         <div>
           <div class="tagline" i18n="@@footer.tagline">De Rijksoverheid. Voor Nederland.</div>

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

@@ -35,11 +35,11 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
     @switch (status()) {
       @case ('editing') {
         <app-stepper class="app-section" [steps]="steps()" [current]="current()" />
-        <h2 #stepHeading tabindex="-1" class="rhc-heading nl-heading--level-2 app-section">{{ stepTitle() }}</h2>
+        <h2 #stepHeading tabindex="-1" class="app-section">{{ stepTitle() }}</h2>
         @if (errors().length) {
           <div #errorSummary tabindex="-1" role="alert" aria-labelledby="wizard-error-title" class="app-section">
             <app-alert type="error">
-              <h3 id="wizard-error-title" class="rhc-heading nl-heading--level-3 es-title" i18n="@@wizard.errorTitle">Er ging iets mis met uw invoer</h3>
+              <h3 id="wizard-error-title" class="es-title" i18n="@@wizard.errorTitle">Er ging iets mis met uw invoer</h3>
               <ul class="es-list">
                 @for (e of errors(); track e.id) {
                   <li><a [href]="'#' + e.id" (click)="goToField($event, e.id)">{{ e.message }}</a></li>

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

@@ -2,16 +2,30 @@ import { Component, input } from '@angular/core';
 
 type AlertType = 'info' | 'ok' | 'warning' | 'error';
 
-/** Atom: alert/message banner. */
+/** Atom: alert/message banner. CIBG's Bootstrap build drops the stock `.alert`, so this
+    is a hand-rolled surface styled from the (CIBG-valued) token bridge — no raw hex. */
 @Component({
   selector: 'app-alert',
+  styles: [`
+    .alert-box{
+      border:var(--rhc-border-width-sm) solid;
+      border-inline-start-width:var(--rhc-border-width-md);
+      border-radius:var(--rhc-border-radius-md);
+      padding:var(--rhc-space-max-md) var(--rhc-space-max-lg);
+      color:var(--rhc-color-foreground-default);
+    }
+    .alert-info{background:var(--rhc-color-hemelblauw-100);border-color:var(--rhc-color-foreground-link)}
+    .alert-ok{background:var(--rhc-color-groen-300);border-color:var(--rhc-color-groen-500)}
+    .alert-warning{background:var(--rhc-color-geel-100);border-color:var(--rhc-color-geel-600)}
+    .alert-error{background:var(--rhc-color-rood-100);border-color:var(--rhc-color-rood-500)}
+  `],
   template: `
     <div
-      class="utrecht-alert rhc-alert"
+      class="alert-box"
-      [class.utrecht-alert--info]="type() === 'info'"
+      [class.alert-info]="type() === 'info'"
-      [class.utrecht-alert--ok]="type() === 'ok'"
+      [class.alert-ok]="type() === 'ok'"
-      [class.utrecht-alert--warning]="type() === 'warning'"
+      [class.alert-warning]="type() === 'warning'"
-      [class.utrecht-alert--error]="type() === 'error'"
+      [class.alert-error]="type() === 'error'"
       role="status">
       <ng-content />
     </div>

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

@@ -54,7 +54,7 @@ export class AsyncErrorDirective {
       }
       @case ('Empty') {
         @if (emptyTpl()) { <ng-container [ngTemplateOutlet]="emptyTpl()!.tpl" /> }
-        @else { <p class="rhc-paragraph">{{ emptyText() }}</p> }
+        @else { <p>{{ emptyText() }}</p> }
       }
       @case ('Success') {
         <ng-container [ngTemplateOutlet]="loadedTpl().tpl"

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

@@ -2,19 +2,18 @@ import { Component, input } from '@angular/core';
 
 type Variant = 'primary' | 'secondary' | 'subtle' | 'danger';
 
-/** Atom: button. Thin wrapper over the Utrecht/RHC button CSS. */
+/** Atom: button. Thin wrapper over the CIBG/Bootstrap button CSS. */
 @Component({
   selector: 'app-button',
   template: `
     <button
       [type]="type()"
       [disabled]="disabled()"
-      class="utrecht-button rhc-button"
+      class="btn"
-      [class.utrecht-button--primary-action]="variant() === 'primary'"
+      [class.btn-primary]="variant() === 'primary'"
-      [class.utrecht-button--secondary-action]="variant() === 'secondary'"
+      [class.btn-outline-primary]="variant() === 'secondary'"
-      [class.utrecht-button--subtle]="variant() === 'subtle'"
+      [class.btn-link]="variant() === 'subtle'"
-      [class.utrecht-button--danger]="variant() === 'danger'"
+      [class.btn-danger]="variant() === 'danger'">
-      [class.utrecht-button--disabled]="disabled()">
       <ng-content />
     </button>
   `,

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

@@ -3,13 +3,14 @@ import { HeadingComponent } from '@shared/ui/heading/heading.component';
 
 /** Molecule: a content card. Standardises the repeated card surface (white,
     subtle border, rounded, padded) so pages compose cards instead of hand-rolling
-    `<div class="rhc-card">`. Optional heading; the rest is projected. */
+    a hand-rolled card surface. Optional heading; the rest is projected.
+    Local class is .app-card (NOT Bootstrap's .card, whose padding-on-body layout differs). */
 @Component({
   selector: 'app-card',
   imports: [HeadingComponent],
   styles: [`
     :host{display:block;block-size:100%}
-    .card{
+    .app-card{
       background:var(--rhc-color-wit);
       border:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);
       border-radius:var(--rhc-border-radius-md);
@@ -17,10 +18,10 @@ import { HeadingComponent } from '@shared/ui/heading/heading.component';
       block-size:100%;
       box-sizing:border-box;
     }
-    .card > * + *{margin-block-start:var(--rhc-space-max-md)}
+    .app-card > * + *{margin-block-start:var(--rhc-space-max-md)}
   `],
   template: `
-    <section class="card">
+    <section class="app-card">
       @if (heading()) { <app-heading [level]="level()">{{ heading() }}</app-heading> }
       <ng-content />
     </section>

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

@@ -8,11 +8,12 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   styles: [`
     :host{display:block}
     label{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md);cursor:pointer}
-    input{inline-size:1.1rem;block-size:1.1rem}
+    /* 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>
+    <label class="form-check-label">
-      <input type="checkbox" [id]="checkboxId()" [checked]="value" [disabled]="disabled"
+      <input class="form-check-input" type="checkbox" [id]="checkboxId()" [checked]="value" [disabled]="disabled"
         (change)="onToggle($event)" (blur)="onTouched()" />
       <span>{{ label() }}</span>
     </label>

src/app/shared/ui/data-row/data-row.component.ts

@@ -1,16 +1,27 @@
 import { Component, input } from '@angular/core';
 
-/** Molecule: one key/value row inside an RHC data-summary.
+/** Molecule: one key/value row in a data summary. Hand-rolled from tokens
-    Wrap several of these in .rhc-data-summary (see registration-summary). */
+    (CIBG has no data-summary component). Wrap several in a <dl> (see registration-summary). */
 @Component({
   selector: 'app-data-row',
-  // The RHC item draws a divider below every row; drop it on the last one so the
+  styles: [`
-  // list ends cleanly instead of looking like a trailing empty row.
+    .item{
-  styles: [`:host:last-child .rhc-data-summary__item { border-block-end-style: none; }`],
+      display:grid;
+      grid-template-columns:minmax(8rem, 14rem) 1fr;
+      gap:var(--rhc-space-max-md);
+      padding-block:var(--rhc-space-max-md);
+      border-block-end:var(--rhc-border-width-sm) solid var(--rhc-color-border-subtle);
+      margin:0;
+    }
+    /* drop the divider on the last row so the list ends cleanly */
+    :host:last-child .item{border-block-end-style:none}
+    .item-key{font-weight:var(--rhc-text-font-weight-semi-bold);margin:0}
+    .item-value{margin:0}
+  `],
   template: `
-    <div class="rhc-data-summary__item">
+    <div class="item">
-      <dt class="rhc-data-summary__item-key">{{ key() }}</dt>
+      <dt class="item-key">{{ key() }}</dt>
-      <dd class="rhc-data-summary__item-value"><ng-content>{{ value() }}</ng-content></dd>
+      <dd class="item-value"><ng-content>{{ value() }}</ng-content></dd>
     </div>
   `,
 })

src/app/shared/ui/form-field/form-field.component.ts

@@ -12,16 +12,16 @@ import { Component, booleanAttribute, input } from '@angular/core';
     .error{color:var(--rhc-color-foreground-default);font-weight:var(--rhc-text-font-weight-semi-bold);margin-block-start:var(--rhc-space-max-sm);border-inline-start:var(--rhc-border-width-md) solid var(--rhc-color-rood-500);padding-inline-start:var(--rhc-space-max-md)}
   `],
   template: `
-    <div class="rhc-form-field utrecht-form-field" [class.utrecht-form-field--invalid]="!!error()">
+    <div class="form-field">
-      <label class="utrecht-form-label label" [id]="fieldId() + '-label'" [for]="fieldId()">
+      <label class="form-label label" [id]="fieldId() + '-label'" [for]="fieldId()">
         {{ label() }}@if (required()) { <span class="req" i18n="@@formField.verplicht">(verplicht)</span> }
       </label>
       @if (description()) {
-        <div class="utrecht-form-field-description desc" [id]="fieldId() + '-desc'">{{ description() }}</div>
+        <div class="form-text desc" [id]="fieldId() + '-desc'">{{ description() }}</div>
       }
       <ng-content />
       @if (error()) {
-        <div class="utrecht-form-field-error-message error" [id]="fieldId() + '-error'" role="alert">{{ error() }}</div>
+        <div class="error" [id]="fieldId() + '-error'" role="alert">{{ error() }}</div>
       }
     </div>
   `,

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

@@ -1,7 +1,7 @@
 import { Component, input } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 
-/** Atom: heading. Renders the right h1..h5 with RHC heading styling.
+/** Atom: heading. Renders the right h1..h5; CIBG/Bootstrap styles native headings.
     Single <ng-content> captured in a template — multiple ng-content across
     @switch branches silently drops the projected content. */
 @Component({
@@ -10,11 +10,11 @@ import { NgTemplateOutlet } from '@angular/common';
   template: `
     <ng-template #content><ng-content /></ng-template>
     @switch (level()) {
-      @case (1) { <h1 class="rhc-heading nl-heading--level-1"><ng-container [ngTemplateOutlet]="content" /></h1> }
+      @case (1) { <h1><ng-container [ngTemplateOutlet]="content" /></h1> }
-      @case (2) { <h2 class="rhc-heading nl-heading--level-2"><ng-container [ngTemplateOutlet]="content" /></h2> }
+      @case (2) { <h2><ng-container [ngTemplateOutlet]="content" /></h2> }
-      @case (3) { <h3 class="rhc-heading nl-heading--level-3"><ng-container [ngTemplateOutlet]="content" /></h3> }
+      @case (3) { <h3><ng-container [ngTemplateOutlet]="content" /></h3> }
-      @case (4) { <h4 class="rhc-heading nl-heading--level-4"><ng-container [ngTemplateOutlet]="content" /></h4> }
+      @case (4) { <h4><ng-container [ngTemplateOutlet]="content" /></h4> }
-      @default  { <h5 class="rhc-heading nl-heading--level-5"><ng-container [ngTemplateOutlet]="content" /></h5> }
+      @default  { <h5><ng-container [ngTemplateOutlet]="content" /></h5> }
     }
   `,
 })

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

@@ -1,11 +1,11 @@
 import { Component, input } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
-/** Atom: link. Internal router link styled as an RHC/Utrecht link. */
+/** Atom: link. Internal router link; CIBG/Bootstrap styles bare anchors. */
 @Component({
   selector: 'app-link',
   imports: [RouterLink],
-  template: `<a [routerLink]="to()" class="rhc-link nl-link utrecht-link"><ng-content /></a>`,
+  template: `<a [routerLink]="to()" class="link-primary"><ng-content /></a>`,
 })
 export class LinkComponent {
   to = input.required<string>();

src/app/shared/ui/radio-group/radio-group.component.ts

@@ -18,25 +18,27 @@ export const JA_NEE: RadioOption[] = [
 @Component({
   selector: 'app-radio-group',
   styles: [`
-    .rhc-radio-option {
+    .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
-      class="utrecht-form-field-radio-group"
       role="radiogroup"
       [attr.aria-labelledby]="name() + '-label'"
       [attr.aria-invalid]="invalid() ? 'true' : null"
       [attr.aria-describedby]="invalid() ? name() + '-error' : null">
       @for (opt of options(); track opt.value) {
-        <label class="utrecht-form-label utrecht-form-label--radio-button rhc-radio-option">
+        <label class="form-check-label radio-option">
           <input
-            class="utrecht-radio-button"
+            class="form-check-input"
-            [class.utrecht-radio-button--checked]="value === opt.value"
+            [class.is-invalid]="invalid()"
             type="radio"
             [name]="name()"
             [value]="opt.value"

src/app/shared/ui/rich-text-editor/rich-text-editor.component.ts

@@ -52,12 +52,12 @@ export interface PlaceholderOption {
   template: `
     @if (editable()) {
       <div class="rte-toolbar" role="toolbar" [attr.aria-label]="toolbarLabel()">
-        <button type="button" class="utrecht-button utrecht-button--subtle" (mousedown)="$event.preventDefault()" (click)="format('bold')" [attr.aria-label]="boldLabel()"><b>B</b></button>
+        <button type="button" class="btn btn-outline-secondary btn-sm" (mousedown)="$event.preventDefault()" (click)="format('bold')" [attr.aria-label]="boldLabel()"><b>B</b></button>
-        <button type="button" class="utrecht-button utrecht-button--subtle" (mousedown)="$event.preventDefault()" (click)="format('italic')" [attr.aria-label]="italicLabel()"><i>I</i></button>
+        <button type="button" class="btn btn-outline-secondary btn-sm" (mousedown)="$event.preventDefault()" (click)="format('italic')" [attr.aria-label]="italicLabel()"><i>I</i></button>
-        <button type="button" class="utrecht-button utrecht-button--subtle" (mousedown)="$event.preventDefault()" (click)="format('underline')" [attr.aria-label]="underlineLabel()"><u>U</u></button>
+        <button type="button" class="btn btn-outline-secondary btn-sm" (mousedown)="$event.preventDefault()" (click)="format('underline')" [attr.aria-label]="underlineLabel()"><u>U</u></button>
         <span class="rte-sep" aria-hidden="true"></span>
-        <button type="button" class="utrecht-button utrecht-button--subtle" (mousedown)="$event.preventDefault()" (click)="list('bullet')" [attr.aria-label]="bulletListLabel()">•</button>
+        <button type="button" class="btn btn-outline-secondary btn-sm" (mousedown)="$event.preventDefault()" (click)="list('bullet')" [attr.aria-label]="bulletListLabel()">•</button>
-        <button type="button" class="utrecht-button utrecht-button--subtle" (mousedown)="$event.preventDefault()" (click)="list('number')" [attr.aria-label]="numberListLabel()">1.</button>
+        <button type="button" class="btn btn-outline-secondary btn-sm" (mousedown)="$event.preventDefault()" (click)="list('number')" [attr.aria-label]="numberListLabel()">1.</button>
         @if (placeholders().length) {
           <span class="rte-sep" aria-hidden="true"></span>
           <label>

src/app/shared/ui/status-badge/status-badge.component.ts

@@ -5,10 +5,14 @@ import { Component, input } from '@angular/core';
     This keeps the shared UI kernel free of any domain knowledge. */
 @Component({
   selector: 'app-status-badge',
-  styles: [`.badge{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md)}`],
+  // Local class is NOT Bootstrap's .badge (which would add pill padding/colour) — hence .status-badge.
+  styles: [`
+    .status-badge{display:inline-flex;align-items:center;gap:var(--rhc-space-max-md)}
+    .dot{inline-size:0.75rem;block-size:0.75rem;border-radius:var(--rhc-border-radius-round);flex:none}
+  `],
   template: `
-    <span class="badge">
+    <span class="status-badge">
-      <span class="rhc-dot-badge" [style.background-color]="color()" aria-hidden="true"></span>
+      <span class="dot" [style.background-color]="color()" aria-hidden="true"></span>
       <span>{{ label() }}</span>
     </span>
   `,

src/app/shared/ui/text-input/text-input.component.ts

@@ -10,8 +10,8 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   `],
   template: `
     <input
-      class="utrecht-textbox rhc-text-input"
+      class="form-control"
-      [class.utrecht-textbox--invalid]="invalid()"
+      [class.is-invalid]="invalid()"
       [type]="type()"
       [id]="inputId()"
       [attr.aria-invalid]="invalid() ? 'true' : null"

src/app/shared/ui/upload/delivery-channel-toggle/delivery-channel-toggle.component.ts

@@ -6,20 +6,21 @@ import type { DeliveryChannel } from '@shared/upload/upload.machine';
 @Component({
   selector: 'app-delivery-channel-toggle',
   styles: [`
-    .rhc-radio-option {
+    .radio-option {
       display: flex;
       align-items: center;
       gap: var(--rhc-space-max-md);
       padding-block: var(--rhc-space-max-sm);
+      margin: 0;
     }
+    .radio-option .form-check-input { margin: 0; float: none; }
   `],
   template: `
-    <div class="utrecht-form-field-radio-group" role="radiogroup">
+    <div role="radiogroup">
       @for (opt of options; track opt.value) {
-        <label class="utrecht-form-label utrecht-form-label--radio-button rhc-radio-option">
+        <label class="form-check-label radio-option">
           <input
-            class="utrecht-radio-button"
+            class="form-check-input"
-            [class.utrecht-radio-button--checked]="channel() === opt.value"
             type="radio"
             [name]="name()"
             [value]="opt.value"

src/app/shared/ui/upload/file-input/file-input.component.ts

@@ -35,9 +35,7 @@ import { Component, ElementRef, input, output, viewChild } from '@angular/core';
         [multiple]="multiple()"
         [disabled]="disabled()"
         (change)="onChange($event)" />
-      <span
+      <span class="btn btn-outline-primary label" [class.disabled]="disabled()">
-        class="utrecht-button rhc-button utrecht-button--secondary-action label"
-        [class.utrecht-button--disabled]="disabled()">
         <span aria-hidden="true">↑</span>
         <span>{{ label() }}</span>
       </span>

src/app/showcase/concepts.page.ts

@@ -17,8 +17,8 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
   return { value: () => value as T, status: () => status, error: () => error, hasValue: () => value !== undefined, reload: () => {} } as unknown as Resource<T>;
 }
 
-/** Teaching showcase: each section pairs the impossible-state-permitting "before"
+/** Teaching showcase: each section pairs the impossible-state-permitting"before"
-    with the "after" where the type system rules it out. Composition-only. */
+    with the"after" where the type system rules it out. Composition-only. */
 @Component({
   selector: 'app-concepts-page',
   imports: [
@@ -53,7 +53,7 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
     <app-page-shell heading="Onmogelijke toestanden onmogelijk maken" backLink="/dashboard">
       <p class="lead">
         Vijf functionele patronen die atomic design makkelijker maakt om te tonen — telkens
-        "fout" (de oude vorm liet het toe) naast "goed" (het type maakt het onmogelijk).
+"fout" (de oude vorm liet het toe) naast"goed" (het type maakt het onmogelijk).
       </p>
 
       <!-- 1. Discriminated unions -->
@@ -88,7 +88,7 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
             <p class="tag plain">Failure</p>
             <app-async [resource]="errorRes"><ng-template appAsyncLoaded let-v>{{ v }}</ng-template></app-async>
             <p class="tag plain">Success</p>
-            <app-async [resource]="successRes" [isEmpty]="isEmpty"><ng-template appAsyncLoaded let-v><ul class="rhc-unordered-list">@for (i of v; track i) {<li>{{ i }}</li>}</ul></ng-template></app-async>
+            <app-async [resource]="successRes" [isEmpty]="isEmpty"><ng-template appAsyncLoaded let-v><ul>@for (i of v; track i) {<li>{{ i }}</li>}</ul></ng-template></app-async>
           </div>
           <div class="card card--good">
             <p class="tag good">De exhaustieve fold</p>
@@ -110,7 +110,7 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
           <div class="card" [class.card--good]="parsed().ok" [class.card--bad]="!parsed().ok">
             @if (parsed().ok) {
               <p class="tag good">ok</p>
-              <pre>Postcode = "{{ $any(parsed()).value }}"</pre>
+              <pre>Postcode ="{{ $any(parsed()).value }}"</pre>
               <p class="note">Een gevalideerde <code>Postcode</code> is een ander type dan een ruwe string.</p>
             } @else {
               <p class="tag bad">err</p>
@@ -128,7 +128,7 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
           <div class="card card--bad">
             <p class="tag bad">Fout — losse booleans</p>
             <pre [innerHTML]="machineBad"></pre>
-            <p class="note">Niets verhindert "submitting" mét validatiefouten of een successcherm met errors.</p>
+            <p class="note">Niets verhindert"submitting" mét validatiefouten of een successcherm met errors.</p>
           </div>
           <div class="card card--good">
             <p class="tag good">Goed — één tagged union</p>
@@ -144,11 +144,11 @@ function fakeResource<T>(status: string, value?: T, error?: Error): Resource<T>
 
       <!-- 5. Fixed steps, questions revealed inline -->
       <section class="section">
-        <app-heading [level]="2">5 · Vragenlijst met vaste stappen — "vragen tonen, niet stappen toevoegen"</app-heading>
+        <app-heading [level]="2">5 · Vragenlijst met vaste stappen —"vragen tonen, niet stappen toevoegen"</app-heading>
         <p class="lead">
           Het aantal stappen ligt vast (<code>STEPS</code>); vervolgvragen verschijnen <em>binnen</em> een stap
-          op basis van eerdere antwoorden. Antwoord "ja" op buitenland of vul weinig uren in, en er komt een
+          op basis van eerdere antwoorden. Antwoord"ja" op buitenland of vul weinig uren in, en er komt een
-          extra vraag bij in dezelfde stap — de voortgang "van N" blijft gelijk.
+          extra vraag bij in dezelfde stap — de voortgang"van N" blijft gelijk.
         </p>
         <div class="cols">
           <div class="card card--good">

src/index.html

@@ -6,14 +6,12 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <!-- Free substitute for RijksSansVF (the licensed Rijksoverheid font). The
+  <!-- CIBG Huisstijl (customized Bootstrap 5.2). Loaded as a <link> so its relative
-       design tokens already fall back to 'Fira Sans'. ponytail: no @font-face dance. -->
+       url(../fonts|icons|images) refs resolve against the vendored folder at runtime.
-  <link rel="preconnect" href="https://fonts.googleapis.com">
+       Licensed Rijksoverheid fonts are not used — styles.scss overrides the stack to system-ui. -->
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="cibg-huisstijl/css/huisstijl.min.css">
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
 </head>
-<!-- rhc-theme = component tokens, lintblauw = Rijksoverheid lint-blue palette -->
+<body>
-<body class="rhc-theme lintblauw utrecht-document">
   <app-root></app-root>
 </body>
 </html>

src/styles.scss

@@ -1,12 +1,88 @@
-/* Rijkshuisstijl design tokens (already themed) + Utrecht/RHC component CSS.
+/* CIBG Huisstijl (a customized Bootstrap 5.2 build) is loaded as a plain <link> in
-   ponytail: we import the published CSS instead of hand-writing styles — the
+   index.html (public/cibg-huisstijl/css/huisstijl.min.css) so its relative url(../fonts|
-   whole point is that the design system gives us Rijkshuisstijl for free. */
+   icons|images) references resolve at runtime.
-@import '@rijkshuisstijl-community/design-tokens/dist/index.css';        /* .rhc-theme tokens */
+
-@import '@rijkshuisstijl-community/design-tokens/dist/lintblauw/index.css'; /* .lintblauw palette */
+   Token bridge: the app's components reference a semantic `--rhc-*` token vocabulary
-@import '@rijkshuisstijl-community/components-css/dist/index.css';        /* component classes */
+   (316 refs, 54 tokens). Rather than rewrite every reference, we redefine those tokens
+   HERE onto CIBG/Bootstrap values (--bs-* where one exists, CIBG palette hex otherwise).
+   The names are now an internal alias set; the VALUES are CIBG. (styles.scss is exempt
+   from check:tokens, so palette hex is allowed in this one file.) */
+:root {
+  /* — semantic foreground/background/border — */
+  --rhc-color-foreground-default: var(--bs-body-color);
+  --rhc-color-foreground-subtle: #617286;               /* CIBG meta grey */
+  --rhc-color-foreground-link: var(--bs-link-color);    /* #01689b */
+  --rhc-color-foreground-link-hover: #154273;           /* CIBG active/hover */
+  --rhc-color-foreground-on-primary: #fff;
+  --rhc-color-border-default: var(--bs-border-color);
+  --rhc-color-border-subtle: #e2e8f0;
+  --rhc-color-border-strong: #adb5bd;
+  --rhc-color-wit: #fff;
+
+  /* — greys — */
+  --rhc-color-cool-grey-100: #f8fafc;
+  --rhc-color-cool-grey-200: #f1f5f9;
+  --rhc-color-cool-grey-300: #e2e8f0;
+  --rhc-color-grijs-100: #f1f5f9;
+  --rhc-color-grijs-200: #e2e8f0;
+  --rhc-color-grijs-300: #cbd5e1;
+  --rhc-color-grijs-400: #94a3b8;
+  --rhc-color-grijs-700: #334155;
+
+  /* — blues (CIBG primary family) — */
+  --rhc-color-lintblauw-100: #e6eef3;
+  --rhc-color-lintblauw-500: #01689b;
+  --rhc-color-lintblauw-600: #015a87;
+  --rhc-color-lintblauw-700: #154273;
+  --rhc-color-hemelblauw-100: #e6f0f5;
+  --rhc-color-hemelblauw-500: #01689b;
+  --rhc-color-hemelblauw-700: #154273;
+  --rhc-color-donkerblauw-700: #154273;
+
+  /* — status colors (CIBG semantic) — */
+  --rhc-color-groen-300: #e3f0d8;
+  --rhc-color-groen-500: #39870c;
+  --rhc-color-groen-700: #2a6609;
+  --rhc-color-rood-100: #fbe4e2;
+  --rhc-color-rood-300: #f0a9a3;
+  --rhc-color-rood-500: #d52b1e;
+  --rhc-color-rood-600: #b81f14;
+  --rhc-color-geel-100: #fff4d6;
+  --rhc-color-geel-600: #ffb612;
+  --rhc-color-oranje-500: #e17000;
+
+  /* — spacing scale (rem, Bootstrap-aligned) — */
+  --rhc-space-max-xs: 0.25rem;
+  --rhc-space-max-sm: 0.5rem;
+  --rhc-space-max-md: 1rem;
+  --rhc-space-max-lg: 1.5rem;
+  --rhc-space-max-xl: 2rem;
+  --rhc-space-max-2xl: 3rem;
+  --rhc-space-max-3xl: 4rem;
+  --rhc-space-max-4xl: 5rem;
+  --rhc-space-max-5xl: 6rem;
+
+  /* — border — */
+  --rhc-border-radius-sm: var(--bs-border-radius-sm);
+  --rhc-border-radius-md: var(--bs-border-radius);
+  --rhc-border-radius-round: 50%;
+  --rhc-border-width-sm: 1px;
+  --rhc-border-width-md: 2px;
+
+  /* — typography — */
+  --rhc-text-font-size-sm: 0.875rem;
+  --rhc-text-font-size-lg: 1.25rem;
+  --rhc-text-font-weight-regular: 400;
+  --rhc-text-font-weight-semi-bold: 600;
+  --rhc-text-font-weight-bold: 700;
+  --rhc-text-line-height-sm: 1.4;
+
+  /* System-font stack (licensed Rijksoverheid fonts intentionally not bundled — POC). */
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
 
 html, body { margin: 0; min-height: 100%; }
-/* Rijkshuisstijl pages sit on white; cards/panels carry the subtle grey. */
+/* Pages sit on white; cards/panels carry the subtle grey. */
 body { background: var(--rhc-color-wit); color: var(--rhc-color-foreground-default); }
 
 /* App theme layer: a few app-specific measures RHC has no token for (content/form