/* RijksSans: variabel font (gewicht 200-800) uit @nldd/design-system */
@font-face {
  font-family: "RijksSans";
  src: url("/fonts/RijksSansWeb-Regular.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "RijksSans";
  src: url("/fonts/RijksSansWeb-Italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
/* Gegenereerd door scripts/nldd-tokens.js uit @nldd/design-system.
   Niet handmatig bewerken: draai `just nldd`. */

:root {
  /* exacte huisstijlkleuren, niet themagevoelig */
  --primitives-color-reference-coolgray: #64748b;
  --primitives-color-reference-lintblauw: #154273;
  --primitives-color-reference-violet: #a90061;
  --primitives-color-reference-rood: #d52b1e;
  --primitives-color-reference-oranje: #e17000;
  --primitives-color-reference-donkergeel: #ffb612;
  --primitives-color-reference-groen: #39870c;

  /* coolgray */
  --primitives-color-coolgray-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0));
  --primitives-color-coolgray-25: light-dark(oklch(0.974 0.004 257.4), oklch(0.158 0.009 257.4));
  --primitives-color-coolgray-50: light-dark(oklch(0.947 0.007 257.4), oklch(0.201 0.011 257.4));
  --primitives-color-coolgray-75: light-dark(oklch(0.923 0.009 257.4), oklch(0.234 0.013 257.4));
  --primitives-color-coolgray-100: light-dark(oklch(0.898 0.011 257.4), oklch(0.261 0.015 257.4));
  --primitives-color-coolgray-150: light-dark(oklch(0.850 0.015 257.4), oklch(0.307 0.018 257.4));
  --primitives-color-coolgray-200: light-dark(oklch(0.804 0.019 257.4), oklch(0.348 0.020 257.4));
  --primitives-color-coolgray-250: light-dark(oklch(0.762 0.023 257.4), oklch(0.385 0.023 257.4));
  --primitives-color-coolgray-300: light-dark(oklch(0.719 0.026 257.4), oklch(0.421 0.026 257.4));
  --primitives-color-coolgray-350: light-dark(oklch(0.678 0.030 257.4), oklch(0.457 0.029 257.4));
  --primitives-color-coolgray-400: light-dark(oklch(0.639 0.033 257.4), oklch(0.491 0.032 257.4));
  --primitives-color-coolgray-450: light-dark(oklch(0.600 0.037 257.4), oklch(0.529 0.036 257.4));
  --primitives-color-coolgray-500: light-dark(oklch(0.563 0.040 257.4), oklch(0.563 0.040 257.4));
  --primitives-color-coolgray-550: light-dark(oklch(0.529 0.036 257.4), oklch(0.600 0.037 257.4));
  --primitives-color-coolgray-600: light-dark(oklch(0.491 0.032 257.4), oklch(0.639 0.033 257.4));
  --primitives-color-coolgray-650: light-dark(oklch(0.457 0.029 257.4), oklch(0.678 0.030 257.4));
  --primitives-color-coolgray-700: light-dark(oklch(0.421 0.026 257.4), oklch(0.719 0.026 257.4));
  --primitives-color-coolgray-750: light-dark(oklch(0.385 0.023 257.4), oklch(0.762 0.023 257.4));
  --primitives-color-coolgray-800: light-dark(oklch(0.348 0.020 257.4), oklch(0.804 0.019 257.4));
  --primitives-color-coolgray-850: light-dark(oklch(0.307 0.018 257.4), oklch(0.850 0.015 257.4));
  --primitives-color-coolgray-900: light-dark(oklch(0.261 0.015 257.4), oklch(0.898 0.011 257.4));
  --primitives-color-coolgray-925: light-dark(oklch(0.234 0.013 257.4), oklch(0.923 0.009 257.4));
  --primitives-color-coolgray-950: light-dark(oklch(0.201 0.011 257.4), oklch(0.947 0.007 257.4));
  --primitives-color-coolgray-975: light-dark(oklch(0.158 0.009 257.4), oklch(0.974 0.004 257.4));
  --primitives-color-coolgray-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0));

  /* lintblauw */
  --primitives-color-lintblauw-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0));
  --primitives-color-lintblauw-25: light-dark(oklch(0.973 0.013 253.4), oklch(0.158 0.015 253.4));
  --primitives-color-lintblauw-50: light-dark(oklch(0.947 0.024 253.4), oklch(0.202 0.024 253.4));
  --primitives-color-lintblauw-75: light-dark(oklch(0.922 0.034 253.4), oklch(0.233 0.034 253.4));
  --primitives-color-lintblauw-100: light-dark(oklch(0.897 0.044 253.4), oklch(0.262 0.044 253.4));
  --primitives-color-lintblauw-150: light-dark(oklch(0.850 0.063 253.4), oklch(0.307 0.063 253.4));
  --primitives-color-lintblauw-200: light-dark(oklch(0.804 0.083 253.4), oklch(0.348 0.083 253.4));
  --primitives-color-lintblauw-250: light-dark(oklch(0.760 0.097 253.4), oklch(0.387 0.097 253.4));
  --primitives-color-lintblauw-300: light-dark(oklch(0.718 0.097 253.4), oklch(0.422 0.097 253.4));
  --primitives-color-lintblauw-350: light-dark(oklch(0.678 0.097 253.4), oklch(0.456 0.097 253.4));
  --primitives-color-lintblauw-400: light-dark(oklch(0.638 0.097 253.4), oklch(0.491 0.097 253.4));
  --primitives-color-lintblauw-450: light-dark(oklch(0.600 0.097 253.4), oklch(0.528 0.097 253.4));
  --primitives-color-lintblauw-500: light-dark(oklch(0.562 0.097 253.4), oklch(0.562 0.097 253.4));
  --primitives-color-lintblauw-550: light-dark(oklch(0.528 0.097 253.4), oklch(0.600 0.097 253.4));
  --primitives-color-lintblauw-600: light-dark(oklch(0.491 0.097 253.4), oklch(0.638 0.097 253.4));
  --primitives-color-lintblauw-650: light-dark(oklch(0.456 0.097 253.4), oklch(0.678 0.097 253.4));
  --primitives-color-lintblauw-700: light-dark(oklch(0.422 0.097 253.4), oklch(0.718 0.097 253.4));
  --primitives-color-lintblauw-750: light-dark(oklch(0.387 0.097 253.4), oklch(0.760 0.097 253.4));
  --primitives-color-lintblauw-800: light-dark(oklch(0.348 0.083 253.4), oklch(0.804 0.083 253.4));
  --primitives-color-lintblauw-850: light-dark(oklch(0.307 0.063 253.4), oklch(0.850 0.063 253.4));
  --primitives-color-lintblauw-900: light-dark(oklch(0.262 0.044 253.4), oklch(0.897 0.044 253.4));
  --primitives-color-lintblauw-925: light-dark(oklch(0.233 0.034 253.4), oklch(0.922 0.034 253.4));
  --primitives-color-lintblauw-950: light-dark(oklch(0.202 0.024 253.4), oklch(0.947 0.024 253.4));
  --primitives-color-lintblauw-975: light-dark(oklch(0.158 0.015 253.4), oklch(0.973 0.013 253.4));
  --primitives-color-lintblauw-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0));

  /* oranje */
  --primitives-color-oranje-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0));
  --primitives-color-oranje-25: light-dark(oklch(0.975 0.015 52.9), oklch(0.158 0.019 52.9));
  --primitives-color-oranje-50: light-dark(oklch(0.950 0.029 52.9), oklch(0.205 0.029 52.9));
  --primitives-color-oranje-75: light-dark(oklch(0.925 0.040 52.9), oklch(0.237 0.040 52.9));
  --primitives-color-oranje-100: light-dark(oklch(0.902 0.050 52.9), oklch(0.266 0.050 52.9));
  --primitives-color-oranje-150: light-dark(oklch(0.855 0.071 52.9), oklch(0.313 0.071 52.9));
  --primitives-color-oranje-200: light-dark(oklch(0.812 0.092 52.9), oklch(0.355 0.092 52.9));
  --primitives-color-oranje-250: light-dark(oklch(0.770 0.113 52.9), oklch(0.393 0.102 52.9));
  --primitives-color-oranje-300: light-dark(oklch(0.729 0.134 52.9), oklch(0.431 0.111 52.9));
  --primitives-color-oranje-350: light-dark(oklch(0.691 0.155 52.9), oklch(0.467 0.120 52.9));
  --primitives-color-oranje-400: light-dark(oklch(0.652 0.167 52.9), oklch(0.502 0.129 52.9));
  --primitives-color-oranje-450: light-dark(oklch(0.614 0.157 52.9), oklch(0.540 0.138 52.9));
  --primitives-color-oranje-500: light-dark(oklch(0.576 0.148 52.9), oklch(0.576 0.148 52.9));
  --primitives-color-oranje-550: light-dark(oklch(0.540 0.138 52.9), oklch(0.614 0.157 52.9));
  --primitives-color-oranje-600: light-dark(oklch(0.502 0.129 52.9), oklch(0.652 0.167 52.9));
  --primitives-color-oranje-650: light-dark(oklch(0.467 0.120 52.9), oklch(0.691 0.155 52.9));
  --primitives-color-oranje-700: light-dark(oklch(0.431 0.111 52.9), oklch(0.729 0.134 52.9));
  --primitives-color-oranje-750: light-dark(oklch(0.393 0.102 52.9), oklch(0.770 0.113 52.9));
  --primitives-color-oranje-800: light-dark(oklch(0.355 0.092 52.9), oklch(0.812 0.092 52.9));
  --primitives-color-oranje-850: light-dark(oklch(0.313 0.071 52.9), oklch(0.855 0.071 52.9));
  --primitives-color-oranje-900: light-dark(oklch(0.266 0.050 52.9), oklch(0.902 0.050 52.9));
  --primitives-color-oranje-925: light-dark(oklch(0.237 0.040 52.9), oklch(0.925 0.040 52.9));
  --primitives-color-oranje-950: light-dark(oklch(0.205 0.029 52.9), oklch(0.950 0.029 52.9));
  --primitives-color-oranje-975: light-dark(oklch(0.158 0.019 52.9), oklch(0.975 0.015 52.9));
  --primitives-color-oranje-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0));

  /* groen */
  --primitives-color-groen-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0));
  --primitives-color-groen-25: light-dark(oklch(0.972 0.016 137.9), oklch(0.156 0.016 137.9));
  --primitives-color-groen-50: light-dark(oklch(0.946 0.024 137.9), oklch(0.199 0.024 137.9));
  --primitives-color-groen-75: light-dark(oklch(0.919 0.032 137.9), oklch(0.230 0.032 137.9));
  --primitives-color-groen-100: light-dark(oklch(0.893 0.040 137.9), oklch(0.256 0.040 137.9));
  --primitives-color-groen-150: light-dark(oklch(0.844 0.056 137.9), oklch(0.303 0.056 137.9));
  --primitives-color-groen-200: light-dark(oklch(0.798 0.072 137.9), oklch(0.341 0.072 137.9));
  --primitives-color-groen-250: light-dark(oklch(0.752 0.087 137.9), oklch(0.377 0.087 137.9));
  --primitives-color-groen-300: light-dark(oklch(0.709 0.103 137.9), oklch(0.412 0.103 137.9));
  --primitives-color-groen-350: light-dark(oklch(0.666 0.119 137.9), oklch(0.447 0.119 137.9));
  --primitives-color-groen-400: light-dark(oklch(0.627 0.135 137.9), oklch(0.480 0.135 137.9));
  --primitives-color-groen-450: light-dark(oklch(0.588 0.151 137.9), oklch(0.514 0.151 137.9));
  --primitives-color-groen-500: light-dark(oklch(0.550 0.165 137.9), oklch(0.550 0.165 137.9));
  --primitives-color-groen-550: light-dark(oklch(0.514 0.151 137.9), oklch(0.588 0.151 137.9));
  --primitives-color-groen-600: light-dark(oklch(0.480 0.135 137.9), oklch(0.627 0.135 137.9));
  --primitives-color-groen-650: light-dark(oklch(0.447 0.119 137.9), oklch(0.666 0.119 137.9));
  --primitives-color-groen-700: light-dark(oklch(0.412 0.103 137.9), oklch(0.709 0.103 137.9));
  --primitives-color-groen-750: light-dark(oklch(0.377 0.087 137.9), oklch(0.752 0.087 137.9));
  --primitives-color-groen-800: light-dark(oklch(0.341 0.072 137.9), oklch(0.798 0.072 137.9));
  --primitives-color-groen-850: light-dark(oklch(0.303 0.056 137.9), oklch(0.844 0.056 137.9));
  --primitives-color-groen-900: light-dark(oklch(0.256 0.040 137.9), oklch(0.893 0.040 137.9));
  --primitives-color-groen-925: light-dark(oklch(0.230 0.032 137.9), oklch(0.919 0.032 137.9));
  --primitives-color-groen-950: light-dark(oklch(0.199 0.024 137.9), oklch(0.946 0.024 137.9));
  --primitives-color-groen-975: light-dark(oklch(0.156 0.016 137.9), oklch(0.972 0.016 137.9));
  --primitives-color-groen-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0));

  /* rood */
  --primitives-color-rood-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0));
  --primitives-color-rood-25: light-dark(oklch(0.974 0.013 29.5), oklch(0.160 0.021 29.5));
  --primitives-color-rood-50: light-dark(oklch(0.951 0.025 29.5), oklch(0.205 0.031 29.5));
  --primitives-color-rood-75: light-dark(oklch(0.927 0.037 29.5), oklch(0.238 0.042 29.5));
  --primitives-color-rood-100: light-dark(oklch(0.903 0.051 29.5), oklch(0.266 0.052 29.5));
  --primitives-color-rood-150: light-dark(oklch(0.858 0.073 29.5), oklch(0.315 0.073 29.5));
  --primitives-color-rood-200: light-dark(oklch(0.814 0.094 29.5), oklch(0.358 0.094 29.5));
  --primitives-color-rood-250: light-dark(oklch(0.773 0.115 29.5), oklch(0.398 0.115 29.5));
  --primitives-color-rood-300: light-dark(oklch(0.733 0.135 29.5), oklch(0.438 0.135 29.5));
  --primitives-color-rood-350: light-dark(oklch(0.696 0.156 29.5), oklch(0.475 0.156 29.5));
  --primitives-color-rood-400: light-dark(oklch(0.658 0.177 29.5), oklch(0.513 0.177 29.5));
  --primitives-color-rood-450: light-dark(oklch(0.624 0.198 29.5), oklch(0.551 0.198 29.5));
  --primitives-color-rood-500: light-dark(oklch(0.588 0.207 29.5), oklch(0.588 0.207 29.5));
  --primitives-color-rood-550: light-dark(oklch(0.551 0.198 29.5), oklch(0.624 0.198 29.5));
  --primitives-color-rood-600: light-dark(oklch(0.513 0.177 29.5), oklch(0.658 0.177 29.5));
  --primitives-color-rood-650: light-dark(oklch(0.475 0.156 29.5), oklch(0.696 0.156 29.5));
  --primitives-color-rood-700: light-dark(oklch(0.438 0.135 29.5), oklch(0.733 0.135 29.5));
  --primitives-color-rood-750: light-dark(oklch(0.398 0.115 29.5), oklch(0.773 0.115 29.5));
  --primitives-color-rood-800: light-dark(oklch(0.358 0.094 29.5), oklch(0.814 0.094 29.5));
  --primitives-color-rood-850: light-dark(oklch(0.315 0.073 29.5), oklch(0.858 0.073 29.5));
  --primitives-color-rood-900: light-dark(oklch(0.266 0.052 29.5), oklch(0.903 0.051 29.5));
  --primitives-color-rood-925: light-dark(oklch(0.238 0.042 29.5), oklch(0.927 0.037 29.5));
  --primitives-color-rood-950: light-dark(oklch(0.205 0.031 29.5), oklch(0.951 0.025 29.5));
  --primitives-color-rood-975: light-dark(oklch(0.160 0.021 29.5), oklch(0.974 0.013 29.5));
  --primitives-color-rood-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0));

  /* violet */
  --primitives-color-violet-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0));
  --primitives-color-violet-25: light-dark(oklch(0.975 0.014 355.9), oklch(0.162 0.023 355.9));
  --primitives-color-violet-50: light-dark(oklch(0.951 0.027 355.9), oklch(0.207 0.037 355.9));
  --primitives-color-violet-75: light-dark(oklch(0.929 0.041 355.9), oklch(0.240 0.050 355.9));
  --primitives-color-violet-100: light-dark(oklch(0.904 0.056 355.9), oklch(0.270 0.064 355.9));
  --primitives-color-violet-150: light-dark(oklch(0.861 0.084 355.9), oklch(0.318 0.091 355.9));
  --primitives-color-violet-200: light-dark(oklch(0.820 0.114 355.9), oklch(0.362 0.118 355.9));
  --primitives-color-violet-250: light-dark(oklch(0.779 0.145 355.9), oklch(0.404 0.145 355.9));
  --primitives-color-violet-300: light-dark(oklch(0.741 0.172 355.9), oklch(0.443 0.172 355.9));
  --primitives-color-violet-350: light-dark(oklch(0.704 0.196 355.9), oklch(0.483 0.196 355.9));
  --primitives-color-violet-400: light-dark(oklch(0.665 0.196 355.9), oklch(0.518 0.196 355.9));
  --primitives-color-violet-450: light-dark(oklch(0.627 0.196 355.9), oklch(0.554 0.196 355.9));
  --primitives-color-violet-500: light-dark(oklch(0.590 0.196 355.9), oklch(0.590 0.196 355.9));
  --primitives-color-violet-550: light-dark(oklch(0.554 0.196 355.9), oklch(0.627 0.196 355.9));
  --primitives-color-violet-600: light-dark(oklch(0.518 0.196 355.9), oklch(0.665 0.196 355.9));
  --primitives-color-violet-650: light-dark(oklch(0.483 0.196 355.9), oklch(0.704 0.196 355.9));
  --primitives-color-violet-700: light-dark(oklch(0.443 0.172 355.9), oklch(0.741 0.172 355.9));
  --primitives-color-violet-750: light-dark(oklch(0.404 0.145 355.9), oklch(0.779 0.145 355.9));
  --primitives-color-violet-800: light-dark(oklch(0.362 0.118 355.9), oklch(0.820 0.114 355.9));
  --primitives-color-violet-850: light-dark(oklch(0.318 0.091 355.9), oklch(0.861 0.084 355.9));
  --primitives-color-violet-900: light-dark(oklch(0.270 0.064 355.9), oklch(0.904 0.056 355.9));
  --primitives-color-violet-925: light-dark(oklch(0.240 0.050 355.9), oklch(0.929 0.041 355.9));
  --primitives-color-violet-950: light-dark(oklch(0.207 0.037 355.9), oklch(0.951 0.027 355.9));
  --primitives-color-violet-975: light-dark(oklch(0.162 0.023 355.9), oklch(0.975 0.014 355.9));
  --primitives-color-violet-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0));

  /* donkergeel */
  --primitives-color-donkergeel-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0));
  --primitives-color-donkergeel-25: light-dark(oklch(0.975 0.023 79.0), oklch(0.158 0.030 79.0));
  --primitives-color-donkergeel-50: light-dark(oklch(0.949 0.046 79.0), oklch(0.203 0.050 79.0));
  --primitives-color-donkergeel-75: light-dark(oklch(0.924 0.069 79.0), oklch(0.236 0.055 79.0));
  --primitives-color-donkergeel-100: light-dark(oklch(0.900 0.091 79.0), oklch(0.263 0.059 79.0));
  --primitives-color-donkergeel-150: light-dark(oklch(0.854 0.137 79.0), oklch(0.309 0.067 79.0));
  --primitives-color-donkergeel-200: light-dark(oklch(0.810 0.169 79.0), oklch(0.350 0.075 79.0));
  --primitives-color-donkergeel-250: light-dark(oklch(0.766 0.160 79.0), oklch(0.389 0.083 79.0));
  --primitives-color-donkergeel-300: light-dark(oklch(0.724 0.151 79.0), oklch(0.424 0.090 79.0));
  --primitives-color-donkergeel-350: light-dark(oklch(0.682 0.142 79.0), oklch(0.460 0.097 79.0));
  --primitives-color-donkergeel-400: light-dark(oklch(0.644 0.134 79.0), oklch(0.496 0.104 79.0));
  --primitives-color-donkergeel-450: light-dark(oklch(0.604 0.126 79.0), oklch(0.531 0.111 79.0));
  --primitives-color-donkergeel-500: light-dark(oklch(0.567 0.119 79.0), oklch(0.567 0.119 79.0));
  --primitives-color-donkergeel-550: light-dark(oklch(0.531 0.111 79.0), oklch(0.604 0.126 79.0));
  --primitives-color-donkergeel-600: light-dark(oklch(0.496 0.104 79.0), oklch(0.644 0.134 79.0));
  --primitives-color-donkergeel-650: light-dark(oklch(0.460 0.097 79.0), oklch(0.682 0.142 79.0));
  --primitives-color-donkergeel-700: light-dark(oklch(0.424 0.090 79.0), oklch(0.724 0.151 79.0));
  --primitives-color-donkergeel-750: light-dark(oklch(0.389 0.083 79.0), oklch(0.766 0.160 79.0));
  --primitives-color-donkergeel-800: light-dark(oklch(0.350 0.075 79.0), oklch(0.810 0.169 79.0));
  --primitives-color-donkergeel-850: light-dark(oklch(0.309 0.067 79.0), oklch(0.854 0.137 79.0));
  --primitives-color-donkergeel-900: light-dark(oklch(0.263 0.059 79.0), oklch(0.900 0.091 79.0));
  --primitives-color-donkergeel-925: light-dark(oklch(0.236 0.055 79.0), oklch(0.924 0.069 79.0));
  --primitives-color-donkergeel-950: light-dark(oklch(0.203 0.050 79.0), oklch(0.949 0.046 79.0));
  --primitives-color-donkergeel-975: light-dark(oklch(0.158 0.030 79.0), oklch(0.975 0.023 79.0));
  --primitives-color-donkergeel-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0));

  /* neutral: coolgray met chroma >= 0.042 onder lichtheid 0.56 */
  --primitives-color-neutral-0: light-dark(oklch(1.000 0.000 0.0), oklch(0.000 0.000 0.0));
  --primitives-color-neutral-25: light-dark(oklch(0.974 0.004 257.4), oklch(0.158 0.042 257.4));
  --primitives-color-neutral-50: light-dark(oklch(0.947 0.007 257.4), oklch(0.201 0.042 257.4));
  --primitives-color-neutral-75: light-dark(oklch(0.923 0.009 257.4), oklch(0.234 0.042 257.4));
  --primitives-color-neutral-100: light-dark(oklch(0.898 0.011 257.4), oklch(0.261 0.042 257.4));
  --primitives-color-neutral-150: light-dark(oklch(0.850 0.015 257.4), oklch(0.307 0.042 257.4));
  --primitives-color-neutral-200: light-dark(oklch(0.804 0.019 257.4), oklch(0.348 0.042 257.4));
  --primitives-color-neutral-250: light-dark(oklch(0.762 0.023 257.4), oklch(0.385 0.042 257.4));
  --primitives-color-neutral-300: light-dark(oklch(0.719 0.026 257.4), oklch(0.421 0.042 257.4));
  --primitives-color-neutral-350: light-dark(oklch(0.678 0.030 257.4), oklch(0.457 0.042 257.4));
  --primitives-color-neutral-400: light-dark(oklch(0.639 0.033 257.4), oklch(0.491 0.042 257.4));
  --primitives-color-neutral-450: light-dark(oklch(0.600 0.037 257.4), oklch(0.529 0.042 257.4));
  --primitives-color-neutral-500: light-dark(oklch(0.563 0.040 257.4), oklch(0.563 0.040 257.4));
  --primitives-color-neutral-550: light-dark(oklch(0.529 0.042 257.4), oklch(0.600 0.037 257.4));
  --primitives-color-neutral-600: light-dark(oklch(0.491 0.042 257.4), oklch(0.639 0.033 257.4));
  --primitives-color-neutral-650: light-dark(oklch(0.457 0.042 257.4), oklch(0.678 0.030 257.4));
  --primitives-color-neutral-700: light-dark(oklch(0.421 0.042 257.4), oklch(0.719 0.026 257.4));
  --primitives-color-neutral-750: light-dark(oklch(0.385 0.042 257.4), oklch(0.762 0.023 257.4));
  --primitives-color-neutral-800: light-dark(oklch(0.348 0.042 257.4), oklch(0.804 0.019 257.4));
  --primitives-color-neutral-850: light-dark(oklch(0.307 0.042 257.4), oklch(0.850 0.015 257.4));
  --primitives-color-neutral-900: light-dark(oklch(0.261 0.042 257.4), oklch(0.898 0.011 257.4));
  --primitives-color-neutral-925: light-dark(oklch(0.234 0.042 257.4), oklch(0.923 0.009 257.4));
  --primitives-color-neutral-950: light-dark(oklch(0.201 0.042 257.4), oklch(0.947 0.007 257.4));
  --primitives-color-neutral-975: light-dark(oklch(0.158 0.042 257.4), oklch(0.974 0.004 257.4));
  --primitives-color-neutral-1000: light-dark(oklch(0.000 0.000 0.0), oklch(1.000 0.000 0.0));

  /* functionele aliassen zoals in NLDD */
  --primitives-color-accent-0: var(--primitives-color-lintblauw-0);
  --primitives-color-accent-25: var(--primitives-color-lintblauw-25);
  --primitives-color-accent-50: var(--primitives-color-lintblauw-50);
  --primitives-color-accent-75: var(--primitives-color-lintblauw-75);
  --primitives-color-accent-100: var(--primitives-color-lintblauw-100);
  --primitives-color-accent-150: var(--primitives-color-lintblauw-150);
  --primitives-color-accent-200: var(--primitives-color-lintblauw-200);
  --primitives-color-accent-250: var(--primitives-color-lintblauw-250);
  --primitives-color-accent-300: var(--primitives-color-lintblauw-300);
  --primitives-color-accent-350: var(--primitives-color-lintblauw-350);
  --primitives-color-accent-400: var(--primitives-color-lintblauw-400);
  --primitives-color-accent-450: var(--primitives-color-lintblauw-450);
  --primitives-color-accent-500: var(--primitives-color-lintblauw-500);
  --primitives-color-accent-550: var(--primitives-color-lintblauw-550);
  --primitives-color-accent-600: var(--primitives-color-lintblauw-600);
  --primitives-color-accent-650: var(--primitives-color-lintblauw-650);
  --primitives-color-accent-700: var(--primitives-color-lintblauw-700);
  --primitives-color-accent-750: var(--primitives-color-lintblauw-750);
  --primitives-color-accent-800: var(--primitives-color-lintblauw-800);
  --primitives-color-accent-850: var(--primitives-color-lintblauw-850);
  --primitives-color-accent-900: var(--primitives-color-lintblauw-900);
  --primitives-color-accent-925: var(--primitives-color-lintblauw-925);
  --primitives-color-accent-950: var(--primitives-color-lintblauw-950);
  --primitives-color-accent-975: var(--primitives-color-lintblauw-975);
  --primitives-color-accent-1000: var(--primitives-color-lintblauw-1000);
  --primitives-color-success-0: var(--primitives-color-groen-0);
  --primitives-color-success-25: var(--primitives-color-groen-25);
  --primitives-color-success-50: var(--primitives-color-groen-50);
  --primitives-color-success-75: var(--primitives-color-groen-75);
  --primitives-color-success-100: var(--primitives-color-groen-100);
  --primitives-color-success-150: var(--primitives-color-groen-150);
  --primitives-color-success-200: var(--primitives-color-groen-200);
  --primitives-color-success-250: var(--primitives-color-groen-250);
  --primitives-color-success-300: var(--primitives-color-groen-300);
  --primitives-color-success-350: var(--primitives-color-groen-350);
  --primitives-color-success-400: var(--primitives-color-groen-400);
  --primitives-color-success-450: var(--primitives-color-groen-450);
  --primitives-color-success-500: var(--primitives-color-groen-500);
  --primitives-color-success-550: var(--primitives-color-groen-550);
  --primitives-color-success-600: var(--primitives-color-groen-600);
  --primitives-color-success-650: var(--primitives-color-groen-650);
  --primitives-color-success-700: var(--primitives-color-groen-700);
  --primitives-color-success-750: var(--primitives-color-groen-750);
  --primitives-color-success-800: var(--primitives-color-groen-800);
  --primitives-color-success-850: var(--primitives-color-groen-850);
  --primitives-color-success-900: var(--primitives-color-groen-900);
  --primitives-color-success-925: var(--primitives-color-groen-925);
  --primitives-color-success-950: var(--primitives-color-groen-950);
  --primitives-color-success-975: var(--primitives-color-groen-975);
  --primitives-color-success-1000: var(--primitives-color-groen-1000);
  --primitives-color-warning-0: var(--primitives-color-oranje-0);
  --primitives-color-warning-25: var(--primitives-color-oranje-25);
  --primitives-color-warning-50: var(--primitives-color-oranje-50);
  --primitives-color-warning-75: var(--primitives-color-oranje-75);
  --primitives-color-warning-100: var(--primitives-color-oranje-100);
  --primitives-color-warning-150: var(--primitives-color-oranje-150);
  --primitives-color-warning-200: var(--primitives-color-oranje-200);
  --primitives-color-warning-250: var(--primitives-color-oranje-250);
  --primitives-color-warning-300: var(--primitives-color-oranje-300);
  --primitives-color-warning-350: var(--primitives-color-oranje-350);
  --primitives-color-warning-400: var(--primitives-color-oranje-400);
  --primitives-color-warning-450: var(--primitives-color-oranje-450);
  --primitives-color-warning-500: var(--primitives-color-oranje-500);
  --primitives-color-warning-550: var(--primitives-color-oranje-550);
  --primitives-color-warning-600: var(--primitives-color-oranje-600);
  --primitives-color-warning-650: var(--primitives-color-oranje-650);
  --primitives-color-warning-700: var(--primitives-color-oranje-700);
  --primitives-color-warning-750: var(--primitives-color-oranje-750);
  --primitives-color-warning-800: var(--primitives-color-oranje-800);
  --primitives-color-warning-850: var(--primitives-color-oranje-850);
  --primitives-color-warning-900: var(--primitives-color-oranje-900);
  --primitives-color-warning-925: var(--primitives-color-oranje-925);
  --primitives-color-warning-950: var(--primitives-color-oranje-950);
  --primitives-color-warning-975: var(--primitives-color-oranje-975);
  --primitives-color-warning-1000: var(--primitives-color-oranje-1000);
  --primitives-color-critical-0: var(--primitives-color-rood-0);
  --primitives-color-critical-25: var(--primitives-color-rood-25);
  --primitives-color-critical-50: var(--primitives-color-rood-50);
  --primitives-color-critical-75: var(--primitives-color-rood-75);
  --primitives-color-critical-100: var(--primitives-color-rood-100);
  --primitives-color-critical-150: var(--primitives-color-rood-150);
  --primitives-color-critical-200: var(--primitives-color-rood-200);
  --primitives-color-critical-250: var(--primitives-color-rood-250);
  --primitives-color-critical-300: var(--primitives-color-rood-300);
  --primitives-color-critical-350: var(--primitives-color-rood-350);
  --primitives-color-critical-400: var(--primitives-color-rood-400);
  --primitives-color-critical-450: var(--primitives-color-rood-450);
  --primitives-color-critical-500: var(--primitives-color-rood-500);
  --primitives-color-critical-550: var(--primitives-color-rood-550);
  --primitives-color-critical-600: var(--primitives-color-rood-600);
  --primitives-color-critical-650: var(--primitives-color-rood-650);
  --primitives-color-critical-700: var(--primitives-color-rood-700);
  --primitives-color-critical-750: var(--primitives-color-rood-750);
  --primitives-color-critical-800: var(--primitives-color-rood-800);
  --primitives-color-critical-850: var(--primitives-color-rood-850);
  --primitives-color-critical-900: var(--primitives-color-rood-900);
  --primitives-color-critical-925: var(--primitives-color-rood-925);
  --primitives-color-critical-950: var(--primitives-color-rood-950);
  --primitives-color-critical-975: var(--primitives-color-rood-975);
  --primitives-color-critical-1000: var(--primitives-color-rood-1000);
  --primitives-color-mark-0: var(--primitives-color-donkergeel-0);
  --primitives-color-mark-25: var(--primitives-color-donkergeel-25);
  --primitives-color-mark-50: var(--primitives-color-donkergeel-50);
  --primitives-color-mark-75: var(--primitives-color-donkergeel-75);
  --primitives-color-mark-100: var(--primitives-color-donkergeel-100);
  --primitives-color-mark-150: var(--primitives-color-donkergeel-150);
  --primitives-color-mark-200: var(--primitives-color-donkergeel-200);
  --primitives-color-mark-250: var(--primitives-color-donkergeel-250);
  --primitives-color-mark-300: var(--primitives-color-donkergeel-300);
  --primitives-color-mark-350: var(--primitives-color-donkergeel-350);
  --primitives-color-mark-400: var(--primitives-color-donkergeel-400);
  --primitives-color-mark-450: var(--primitives-color-donkergeel-450);
  --primitives-color-mark-500: var(--primitives-color-donkergeel-500);
  --primitives-color-mark-550: var(--primitives-color-donkergeel-550);
  --primitives-color-mark-600: var(--primitives-color-donkergeel-600);
  --primitives-color-mark-650: var(--primitives-color-donkergeel-650);
  --primitives-color-mark-700: var(--primitives-color-donkergeel-700);
  --primitives-color-mark-750: var(--primitives-color-donkergeel-750);
  --primitives-color-mark-800: var(--primitives-color-donkergeel-800);
  --primitives-color-mark-850: var(--primitives-color-donkergeel-850);
  --primitives-color-mark-900: var(--primitives-color-donkergeel-900);
  --primitives-color-mark-925: var(--primitives-color-donkergeel-925);
  --primitives-color-mark-950: var(--primitives-color-donkergeel-950);
  --primitives-color-mark-975: var(--primitives-color-donkergeel-975);
  --primitives-color-mark-1000: var(--primitives-color-donkergeel-1000);

  /* typografie */
  --primitives-font-size-70: 0.79rem;
  --primitives-font-size-80: 0.889rem;
  --primitives-font-size-90: 1rem;
  --primitives-font-size-100: 1.125rem;
  --primitives-font-size-200: 1.266rem;
  --primitives-font-size-300: 1.424rem;
  --primitives-font-size-400: 1.602rem;
  --primitives-font-size-500: 1.802rem;
  --primitives-font-size-600: 2.027rem;
  --primitives-font-size-700: 2.280rem;
  --primitives-font-size-800: 2.566rem;
  --primitives-font-size-900: 2.887rem;
  --primitives-font-size-1000: 3.247rem;
  --primitives-line-height-loose: 1.75;
  --primitives-line-height-snug: 1.5;
  --primitives-line-height-tight: 1.25;
  --primitives-line-height-flat: 1.125;
}
/* Kleuren komen uit de NLDD-primitives (assets/css/nldd-primitives.css).
   Elke primitive is al een light-dark()-paar: stap N in light is stap
   1000-N in dark. Voor tekst en lijnen volstaat dus één stap. Achtergronden
   krijgen wel twee stappen: gespiegeld wit (stap 0) is zwart (stap 1000),
   en de pagina moet in dark de donkerste laag blijven. */
