/* PGS 15 interactieve richtlijn — eigen stylesheet.
 *
 * Vervangt twee externe afhankelijkheden:
 *   - de Tailwind play-CDN (~3 MB JS die in de browser CSS compileerde)
 *   - Google Fonts
 * Alleen de klassen die deze site daadwerkelijk gebruikt staan hieronder,
 * gegenereerd met de Tailwind-CLI. Opnieuw bouwen na het toevoegen van nieuwe
 * klassen: zie bouw-css.md.
 */

/* Inter, zelf gehost. Geen verzoek meer naar Google, en het werkt offline. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }

*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.top-4{top:1rem}.z-40{z-index:40}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.my-4{margin-top:1rem;margin-bottom:1rem}.-mb-px{margin-bottom:-1px}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-5{height:1.25rem}.h-6{height:1.5rem}.min-h-screen{min-height:100vh}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.max-w-none{max-width:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.rotate-180{--tw-rotate:180deg}.rotate-180,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-1{row-gap:.25rem}.gap-y-4{row-gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-t{border-top-width:1px}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-blue-200{--tw-border-opacity:1;border-color:rgb(191 219 254/var(--tw-border-opacity,1))}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity,1))}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-3{padding-bottom:.75rem}.pb-6{padding-bottom:1.5rem}.pl-3{padding-left:.75rem}.pl-5{padding-left:1.25rem}.pr-10{padding-right:2.5rem}.pr-4{padding-right:1rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-top{vertical-align:top}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-amber-900{--tw-text-opacity:1;color:rgb(120 53 15/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity,1))}.text-orange-800{--tw-text-opacity:1;color:rgb(154 52 18/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27/var(--tw-text-opacity,1))}.text-sky-800{--tw-text-opacity:1;color:rgb(7 89 133/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.no-underline{text-decoration-line:none}.opacity-0{opacity:0}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.hover\:border-blue-600:hover{--tw-border-opacity:1;border-color:rgb(37 99 235/var(--tw-border-opacity,1))}.hover\:bg-blue-200:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-300:hover{--tw-bg-opacity:1;background-color:rgb(209 213 219/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:text-blue-800:hover{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:768px){.md\:col-span-2{grid-column:span 2/span 2}.md\:ml-auto{margin-left:auto}.md\:mt-0{margin-top:0}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:p-8{padding:2rem}}@media (min-width:1024px){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* ===========================================================================
 * PGS 15 — eigen opmaak
 *
 * Staat vóór de <style> van een pagina, zodat pagina-eigen regels blijven winnen.
 *
 * Uitgangspunt van het ontwerp: de inhoud draagt al veel kleur. Grondslagen
 * (vier kleuren), veiligheidsniveaus (A rood, B oranje, C groen), scenario's en
 * doelen — dat is het signaal. Het omhulsel is daarom bewust stil: één inktkleur,
 * warme grijstinten, en één accent voor alles wat aanklikbaar is. Zou de chrome
 * ook kleuren, dan verdwijnt het onderscheid dat er inhoudelijk toe doet.
 * ======================================================================== */

:root {
  /* Inkt en vlakken. Warme grijstinten, geen blauwgrijs: dat leest rustiger
     naast de rode en oranje signaalkleuren van de richtlijn zelf. */
  --ink:        #16181d;
  --ink-zacht:  #4a4f57;
  --ink-flauw:  #767c86;
  --lijn:       #e6e4e0;
  --lijn-zacht: #f0eeeb;
  --vlak:       #f6f5f3;
  --vlak-diep:  #edebe7;
  --kaart:      #ffffff;

  /* Eén accent, voor alles wat je kunt aanklikken. */
  --accent:      #1d4ed8;
  --accent-diep: #1436a4;
  --accent-mist: #eaf0ff;

  /* De vier grondslagen. Eén stelsel voor de hele site. */
  --gr-arbeid-bg:   #fdf0d5; --gr-arbeid-tx:   #7c4a03;
  --gr-brand-bg:    #fde4e1; --gr-brand-tx:    #9b1c14;
  --gr-omgeving-bg: #e0eefb; --gr-omgeving-tx: #0b4a7a;
  --gr-rampen-bg:   #fde8d8; --gr-rampen-tx:   #8a3d0b;

  /* Hoeken, diepte en beweging. Eén schaal, overal dezelfde. */
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 22px;
  --schaduw-1: 0 1px 2px rgba(22, 24, 29, .05), 0 1px 3px rgba(22, 24, 29, .04);
  --schaduw-2: 0 2px 4px rgba(22, 24, 29, .05), 0 8px 20px -6px rgba(22, 24, 29, .10);
  --schaduw-3: 0 4px 8px rgba(22, 24, 29, .06), 0 18px 40px -12px rgba(22, 24, 29, .18);
  --soepel: cubic-bezier(.22, .8, .3, 1);
  --duur:   .28s;
}

/* Beweging is versiering, geen functie. Wie er last van heeft krijgt niets. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--vlak);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Overschrijft de vaste grijstint uit de opmaakklassen van de pagina's. */
body.bg-gray-100 { background: var(--vlak); }

.hidden { display: none !important; }

/* --- Typografie ---------------------------------------------------------- */
/* Eén schaal, meeschalend met de vensterbreedte, zodat koppen op een telefoon
   niet even groot zijn als op een breed scherm. */
h1 { font-size: clamp(1.75rem, 1.15rem + 2.1vw, 2.6rem); line-height: 1.1;
     letter-spacing: -.022em; font-weight: 700; }
h2 { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); line-height: 1.2;
     letter-spacing: -.016em; }
h3 { letter-spacing: -.012em; }
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }

/* Leesbreedte. Lopende tekst liep tot 146 tekens per regel; leesbaar is 50-75.
   38em komt op ongeveer 76 uit en schaalt mee met de tekstmaat. De :not() is er
   voor de specificiteit: zonder die extra klasse verliest deze regel van
   Tailwinds max-w-3xl, dat op verschillende pagina's op alinea's staat. */
main p:not(.vol-breed),
main li:not(.vol-breed),
main blockquote:not(.vol-breed) { max-width: 38em; }

