/* Lettertypen uit ons eigen project. Geen verzoek meer naar een externe
   partij, dus geen enkele externe verbinding bij het laden van de site.
   Instrument Serif, IBM Plex en Archivo staan onder de SIL Open Font
   License, die zelf hosten uitdrukkelijk toestaat. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/archivo-latin-600.woff2') format('woff2');
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext-600.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-latin-ext-500.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-ext-400.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-500.woff2') format('woff2');
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-ext-500.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-ext-600.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-700.woff2') format('woff2');
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-latin-ext-700.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-400.woff2') format('woff2');
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-latin-ext-400.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


  * { box-sizing: border-box; }
  body { margin: 0; background: #F4F1EA; font-family: 'IBM Plex Sans', sans-serif; }
  a { color: inherit; text-decoration: none; }
  a:hover { color: #D71920; }
  button { font-family: 'IBM Plex Sans', sans-serif; }
  input, select, textarea { font-family: 'IBM Plex Sans', sans-serif; }

  /* kaartrasters: geen gevuld vlak achter de kaarten */
  #site div[style*="gap: 1px"] { background: transparent !important; border: none !important; gap: 20px !important; }
  #site div[style*="gap: 1px"] > div, #site div[style*="gap: 1px"] > button,
  #site div[style*="gap: 1px"] > a { border: 1px solid #E4E1D9 !important; }

  /* Hover-opmaak uit de bundler. Geldt zowel voor de knoppen die interactief
     zijn gebleven als voor de kaarten die nu links zijn. */
  #site .scp0:hover { border-color: #0A1C3D !important; background: #FFFFFF !important; }
  #site .scp1:hover { background: rgba(10, 28, 61, 0.05) !important; }
  #site .scp2:hover { background: #FBFAF7 !important; }
  #site .scp3:hover { background: #FFFFFF !important; }
  #site .scp4:hover, #site .onderwerp-tab:hover { border-color: #0A1C3D !important; }

  /* --- Responsive: het ontwerp is gemaakt op 1440 px; hieronder alleen de afwijkingen --- */
  @media (max-width: 1439px) {
    body { background: #fff; }
    #site { width: 100% !important; max-width: 100% !important; }
  }
  @media (max-width: 1180px) {
    #site > [data-screen-label] { padding: 0 !important; }
    #site [data-screen-label] > div { padding-left: 36px !important; padding-right: 36px !important; }
    #site > div:last-of-type { padding-left: 36px !important; padding-right: 36px !important; }
    #site > div#siteheader { padding: 10px 28px !important; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
    #site > div#siteheader > div { flex-wrap: wrap; gap: 16px !important; }
    #site > div#siteheader button, #site > div#siteheader a { padding: 6px 8px !important; }
    #site > div#siteheader > button, #site > div#siteheader > a { padding: 11px 18px !important; }
    #site h1 { font-size: 52px !important; line-height: 1.04 !important; }
    #site h2 { font-size: 34px !important; }
    #site div[style*="grid-template-columns: 1fr 1.4fr"],
    #site div[style*="grid-template-columns: 1fr 1.3fr"],
    #site div[style*="grid-template-columns: 1fr 1.25fr"],
    #site div[style*="grid-template-columns: 1fr 1.2fr"],
    #site div[style*="grid-template-columns: 1fr 1.1fr"],
    #site div[style*="grid-template-columns: 1.3fr 1fr"],
    #site div[style*="grid-template-columns: 1.35fr 1fr"],
    #site div[style*="grid-template-columns: 1.25fr 1fr"],
    #site div[style*="grid-template-columns: 1.2fr 1fr 1fr"],
    #site div[style*="grid-template-columns: 760px"],
    #site div[style*="grid-template-columns: minmax(0, 1fr) 520px"],
    #site div[style*="grid-template-columns: minmax(0, 1fr) minmax(420px, 560px)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
    #site div[style*="grid-template-columns: repeat(4, 1fr)"],
    #site div[style*="grid-template-columns: repeat(5, 1fr)"],
    #site div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #site div[style*="grid-template-columns: 200px repeat(4, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #site div[style*="position: sticky"][style*="top: 100px"] { position: static !important; }
  }
  @media (max-width: 820px) {
    #site [data-screen-label] > div { padding: 44px 22px !important; }
    #site > div:last-of-type { padding: 36px 22px !important; }
    #site > div#siteheader { padding: 10px 0 10px 22px !important; gap: 10px; }
    #site > div#siteheader > div { flex-wrap: nowrap !important; gap: 14px !important; overflow-x: auto; max-width: 100%; padding-right: 22px; }
    #site > div#siteheader > div > div { flex-wrap: nowrap !important; }
    #site > div#siteheader button, #site > div#siteheader a { min-height: 44px; white-space: nowrap; }
    /* Een knop centreert zijn tekst verticaal, een link niet. Zodra de
       minimumhoogte van 44px meedoet, moeten de omgezette links dat nadoen. */
    #site > div#siteheader a { display: inline-flex !important; align-items: center; justify-content: center; }
    #site > div#siteheader > button, #site > div#siteheader > a { margin: 0 22px 2px; }
    #site h1 { font-size: 36px !important; line-height: 1.08 !important; letter-spacing: -0.015em !important; }
    #site h2 { font-size: 27px !important; line-height: 1.14 !important; }
    #site h3 { font-size: 19px !important; }
    #site p, #site span, #site div, #site a, #site button, #site input, #site select, #site textarea { max-width: 100% !important; }
    #site div[style*="display: grid"] { gap: 22px !important; }
    #site div[style*="gap: 1px"] { gap: 16px !important; }
    #site div[style*="grid-template-columns: 200px repeat(4, 1fr)"] { background: #fff !important; border-bottom: 1px solid #E4E1D9 !important; }
    #site div[style*="grid-template-columns: 1fr 1fr"],
    #site div[style*="grid-template-columns: repeat(4, 1fr)"],
    #site div[style*="grid-template-columns: repeat(5, 1fr)"],
    #site div[style*="grid-template-columns: 200px repeat(4, 1fr)"],
    #site div[style*="grid-template-columns: 52px 1fr 130px"],
    #site div[style*="grid-template-columns: 64px 1fr 1fr 120px"],
    #site div[style*="grid-template-columns: 150px 1fr 130px"],
    #site div[style*="grid-template-columns: 44px 1fr 150px"],
    #site button[style*="grid-template-columns: 150px 1fr 130px"],
    #site button[style*="grid-template-columns: 44px 1fr 150px"],
    #site a[style*="grid-template-columns: 150px 1fr 130px"],
    #site a[style*="grid-template-columns: 44px 1fr 150px"],
    #site div[style*="grid-template-columns: 128px 1fr"],
    #site div[style*="grid-template-columns: 130px 1fr"],
    #site div[style*="grid-template-columns: 200px 1fr"],
    #site div[style*="grid-template-columns: 210px 1fr"],
    #site div[style*="grid-template-columns: 230px 1fr"],
    #site div[style*="grid-template-columns: 250px 1fr"],
    #site div[style*="grid-template-columns: 64px 1fr"],
    #site div[style*="grid-template-columns: 96px 1fr"],
    #site div[style*="grid-template-columns: 78px 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
    #agendatabs { flex-direction: column !important; }
    #agendatabs button { margin-right: 0 !important; margin-bottom: 0 !important; padding: 16px 0 !important; border-bottom: 1px solid #DAD7CF !important; }
    #site [data-screen-label] div[style*="display: flex"][style*="gap: 14px"] { flex-wrap: wrap !important; }
    #site [data-screen-label] div[style*="gap: 14px"] > a[style*="padding: 16px 26px"],
    #site [data-screen-label] div[style*="gap: 14px"] > button[style*="padding: 16px 26px"],
    #site [data-screen-label] div[style*="gap: 14px"] > a[style*="padding: 15px 24px"],
    #site [data-screen-label] div[style*="gap: 14px"] > button[style*="padding: 15px 24px"] { flex: 1 1 100% !important; text-align: center; }
    #site a[style*="padding: 16px 26px"], #site button[style*="padding: 16px 26px"] { max-width: 100%; text-align: center; }
  }


/* === MFG: aanvullende regels na conversie === */

/* Geconverteerde nav-buttons (nu <a> elementen) */
#site a { color: inherit; text-decoration: none; }
#site a:hover { color: #D71920; }

/* Focus-styling voor keyboard-navigatie */
#site a:focus-visible, #site button:focus-visible, #site input:focus-visible,
#site select:focus-visible, #site textarea:focus-visible {
  outline: 2px solid #D71920;
  outline-offset: 2px;
}