:root {
  color-scheme: light dark;

  /* Layout */
  --content-max-width: 1100px;
  --article-max-width: 800px;
  --navbar-height: 55px;

  /* Huisstijlkleuren: vaste merkkleuren, niet themagevoelig */
  --color-rijks-blauw: var(--primitives-color-reference-lintblauw);
  --color-rijks-oranje: var(--primitives-color-reference-oranje);
  --color-primary: var(--primitives-color-lintblauw-750);
  /* In dark stap 800 in plaats van de gespiegelde 650: die haalt op
     --color-bg-info geen 4,5:1 contrast (WCAG AA) */
  --color-link: light-dark(var(--primitives-color-lintblauw-650), var(--primitives-color-lintblauw-800));

  /* Achtergrondkleuren */
  --color-bg-page: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-50));
  --color-bg-hero: color-mix(in oklch, light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-100)) 92%, transparent);
  --color-bg-info: light-dark(var(--primitives-color-lintblauw-75), var(--primitives-color-lintblauw-200));
  --color-bg-muted: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-100));
  --color-bg-light: light-dark(var(--primitives-color-lintblauw-25), var(--primitives-color-neutral-100));

  /* Tekstkleuren */
  --color-text: var(--primitives-color-neutral-950);
  --color-text-heading: var(--primitives-color-neutral-950);
  --color-text-muted: var(--primitives-color-neutral-800);
  --color-text-inverse: #ffffff;
  --color-text-on-primary: light-dark(#ffffff, var(--primitives-color-neutral-100));

  /* Border kleur */
  --color-border: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));

  /* Markering van de zoekterm, NLDD's mark-semantiek (donkergeel) */
  --color-highlight: light-dark(var(--primitives-color-mark-100), var(--primitives-color-mark-200));
  --color-highlight-text: light-dark(var(--primitives-color-mark-900), var(--primitives-color-mark-800));

  /* Typography */
  --font-sans: "RijksSans", "Fira Sans", Arial, sans-serif;

  /* Font size */
  --text-base: 1rem;

  /* Border radius */
  --radius-upper-left: 2rem 0 0 0;
  --radius-upper-right: 0 2rem 0 0;
  --radius-bottom-right: 0 0 2rem 0;
  --radius-bottom-left: 0 0 0 2rem;

  /* Shadows */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
  }
}