main table p:not(.vol-breed), main table li:not(.vol-breed),
main .footer-pills p:not(.vol-breed), main .footer-links li:not(.vol-breed),
main .doelen-rij li:not(.vol-breed),
main .link-list li:not(.vol-breed), main .link-grid li:not(.vol-breed),
main .legenda p:not(.vol-breed),
main .flex p:not(.vol-breed), main .flex li:not(.vol-breed),
main .start-kaart p:not(.vol-breed), main .hs-rij p:not(.vol-breed),
main .kolom-sub:not(.vol-breed) { max-width: none; }

main p, main li { line-height: 1.65; color: var(--ink-zacht); }
main strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: var(--accent-diep); }

/* Zichtbare focus, overal dezelfde. Zonder dit is de site met het toetsenbord
   niet te volgen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Kop ----------------------------------------------------------------- */
/* Was een witte doos met een titel. Nu een masthead met een rustig verloop, en
   daarboven een streep in de vier grondslagkleuren: de enige plek waar de chrome
   kleur gebruikt, en meteen een legenda van waar de site over gaat. */
body > .container > header {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #fbfaf8 55%, #f4f2ee 100%);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-2);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  overflow: hidden;
}
body > .container > header::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg,
    var(--gr-omgeving-tx) 0 25%, var(--gr-brand-tx) 25% 50%,
    var(--gr-arbeid-tx) 50% 75%, var(--gr-rampen-tx) 75% 100%);
}
body > .container > header h1 { margin: 0; }
body > .container > header > p {
  color: var(--ink-flauw); font-size: 1.0625rem; margin-top: .5rem; max-width: 46em;
}

/* --- Navigatie ----------------------------------------------------------- */
/* Eén stelsel voor de hele site. De hoofdrij staat op elke pagina; binnen de
   sectie Hoofdstukken komt daar een tweede rij met de tien hoofdstukken onder.
   Daarvoor waren dit twee losse navigaties die elkaar niet konden bereiken:
   vanuit hoofdstuk 7 was de maatregelzoeker niet aan te klikken. */
nav[aria-label="Hoofdnavigatie"] {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border: 1px solid var(--lijn);
  border-radius: var(--r-l);
  box-shadow: var(--schaduw-1);
  transition: box-shadow var(--duur) var(--soepel), background var(--duur) var(--soepel);
}
nav[aria-label="Hoofdnavigatie"].nav-geplakt {
  box-shadow: var(--schaduw-3);
  background: rgba(255, 255, 255, .95);
}
nav[aria-label="Hoofdnavigatie"] > ul:not(.subnav) {
  gap: .125rem; padding: .375rem; border-bottom: 0 !important;
}
nav[aria-label="Hoofdnavigatie"] .nav-item { margin: 0 !important; }

.nav-link {
  position: relative; padding: .625rem 1rem !important; border: 0 !important;
  border-radius: var(--r-s); font-size: .9375rem; font-weight: 500;
  color: var(--ink-zacht); text-decoration: none; white-space: nowrap;
  transition: color .18s var(--soepel), background .18s var(--soepel);
}
.nav-link:hover { color: var(--ink); background: var(--vlak-diep); }
.nav-link.active { color: var(--accent) !important; background: var(--accent-mist);
                   font-weight: 650; }
.nav-link.active::after {
  content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .3125rem;
  height: 2px; border-radius: 2px; background: var(--accent);
  animation: streep .32s var(--soepel);
}
@keyframes streep { from { transform: scaleX(0); opacity: 0; }
                    to { transform: scaleX(1); opacity: 1; } }

.subnav {
  display: flex; flex-wrap: wrap; gap: .25rem;
  padding: .5rem .625rem; background: var(--vlak);
  border-top: 1px solid var(--lijn-zacht);
  border-radius: 0 0 var(--r-l) var(--r-l);
}
.subnav li { margin: 0; }
.subnav-link {
  display: inline-block; padding: .3125rem .625rem; border-radius: 6px;
  font-size: .8125rem; color: var(--ink-flauw); text-decoration: none; white-space: nowrap;
  transition: color .16s var(--soepel), background .16s var(--soepel);
}
.subnav-link:hover { background: var(--vlak-diep); color: var(--ink); }
.subnav-link.subnav-actief { background: var(--accent-mist); color: var(--accent); font-weight: 600; }

@media (max-height: 700px) { nav[aria-label="Hoofdnavigatie"] { position: static; } }

/* --- Hoofdvlak ----------------------------------------------------------- */
main#content-area {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-2);
  padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem) !important;
}

/* --- Kaarten en accordeons ------------------------------------------------ */
/* De opengeklapte hoogte werd geanimeerd met max-height: 25000px. Daardoor doet
   een kort blok er even lang over als een lang blok en schokt het sluiten.
   Met grid-template-rows animeert de werkelijke hoogte. */
/* De oude opmaak animeerde met max-height: 25000px. Daardoor doet een kort blok
   er even lang over als een lang blok en schokt het sluiten.
   height:0 -> height:auto animeert de werkelijke hoogte, ongeacht hoeveel
   kinderen het blok heeft. interpolate-size maakt die overgang animeerbaar;
   waar de browser dat niet kent klapt het blok gewoon direct open — correct,
   alleen zonder beweging. */
:root { interpolate-size: allow-keywords; }

.accordion-content {
  display: block; height: 0; overflow: hidden; opacity: 0;
  max-height: none !important;
  transition: height var(--duur) var(--soepel), opacity .18s linear,
              padding var(--duur) var(--soepel);
  padding-top: 0; padding-bottom: 0;
}
.accordion-content.show {
  height: auto; opacity: 1;
  padding-top: 1rem; padding-bottom: 1rem;
}

/* :where() geeft deze regels specificiteit nul, zodat een pagina die zijn eigen
   kaartopmaak heeft (hoofdstuk 7 kleurt zijn kaarten zelf) gewoon wint. */
:where([id^="container-"]) {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--r-m);
}
[id^="container-"] { transition: border-color .2s var(--soepel), box-shadow .2s var(--soepel); }
[id^="container-"]:hover { box-shadow: var(--schaduw-1); }
[id^="container-"]:has(.accordion-content.show) { box-shadow: var(--schaduw-2); }

:where(.accordion-header) { background: transparent; border-radius: var(--r-m); }
.accordion-header {
  position: relative; padding-right: 2.5rem !important;
  transition: background .16s var(--soepel);
}
.accordion-header:hover { background: var(--vlak) !important; }
/* Chevron absoluut geplaatst: de kop is op smalle schermen een kolom en op brede
   een rij, en een meelopend flex-item zou in het eerste geval op een eigen regel
   belanden. */
