:root {
  color-scheme: light;
  --azul: #0C004C; --azul-licht: #1a1a6e;
  --inkt: #17142e; --zacht: #504e63; --stil: #6b6980; --accent-zacht: #554d82;
  --papier: #ffffff; --papier-2: #f4f6fb; --veld: #f4f6fb; --veld-hoog: #ffffff;
  --lijn: #b1adc6; --nevel: #d3d1df;
  --cta-bg: #0C004C; --cta-tekst: #ffffff;
  --merk: var(--azul);
  --schaduw-kleur: 12, 0, 76;
  --balk-bg: #f6efd0; --balk-tekst: #4a3d00;
  --font-heading: "Schibsted Grotesk", "Schibsted Grotesk Fallback", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --koppen: var(--font-heading);
  --tekst: var(--font-sans);
}
[data-theme="dark"] {
  color-scheme: dark;
  --azul: #c9c3ea; --azul-licht: #ffffff;
  --inkt: #eceaf6; --zacht: #b6b2ce; --stil: #8b87a8; --accent-zacht: #8f89bb;
  --papier: #0e0b24; --papier-2: #131030; --veld: #171334; --veld-hoog: #1c1840;
  --lijn: #2c2752; --nevel: #221e45;
  --cta-bg: #ECB652; --cta-tekst: #0C004C;
  --merk: #ECB652;
  --schaduw-kleur: 0, 0, 0;
  --balk-bg: #2b2610; --balk-tekst: #efe3a9;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: var(--azul); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ik { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.sla-over { position: absolute; left: -9999px; top: 0; }
.sla-over:focus { left: 16px; top: 12px; z-index: 80; background: var(--papier); color: var(--azul); padding: 8px 14px; border: 2px solid var(--azul); font-weight: 700; }

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

.proefbalk { background: var(--balk-bg); color: var(--balk-tekst); font: 600 12px/1.4 var(--font-label); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 6px 16px; }

.binnen { width: 100%; max-width: 72rem; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

.kop { position: sticky; top: 0; z-index: 50; background: var(--papier); border-bottom: 1px solid var(--lijn); transition: box-shadow 300ms cubic-bezier(.4, 0, .2, 1); }
.kop.is-gescrold { box-shadow: 0 1px 2px rgba(var(--schaduw-kleur), .04), 0 6px 18px rgba(var(--schaduw-kleur), .05); }
.kop-binnen { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; height: 5rem; display: flex; align-items: center; gap: 1.25rem; }
.merk { font: 700 20px/1 var(--font-heading); color: var(--merk); text-decoration: none; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.merk span { font-weight: 400; }
.kop-nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; font: 500 15px/1.3 var(--font-sans); }
.kop-nav a { color: var(--inkt); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.kop-nav .nav-alles, .kop-nav .nav-doemee, .kop-nav .nav-afspraken { display: none; }
@media (min-width: 480px) { .kop-nav .nav-afspraken { display: inline-flex; } }
@media (min-width: 768px) { .kop-nav { gap: 1.75rem; } .kop-nav .nav-alles, .kop-nav .nav-doemee { display: inline-flex; } }

.link-lijn { background-image: linear-gradient(var(--azul), var(--azul)); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 calc(100% - 10px); transition: background-size 300ms cubic-bezier(.22, 1, .36, 1); }
.kop-nav .link-lijn { background-position: 0 calc(100% - 9px); }
.link-lijn:hover, .link-lijn:focus-visible, .link-lijn[aria-current="page"] { background-size: 100% 1.5px; }
.voet .link-lijn { background-position: 0 calc(100% + 2px); padding-bottom: 3px; }

.thema-knop { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--zacht); cursor: pointer; transition: color 150ms cubic-bezier(.4, 0, .2, 1); }
.js .thema-knop { display: inline-flex; }
.thema-knop:hover { color: var(--azul); }
.thema-knop .ico { width: 20px; height: 20px; }
.thema-knop .ico-zon { display: none; }
[data-theme="dark"] .thema-knop .ico-maan { display: none; }
[data-theme="dark"] .thema-knop .ico-zon { display: inline; }

@keyframes fade-up { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
.fade-up { animation: fade-up 600ms ease-out both; animation-delay: var(--fade-delay, 0ms); }
.vertraging-1 { --fade-delay: 90ms; }
.vertraging-2 { --fade-delay: 180ms; }

@keyframes reveal-in { from { opacity: 0; translate: var(--reveal-x, 0px) var(--reveal-y, 32px); } to { opacity: 1; translate: 0 0; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry var(--reveal-enter, 0%) entry var(--reveal-exit, 35%); }
  }
}
.geen-tijdlijn .reveal { opacity: 0; translate: 0 32px; transition: opacity 600ms ease-out, translate 600ms ease-out; }
.geen-tijdlijn .reveal.is-zichtbaar { opacity: 1; translate: 0 0; }
@media print { .reveal, .fade-up { animation: none; opacity: 1; translate: none; } .geen-tijdlijn .reveal { opacity: 1; translate: none; } }

.dash::before { content: ""; display: block; width: 1.4rem; height: 3px; background: var(--azul); margin-bottom: 1rem; transition: width 350ms cubic-bezier(.22, 1, .36, 1); }
.dash-hover:hover .dash::before, .dash-hover:hover.dash::before { width: 2.4rem; }
@keyframes dash-teken { from { scale: 0 1; } to { scale: 1 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dash::before, .proza h2::after { transform-origin: left; animation: dash-teken linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

.kaart { display: block; background: var(--veld); border: 1px solid transparent; border-radius: 0 6px 6px 6px; padding: 1.5rem; color: inherit; text-decoration: none; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), border-color 150ms cubic-bezier(.4, 0, .2, 1); }
a.kaart:hover, a.kaart:focus-visible { background: var(--veld-hoog); border-color: var(--lijn); }
a.kaart:hover h3, a.kaart:hover h4, a.kaart:focus-visible h3, a.kaart:focus-visible h4 { color: var(--azul); }

.knop { display: inline-block; background: var(--cta-bg); color: var(--cta-tekst); padding: .75rem 1.5rem; font: 600 .875rem/1.3 var(--font-sans); border-radius: .25rem; text-decoration: none; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1); }
.knop:hover, .knop:focus-visible { background: var(--azul-licht); color: #ffffff; }
[data-theme="dark"] .knop:hover, [data-theme="dark"] .knop:focus-visible { background: #ffffff; color: #0C004C; }
.chip { display: inline-block; font: 400 .75rem/1rem var(--font-label); border: 1px solid var(--lijn); border-radius: .25rem; padding: .375rem .75rem; color: var(--zacht); background: none; text-decoration: none; transition: color 150ms, border-color 150ms; }
a.chip:hover, a.chip:focus-visible, button.chip:hover { color: var(--azul); border-color: var(--accent-zacht); }

.knop-ico { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .75rem 1.25rem; border: 1.5px solid transparent; }
.knop-ico .ik { stroke-width: 1.75; }
.knop-twee { background: none; border-color: var(--azul); color: var(--azul); }
.knop-twee:hover, .knop-twee:focus-visible { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-tekst); }
[data-theme="dark"] .knop-twee:hover, [data-theme="dark"] .knop-twee:focus-visible { background: #ffffff; border-color: #ffffff; color: #0C004C; }
.knop-klein { min-height: 40px; padding: .5rem 1rem; }
.chip-ico { display: inline-flex; align-items: center; gap: .4rem; }
.chip-ico .ik { color: var(--accent-zacht); }

.stempel { display: inline-block; border: 1px solid var(--lijn); border-radius: .25rem; padding: 0 .5rem; font: 500 11px/1.7 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--zacht); margin-left: 4px; white-space: nowrap; vertical-align: 1px; }
.status { display: inline-block; margin: 4px 0 0; padding: 1px 9px; border: 1px dashed currentColor; border-radius: 99px; font: 600 12px/1.6 var(--font-sans); color: var(--zacht); white-space: nowrap; }

.stukkop { padding-bottom: 1.25rem; }
.kopregel { font: 500 12px/1.9 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--stil); }
.kopregel .stempel { vertical-align: 0; }
.kop-tijd { display: inline-flex; align-items: center; gap: .35rem; vertical-align: top; }
.kop-tijd .ik { color: var(--accent-zacht); }
.kopregel .pdf { display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; margin-left: 6px; padding: 0 .6rem; border: 1px solid var(--accent-zacht); border-radius: .25rem; font: 600 12px/1.7 var(--font-label); font-variant-numeric: tabular-nums; letter-spacing: .1em; color: var(--azul); text-decoration: none; transition: background-color 150ms, color 150ms; }
.kopregel .pdf:hover, .kopregel .pdf:focus-visible { background: var(--cta-bg); color: var(--cta-tekst); }
.stukkop h1 { margin: .9rem 0 .8rem; font: 500 clamp(32px, 6.4vw, 52px)/1.1 var(--font-heading); color: var(--inkt); letter-spacing: -.025em; overflow-wrap: break-word; }
.ondertitel { font: 400 clamp(18px, 3.4vw, 22px)/1.5 var(--font-sans); color: var(--zacht); max-width: 38rem; overflow-wrap: anywhere; }

.tekst { font-size: 18px; line-height: 1.7; overflow-wrap: break-word; }
.tekst > * + *, .blok > * + * { margin-top: 1em; }
.blok { margin-top: 2.8em; }
.tekst > .blok:first-child { margin-top: 0; }
.tekst h2 { font: 500 clamp(24px, 5vw, 32px)/1.2 var(--font-heading); color: var(--inkt); letter-spacing: -.025em; }
.tekst h3 { margin-top: 1.7em; font: 600 21px/1.3 var(--font-heading); color: var(--inkt); letter-spacing: -.01em; }
.tekst h4, .tekst h5, .tekst h6 { margin-top: 1.5em; font: 600 18px/1.3 var(--font-heading); }
.tekst h2 + *, .tekst h3 + *, .tekst h4 + * { margin-top: .6em; }
.tekst ul, .tekst ol { padding-left: 1.4em; }
.tekst ul { list-style: disc; }
.tekst ol { list-style: decimal; }
.tekst li + li { margin-top: .5em; }
.tekst li > ul, .tekst li > ol { margin-top: .5em; }
.tekst li::marker { color: var(--accent-zacht); }
.tekst blockquote { padding: 2px 0 2px 18px; border-left: 3px solid var(--lijn); color: var(--zacht); }
.tekst hr { border: 0; border-top: 1px solid var(--lijn); margin: 2em 0; }
code, kbd, samp { font-family: inherit; font-size: 1em; background: var(--veld); padding: 1px 5px; border-radius: 3px; }
pre { font-family: inherit; font-size: 1em; background: var(--veld); }
.tekst code { font: inherit; background: var(--veld); padding: 1px 5px; border-radius: 3px; }
.tekst pre { font-family: inherit; overflow-x: auto; background: var(--veld); padding: 14px 16px; font-size: 14px; line-height: 1.5; border-radius: 0 6px 6px 6px; }
.tekst pre code { background: none; padding: 0; font-size: inherit; }
.tekst .status { margin-left: .5em; margin-top: 0; }
.tekst a { text-decoration-thickness: 1px; }

.proza { counter-reset: hoofdstuk; }
.proza h2 { counter-increment: hoofdstuk; position: relative; padding-top: 1.1rem; }
.proza h2::after { content: ""; position: absolute; left: 0; top: 0; width: 1.4rem; height: 3px; background: var(--azul); }
@media (min-width: 768px) {
  .proza h2::before { content: counter(hoofdstuk); position: absolute; left: -2.9rem; top: calc(1.1rem + .55em); font: 600 13px/1 var(--font-label); font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--accent-zacht); }
  .blok-samenvatting h2::before { left: calc(-2.9rem - 1.5rem); }
  .leeslijn { position: relative; }
  .leeslijn::before { content: ""; position: absolute; left: -1.4rem; top: .25rem; bottom: .25rem; width: 1px; background: var(--lijn); }
  .leeslijn::after { content: ""; position: absolute; left: -1.4rem; top: .25rem; bottom: .25rem; width: 2px; margin-left: -.5px; background: var(--azul); transform-origin: top; scale: 1 0; }
}
@keyframes leeslijn-vul { from { scale: 1 0; } to { scale: 1 1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .leeslijn::after { animation: leeslijn-vul linear both; animation-timeline: view(); animation-range: cover 5% cover 65%; }
  }
}
.geen-tijdlijn .leeslijn::after { scale: 1 var(--vul, 0); }

.tekst .blok-samenvatting { background: var(--veld); border-radius: 0 6px 6px 6px; padding: 1.5rem 1.5rem 1.6rem; }

.tabel { overflow-x: auto; border-top: 1px solid var(--lijn); }
.tabel table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.tabel th, .tabel td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel th { font: 500 12px/1.3 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--stil); }
.tabel .rechts { text-align: right; padding-right: 0; padding-left: 14px; font-variant-numeric: tabular-nums; }
.tabel .midden { text-align: center; }

.stuk-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; width: 100%; margin: 2.5rem auto 0; padding: 0 1.5rem; }
.stuk-nav-uitleg { max-width: 38rem; }
.stuk-nav-proefstuk { max-width: 62rem; }
.stuk-nav-vakstuk { max-width: 72rem; }
.stuk-vorige, .stuk-volgende { display: grid; align-items: center; column-gap: .9rem; min-height: 48px; padding: 1rem 1.25rem; background: var(--veld); border: 1px solid transparent; border-radius: 0 6px 6px 6px; color: var(--inkt); text-decoration: none; transition: background-color 150ms cubic-bezier(.4, 0, .2, 1), border-color 150ms cubic-bezier(.4, 0, .2, 1); }
.stuk-vorige { grid-template-columns: auto minmax(0, 1fr); }
.stuk-vorige .ik { grid-column: 1; grid-row: 1 / 3; }
.stuk-vorige .stuk-nav-kop, .stuk-volgende .stuk-nav-kop { grid-row: 1; }
.stuk-vorige .stuk-nav-titel, .stuk-volgende .stuk-nav-titel { grid-row: 2; }
.stuk-vorige .stuk-nav-kop, .stuk-vorige .stuk-nav-titel { grid-column: 2; }
.stuk-volgende .stuk-nav-kop, .stuk-volgende .stuk-nav-titel { grid-column: 1; }
.stuk-volgende { grid-template-columns: minmax(0, 1fr) auto; }
.stuk-volgende .ik { grid-row: 1 / 3; grid-column: 2; }
.stuk-vorige:hover, .stuk-vorige:focus-visible, .stuk-volgende:hover, .stuk-volgende:focus-visible { background: var(--veld-hoog); border-color: var(--lijn); }
.stuk-vorige:hover .stuk-nav-titel, .stuk-vorige:focus-visible .stuk-nav-titel, .stuk-volgende:hover .stuk-nav-titel, .stuk-volgende:focus-visible .stuk-nav-titel { color: var(--azul); }
.stuk-nav-kop { font: 500 12px/1.5 var(--font-label); text-transform: uppercase; letter-spacing: .1em; color: var(--stil); }
.stuk-nav-titel { font: 600 clamp(17px, 2.6vw, 19px)/1.35 var(--font-heading); letter-spacing: -.01em; color: var(--inkt); overflow-wrap: anywhere; transition: color 150ms cubic-bezier(.4, 0, .2, 1); }
.stuk-terug { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; justify-self: start; color: var(--azul); font: 500 15px/1.3 var(--font-sans); text-decoration: none; }
.stuk-terug:hover span, .stuk-terug:focus-visible span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (min-width: 768px) {
  .stuk-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .stuk-volgende { grid-column: 2; }
  .stuk-terug { grid-column: 1 / -1; }
}