:root[data-scheme="dark"] {
  color-scheme: dark;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
}

:root[data-scheme="light"] {
  color-scheme: light;
}

:root[data-scheme="dark"] {
  color-scheme: dark;
}
/* Styling voor MOZa-rapportage-pagina's (/documenten/rapportages/). Eén file
   voor base + alle badge-varianten en utilities die rapportages gebruiken;
   ongebruikte regels op een individuele rapportage zijn harmloos. */

* { box-sizing: border-box; }

/* Kleuren uit de NLDD-primitives (assets/css/nldd-primitives.css), zie het
   commentaar in tokens.css. Deze tokens gelden alleen voor de rapportages. */
:root {
  --rapport-bg: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-50));
  --rapport-surface: light-dark(var(--primitives-color-neutral-0), var(--primitives-color-neutral-100));
  --rapport-border: light-dark(var(--primitives-color-neutral-75), var(--primitives-color-neutral-200));
  --rapport-divider: light-dark(var(--primitives-color-neutral-25), var(--primitives-color-neutral-150));
  --rapport-text: var(--primitives-color-neutral-950);
  /* In dark een donkerder stap dan gespiegeld: 700 is daar te licht om als gedempt te lezen */
  --rapport-text-muted: light-dark(var(--primitives-color-neutral-700), var(--primitives-color-neutral-600));
  --rapport-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

