@layer reset, tokens, layout, components, utilities;

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 360ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

::view-transition-group(kenteken) {
  animation-duration: 500ms;
  animation-timing-function: cubic-bezier(0.3, 0.6, 0.2, 1);
}

::view-transition-old(wolk) {
  animation: element-vervaagt 260ms ease-out both;
}

::view-transition-new(wolk) {
  animation: element-verschijnt 320ms ease-in 120ms both;
}

::view-transition-group(bpm-boog) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

::view-transition-old(kenteken),
::view-transition-new(kenteken) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(kenteken) {
  opacity: 0;
}

::view-transition-new(kenteken) {
  opacity: 1;
}

:root:not(:has(body.stage)):not(:has(.bpm)) {
  &::view-transition-group(kenteken) {
    perspective: 1200px;
  }

  &::view-transition-image-pair(kenteken) {
    animation: plate-flip 500ms cubic-bezier(0.3, 0.6, 0.2, 1);
  }
}

:root:has(body.stage):not(:has(.plate-holder[data-error="true"])) {
  &::view-transition-group(kenteken) {
    perspective: 1200px;
  }

  &::view-transition-image-pair(kenteken) {
    animation: plate-flip-back 500ms cubic-bezier(0.3, 0.6, 0.2, 1);
  }
}

@keyframes plate-flip {
  from {
    transform: rotateX(0turn);
  }
  to {
    transform: rotateX(2turn);
  }
}

@keyframes plate-flip-back {
  from {
    transform: rotateX(0turn);
  }
  to {
    transform: rotateX(-2turn);
  }
}

:root:has(body.stage) {
  &::view-transition-new(zoekkop),
  &::view-transition-new(zoekknoppen),
  &::view-transition-new(bpm-kop),
  &::view-transition-new(bpm-titel),
  &::view-transition-new(bpm-knop),
  &::view-transition-new(bpm-boog) {
    animation: element-verschijnt 260ms ease-out 120ms both;
  }
}