.citeer-actie { margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.kopieer { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; border: 1.5px solid var(--accent-zacht); border-radius: .25rem; background: none; color: var(--azul); font: 500 14px/1.3 var(--font-sans); cursor: pointer; transition: background-color 150ms, color 150ms; }
.kopieer[hidden] { display: none; }
.kopieer:hover, .kopieer:focus-visible { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-tekst); }
.kopieer .ik { stroke-width: 1.75; }
.kopieer-melding { font-size: 14px; color: var(--zacht); }

.stuk-einde { height: 1px; }

.voet { margin-top: 6rem; background: var(--papier-2); border-top: 1px solid var(--lijn); color: var(--inkt); font-size: 15px; }
.voet-binnen { max-width: 72rem; margin: 0 auto; padding: 3rem 1.5rem; display: grid; gap: 2rem; }
.voet-kop { font: 500 12px/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .12em; color: var(--stil); margin-bottom: .75rem; }
.voet p { max-width: 26rem; overflow-wrap: anywhere; }
.voet a { color: var(--azul); text-decoration: none; }
.voet-onder { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.voet-onder a { display: inline-flex; align-items: center; min-height: 44px; }
.grondbalk { height: .375rem; background: var(--merk); }
@media (min-width: 768px) {
  .voet-binnen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; padding: 4rem 1.5rem; }
}
@media print { .proefbalk, .kop-nav, .thema-knop, .sla-over, .hoofdstukbalk { display: none; } .kop { position: static; } }