/* Actief menu-item. Alleen het streepje eronder wordt rood; de letter blijft
   wit, precies zoals de referentie het doet. */
#site a[aria-current="page"] {
  border-bottom-color: #D71920 !important;
}

/* Print styles */
@media print {
  #site button, #site a[style*="background: rgb(215, 25, 32)"] { display: none !important; }
  #site { width: 100% !important; }
  body { background: white !important; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Onderwerp-tabs op /contact: keuzerondjes met de opmaak van de knoppen.
   Werkt zonder JavaScript. */
#site .onderwerp-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
#site .onderwerp-tab:has(.onderwerp-radio:checked),
#site .onderwerp-tab.is-active {
  background: #0A1C3D !important;
  color: #FFFFFF !important;
  border-color: #0A1C3D !important;
}
#site .onderwerp-tab:focus-within {
  outline: 2px solid #D71920;
  outline-offset: 2px;
}

/* Wegwijzer en agenda. Zonder JavaScript staan alle agendapanelen onder elkaar
   en toont de wegwijzer een gewone link. Met JavaScript één paneel tegelijk.
   !important is nodig omdat de redesign de display-waarde inline zet, en een
   inline stijl wint anders altijd van een stylesheet. */
#site [data-wizard-step] { display: none !important; }
.js #site [data-wizard-step].is-active { display: flex !important; }
#site [data-wizard-nojs] { display: flex !important; }
.js #site [data-wizard-nojs] { display: none !important; }
#agendatabs { display: none !important; }
.js #agendatabs { display: flex !important; }
.js #site [data-agenda-panel] { display: none !important; }
.js #site [data-agenda-panel].is-active { display: grid !important; }