:root:has(.bpm) {
  &::view-transition-group(kenteken) {
    perspective: 1600px;
    animation-duration: 500ms;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  &::view-transition-image-pair(kenteken) {
    animation: plaat-draai 500ms cubic-bezier(0.3, 0.6, 0.2, 1);
  }

  &::view-transition-old(kenteken) {
    animation: element-vervaagt 200ms linear 160ms both;
    opacity: 1;
  }

  &::view-transition-new(kenteken) {
    animation: element-verschijnt 200ms linear 160ms both;
    opacity: 0;
  }

  &::view-transition-old(zoekkop) {
    animation: element-vervaagt 160ms ease-out both;
  }

  &::view-transition-old(zoekknoppen) {
    animation: element-vervaagt 160ms ease-out 50ms both;
  }

  &::view-transition-old(bpm-kop) {
    animation: element-vervaagt 140ms ease-out both;
  }

  &::view-transition-old(bpm-titel) {
    animation: element-vervaagt 140ms ease-out 60ms both;
  }

  &::view-transition-old(bpm-knop) {
    animation: element-vervaagt 140ms ease-out 120ms both;
  }

  &::view-transition-old(wolk) {
  animation: element-vervaagt 260ms ease-out both;
}

::view-transition-new(wolk) {
  animation: element-verschijnt 320ms ease-in 120ms both;
}

::view-transition-group(bpm-boog) {
    animation-duration: 380ms;
  }

  &::view-transition-old(bpm-boog) {
    animation: lijn-rolt-op 280ms cubic-bezier(0.4, 0, 0.2, 1) 80ms both;
  }
}

@keyframes plaat-draai {
  from {
    transform: rotateX(0turn);
  }
  to {
    transform: rotateX(1turn);
  }
}

@keyframes element-verschijnt {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes element-vervaagt {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes lijn-rolt-op {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 100% 0 0);
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    scrollbar-gutter: stable;
  }

  body {
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }

  ul,
  ol {
    padding-inline-start: 0;
    list-style: none;
  }

  table {
    border-collapse: collapse;
  }

  :where(a) {
    color: inherit;
  }

  :focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}

@layer tokens {
  :root {
    --nacht: #16191a;
    --nacht-vlak: #1f2324;
    --nacht-inkt: #f1f2ee;
    --nacht-grafiet: #949a94;
    --nacht-rand: #3a403a;

    --vellum: var(--nacht);
    --sheet: var(--nacht-vlak);
    --blad: #eef0ee;
    --blad-vlak: #f8f9f7;
    --ink: var(--nacht-inkt);
    --graphite: #6c726b;
    --rule: var(--nacht-rand);
    --accent: #0047e0;
    --peil: #0b5fa5;
    --oxide: #a84a16;
    --oxide-text: color-mix(in srgb, var(--oxide) 55%, #fff);
    --peil-text: color-mix(in srgb, var(--peil) 45%, #fff);

    --on-fill: #ffffff;

    --accent-diep: color-mix(in srgb, var(--accent) 72%, #000);

    --graphite-text: var(--nacht-grafiet);
    --nacht-accent: color-mix(in srgb, var(--accent) 70%, #fff);
    --accent-text: var(--nacht-accent);

    --dot-far: rgb(255 255 255 / 0.16);
    --dot-near: rgb(255 255 255 / 0.3);

    --plate: #f3c300;
    --plate-ink: #161a17;
    --plate-hint: color-mix(in srgb, var(--plate-ink) 30%, var(--plate));
    --plate-lit: color-mix(in srgb, var(--plate) 62%, #fff);
    --plate-shade: color-mix(in srgb, var(--plate) 55%, #000);
    --holder: #070807;
    --eu-star: #ffcc00;

    --font-logo: "Archivo", "Space Grotesk", sans-serif;
    --font-logo-weight: 900;

    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --step--2: 0.75rem;
    --step--1: 0.875rem;
    --step-0: 0.9375rem;
    --step-1: 1.125rem;
    --step-2: 1.5rem;
    --display: clamp(2rem, 7vw, 3.4rem);

    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --duur-kort: 160ms;
    --duur-veeg: 340ms;

    --tracking-index: 0.14em;
    --stip-maat: 1px;
    --stip-stap: 5px;
    --stip-kleur: var(--rule);

    --lijn-h: repeating-linear-gradient(
      to right,
      var(--stip-kleur) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );
    --lijn-v: repeating-linear-gradient(
      to bottom,
      var(--stip-kleur) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );

    --lijn-h-accent: repeating-linear-gradient(
      to right,
      var(--accent-text) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );

    --hair: 1px dotted var(--rule);
    --radius: 2px;

    --radius-veld: 6px;
    --radius-vlak: 8px;

    --schaduw-rand: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
    --schaduw-paneel: 0 10px 24px -6px color-mix(in srgb, var(--ink) 22%, transparent);

    --besturing-hoogte: 2.75rem;
    --kolomkloof: 2.5rem;
    --sheet-inline: 68rem;

    --hoek-inzet: 1.5rem;
    --hoek-blok: 11rem;
    --hoek-marge: 1.5rem;
    --hoek-ronding: 1.75rem;
    --hoek-bandhoogte: 9rem;
    --leesmaat: 53rem;
    --titelmaat: clamp(1.75rem, 4vw, 2.5rem);
    --registermaat: 34rem;
    --nav-block-size: 3rem;
  }

  html {
    color-scheme: dark;

    background: var(--vellum);
  }

  :root:has(body.blad) {
    color-scheme: light;
    background: var(--blad);
  }

  body.blad {
    --vellum: var(--blad);
    --sheet: var(--blad-vlak);
    --ink: #16191a;
    --graphite: #6c726b;
    --graphite-text: #5c625c;
    --rule: #c8cdc7;

    --accent-text: var(--accent);
    --oxide-text: var(--oxide);
    --peil-text: var(--peil);

    --dot-far: rgb(22 25 26 / 0.16);
    --dot-near: rgb(22 25 26 / 0.3);

    --lijn-h: repeating-linear-gradient(
      to right,
      var(--rule) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );
    --lijn-v: repeating-linear-gradient(
      to bottom,
      var(--rule) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );
    --lijn-h-accent: repeating-linear-gradient(
      to right,
      var(--accent-text) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );
  }

  body {
    background: var(--vellum);
    isolation: isolate;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--step-0);
    line-height: 1.5;
    font-variant-numeric: tabular-nums lining-nums;
  }
}

@layer layout {
  .sheet {
    max-inline-size: var(--sheet-inline);
    margin-inline: auto;
    padding-inline: max(1.5rem, env(safe-area-inset-left)) max(1.5rem, env(safe-area-inset-right));
  }

  #wolk {
    view-transition-name: wolk;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    display: none;

    body.stage & {
      display: block;
    }

  }

  body.wolk-actief.stage::before,
  body.wolk-actief.stage::after {
    display: none;
  }

  body.stage::before,
  body.stage::after {
    content: "";
    position: fixed;
    inset: -12vmax;
    z-index: -1;
    pointer-events: none;
    transition: transform 400ms ease-out;
  }

  body.stage::before {
    background-image: radial-gradient(circle at center, var(--dot-far) 1px, transparent 1.5px);
    background-size: 26px 26px;
    animation: dot-drift 40s linear infinite;
    transform: translate3d(calc(var(--px, 0) * 20px), calc(var(--py, 0) * 20px), 0);
  }

  body.stage::after {
    background-image: radial-gradient(circle at center, var(--dot-near) 1.4px, transparent 2px);
    background-size: 68px 68px;
    animation: dot-drift 24s linear infinite reverse;
    transform: translate3d(calc(var(--px, 0) * 46px), calc(var(--py, 0) * 46px), 0);
  }

  @keyframes dot-drift {
    to {
      background-position: 260px 180px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.stage::before,
    body.stage::after {
      animation: none;
      transform: none;
      transition: none;
    }
  }

  .hero {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block: 18% 8%;
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(
        ellipse 50% 50% at center,
        rgb(255 255 255 / 0.07),
        transparent
      );
    }
  }

  .hero {
    min-block-size: 100svb;
    display: grid;
    grid-template-columns: min(52rem, 100%);
    justify-content: center;
    align-content: center;
    gap: clamp(2rem, 5vh, 3.25rem);
    text-align: center;
  }

  .quicknav {
    margin-block: 1.75rem;
    padding-block-start: 1.75rem;
    background-image: var(--lijn-h-accent);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;

    & ol {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 0.25rem;
      padding-block: 0.3rem;
      margin-inline: auto;
      max-inline-size: var(--sheet-inline);
    }

    & a {
      display: flex;
      align-items: center;
      gap: 0.45em;
      min-block-size: var(--besturing-hoogte);
      padding-inline: 0.7rem;
      border: 1px solid transparent;
      border-radius: var(--radius-veld);
      white-space: nowrap;
      text-decoration: none;
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
      transition:
        color var(--duur-kort) var(--ease-out),
        background-color var(--duur-kort) var(--ease-out);

      & .no {
        font-family: var(--font-mono);
        color: var(--accent-text);
      }

      &:hover {
        color: var(--ink);
        background-color: var(--sheet);
        border-color: var(--rule);
        box-shadow: var(--schaduw-rand);
      }
    }
  }

  .quicknav__rij {
    justify-content: center;
  }

  .railkolom {
    display: none;
  }

  .quicknav__teken,
  .quicknav__knopteken,
  .quicknav__keuze {
    display: none;
  }


  @media (width < 52rem) {
    .quicknav .quicknav__rij {
      display: none;
    }

    .quicknav__keuze {
      display: block;
      padding-block: 0.4rem;

      & .quicknav__knopteken {
        display: flex;
        align-items: center;
        color: var(--accent-text);

        & svg {
          inline-size: 1.05rem;
          block-size: 1.05rem;
        }
      }

      & .quicknav__opschrift {
        margin-inline-end: auto;
      }

      & summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.55rem;
        min-block-size: var(--besturing-hoogte);
        padding-inline: 0.7rem;
        border: 1px solid var(--rule);
        border-radius: var(--radius-veld);
        background-color: var(--sheet);
        box-shadow: var(--schaduw-rand);
        font-size: var(--step--2);
        text-transform: uppercase;
        letter-spacing: var(--tracking-index);
        color: var(--graphite-text);
        cursor: pointer;
        list-style: none;

        &::-webkit-details-marker {
          display: none;
        }
      }

      & .quicknav__opschrift {
        color: var(--accent-text);
      }

      &[open] .quicknav__pijl {
        transform: rotate(180deg);
      }

      & .quicknav__pijl {
        display: inline-block;
        transition: transform var(--duur-kort) var(--ease-out);
      }

      & ol {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        padding-block: 0.4rem 0.2rem;
      }

      & a {
        border-radius: 0;
        border-color: transparent;
        background-image: var(--lijn-h);
        background-repeat: no-repeat;
        background-size: 100% var(--stip-maat);
        background-position: bottom left;
      }
    }
  }



  body.stage .section {
    text-align: center;

    & .notice {
      margin-inline: auto;
      border-inline-start: none;
      padding-inline-start: 0;
      max-inline-size: 42rem;
    }

    & .cards {
      justify-content: center;
    }

    & .card {
      text-align: start;
    }
  }

  .section {
    background-image: var(--lijn-h-accent);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;
    padding-block-start: 1.75rem;
    margin-block-start: 2.5rem;
    scroll-margin-block-start: calc(var(--nav-block-size) + 1.5rem);
  }

  .section > * + * {
    margin-block-start: 1rem;
  }

  .scheiding {
    background-image: var(--lijn-h-accent);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;
    padding-block-start: 1.75rem;
    margin-block-start: 2.5rem;
  }

  .colophon {
    margin-block: 4rem 3rem;
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;
    padding-block-start: 1.25rem;
    font-size: var(--step--1);
    font-style: italic;
    color: var(--graphite-text);

    & p + p {
      margin-block-start: 0.6rem;
    }

    & a {
      color: var(--accent-text);
    }

    & kbd {
      font-family: var(--font-mono);
      font-style: normal;
      font-size: 0.95em;
    }
  }

}

@layer components {
  .index {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5em;
    font-size: var(--step--2);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);

    .hero & {
      justify-content: center;
    }

    & .no {
      font-family: var(--font-mono);
      font-weight: 500;
      color: var(--accent-text);
      letter-spacing: 0.04em;
    }

    & .title {
      color: var(--accent-text);
      font-weight: 500;
    }
  }

  .plate,
  .plate-field {
    --emboss:
      0 -1px 0 var(--plate-lit),
      1px 1px 0 var(--plate-shade),
      2px 3px 3px rgb(0 0 0 / 0.3);

    --sheet-relief:
      inset 0 1px 0 rgb(255 255 255 / 0.5),
      inset 0 -1px 0 rgb(0 0 0 / 0.22);
  }

  .plate {
    display: inline-flex;
    align-items: stretch;
    position: relative;
    color: var(--plate-ink);
    --plate-margin: 0.1em;
    --plate-frame: 0.055em;
    padding: calc(var(--plate-margin) + var(--plate-frame));
    border-radius: 0.16em;
    overflow: hidden;
    font-family: var(--font-mono);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--plate) 93%, #fff),
      var(--plate) 45%,
      color-mix(in srgb, var(--plate) 93%, #000)
    );
    box-shadow: var(--sheet-relief);

    &::before {
      content: "";
      position: absolute;
      inset: var(--plate-margin);
      border: var(--plate-frame) solid var(--plate-ink);
      border-radius: 0.1em;
      pointer-events: none;
      z-index: 1;
    }

    & .band {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.15em;
      padding-inline: 0.4em;
      padding-block: 0.3em;
      background: var(--peil);
      color: var(--on-fill);
      font-size: 0.42em;
      letter-spacing: 0.08em;

      & svg {
        inline-size: 1.6em;
        fill: var(--eu-star);
      }
    }

    & .chars {
      padding: 0.32em 0.5em;
      letter-spacing: 0.08em;
      white-space: nowrap;
      text-shadow: var(--emboss);
    }
  }

  .search--kaal {
    inline-size: min(20rem, 100%);
    gap: 0.5rem;

    & .plate-face--front {
      background: none;
      padding: 0;
      box-shadow: none;
    }

    & .plate-holder {
      --ry-base: -13deg;
      box-shadow: 10px 12px 22px rgb(22 26 23 / 0.18);
    }

  }

  .lede {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-block-start: 1.25rem;
  }

  .voorbeeldregel {
    max-inline-size: 34rem;
    font-size: var(--step--1);
    color: var(--graphite-text);

    & a {
      color: var(--accent-text);
    }
  }

  .lede--zoek {
    margin-block: 2rem 2.5rem;

    & p {
      border: 0;
      padding: 0;
      max-inline-size: 28rem;
      font-size: var(--step--1);
      color: var(--graphite-text);
    }
  }

  .lede h1 {
    font-size: var(--display);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.015em;
  }

  .lede .qualifier {
    display: block;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);
    margin-block-end: 0.5rem;
  }

  .paginakop {
    padding-block-start: 1.5rem;
    background-image: var(--lijn-h-accent);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: bottom left;

    @media (width >= 52rem) {
      display: grid;
      align-content: center;
      padding-block: 0;
      min-block-size: var(--hoek-bandhoogte);

      & .masthead {
        padding-block: 1.5rem 1rem;
      }

    }
  }

  @media (width < 52rem) {
    body.voorpagina .hoekgang,
    body.blad #wolk {
      display: none;
    }
  }

  .paginakop .rotator {
    margin-block-start: 0.2rem;
    color: var(--on-fill);
    font-size: var(--step--2);
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    --slogan-radius: 1.1em;
    perspective: 10em;
  }

  .paginakop .rotator [data-slogan] {
    background-color: var(--accent);
    color: var(--on-fill);
  }

  @media (width >= 52rem) {
    .paginakop .descriptor {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (width < 52rem) {
    .paginakop .rotator {
      display: none;
    }
  }

  .paginakop ~ .section:first-of-type {
    margin-block-start: 0;
  }

  .masthead {
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    padding-block: 0 1rem;

    &:hover .wordmark {
      color: var(--accent-text);
    }

    & .wordmark .mark {
      font-size: var(--step-1);
    }

    & .descriptor {
      color: var(--graphite-text);
      font-weight: 400;
      font-size: var(--step--2);
      letter-spacing: 0.22em;
      text-indent: 0.22em;

      @media (width < 27rem) {
        font-size: 0.65rem;
        letter-spacing: 0.16em;
        text-indent: 0.16em;
      }
    }
  }

  .brandlink {
    display: block;
    text-decoration: none;
    color: inherit;

    &:hover .wordmark,
    &:focus-visible .wordmark {
      color: var(--accent-text);
    }
  }

  .wordmark {
    display: block;
    line-height: 1.05;
    text-transform: uppercase;

    & .mark {
      font-family: var(--font-logo);
      font-size: clamp(2rem, 6vw, 3.25rem);
      font-weight: var(--font-logo-weight);
      letter-spacing: 0.04em;
    }

    & .sep {
      user-select: none;
      margin-inline: -0.02em;
    }
  }

  .wordmark--lockup .mark {
    font-size: clamp(1.5rem, 4.2vw, 2.6rem);
    letter-spacing: 0.02em;
  }

  .rotator {
    display: grid;
    margin-block-start: 0.9rem;
    font-size: clamp(0.8rem, 1.9vw, 1.05rem);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    color: var(--accent-text);

    --slogan-radius: 1.6em;
    --slogan-angle: 58deg;
    perspective: 14em;
    transform-style: preserve-3d;

    --slogan-dwell: 4000ms;
    --slogan-roll: 380ms;

    & [data-slogan] {
      grid-area: 1 / 1;
      justify-self: center;
      background: var(--ink);
      color: var(--accent);
      padding: 0.42em 0.85em;
      border-radius: var(--radius);
      transform-origin: 50% 50% calc(-1 * var(--slogan-radius));
      backface-visibility: hidden;
      transform: rotateX(calc(-1 * var(--slogan-angle)));
      opacity: 0;
      transition:
        transform var(--slogan-roll) cubic-bezier(0.3, 0.7, 0.2, 1),
        opacity var(--slogan-roll) ease-out;
    }

    & [data-state="active"] {
      transform: rotateX(0deg);
      opacity: 1;
    }

    & [data-state="leaving"] {
      transform: rotateX(var(--slogan-angle));
      opacity: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      perspective: none;

      & [data-slogan] {
        transition: none;
        transform: none;
      }

      & [data-slogan]:not(:first-child) {
        display: none;
      }

      & [data-slogan]:first-child {
        opacity: 1;
      }
    }
  }

  .facts,
  .tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    grid-auto-rows: 1fr;
    gap: 4px;
    --blok-hoogte: 6.5rem;

    @media (width < 40rem) {
      grid-template-columns: 1fr 1fr;
      --blok-hoogte: 5rem;
      grid-auto-rows: auto;
    }
  }

  .facts {
    margin-block-start: 2rem;

    & + & {
      margin-block-start: 4px;
    }
  }

  .vlak {
    border: 1px solid var(--rule);
    border-radius: var(--radius-vlak);
    box-shadow: var(--schaduw-rand);
    background-color: var(--sheet);
    padding: 1rem 1rem 1.15rem;

    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    @media (width < 40rem) {
      padding: 0.8rem 0.8rem 0.9rem;
    }

    & .label {
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
    }

    & .value {
      font-size: var(--step-1);
      font-weight: 500;
    }

    & .beschrijving {
      font-size: var(--step--1);
      line-height: 1.45;
      color: var(--graphite-text);
      text-wrap: pretty;
    }
  }

  .doorlink {
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--accent-text);
  }

  .doorlink__pijl {
    display: inline-block;
    transition: transform var(--duur-kort) var(--ease-out);
  }

  .vlak:hover .doorlink__pijl,
  .vlak:focus-visible .doorlink__pijl {
    transform: translateX(0.25em);
  }

  .terugweg {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--accent-text);
    text-decoration: none;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
      text-underline-offset: 0.25em;
    }
  }

  .terugweg__pijl {
    display: inline-block;
    transition: transform var(--duur-kort) var(--ease-out);
  }

  .terugweg:hover .terugweg__pijl {
    transform: translateX(-0.25em);
  }

  @media (prefers-reduced-motion: reduce) {
    .doorlink__pijl,
    .terugweg__pijl {
      transition: none;
    }
  }

  .kaartplaat {
    inline-size: 109px;
    block-size: auto;
    margin-block-start: 0.15rem;
  }

  .fact {
    min-block-size: var(--blok-hoogte);

    --rx: 0deg;
    --ry: 0deg;
    transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 160ms ease-out;

    @media (prefers-reduced-motion: reduce) {
      transform: none;
    }

    & .label {
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
      min-block-size: 2lh;
    }

    & .value {
      font-size: clamp(1.35rem, 2.8vw, 1.85rem);
      font-weight: 500;
      line-height: 1.1;
      white-space: nowrap;

      &.krap {
        font-size: clamp(1.1rem, 2.3vw, 1.5rem);
      }

      &.smal {
        font-size: clamp(0.95rem, 1.9vw, 1.2rem);
      }
    }

    & .value.num {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }

    & .sub {
      font-size: var(--step--1);
      color: var(--graphite-text);
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }

    &[data-level="urgent"] {
      box-shadow: 0 0 0 1px var(--accent);

      & .value {
        color: var(--accent-text);
      }
    }

    &[data-level="warn"] {
      box-shadow: 0 0 0 1px var(--oxide);

      & .value {
        color: var(--oxide-text);
      }
    }
  }

  .search {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
    max-inline-size: 34rem;

    .hero & {
      max-inline-size: none;
    }
  }

  @property --rx-wieg {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  @property --ry-wieg {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  @keyframes plaat-wieg-x {
    50% {
      --rx-wieg: 1.1deg;
    }
  }

  @keyframes plaat-wieg-y {
    50% {
      --ry-wieg: 2.2deg;
    }
  }

  @property --spin {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
  }

  @keyframes plate-spin {
    to {
      --spin: 1turn;
    }
  }

  .plate-holder {
    position: relative;
    container-type: inline-size;

    view-transition-name: kenteken;

    box-shadow:
      calc(var(--ry, 0deg) / 1deg * -1.6px) calc(14px + var(--rx, 0deg) / 1deg * 1.6px) 34px
        rgb(0 0 0 / 0.7);

    --rx-base: 7deg;
    --ry-base: 13deg;
    --rx: 0deg;
    --ry: 0deg;
    --spin: 0deg;
    --rx-wieg: 0deg;
    --ry-wieg: 0deg;
    transform: perspective(1200px)
      rotateX(calc(var(--rx-base) + var(--rx) + var(--rx-wieg) + var(--spin)))
      rotateY(calc(var(--ry-base) + var(--ry) + var(--ry-wieg)));
    transform-style: preserve-3d;
    will-change: transform;

    &::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: -1px;
      transform: translateZ(-14px);
      background: var(--holder);
      border-radius: 6px;
      pointer-events: none;
    }

    animation:
      plaat-wieg-x 11s ease-in-out infinite,
      plaat-wieg-y 17s ease-in-out infinite;

    &[data-error="true"] {
      animation:
        plate-spin 760ms cubic-bezier(0.35, 0.65, 0.25, 1),
        plaat-wieg-x 11s ease-in-out infinite,
        plaat-wieg-y 17s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      transform: none;
      animation: none;

      &[data-error="true"] {
        animation: none;
      }
    }

    &:focus-within {
      outline: none;
      --plate: #ffd21a;

      & .plate-face--front {
        box-shadow:
          inset 0 1px 0 rgb(255 255 255 / 0.3),
          0 0 0 1px rgb(255 255 255 / 0.22);
      }
    }
  }

  .plate-face {
    backface-visibility: hidden;
    border-radius: 4px;
  }

  .plate-face--front {
    background: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.14),
      0 0 0 1px rgb(255 255 255 / 0.08);
  }

  .plate-back {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--plate) 88%, #000),
      color-mix(in srgb, var(--plate) 97%, #000) 55%,
      color-mix(in srgb, var(--plate) 92%, #fff)
    );
    box-shadow:
      inset 0 3px 8px rgb(0 0 0 / 0.35),
      inset 0 -2px 0 rgb(255 255 255 / 0.35);

    & .chars {
      transform: scaleX(-1);
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 15cqi;
      letter-spacing: 0.04em;
      line-height: 1;
      color: color-mix(in srgb, var(--plate) 82%, #000);
      text-shadow:
        0 1px 0 var(--plate-lit),
        0 -1px 1px rgb(0 0 0 / 0.45);
    }
  }

  .plate-holder .dealer {
    background: var(--holder);
    border-radius: 0 0 4px 4px;
    color: #fff;
    text-align: center;
    font-family: var(--font-mono);
    font-size: clamp(0.6rem, 1.8cqi, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    padding-block: 0.5rem 0.55rem;
  }

  .plate-field {
    display: flex;
    align-items: stretch;
    position: relative;
    aspect-ratio: 520 / 110;
    --plate-margin: 0.95cqi;
    --plate-frame: 0.6cqi;

    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--plate) 93%, #fff),
      var(--plate) 45%,
      color-mix(in srgb, var(--plate) 93%, #000)
    );
    border-radius: 1.7cqi;
    padding: calc(var(--plate-margin) + var(--plate-frame));
    overflow: hidden;
    container-type: inline-size;
    box-shadow: var(--sheet-relief);

    &::before {
      content: "";
      position: absolute;
      inset: var(--plate-margin);
      border: var(--plate-frame) solid var(--plate-ink);
      border-radius: 1.1cqi;
      pointer-events: none;
      z-index: 1;
    }

    &:has(input:user-invalid)::before {
      border-color: var(--oxide);
    }

    & .band {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.55em;
      flex: 0 0 7.7%;
      padding-inline: 0;
      background: var(--peil);
      color: var(--on-fill);
      font-family: var(--font-mono);
      font-size: 2.4cqi;
      letter-spacing: 0.08em;
      line-height: 1;

      & svg {
        inline-size: 2em;
        fill: var(--eu-star);
      }
    }

    & .plate-slot {
      position: relative;
      display: flex;
      flex: 1 1 auto;
      min-inline-size: 0;
    }

    & input {
      flex: 1 1 auto;
      min-inline-size: 0;
      background: none;
      border: none;
      color: var(--plate-ink);
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 15cqi;
      line-height: 1;
      letter-spacing: 0.04em;
      text-align: center;
      text-transform: uppercase;
      padding: 0;
      padding-inline: 0.12em;
      text-shadow: var(--emboss);

      &:focus {
        outline: none;
      }

    }
  }

  .plate-demo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;

    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15cqi;
    line-height: 1;
    letter-spacing: 0.04em;
    padding-inline: 0.12em;
    color: var(--plate-hint);

    & .plate-demo__reeks {
      position: relative;
    }

    & .plate-demo__reeks > span {
      position: relative;
      opacity: 0;
      animation: demo-teken 4.6s ease-out infinite;
      animation-delay: calc(var(--i, 0) * 0.11s);
    }

    & .plate-demo__reeks > span::after {
      content: "";
      position: absolute;
      inset-block: 6%;
      inset-inline-start: 100%;
      inline-size: 0.07em;
      background: currentcolor;
      opacity: 0;
      animation: demo-tik-cursor 4.6s steps(1, end) infinite;
      animation-delay: calc(var(--i, 0) * 0.11s);
    }

    & .plate-demo__reeks > span:nth-child(2) { --i: 1; }
    & .plate-demo__reeks > span:nth-child(3) { --i: 2; }
    & .plate-demo__reeks > span:nth-child(4) { --i: 3; }
    & .plate-demo__reeks > span:nth-child(5) { --i: 4; }
    & .plate-demo__reeks > span:nth-child(6) { --i: 5; }
    & .plate-demo__reeks > span:nth-child(7) { --i: 6; }
    & .plate-demo__reeks > span:nth-child(8) { --i: 7; }

    & .plate-demo__reeks::after {
      content: "";
      position: absolute;
      inset-block: 6%;
      inset-inline-start: 100%;
      inline-size: 0.07em;
      background: currentcolor;
      visibility: hidden;
      animation:
        demo-cursor 1.1s steps(1, end) infinite,
        demo-cursor-venster 4.6s steps(1, end) infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      & .plate-demo__reeks > span {
        opacity: 1;
        animation: none;
      }

      & .plate-demo__reeks > span::after {
        animation: none;
      }

      & .plate-demo__reeks::after {
        visibility: visible;
        animation: none;
      }
    }
  }

  .plate-field:has(input:focus) .plate-demo,
  .plate-field:has(input:valid) .plate-demo {
    display: none;
  }

  @keyframes demo-teken {
    0% {
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    62% {
      opacity: 1;
    }
    66%,
    100% {
      opacity: 0;
    }
  }

  @keyframes demo-tik-cursor {
    0% {
      opacity: 0;
    }
    2% {
      opacity: 1;
    }
    4.4%,
    100% {
      opacity: 0;
    }
  }

  @keyframes demo-cursor {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

  @keyframes demo-cursor-venster {
    0%,
    18% {
      visibility: hidden;
    }
    19%,
    82% {
      visibility: visible;
    }
    83%,
    100% {
      visibility: hidden;
    }
  }

  .hoekgang {
    display: none;
    position: absolute;
    z-index: 2;
    inset-block-start: 1.25rem;
    inset-inline-start: 1.25rem;
    max-inline-size: 8rem;
    font-size: var(--step--2);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    line-height: 1.4;
    text-decoration: none;
    color: var(--accent-text);
    view-transition-name: bpm-titel;

    padding-block-end: 0.5em;
    background-image: var(--lijn-h-accent);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: bottom left;
  }

  .hoekgang:hover,
  .hoekgang:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  @media (width < 52rem) {
    .hoekgang {
      position: static;
      display: block;
      max-inline-size: none;
      padding-block: 0 0.9rem;
    }

    .paginakop .hoekgang {
      background-image: none;
      padding-block-end: 0.75rem;
    }

    body.kentekenblad .hoekgang {
      display: none;
    }

    .masthead {
      padding-block: 0.4rem 0.7rem;
    }
  }

  .printknop {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.7em 1.1em;
    font-family: inherit;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    border-radius: var(--radius-veld);
    background-color: var(--vellum);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 12%, transparent);
    cursor: pointer;
    transition:
      color var(--duur-kort) var(--ease-out),
      border-color var(--duur-kort) var(--ease-out),
      background-color var(--duur-kort) var(--ease-out);

    & svg {
      inline-size: 1.2em;
      block-size: 1.2em;
      fill: none;
      stroke: currentcolor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    &:hover,
    &:focus-visible {
      border-color: var(--ink);
      background-color: color-mix(in srgb, var(--ink) 8%, var(--vellum));
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    @media (width < 34rem) {
      inset-block-end: 1rem;
      inset-inline-end: 1rem;
      padding: 0.75em;
      gap: 0;

      & span {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      & svg {
        inline-size: 1.3rem;
        block-size: 1.3rem;
      }
    }
  }

  @media (width < 52rem) {
    .printknop {
      position: absolute;
      inset-block-start: 0.75rem;
      inset-block-end: auto;
      inset-inline-start: 0.75rem;
      inset-inline-end: auto;
    }
  }

  .knoppen {
    view-transition-name: zoekknoppen;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 0.75rem;
    margin-block-start: 1.75rem;

    @media (width < 32rem) {
      flex-direction: column-reverse;
      flex-wrap: nowrap;
      align-items: stretch;
      inline-size: fit-content;
      margin-inline: auto;

      & .foto:not([hidden]) {
        display: flex;
      }

      & .foto button {
        flex: 1 1 auto;
        justify-content: center;
      }
    }
  }

  .foto button {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-block-size: var(--besturing-hoogte);
    padding: 0.9em 1.2em;
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
    border-radius: var(--radius-veld);
    cursor: pointer;

    background-color: transparent;
    background-image: linear-gradient(to top right, var(--accent) 50%, transparent 50%);
    background-size: 250% 250%;
    background-position: 100% 0%;
    transition:
      background-position var(--duur-veeg) var(--ease-out),
      color var(--duur-kort) var(--ease-out),
      border-color var(--duur-veeg) var(--ease-out);

    & svg {
      inline-size: 1.35em;
      fill: none;
      stroke: currentcolor;
      stroke-width: 1.5;
      stroke-linejoin: round;
    }

    &:hover,
    &:focus-visible {
      background-position: 0% 100%;
      border-color: var(--accent);
      color: var(--on-fill);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    &:disabled {
      cursor: progress;
      opacity: 0.6;
    }
  }

  .foto__melding {
    margin-block-start: 0.75rem;
    font-size: var(--step--1);
    color: var(--graphite-text);
    max-inline-size: 26rem;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;

    &:empty {
      display: none;
    }
  }

  .search button[type="submit"],
  .knoppen button[type="submit"] {
    min-block-size: var(--besturing-hoogte);
    padding: 0.9em 2em;
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent);
    border-radius: var(--radius-veld);
    cursor: pointer;

    background-color: transparent;
    background-image: linear-gradient(to top right, var(--accent) 50%, transparent 50%);
    background-size: 250% 250%;
    background-position: 100% 0%;
    transition:
      background-position var(--duur-veeg) var(--ease-out),
      color var(--duur-kort) var(--ease-out),
      border-color var(--duur-veeg) var(--ease-out);

    &:hover,
    &:focus-visible {
      background-position: 0% 100%;
      border-color: var(--accent);
      color: var(--on-fill);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .linkish {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: var(--step--1);
    color: var(--accent-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }

  .loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-block-start: 0.5rem;

    [data-bezig="true"] & {
      display: flex;
    }

    & svg {
      inline-size: 7rem;
      overflow: visible;
    }

    & .loader__body {
      fill: none;
      stroke: var(--ink);
      stroke-width: 3;
      stroke-linejoin: round;
    }

    & .loader__glass {
      fill: none;
      stroke: var(--ink);
      stroke-width: 2;
      opacity: 0.5;
    }

    & .loader__wheel {
      fill: none;
      stroke: var(--ink);
      stroke-width: 3;
      transform-box: fill-box;
      transform-origin: center;
      animation: wiel-draait 700ms linear infinite;
    }

    & .loader__hub {
      fill: var(--ink);
      stroke: none;
    }

    & .loader__road {
      stroke: var(--graphite-text);
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 10 14;
      animation: weg-schuift 700ms linear infinite;
    }

    & .loader__text {
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
      font-family: var(--font-mono);
    }
  }

  @keyframes wiel-draait {
    to {
      transform: rotate(1turn);
    }
  }

  @keyframes weg-schuift {
    to {
      stroke-dashoffset: -24;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .loader__wheel,
    .loader__road {
      animation: none;
    }
  }

  .search-error {
    inline-size: fit-content;
    margin-inline: auto;
    margin-block-start: 0.5rem;
    padding: 0.6em 1.1em;
    border: 1px solid color-mix(in srgb, var(--plate) 45%, transparent);
    border-radius: var(--radius);
    background-color: color-mix(in srgb, var(--plate) 12%, transparent);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--plate);

    &:empty {
      display: none;
    }
  }

  .tile {

    min-block-size: var(--blok-hoogte);

    & .label {
      min-block-size: 2lh;
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
    }

    & .detail {
      font-size: var(--step--1);
      color: var(--graphite-text);
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }

    &[data-level="urgent"] {
      background: var(--accent);
      border-color: var(--accent);

      &,
      & * {
        color: var(--on-fill);
      }
    }

    &[data-level="warn"] {
      border-color: var(--oxide);

    }
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    grid-auto-rows: 1fr;
    gap: 4px;

    body.stage & {
      grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    }
  }

  .card {
    overflow: hidden;
    position: relative;
    text-decoration: none;
    color: inherit;

    &::after {
      content: "";
      position: absolute;
      inset-block-end: 0;
      inset-inline: 0;
      block-size: 3px;
      background: var(--accent);
    }

    & .label {
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
    }

    & .value {
      font-size: var(--step-1);
      font-weight: 500;
    }
  }

  a.card {
    background-image: linear-gradient(to top right, var(--accent) 50%, transparent 50%);
    background-size: 250% 250%;
    background-position: 100% 0%;
    transition:
      background-position var(--duur-veeg) var(--ease-out),
      border-color var(--duur-veeg) var(--ease-out),
      color var(--duur-kort) var(--ease-out);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  a.card:hover,
  a.card:focus-visible {
    background-position: 0% 100%;
    border-color: var(--accent);

    &,
    & * {
      color: var(--on-fill);
    }
  }

  .register {
    inline-size: 100%;
    max-inline-size: var(--registermaat);
    font-size: var(--step-0);

    & td.sleutel {
      overflow-wrap: anywhere;
    }

    & caption {
      text-align: start;
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
      padding-block-end: 0.5rem;
    }

    & thead th {
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
      font-weight: 400;
      text-align: start;
    }

    & th,
    & td {
      background-image: var(--lijn-h);
      background-repeat: no-repeat;
      background-size: 100% var(--stip-maat);
      background-position: bottom left;
      padding-block: 0.55rem;
      padding-inline-end: 1.25rem;
      vertical-align: baseline;
      text-align: start;
    }

    & td:not(.tekst) {
      text-align: end;
    }

    & tbody th {
      font-weight: 400;
      color: var(--graphite-text);
      inline-size: 40%;
      min-inline-size: 11rem;
    }

    & tbody tr:has(td.tekst) th {
      inline-size: 1%;
      min-inline-size: 0;
      white-space: nowrap;
      padding-inline-end: 1.5rem;
    }

    & tbody tr:hover {
      background-color: var(--sheet);
    }

    & td:last-child,
    & th:last-child {
      padding-inline-end: 0;
    }

    & .unit {
      color: var(--graphite-text);
      font-family: var(--font-display);
      font-size: var(--step--1);
      margin-inline-start: 0.35em;
    }

    & .num {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
    }

    & .amount {
      text-align: end;
    }

    & tbody th .detail {
      display: block;
      font-size: var(--step--2);
      color: var(--graphite-text);
    }

    & tr.eigen > * {
      color: var(--graphite-text);
      text-decoration: line-through;
      text-decoration-thickness: 1px;
    }

    & .merk {
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
    }

    & tr.eigen > .merk {
      text-decoration: none;
    }
  }

  .crawltabel {
    & tbody th {
      inline-size: auto;
      min-inline-size: 0;
      font-family: var(--font-mono);
      overflow-wrap: anywhere;
      padding-inline-end: 1rem;
    }

    & thead th.num {
      text-align: end;
      font-family: inherit;
    }

    & td.status {
      color: var(--graphite-text);
    }

    & td.status--fout {
      color: var(--oxide-text);
    }
  }

  .tarieven {
    & tbody th {
      inline-size: auto;
      min-inline-size: 0;
      color: var(--ink);
      white-space: nowrap;
      padding-inline-end: 0.75rem;
    }

    & thead th.num {
      text-align: end;
      font-family: inherit;
    }

    & td {
      padding-inline-end: 0.75rem;
    }

    & .unit {
      margin-inline-start: 0.1em;
      font-size: var(--step--2);
    }

    & tbody td:first-of-type {
      color: var(--graphite-text);
      text-align: end;
    }
  }

  .timeline {
    display: flex;
    flex-direction: column;
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;
  }

  .timeline li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    padding-block: 0.7rem;
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: bottom left;

    & time {
      font-family: var(--font-mono);
      font-variant-numeric: tabular-nums;
      min-inline-size: 7rem;
    }

    & .what {
      font-weight: 500;
    }

    & .span {
      color: var(--graphite-text);
      font-size: var(--step--1);
      margin-inline-start: auto;
      font-variant-numeric: tabular-nums;
    }

    &[data-level="urgent"] .what {
      color: var(--accent-text);
    }

    &[data-level="warn"] .what {
      color: var(--oxide-text);
    }

    &[data-current="true"] {
      background-color: var(--sheet);
      box-shadow: inset 3px 0 0 var(--ink);
      padding-inline-start: 0.75rem;
    }
  }

  .beurten {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem var(--kolomkloof);
    align-items: start;

    & > * {
      min-inline-size: 0;
      overflow-x: auto;
    }

    @media (width >= 60rem) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  .beurten__lijst {
    display: grid;
    gap: 4px;
  }

  .beurt .defects {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-block-start: 0.5rem;
  }

  .beurt .defect {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    font-size: var(--step--1);

    & code {
      font-family: var(--font-mono);
      color: var(--graphite-text);
      flex: none;
    }
  }

  .bpm {
    display: grid;
    gap: 1.75rem;
  }

  .bpm > :not(.section) {
    inline-size: min(46rem, 100%);
    margin-inline: auto;
  }

  .bpm__kop {
    text-align: center;
    padding-block-start: 1.75rem;

    & h1 {
      font-size: var(--titelmaat);
      font-weight: 500;
      line-height: 1.1;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }

    & .bladkop__lede {
      max-inline-size: var(--leesmaat);
      margin-inline: auto;
      margin-block-start: 0.6rem;
    }
  }

  .bpm[data-af="true"] {
    & .bpm__kop h1 {
      font-size: var(--step-0);
      font-weight: 400;
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
    }

    & .bpm__kop .bladkop__lede {
      display: none;
    }

    & .plate-holder--stil {
      inline-size: min(36rem, 100%);
    }
  }

  .plate-holder--stil {
    inline-size: min(30rem, 100%);
    margin-inline: auto;
    --rx-base: 0deg;
    --ry-base: 0deg;
    animation: none;
  }

  .plate-bedrag__euro {
    margin-inline-end: 0.12em;
  }

  .plate-bedrag__staart {
    display: inline-block;
    inline-size: 0;
    line-height: 0;
    font-size: 0.62em;
    vertical-align: 0.42em;
    margin-inline-start: 0.04em;
    letter-spacing: 0;
  }

  .plate-bedrag__leeg {
    margin-inline-start: 0.28em;
  }

  .plate-bedrag {
    flex: 1 1 auto;
    align-self: center;
    text-align: center;
    margin-inline-end: 8.34%;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 15cqi;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--plate-ink);
    text-shadow: 0 1px 0 var(--plate-lit), 0 -1px 0 var(--plate-shade);
  }

  .bpm__onder {
    text-align: center;
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);
  }

  .hero__tweede {
    text-align: center;
    font-size: var(--step--1);
    color: var(--graphite-text);
    margin-block-start: 1.25rem;
  }

  .bpm__marge {
    text-align: center;
    font-size: var(--step--2);
    color: var(--graphite-text);
    margin-block-start: -1.25rem;
  }

  .bpm__formulier {
    display: grid;
    gap: 1.25rem;

    & label {
      display: block;
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
      margin-block-end: 0.35rem;
    }

    & input,
    & select {
      inline-size: 100%;
      min-block-size: var(--besturing-hoogte);
      padding: 0.7em 0.8em;
      background-color: var(--sheet);
      border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
      border-radius: var(--radius-veld);
      box-shadow: var(--schaduw-rand);
      font-family: var(--font-mono);
      font-size: max(16px, var(--step-0));
    }

    & input:focus-visible,
    & select:focus-visible {
      border-color: var(--accent-text);
      outline: 2px solid var(--accent-text);
      outline-offset: 1px;
    }

    & .hint {
      margin-block-start: 0.3rem;
      font-size: var(--step--2);
      color: var(--graphite-text);
    }
  }

  .keuzeveld {
    display: grid;
    gap: 0.4rem;
    inline-size: min(28rem, 100%);
    text-align: start;

    & label {
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
    }
  }

  .keuzeveld__rij {
    display: flex;
    gap: 0.5rem;

    & .keuzeveld__veld {
      position: relative;
      flex: 1 1 auto;
      min-inline-size: 0;
      display: flex;

      &::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-end: 0.95em;
        inline-size: 0.42em;
        block-size: 0.42em;
        border-inline-end: 1.5px solid var(--graphite-text);
        border-block-end: 1.5px solid var(--graphite-text);
        translate: 0 -70%;
        rotate: 45deg;
        pointer-events: none;
        transition:
          border-color var(--duur-kort) var(--ease-out),
          rotate var(--duur-kort) var(--ease-out),
          translate var(--duur-kort) var(--ease-out);
      }

      &:focus-within::after {
        border-color: var(--accent);
      }

      &:has(input[aria-expanded="true"])::after {
        rotate: 225deg;
        translate: 0 -10%;
      }

      & input {
        padding-inline-end: 2.4em;
      }
    }

    & input {
      flex: 1 1 auto;
      min-inline-size: 0;
      block-size: var(--besturing-hoogte);
      padding-inline: 0.9em;
      background-color: var(--sheet);
      border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
      border-radius: var(--radius-veld);
      box-shadow: var(--schaduw-rand);
      font-family: var(--font-mono);
      font-size: max(16px, var(--step-0));
      color: var(--ink);
      text-transform: uppercase;
      transition:
        border-color var(--duur-kort) var(--ease-out),
        box-shadow var(--duur-kort) var(--ease-out);

      &::placeholder {
        color: color-mix(in srgb, var(--graphite-text) 70%, transparent);
      }

      &:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
      }

      &[aria-invalid="true"] {
        border-color: var(--oxide);
      }
    }

    & button {
      flex: none;
      block-size: var(--besturing-hoogte);
      padding-inline: 1.4em;
      font-family: inherit;
      font-size: var(--step--2);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      cursor: pointer;
      color: var(--on-fill);
      border: 1px solid var(--accent);
      border-radius: var(--radius-veld);
      box-shadow: var(--schaduw-rand);

      background-color: var(--accent);
      background-image: linear-gradient(
        to top right,
        var(--accent-diep) 50%,
        transparent 50%
      );
      background-size: 250% 250%;
      background-position: 100% 0%;
      transition:
        background-position var(--duur-veeg) var(--ease-out),
        border-color var(--duur-veeg) var(--ease-out);

      &:hover,
      &:focus-visible {
        background-position: 0% 100%;
        border-color: var(--accent-diep);
      }

      &:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
      }

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }
    }
  }

  .bpm__overstap {
    margin-block-start: 1.5rem;
    text-align: center;
  }

  .tekstregel {
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;

    & summary {
      display: flex;
      align-items: baseline;
      gap: 1rem;
      padding-block: 0.75rem;
      cursor: pointer;
      list-style: none;
    }

    & summary::-webkit-details-marker {
      display: none;
    }

    &[open] summary {
      color: var(--accent-text);
    }
  }

  .tekstregel__tekst {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .tekstregel__potlood {
    flex: none;
    align-self: center;
    display: grid;
    place-items: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    border-radius: var(--radius-veld);
    color: var(--graphite-text);
    transition:
      border-color var(--duur-kort) var(--ease-out),
      color var(--duur-kort) var(--ease-out);

    & svg {
      inline-size: 1rem;
      block-size: 1rem;
      fill: none;
      stroke: currentcolor;
      stroke-width: 1.4;
      stroke-linejoin: round;
    }
  }

  .tekstregel summary:hover .tekstregel__potlood,
  .tekstregel[open] .tekstregel__potlood {
    border-color: var(--accent);
    color: var(--accent-text);
  }

  .tekstregel__body {
    display: grid;
    gap: 0.6rem;
    padding-block: 0.25rem 1.1rem;
  }

  .tekstregel__waar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--step--1);
    color: var(--graphite-text);
  }

  .tekstregel__vlag {
    padding: 0.15em 0.5em;
    border-radius: var(--radius-veld);
    background-color: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent-text);
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
  }

  .tekstregel textarea {
    inline-size: 100%;
    padding: 0.6em 0.75em;
    background-color: var(--sheet);
    border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
    border-radius: var(--radius-veld);
    box-shadow: var(--schaduw-rand);
    font-family: inherit;
    font-size: max(16px, var(--step-0));
    line-height: 1.45;
    color: var(--ink);
    resize: vertical;
    field-sizing: content;

    &:focus-visible {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    }
  }

  .tekstregel__origineel {
    font-size: var(--step--1);
    color: var(--graphite-text);
  }

  .tekstregel__knoppen {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-start: 0.6rem;

    & button[type="submit"] {
      min-block-size: var(--besturing-hoogte);
      padding-inline: 1.2em;
      font-family: inherit;
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      cursor: pointer;
      color: var(--on-fill);
      background-color: var(--accent);
      border: 1px solid var(--accent);
      border-radius: var(--radius-veld);
    }

    & button.linkish {
      color: var(--accent-text);
      background: none;
      border: none;
      min-block-size: auto;
      padding: 0;
      text-transform: none;
      letter-spacing: normal;
      font-size: var(--step--1);
    }
  }

  .tabs {
    display: flex;
    gap: 0.25rem;
    margin-block: 1rem 1.5rem;
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: bottom left;
  }

  .tabs__tab {
    padding: 0.7em 1.1em;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    text-decoration: none;
    color: var(--graphite-text);
    border-radius: var(--radius-veld) var(--radius-veld) 0 0;
    box-shadow: inset 0 -2px 0 transparent;
    transition:
      color var(--duur-kort) var(--ease-out),
      box-shadow var(--duur-kort) var(--ease-out);

    &:hover {
      color: var(--ink);
    }

    &[aria-current="page"] {
      color: var(--accent-text);
      box-shadow: inset 0 -2px 0 var(--accent);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .beheer__kijk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-block: 1rem 1.75rem;
    font-size: var(--step--1);
    color: var(--graphite-text);
  }

  .schakel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .schakel__label {
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);
  }

  .schakel :is(.schakel__stand:first-of-type) {
    border-start-start-radius: var(--radius-veld);
    border-end-start-radius: var(--radius-veld);
  }

  .schakel :is(.schakel__stand:last-of-type) {
    border-start-end-radius: var(--radius-veld);
    border-end-end-radius: var(--radius-veld);
    border-inline-end-width: 1px;
  }

  .schakel__stand {
    padding: 0.35em 0.75em;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    text-decoration: none;
    color: var(--graphite-text);
    border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
    border-inline-end-width: 0;
    transition: color var(--duur-kort) var(--ease-out);

    &:hover,
    &:focus-visible {
      color: var(--ink);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .schakel__stand[aria-current] {
    color: var(--on-fill);
    background-color: var(--accent);
    border-color: var(--accent);
  }

  .beheer__meer {
    margin-block-start: 0.85rem;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
  }

  .knopachtig {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-block-size: var(--besturing-hoogte);
    padding: 0.7em 1.2em;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    text-decoration: none;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
    border-radius: var(--radius-veld);

    background-image: linear-gradient(to top right, var(--accent) 50%, transparent 50%);
    background-size: 250% 250%;
    background-position: 100% 0%;
    transition:
      background-position var(--duur-veeg) var(--ease-out),
      border-color var(--duur-veeg) var(--ease-out),
      color var(--duur-kort) var(--ease-out);

    &:hover,
    &:focus-visible {
      background-position: 0% 100%;
      border-color: var(--accent);
      color: var(--on-fill);
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .keuzelijst {
    margin: 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    border-radius: var(--radius-vlak);
    background-color: var(--sheet);
    box-shadow: var(--schaduw-paneel);
    max-block-size: 20rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--ink);

    &:popover-open {
      display: grid;
    }

    & ul {
      list-style: none;
      margin: 0;
      padding: 0.25rem;
      display: grid;
    }

    & li {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.75em;
      padding: 0.55em 0.75em;
      border-radius: var(--radius-veld);
      font-family: var(--font-mono);
      font-size: var(--step-0);
      line-height: 1.3;
      cursor: pointer;
      scroll-margin-block: 0.25rem;
    }

    & .keuzelijst__bij {
      flex: none;
      font-family: var(--font-display);
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
    }

    & li:hover .keuzelijst__bij,
    & li[aria-selected="true"] .keuzelijst__bij {
      color: color-mix(in srgb, var(--on-fill) 75%, transparent);
    }

    & li:hover,
    & li[aria-selected="true"] {
      background-color: var(--accent);
      color: var(--on-fill);
    }
  }

  .keuzelijst__teller {
    padding: 0.5em 0.95em 0.6em;
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;
    font-size: var(--step--1);
    color: var(--graphite-text);
  }

  @supports (appearance: base-select) {
    .bpm__velden select,
    .bpm__velden select::picker(select) {
      appearance: base-select;
    }

    .bpm__velden select {
      display: flex;
      align-items: center;
      gap: 0.6em;
      inline-size: 100%;
      block-size: var(--besturing-hoogte);
      padding-inline: 0.9em;
      background-color: var(--sheet);
      border: 1px solid color-mix(in srgb, var(--ink) 32%, transparent);
      border-radius: var(--radius-veld);
      box-shadow: var(--schaduw-rand);
      font-family: var(--font-mono);
      font-size: max(16px, var(--step-0));
      text-transform: uppercase;
      color: var(--ink);
      cursor: pointer;
      transition:
        border-color var(--duur-kort) var(--ease-out),
        box-shadow var(--duur-kort) var(--ease-out);

      &:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
      }
    }

    .bpm__velden select::picker-icon {
      content: "";
      margin-inline-start: auto;
      inline-size: 0.42em;
      block-size: 0.42em;
      border-inline-end: 1.5px solid var(--graphite-text);
      border-block-end: 1.5px solid var(--graphite-text);
      translate: 0 -20%;
      rotate: 45deg;
      transition: rotate var(--duur-kort) var(--ease-out);
    }

    .bpm__velden select:open::picker-icon {
      rotate: 225deg;
      translate: 0 20%;
    }

    .bpm__velden select::picker(select) {
      border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
      border-radius: var(--radius-vlak);
      background-color: var(--sheet);
      box-shadow: var(--schaduw-paneel);
      padding: 0.25rem;
      max-block-size: 20rem;
      overflow-y: auto;
    }

    .bpm__velden option {
      display: flex;
      align-items: center;
      gap: 0.5em;
      padding: 0.55em 0.75em;
      border-radius: var(--radius-veld);
      font-family: var(--font-mono);
      font-size: var(--step-0);
      text-transform: uppercase;
    }

    .bpm__velden option:hover,
    .bpm__velden option:focus,
    .bpm__velden option:checked {
      background-color: var(--accent);
      color: var(--on-fill);
    }

    .bpm__velden option::checkmark {
      display: none;
    }
  }

  .kolommen {
    columns: 2;
    column-gap: 2.5rem;
    column-rule: var(--stip-maat) dotted var(--rule);

    & > * {
      break-inside: avoid;
      margin-block-start: 0;
      margin-block-end: 1rem;
    }

    & > *:last-child {
      margin-block-end: 0;
    }

    @media (width < 48rem) {
      columns: 1;
    }
  }

  .keuzeveld__fout {
    font-size: var(--step--1);
    color: var(--oxide-text);
  }

  .bpm__velden {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }

  .trap__blokken {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    --trapkloof: 0.5rem;
    gap: var(--trapkloof);

    @media (width < 34rem) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .stapblok {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 2rem 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    border-radius: var(--radius-vlak);
    box-shadow: var(--schaduw-rand);
    text-align: start;
    min-inline-size: 0;

    min-block-size: 6rem;
  }

  .stapblok__vink {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-end: 0.6rem;
    inline-size: 0.9rem;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .stapblok__kop {
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);
  }

  .stapblok__nr {
    font-family: var(--font-mono);
    opacity: 0.6;

    &::after {
      content: ".";
    }
  }

  .stapblok__waarde {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    line-height: 1.25;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .stapblok__wijzig {
    margin-block-start: auto;
  }

  .stapblok__wijzig {
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    align-self: start;
    padding-block: 0.85rem;
    margin-block: -0.85rem;
  }

  .stapblok[data-staat="af"] .stapblok__waarde {
    color: var(--ink);
  }

  .stapblok[data-staat="nu"] {
    border-color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
    background-color: color-mix(in srgb, var(--accent) 4%, var(--sheet));

    z-index: 1;

    & .stapblok__waarde {
      color: var(--accent-text);
    }
  }

  .stapblok[data-vast="onder"] {
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-block-end-width: 0;
    margin-block-end: calc(-1 * (var(--trapkloof) + 1px));
    padding-block-end: calc(0.7rem + var(--trapkloof) + 1px);
  }

  .stapblok[data-vast="boven"] {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    border-block-start-width: 0;
    margin-block-start: calc(-1 * (var(--trapkloof) + 1px));
    padding-block-start: calc(0.7rem + var(--trapkloof) + 1px);
  }

  .stapblok[data-staat="wacht"] {
    opacity: 0.42;
  }

  .trap__keuze {
    scroll-margin-block-start: 40vh;
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: 1.25rem 1rem 1.4rem;
    text-align: center;

    border: 1px solid var(--accent);
    border-radius: 0 0 var(--radius-vlak) var(--radius-vlak);
    box-shadow:
      inset 3px 0 0 var(--accent),
      var(--schaduw-rand);
    background-color: color-mix(in srgb, var(--accent) 4%, var(--sheet));
  }

  @media (width < 34rem) {
    .trap__blokken > li:nth-child(1) { order: 10; }
    .trap__blokken > li:nth-child(2) { order: 20; }
    .trap__blokken > li:nth-child(3) { order: 30; }
    .trap__blokken > li:nth-child(5) { order: 40; }
    .trap__blokken > li:nth-child(6) { order: 50; }
    .trap__blokken > li:nth-child(7) { order: 60; }

    .trap__blokken[data-actief="0"] > .trap__keuze,
    .trap__blokken[data-actief="1"] > .trap__keuze { order: 25; }
    .trap__blokken[data-actief="2"] > .trap__keuze,
    .trap__blokken[data-actief="3"] > .trap__keuze { order: 45; }
    .trap__blokken[data-actief="4"] > .trap__keuze,
    .trap__blokken[data-actief="5"] > .trap__keuze { order: 65; }

    .stapblok[data-vast="boven"] {
      border-start-start-radius: var(--radius);
      border-start-end-radius: var(--radius);
      border-block-start-width: 1px;
      margin-block-start: 0;
      padding-block-start: 0.7rem;

      border-end-start-radius: 0;
      border-end-end-radius: 0;
      border-block-end-width: 0;
      margin-block-end: -5px;
      padding-block-end: calc(0.7rem + 5px);
    }
  }

  .blokjes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }

  .blokjes--jaar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    inline-size: 100%;
  }

  .blokjes--maand {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    inline-size: 100%;
  }

  .blokje {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-block-size: 44px;
    padding: 0.55rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    border-radius: var(--radius-veld);
    box-shadow: var(--schaduw-rand);
    text-decoration: none;
    color: inherit;

    & .blokje__naam {
      font-family: var(--font-mono);
      font-size: var(--step-0);
      line-height: 1.2;
      text-transform: uppercase;
    }

    & .blokje__bij {
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
    }
  }

  a.blokje {
    background-image: linear-gradient(to top right, var(--accent) 50%, transparent 50%);
    background-size: 250% 250%;
    background-position: 100% 0%;
    transition:
      background-position var(--duur-veeg) var(--ease-out),
      border-color var(--duur-veeg) var(--ease-out),
      color var(--duur-kort) var(--ease-out);

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }

    &:hover,
    &:focus-visible {
      background-position: 0% 100%;
      border-color: var(--accent);

      &,
      & * {
        color: var(--on-fill);
      }
    }
  }

  .blokje[aria-disabled="true"] {
    opacity: 0.32;
  }

  .bpm__zelf {
    & .bpm__formulier,
    & .notice {
      margin-block-start: 1rem;
    }
  }

  .bpm__regimes {
    display: grid;
    gap: var(--kolomkloof);
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  }

  .bpm-regime[data-gekozen="false"] {
    opacity: 0.62;
  }

  .bpm-regime[data-gekozen="true"] caption {
    color: var(--accent-text);
  }

  a.treffer .value {
    font-size: var(--step-0);
    font-weight: 500;
  }

  .notice {
    border-inline-start: 3px solid var(--rule);
    padding-inline-start: 0.9rem;
    font-size: var(--step--1);
    color: var(--graphite-text);
    max-inline-size: 46rem;
  }

  .notice strong {
    color: var(--ink);
    font-weight: 500;
  }

  .notice--let {
    border-inline-start-color: var(--oxide);
    color: var(--ink);
  }

  .notice--melding {
    border-inline-start-color: var(--accent);
    color: var(--ink);
  }

  .empty {
    font-size: var(--step--1);
    color: var(--graphite-text);
    padding-block: 0.5rem;
  }

  .blok {
    background-image: var(--lijn-h-accent);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;
    padding-block-start: 1.25rem;
    margin-block-start: 2.5rem;

    &:first-child {
      margin-block-start: 0;
    }
  }

  .blok__titel {
    padding-block-end: 0.75rem;
  }

  .source {
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: bottom left;

    & summary {
      cursor: pointer;
      padding-block: 0.6rem;
      font-size: var(--step--2);
      text-transform: uppercase;
      letter-spacing: var(--tracking-index);
      color: var(--graphite-text);
      display: flex;
      gap: 0.6em;

      & .id {
        font-family: var(--font-mono);
        color: var(--graphite-text);
        font-weight: 500;
      }

      &::marker {
        color: var(--accent-text);
      }
    }

    & pre {
      font-family: var(--font-mono);
      font-size: var(--step--1);
      overflow-x: auto;
      padding-block-end: 1rem;
      color: var(--graphite-text);
    }
  }

  .kolommen {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--kolomkloof);
    align-items: start;
    margin-block-start: 2rem;

    & > div {
      min-inline-size: 0;
    }

    & > div > div {
      overflow-x: auto;
    }

    & > div > div + div {
      margin-block-start: 2rem;
    }

    @media (width >= 60rem) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  .section > .notice,
  .section > p {
    max-inline-size: var(--registermaat);

    @media (width >= 60rem) {
      inline-size: calc((100% - var(--kolomkloof)) / 2);
      max-inline-size: none;
    }
  }

  .duo {
    @media (width >= 60rem) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 var(--kolomkloof);
      align-items: start;

      & .section > .notice,
      & .section > p {
        inline-size: auto;
      }
    }
  }
}