body {
  font-family: var(--font-sans);
  font-feature-settings: 'liga' 1, 'calt' 1;
  background: var(--rapport-bg);
  margin: 0;
  padding: 24px;
  color: var(--rapport-text);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: 24px;
}

/* Header — drie kolommen: titel links, logo midden, meta rechts. Logo zit
 * ín het witte vlak met de bovenkant rakend aan de bovenkant van de card
 * (padding-top: 0); tekst staat top-aligned naast het logo. Rijkslogo bron:
 * github.com/MinBZK/storybook → src/components/navigation/top-navigation-bar/logo.svg */
.header {
  background: var(--rapport-surface);
  border-radius: 14px;
  padding: 0 32px 28px;
  margin-bottom: 24px;
  box-shadow: var(--rapport-shadow);
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

/* Titel en meta strekken zich uit tot de hoogte van het logo (align-items:
 * stretch) en duwen hun content naar onderen, zodat de onderkant van de
 * subtitle / meta-tekst uitkomt op de onderkant van het Rijkslogo. */
.header-title {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.header-brand {
  flex-shrink: 0;
  align-self: flex-end;
}
.header-brand svg {
  width: 50px;
  height: 100px;
  display: block;
}

.header h1 {
  margin: 0 0 6px 0;
  font-size: 1.75rem;
  color: var(--rapport-text);
  font-weight: 700;
}

.header .subtitle {
  margin: 0;
  color: var(--rapport-text);
  font-size: 1rem;
  /* 2px visueel naar beneden: zonder dit valt de descender van "januari" net
   * boven de onderkant van het logo. */
  transform: translateY(2px);
}

.header-meta {
  color: var(--rapport-text);
  font-size: 1.75rem;
  font-weight: 400;
  text-align: right;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: calc(1.2rem + 6px);
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }

  .header-meta {
    font-size: 1.25rem;
  }
}

@media (max-width: 600px) {
  body { padding: 12px 8px; }

  .header {
    flex-direction: column;
    align-items: center;
    padding: 0 16px 20px;
    gap: 12px;
  }

  .header-brand {
    order: -1;
    align-self: center;
  }

  .header-title {
    align-items: center;
    text-align: center;
  }

  .header-meta {
    text-align: center;
    font-size: 1.25rem;
    padding-bottom: 0;
  }

  .card-header,
  .item,
  .item-line,
  .item-content { min-width: 0; }

  .item { flex-wrap: wrap; }
}

/* Card */
.card {
  background: var(--rapport-surface);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--rapport-shadow);
}
/* Na de basisregel, anders wint de padding van 24px */
@media (max-width: 600px) {
  .card { padding: 12px; }
}