/* Mobiel uitklapmenu. Boven 820px staan het selectievakje en de knop op
   display:none, dus daar verandert niets aan de menubalk. Onder 820px wordt de
   menurij een uitklaplijst achter een hamburgerknop. Geen JavaScript nodig. */
#site .menu-schakelaar, #site .menu-knop { display: none; }

@media (max-width: 820px) {
  #site > div#siteheader > div { position: relative; }
  #site .menu-schakelaar {
    display: block;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
  }
  /* de hamburger hoort rechts in de balk, niet vlak achter het logo */
  #site > div#siteheader > div { flex: 1 1 auto; }
  #site .menu-knop {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #FFFFFF;
    cursor: pointer;
  }
  #site .menu-schakelaar:focus-visible + .menu-knop {
    outline: 2px solid #D71920;
    outline-offset: 2px;
  }
  #site .menu-schakelaar:checked + .menu-knop { color: #E8636B; }
  #site .navrij { display: none !important; }
  #site .menu-schakelaar:checked ~ .navrij {
    display: flex !important;
    position: absolute;
    top: 54px;
    left: 0;
    z-index: 50;
    flex-direction: column;
    gap: 0 !important;
    min-width: 216px;
    background: #0A1C3D;
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 6px 0;
  }
  #site .menu-schakelaar:checked ~ .navrij > a {
    display: block !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    border-bottom: none !important;
  }
  #site .menu-schakelaar:checked ~ .navrij > a[aria-current="page"] {
    box-shadow: inset 3px 0 0 #D71920;
  }
  #site > div#siteheader > div { overflow-x: visible !important; }

}

@media (max-width: 680px) {
  /* Twee rasters klappen op smalle schermen niet in. De regel die dat zou doen
     schrijft "minmax(0, 1fr)" terwijl er in de pagina "minmax(0px, 1fr)" staat,
     dus hij greep nooit. Daardoor bleef de wegwijzer 520px en het formulier
     420px breed, en schoof de pagina zijwaarts weg. */
  #site div[style*="grid-template-columns: minmax(0px, 1fr) 520px"],
  #site div[style*="grid-template-columns: minmax(0px, 1fr) minmax(420px, 560px)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }
  /* Footerkolommen naast elkaar passen niet op een telefoon. */
  #site div[style*="gap: 64px"] { flex-wrap: wrap !important; gap: 30px 36px !important; }
  /* Rijen met tekst links en een knop rechts passen niet naast elkaar op een
     telefoon. Laat ze afbreken in plaats van uitsteken. */
  #site div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap !important;
  }
  /* Rijtjes met feiten naast elkaar, gescheiden door grote tussenruimte. */
  #site div[style*="display: flex"][style*="gap: 48px"] {
    flex-wrap: wrap !important;
    gap: 22px 32px !important;
  }
}