.vakstuk { padding-top: 3rem; }
.vakstuk .stukkop { border-bottom: 1px solid var(--lijn); margin-bottom: 1.75rem; padding-bottom: 1.75rem; }
.vak-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.inhoud { border-radius: 0 6px 6px 6px; background: var(--veld); padding: 1rem 1.25rem 1.1rem; align-self: start; }
.inhoud-kop { font: 500 12px/1.2 var(--font-label); text-transform: uppercase; letter-spacing: .12em; color: var(--stil); margin-bottom: .5rem; }
.inhoud a { display: block; padding: 5px 0; color: var(--inkt); text-decoration: none; font: 500 15px/1.35 var(--font-sans); overflow-wrap: anywhere; }
.inhoud a:hover, .inhoud a:focus-visible { color: var(--azul); text-decoration: underline; text-decoration-thickness: 1px; }
.inhoud .niveau3 { display: none; }
.vakstuk .tekst > .blok { padding-top: .25rem; }
.vakstuk .tekst h2, .vakstuk .tekst h3 { scroll-margin-top: 1.5rem; }
@media (min-width: 768px) { .vakstuk .stukkop { border-bottom: 0; margin-bottom: 0; } }
@media (min-width: 768px) and (max-width: 999px) { .vakstuk .tekst { margin-left: 3rem; } }
@media (min-width: 1000px) {
  .vak-raster { grid-template-columns: 16rem minmax(0, 46rem); gap: 4.5rem; }
  .vak-raster.zonder-inhoud { grid-template-columns: minmax(0, 46rem); }
  .inhoud { position: sticky; top: 7.5rem; max-height: calc(100vh - 9rem); overflow-y: auto; background: none; border-radius: 0; border-top: 1px solid var(--lijn); padding: 1rem 0 0; }
  .inhoud .niveau3 { display: block; }
  .inhoud .niveau3 a { padding-left: 14px; font-weight: 400; font-size: 14px; color: var(--zacht); }
}

.hoofdstukbalk { display: none; position: sticky; top: 5rem; z-index: 40; background: var(--papier); border-bottom: 1px solid var(--lijn); padding: .75rem 0; margin-bottom: 1.25rem; }
.hoofdstuk-rij { display: flex; gap: 4px; }
.hoofdstuk-segment { position: relative; flex: 1 1 0; height: 3px; overflow: hidden; border-radius: 9999px; background: var(--nevel); }
.hoofdstuk-segment::after { content: ""; position: absolute; inset: 0; background: var(--azul); transform-origin: left; scale: 0 1; }
@keyframes segment-fill { from { scale: 0 1; } to { scale: 1 1; } }
.vakstuk { timeline-scope: --hs1, --hs2, --hs3, --hs4, --hs5, --hs6, --hs7, --hs8, --hs9, --hs10, --hs11, --hs12, --hs13, --hs14, --hs15, --hs16; }
.hs-1 { view-timeline-name: --hs1; }
.hs-2 { view-timeline-name: --hs2; }
.hs-3 { view-timeline-name: --hs3; }
.hs-4 { view-timeline-name: --hs4; }
.hs-5 { view-timeline-name: --hs5; }
.hs-6 { view-timeline-name: --hs6; }
.hs-7 { view-timeline-name: --hs7; }
.hs-8 { view-timeline-name: --hs8; }
.hs-9 { view-timeline-name: --hs9; }
.hs-10 { view-timeline-name: --hs10; }
.hs-11 { view-timeline-name: --hs11; }
.hs-12 { view-timeline-name: --hs12; }
.hs-13 { view-timeline-name: --hs13; }
.hs-14 { view-timeline-name: --hs14; }
.hs-15 { view-timeline-name: --hs15; }
.hs-16 { view-timeline-name: --hs16; }
@media (min-width: 768px) {
  .geen-tijdlijn .hoofdstukbalk { display: block; }
  .geen-tijdlijn .hoofdstuk-segment::after { scale: var(--vul, 0) 1; }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .hoofdstukbalk { display: block; }
    .hoofdstuk-segment[data-hoofdstuk="1"]::after { animation: segment-fill linear both; animation-timeline: --hs1; }
    .hoofdstuk-segment[data-hoofdstuk="2"]::after { animation: segment-fill linear both; animation-timeline: --hs2; }
    .hoofdstuk-segment[data-hoofdstuk="3"]::after { animation: segment-fill linear both; animation-timeline: --hs3; }
    .hoofdstuk-segment[data-hoofdstuk="4"]::after { animation: segment-fill linear both; animation-timeline: --hs4; }
    .hoofdstuk-segment[data-hoofdstuk="5"]::after { animation: segment-fill linear both; animation-timeline: --hs5; }
    .hoofdstuk-segment[data-hoofdstuk="6"]::after { animation: segment-fill linear both; animation-timeline: --hs6; }
    .hoofdstuk-segment[data-hoofdstuk="7"]::after { animation: segment-fill linear both; animation-timeline: --hs7; }
    .hoofdstuk-segment[data-hoofdstuk="8"]::after { animation: segment-fill linear both; animation-timeline: --hs8; }
    .hoofdstuk-segment[data-hoofdstuk="9"]::after { animation: segment-fill linear both; animation-timeline: --hs9; }
    .hoofdstuk-segment[data-hoofdstuk="10"]::after { animation: segment-fill linear both; animation-timeline: --hs10; }
    .hoofdstuk-segment[data-hoofdstuk="11"]::after { animation: segment-fill linear both; animation-timeline: --hs11; }
    .hoofdstuk-segment[data-hoofdstuk="12"]::after { animation: segment-fill linear both; animation-timeline: --hs12; }
    .hoofdstuk-segment[data-hoofdstuk="13"]::after { animation: segment-fill linear both; animation-timeline: --hs13; }
    .hoofdstuk-segment[data-hoofdstuk="14"]::after { animation: segment-fill linear both; animation-timeline: --hs14; }
    .hoofdstuk-segment[data-hoofdstuk="15"]::after { animation: segment-fill linear both; animation-timeline: --hs15; }
    .hoofdstuk-segment[data-hoofdstuk="16"]::after { animation: segment-fill linear both; animation-timeline: --hs16; }
    }
  }
}