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>
2026-07-02 12:32:50 +02:00
parent 180c08d4ee
commit b443f1fc04
74 changed files with 4286 additions and 1116 deletions
--- a/.storybook/main.ts
+++ b/.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;
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,3 +1,3 @@
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
+<!-- CIBG Huisstijl (customized Bootstrap 5.2), served from the vendored public/ staticDir.
+     Mirrors src/index.html so stories match the app. System font per styles.scss. -->
+<link rel="stylesheet" href="cibg-huisstijl/css/huisstijl.min.css" />
--- a/.storybook/preview.ts
+++ b/.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
-  // tokens cascade (global component CSS comes from the app's build target).
+  // CIBG/Bootstrap styles bare elements — no theme wrapper class needed; just pad.
+  // The token bridge lives in styles.scss (loaded via the app build target).
  decorators: [
-    componentWrapperDecorator(
-      (story) => `<div class="rhc-theme lintblauw utrecht-document" style="padding:1.5rem">${story}</div>`
-    ),
+    componentWrapperDecorator((story) => `<div style="padding:1.5rem">${story}</div>`),
  ],
  parameters: {
    layout: 'padded',
--- a/CLAUDE.md
+++ b/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;
-we own only a small typed `input()` API, the design system does the visuals.
+exception, not the default. Atoms are thin wrappers over CIBG Huisstijl (Bootstrap 5.2)
+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.
--- a/docs/architecture/0003-cibg-huisstijl.md
+++ b/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.
--- a/documentation.json
+++ b/documentation.json
--- a/package.json
+++ b/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"
  },
--- a/public/cibg-huisstijl/LICENSE.txt
+++ b/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.
--- a/public/cibg-huisstijl/MIGRATION.md
+++ b/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.
+
+
--- a/public/cibg-huisstijl/README.md
+++ b/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.
--- a/public/cibg-huisstijl/css/back-office/huisstijl-back-office.css
+++ b/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;
+  }
+}
--- a/public/cibg-huisstijl/css/back-office/huisstijl-back-office.min.css
+++ b/public/cibg-huisstijl/css/back-office/huisstijl-back-office.min.css
--- a/public/cibg-huisstijl/css/components/vragenlijst.css
+++ b/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%;
+}
--- a/public/cibg-huisstijl/css/components/vragenlijst.min.css
+++ b/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%}
--- a/public/cibg-huisstijl/css/huisstijl.css
+++ b/public/cibg-huisstijl/css/huisstijl.css
--- a/public/cibg-huisstijl/css/huisstijl.min.css
+++ b/public/cibg-huisstijl/css/huisstijl.min.css
--- a/public/cibg-huisstijl/css/tinymce/tinymce-cibg.css
+++ b/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;
+}
--- a/public/cibg-huisstijl/css/tinymce/tinymce-cibg.min.css
+++ b/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}
--- a/public/cibg-huisstijl/fonts/CIBG-icons-1.2.woff2
+++ b/public/cibg-huisstijl/fonts/CIBG-icons-1.2.woff2
--- a/public/cibg-huisstijl/icons/correct-symbol.svg
+++ b/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>
--- a/public/cibg-huisstijl/icons/exclamation-black.svg
+++ b/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>
--- a/public/cibg-huisstijl/icons/exclamation.svg
+++ b/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>
--- a/public/cibg-huisstijl/icons/favicon.ico
+++ b/public/cibg-huisstijl/icons/favicon.ico
--- a/public/cibg-huisstijl/icons/generic-icons.svg
+++ b/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>
--- a/public/cibg-huisstijl/icons/information-symbol.svg
+++ b/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>
--- a/public/cibg-huisstijl/icons/ro-icons-1.9.woff
+++ b/public/cibg-huisstijl/icons/ro-icons-1.9.woff
--- a/public/cibg-huisstijl/images/beeldmerk-large.svg
+++ b/public/cibg-huisstijl/images/beeldmerk-large.svg
--- a/public/cibg-huisstijl/images/edit.svg
+++ b/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>
--- a/public/cibg-huisstijl/images/fallback-beeldmerk.svg
+++ b/public/cibg-huisstijl/images/fallback-beeldmerk.svg
--- a/public/cibg-huisstijl/images/favicon-32-robijn.png
+++ b/public/cibg-huisstijl/images/favicon-32-robijn.png
--- a/public/cibg-huisstijl/images/favicon-64-robijn.png
+++ b/public/cibg-huisstijl/images/favicon-64-robijn.png
--- a/public/cibg-huisstijl/images/favicon152_white.png
+++ b/public/cibg-huisstijl/images/favicon152_white.png
--- a/public/cibg-huisstijl/images/favicon32.png
+++ b/public/cibg-huisstijl/images/favicon32.png
--- a/public/cibg-huisstijl/images/favicon64.png
+++ b/public/cibg-huisstijl/images/favicon64.png
--- a/public/cibg-huisstijl/images/icon-calendar.svg
+++ b/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>
--- a/public/cibg-huisstijl/images/icon-pdf.png
+++ b/public/cibg-huisstijl/images/icon-pdf.png
--- a/public/cibg-huisstijl/images/logo-cibg.svg
+++ b/public/cibg-huisstijl/images/logo-cibg.svg
--- a/public/cibg-huisstijl/images/open-folder.svg
+++ b/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>
--- a/public/cibg-huisstijl/images/sort-asc.svg
+++ b/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>
--- a/public/cibg-huisstijl/images/sort-desc.svg
+++ b/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>
--- a/public/cibg-huisstijl/images/sort.svg
+++ b/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>
--- a/public/cibg-huisstijl/images/trash.svg
+++ b/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>
--- a/public/cibg-huisstijl/package.json
+++ b/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"
+}
--- a/public/cibg-huisstijl/scss/variables.scss
+++ b/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;
+
--- a/src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts
+++ b/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 ?? ''" />
--- a/src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts
+++ b/src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts
@@ -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 class="rhc-paragraph app-text-subtle">{{ reden() }}</p>
+          <p i18n="@@aanvraagBlock.afgewezen">Referentie {{ ref() }}</p>
+          <p class="app-text-subtle">{{ reden() }}</p>
        }
      }