.card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rapport-border);
}

/* Grid-items mogen smaller worden dan hun brede inhoud (roadmap, plaat, tijdlijn); die scrollt dan zelf */
.grid > .card,
.componenten { min-width: 0; }

/* Visueel verborgen labels (position: absolute) binnen de scrollvlakken blijven daarbinnen */
.rm-wrap,
.cp-diagram-wrap,
.cp-roadmap-wrap { position: relative; }

.card-parkeerlijst { align-self: start; }

/* In een card ligt de roadmap op de card-achtergrond, niet op de pagina */
.card .rm-wrap {
  --rm-vlak: var(--rapport-surface);
  --rm-kop-bg: var(--rapport-divider);
}

/* Alleen tonen als roadmap, plaat of tijdlijn breder is dan het scherm */
.scroll-hint { display: none; }

@media (max-width: 800px) {
  .scroll-hint {
    display: block;
    margin: 0 0 0.5rem;
    font-size: var(--primitives-font-size-80);
    color: var(--rapport-text-muted);
  }
}

.grid-heading {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 24px;
  background: var(--rapport-surface);
  border-radius: 14px;
  box-shadow: var(--rapport-shadow);
  font-size: var(--primitives-font-size-200);
  font-weight: 700;
  color: var(--rapport-text);
}

