/* 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);
}
/* 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;
}
/* 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;
}
/* Verberg tekst visueel, maar houd toegankelijk voor screenreaders */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
user-select: none;
}
body {
font-family: var(--font-sans);
font-size: 1.2rem;
line-height: 1.4;
color: var(--color-text);
overflow-wrap: break-word;
}
img {
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: 1.2;
margin-top: 2rem;
margin-bottom: 0.8rem;
}
h1 {
font-size: 2rem;
margin-top: 0.5rem;
}
h1 + h2 {
margin-top: 1.5rem;
}
article > header + h2 {
margin-top: 0.7rem;
}
article > header:has(.tag-status) + h2 {
margin-top: 1.5rem;
}
h2 + h3,
h3 + h4,
h4 + h5,
h5 + h6 {
margin-top: 1rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.4rem;
}
h5 {
font-size: 1.3rem;
}
h6 {
font-size: 1.25rem;
}
p {
margin: 0;
margin-bottom: 1rem;
}
a {
color: var(--color-link);
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:focus-visible {
outline: 2px solid var(--color-link);
outline-offset: 2px;
}
}
/* `:where()` houdt de specificiteit op die van `a`, zodat componenten met een
eigen linkstijl blijven winnen. */
:where(main :is(p, dd, td, blockquote, :is(ul, ol):not([class]) > li)) a:where(:not([class])) {
text-decoration: underline;
}
.footnote-backref {
text-decoration: underline;
}
a[rel~="private"]::after {
content: "";
display: inline-block;
width: 0.85em;
height: 0.85em;
margin-left: 0.1em;
background-color: currentColor;
mask-image: url("/images/icons/lock.svg");
mask-size: contain;
mask-repeat: no-repeat;
vertical-align: -0.1em;
}
p + ul,
p + ol {
margin-top: -0.5rem;
}
ul,
ol {
padding-left: 1.1rem;
margin-top: 0;
margin-bottom: 1.5rem;
list-style: disc;
}
ol {
list-style: decimal;
}
li {
margin-bottom: 0.5rem;
> ul,
> ol {
margin-top: 0.5rem;
margin-bottom: 0;
}
}
strong,
b {
font-weight: 700;
}
mark {
background-color: var(--color-highlight);
color: var(--color-highlight-text);
}
.semibold {
font-weight: 600;
}
code {
background: var(--color-bg-muted);
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-size: 0.875em;
overflow-wrap: anywhere;
}
pre {
background: var(--color-bg-muted);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-bottom: 1rem;
code {
background: none;
padding: 0;
}
}
hr {
border: none;
height: 2px;
background: var(--color-border);
margin: 2rem 0;
}
nav ul,
nav ol {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0;
background-color: var(--color-bg-page);
}
/* Skip link voor toegankelijkheid */
.skip-link {
position: absolute;
top: -50px;
left: 0;
background: var(--color-rijks-blauw);
color: var(--color-text-inverse);
padding: 0.5rem 1rem;
z-index: 100;
&:focus {
top: 0.5rem;
left: 0.5rem;
}
}
/* Focusbaar gemaakt via tabindex in baseof.html. */
main:focus {
outline: none;
}
main {
flex-grow: 1;
padding-top: 2rem;
}
main:has(.hero) {
padding-top: 0;
}
main > section,
main > article,
main > .content {
width: 100%;
max-width: var(--content-max-width);
margin-left: auto;
margin-right: auto;
padding: 1rem;
padding-top: 0;
}
main > article > * {
max-width: var(--article-max-width);
}
.article-layout {
max-width: var(--article-max-width);
margin-left: auto;
margin-right: auto;
}
article > footer {
margin-top: 2.5rem;
}
/* De rechterkolom (inhoudsopgave, downloads, relevante links) staat in
components/page-aside.css. */
header {
.banner {
position: relative;
background-color: var(--color-bg-page);
padding-bottom: 1rem;
.site-info {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: left;
@media (min-width: 600px) {
display: block;
left: 1rem;
}
@media (min-width: 1100px) {
left: calc(50% - var(--content-max-width) / 2 + 1rem);
}
p {
margin: 0;
}
.title {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.3;
color: var(--color-text-heading);
a {
color: var(--color-text-heading);
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.tagline {
font-family: var(--font-sans);
font-size: 1.1rem;
font-style: italic;
line-height: 1.3;
color: var(--color-text-heading);
}
}
.site-logo {
width: fit-content;
margin: 0 auto;
img {
display: block;
}
}
}
.navbar {
display: flex;
flex-wrap: wrap;
align-items: center;
min-height: var(--navbar-height);
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 1rem;
background-color: var(--color-rijks-blauw);
box-shadow: 0 0 0 100vmax var(--color-rijks-blauw);
clip-path: inset(0 -100vmax);
color: var(--color-text-inverse);
a {
color: var(--color-text-inverse);
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:focus-visible {
outline: 2px solid var(--color-text-inverse);
outline-offset: 2px;
}
&.active {
font-weight: 700;
text-decoration: underline;
}
}
li {
margin-bottom: 0;
}
.title {
flex: 1;
min-width: 0;
font-size: 1.25rem;
font-weight: 700;
line-height: var(--navbar-height);
text-decoration: none;
/* Op een smal scherm krimpt de titel, zodat zoeken en menu op dezelfde regel blijven */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-self: flex-start;
@media (min-width: 600px) {
display: none;
}
}
.menu {
display: none;
flex: 1;
align-items: center;
ul {
display: flex;
font-size: 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-right: 1.5rem;
white-space: nowrap;
a[data-text] {
display: inline-flex;
flex-direction: column;
align-items: center;
&::after {
content: attr(data-text);
content: attr(data-text) / "";
height: 0;
visibility: hidden;
overflow: hidden;
user-select: none;
pointer-events: none;
font-weight: 700;
}
}
}
}
.navbar-right {
display: none;
margin-left: auto;
padding: 0;
list-style: none;
font-size: 1.25rem;
@media (min-width: 768px) {
display: flex;
}
.search-trigger {
display: inline-flex;
align-items: center;
gap: 0.4rem;
/* Negatieve marge: de tekst blijft uitgelijnd, de hovertint krijgt ruimte */
margin: -0.25rem -0.5rem;
padding: 0.25rem 0.5rem;
background: none;
border: none;
font: inherit;
color: var(--color-text-inverse);
svg {
width: 1.25rem;
height: 1.25rem;
}
&:hover {
background-color: color-mix(in oklch, var(--color-text-inverse) 10%, transparent);
}
&:focus-visible {
outline: 2px solid var(--color-text-inverse);
outline-offset: 2px;
}
}
}
.mobile-search,
.toggle {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
background: transparent;
border: none;
color: var(--color-text-inverse);
min-height: var(--navbar-height);
align-self: flex-start;
&:hover {
background-color: color-mix(in oklch, var(--color-text-inverse) 10%, transparent);
}
&:focus-visible {
outline: 2px solid var(--color-text-inverse);
outline-offset: 2px;
}
@media (min-width: 768px) {
display: none;
}
}
.mobile-search {
margin-left: auto;
}
.toggle {
margin-left: 0.5rem;
margin-right: -0.5rem;
svg {
width: 1.5rem;
height: 1.5rem;
}
}
.mobile {
display: none;
width: 100%;
padding: 1rem 0 0.25rem;
ul {
display: flex;
flex-direction: column;
font-size: 1.25rem;
}
li {
display: block;
}
a,
a[href^="http"] {
display: flex;
align-items: baseline;
position: relative;
padding: 0.75rem 0;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: color-mix(in oklch, var(--color-text-inverse) 20%, transparent);
box-shadow: -100vw 0 0 color-mix(in oklch, var(--color-text-inverse) 20%, transparent), 100vw 0 0 color-mix(in oklch, var(--color-text-inverse) 20%, transparent);
}
}
li:first-child a::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: color-mix(in oklch, var(--color-text-inverse) 20%, transparent);
box-shadow: -100vw 0 0 color-mix(in oklch, var(--color-text-inverse) 20%, transparent), 100vw 0 0 color-mix(in oklch, var(--color-text-inverse) 20%, transparent);
}
li:last-child a::after {
display: none;
}
.mobile-second-nav {
margin-top: 0.25rem;
li:first-child a::before {
display: none;
}
li:not(:first-child) a {
padding-left: 1rem;
}
.mobile-subnav-child {
margin-left: 1rem;
}
a.bold {
font-weight: 700;
}
}
}
.toggle[aria-expanded="true"] ~ .mobile {
display: block;
}
@media (min-width: 768px) {
.menu {
display: flex;
}
.toggle {
display: none;
}
.mobile,
.toggle[aria-expanded="true"] ~ .mobile {
display: none;
}
}
}
/* Second nav - alleen op desktop */
.navbar-sub {
display: none;
background-color: var(--color-bg-info);
border-bottom: 1px solid var(--color-border);
box-shadow: 0 0 0 100vmax var(--color-bg-info);
clip-path: inset(0 -100vmax);
color: var(--color-text);
@media (min-width: 768px) {
display: flex;
}
> ul {
display: flex;
gap: 0 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
a {
color: var(--color-text);
font-size: 1.125rem;
&:focus-visible {
outline-color: var(--color-primary);
}
&.bold {
font-weight: 700;
}
&.active {
font-weight: 700;
text-decoration: underline;
}
}
.has-subnav {
display: flex;
align-items: center;
gap: 0.25rem;
}
.subnav-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
font-weight: inherit;
color: var(--color-text);
transition: transform 0.2s ease;
&:hover {
color: var(--color-primary);
}
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 0;
}
.icon-expand {
width: 1rem;
height: 1rem;
}
&[aria-expanded="true"] .icon-expand {
transform: rotate(180deg);
}
}
.in-section,
.has-subnav:has(.subnav-toggle[aria-expanded="true"]) {
background-color: var(--color-bg-muted);
margin: -0.25rem -0.5rem;
padding: 0.25rem 0.5rem;
border-radius: 2px;
}
}
/* Third nav - uitklapbaar panel, alleen op desktop */
.subnav-panel {
display: none;
background-color: var(--color-bg-muted);
box-shadow: 0 0 0 100vmax var(--color-bg-muted);
clip-path: inset(0 -100vmax);
margin-top: -0.75rem;
@media (min-width: 768px) {
display: block;
}
&[hidden] {
display: none;
}
ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1.5rem;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0.4rem 1rem 0rem;
list-style: none;
}
a {
color: var(--color-text);
font-size: 1rem;
text-decoration: none;
&:hover {
text-decoration: underline;
}
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
&.subnav-panel-parent {
font-weight: 600;
}
&.current {
font-weight: 700;
text-decoration: underline;
}
}
}
}
.hero {
position: relative;
height: 300px;
width: 100%;
overflow: hidden;
@media (min-width: 1100px) {
height: 350px;
}
img {
height: 100%;
width: 100%;
object-fit: cover;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 1rem;
padding: 1.25rem 1.5rem;
margin-left: -0.6rem;
background-color: var(--color-bg-hero);
border-radius: var(--radius-bottom-right);
@media (min-width: 900px) {
width: clamp(450px, 40vw, 550px);
}
@media (min-width: 1100px) {
left: calc(50% - var(--content-max-width) / 2);
}
}
h1 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
@media (min-width: 640px) {
font-size: 1.75rem;
}
@media (min-width: 768px) {
font-size: 2rem;
margin-bottom: 0.5rem;
}
}
}
main > .hero + .content {
padding-top: 2rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
@media (min-width: 640px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
width: 100%;
header {
img {
height: 2.5rem;
object-fit: contain;
}
h2 {
position: relative;
margin: 0;
font-size: 1.1em;
a {
&::after {
content: "";
position: absolute;
inset: 0;
}
&:focus-visible {
outline: none;
}
&:focus-visible::after {
box-shadow: 0 0 0 2px var(--color-primary);
outline: 2px solid transparent;
outline-offset: 2px;
}
}
}
}
p {
padding-top: 0.5rem;
}
}
.box {
padding: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
background-color: var(--color-bg-page);
header {
margin-bottom: 1rem;
h2,
h3 {
font-size: 1.8rem;
margin: 0;
a {
color: var(--color-text-heading);
}
}
}
.content {
overflow: auto;
ol {
padding-left: 1.4rem;
}
h2 {
font-size: 1.5rem;
&:first-child {
margin-top: 0.5rem;
}
}
p,
ul,
ol {
&:last-child {
margin-bottom: 0;
}
}
}
.button,
.button-outline {
display: block;
width: fit-content;
margin: 1rem auto 0;
}
}
/* Afbeelding die een .box-kaart vult: tot de randen met afgeronde bovenhoeken die op de kaartrand aansluiten. */
.box-image {
display: block;
margin: -1.5rem -1.5rem 1rem;
}
.box-image img {
display: block;
width: 100%;
height: auto;
border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
}
@media (max-width: 600px) {
.box {
padding-left: 1rem;
padding-right: 1rem;
}
.box-image {
margin-left: -1rem;
margin-right: -1rem;
}
}
/* Standaard button styling */
button,
.button {
display: inline-block;
padding: 0.5rem 1.5rem;
font: inherit;
font-weight: 600;
text-decoration: none;
border-radius: 0.25rem;
transition: all 0.15s ease;
background-color: light-dark(var(--color-bg-info), var(--color-text));
color: light-dark(var(--color-text), var(--color-bg-page));
border: 1px solid light-dark(var(--color-bg-info), var(--color-text));
&:hover {
text-decoration: none;
}
&:hover,
&:focus-visible {
background-color: var(--color-rijks-blauw);
border-color: var(--color-rijks-blauw);
color: var(--color-text-inverse);
outline: none;
}
flex-shrink: 0;
svg {
width: 1.25rem;
height: 1.25rem;
}
}
a.button {
cursor: default;
}
/* Outline variant */
.button-outline {
background-color: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
&:hover,
&:focus-visible {
background-color: var(--color-primary);
color: var(--color-text-on-primary);
}
}
/* Ghost variant - transparant en subtiel */
.button-ghost {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
background: transparent;
border: none;
border-radius: 0;
color: var(--color-text-muted);
&:hover,
&:focus-visible {
background: transparent;
border: none;
color: var(--color-text);
}
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
/* Link variant - button die eruitziet als een link */
.button-link {
display: inline;
padding: 0;
background: none;
border: none;
border-radius: 0;
font: inherit;
font-weight: inherit;
color: var(--color-link);
cursor: pointer;
text-decoration: none;
&:hover {
background: none;
border: none;
color: var(--color-link);
text-decoration: underline;
}
&:focus-visible {
background: none;
border: none;
color: var(--color-link);
outline: 2px solid var(--color-link);
outline-offset: 2px;
}
}
blockquote {
background: var(--color-bg-light);
border-radius: var(--radius-upper-left);
padding: 1rem 1.5rem;
margin: 1rem 0;
p:last-child {
margin-bottom: 0;
}
}
blockquote.quote {
font-style: italic;
}
blockquote.callout {
display: flex;
flex-direction: column;
margin-bottom: 2rem;
padding: 1rem;
padding-bottom: 0;
border-radius: var(--radius-upper-right);
background-color: var(--color-bg-info);
header {
display: flex;
align-items: center;
gap: 0.5rem;
svg {
width: 24px;
height: 24px;
}
.title {
font-size: 1.7rem;
font-weight: 600;
}
}
.content {
display: flex;
flex-direction: column;
padding-top: 0.5rem;
padding-bottom: 1rem;
h2 {
margin-top: 0;
}
p {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
ul,
ol {
padding-left: 1.4rem;
}
}
&:not(:has(header)) .content {
padding-top: 0;
}
&:has(header):not(:has(.title)) {
flex-direction: row;
align-items: flex-start;
gap: 0.5rem;
padding-bottom: 1rem;
header {
flex-shrink: 0;
margin-top: calc((1lh - 24px) / 2);
}
.content {
padding-top: 0;
padding-bottom: 0;
}
}
}
/* Grote uitgelichte pull-quote: ...
*/
.pull-quote {
margin: 2.5rem auto;
max-width: var(--article-max-width);
padding: 0.25rem 0 0.25rem 2rem;
border-left: 4px solid var(--color-rijks-oranje);
}
.pull-quote blockquote {
margin: 0;
padding: 0;
background: none;
border-radius: 0;
font-family: var(--font-sans);
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
line-height: 1.35;
font-style: italic;
color: var(--color-text-heading);
}
.pull-quote figcaption {
margin-top: 1rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--color-text-muted);
}
.pull-quote figcaption::before {
content: "— ";
}
/* Afbeelding met onderschrift. Generiek: geldt voor elke / in content. */
figure {
margin: 0;
}
figure img {
display: block;
max-width: 100%;
height: auto;
}
figcaption {
margin-top: 0.5rem;
font-size: 0.95rem;
color: var(--color-text-muted);
}
.list {
list-style: none;
padding: 0;
margin: 0;
li {
padding: 0.5rem 0;
border-bottom: 1px solid var(--color-border);
&:last-child {
border-bottom: none;
}
}
a {
display: block;
}
}
body > footer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 2rem 1rem 1rem;
background-color: var(--color-rijks-blauw);
box-shadow: 0 0 0 100vmax var(--color-rijks-blauw);
clip-path: inset(0 -100vmax);
color: var(--color-text-inverse);
a:focus-visible {
outline-color: var(--color-text-inverse);
outline-offset: 1px;
}
&:has(.page-meta) {
padding-top: 0.75rem;
}
.page-meta {
flex-basis: 100%;
margin-bottom: 1.5rem;
font-size: var(--text-base);
line-height: 1.6;
.breadcrumb,
.breadcrumb ol,
.breadcrumb li {
display: inline;
}
ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: var(--color-text-inverse);
&::before {
content: none;
}
}
.separator {
display: inline-block;
width: 0.5em;
height: 0.5em;
margin: 0 0.5em;
border-right: 2px solid var(--color-text-inverse);
border-bottom: 2px solid var(--color-text-inverse);
transform: rotate(-45deg);
vertical-align: middle;
opacity: 0.6;
}
.current {
opacity: 0.8;
}
.lastmod {
margin: 0;
opacity: 0.8;
}
.breadcrumb + .lastmod {
margin-left: 0.35em;
}
}
.tagline {
font-family: var(--font-sans);
font-size: 1.5rem;
line-height: 1.2;
font-style: italic;
color: var(--color-text-inverse);
}
.footer-columns {
display: flex;
flex-direction: column;
gap: 1rem;
}
nav {
text-align: left;
}
h2 {
margin: 0 0 0.25rem;
font-size: 1.5rem;
font-weight: 400;
}
ul {
font-size: 1.125rem;
}
li {
margin-bottom: 0.25rem;
}
a {
display: inline-block;
color: var(--color-text-inverse);
&::before {
content: "";
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-right: 0.4em;
margin-bottom: 0.1em;
border-right: 2px solid var(--color-text-inverse);
border-bottom: 2px solid var(--color-text-inverse);
transform: rotate(-45deg);
}
}
.footer-settings {
flex-basis: 100%;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid color-mix(in oklch, var(--color-text-inverse) 30%, transparent);
font-size: 1rem;
.theme-menu {
position: relative;
> button {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.5rem;
font: inherit;
color: var(--color-text-inverse);
background: transparent;
border: 1px solid color-mix(in oklch, var(--color-text-inverse) 50%, transparent);
border-radius: 0.25rem;
&:hover {
background-color: color-mix(in oklch, var(--color-text-inverse) 10%, transparent);
}
&:focus-visible {
outline: 2px solid var(--color-text-inverse);
outline-offset: 2px;
}
/* Het menu klapt naar boven open, dus de pijl staat dicht omhoog */
.icon-expand {
width: 1rem;
height: 1rem;
transform: rotate(180deg);
}
&[aria-expanded="true"] .icon-expand {
transform: none;
}
}
ul {
position: absolute;
bottom: calc(100% + 0.25rem);
left: 0;
min-width: 10rem;
margin: 0;
padding: 0.25rem 0;
list-style: none;
font-size: 1rem;
color: var(--color-text);
background-color: var(--color-bg-page);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
box-shadow: var(--shadow-card);
}
li {
margin: 0;
}
[role="menuitemradio"] {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.4rem 0.75rem 0.4rem 0.5rem;
font: inherit;
color: inherit;
text-align: left;
background: none;
border: none;
/* Vaste ruimte voor het vinkje, zodat de labels uitlijnen */
&::before {
content: "";
width: 1em;
height: 0.5em;
flex-shrink: 0;
}
&[aria-checked="true"]::before {
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-0.15em) rotate(-45deg);
}
&:hover,
&:focus-visible {
background-color: var(--color-bg-muted);
outline: none;
}
}
}
}
@media (min-width: 700px) {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
.tagline {
margin-bottom: 0;
}
.footer-columns {
flex-direction: row;
gap: 3rem;
nav {
min-width: 10rem;
}
}
}
}
/* Toast - floating notification component */
.toast {
position: fixed;
left: 0.5rem;
right: 0.5rem;
bottom: 0.5rem;
padding: 0.75rem 1rem;
font-family: var(--font-sans);
font-size: 0.9375rem;
color: var(--color-text);
background-color: var(--color-bg-page);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 100;
text-align: center;
@media (min-width: 600px) {
left: 50%;
right: auto;
bottom: 1rem;
transform: translateX(-50%);
max-width: calc(100% - 2rem);
white-space: nowrap;
text-align: left;
}
}
.toast[hidden] {
display: none;
}
/* Interactive toast (button) */
button.toast {
&:hover,
&:focus-visible {
background-color: light-dark(var(--color-rijks-blauw), var(--color-text));
border-color: light-dark(var(--color-rijks-blauw), var(--color-text));
color: light-dark(var(--color-text-inverse), var(--color-bg-page));
}
}
/* Search modal */
.search-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
border: none;
background: transparent;
max-width: 100%;
max-height: 100%;
}
.search-modal::backdrop {
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
}
.search-modal[open] {
display: flex;
align-items: flex-start;
justify-content: center;
padding: 5vh 0;
}
.search-modal-content {
display: flex;
flex-direction: column;
width: calc(100% - 2rem);
max-width: 800px;
max-height: 90vh;
background-color: var(--color-bg-page);
border: 1px solid var(--color-border);
border-radius: 0.25rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
/* Modal header with search input */
.search-modal-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem 0.5rem;
flex-shrink: 0;
}
/* Search filters */
.search-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.25rem 1rem 0.5rem;
flex-shrink: 0;
}
/* Search filter buttons - erft van .button, alleen afwijkende styling */
.search-filter {
padding: 0.25rem 0.625rem;
font-size: 0.9375rem;
font-weight: normal;
white-space: nowrap;
background-color: var(--color-bg-muted);
border-color: var(--color-bg-muted);
color: var(--color-text);
}
.search-filter.active {
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-on-primary);
font-weight: 600;
}
/* Border alleen tonen als er resultaten zijn - tekstbreed */
.search-results:not(:empty) {
position: relative;
}
.search-results:not(:empty)::before {
content: "";
position: absolute;
top: 0;
left: 1rem;
right: 1rem;
height: 1px;
background-color: var(--color-border);
}
.search-modal-header .search-icon {
width: 1.25rem;
height: 1.25rem;
color: var(--color-text-muted);
flex-shrink: 0;
}
.search-modal .search-input {
flex: 1;
padding: 0.5rem 0;
font-size: 1.125rem;
font-family: var(--font-sans);
color: var(--color-text);
background: transparent;
border: none;
outline: none;
}
.search-modal .search-input::placeholder {
color: var(--color-text-muted);
}
.search-modal .search-input::-webkit-search-cancel-button {
display: none;
}
/* Search results in modal */
.search-modal .search-results {
flex: 1;
min-height: 0;
overflow-y: auto;
list-style: none;
margin: 0;
padding: 0;
}
.search-result-item {
display: block;
position: relative;
padding: 0.875rem 1rem;
text-decoration: none;
color: var(--color-text);
transition: background-color 0.15s ease;
}
/* Tekstbrede divider via ::after */
.search-result-item::after {
content: "";
position: absolute;
bottom: 0;
left: 1rem;
right: 1rem;
height: 1px;
background-color: var(--color-border);
transition: background-color 0.15s ease;
}
.search-results li:last-child .search-result-item::after {
display: none;
}
.search-result-item:hover,
.search-result-item:focus-visible {
background-color: var(--color-bg-info);
text-decoration: none;
outline: none;
}
.search-result-item:hover::after,
.search-result-item:focus-visible::after {
background-color: var(--color-bg-info);
}
/* Divider van vorig item meekleuren bij hover */
.search-results li:has(+ li .search-result-item:hover) .search-result-item::after,
.search-results li:has(+ li .search-result-item:focus-visible) .search-result-item::after {
background-color: var(--color-bg-page);
}
.search-result-title {
display: block;
font-weight: 700;
font-size: 1.125rem;
margin-bottom: 0.25rem;
color: var(--color-text);
overflow-wrap: break-word;
}
.search-result-snippet {
display: block;
font-size: 1rem;
color: var(--color-text);
line-height: 1.5;
margin-top: 0.25rem;
overflow-wrap: break-word;
}
.search-result-snippet mark,
.search-result-title mark {
background-color: var(--color-highlight);
color: var(--color-highlight-text);
}
.search-no-results {
padding: 2rem 1rem;
color: var(--color-text);
text-align: center;
}
/* Responsive adjustments for small screens */
@media (max-width: 480px) {
.search-modal[open] {
padding: 2vh 0;
}
.search-modal-content {
width: calc(100% - 1rem);
max-height: 96vh;
}
}
/* Highlight bar - uses toast component */
#highlight-bar-query {
font-weight: 700;
}
/* Pre-rendered SVG diagrammen */
.mermaid-diagram {
position: relative;
text-align: center;
background-color: var(--color-bg-muted);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
overflow: hidden;
}
.mermaid-diagram img {
max-width: 100%;
height: auto;
margin-inline: auto;
}
.mermaid-diagram .mermaid-img--light {
display: block;
}
.mermaid-diagram .mermaid-img--dark {
display: none;
}
:root[data-scheme="dark"] .mermaid-diagram .mermaid-img--light {
display: none;
}
:root[data-scheme="dark"] .mermaid-diagram .mermaid-img--dark {
display: block;
}
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) .mermaid-diagram .mermaid-img--light {
display: none;
}
:root:not([data-scheme="light"]) .mermaid-diagram .mermaid-img--dark {
display: block;
}
}
/* Download-knop */
.mermaid-download {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 1;
border-radius: 0.25rem;
}
/* Handgetekende SVG-diagrammen in de content. */
.diagram {
position: relative;
margin: 1.5rem 0;
}
.diagram-panel {
padding: 1rem;
background-color: var(--color-bg-muted);
border-radius: 0.5rem;
overflow-x: auto;
}
.diagram-download {
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 1;
border-radius: 0.25rem;
}
.diagram-panel > svg {
display: block;
width: 100%;
min-width: 620px;
height: auto;
color: var(--color-text-muted);
}
.dg-zone,
.dg-block,
.dg-node {
stroke-width: 1.5;
}
.dg-block,
.dg-node {
stroke: var(--color-border);
}
.dg-zone {
fill: none;
stroke: var(--color-text-muted);
stroke-opacity: 0.5;
stroke-dasharray: 6 6;
}
.dg-block {
fill: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04));
}
.dg-node {
fill: var(--color-bg-page);
}
.dg-node.accent {
stroke: var(--color-primary);
stroke-width: 2.5;
}
.dg-arrow,
.dg-glyph {
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
.dg-glyph-text,
.dg-marker {
fill: currentColor;
}
.dg-arrow.optioneel {
stroke-dasharray: 5 4;
}
.dg-zone-label,
.dg-block-label,
.dg-icon-label,
.dg-person-label {
fill: var(--color-text);
}
.dg-zone-label,
.dg-block-label {
font-size: 19px;
font-weight: 600;
text-anchor: middle;
}
.dg-glyph-text {
font-size: 24px;
font-weight: 600;
text-anchor: middle;
}
.dg-icon-label {
font-size: 15px;
text-anchor: middle;
}
.dg-person-label {
font-size: 17px;
font-weight: 600;
text-anchor: end;
}
.dg-title {
fill: var(--color-text-heading);
font-size: 16px;
font-weight: 600;
text-anchor: middle;
}
.page-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.page-nav a {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem 1rem;
text-decoration: none;
border: 1px solid var(--color-border);
border-radius: 0.25rem;
color: inherit;
&:hover,
&:focus-visible {
text-decoration: none;
background-color: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-on-primary);
}
}
.page-nav-prev {
text-align: start;
.page-nav-label::before {
content: "← ";
}
}
.page-nav-next {
text-align: end;
grid-column: 2;
.page-nav-label::after {
content: " →";
}
}
.page-nav-label {
font-size: 1rem;
opacity: 0.7;
}
.page-nav-title {
font-weight: 600;
}
@media (max-width: 640px) {
.page-nav {
grid-template-columns: 1fr;
}
.page-nav-next {
grid-column: 1;
}
}
/* CSS voor de Actueel-overzichtspagina: de twee-koloms opbouw */
.news-list {
margin-bottom: 2.5rem;
}
.sidebar-layout-right {
display: grid;
grid-template-columns: 1fr 300px;
gap: 1.5rem;
align-items: baseline;
@media (max-width: 768px) {
grid-template-columns: 1fr;
gap: 0;
}
}
.sidebar-layout-right > div > :first-child,
.sidebar-layout-right > aside > :first-child {
margin-top: 0;
}
.sidebar-layout-right > aside :is(h1, h2) a {
color: var(--color-text-heading);
}
/* De rechterkolom bij tekstpagina's: inhoudsopgave, downloads en/of relevante links. */
main:has(.page-aside) {
@media (min-width: 950px) {
max-width: var(--content-max-width);
display: grid;
grid-template-columns: calc(var(--article-max-width) + 2rem) calc(
min(100vw, var(--content-max-width)) - var(--article-max-width) - 3rem
);
gap: 1rem;
margin: 0 auto;
}
}
.page-aside {
position: sticky;
top: 1rem;
align-self: start;
padding-top: 1rem;
font-size: 1rem;
@media (max-width: 949px) {
position: static;
padding: 1.5rem 1rem 0;
margin-bottom: 2.5rem;
}
}
.toc + .downloads {
margin-top: 1.5rem;
}
.toc h2,
.downloads h2,
.relevante-links h2 {
margin: 0 0 0.5rem;
font-size: 1.2rem;
}
.toc ul,
.downloads ul,
.relevante-links ul {
margin: 0;
padding-left: 0;
list-style: none;
}
.toc a,
.downloads a,
.relevante-links a {
color: var(--color-text-muted);
text-decoration: none;
&:hover {
color: var(--color-primary);
text-decoration: underline;
}
&:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
/* Inhoudsopgave: zichtbaar in de rechterkolom; verborgen op smal scherm */
.toc {
ul ul {
padding-left: 0.5rem;
}
> ul > li {
margin-bottom: 0.5rem;
}
ul ul li {
margin-bottom: 0;
}
a.active {
color: var(--color-primary);
font-weight: 600;
}
@media (max-width: 949px) {
display: none;
}
}
/* Downloadblok: bestandstype-icoon + label */
.downloads li {
margin-bottom: 0.5rem;
}
.downloads a {
display: flex;
align-items: center;
gap: 0.5rem;
}
.downloads svg {
width: 1.1rem;
height: 1.1rem;
flex-shrink: 0;
}
/* Relevante links: pijl als opsommingsteken */
.relevante-links li {
margin-bottom: 0.5rem;
}
.relevante-links a::before {
content: "→";
display: inline-block;
margin-right: 0.4em;
}
/* Lead-foto bovenaan een pagina (generiek). De marge boven zorgt voor ruimte
tussen de kop en de foto; figcaption-opmaak komt uit figure.css. */
.lead-image {
margin: 1.5rem 0 2rem;
}
.lead-image img {
width: 100%;
border-radius: var(--radius-upper-left);
}
/* Klein label/tag (pill). Generiek: bv. een datum, status of categorie. */
.tag {
display: inline-block;
margin: 0.25rem 0 0;
padding: 0.2rem 0.6rem;
border-radius: 0.25rem;
background: var(--color-bg-light);
color: var(--color-text);
font-weight: 600;
}
.tag-status {
background: var(--color-bg-info);
}
/* Tabel: boxed surface met afgeronde hoeken en rij-dividers. */
article table {
width: 100%;
margin: 1.5rem 0;
border-collapse: separate; /* zodat border-radius de hoeken clipt */
border-spacing: 0;
border: 1px solid var(--color-border);
border-radius: 0.5rem;
overflow: hidden;
background: var(--color-bg-page);
}
article table th,
article table td {
padding: 0.75rem 1rem;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--color-border);
}
article table thead th {
font-weight: 700;
color: var(--color-text-heading);
background: var(--color-bg-light);
}
article table tbody th {
font-weight: 700;
}
article table tbody tr:last-child th,
article table tbody tr:last-child td {
border-bottom: 0;
}
@media (max-width: 40rem) {
article table {
display: block;
overflow-x: auto;
}
}
/* Syntaxkleuren voor Chroma-classes. Palet uit het NLDD Design System
(minbzk/storybook, code-viewer). Elke kleur moet in beide thema's minimaal
4,5:1 halen tegen --color-bg-muted. */
.chroma {
--code-comment: light-dark(#556273, #9aa5b5);
--code-keyword: light-dark(#755000, #c78d00);
--code-string: light-dark(#2f6318, #6fa55b);
--code-number: light-dark(#8c4200, #e47c2f);
--code-name: light-dark(#2c598b, #6c9bd2);
--code-error: light-dark(#a22b20, #ee7262);
}
/* Commentaar */
.chroma :is(.c, .ch, .cm, .c1, .cs, .cp, .cpf) {
color: var(--code-comment);
font-style: italic;
}
/* Sleutelwoorden en woordoperatoren */
.chroma :is(.k, .kc, .kd, .kn, .kp, .kr, .kt, .ow) {
color: var(--code-keyword);
}
/* Tekst en operatoren */
.chroma :is(.s, .sa, .sb, .sc, .dl, .sd, .s2, .se, .sh, .si, .sx, .sr, .s1, .ss, .o) {
color: var(--code-string);
}
/* Getallen */
.chroma :is(.m, .mb, .mf, .mh, .mi, .mo, .il) {
color: var(--code-number);
}
/* Sleutels, tags, functies, attributen, variabelen */
.chroma :is(.na, .nb, .nc, .nd, .ne, .nf, .fm, .nl, .nt, .nx, .nv, .vc, .vg, .vi, .vm, .py, .bp) {
color: var(--code-name);
}
/* Fouten en verwijderde regels */
.chroma :is(.err, .gd) {
color: var(--code-error);
}
.chroma :is(.ge) {
font-style: italic;
}
.chroma :is(.gs) {
font-weight: bold;
}
/* Afdrukstijl. Geldt voor "Afdrukken/Opslaan als PDF" in de browser én voor
de PDF die scripts/render-downloads.js met Puppeteer genereert (die gebruikt
standaard het print-medium). Doel: alleen de inhoud, geen site-omgeving. */
@page {
size: A4;
}
@media print {
/* Forceer lichte weergave, ook als de bezoeker donker thema gebruikt */
:root {
color-scheme: light !important;
}
/* Documentpassende koptekstgroottes; de webgroottes zijn voor het scherm. */
h1 {
font-size: 1.7rem;
}
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.2rem;
}
/* Briefhoofd bij browser-printen (Ctrl/Cmd-P): hergebruik de sitebanner (titel + payoff links, logo gecentreerd).
We verbergen de navigatie. De download-PDF (.pdf-export) verbergt de hele header, want die heeft al een
doorlopende logo-header via Puppeteer. */
header .site-logo img {
height: 20mm;
width: auto;
}
html.pdf-export body > header {
display: none !important;
}
/* Geen nav-ruimte boven de inhoud (die hoort bij de schermweergave). */
main {
padding-top: 0;
}
/* Verberg de site-omgeving (navigatie, footer, zijbalk); alleen het document
en het briefhoofd horen in de afdruk/PDF. */
.skip-link,
body > header > *:not(.banner),
body > footer,
.page-aside,
.toc-toggle,
.search-modal {
display: none !important;
}
/* In een print is elke link extern, dus dit icoon voegt niets toe. */
a[rel~="external"]::after,
a[rel~="private"]::after {
display: none !important;
}
/* Inhoud over de volledige breedte */
main:has(.page-aside) {
display: block;
max-width: none;
}
main > article,
main > article > * {
max-width: none;
}
body {
background: #fff;
}
/* Houd een kop bij de tekst eronder: nooit een kop als laatste regel
onderaan een pagina, en breek een kop niet over twee pagina's. */
h1,
h2,
h3,
h4,
h5,
h6 {
break-after: avoid;
break-inside: avoid;
}
/* Geen losse begin- of eindregel van een alinea over een paginagrens */
p,
li,
blockquote {
orphans: 3;
widows: 3;
}
}