--- a/src/app/registratie/ui/address-fields/address-fields.component.ts
+++ b/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">
-      <legend class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend">{{ legend() }}</legend>
+    <fieldset>
+      <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 })"
--- a/src/app/registratie/ui/dashboard.page.ts
+++ b/src/app/registratie/ui/dashboard.page.ts
@@ -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>
--- a/src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts
+++ b/src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts
@@ -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()" />
--- a/src/app/registratie/ui/registration-summary/registration-summary.component.ts
+++ b/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" />
--- a/src/app/registratie/ui/registration-table/registration-table.component.ts
+++ b/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">
-      <table class="utrecht-table utrecht-table--html-table utrecht-table--alternate-row-color">
+    <div class="table-responsive">
+      <table class="table table-striped">
        <thead>
          <tr>
-            <th class="utrecht-table__header-cell" i18n="@@table.type">Type</th>
-            <th class="utrecht-table__header-cell" i18n="@@table.omschrijving">Omschrijving</th>
-            <th class="utrecht-table__header-cell" i18n="@@table.datum">Datum</th>
+            <th scope="col" i18n="@@table.type">Type</th>
+            <th scope="col" i18n="@@table.omschrijving">Omschrijving</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 class="utrecht-table__cell">{{ row.omschrijving }}</td>
-              <td class="utrecht-table__cell">{{ row.datum | date:'mediumDate' }}</td>
+              <td>{{ row.type }}</td>
+              <td>{{ row.omschrijving }}</td>
+              <td>{{ row.datum | date:'mediumDate' }}</td>
            </tr>
          }
        </tbody>