/* Lopende tekst op leesbare breedte; roadmap, plaat en tijdlijnen houden de volle breedte */
.card-context > .summary { max-width: 50rem; }

.grid-divider {
  grid-column: 1 / -1;
  width: 100%;
  margin: 12px 0;
  border: 0;
  border-top: 1px solid var(--rapport-border);
}

.card-number {
  background: var(--primitives-color-accent-700);
  color: var(--primitives-color-accent-0);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.card-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--rapport-text);
  margin: 0;
}

/* Items */
.item {
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--rapport-divider);
}
.item:last-child { border-bottom: none; }
.item-content { flex: 1; min-width: 0; }

.item-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.item-number {
  color: var(--rapport-text);
  font-size: 0.875rem;
  font-weight: 500;
  flex-shrink: 0;
  min-width: 16px;
  text-align: right;
}

.item-title {
  font-weight: 600;
  color: var(--rapport-text);
  font-size: 1rem;
}

.item-description {
  margin: 4px 0 0 26px;
  font-size: 0.9375rem;
  color: var(--rapport-text);
  line-height: 1.5;
}
.item.no-number .item-description { margin-left: 0; }

/* Badge basis (badge-varianten staan in per-rapportage CSS) */
.badge {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  line-height: 1;
  min-width: 110px;
}

/* Badges: gevuld (stap 500, in beide thema's gelijk, dus vaste witte tekst)
   of getint (stap 100 met tekst op 700). Getint krijgt in dark stap 200:
   stap 100 is daar even licht als de card en valt weg. */
/* Bouwen en beproeven in hetzelfde blauw als "realisatie" in de roadmap */
.badge-bouwen,
.badge-beproeven { background: var(--primitives-color-accent-700); color: var(--primitives-color-accent-0); }
/* Verkennen en onderzoek in hetzelfde geel als "verkenning" in de roadmap */
.badge-verkennen { background: light-dark(var(--primitives-color-mark-100), var(--primitives-color-mark-200)); color: var(--primitives-color-mark-800); }
.badge-onderzoek { background: light-dark(var(--primitives-color-mark-100), var(--primitives-color-mark-200)); color: var(--primitives-color-mark-800); }
.badge-afspraken { background: light-dark(var(--primitives-color-violet-100), var(--primitives-color-violet-200)); color: var(--primitives-color-violet-700); }
.badge-risico { background: var(--primitives-color-critical-500); color: #ffffff; }
.badge-afhankelijkheid { background: var(--primitives-color-warning-500); color: #ffffff; }

/* Badge-varianten — status van werkzaamheid (status-rapportages) */
.badge-done { background: var(--primitives-color-success-500); color: #ffffff; }
.badge-done-issue { background: var(--primitives-color-critical-500); color: #ffffff; }
.badge-continuing { background: light-dark(var(--primitives-color-success-100), var(--primitives-color-success-200)); color: var(--primitives-color-success-800); }
.badge-progress { background: light-dark(var(--primitives-color-accent-100), var(--primitives-color-accent-200)); color: var(--primitives-color-accent-700); }
.badge-blocked { background: var(--primitives-color-critical-500); color: #ffffff; }
.badge-notstarted { background: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200)); color: var(--primitives-color-neutral-700); }
/* Grijs: groen staat elders voor beschikbaar en doorbouwen */
.badge-paused { background: light-dark(var(--primitives-color-neutral-100), var(--primitives-color-neutral-200)); color: var(--primitives-color-neutral-700); }

/* Utility: card over beide grid-kolommen voor blokken met meer gewicht */
.card-wide { grid-column: 1 / -1; }

/* Samenvatting-card heeft prose tekst i.p.v. items */
.summary {
  font-size: 0.9375rem;
  color: var(--rapport-text);
  line-height: 1.6;
  margin: 0;
}

.summary + .summary {
  margin-top: 0.75rem;
}

/* NLDD body-md-regular-snug */
.card-context .summary {
  font-size: var(--primitives-font-size-100);
  line-height: var(--primitives-line-height-snug);
}

/* ============================================================
   Details-elementen (roadmap, componentenoverzicht): gedeelde
   styling voor de <summary> en de chevron. De inhoud van elke
   sectie staat in roadmap.css en componentenoverzicht.css.
   ============================================================ */
.roadmap {
  display: block;
  margin-top: 1.5rem;
  min-width: 0;
}

.roadmap > summary,
.componenten > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--primitives-font-size-100);
  line-height: var(--primitives-line-height-tight);
  font-weight: 700;
  color: var(--rapport-text);
  padding: 0.75rem 0;
}

.roadmap > summary::-webkit-details-marker,
.componenten > summary::-webkit-details-marker { display: none; }

.details-chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}
.roadmap[open] > summary .details-chevron,
.componenten[open] > summary .details-chevron { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .details-chevron { transition: none; }
}