.accordion-header::after {
  content: ''; position: absolute; right: 1.125rem; top: 50%;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--ink-flauw); border-bottom: 2px solid var(--ink-flauw);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--duur) var(--soepel);
}
[id^="container-"]:has(.accordion-content.show) .accordion-header::after {
  transform: translateY(-30%) rotate(225deg);
}

/* --- Zwaarte van een maatregel -------------------------------------------- */
/* MW komt rechtstreeks uit wetgeving, de rest is normatief binnen de PGS.
   De rand doet het werk; alleen wat afwijkt krijgt ook een woord. */
/* Alleen kaarten die zelf zeggen welke zwaarte ze hebben krijgen een rand;
   pagina's met een eigen kleurcodering blijven zo ongemoeid. */
[id^="container-M"].is-normatief   { border-left: 3px solid var(--accent); }
[id^="container-M"].is-wettelijk   { border-left: 3px solid #c2410c; }
[id^="container-M"].is-informatief { border-left: 3px solid var(--lijn); }
[id^="container-M"].is-informatief .accordion-header { color: var(--ink-flauw); }

.m-sectie { display: block; font-size: .6875rem; color: var(--ink-flauw); margin-top: .25rem;
            font-weight: 400; }
.m-vlag { display: inline-block; font-size: .625rem; font-weight: 700; letter-spacing: .05em;
          text-transform: uppercase; padding: .0625rem .375rem; border-radius: 4px;
          margin-right: .375rem; }
.m-vlag-wet  { background: #fde8d8; color: #8a3d0b; }
.m-vlag-norm { background: var(--accent-mist); color: var(--accent); }
.m-vlag-info { background: var(--vlak-diep); color: var(--ink-flauw); }

/* --- Grondslagen ---------------------------------------------------------- */
.gr { display: inline-flex; align-items: center; gap: .25rem;
      font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
      padding: .1875rem .5rem; border-radius: 999px; margin-right: .375rem;
      white-space: nowrap; }
.gr-arbeid   { background: var(--gr-arbeid-bg);   color: var(--gr-arbeid-tx); }
.gr-brand    { background: var(--gr-brand-bg);    color: var(--gr-brand-tx); }
.gr-omgeving { background: var(--gr-omgeving-bg); color: var(--gr-omgeving-tx); }
.gr-rampen   { background: var(--gr-rampen-bg);   color: var(--gr-rampen-tx); }
.gr .pill-icon { width: .8125em; height: .8125em; }

/* --- Knoppen -------------------------------------------------------------- */
button { transition: background .18s var(--soepel), box-shadow .18s var(--soepel),
                     transform .12s var(--soepel), color .18s var(--soepel); }
button:active { transform: translateY(1px); }
#zoek-btn {
  background: var(--accent) !important; border-radius: var(--r-s) !important;
  box-shadow: 0 1px 2px rgba(29, 78, 216, .3), 0 6px 16px -6px rgba(29, 78, 216, .5);
}
#zoek-btn:hover { background: var(--accent-diep) !important;
                  box-shadow: 0 2px 4px rgba(29, 78, 216, .3),
                              0 10px 22px -6px rgba(29, 78, 216, .55); }
#deel-btn, #print-btn { border-radius: var(--r-s) !important; border-color: var(--lijn) !important;
                        color: var(--ink-zacht) !important; }
#deel-btn:hover, #print-btn:hover { background: var(--vlak) !important;
                                    border-color: #d9d6d1 !important; }

/* --- Zoeken over de hele richtlijn ---------------------------------------- */
.gz { position: relative; margin-top: 1.25rem; max-width: 34rem; }
.gz-label { display: block; font-size: .6875rem; text-transform: uppercase;
            letter-spacing: .06em; color: var(--ink-flauw); margin-bottom: .375rem;
            font-weight: 600; }
.gz-veld {
  width: 100%; padding: .625rem .875rem .625rem 2.25rem;
  border: 1px solid var(--lijn); border-radius: var(--r-s);
  font-size: .9375rem; color: var(--ink); box-shadow: var(--schaduw-1);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767c86' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .625rem center / 1.05rem;
  transition: border-color .18s var(--soepel), box-shadow .18s var(--soepel);
}
.gz-veld::placeholder { color: var(--ink-flauw); }
.gz-veld:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-mist);
                 outline: none; }

.gz-lijst {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + .375rem);
  margin: 0; padding: .3125rem; list-style: none; background: #fff;
  border: 1px solid var(--lijn); border-radius: var(--r-m);
  box-shadow: var(--schaduw-3); max-height: 22rem; overflow-y: auto;
  animation: opduiken .18s var(--soepel);
}
@keyframes opduiken { from { opacity: 0; transform: translateY(-6px); }
                      to { opacity: 1; transform: none; } }
.gz-lijst li { margin: 0; }
.gz-lijst a { display: flex; align-items: baseline; gap: .5rem; padding: .5rem .5625rem;
              border-radius: var(--r-s); text-decoration: none; color: var(--ink); }
.gz-lijst a:hover, .gz-actief a { background: var(--accent-mist); }
.gz-id { flex: 0 0 auto; font-weight: 700; font-size: .75rem; color: var(--accent);
         background: var(--accent-mist); border-radius: 5px; padding: .0625rem .375rem; }
.gz-actief .gz-id { background: #fff; }
.gz-titel { flex: 1 1 auto; font-size: .8125rem; overflow: hidden;
            text-overflow: ellipsis; white-space: nowrap; }
.gz-soort { flex: 0 0 auto; font-size: .6875rem; color: var(--ink-flauw); }
.gz-leeg { padding: .625rem; font-size: .8125rem; color: var(--ink-flauw); }

/* --- Startpagina ---------------------------------------------------------- */
.start-acties {
  display: grid; gap: 1rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.start-kaart {
  display: block; position: relative; overflow: hidden;
  padding: 1.25rem 1.25rem 1.375rem; text-decoration: none;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--r-l);
  box-shadow: var(--schaduw-1);
  transition: transform .22s var(--soepel), box-shadow .22s var(--soepel),
              border-color .22s var(--soepel);
}
.start-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-3);
                     border-color: #d9d6d1; }