--- a/src/app/shared/layout/breadcrumb/breadcrumb.component.ts
+++ b/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">
-      <ol class="utrecht-breadcrumb-nav__list list">
+    <nav i18n-aria-label="@@breadcrumb.aria" aria-label="Kruimelpad">
+      <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>
--- a/src/app/shared/layout/page-shell/page-shell.component.ts
+++ b/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>
--- a/src/app/shared/layout/shell/shell.component.ts
+++ b/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)}
-    .layout{min-block-size:100vh;align-items:stretch}
+    .skip{position:absolute;left:var(--app-skip-link-offset);z-index:1030}
+    .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>
-    <div class="utrecht-page-layout utrecht-page-layout--stretch layout">
+    <a href="#main" class="skip" i18n="@@shell.skipLink">Naar de inhoud</a>
+    <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>
--- a/src/app/shared/layout/site-footer/site-footer.component.ts
+++ b/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>
--- a/src/app/shared/layout/wizard-shell/wizard-shell.component.ts
+++ b/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>
--- a/src/app/shared/ui/alert/alert.component.ts
+++ b/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.utrecht-alert--info]="type() === 'info'"
-      [class.utrecht-alert--ok]="type() === 'ok'"
-      [class.utrecht-alert--warning]="type() === 'warning'"
-      [class.utrecht-alert--error]="type() === 'error'"
+      class="alert-box"
+      [class.alert-info]="type() === 'info'"
+      [class.alert-ok]="type() === 'ok'"
+      [class.alert-warning]="type() === 'warning'"
+      [class.alert-error]="type() === 'error'"
      role="status">
      <ng-content />
    </div>
--- a/src/app/shared/ui/async/async.component.ts
+++ b/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"
--- a/src/app/shared/ui/button/button.component.ts
+++ b/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.utrecht-button--primary-action]="variant() === 'primary'"
-      [class.utrecht-button--secondary-action]="variant() === 'secondary'"
-      [class.utrecht-button--subtle]="variant() === 'subtle'"
-      [class.utrecht-button--danger]="variant() === 'danger'"
-      [class.utrecht-button--disabled]="disabled()">
+      class="btn"
+      [class.btn-primary]="variant() === 'primary'"
+      [class.btn-outline-primary]="variant() === 'secondary'"
+      [class.btn-link]="variant() === 'subtle'"
+      [class.btn-danger]="variant() === 'danger'">
      <ng-content />
    </button>
  `,
--- a/src/app/shared/ui/card/card.component.ts
+++ b/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>
--- a/src/app/shared/ui/checkbox/checkbox.component.ts
+++ b/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>
-      <input type="checkbox" [id]="checkboxId()" [checked]="value" [disabled]="disabled"
+    <label class="form-check-label">
+      <input class="form-check-input" type="checkbox" [id]="checkboxId()" [checked]="value" [disabled]="disabled"
        (change)="onToggle($event)" (blur)="onTouched()" />
      <span>{{ label() }}</span>
    </label>
--- a/src/app/shared/ui/data-row/data-row.component.ts
+++ b/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.
-    Wrap several of these in .rhc-data-summary (see registration-summary). */
+/** Molecule: one key/value row in a data summary. Hand-rolled from tokens
+    (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
-  // list ends cleanly instead of looking like a trailing empty row.
-  styles: [`:host:last-child .rhc-data-summary__item { border-block-end-style: none; }`],
+  styles: [`
+    .item{
+      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">
-      <dt class="rhc-data-summary__item-key">{{ key() }}</dt>
-      <dd class="rhc-data-summary__item-value"><ng-content>{{ value() }}</ng-content></dd>
+    <div class="item">
+      <dt class="item-key">{{ key() }}</dt>
+      <dd class="item-value"><ng-content>{{ value() }}</ng-content></dd>
    </div>
  `,
 })
--- a/src/app/shared/ui/form-field/form-field.component.ts
+++ b/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()">
-      <label class="utrecht-form-label label" [id]="fieldId() + '-label'" [for]="fieldId()">
+    <div class="form-field">
+      <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>
  `,
--- a/src/app/shared/ui/heading/heading.component.ts
+++ b/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 (2) { <h2 class="rhc-heading nl-heading--level-2"><ng-container [ngTemplateOutlet]="content" /></h2> }
-      @case (3) { <h3 class="rhc-heading nl-heading--level-3"><ng-container [ngTemplateOutlet]="content" /></h3> }
-      @case (4) { <h4 class="rhc-heading nl-heading--level-4"><ng-container [ngTemplateOutlet]="content" /></h4> }
-      @default  { <h5 class="rhc-heading nl-heading--level-5"><ng-container [ngTemplateOutlet]="content" /></h5> }
+      @case (1) { <h1><ng-container [ngTemplateOutlet]="content" /></h1> }
+      @case (2) { <h2><ng-container [ngTemplateOutlet]="content" /></h2> }
+      @case (3) { <h3><ng-container [ngTemplateOutlet]="content" /></h3> }
+      @case (4) { <h4><ng-container [ngTemplateOutlet]="content" /></h4> }
+      @default  { <h5><ng-container [ngTemplateOutlet]="content" /></h5> }
    }
  `,
 })
--- a/src/app/shared/ui/link/link.component.ts
+++ b/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>();
--- a/src/app/shared/ui/radio-group/radio-group.component.ts
+++ b/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.utrecht-radio-button--checked]="value === opt.value"
+            class="form-check-input"
+            [class.is-invalid]="invalid()"
            type="radio"
            [name]="name()"
            [value]="opt.value"
--- a/src/app/shared/ui/rich-text-editor/rich-text-editor.component.ts
+++ b/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="utrecht-button utrecht-button--subtle" (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('bold')" [attr.aria-label]="boldLabel()"><b>B</b></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="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="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('bullet')" [attr.aria-label]="bulletListLabel()">•</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>
--- a/src/app/shared/ui/status-badge/status-badge.component.ts
+++ b/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="rhc-dot-badge" [style.background-color]="color()" aria-hidden="true"></span>
+    <span class="status-badge">
+      <span class="dot" [style.background-color]="color()" aria-hidden="true"></span>
      <span>{{ label() }}</span>
    </span>
  `,