/* Print */
@media print {
  body { padding: 0; background: white; }

  /* Ingeklapte details tonen hun inhoud niet vanzelf: forceren voor de afdruk */
  .roadmap:not([open]) > :not(summary),
  .componenten:not([open]) > :not(summary) {
    display: block;
  }
}
/* Styling voor de roadmap-tabel (shortcode layouts/_shortcodes/roadmap.html).
   Gebruikt site-brede tokens uit tokens.css, geen --rapport-* variabelen: zo
   werkt de roadmap ook op een gewone pagina zonder rapportages.css. */

.rm-intro {
  font-size: var(--primitives-font-size-100);
  line-height: var(--primitives-line-height-snug);
  color: var(--color-text);
  margin: 0 0 1rem;
}

/* Het vlak waaronder de tabel ligt en de achtergrond van de kopregel. Op een
   rapportage ligt de tabel in een card; rapportages.css overschrijft ze daar. */
.rm-wrap {
  --rm-vlak: var(--color-bg-page);
  --rm-kop-bg: var(--color-bg-muted);
  min-width: 0;
}

/* Alleen scrollen waar de tabel niet past: een scrollcontainer zou de vaste kopregel breken */
@media (max-width: 900px) {
  .rm-wrap { overflow-x: auto; }
}

.rm-table {
  width: 100%;
  min-width: 48rem;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
  font-size: var(--primitives-font-size-90);
  line-height: var(--primitives-line-height-tight);
  color: var(--color-text);
}

.rm-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Kopregel blijft staan tot de tabel voorbij is; de schaduw dekt de ruimte tussen de cellen af */
.rm-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 700;
  padding: 0.5rem;
  background: var(--rm-kop-bg);
  border-radius: 6px;
  box-shadow: 0 0 0 4px var(--rm-vlak);
}

.rm-table thead th:first-child { width: 22%; }

.rm-table thead th.rm-fase {
  box-shadow: inset 0 -3px 0 var(--primitives-color-accent-700), 0 0 0 4px var(--rm-vlak);
}

/* Fase 5 loopt door in januari: lichtere streep onder het eerste kwartaal van 2027 */
.rm-table thead th.rm-fase-deel {
  box-shadow: inset 0 -3px 0 var(--primitives-color-accent-400), 0 0 0 4px var(--rm-vlak);
}

.rm-fase-label {
  display: block;
  font-weight: 400;
  color: var(--color-text-muted);
}

.rm-group th {
  text-align: left;
  font-size: var(--primitives-font-size-100);
  font-weight: 700;
  padding: 1.25rem 0.5rem 0.375rem;
  position: relative;
}

/* Streep alleen onder de kolom "Onderdeel" (die is 22% breed) */
.rm-group th::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 22%;
  height: 2px;
  background: var(--color-border);
}

.rm-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  vertical-align: middle;
}

/* height: 1px op de cel laat height: 100% op het blok werken */
.rm-table td {
  height: 1px;
  padding: 0;
  vertical-align: middle;
}

.rm-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  height: 100%;
  /* Ruimte voor het label plus twee regels tekst, zodat alle blokken even hoog zijn */
  min-height: 4.625rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
}

.rm-type { font-weight: 700; }

/* Zelfde kleuren als "verkenning" en "in aanbouw" in de plaat van het componentenoverzicht */
.rm-verkenning {
  background: light-dark(var(--primitives-color-mark-100), var(--primitives-color-mark-200));
  color: var(--primitives-color-mark-800);
}

.rm-realisatie {
  background: var(--primitives-color-accent-700);
  color: var(--primitives-color-accent-0);
}

/* Doorbouwen na de eerste livegang; groen, zoals "beschikbaar" in de plaat */
.rm-doorbouwen {
  background: var(--primitives-color-success-500);
  color: #ffffff;
}
/* Styling voor het componentenoverzicht (ingeklapte sectie op een
   rapportage-pagina). Alle selectors onder .componenten: voorkomt botsing
   met .card, .card-title, .item en .badge uit rapportages.css, vandaar de
   cp-prefix op alle klassen uit de geporte bron. */
.componenten {
  --cp-fs-lg: var(--primitives-font-size-200);
  --cp-fs-md: var(--primitives-font-size-100);
  --cp-fs-body: var(--primitives-font-size-90);
  --cp-fs-sm: var(--primitives-font-size-80);
  --cp-fs-xs: var(--primitives-font-size-70);
  --cp-lh-snug: var(--primitives-line-height-snug);
  --cp-lh-tight: var(--primitives-line-height-tight);
  --cp-lh-flat: var(--primitives-line-height-flat);

  display: block;
  margin-top: 1.5rem;
}


.componenten h3 {
  font-size: var(--cp-fs-lg);
  line-height: var(--cp-lh-tight);
  font-weight: 700;
  color: var(--rapport-text);
  margin: 2rem 0 1rem;
}
.componenten > h3:first-of-type { margin-top: 0.5rem; }

.componenten h4 {
  font-size: var(--cp-fs-md);
  line-height: var(--cp-lh-snug);
  font-weight: 700;
  color: var(--rapport-text);
  margin: 1.25rem 0 0.375rem;
}

.cp-intro p,
.cp-timeline-intro,
.cp-timeline-onderdelen,
.cp-waarde p,
.cp-timeline-afnemers p { max-width: 50rem; }

.cp-intro p {
  font-size: var(--cp-fs-md);
  line-height: var(--cp-lh-snug);
  color: var(--rapport-text);
  margin: 0;
}
.cp-intro p + p { margin-top: 0.75rem; }

.cp-nowrap { white-space: nowrap; }

/* === Diagram === */
.cp-diagram-card {
  background: var(--rapport-surface);
  border: 1px solid var(--rapport-border);
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: var(--rapport-shadow);
  margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
  .cp-diagram-card { padding: 0; border: 0; box-shadow: none; }
}
.cp-diagram-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}
.cp-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  font-size: var(--cp-fs-sm);
  color: var(--rapport-text-muted);
}
.cp-legend li { display: flex; align-items: center; gap: 0.5rem; }
.cp-legend-swatch { width: 18px; height: 14px; border-radius: 3px; border: 2px solid; background: var(--rapport-surface); flex-shrink: 0; }
.cp-legend-aanbouw { border-color: var(--primitives-color-accent-700); }
.cp-legend-verkenning { border-color: var(--primitives-color-mark-500); }
.cp-legend-beschikbaar { border-color: var(--primitives-color-success-500); }
.cp-legend-aandacht { border-color: var(--primitives-color-critical-500); }
.cp-legend-buitenscope { border-color: var(--rapport-border); }
.cp-diagram-wrap { width: 100%; min-width: 0; overflow-x: auto; }
.cp-diagram-wrap svg { width: 100%; height: auto; min-width: 820px; display: block; }