.start-kaart::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--soepel);
}
.start-kaart:hover::after { transform: scaleX(1); }
.start-kaart h3 { font-size: 1.0625rem; font-weight: 650; margin: 0 0 .3125rem; color: var(--ink); }
.start-kaart p { font-size: .875rem; color: var(--ink-flauw); margin: 0; line-height: 1.55; }
.start-icoon { display: inline-flex; align-items: center; justify-content: center;
               width: 2.25rem; height: 2.25rem; border-radius: 10px;
               background: var(--accent-mist); color: var(--accent); margin-bottom: .75rem; }
.start-icoon svg { width: 1.25rem; height: 1.25rem; }

.hs-rij { transition: background .16s var(--soepel); }
.hs-rij:hover { background: var(--vlak); }

/* --- Verschijnen bij scrollen --------------------------------------------- */
/* Subtiel: 8 px omhoog en van doorzichtig naar vol. Zonder JS of met beperkte
   beweging is alles gewoon meteen zichtbaar. */
.reveal { opacity: 0; transform: translateY(8px);
          transition: opacity .45s var(--soepel), transform .45s var(--soepel); }
.reveal.zichtbaar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Tabel 6 -------------------------------------------------------------- */
.t6-wrap { overflow-x: auto; border: 1px solid var(--lijn); border-radius: var(--r-m); }
.t6 { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
.t6-cap { caption-side: top; text-align: left; font-size: .75rem; color: var(--ink-flauw);
          padding: 0 0 .625rem; }
.t6 th, .t6 td { border-bottom: 1px solid var(--lijn-zacht); padding: .625rem .75rem;
                 vertical-align: top; text-align: left; }
.t6 thead th { position: sticky; top: 0; background: var(--vlak-diep); font-weight: 650;
               white-space: nowrap; border-bottom: 1px solid var(--lijn); z-index: 1; }
.t6 tbody th { background: #fbfaf8; font-weight: 400; min-width: 15rem; }
.t6 tbody tr:last-child th, .t6 tbody tr:last-child td { border-bottom: 0; }
.t6 tbody tr { transition: background .14s var(--soepel); }
.t6 tbody tr:hover td, .t6 tbody tr:hover th { background: var(--accent-mist); }
.t6-actief th, .t6-actief td { background: #fef6d8 !important; }
.t6-adr { display: inline-block; font-weight: 700; color: var(--ink); margin-right: .375rem; }
.t6-label { color: var(--ink-zacht); }
.t6-noot { display: block; font-size: .6875rem; color: var(--ink-flauw); margin-top: .25rem; }
.t6-leeg { color: #b9b5ae; text-align: center; }
.t6-hr { border: 0; border-top: 1px dashed var(--lijn); margin: .4375rem 0; }

.niv { display: inline-block; min-width: 1.3rem; text-align: center; border-radius: 5px;
       font-weight: 700; font-size: .75rem; padding: .0625rem .3125rem; margin-right: .3125rem; }
.niv-A { background: var(--gr-brand-bg);  color: var(--gr-brand-tx); }
.niv-B { background: var(--gr-rampen-bg); color: var(--gr-rampen-tx); }
.niv-C { background: #dcf3e3;             color: #14653a; }
.niv-t { color: var(--ink-zacht); }
.niv-let { display: inline-block; font-size: .6875rem; color: #8a3d0b; margin-top: .3125rem; }
.niv-vraag { display: inline-block; width: 1.05rem; height: 1.05rem; line-height: 1.05rem;
             text-align: center; border-radius: 999px; background: #fde68a; color: #7c4a03;
             font-weight: 700; font-size: .6875rem; cursor: help; }
.t6-toel { margin-top: 1rem; font-size: .8125rem; color: var(--ink-zacht); }
.t6-toel ul { list-style: disc; padding-left: 1.25rem; margin-top: .375rem; }

/* --- Modals --------------------------------------------------------------- */
/* Een dichte modal mag de bladspiegel niet beïnvloeden. Ze stonden op
   visibility:hidden en telden daardoor mee in de breedte van het document: de
   brede tabellen erin lieten hoofdstuk 7 op een telefoon horizontaal meeschuiven.
   Twee mechanismen in gebruik op deze site: .active en .hidden; beide afgedekt. */
.modal-overlay.hidden { display: none !important; }
#modals-container .modal-overlay:not(.active) { display: none !important; }
.modal-container { max-width: min(100%, 62rem); border-radius: var(--r-l) !important;
                   box-shadow: var(--schaduw-3) !important;
                   animation: modaal-in .26s var(--soepel); }
@keyframes modaal-in { from { opacity: 0; transform: translateY(10px) scale(.985); }
                       to { opacity: 1; transform: none; } }
.modal-body-content { overflow-x: auto; }
.tabel-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
                border: 1px solid var(--lijn); border-radius: var(--r-m); }
.tabel-scroll > table { min-width: max-content; }

/* --- Mobiel --------------------------------------------------------------- */
@media (max-width: 640px) {
  main table, .modal-body-content table {
    display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}
.maatregel-card-header { flex-wrap: wrap; }
.maatregel-title, .maatregel-card-header > * { min-width: 0; }
.maatregel-title, .scenario-titel, .gz-titel { overflow-wrap: anywhere; }
.maatregel-body, .accordion-content .prose { overflow-x: auto; }
.maatregel-body, .accordion-content .prose, .scenario-explanation { overflow-wrap: anywhere; }

/* --- Afdrukbare checklist -------------------------------------------------- */
/* Op het scherm onzichtbaar; bij afdrukken is dit het enige wat overblijft.
   Dit is wat je mee de opslag in neemt: de maatregelen voor jouw situatie met
   een vakje ervoor. De officiële site kan dat niet. */
#afdruk { display: none; }

@media print {
  body { background: #fff; }
  header, nav, form, #zoek-formulier, #zoek-resultaten, #zoek-resultaten-info,
  .modal-overlay, #deel-btn, #print-btn, #zoek-btn, #deel-melding, .gz,
  .start-acties { display: none !important; }
  main, main#content-area { box-shadow: none !important; border: 0 !important;
                            padding: 0 !important; }
  .container { padding: 0 !important; max-width: none !important; }

  #afdruk { display: block; font-size: 10.5pt; color: #000; }
  #afdruk h1 { font-size: 15pt; margin: 0 0 .6rem; }
  #afdruk h3 { font-size: 11.5pt; margin: 1rem 0 .35rem; border-bottom: 1px solid #000;
               padding-bottom: .15rem; break-after: avoid; }
  #afdruk .afd-kop { border-collapse: collapse; margin-bottom: .75rem; width: 100%; }
  #afdruk .afd-kop th { text-align: left; font-weight: 600; padding: .15rem .75rem .15rem 0;
                        white-space: nowrap; vertical-align: top; width: 11rem; }
  #afdruk .afd-kop td { padding: .15rem 0; }
  #afdruk .afd-invul { border-bottom: 1px solid #999; }
  #afdruk .afd-let { border: 1px solid #000; padding: .4rem .6rem; margin: .5rem 0; }
  #afdruk .afd-let ul { list-style: disc; padding-left: 1.1rem; }
  #afdruk .afd-lijst { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; }
  #afdruk .afd-lijst li { break-inside: avoid; margin-bottom: .18rem; line-height: 1.35; }
  #afdruk .afd-vak { display: inline-block; width: .72em; height: .72em; border: 1px solid #000;
                     margin-right: .4em; vertical-align: -1px; }
  #afdruk .afd-voet { margin-top: 1rem; font-size: 8.5pt; border-top: 1px solid #999;
                      padding-top: .3rem; }
  @page { margin: 14mm; }
}

/* --- Uitkomst van de maatregelzoeker --------------------------------------
 * Dit is het antwoord waar iemand voor kwam. Het stond in dezelfde grijstint
 * als de rest; nu krijgt het het gewicht dat erbij hoort.
 */
.uitkomst-kaart {
  background: linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
  border: 1px solid var(--lijn); border-left: 4px solid var(--accent);
  border-radius: var(--r-l); padding: 1.125rem 1.25rem;
  box-shadow: var(--schaduw-2);
}
.uitkomst-regel { font-size: 1.05rem; color: var(--ink-zacht); }
.uitkomst-niveau {
  display: inline-block; margin: 0 .375rem;
  font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--accent); background: var(--accent-mist);
  border-radius: var(--r-s); padding: .125rem .625rem; vertical-align: -1px;
}
#info-niveau-btn { color: var(--accent); }

/* --- Pillen: kleur naar soort ---------------------------------------------
 * Elke verwijzing naar een maatregel, scenario, doel of bijlage is een pil.
 * Ze zagen er allemaal hetzelfde uit — grijs — waardoor je in een rij van
 * dertig verwijzingen niet ziet waar je heen springt.
 *
 * De kleur komt uit de href, niet uit een klasse. Dat is hetzelfde principe
 * waar pill-tooltip.js op werkt: elke verwijzing op elke pagina doet automatisch
 * mee, ook nieuwe, zonder dat er ergens markup bij hoeft.
 *
 *   maatregel   blauw      M2, M45, M167
 *   wettelijk   oranje     MW1 — komt rechtstreeks uit wetgeving
 *   scenario    groen      S1 t/m S16
 *   doel        paars      D1 t/m D13
 *   bijlage     turkoois   A t/m K
 */
:root {
  --pil-maat-bg: #e8eefe; --pil-maat-tx: #1c3faa; --pil-maat-hv: #d6e2fd;
  --pil-wet-bg:  #ffe9d5; --pil-wet-tx:  #9a3412; --pil-wet-hv:  #ffdcbe;
  --pil-scen-bg: #ddf6e3; --pil-scen-tx: #146c37; --pil-scen-hv: #c6eed2;
  --pil-doel-bg: #eee7fd; --pil-doel-tx: #6320c9; --pil-doel-hv: #e3d8fc;
  --pil-bijl-bg: #d7f3ef; --pil-bijl-tx: #0d6a63; --pil-bijl-hv: #c2ebe5;
}

/* Basisvorm. :where() houdt de specificiteit op nul zodat de kleurregels
   hieronder en de eigen opmaak van een pagina er altijd overheen kunnen. */
:where(.pill-link, .maatregel-link, .doel-link, .scenario-link, .bijlage-link,
       .s-pill, .d-pill) {
  display: inline-block; border-radius: 999px;
  padding: .1875rem .5625rem; font-size: .75rem; font-weight: 600;
  line-height: 1.35; text-decoration: none;
  border: 1px solid transparent;
}
/* Geen nowrap: in hoofdstuk 7 staat in dezelfde pil ook de volledige titel van
   een scenario, en die liep dan 1250 px buiten het scherm op een telefoon. */
:where(.pill-link, .maatregel-link, .doel-link, .scenario-link, .bijlage-link,
       .s-pill, .d-pill) { white-space: normal; overflow-wrap: anywhere; }
.pill-link, .maatregel-link, .doel-link, .scenario-link, .bijlage-link,
.s-pill, .d-pill {
  transition: background-color .16s var(--soepel), color .16s var(--soepel),
              border-color .16s var(--soepel), transform .12s var(--soepel);
}
.pill-link:hover, .maatregel-link:hover, .doel-link:hover, .scenario-link:hover,
.bijlage-link:hover, .s-pill:hover, .d-pill:hover { transform: translateY(-1px); }

/* Kleur naar bestemming. Attribuutselectors wegen even zwaar als een klasse en
   staan later in dit bestand, dus ze winnen van de grijze Tailwind-klassen. */
a[href*="maatregelen.html#container-"] {
  background: var(--pil-maat-bg); color: var(--pil-maat-tx);
  border-color: color-mix(in srgb, var(--pil-maat-tx) 16%, transparent);
}
a[href*="maatregelen.html#container-"]:hover {
  background: var(--pil-maat-hv); color: var(--pil-maat-tx);
}
a[href*="#container-MW"] {
  background: var(--pil-wet-bg); color: var(--pil-wet-tx);
  border-color: color-mix(in srgb, var(--pil-wet-tx) 18%, transparent);
}
a[href*="#container-MW"]:hover { background: var(--pil-wet-hv); color: var(--pil-wet-tx); }

a[href*="risicoanalyse.html#container-"], .s-pill {
  background: var(--pil-scen-bg); color: var(--pil-scen-tx);
  border-color: color-mix(in srgb, var(--pil-scen-tx) 16%, transparent);
}
a[href*="risicoanalyse.html#container-"]:hover, .s-pill:hover {
  background: var(--pil-scen-hv); color: var(--pil-scen-tx);
}

a[href*="doelen.html#container-"], .d-pill {
  background: var(--pil-doel-bg); color: var(--pil-doel-tx);
  border-color: color-mix(in srgb, var(--pil-doel-tx) 16%, transparent);
}
a[href*="doelen.html#container-"]:hover, .d-pill:hover {
  background: var(--pil-doel-hv); color: var(--pil-doel-tx);
}

a[href*="bijlagen.html#container-"] {
  background: var(--pil-bijl-bg); color: var(--pil-bijl-tx);
  border-color: color-mix(in srgb, var(--pil-bijl-tx) 16%, transparent);
}
a[href*="bijlagen.html#container-"]:hover {
  background: var(--pil-bijl-hv); color: var(--pil-bijl-tx);
}

/* Uitzondering: een verwijzing die géén pil-klasse draagt staat gewoon midden in
   een zin. Die wordt een gekleurde tekstlink, geen pil. Andersom geformuleerd
   dan eerst: eerder streepte ik alles in een <p> of <li> weg, maar juist de
   lijstjes in hoofdstuk 6 en 7 zetten hun pillen in <li>-elementen. */
.geen-pil,
main :is(p, li) a[href*="#container-"]:not(.pill-link):not(.maatregel-link):not(.doel-link):not(.scenario-link):not(.bijlage-link):not(.s-pill):not(.d-pill),
.t6-toel a, .start-kaart a, .gz-lijst a, .rd-lnk {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-weight: inherit; white-space: normal; transform: none;
}
main :is(p, li) a[href*="#container-"]:not(.pill-link):not(.maatregel-link):not(.doel-link):not(.scenario-link):not(.bijlage-link):not(.s-pill):not(.d-pill) {
  text-decoration: underline; font-weight: 500;
}
main :is(p, li) a[href*="maatregelen.html#container-"]:not(.pill-link):not(.maatregel-link) { color: var(--pil-maat-tx); }
main :is(p, li) a[href*="risicoanalyse.html#container-"]:not(.pill-link):not(.scenario-link) { color: var(--pil-scen-tx); }
main :is(p, li) a[href*="doelen.html#container-"]:not(.pill-link):not(.doel-link) { color: var(--pil-doel-tx); }
main :is(p, li) a[href*="bijlagen.html#container-"]:not(.pill-link):not(.bijlage-link) { color: var(--pil-bijl-tx); }

/* Lijstjes met pillen wat lucht geven. */
.footer-links, .link-list { display: flex; flex-wrap: wrap; gap: .3125rem;
                            list-style: none; padding: 0; }
.footer-links li, .link-list li { margin: 0; }

/* Het kaartje in de zoekresultaten volgt dezelfde kleuren. */
.gz-id-m { background: var(--pil-maat-bg); color: var(--pil-maat-tx); }
.gz-id-w { background: var(--pil-wet-bg);  color: var(--pil-wet-tx); }
.gz-id-s { background: var(--pil-scen-bg); color: var(--pil-scen-tx); }
.gz-id-d { background: var(--pil-doel-bg); color: var(--pil-doel-tx); }
.gz-id-b { background: var(--pil-bijl-bg); color: var(--pil-bijl-tx); }
.gz-actief .gz-id { box-shadow: 0 0 0 1px rgba(22,24,29,.12) inset; }

/* Het structuurdiagram gebruikt dezelfde kleuren voor zijn S- en D-links. */
.rd-lnk[href*="risicoanalyse.html"] text { fill: var(--pil-scen-tx); }
.rd-lnk[href*="doelen.html"] text        { fill: var(--pil-doel-tx); }
.rd-lnk[href*="risicoanalyse.html"]:hover text { fill: #0b4a25; }
.rd-lnk[href*="doelen.html"]:hover text        { fill: #4a1594; }

/* Legenda van de pilkleuren, te plaatsen waar het helpt. */
.pil-legenda { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
               font-size: .75rem; color: var(--ink-flauw); margin: .25rem 0 1rem; }
.pil-legenda b { font-weight: 600; color: var(--ink-zacht); }
.pil-legenda span { display: inline-flex; align-items: center; gap: .3125rem; }
.pil-legenda i { display: inline-block; width: .625rem; height: .625rem;
                 border-radius: 999px; }

/* Hoofdstuk 6 zet zijn verwijzingen niet als compacte pil neer maar als brede
   kaartjes met een ondertitel. Die volledig inkleuren wordt bij dat formaat te
   luid, dus krijgen ze een gekleurde rand en een gekleurd nummer — dezelfde
   codering, ander gewicht. */
main .link-list li a[href*="maatregelen.html#container-"] { border-left: 3px solid var(--pil-maat-tx); }
main .link-list li a[href*="#container-MW"]              { border-left: 3px solid var(--pil-wet-tx); }
main .link-list li a[href*="risicoanalyse.html#container-"] { border-left: 3px solid var(--pil-scen-tx); }
main .link-list li a[href*="doelen.html#container-"]     { border-left: 3px solid var(--pil-doel-tx); }
main .link-list li a[href*="bijlagen.html#container-"]   { border-left: 3px solid var(--pil-bijl-tx); }

main .link-list li a[href*="maatregelen.html#container-"] .font-bold { color: var(--pil-maat-tx); }
main .link-list li a[href*="#container-MW"] .font-bold              { color: var(--pil-wet-tx); }
main .link-list li a[href*="risicoanalyse.html#container-"] .font-bold { color: var(--pil-scen-tx); }
main .link-list li a[href*="doelen.html#container-"] .font-bold     { color: var(--pil-doel-tx); }

main .scenario-list li a[href*="risicoanalyse.html#container-"] {
  border-left: 3px solid var(--pil-scen-tx);
}
/* Pillen zijn zelf de knop; een onderstreping erbij maakt ze rommelig. */
.pill-link, .maatregel-link, .doel-link, .scenario-link, .bijlage-link,
.s-pill, .d-pill { text-decoration: none; }
.pill-link:hover, .maatregel-link:hover, .doel-link:hover, .scenario-link:hover,
.bijlage-link:hover, .s-pill:hover, .d-pill:hover { text-decoration: none; }

/* ======================================================================== */
/* Maatregelkaart — opengeklapte body in twee zones                          */
/* ------------------------------------------------------------------------ */
/* De eis en (indien aanwezig) de toelichting staan links op leesbreedte;    */
/* grondslag, zwaarte, bron, bijlage en de knop staan in een rechterkolom.   */
/* Dat vult de breedte die eerst leeg was en maakt de kaart korter, zonder   */
/* de regellengte van de wettekst op te rekken. Alleen actief op elementen   */
/* met .mk-body, dus enkel de maatregelpagina's; de rest blijft ongemoeid.   */

.accordion-content .mk-body {
  display: grid; grid-template-columns: 1fr; gap: 1.3rem;
}
@media (min-width: 820px) {
  .accordion-content .mk-body {
    grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 2.2rem;
  }
}
.mk-main { min-width: 0; }
.accordion-content .mk-main p,
.accordion-content .mk-main li { max-width: 46em; }
.mk-eis > p:first-child { color: var(--ink); font-weight: 500; }

/* Lange kaarten lopen op een breed scherm in twee kolommen, zodat ze niet
   verticaal uitrekken. Losse alinea's en lijsten blijven heel; de kop
   "Toelichting" blijft aan zijn tekst vastzitten. */
@media (min-width: 1200px) {
  .mk-lang .mk-main { columns: 2; column-gap: 2.4rem; }
  .mk-lang .mk-main p,
  .mk-lang .mk-main li,
  .mk-lang .mk-main ul,
  .mk-lang .mk-main ol { break-inside: avoid; }
  .mk-lang .mk-main .mk-toel-label { break-after: avoid; }
  .mk-lang .mk-toel { border-top: none; padding-top: 0; margin-top: .2rem; }
}

.mk-toel { margin-top: 1rem; padding-top: .9rem; border-top: 1px dashed var(--lijn); }
.mk-toel-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .35rem;
}

.mk-rail { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; align-self: start; }
@media (min-width: 820px) {
  .mk-rail { border-left: 1px solid var(--lijn-zacht); padding-left: 1.6rem; }
}
.mk-vlag {
  font-size: .74rem; font-weight: 700; padding: .22rem .6rem;
  border: 1px solid; border-radius: 999px; white-space: nowrap;
}
.mk-vlag.is-normatief   { border-color: var(--accent); background: var(--accent-mist); color: var(--pil-maat-tx); }
.mk-vlag.is-wettelijk   { border-color: #c2410c;        background: #fff1e8;            color: #9a3412; }
.mk-vlag.is-informatief { border-color: #cfccc6;        background: var(--vlak);         color: var(--ink-flauw); }

.mk-meta { display: flex; flex-direction: column; gap: .1rem; }
.mk-meta-k { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-flauw); }
.mk-meta-v { font-size: .85rem; color: var(--ink-zacht); }

/* De Verduidelijk-knop: van kale paarse tekstlink naar een echte knop in de
   doel-pilkleur, zodat de rail een duidelijke actie heeft. */
.accordion-content .mk-uitleg {
  align-self: stretch; text-align: left; cursor: pointer;
  font-weight: 600; font-size: .85rem; line-height: 1.3;
  color: var(--pil-doel-tx); background: var(--pil-doel-bg);
  border: 1px solid color-mix(in srgb, var(--pil-doel-tx) 20%, transparent);
  padding: .55rem .8rem; border-radius: var(--r-s);
  transition: background .15s var(--soepel), transform .15s var(--soepel);
}
.accordion-content .mk-uitleg:hover { background: var(--pil-doel-hv); transform: translateY(-1px); }

/* De uitleg verschijnt onder de tekst in de hoofdkolom, niet in de smalle
   rail. Leeg tot de knop is gebruikt. */
.mk-main .uitleg-container { margin-top: 1rem; }
.mk-main .uitleg-container:empty { display: none; margin: 0; }

/* ======================================================================== */
/* Merk in de masthead — zodat elke contentpagina dezelfde kop-identiteit    */
/* draagt als de hero (index/risicodiagram): het "15"-merk linksboven.       */
:root { --teal: #0e9488; --violet: #6d28d9; }
.mh-brand { display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.mh-mark {
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg, var(--accent), var(--teal));
  color:#fff; font-weight:700; font-size:.85rem; letter-spacing:-.02em;
  box-shadow:0 6px 16px -5px color-mix(in srgb, var(--accent) 55%, transparent);
}
.mh-name { font-weight:700; letter-spacing:-.02em; color:var(--ink); font-size:1.02rem; }
.mh-ver {
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-flauw); border:1px solid var(--lijn); padding:.16rem .5rem; border-radius:999px;
}

/* ======================================================================== */
/* Chrome doortrekken naar de lichte, warme body van de hero-pagina's.       */
/* De contentpagina's droegen nog de Tailwind-standaard (grijze body, witte  */
/* kaarten met harde schaduw). Hier tillen we die naar het tokenstelsel —    */
/* zónder de al gestileerde kop en nav te raken (die winnen op specificiteit */
/* via body>.container>header en nav[aria-label]).                           */

/* Warme papierachtergrond i.p.v. bg-gray-100 */
body.bg-gray-100 { background: var(--vlak) !important; color: var(--ink); }

/* Het grote inhoudsvlak (bg-white … min-h-screen) → rustige kaart */
.bg-white.min-h-screen {
  background: var(--kaart) !important;
  border: 1px solid var(--lijn);
  border-radius: var(--r-xl);
  box-shadow: var(--schaduw-1) !important;
}
/* De losse prose-kaart (o.a. bovenaan sommige pagina's) */
.prose.bg-white.rounded-lg {
  background: var(--kaart) !important;
  border: 1px solid var(--lijn);
  border-radius: var(--r-lg);
  box-shadow: var(--schaduw-1) !important;
}

/* Accordion-kop: van grijs-op-grijs naar warme tinten met het accent bij hover */
.accordion-header.bg-gray-50 { background: var(--vlak) !important; }
.accordion-header.bg-gray-50:hover { background: var(--vlak-diep) !important; }

/* Zachtere, warmere schaduw voor de generieke Tailwind-kaarten in het hoofdvlak
   (kaarten in de maatregelzoeker e.d.), zonder kop/nav te raken. */
main .bg-white.rounded-lg.shadow-md,
main .bg-white.rounded-lg.shadow {
  border: 1px solid var(--lijn);
  box-shadow: var(--schaduw-1) !important;
  border-radius: var(--r-lg);
}

/* ======================================================================== */
/* Contentpagina's dezelfde schil als de mainpage: slanke merk-topbalk       */
/* i.p.v. masthead + losse tabbladenbalk. Het merk staat nu ín de nav.       */
:root { --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E"); }
body.bg-gray-100::before{ content:""; position:fixed; inset:0; background-image:var(--grain); pointer-events:none; z-index:9999; mix-blend-mode:multiply; }

nav[aria-label="Hoofdnavigatie"]{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  padding:.45rem .55rem;
}
.tb-brand{ display:flex; align-items:center; gap:.55rem; padding:.25rem .5rem .25rem .3rem;
  font-weight:700; letter-spacing:-.02em; color:var(--ink); margin-right:.35rem; }
.tb-mark{ display:grid; place-items:center; width:32px; height:32px; border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--teal)); color:#fff; font-weight:700; font-size:.8rem;
  box-shadow:0 5px 14px -4px color-mix(in srgb,var(--accent) 55%,transparent); }
.tb-name{ font-size:1rem; }
/* hoofdnav-pills schuiven naar rechts, subnav valt volle breedte eronder */
nav[aria-label="Hoofdnavigatie"] > ul:not(.subnav){ margin-left:auto; }
.subnav{ flex-basis:100%; width:100%; margin-top:.15rem; }

/* ======================================================================== */
/* DONKER THEMA — exact het palet van de hoofdpagina, over de hele site.     */
/* Staat als laatste, dus overschrijft de lichte tokens hierboven; alle      */
/* component-regels die tokens gebruiken, kantelen automatisch mee.          */
:root{
  --ink:#f2f0ea; --ink-zacht:#c1c7cf; --ink-flauw:#8892a0;
  --lijn:#282e37; --lijn-zacht:#20252d; --vlak:#0c0f13; --vlak-diep:#1c212a; --kaart:#161a21;
  --accent:#6ea0ff; --accent-diep:#87b2ff; --accent-mist:#17273f;
  --teal:#3fd0be; --violet:#a78bfa;
  /* grondslagen: donkere achtergrond + heldere tekst (mainpage-tinten) */
  --gr-arbeid-bg:#3a2a0c; --gr-arbeid-tx:#f0b64d;
  --gr-brand-bg:#3a1714;  --gr-brand-tx:#f4796c;
  --gr-omgeving-bg:#12294a;--gr-omgeving-tx:#5fb0ee;
  --gr-rampen-bg:#3a220f; --gr-rampen-tx:#f0904f;
  /* pills */
  --pil-maat-bg:#1d2f5c; --pil-maat-tx:#a9c8ff; --pil-maat-hv:#26407a;
  --pil-wet-bg:#3f2712;  --pil-wet-tx:#f0b46a;  --pil-wet-hv:#5a3717;
  --pil-scen-bg:#0c3a31; --pil-scen-tx:#57e6cd; --pil-scen-hv:#0f4d40;
  --pil-doel-bg:#2c1a52; --pil-doel-tx:#cbb0ff; --pil-doel-hv:#3b2470;
  --pil-bijl-bg:#0c3a35; --pil-bijl-tx:#5fe6d6; --pil-bijl-hv:#0f4d46;
}
html, body.bg-gray-100 { background:#0b0e13 !important; color:var(--ink) !important; }
body.bg-gray-100::before{ mix-blend-mode:screen; }

/* Tailwind-oppervlakken → tokenstelsel donker */
.bg-white{ background:var(--kaart) !important; }
.bg-gray-50{ background:#12171e !important; } .bg-gray-100{ background:#0f141a !important; }
.bg-gray-200{ background:#1b212a !important; } .bg-blue-50{ background:#122036 !important; }
.bg-amber-50{ background:#231b0e !important; } .bg-red-50{ background:#2a1613 !important; }
.border-gray-200,.border-gray-300{ border-color:var(--lijn) !important; }
.text-gray-900{ color:#f4f2ec !important; } .text-gray-800{ color:#e6e4de !important; }
.text-gray-700{ color:#ccd1d9 !important; } .text-gray-600{ color:#aab2bd !important; }
.text-gray-500{ color:#8892a0 !important; } .text-gray-400{ color:#6b7480 !important; }
.text-blue-600,.text-blue-800{ color:#9dc0ff !important; }
.hover\:bg-gray-50:hover{ background:#12171e !important; } .hover\:bg-gray-100:hover{ background:#0f141a !important; }
.hover\:bg-gray-300:hover{ background:#1b212a !important; }

/* nav-topbalk donker */
nav[aria-label="Hoofdnavigatie"]{ background:rgba(20,25,33,.86) !important; border-color:#262c35 !important; }
nav[aria-label="Hoofdnavigatie"].nav-geplakt{ background:rgba(20,25,33,.96) !important; }
.tb-name{ color:var(--ink); }
.nav-link{ color:var(--ink-zacht); } .nav-link:hover{ color:#fff; background:#1b212a; }
.nav-link.active{ color:#bcd6ff !important; background:#17273f !important; }
.nav-link.active::after{ background:#7cb0ff; }
.subnav{ background:var(--vlak-diep) !important; border-color:var(--lijn) !important; }

/* FELLE knoppen op donker */
.bg-blue-600{ background:#3d8bff !important; box-shadow:0 8px 22px -8px rgba(61,139,255,.7) !important; }
.hover\:bg-blue-700:hover{ background:#5a9dff !important; }
.accordion-content .mk-uitleg{
  background:linear-gradient(135deg,#8b5cf6,#7c3aed) !important; color:#fff !important;
  border:1px solid #a78bfa !important; box-shadow:0 8px 22px -8px rgba(139,92,246,.6) !important;
}
.accordion-content .mk-uitleg:hover{ background:linear-gradient(135deg,#9d74f8,#8b5cf6) !important; }
.gr{ font-weight:700 !important; }

/* formuliervelden donker + fel accent-focus */
select, input[type="text"], input[type="search"]{ background:#12171e !important; color:var(--ink) !important; border-color:#2f3742 !important; }
.focus\:ring-blue-500:focus{ --tw-ring-color:#3d8bff !important; box-shadow:0 0 0 3px rgba(61,139,255,.45) !important; }
.focus\:border-blue-500:focus{ border-color:#3d8bff !important; }

/* Tailwind-badgevariant (maatregelzoeker) */
.bg-sky-100{ background:#12294a !important; } .text-sky-800{ color:#5fb0ee !important; }
.bg-amber-100{ background:#3a2a0c !important; } .text-amber-800{ color:#f0b64d !important; }
.bg-red-100{ background:#3a1714 !important; } .text-red-800{ color:#f4796c !important; }
.bg-orange-100{ background:#3a220f !important; } .text-orange-800{ color:#f0904f !important; }