@layer components {
  body.voorpagina main.sheet {
    max-inline-size: none;
    padding-inline: 0;
  }

  .portaal {
    --luik-inzet: clamp(1.5rem, 3.2vw, 2.75rem);

    position: relative;
    min-block-size: 100svb;
    display: flex;
    flex-direction: column;
  }

  .portaal__merk {
    display: grid;
    justify-items: center;
    text-align: center;
    padding: clamp(3rem, 11vh, 6rem) clamp(1.5rem, 5vw, 2.5rem) clamp(2.5rem, 8vh, 4.5rem);
  }

  .portaal__merk .wordmark {
    font-size: clamp(2.5rem, 6vw, 4.25rem);
  }

  .luiken {
    flex: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;
  }

  .luik {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.85rem;
    padding: clamp(3rem, 8vh, 4.5rem) var(--luik-inzet) clamp(2.5rem, 7vh, 4rem);
    transition: background-color var(--duur-kort) var(--ease-out);
  }

  .luik + .luik {
    background-image: var(--lijn-v);
    background-repeat: no-repeat;
    background-size: var(--stip-maat) 100%;
    background-position: left top;
  }

  .luik__hoofd {
    display: contents;
  }

  .luik__no {
    position: absolute;
    inset-block-start: clamp(1.25rem, 3.5vh, 2rem);
    inset-inline-start: var(--luik-inzet);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);
  }

  .luik__teken svg {
    display: block;
    inline-size: clamp(2.75rem, 4.9vw, 4.5rem);
    block-size: clamp(2.75rem, 4.9vw, 4.5rem);
    fill: none;
    stroke: var(--accent-text);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .luik .vak__titel {
    font-size: clamp(1.15rem, 1.9vw, 1.6rem);
    text-wrap: balance;
  }

  .luik__regel {
    max-inline-size: 30ch;
    font-size: var(--step--1);
    line-height: 1.45;
    color: var(--graphite-text);
  }

  .luik__gaan {
    margin-block-start: 0.5rem;
  }

  .luik__gaan::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .luik:hover,
  .luik:has(.luik__gaan:focus-visible) {
    background-color: color-mix(in srgb, var(--ink) 5%, transparent);
  }

  .luik:hover .luik__gaan,
  .luik:has(.luik__gaan:focus-visible) .luik__gaan {
    background-position: 0% 100%;
    border-color: var(--accent);
    color: var(--on-fill);
  }

  @keyframes pictogram-regen {
    0% {
      transform: translateY(-1.5px);
      opacity: 0;
    }
    25%,
    70% {
      opacity: 1;
    }
    100% {
      transform: translateY(2.5px);
      opacity: 0;
    }
  }

  @keyframes pictogram-doorrijden {
    0% {
      transform: translateY(3.5px);
      opacity: 0;
    }
    20%,
    80% {
      opacity: 1;
    }
    100% {
      transform: translateY(-7px);
      opacity: 0;
    }
  }

  @keyframes pictogram-oplichten {
    0%,
    100% {
      opacity: 0.25;
    }
    45% {
      opacity: 1;
    }
  }

  .luik:is(:hover, :has(.luik__gaan:focus-visible)) {
    & .pictogram__druppel {
      animation: pictogram-regen 900ms var(--ease-out) infinite;
    }

    & .pictogram__druppel:nth-child(3) {
      animation-delay: 160ms;
    }

    & .pictogram__druppel:nth-child(4) {
      animation-delay: 320ms;
    }

    & .pictogram__wagen {
      animation: pictogram-doorrijden 1.4s linear infinite;
    }

    & .pictogram__wagen:nth-child(3) {
      animation-delay: -0.467s;
    }

    & .pictogram__wagen:nth-child(4) {
      animation-delay: -0.933s;
    }

    & .pictogram__cijfer {
      animation: pictogram-oplichten 1.1s var(--ease-out) infinite;
    }

    & .pictogram__cijfer:nth-child(4) {
      animation-delay: 110ms;
    }

    & .pictogram__cijfer:nth-child(5) {
      animation-delay: 220ms;
    }

    & .pictogram__cijfer:nth-child(6) {
      animation-delay: 330ms;
    }

    & .pictogram__toets {
      animation: pictogram-oplichten 1.1s var(--ease-out) infinite;
    }

    & .pictogram__toets:nth-child(4) {
      animation-delay: 90ms;
    }

    & .pictogram__toets:nth-child(5) {
      animation-delay: 180ms;
    }

    & .pictogram__toets:nth-child(6) {
      animation-delay: 270ms;
    }

    & .pictogram__toets:nth-child(7) {
      animation-delay: 360ms;
    }

    & .pictogram__toets:nth-child(8) {
      animation-delay: 450ms;
    }

    @media (prefers-reduced-motion: reduce) {
      & :is(
          .pictogram__druppel,
          .pictogram__wagen,
          .pictogram__cijfer,
          .pictogram__toets
        ) {
        animation: none;
      }
    }
  }

  .luik--bpm .vak__titel {
    view-transition-name: bpm-titel;
  }

  @media (60rem <= width < 80rem) {
    .luiken {
      grid-auto-flow: row;
      grid-template-columns: 1fr 1fr;
    }

    .luik:nth-child(odd) {
      background-image: none;
    }

    .luik:nth-child(n + 3) {
      background-image: var(--lijn-h);
      background-repeat: no-repeat;
      background-size: 100% var(--stip-maat);
      background-position: top left;
    }

    .luik:nth-child(even):nth-child(n + 3) {
      background-image: var(--lijn-v), var(--lijn-h);
      background-size: var(--stip-maat) 100%, 100% var(--stip-maat);
      background-position: left top, top left;
    }
  }

  .vak__kop {
    inline-size: fit-content;
    padding-block-end: 0.5em;
    background-image: var(--lijn-h-accent);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: bottom left;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--accent-text);
  }

  .vak__titel {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.25;
  }

  .vak__gaan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-block-size: var(--besturing-hoogte);
    margin-block-start: 0.25rem;
    padding: 0.7em 1.2em;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    text-decoration: none;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
    border-radius: var(--radius-veld);

    background-image: linear-gradient(to top right, var(--accent) 50%, transparent 50%);
    background-size: 250% 250%;
    background-position: 100% 0%;
    transition:
      background-position var(--duur-veeg) var(--ease-out),
      border-color var(--duur-veeg) var(--ease-out),
      color var(--duur-kort) var(--ease-out);

    & svg {
      inline-size: 1.2em;
      block-size: 1.2em;
      fill: none;
      stroke: currentcolor;
      stroke-width: 1.6;
      stroke-linecap: round;
    }

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  .vak__gaan:hover,
  .vak__gaan:focus-visible {
    background-position: 0% 100%;
    border-color: var(--accent);
    color: var(--on-fill);
  }

  .proefmerk {
    position: absolute;
    z-index: 5;
    inset-block-end: 1rem;
    inset-inline-end: 1.25rem;
    padding: 0.4em 0.7em;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--oxide-text);
    border: 1px solid color-mix(in srgb, var(--oxide) 55%, transparent);
    border-radius: var(--radius);
    pointer-events: none;
  }

  @media (width < 60rem) {
    body.voorpagina .portaal {
      min-block-size: 0;
    }

    body.voorpagina .luiken {
      grid-auto-flow: row;
    }

    body.voorpagina .portaal__merk {
      padding-block: clamp(1.5rem, 4.5vh, 2.25rem) clamp(1.25rem, 3.5vh, 2rem);
    }

    body.voorpagina .portaal__merk .wordmark {
      font-size: clamp(2rem, 9vw, 3rem);
    }

    body.voorpagina .portaal__merk .rotator {
      margin-block-start: 0.6rem;
    }

    body.voorpagina .luik + .luik {
      background-image: var(--lijn-h);
      background-size: 100% var(--stip-maat);
      background-position: top left;
    }

    body.voorpagina .luik {
      gap: 0.7rem;
      padding-block: clamp(1.75rem, 4vh, 2.25rem);
    }

    body.voorpagina .luik__hoofd {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      inline-size: 100%;
      padding-block-end: 0.55rem;
      background-image: var(--lijn-h-accent);
      background-repeat: no-repeat;
      background-size: 100% var(--stip-maat);
      background-position: bottom left;
    }

    body.voorpagina .luik__no {
      position: static;
      order: 1;
      margin-inline-start: auto;
    }

    body.voorpagina .luik__teken svg {
      inline-size: 1.4rem;
      block-size: 1.4rem;
    }

    body.voorpagina .luik .vak__kop {
      padding-block-end: 0;
      background-image: none;
    }

    body.voorpagina .luik__gaan {
      margin-block-start: 0.25rem;
    }
  }
}