/* SVG-diagram: kleuren via klassen i.p.v. hardcoded hex, zodat dark mode meegaat */
.cp-dg-container { fill: none; stroke: var(--rapport-border); stroke-width: 1.5; stroke-dasharray: 6 6; }
.cp-dg-zone-label { fill: var(--rapport-text); font-size: 17px; font-weight: 600; }
.cp-dg-sub-container { fill: var(--color-bg-muted); stroke: var(--rapport-border); stroke-width: 1.5; }
.cp-dg-block-label { fill: var(--rapport-text-muted); font-size: 15px; font-weight: 600; font-style: italic; text-anchor: middle; }
.cp-dg-node { fill: var(--rapport-surface); stroke: var(--rapport-border); stroke-width: 1.5; }
.cp-dg-node.cp-beschikbaar { stroke: var(--primitives-color-success-500); stroke-width: 2.5; }
.cp-dg-node.cp-aanbouw { stroke: var(--primitives-color-accent-700); stroke-width: 2.5; }
.cp-dg-node.cp-verkenning { stroke: var(--primitives-color-mark-500); stroke-width: 2.5; }
.cp-dg-node.cp-aandacht { stroke: var(--primitives-color-critical-500); stroke-width: 2.5; }
.cp-dg-node.cp-buitenscope { stroke: var(--rapport-border); stroke-width: 2.5; }
.cp-dg-title { fill: var(--rapport-text); font-size: 15px; font-weight: 600; text-anchor: middle; }
.cp-dg-team-bg { fill: var(--color-bg-muted); stroke: var(--rapport-border); stroke-width: 1; }
.cp-dg-team { fill: var(--rapport-text-muted); font-size: 11px; font-weight: 600; }
.cp-dg-arrow { fill: none; stroke: var(--rapport-text-muted); stroke-width: 1.6; }
.cp-dg-arrow-head { fill: var(--rapport-text-muted); }
.cp-dg-icon-label { fill: var(--rapport-text); font-size: 12px; text-anchor: middle; }
.cp-dg-glyph { fill: none; stroke: var(--rapport-text-muted); stroke-width: 1.6; }
.cp-dg-person { fill: none; stroke: var(--rapport-text-muted); stroke-width: 1.8; }
.cp-dg-at { fill: var(--rapport-text-muted); }

/* === Tijdlijn per dienst === */
.cp-timeline-intro { font-size: var(--cp-fs-md); line-height: var(--cp-lh-snug); color: var(--rapport-text); margin: 0 0 0.5rem; }
.cp-timeline-onderdelen { margin: 0 0 1rem; padding-left: 1.25rem; font-size: var(--cp-fs-md); line-height: var(--cp-lh-tight); color: var(--rapport-text); }
.cp-timeline-onderdelen li { margin-bottom: 0.2rem; }
.cp-timeline-onderdelen li:last-child { margin-bottom: 0; }

.cp-timeline-afnemers { margin: 0 0 1.25rem; }
.cp-timeline-afnemers p { margin: 0; font-size: var(--cp-fs-md); line-height: var(--cp-lh-snug); color: var(--rapport-text); }
.cp-timeline-afnemers p + p { margin-top: 0.5rem; }

.cp-waarde { margin: 0 0 1.25rem; }
.cp-waarde p { margin: 0; font-size: var(--cp-fs-md); line-height: var(--cp-lh-snug); color: var(--rapport-text); }

.cp-roadmap-kop { margin-bottom: 0.75rem; }
.cp-roadmap-wrap { overflow-x: auto; min-width: 0; max-width: 100%; padding-bottom: 0.375rem; }
.cp-roadmap {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 900px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  grid-template-rows: repeat(8, auto);
  column-gap: 0;
}
.cp-rm-lane { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; }
.cp-rm-node { grid-row: 1; position: relative; text-align: center; padding-top: 2.25rem; padding-bottom: 0.875rem; }
.cp-rm-node::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 2px; background: var(--rapport-border); }
.cp-rm-lane:first-child .cp-rm-node::before { left: 50%; }
.cp-rm-lane:last-child .cp-rm-node::before { right: 50%; }
.cp-rm-dot {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--rapport-border); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 4px var(--rapport-surface); z-index: 1;
}
.cp-h-onzeker .cp-rm-dot { background: var(--primitives-color-warning-700); color: #fff; }
.cp-h-niet .cp-rm-dot { background: var(--primitives-color-critical-500); }
.cp-h-onzeker .cp-rm-dot::after { content: "!"; }
.cp-h-niet .cp-rm-dot::after { content: "!"; }
.cp-rm-date { display: inline-block; font-size: var(--cp-fs-sm); font-weight: 700; color: var(--rapport-text); background: var(--color-bg-muted); border-radius: 999px; padding: 0.1875rem 0.75rem; }

.cp-rm-col {
  grid-row: 2 / -1; display: grid; grid-template-rows: subgrid; align-items: start;
  margin: 0 0.5rem; background: var(--rapport-surface); border: 1px solid var(--rapport-border);
  border-top: 3px solid var(--rapport-border); border-radius: 10px; padding: 0.875rem 0.9375rem 0.5rem;
}
.cp-h-onzeker .cp-rm-col { border-top-color: var(--primitives-color-warning-700); }
.cp-h-niet .cp-rm-col { border-top-color: var(--primitives-color-critical-500); }

.cp-rm-status, .cp-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cp-rm-func { font-size: var(--cp-fs-sm); font-weight: 700; color: var(--rapport-text); margin: 0 0 0.375rem; }
.cp-rm-item { padding: 0.5rem 0; border-top: 1px solid var(--rapport-divider); }
.cp-rm-label { display: block; font-size: var(--cp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rapport-text); margin-bottom: 0.25rem; }
.cp-rm-val { display: block; font-size: var(--cp-fs-sm); color: var(--rapport-text); }
.cp-rm-val ul { margin: 0; padding-left: 1.125rem; }
.cp-rm-val ul li { margin-bottom: 0.1875rem; }
.cp-rm-val ul li:last-child { margin-bottom: 0; }

.cp-rm-obstakels { padding: 0.5rem 0; border-top: 1px solid var(--rapport-divider); }
.cp-rm-obstakels-label { display: block; font-size: var(--cp-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.25rem; }
.cp-rm-obstakels ol { margin: 0; padding-left: 1.125rem; font-size: var(--cp-fs-sm); font-weight: 600; }
.cp-rm-obstakels li { margin-bottom: 0.25rem; }
.cp-rm-obstakels li:last-child { margin-bottom: 0; }
.cp-h-niet .cp-rm-obstakels-label, .cp-h-niet .cp-rm-obstakels ol { color: var(--primitives-color-critical-500); }
.cp-h-onzeker .cp-rm-obstakels-label, .cp-h-onzeker .cp-rm-obstakels ol { color: var(--primitives-color-warning-700); }
.cp-rm-item-leeg { border-top: none; padding: 0; }
.cp-wijziging { background: var(--color-highlight); color: var(--color-highlight-text); border-radius: 3px; padding: 0 0.25rem; font-weight: 600; }

/* Print */
@media print {
  .cp-roadmap { min-width: 0; }
  .cp-rm-lane { break-inside: avoid; }
}
/* Sluitknop op rapportage-pagina's (rechtsboven, blijft staan bij het scrollen) */
.moza-nav {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rapport-surface);
  color: var(--rapport-text);
  border: 1px solid var(--rapport-border);
  border-radius: 999px;
  box-shadow: var(--rapport-shadow);
  padding: 0;
  cursor: pointer;
}

.moza-nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

.moza-nav:hover {
  background: var(--color-bg-muted);
}

.moza-nav:focus-visible {
  outline: 2px solid var(--primitives-color-accent-700);
  outline-offset: 2px;
}

@media print {
  .moza-nav { display: none !important; }
}