--- a/src/app/shared/ui/text-input/text-input.component.ts
+++ b/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.utrecht-textbox--invalid]="invalid()"
+      class="form-control"
+      [class.is-invalid]="invalid()"
      [type]="type()"
      [id]="inputId()"
      [attr.aria-invalid]="invalid() ? 'true' : null"
--- a/src/app/shared/ui/upload/delivery-channel-toggle/delivery-channel-toggle.component.ts
+++ b/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.utrecht-radio-button--checked]="channel() === opt.value"
+            class="form-check-input"
            type="radio"
            [name]="name()"
            [value]="opt.value"
--- a/src/app/shared/ui/upload/file-input/file-input.component.ts
+++ b/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
-        class="utrecht-button rhc-button utrecht-button--secondary-action label"
-        [class.utrecht-button--disabled]="disabled()">
+      <span class="btn btn-outline-primary label" [class.disabled]="disabled()">
        <span aria-hidden="true">↑</span>
        <span>{{ label() }}</span>
      </span>
--- a/src/app/showcase/concepts.page.ts
+++ b/src/app/showcase/concepts.page.ts
@@ -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>
--- a/src/index.html
+++ b/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
-       design tokens already fall back to 'Fira Sans'. ponytail: no @font-face dance. -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <!-- CIBG Huisstijl (customized Bootstrap 5.2). Loaded as a <link> so its relative
+       url(../fonts|icons|images) refs resolve against the vendored folder at runtime.
+       Licensed Rijksoverheid fonts are not used — styles.scss overrides the stack to system-ui. -->
+  <link rel="stylesheet" href="cibg-huisstijl/css/huisstijl.min.css">
 </head>
-<!-- rhc-theme = component tokens, lintblauw = Rijksoverheid lint-blue palette -->
-<body class="rhc-theme lintblauw utrecht-document">
+<body>
  <app-root></app-root>
 </body>
 </html>
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,12 +1,88 @@
-/* Rijkshuisstijl design tokens (already themed) + Utrecht/RHC component CSS.
-   ponytail: we import the published CSS instead of hand-writing styles — the
-   whole point is that the design system gives us Rijkshuisstijl for free. */
-@import '@rijkshuisstijl-community/design-tokens/dist/index.css';        /* .rhc-theme tokens */
-@import '@rijkshuisstijl-community/design-tokens/dist/lintblauw/index.css'; /* .lintblauw palette */
-@import '@rijkshuisstijl-community/components-css/dist/index.css';        /* component classes */
+/* CIBG Huisstijl (a customized Bootstrap 5.2 build) is loaded as a plain <link> in
+   index.html (public/cibg-huisstijl/css/huisstijl.min.css) so its relative url(../fonts|
+   icons|images) references resolve at runtime.
+
+   Token bridge: the app's components reference a semantic `--rhc-*` token vocabulary
+   (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
				`@@ -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%}
				`@@ -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}`
				`@@ -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>`