@layer components {
  .bladkop {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-inline-size: var(--leesmaat);
  }

  .bladkop__titel {
    font-size: var(--titelmaat);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .bladkop__lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--graphite-text);
    text-wrap: pretty;
  }

  .bladkop__stempel {
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);
  }

  .prose {
    max-inline-size: var(--leesmaat);
  }

  .prose > * + * {
    margin-block-start: 1rem;
  }

  .prose > p,
  .prose > .notice {
    inline-size: auto;
    max-inline-size: none;
  }

  .prose > .register {
    inline-size: 100%;
  }

  .prose p,
  .prose li {
    line-height: 1.65;
    text-wrap: pretty;
  }

  .prose h2 {
    margin-block-start: 2.5rem;
    padding-block-start: 1.25rem;
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: top left;
    font-size: var(--step-1);
    font-weight: 500;
    line-height: 1.25;
    text-wrap: balance;
  }

  .prose ul,
  .prose ol {
    padding-inline-start: 1.4rem;
  }

  .prose ul {
    list-style: disc;
  }

  .prose ol {
    list-style: decimal;
  }

  .prose li::marker {
    color: var(--accent-text);
  }

  .prose li + li {
    margin-block-start: 0.5rem;
  }

  .prose a {
    color: var(--accent-text);
    text-underline-offset: 0.2em;
  }

  .prose strong {
    font-weight: 500;
    color: var(--ink);
  }

  .prose .mono {
    font-family: var(--font-mono);
  }

  .prose .register {
    margin-block-start: 1.5rem;
  }
}

@layer components {
  .toolhoek {
    position: absolute;
    inset-block-start: var(--hoek-inzet);
    inset-inline-start: var(--hoek-inzet);
    z-index: 2;
    inline-size: max-content;
    pointer-events: none;
  }

  .toolhoek__lijn {
    position: absolute;
    z-index: -1;
    inset-block-start: calc(-1 * var(--hoek-inzet));
    inset-inline-start: calc(-1 * var(--hoek-inzet));
    inset-block-end: calc(-1 * var(--hoek-marge));
    inset-inline-end: calc(-1 * var(--hoek-marge));
    background-color: var(--nacht);
    border-inline-end: 1.5px dotted var(--accent-text);
    border-block-end: 1.5px dotted var(--accent-text);
    border-end-end-radius: var(--hoek-ronding);
    view-transition-name: bpm-boog;
  }

  .toolhoek__vakken {
    display: grid;
    gap: 1.4rem;
  }

  .toolhoek .vak--bpm,
  .toolhoek .vak--verkeer {
    --ink: var(--nacht-inkt);
    --graphite-text: var(--nacht-grafiet);
    --accent-text: var(--nacht-accent);
    --rule: var(--nacht-rand);
    inline-size: max-content;
    display: grid;
    justify-items: start;
    gap: 0.55rem;
    text-align: start;
    color: var(--ink);
    pointer-events: auto;
  }

  .toolhoek .vak__titel {
    display: none;
  }

  .toolhoek .vak--bpm {
    align-items: center;

    & .vak__kop {
      grid-column: 1 / -1;
      view-transition-name: bpm-kop;
    }

    & .vak__titel {
      text-wrap: balance;
      view-transition-name: bpm-titel;
    }

    & .vak__gaan {
      view-transition-name: bpm-knop;
    }
  }

  @media (width < 52rem) {
    .toolhoek {
      display: none;
    }
  }
}

@layer components {
  .verkeerskaart {
    margin: var(--step-1) 0 var(--step-2);
    padding: var(--step-0);
    background: var(--sheet);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-vlak);
  }

  .verkeerskaart > svg {
    display: block;
    width: 100%;
    max-width: 660px;
    height: auto;
    margin-inline: auto;
  }

  .filekaart__venster {
    overflow: hidden;
  }

  .verkeerskaart__land {
    fill: color-mix(in srgb, var(--ink) 7%, var(--sheet));
    stroke: var(--rule);
    stroke-width: 1.5;
    stroke-linejoin: round;
  }

  .verkeerskaart__wegen {
    fill: none;
    stroke: var(--graphite-text);
    stroke-width: 0.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.55;
  }

  .verkeerskaart__file {
    fill: none;
    stroke: var(--oxide-text);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .verkeerskaart__file--langzaam {
    stroke: var(--accent-text);
  }

  .verkeerskaart__file--ongeval {
    stroke: var(--oxide-text);
    stroke-width: 9;
    stroke-dasharray: 3 7;
  }

  .filegroep__licht {
    fill: none;
    stroke: var(--oxide-text);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: none;
  }

  .filegroep__licht.verkeerskaart__file--langzaam {
    stroke: var(--accent-text);
  }

  .filegroep__greep {
    fill: none;
    stroke: transparent;
    stroke-width: 26;
    stroke-linecap: round;
    pointer-events: stroke;
  }

  .filekaart {
    display: none;
    pointer-events: none;
  }

  .filekaart__vlak {
    fill: var(--vellum);
    stroke: var(--rule);
    stroke-width: 1.5;
  }

  .filekaart__vensterrand {
    fill: none;
    stroke: var(--rule);
    stroke-width: 1.5;
  }

  .filekaart__lijn {
    fill: none;
    stroke: var(--oxide-text);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .filekaart__lijn--langzaam {
    stroke: var(--accent-text);
  }

  .filekaart__weg {
    fill: var(--ink);
    font-family: var(--font-mono);
  }

  .filekaart__cijfer {
    fill: var(--oxide-text);
    font-family: var(--font-mono);
  }

  .filekaart__regel {
    fill: var(--graphite-text);
  }

  @media (hover: hover) and (pointer: fine) {
    .filegroep:hover .filekaart {
      display: block;
    }

    .filegroep:hover .filegroep__licht {
      display: block;
    }
  }

  .verkeerskaart figcaption {
    margin-top: var(--step--1);
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .filefilter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step--2);
    margin-bottom: var(--step-0);
  }

  .filefilter__knop {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 0.4em 0.85em;
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-veld);
    color: var(--ink);
    font-size: var(--step--1);
    text-decoration: none;
  }

  .filefilter__knop:hover {
    border-color: var(--ink);
  }

  .filefilter__knop--actief {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--vellum);
  }

  .filefilter__aantal {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .filefilter__knop--actief .filefilter__aantal {
    color: color-mix(in srgb, var(--vellum) 70%, var(--ink));
  }

  .filelijst {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--hair) solid var(--rule);

    @media (width >= 60rem) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--step-2);
      border-top: 0;

      & > .filerij:nth-child(-n + 2) {
        border-top: var(--hair) solid var(--rule);
      }

    }
  }

  .filerij {
    display: grid;
    grid-template-columns: 4.5rem 1fr auto auto;
    gap: var(--step--1);
    align-items: center;
    padding: var(--step--1) 0;
    border-bottom: var(--hair) solid var(--rule);
  }

  .filerij__weg {
    justify-self: start;
    min-inline-size: 3.4rem;
    font-family: var(--font-mono);
    font-size: var(--step-0);
    color: var(--ink);
    padding: 0.2em 0.5em;
    border: 1.5px solid var(--ink);
    text-align: center;
  }

  .filerij--stilstaand .filerij__weg {
    border-color: var(--oxide);
    color: var(--oxide-text);
  }

  .filerij__traject {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em;
    min-width: 0;
  }

  .filerij__plaats {
    color: var(--ink);
  }

  .filerij__pijl {
    color: var(--graphite-text);
  }

  .filerij__soort {
    flex-basis: 100%;
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .filerij__cijfer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 4.5rem;
  }

  .filerij__waarde {
    font-family: var(--font-mono);
    font-size: var(--step-0);
    color: var(--ink);
  }

  .filerij__cijfer--zwaar .filerij__waarde {
    color: var(--oxide-text);
  }

  .filerij__eenheid {
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .verkeer__voet {
    margin-top: var(--step-0);
    font-size: var(--step--1);
    color: var(--graphite-text);
  }

  @media (width < 40rem) {
    .filerij {
      grid-template-columns: 3.5rem 1fr auto;
    }

    .filerij__cijfer:not(.filerij__cijfer--zwaar) {
      display: none;
    }
  }

  .bladen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--step--2);
    margin: var(--step-1) 0 var(--step-0);
    border-bottom: var(--hair) solid var(--rule);
  }

  .bladen__tab {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4em;
    padding: 0.55em 1.1em 0.7em;
    margin-block-end: -1px;
    color: var(--graphite-text);
    font-size: var(--step-0);
    text-decoration: none;
    background-image: none;
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: bottom left;
  }

  .bladen__tab:hover,
  .bladen__tab:focus-visible {
    color: var(--ink);
    background-image: var(--lijn-h-accent);
  }

  .bladen__tab--actief {
    color: var(--ink);
    background-image: var(--lijn-h-accent);
  }

  .bladen__stempel {
    margin-inline-start: auto;
    align-self: center;
    padding-inline-end: 0.2rem;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);
  }

  @media (width < 40rem) {
    .bladen__stempel {
      display: none;
    }
  }

  .bladen__groep {
    padding: 0.2em 0.5em;
    border: 1.5px solid var(--accent-text);
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--accent-text);
  }

  .bladen__scheiding {
    inline-size: var(--hair);
    block-size: 1.1rem;
    margin-inline: var(--step--2);
    background: var(--rule);
  }

  .bladen__aantal {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .kaartlegenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--step--1) var(--step-0);
    margin: var(--step--1) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .kaartlegenda li {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }

  .kaartlegenda__streep {
    inline-size: 1.6rem;
    block-size: 0.3rem;
    border-radius: 999px;
    background: var(--oxide-text);
  }

  .kaartlegenda__streep--langzaam {
    background: var(--accent-text);
  }

  .kaartlegenda__streep--ongeval {
    background: repeating-linear-gradient(
      to right,
      var(--oxide-text) 0 0.2rem,
      transparent 0.2rem 0.45rem
    );
  }

}

@layer components {
  .verkeer__inleiding {
    max-inline-size: var(--leesmaat);
    margin-block: var(--step-0);
    color: var(--graphite-text);
  }

  .zwaartekaart {
    margin: var(--step-1) 0 var(--step-2);
    padding: var(--step-0);
    background: var(--sheet);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-vlak);
  }

  .zwaartekaart > svg {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin-inline: auto;
  }

  .zwaartekaart__land {
    fill: color-mix(in srgb, var(--ink) 8%, var(--sheet));
    stroke: var(--rule);
    stroke-width: 1.5;
    stroke-linejoin: round;
  }

  .zwaartekaart__weg {
    fill: none;
    stroke-linecap: butt;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .zwaartekaart__weg--stil {
    stroke: color-mix(in srgb, var(--graphite-text) 14%, transparent);
    stroke-width: 0.4;
  }

  .zwaartekaart__weg--0 {
    stroke: color-mix(in srgb, var(--graphite-text) 50%, transparent);
    stroke-width: 0.9;
  }

  .zwaartekaart__weg--1 {
    stroke: color-mix(in srgb, var(--oxide) 32%, var(--graphite-text));
    stroke-width: 1.4;
    stroke-linecap: round;
  }

  .zwaartekaart__weg--2 {
    stroke: color-mix(in srgb, var(--oxide) 55%, var(--graphite-text));
    stroke-width: 2.1;
    stroke-linecap: round;
  }

  .zwaartekaart__weg--3 {
    stroke: color-mix(in srgb, var(--oxide) 78%, var(--graphite-text));
    stroke-width: 3;
    stroke-linecap: round;
  }

  .zwaartekaart__weg--4 {
    stroke: var(--oxide);
    stroke-width: 4;
    stroke-linecap: round;
  }

  .zwaartekaart__weg--5 {
    stroke: var(--oxide);
    stroke-width: 5.4;
    stroke-linecap: round;
  }

  .zwaartekaart__weg--6 {
    stroke: var(--oxide);
    stroke-width: 7;
    stroke-linecap: round;
  }

  .zwaartekaart__merk {
    fill: var(--ink);
    stroke: var(--sheet);
    stroke-width: 7;
    paint-order: stroke fill;
    font-family: var(--font-mono);
    font-size: 26px;
    text-anchor: middle;
    dominant-baseline: middle;
  }

  .zwaarteschaal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: var(--step--1) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .zwaarteschaal__blok {
    inline-size: 1.5rem;
    border-radius: 999px;
  }

  .zwaarteschaal__blok--0 {
    background: color-mix(in srgb, var(--graphite-text) 50%, transparent);
    block-size: 0.2rem;
  }

  .zwaarteschaal__blok--1 {
    background: color-mix(in srgb, var(--oxide) 32%, var(--graphite-text));
    block-size: 0.28rem;
  }

  .zwaarteschaal__blok--2 {
    background: color-mix(in srgb, var(--oxide) 55%, var(--graphite-text));
    block-size: 0.36rem;
  }

  .zwaarteschaal__blok--3 {
    background: color-mix(in srgb, var(--oxide) 78%, var(--graphite-text));
    block-size: 0.46rem;
  }

  .zwaarteschaal__blok--4 {
    background: var(--oxide);
    block-size: 0.56rem;
  }

  .zwaarteschaal__blok--5 {
    background: var(--oxide);
    block-size: 0.68rem;
  }

  .zwaarteschaal__blok--6 {
    background: var(--oxide);
    block-size: 0.82rem;
  }

  .zwaartekaart figcaption {
    max-inline-size: var(--leesmaat);
    margin: var(--step--1) auto 0;
    font-size: var(--step--2);
    color: var(--graphite-text);
    text-align: center;
  }

  .ranglijst {
    margin: 0 0 var(--step-1);
    padding: 0;
    list-style: none;
    border-top: var(--hair) solid var(--rule);
  }

  .ranglijst__rij {
    display: grid;
    grid-template-columns: 2rem 3.6rem minmax(4rem, 1fr) auto auto;
    gap: var(--step--1);
    align-items: center;
    padding: var(--step--1) 0;
    border-bottom: var(--hair) solid var(--rule);
  }

  .ranglijst__plaats {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--graphite-text);
    text-align: end;
  }

  .ranglijst__weg {
    justify-self: start;
    min-inline-size: 3.4rem;
    padding: 0.2em 0.5em;
    border: 1.5px solid var(--ink);
    font-family: var(--font-mono);
    font-size: var(--step-0);
    color: var(--ink);
    text-align: center;
  }

  .ranglijst__balk {
    inline-size: 100%;
    block-size: 0.5rem;
  }

  .ranglijst__vulling {
    fill: var(--oxide);
  }

  .ranglijst__vulling--0,
  .ranglijst__vulling--1 {
    fill: color-mix(in srgb, var(--oxide) 55%, var(--graphite-text));
  }

  .ranglijst__cijfer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-inline-size: 5rem;
  }

  .ranglijst__waarde {
    font-family: var(--font-mono);
    font-size: var(--step-0);
    color: var(--ink);
  }

  .ranglijst__eenheid {
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .weekraster {
    margin: var(--step-0) 0 var(--step-1);
    overflow-x: auto;
  }

  .weekraster__tabel {
    border-collapse: separate;
    border-spacing: 2px;
  }

  .weekraster__kop {
    margin-block-end: var(--step--1);
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--graphite-text);
    text-align: start;
  }

  .weekraster__uur,
  .weekraster__dag {
    font-family: var(--font-mono);
    font-size: var(--step--2);
    font-weight: 400;
    color: var(--graphite-text);
    text-align: center;
  }

  .weekraster__dag {
    padding-inline-end: 0.4rem;
    text-align: end;
  }

  .weekraster__vak {
    inline-size: 1.5rem;
    block-size: 1.1rem;
    border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 6%, var(--sheet));
  }

  .weekraster__vak--1 {
    background: color-mix(in srgb, var(--oxide) 25%, var(--sheet));
  }
  .weekraster__vak--2 {
    background: color-mix(in srgb, var(--oxide) 50%, var(--sheet));
  }
  .weekraster__vak--3 {
    background: color-mix(in srgb, var(--oxide) 75%, var(--sheet));
  }
  .weekraster__vak--4 {
    background: var(--oxide);
  }

  .visueel-verborgen {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (width < 40rem) {
    .ranglijst__rij {
      grid-template-columns: 1.6rem 3.2rem 1fr auto;
    }

    .ranglijst__cijfer:last-child {
      display: none;
    }
  }

  .trajecten {
    margin: var(--step--1) 0 var(--step-1);
    padding: 0;
    list-style: none;
    border-top: var(--hair) solid var(--rule);
  }

  .trajecten__rij {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2rem var(--step--1);
    padding: var(--step--1) 0;
    border-bottom: var(--hair) solid var(--rule);
  }

  .trajecten__naam {
    color: var(--ink);
  }

  .trajecten__deel {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--oxide-text);
    text-align: end;
  }

  .trajecten__balk {
    grid-column: 1 / -1;
    inline-size: 100%;
    block-size: 0.35rem;
  }

  .trajecten__vulling {
    fill: var(--oxide);
  }

  .nustand {
    max-inline-size: var(--leesmaat);
    margin: var(--step-0) 0 var(--step-1);
    padding: var(--step--1) var(--step-0);
    border: var(--hair) solid var(--rule);
    border-inline-start: 3px solid var(--oxide);
    border-radius: var(--radius-vlak);
    background: var(--sheet);
  }

  .nustand--vrij {
    border-inline-start-color: var(--graphite-text);
    color: var(--graphite-text);
  }

  .nustand__kop {
    display: block;
    margin-block-end: 0.2rem;
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-index);
    color: var(--oxide-text);
  }

  .nustand--vrij .nustand__kop {
    color: var(--graphite-text);
  }

  .nustand__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nustand__rij {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.3rem var(--step-0);
    padding-block: 0.3rem;
    border-block-start: var(--hair) solid var(--rule);
  }

  .nustand__rij:first-child {
    border-block-start: 0;
  }

  .nustand__traject {
    color: var(--ink);
  }

  .nustand__cijfer {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--oxide-text);
  }

  .nustand__voet {
    margin: var(--step--1) 0 0;
    font-size: var(--step--2);
  }
}

@layer components {
  .weerandere {
    margin: var(--step--1) 0 var(--step-1);
    font-size: var(--step--1);
  }

  .weerlocatie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--step--1);
    margin: var(--step-0) 0 var(--step-1);
  }

  .weerlocatie__knop {
    min-height: var(--besturing-hoogte);
    padding-inline: var(--step-0);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-veld);
    background: var(--sheet);
    color: var(--ink);
    font: inherit;
    cursor: pointer;
  }

  .weerlocatie__knop:hover:not(:disabled),
  .weerlocatie__knop:focus-visible {
    border-color: var(--accent-text);
    color: var(--accent-text);
  }

  .weerlocatie__knop:disabled {
    opacity: 0.55;
    cursor: default;
  }

  .weerlocatie__melding {
    color: var(--graphite-text);
    font-size: var(--step--1);
  }

  .plaatslijst {
    margin: var(--step-1) 0 0;
    padding: 0;
    list-style: none;
    border-top: var(--hair) solid var(--rule);
  }

  .plaatsrij {
    border-bottom: var(--hair) solid var(--rule);
  }

  .plaatsrij a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--step--1);
    padding: var(--step--1) 0;
    text-decoration: none;
  }

  .plaatsrij a:hover .plaatsrij__naam,
  .plaatsrij a:focus-visible .plaatsrij__naam {
    color: var(--accent-text);
  }

  .plaatsrij__naam {
    font-family: var(--font-display);
    font-size: var(--step-1);
    color: var(--ink);
  }

  .plaatsrij__bij {
    color: var(--graphite-text);
    font-size: var(--step--1);
  }

  .weerteken {
    width: 1.75rem;
    height: 1.82rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .weerkop {
    display: grid;
    gap: var(--step-0);
    margin: var(--step-1) 0;
  }

  @media (min-width: 46rem) {
    .weerkop {
      grid-template-columns: 1fr 1fr;
    }
  }

  .weerkop > .weernu,
  .weerkop > .regenwacht {
    margin: 0;
  }

  .weernu {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    align-content: start;
    gap: var(--step-0) var(--step-1);
    margin: var(--step-1) 0;
    padding: var(--step-1);
    background: var(--sheet);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-vlak);
  }

  .weernu__teken {
    color: var(--accent-text);
  }

  .weernu__teken .weerteken {
    width: 3rem;
    height: 3.12rem;
    stroke-width: 1.1;
  }

  .weernu__graad {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 9vw, 3.6rem);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .weernu__woord {
    min-width: 0;
  }

  .weernu__soort {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
  }

  .weernu__gevoel {
    margin: 0.15rem 0 0;
    color: var(--graphite-text);
    font-size: var(--step--1);
  }

  .weernu__uitersten {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--step-1);
    margin: 0;
    padding-top: var(--step-0);
    border-top: var(--hair) solid var(--rule);
  }

  .weernu__uitersten dt {
    color: var(--graphite-text);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-index);
    text-transform: uppercase;
  }

  .weernu__uitersten dd {
    margin: 0.1rem 0 0;
    font-family: var(--font-mono);
    font-size: var(--step-1);
  }

  .regenwacht {
    margin: var(--step-1) 0;
    padding: var(--step-0) var(--step-1);
    border: var(--hair) solid var(--rule);
    border-left: 3px solid var(--peil-text);
    border-radius: var(--radius-vlak);
    background: var(--sheet);
  }

  .regenwacht--droog {
    border-left-color: var(--graphite-text);
  }

  .regenwacht__kop {
    margin: 0;
    color: var(--graphite-text);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-index);
    text-transform: uppercase;
  }

  .regenwacht__antwoord {
    margin: 0.25rem 0 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.15;
    color: var(--peil-text);
  }

  .regenwacht--droog .regenwacht__antwoord {
    color: var(--ink);
  }

  .regenwacht__bij {
    margin: 0.2rem 0 0;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--graphite-text);
  }

  .buienlijn {
    margin: var(--step-1) 0;
  }

  .tijdvenster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--step--2);
    margin-bottom: var(--step--1);
  }

  .tijdvenster__label {
    color: var(--accent-text);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-index);
    text-transform: uppercase;
  }

  .tijdvenster__keuze,
  .tijdvenster__knop {
    padding: 0.3rem 0.5rem;
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-veld);
    background: var(--sheet);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: var(--step--1);
  }

  .tijdvenster__knop {
    cursor: pointer;
  }

  .tijdvenster__keuze:focus-visible,
  .tijdvenster__knop:hover,
  .tijdvenster__knop:focus-visible {
    border-color: var(--accent-text);
    color: var(--accent-text);
  }

  .buienlijn__zin {
    margin: var(--step--1) 0 var(--step-0);
    font-family: var(--font-display);
    font-size: var(--step-1);
  }

  .buienlijn__zin--nat {
    color: var(--accent-text);
  }

  .buienlijn__grafiek {
    display: block;
    width: 100%;
    height: 4.5rem;
  }

  .buienlijn__bodem {
    fill: var(--rule);
  }

  .buienlijn__staaf {
    fill: var(--peil-text);
    fill-opacity: 0.55;
  }

  .buienlijn__staaf--radar {
    fill-opacity: 1;
  }

  .buienlijn__tijden {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--graphite-text);
    font-family: var(--font-mono);
    font-size: var(--step--2);
  }

  .uurlijst,
  .daglijst {
    margin: var(--step-1) 0 0;
    padding: 0;
    list-style: none;
    border-top: var(--hair) solid var(--rule);
  }

  @media (min-width: 46rem) {
    .uurlijst {
      columns: 2;
      column-gap: var(--step-2);
      column-rule: var(--hair) solid var(--rule);
    }

    .uurlijst .uurrij {
      break-inside: avoid;
    }
  }

  .uurrij,
  .dagrij {
    display: grid;
    align-items: center;
    gap: var(--step--1);
    padding: var(--step--2) 0;
    border-bottom: var(--hair) solid var(--rule);
  }

  .uurrij {
    grid-template-columns: 2.6rem 1.9rem 1fr 2.9rem minmax(4rem, 7rem) 4.4rem;
  }

  .dagrij {
    grid-template-columns: minmax(6rem, 8rem) 1.9rem 1fr 4.4rem 2.4rem minmax(4rem, 9rem) 2.4rem;
  }

  .uurrij__tijd {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--graphite-text);
  }

  .uurrij__teken,
  .dagrij__teken {
    color: var(--accent-text);
  }

  .uurrij__soort,
  .dagrij__soort {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--step--1);
  }

  .uurrij__graad,
  .dagrij__laag,
  .dagrij__hoog {
    font-family: var(--font-mono);
    font-size: var(--step-0);
    text-align: right;
  }

  .dagrij__laag {
    color: var(--graphite-text);
  }

  .uurrij__lijn,
  .dagrij__balk {
    width: 100%;
    height: 0.75rem;
  }

  .uurrij__spoor,
  .dagrij__spoor {
    fill: var(--rule);
  }

  .uurrij__stip {
    fill: var(--accent-text);
  }

  .dagrij__bereik {
    fill: var(--accent-text);
  }

  .uurrij__regen,
  .dagrij__regen {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
  }

  .uurrij__kans,
  .dagrij__kans {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--peil-text);
  }

  .uurrij__mm,
  .dagrij__mm {
    font-size: var(--step--2);
    color: var(--graphite-text);
  }

  .dagrij__dag {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }

  .dagrij__naam {
    font-family: var(--font-display);
    font-size: var(--step-0);
  }

  .dagrij__datum {
    color: var(--graphite-text);
    font-size: var(--step--2);
  }

  .regenkaart {
    margin: var(--step-1) 0 var(--step-2);
  }

  .regenuren {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: var(--step-0);
  }

  .regenuren__knop {
    padding: 0.3rem 0.55rem;
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-veld);
    color: var(--graphite-text);
    font-family: var(--font-mono);
    font-size: var(--step--2);
    text-decoration: none;
  }

  .regenuren__knop:hover,
  .regenuren__knop:focus-visible {
    border-color: var(--accent-text);
    color: var(--accent-text);
  }

  .regenuren__knop--actief {
    border-color: var(--accent-text);
    background: var(--accent-text);
    color: var(--sheet);
  }

  .regenkaart__vlak {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    margin-inline: auto;
    padding: var(--step-0);
    background: var(--sheet);
    border: var(--hair) solid var(--rule);
    border-radius: var(--radius-vlak);
  }

  .regenkaart__land {
    fill: color-mix(in srgb, var(--ink) 7%, var(--sheet));
    stroke: none;
  }

  .regenkaart__rand {
    fill: none;
    stroke: var(--rule);
    stroke-width: 1.5;
    stroke-linejoin: round;
  }

  .regenkaart__bui {
    fill: var(--peil-text);
  }

  .regenkaart__eigen circle {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.5;
  }

  .regenkaart__eigenstip {
    fill: var(--ink);
  }

  .regenkaart figcaption {
    margin-top: var(--step-0);
    color: var(--graphite-text);
    font-size: var(--step--1);
  }

  .weerbronnen {
    margin-top: var(--step-2);
    padding-top: var(--step-0);
    border-top: var(--hair) solid var(--rule);
    color: var(--graphite-text);
    font-size: var(--step--1);
  }

  .weerbronnen p + p {
    margin-top: var(--step--1);
  }

  @media (max-width: 34rem) {
    .weernu {
      grid-template-columns: auto 1fr;
    }

    .weernu__woord {
      grid-column: 1 / -1;
    }

    .uurrij {
      grid-template-columns: 2.4rem 1.7rem 1fr 2.7rem 3.9rem;
    }

    .uurrij__lijn {
      display: none;
    }

    .dagrij {
      grid-template-columns: minmax(5rem, 1fr) 1.7rem 2.2rem minmax(3rem, 6rem) 2.2rem 3.9rem;
    }

    .dagrij__soort {
      display: none;
    }
  }
}

@layer utilities {
  .mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
  }

  .muted {
    color: var(--graphite-text);
  }

  .gap-blok {
    margin-block-start: 2rem;
  }

  .vh {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}


@layer utilities {
  .stagingband {
    position: fixed;
    z-index: 100;
    inset-block-start: 1rem;
    inset-inline-end: 1rem;

    margin: 0;
    padding: 0.45em 0.9em;

    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: var(--tracking-index);
    text-transform: uppercase;

    color: var(--oxide-text);
    background-color: var(--vellum);
    border: 1px solid var(--oxide);
    border-radius: var(--radius-veld);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--ink) 12%, transparent);

    pointer-events: none;
    user-select: none;
  }

  @media (width < 40rem) {
    .stagingband {
      font-size: 0.6rem;
      padding: 0.35em 0.6em;
    }
  }

  @media print {
    .stagingband {
      display: none;
    }
  }
}

.printbron,
.printplaat {
  display: none;
}

@page {
  size: A4 portrait;
  margin: 14mm 13mm 16mm;
}

@media print {
  :root,
  body,
  body.blad,
  body.stage {
    --vellum: #fff;
    --sheet: var(--blad-vlak);
    --ink: #16191a;
    --graphite: #6c726b;
    --graphite-text: #5c625c;
    --rule: #b7bdb6;
    --accent-text: var(--accent);
    --oxide-text: var(--oxide);

    --lijn-h: repeating-linear-gradient(
      to right,
      var(--rule) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );
    --lijn-v: repeating-linear-gradient(
      to bottom,
      var(--rule) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );
    --lijn-h-accent: repeating-linear-gradient(
      to right,
      var(--accent-text) 0 var(--stip-maat),
      transparent var(--stip-maat) var(--stip-stap)
    );

    --display: 22pt;

    background: #fff;
    color: var(--ink);
  }

  *,
  *::before,
  *::after {
    print-color-adjust: exact;
  }

  html {
    background: #fff;
    color-scheme: light;
  }

  .quicknav,
  .bpmhoek,
  .hoekgang,
  .proefmerk,
  .printknop,
  .search,
  .loader,
  .plate-demo,
  .linkish,
  #wolk,
  #recent-wissen,
  .printhint,
  .voorbeeldregel {
    display: none;
  }

  .plate-back {
    display: none;
  }

  .printplaat {
    display: block;
    font-size: 26pt;
  }

  .printbron {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    font-size: 8pt;
    color: #444;
    padding-block-end: 0.4rem;
    background-image: var(--lijn-h);
    background-repeat: no-repeat;
    background-size: 100% var(--stip-maat);
    background-position: bottom left;
  }

  .sheet {
    max-inline-size: none;
    inline-size: 100%;
    padding-inline: 0;
    margin-inline: 0;
  }

  body {
    font-size: 9.5pt;
    line-height: 1.4;
  }

  .masthead {
    padding-block: 0 0.75rem;
  }

  .plate-holder,
  .plate-face,
  .fact,
  .card {
    transform: none;
    animation: none;
    box-shadow: none;
  }

  .section {
    break-inside: auto;
  }

  h1,
  h2,
  h3,
  .index,
  caption {
    break-after: avoid;
    break-inside: avoid;
  }

  tr,
  .fact,
  .tile,
  .card,
  .beurt,
  .timeline li,
  .defect {
    break-inside: avoid;
  }

  .tarieven {
    break-inside: avoid;
  }

  .notice {
    break-inside: avoid;
  }

  .index + .notice {
    break-after: avoid;
  }

  p {
    orphans: 3;
    widows: 3;
  }

  a.card {
    background-image: none;
  }

  .card::after {
    display: none;
  }

  .source {
    display: none;
  }

  .colophon a[href^="http"]::after {
    content: " (" attr(href) ")";
    color: var(--graphite-text);
  }

  .colophon {
    break-before: avoid;
    margin-block: 1.5rem 0;
  }
}