/* Stijl voor de testsprint-site. Alle waarden komen uit ../../../DESIGN.md (hoofdmap). */

/* Lettertypes: Geist en Geist Mono v1.7.2 van Vercel (SIL Open Font License, zie ../fonts/OFL.txt), zelf gehost,
   dus de site haalt niets bij Google. Alleen de gewichten die de site gebruikt. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@property --lijn {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

:root {
  --bg: #050505;
  --surface: #0f0f0f;
  --border: #1e1e1e;
  --line: #181818;
  --line-strong: #5e5e5e;
  --text: #ffffff;
  --text-2: #d0d0d0; /* was #bbbbbb; lichter leest beter voor oudere ogen (20 okt) */
  --text-3: #a4a4a4;
  --text-4: #898989;
  --accent: #f18852;
  --accent-van: #deb28c;

  --sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --track: 0.08em;
  --radius: 3px;

  --gutter: max(32px, env(safe-area-inset-left), env(safe-area-inset-right)); /* liggend: niet onder de notch */
  --binnen: 32px;
  --kader: min(1200px, 100% - 2 * var(--gutter));
  --kop-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --aankomst: cubic-bezier(0.16, 1, 0.3, 1);
  --lus: 17s;

  color-scheme: dark;
}

@media (max-width: 767px) {
  :root {
    --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
    --binnen: 16px;
    --kop-h: 60px;
  }
}

/* ---------- basis ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kop-h) + 24px);
  scrollbar-color: var(--line-strong) var(--bg);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 2px solid var(--bg);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--line-strong);
}

input,
textarea {
  caret-color: var(--accent);
}

p a,
small a,
dd a {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-strong);
  transition: text-decoration-color 0.25s;
}

p a:hover,
small a:hover,
dd a:hover {
  text-decoration-color: currentColor;
}

body {
  position: relative;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.6 var(--sans); /* 18 px, 17 op telefoons: prettiger voor oudere lezers (20 okt) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  counter-reset: sectie;
}

img,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent);
  color: #000;
}

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--text);
  color: #000;
  font: 500 14px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
}

.skip:focus-visible {
  transform: none;
}

.wrap {
  width: var(--kader);
  margin-inline: auto;
  padding-inline: var(--binnen);
}

/* ---------- kaderlijnen en markeringen ---------- */

.lijnen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.lijnen::before,
.lijnen::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--kader) / 2);
  width: 1px;
  background: var(--line);
}

.lijnen::after {
  left: calc(50% + var(--kader) / 2 - 1px);
}

.js .lijnen {
  animation: lijnen-in 1.4s var(--ease) both;
}

@keyframes lijnen-in {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  99% {
    clip-path: inset(0 0 calc(100% - 100vh) 0);
  }
  100% {
    clip-path: inset(0);
  }
}

/* een vierkantje op elk kruispunt van een horizontale lijn met de kaderlijnen */
.kruis {
  position: relative;
}

.kruis::before,
.kruis::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -4px;
  left: calc(50% - var(--kader) / 2 - 3px);
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}

.kruis::after {
  left: calc(50% + var(--kader) / 2 - 4px);
}

.js .kruis::before,
.js .kruis::after {
  animation: marker-in 0.5s var(--ease) both;
  animation-delay: 0.9s;
}

@keyframes marker-in {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* ---------- tijdelijke balk (Black Friday) ---------- */

.balk {
  display: none;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line);
}

.bf .balk {
  display: block;
}

.balk p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: var(--kader);
  margin-inline: auto;
  padding: 10px var(--binnen);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.balk p::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

/* ---------- kop ---------- */

.kop {
  position: sticky;
  top: 0;
  z-index: 50;
}

.kop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  transform-origin: 50% 50%;
}

.js .kop::after {
  animation: lijn-breed 1.1s var(--ease) both 0.15s;
}

@keyframes lijn-breed {
  from {
    transform: scaleX(0);
  }
}

.kop .kruis-onder {
  position: absolute;
  inset: auto 0 0;
  height: 0;
}

.kop .kruis-onder::before,
.kop .kruis-onder::after {
  top: -3px;
}

.kop__binnen {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: var(--kader);
  height: var(--kop-h);
  margin-inline: auto;
  padding-inline: var(--binnen);
}

/* logo (08 "Winnaar", 14 okt): vier varianten, alleen de oranje winnaar raakt de toplijn; daarnaast het woord */
.merk {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  color: var(--text);
  font: 400 20px/1 var(--sans);
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
  min-height: 44px;
}

.merk img {
  width: auto;
  height: 20px;
}

.merk__woord span {
  color: var(--text-3);
}

.menu {
  position: relative;
  display: flex;
  gap: 40px;
}

.menu a {
  position: relative;
  color: var(--text-3);
  font: 400 14px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s;
}

.menu a:hover,
.menu a[aria-current="true"] {
  color: var(--text);
}

/* één oranje markering die naar de huidige sectie schuift */
.menu__wijzer {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(var(--x, 0px)) scale(0.3);
  transition:
    transform 0.5s var(--aankomst),
    opacity 0.3s;
}

.menu__wijzer.is-aan {
  opacity: 1;
  transform: translateX(var(--x, 0px));
}

.kop__actie {
  justify-self: end;
  white-space: nowrap;
}

.menuknop {
  display: none;
}

/* onder 1024 px past het menu niet naast logo en knop: de knop "Menu" opent het als paneel onder de kop (20 okt) */
@media (max-width: 1023px) {
  .kop__binnen {
    grid-template-columns: 1fr auto auto;
    gap: 12px;
  }

  .menuknop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: 500 14px/1 var(--mono);
    letter-spacing: var(--track);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s;
  }

  .menuknop:hover,
  .menuknop[aria-expanded="true"] {
    border-color: var(--line-strong);
  }

  .menuknop__streepjes {
    position: relative;
    width: 14px;
    height: 10px;
  }

  .menuknop__streepjes i {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    transition:
      top 0.25s var(--ease),
      transform 0.25s var(--ease);
  }

  .menuknop__streepjes i:nth-child(1) {
    top: 2px;
  }

  .menuknop__streepjes i:nth-child(2) {
    top: 7px;
  }

  .menuknop[aria-expanded="true"] .menuknop__streepjes i {
    top: 4.25px;
  }

  .menuknop[aria-expanded="true"] .menuknop__streepjes i:nth-child(1) {
    transform: rotate(45deg);
  }

  .menuknop[aria-expanded="true"] .menuknop__streepjes i:nth-child(2) {
    transform: rotate(-45deg);
  }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 4px max(var(--binnen), calc((100% - var(--kader)) / 2 + var(--binnen))) 12px;
    border-bottom: 1px solid var(--line);
    background: #070707; /* dicht: niets van de pagina schemert door de menuregels heen */
  }

  .kop.is-menu-open .menu {
    display: flex;
  }

  .menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    font: 400 20px/1.2 var(--sans);
    letter-spacing: -0.01em;
    text-transform: none;
  }

  .menu a:last-of-type {
    border-bottom: 0;
  }

  .menu a::after {
    content: "";
    width: 16px;
    height: 11px;
    margin-left: auto;
    background: var(--text-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M12 0h2v2h-2zM15 3h2v2h-2zM0 6h2v2H0zM3 6h2v2H3zM6 6h2v2H6zM9 6h2v2H9zM12 6h2v2h-2zM15 6h2v2h-2zM18 6h2v2h-2zM15 9h2v2h-2zM12 12h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M12 0h2v2h-2zM15 3h2v2h-2zM0 6h2v2H0zM3 6h2v2H3zM6 6h2v2H6zM9 6h2v2H9zM12 6h2v2h-2zM15 6h2v2h-2zM18 6h2v2h-2zM15 9h2v2h-2zM12 12h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .menu a[aria-current="true"]::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--accent);
  }

  .menu__wijzer {
    display: none;
  }
}

/* telefoons: logo en knop passen niet samen in de kop. De kop toont het logo met de naam,
   "Boek een gratis call" staat onderaan in de duimbalk, binnen bereik van de duim */
@media (max-width: 599px) {
  .kop .kop__actie {
    display: none;
  }
}

/* ---------- duimbalk (telefoons) ---------- */

/* Komt in beeld als de knop in de hero voorbij is, gaat weg bij afsluiting, formulier en voet (site.js, deel 11) */
.duimbalk {
  display: none;
}

@media (max-width: 599px) {
  .duimbalk {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: block;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: rgb(5 5 5 / 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transform: translateY(calc(100% + 8px));
    visibility: hidden;
    transition:
      transform 0.35s var(--ease),
      visibility 0s linear 0.35s;
  }

  .duimbalk.is-zichtbaar {
    transform: none;
    visibility: visible;
    transition:
      transform 0.5s var(--aankomst),
      visibility 0s;
  }

  .duimbalk .duimbalk__lijn {
    position: absolute;
    inset: 0 0 auto;
    height: 0;
  }

  .duimbalk .knop {
    display: flex;
    width: 100%;
    min-height: 48px;
  }

  .duimbalk .knop__tekst {
    flex: 1;
    justify-content: center;
  }
}

/* ---------- knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: stretch;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius);
  font: 500 14px/1.3 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.knop--primair {
  background: var(--text);
  color: #000;
  transition: background-color 0.25s;
}

.knop--primair:hover {
  background: #e9e9e9;
}

.knop__tekst {
  display: flex;
  align-items: center;
  padding: 11px 20px;
}

.knop__pijl {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  border-left: 1px solid rgb(0 0 0 / 0.14);
}

.knop__pijl svg {
  width: 20px;
  height: 14px;
  transition: transform 0.45s var(--ease);
}

.knop:hover .knop__pijl svg,
.knop:focus-visible .knop__pijl svg {
  transform: translateX(3px);
}

.knop__pijl rect {
  transition: opacity 0.3s;
}

.knop:hover .knop__pijl rect {
  animation: pijl-loop 1.2s steps(1) infinite;
  animation-delay: calc(var(--k) * 90ms);
}

@keyframes pijl-loop {
  0%,
  100% {
    opacity: 1;
  }
  20% {
    opacity: 0.25;
  }
}

.knop--rand {
  align-items: center;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  transition: border-color 0.25s;
}

.knop--rand:hover {
  border-color: var(--line-strong);
}

.knop--rand {
  gap: 12px;
}

.pijl {
  flex: none;
  width: 16px;
  height: 11px;
  transition: transform 0.35s var(--ease);
}

.knop--rand:hover .pijl {
  transform: translateX(3px);
}

/* tweede knop: een vlak met rand en pijl, met vier snijtekens op de hoeken. Zonder rand zagen
   oudere bezoekers hem niet als knop (20 okt) */
.snijlink {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.25s;
  font: 500 14px/1.3 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  text-decoration: none;
}

.snijlink i {
  position: absolute;
  width: 9px;
  height: 9px;
  color: var(--text-3);
  transition: transform 0.4s var(--ease), color 0.3s;
}

.snijlink i::before,
.snijlink i::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.snijlink i::before {
  top: 4px;
  left: 0;
  width: 9px;
  height: 1px;
}

.snijlink i::after {
  top: 0;
  left: 4px;
  width: 1px;
  height: 9px;
}

.snijlink i:nth-child(1) {
  top: -4px;
  left: -4px;
}

.snijlink i:nth-child(2) {
  top: -4px;
  right: -4px;
}

.snijlink i:nth-child(3) {
  bottom: -4px;
  left: -4px;
}

.snijlink i:nth-child(4) {
  right: -4px;
  bottom: -4px;
}

.snijlink:hover {
  border-color: var(--line-strong);
}

.snijlink:hover i {
  color: var(--text);
}

.snijlink:hover .pijl {
  transform: translateX(3px);
}

.pijl--omlaag,
.snijlink:hover .pijl--omlaag {
  transform: rotate(90deg);
}

.snijlink:hover .pijl--omlaag {
  transform: translateY(3px) rotate(90deg);
}

.snijlink:hover i:nth-child(1) {
  transform: translate(-3px, -3px);
}

.snijlink:hover i:nth-child(2) {
  transform: translate(3px, -3px);
}

.snijlink:hover i:nth-child(3) {
  transform: translate(-3px, 3px);
}

.snijlink:hover i:nth-child(4) {
  transform: translate(3px, 3px);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow-x: clip; /* de gloed achter de handen is breder dan het scherm; zonder dit scrolt de pagina opzij */
  min-height: calc(100vh - var(--boven, var(--kop-h)));
  min-height: calc(100svh - var(--boven, var(--kop-h)));
}

.hero__tekst {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--kader);
  margin-inline: auto;
  padding: clamp(32px, 7vh, 112px) var(--binnen) 0;
  text-align: center;
}

.js .hero__tekst > * {
  animation: in-beeld 1s var(--ease) both;
}

.js .hero__tekst > :nth-child(2) {
  animation-delay: 0.06s;
}

.js .hero__tekst > :nth-child(3) {
  animation-delay: 0.12s;
}

.js .hero__tekst > :nth-child(4) {
  animation-delay: 0.18s;
}

.js .hero__tekst > :nth-child(5) {
  animation-delay: 0.24s;
}

@keyframes in-beeld {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.oog {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font: 400 16px/1.2 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.oog__stip {
  flex: none;
  width: 10px;
  height: 10px;
  background:
    linear-gradient(var(--accent-van), var(--accent-van)) 0 0 / 4px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 6px 0 / 4px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 6px / 4px 4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 6px 6px / 4px 4px no-repeat;
}

.oog__tekst {
  background: linear-gradient(90deg, var(--accent-van), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero h1 {
  margin: 28px 0 0;
  font: 400 clamp(32px, 4.4vw, 56px) / 1.08 var(--sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero h1 .regel {
  display: block;
}

.hero__sub {
  max-width: 750px;
  margin-top: 24px;
  color: var(--text-2);
  font-size: 20px;
  line-height: 1.6;
  text-wrap: pretty;
}

.acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  margin-top: 36px;
}

.hero__klein {
  margin-top: 20px;
  color: var(--text-4);
  font: 400 14px/1.5 var(--mono);
}

/* handen */
.handen {
  /* het canvas loopt iets omhoog de lege marge in, zodat de armen ruim kunnen wiebelen
     (altijd minder dan de marge, dus nooit over de tekst) */
  --overloop: clamp(8px, 2vh, 28px);
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: clamp(140px, 22vh, 320px);
  margin-top: clamp(12px, 3vh, 40px);
}

.handen canvas {
  position: absolute;
  top: calc(-1 * var(--overloop));
  left: 0;
  width: 100%;
  height: calc(100% + var(--overloop));
  pointer-events: none;
}

.handen__stil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.handen__stil {
  object-fit: cover;
  object-position: 50% 50%;
}

.js .handen:not(.handen--fout) .handen__stil {
  opacity: 0;
}


.week__label {
  display: block;
  color: var(--accent);
  font: 400 14px/1.3 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.arcering {
  width: var(--kader);
  height: 32px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, var(--border) 0 1px, transparent 1px 10px);
}

@media (max-width: 767px) {
  .balk p {
    align-items: flex-start;
    justify-content: flex-start;
    padding-block: 10px;
    text-align: left;
  }

  .balk p::before {
    margin-top: 0.55em;
  }

  .hero h1 .regel {
    display: inline;
  }

  body {
    font-size: 17px;
  }

  .hero h1 {
    font-size: clamp(28px, 8.53vw, 32px);
  }

  .hero__sub {
    font-size: 18px;
  }

  .oog {
    font-size: 14px;
  }

  .acties {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 28px;
  }

  .acties .knop {
    min-height: 48px;
  }

  .acties .knop__tekst {
    flex: 1;
    justify-content: center;
    padding-inline: 12px;
    text-align: center;
  }

  .acties .snijlink {
    min-height: 48px;
  }

  .hero__klein {
    font-size: 15px;
  }

  .arcering {
    height: 24px;
  }
}

/* ---------- voorbeeldadvertenties: band onder de hero ---------- */

/* De band schuift langzaam naar links (site.js, deel 10). Hij stopt bij muis of focus erop,
   met de pauzeknop, buiten beeld en in een verborgen tabblad. Met "animaties uit" scroll je zelf. */
.band {
  --ad-h: clamp(280px, 26vw, 380px);
  --ad-gap: 20px;
  --band-top: 56px;
  position: relative;
  z-index: 1;
  padding-top: var(--band-top);
}

.band__venster {
  overflow: hidden;
  /* de randen lopen zacht uit, alsof de band onder de kaderlijnen door schuift */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.band__spoor {
  display: flex;
  gap: var(--ad-gap);
  width: max-content;
  margin: 0;
  /* de eerste advertentie begint op de kaderlijn; de lus meet vanaf de eerste kaart, dus dit schuift mee weg */
  padding: 0 0 0 calc((100% - var(--kader)) / 2);
  list-style: none;
}

.band--loopt .band__spoor {
  will-change: transform;
}

/* zelf bedienen (21 okt): slepen met de muis, vegen op touch; verticaal scrollen van de pagina blijft gewoon werken */
.band--loopt .band__venster {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.band--sleept .band__venster {
  cursor: grabbing;
}

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

.band__ad img,
.band__ad video {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* het label staat onder de kaart, niet erop: op de kaart dekte het de kop van de advertentie af (20 okt) */
.band__ad {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
}

.band__ad img,
.band__ad video,
.band__ad .leeg-vak {
  display: block;
  width: auto;
  height: var(--ad-h);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* video's (21 okt): 3:4, zonder geluid; de maat staat vast, zodat de lus niet verspringt als ze laden */
.band__ad video {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* staande video's (26 okt): 9:16 zoals Reels en TikTok, even hoog als de rest */
.band__ad--staand video {
  aspect-ratio: 9 / 16;
}

.band__ad .leeg-vak {
  aspect-ratio: 4 / 5;
}

/* het label (26 okt: met de soort erbij) maakt een smalle 9:16-kaart nooit breder; past het niet, dan kort het in */
.band__label {
  contain: inline-size;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font: 400 12px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.band__voet {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: var(--kader);
  margin: 8px auto 0;
}

/* pijlknoppen (21 okt, "zelf bediening is te onduidelijk"): groot en rond, links en rechts óp de band,
   halverwege de kaarten, altijd zichtbaar (ook op touch) */
.band__pijl {
  position: absolute;
  z-index: 2;
  top: calc(var(--band-top) + var(--ad-h) / 2 - 28px);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 50%;
  background: rgb(5 5 5 / 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: 400 22px/1 var(--mono);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.band__pijl--terug {
  left: max(16px, calc((100% - var(--kader)) / 2 - 28px));
}

.band__pijl--verder {
  right: max(16px, calc((100% - var(--kader)) / 2 - 28px));
}

.band__pijl:hover,
.band__pijl:focus-visible {
  border-color: var(--text);
  background: var(--text);
  color: #000;
}

.band__pijl:active {
  transform: scale(0.96);
}

.band__pauze {
  margin-left: 10px;
}

.band__pauze {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  font: 400 12px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.band__pauze:hover {
  color: var(--text);
}

/* twee streepjes; gepauzeerd wordt het een driehoek */
.band__pauze-teken {
  width: 8px;
  height: 10px;
  border-inline: 3px solid currentColor;
}

.band--pauze .band__pauze-teken {
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* animaties uit: niets beweegt, je scrolt zelf door de advertenties */
.band--stil .band__venster {
  overflow-x: auto;
  padding-bottom: 14px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100% - var(--kader)) / 2); /* vastklikken op de kaderlijn, niet op de schermrand */
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-mask-image: none;
  mask-image: none;
}

.band--stil .band__venster::-webkit-scrollbar {
  height: 6px;
}

.band--stil .band__venster::-webkit-scrollbar-thumb {
  border: 0;
  background: var(--line-strong);
}

.band--stil .band__spoor {
  padding-right: calc((100% - var(--kader)) / 2);
}

.band--stil .band__ad {
  scroll-snap-align: start;
}

/* zonder beweging: geen pauzeknop, wel de pijlknoppen (die scrollen de rij) */
.band--stil .band__pauze {
  display: none;
}

@media (max-width: 767px) {
  .band {
    --ad-h: 260px;
    --ad-gap: 12px;
    --band-top: 40px;
  }

  .band__pijl {
    top: calc(var(--band-top) + var(--ad-h) / 2 - 24px);
    width: 48px;
    height: 48px;
    font-size: 19px;
  }

}

/* ---------- secties ---------- */

.sectie {
  position: relative;
  z-index: 1;
  padding-block: 128px;
  background: linear-gradient(var(--line), var(--line)) 50% 0 / var(--lijn) 1px no-repeat;
  counter-increment: sectie;
}

.nummer {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
  font: 400 14px/1 var(--mono);
  letter-spacing: var(--track);
}

.nummer::before {
  content: counter(sectie, decimal-leading-zero);
}

.nummer::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

h2 {
  max-width: 22ch;
  margin: 20px 0 0;
  font: 400 40px/1.1 var(--sans);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  margin: 0;
  font-weight: 400;
}

.tekst {
  max-width: 60ch;
  color: var(--text-2);
}

.tekst > * + * {
  margin-top: 1em;
}

.groot {
  color: var(--text);
  font-size: 20px;
  line-height: 1.6;
}

.label {
  color: var(--text-3);
  font: 400 14px/1.4 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .sectie {
    padding-block: 80px;
  }

  h2 {
    font-size: 28px;
    line-height: 1.15;
  }
}

/* 02 probleem: tekst links, kosten per aankoop rechts */
.probleem {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: center;
}

.probleem .tekst {
  margin-top: 32px;
}

.probleem .tekst .groot {
  margin-top: 1.4em;
}

/* Kosten per aankoop: elke variant wordt duurder, boven de grens kleurt de lijn oranje,
   dan komt de volgende. Lijnen en tijd komen uit site.js (deel 9). */
.moe {
  width: 100%;
  max-width: 460px;
  margin: 0;
  justify-self: end;
}

html:not(.js) .moe {
  display: none;
}

.moe__y {
  margin: 0 0 16px;
}

.moe__x {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 16px 0 0;
}

.moe__plot {
  position: relative;
  aspect-ratio: 5 / 4;
  border: 1px solid var(--border);
}

.moe__plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.moe__plot svg > path,
.moe__plot svg > rect,
.moe__getekend path,
.moe__nieuw rect {
  vector-effect: non-scaling-stroke;
}

.moe__raster {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
}

.moe__grens {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.moe__kruis {
  fill: var(--bg);
  stroke: var(--line-strong);
  stroke-width: 1;
}

#moe-arcering line {
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.5;
}

.moe__vlak {
  fill: url(#moe-arcering);
}

.moe__lijn {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: square;
}

.moe__lijn--duur {
  stroke: var(--accent);
}

.moe__wissel {
  fill: none;
  stroke: var(--text-4);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.moe__nu {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0;
}

.moe__punt {
  fill: var(--text);
  opacity: 0;
}

.moe__punt.is-duur {
  fill: var(--accent);
}

.moe__nieuw rect {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
}

.moe__nieuw .ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
}

.moe__variant {
  position: absolute;
  left: calc(var(--x) / 400 * 100%);
  top: calc(var(--y) / 320 * 100%);
  color: var(--text-4);
  font: 400 12px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: color 0.4s var(--ease);
}

.moe__variant.is-nu {
  color: var(--text-2);
}

/* 03 aanbod: rijen over de volle breedte */
.rijen {
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}

.rijen li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  transition: background-color 0.3s;
}

.rijen li:hover {
  background: linear-gradient(90deg, var(--surface), var(--surface)) no-repeat;
}

.rijen__nr {
  color: var(--text-4);
  font: 400 14px/1 var(--mono);
  letter-spacing: var(--track);
  transition: color 0.3s;
}

.rijen li:hover .rijen__nr {
  color: var(--accent);
}

.rijen__tekst {
  color: var(--text);
  font-size: 20px;
  line-height: 1.5;
}

.leeg-vak {
  display: grid;
  place-items: center;
  height: 100%;
  border: 1px dashed var(--accent-van);
  color: var(--accent-van);
  font: 400 12px/1.4 var(--mono);
  text-align: center;
}

.aanbod__voet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  margin-top: 40px;
}

.markeer {
  display: flex;
  gap: 14px;
  max-width: 62ch;
  color: var(--text-2);
}

.markeer::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
  background: var(--accent);
}

/* 03 werkwijze: vier stappen langs een doorlopende lijn, tekst links en een klein beeld rechts.
   Opbouw, ronde vormen, muis en beweging op verzoek van Thijs (31 okt), kleuren en letters van de site.
   Zonder JavaScript of met rustige beweging staat het eindbeeld stil (site.js, deel 12). */
.tijdlijn {
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.tijdlijn > li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 40px;
}

.tijdlijn__as {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tijdlijn__as::after {
  content: "";
  flex: 1;
  width: 2px;
  margin-top: 12px;
  background: var(--accent);
  opacity: 0.55;
}

.tijdlijn > li:last-child .tijdlijn__as::after {
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}

.tijdlijn__knoop {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font: 500 16px/1 var(--mono);
}

.tijdlijn__tekst {
  padding: 2px 0 72px;
}

.tijdlijn__titel {
  margin-top: 8px;
  color: var(--text);
  font-size: 24px;
  line-height: 1.25;
}

.tijdlijn p {
  margin-top: 12px;
  color: var(--text-2);
}

.tijdlijn b,
.wie b {
  color: var(--text);
  font-weight: inherit;
}

.tijdlijn__beeld {
  position: relative;
  align-self: start;
  max-width: 480px;
  margin-bottom: 72px;
}

.tijdlijn__beeld.is-zweeft {
  animation: tijdlijn-zweef 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.7s);
}

.tijdlijn.is-stil .tijdlijn__beeld {
  animation-play-state: paused;
}

@keyframes tijdlijn-zweef {
  from {
    transform: translateY(2px);
  }

  to {
    transform: translateY(-4px);
  }
}

/* de muis in de stappen: wijst, drukt in en laat een oranje ring achter */
.muis {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 22px;
  height: 22px;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.75s cubic-bezier(0.45, 0.05, 0.2, 1), opacity 0.25s;
}

.muis.is-aan {
  opacity: 1;
}

.muis svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.6));
  transform-origin: 0 0;
  transition: transform 0.14s;
}

.muis.is-klik svg {
  transform: scale(0.82);
}

.muis::before {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
}

.muis.is-klik::before {
  animation: muis-ring 0.5s ease-out;
}

@keyframes muis-ring {
  from {
    opacity: 0.9;
    transform: scale(0.3);
  }

  to {
    opacity: 0;
    transform: scale(1.2);
  }
}

.tijdlijn__voet {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}

.paneeltje {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  font-size: 16px;
  line-height: 1.4;
}

.tijdlijn .paneeltje__kop {
  margin: 0 0 14px;
  color: var(--text-3);
  font: 400 14px/1.3 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.vinklijst,
.uitslag,
.varianten ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vinklijst {
  display: grid;
  gap: 8px;
}

.vinklijst li {
  position: relative;
  padding-left: 28px;
  color: var(--text);
}

.vinklijst li::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(241 136 82 / 0.18);
}

.vinklijst li::after {
  content: "";
  position: absolute;
  top: 6.5px;
  left: 6px;
  width: 8px;
  height: 4px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.vinklijst li::before,
.vinklijst li::after {
  transition: opacity 0.25s;
}

.vinklijst li.is-open::before,
.vinklijst li.is-open::after {
  opacity: 0;
}

.etiketten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.etiket {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.3;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.25s, transform 0.25s;
}

.etiket--aan {
  border-color: var(--accent);
  background: var(--accent);
  color: #000;
}

.uitslag {
  display: grid;
  gap: 10px;
}

.uitslag li {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: var(--text-2);
  font-size: 15px;
}

.uitslag i {
  display: block;
  width: var(--b);
  height: 9px;
  border-radius: 2px;
  background: var(--line-strong);
  transition: width 0.9s var(--ease), background-color 0.25s;
}

.uitslag.is-leeg i {
  width: 0;
}

.uitslag.is-open .etiket {
  opacity: 0;
  transform: scale(0.8);
}

.uitslag.is-open .is-winnaar i {
  background: var(--line-strong);
}

.uitslag .is-winnaar {
  color: var(--text);
}

.uitslag .is-winnaar i {
  background: var(--accent);
}

.tijdlijn .paneeltje__waarom {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  transition: opacity 0.3s;
}

.tijdlijn .paneeltje__waarom.is-open {
  opacity: 0;
}

.levering,
.varianten {
  display: flex;
  gap: 14px;
}

.varianten {
  align-items: flex-start;
}

.levering figure,
.varianten figure {
  flex: 0 1 170px;
  min-width: 0;
  margin: 0;
}

.levering img,
.levering video,
.varianten img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

/* meerdere ads op elkaar: een klik van de muis laat de volgende zien */
.wissel {
  position: relative;
  display: block;
}

.wissel img {
  transition: opacity 0.4s;
}

.wissel img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.wissel img.is-weg {
  opacity: 0;
}

.wissel img.is-aan {
  opacity: 1;
}

/* onder het beeld, niet erop: een label op de ad dekt zijn kop af (Thijs, 21 okt) */
.levering figcaption,
.varianten figcaption {
  margin-top: 10px;
  color: var(--text-3);
  font: 400 12px/1.4 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.levering figcaption span + span::before,
.varianten figcaption span + span::before {
  content: " · ";
}

.varianten ul {
  display: grid;
  flex: none;
  justify-items: start;
  gap: 8px;
  padding-top: 12px;
}

.varianten .etiket {
  background: var(--surface);
  color: var(--text);
  white-space: nowrap;
}

.varianten .etiket--aan {
  background: var(--accent);
  color: #000;
}

.tijdlijn > li:last-child .tijdlijn__beeld {
  margin-bottom: 0;
}

@media (max-width: 899px) {
  .tijdlijn > li {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 20px;
  }

  .tijdlijn__as {
    grid-row: span 2;
  }

  .tijdlijn__tekst {
    padding-bottom: 20px;
  }

  .tijdlijn__beeld {
    grid-column: 2;
    width: 100%;
    margin-bottom: 44px;
  }
}

@media (max-width: 599px) {
  .tijdlijn > li {
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 14px;
  }

  .tijdlijn__knoop {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .paneeltje {
    padding: 16px;
  }

  .levering figcaption span,
  .varianten figcaption span {
    display: block;
  }

  .levering figcaption span + span::before,
  .varianten figcaption span + span::before {
    content: none;
  }

  .uitslag li {
    grid-template-columns: 92px minmax(0, 1fr) auto;
  }
}

/* 06 voor wie: links wat past (vlak, wit, oranje vinkjes), rechts wat niet past (open, grijs, kruisjes).
   Daaronder de klant: de zin links, de vijf kenmerken rechts. */
.wie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.wie__kant--wel {
  background: var(--surface);
}

.wie__kant--niet {
  border-left: 1px solid var(--border);
}

.wie__kop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--border);
  font: 400 14px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.wie__kant--wel .wie__kop {
  color: var(--text);
}

.wie__kant--niet .wie__kop {
  color: var(--text-3);
}

.wie ul {
  margin: 0;
  padding: 8px 28px 16px;
  list-style: none;
}

.wie li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  color: var(--text);
}

.wie li + li {
  border-top: 1px solid var(--line);
}

.wie__kant--niet li {
  color: var(--text-3);
}

/* vinkje en kruisje van 2px-blokjes, zoals de pijlen */
.wie__kop::before,
.wie li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  -webkit-mask: var(--teken) center / contain no-repeat;
  mask: var(--teken) center / contain no-repeat;
}

.wie li::before {
  margin-top: 0.3em;
}

.wie__kant--wel {
  --teken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M12 3h2v2h-2zM9 6h2v2H9zM0 9h2v2H0zM6 9h2v2H6zM3 12h2v2H3z'/%3E%3C/svg%3E");
}

.wie__kant--niet {
  --teken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M0 0h2v2H0zM12 0h2v2h-2zM3 3h2v2H3zM9 3h2v2H9zM6 6h2v2H6zM3 9h2v2H3zM9 9h2v2H9zM0 12h2v2H0zM12 12h2v2h-2z'/%3E%3C/svg%3E");
}

.wie__kant--niet .wie__kop::before,
.wie__kant--niet li::before {
  background: var(--text-4);
}

.wie__mens {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  margin-top: 64px;
}

.wie__zin {
  color: var(--text);
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.wie__mens ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.wie__mens li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
}

.wie__mens li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
  background: var(--accent);
}

/* 07 prijs: drie pakketten naast elkaar, het duurste eerst (anker), Groei licht uitgelicht.
   Kop, prijs en elke regel van de lijst (9 per pakket, in dezelfde volgorde) lopen via subgrid op één lijn
   over de drie kaarten. Daaronder de voorwaarden. */
.pakketten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}

.pakket {
  display: grid;
  grid-row: span 11;
  grid-template-rows: subgrid;
  row-gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pakket--keuze {
  border-color: var(--line-strong);
  background: var(--surface);
}

.pakket__kop {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px 28px 0;
}

.pakket__vlag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: var(--accent);
  font: 400 13px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.pakket__vlag::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
}

.pakket__naam {
  color: var(--text);
  font: 400 28px/1.1 var(--sans);
  letter-spacing: -0.02em;
}

.pakket__voor {
  margin-top: 8px;
  color: var(--text-3);
  font-size: 16px;
  line-height: 1.5;
}

.pakket__prijs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 0;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
}

.pakket__bedrag {
  color: var(--text);
  font: 400 40px/1 var(--sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pakket__per {
  color: var(--text-3);
  font: 400 13px/1.4 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.pakket__lijst {
  display: grid;
  grid-row: span 9;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 12px 28px 24px;
  list-style: none;
}

.pakket__lijst li {
  display: flex;
  gap: 14px;
  padding: 9px 0;
  color: var(--text-2);
  font-size: 17px;
  line-height: 1.5;
}

.pakket__lijst li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.6em;
  background: var(--text-4);
}

.pakket__lijst li.pakket__geen {
  color: var(--text-4);
}

.pakket__lijst li.pakket__geen::before {
  border: 1px solid var(--line-strong);
  background: none;
}

.pakket__lijst b {
  color: var(--text);
  font-weight: inherit;
}

/* onder 900 px: per pakket eerst 3 regels, de rest achter een knop (20 okt); de knop maakt site.js */
.pakket__meer {
  display: none;
}

@media (max-width: 899px) {
  .js .pakket:not(.is-open) .pakket__lijst li:nth-child(n + 4) {
    display: none;
  }

  .pakket__meer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font: 500 14px/1.3 var(--mono);
    letter-spacing: var(--track);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.25s;
  }

  .pakket__meer:hover {
    border-color: var(--line-strong);
  }
}

.voorwaarden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}

.voorwaarden .paneel__rij {
  grid-template-columns: 150px 1fr;
}

.voorwaarden .paneel__rij + .paneel__rij {
  border-top: 0;
}

.voorwaarden .paneel__rij:nth-child(n + 3) {
  border-top: 1px solid var(--border);
}

.voorwaarden .paneel__rij:nth-child(even) {
  border-left: 1px solid var(--border);
}

.paneel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.paneel__rij {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  padding: 24px 28px;
}

.paneel__rij + .paneel__rij {
  border-top: 1px solid var(--border);
}

.paneel__rij p {
  color: var(--text);
}

.paneel__rij p::first-letter {
  text-transform: uppercase;
}

.paneel__rij--garantie .label {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--text);
}

.paneel__rij--garantie .label::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

/* 08 over mij: smalle kolom */
.over {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
}

.over--foto {
  grid-template-columns: 300px minmax(0, 640px);
  gap: 64px;
  align-items: start;
}

.over__foto {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.over__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.over .tekst {
  margin-top: 32px;
}

/* 09 vragen: kop plakt links, lijst rechts */
.vragen {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 64px;
  align-items: start;
}

.vragen__kop {
  position: sticky;
  top: calc(var(--kop-h) + 40px);
}

.vraag {
  border-top: 1px solid var(--line);
}

.vraag:last-child {
  border-bottom: 1px solid var(--line);
}

.vraag summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.vraag summary::-webkit-details-marker {
  display: none;
}

.plus {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 7px;
  color: var(--text-3);
  transition: color 0.3s;
}

.plus::before,
.plus::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease);
}

.plus::before {
  top: 5.5px;
  left: 0;
  width: 12px;
  height: 1px;
}

.plus::after {
  top: 0;
  left: 5.5px;
  width: 1px;
  height: 12px;
}

.vraag summary:hover .plus,
.vraag[open]:not(.is-dicht) .plus {
  color: var(--accent);
}

.vraag[open]:not(.is-dicht) .plus::after {
  transform: scaleY(0);
}

.vraag__antwoord {
  overflow: hidden;
}

.vraag__antwoord p {
  max-width: 62ch;
  padding: 0 40px 26px 0;
  color: var(--text-2);
}

/* 10 afsluiting: gecentreerd */
.afsluiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.afsluiting .nummer {
  justify-content: center;
}

.afsluiting h2 {
  margin-inline: auto;
}

.afsluiting .groot {
  max-width: 60ch;
  margin-top: 24px;
  color: var(--text-2);
}

/* het contactmotief uit de hero, klein: twee oranje pixels naderen elkaar, raken, en er springt een vonk af */
.contact {
  --breed: 160px;
  --reis: calc((var(--breed) - 7px) / 2);
  position: relative;
  display: block;
  width: var(--breed);
  height: 7px;
}

.contact::before,
.contact::after {
  content: "";
  position: absolute;
  top: 0;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

.contact::before {
  left: 0;
  --naar: var(--reis);
}

.contact::after {
  right: 0;
  --naar: calc(-1 * var(--reis));
}

.contact i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  background: var(--accent-van);
  opacity: 0;
}

.contact i:nth-child(odd) {
  background: var(--text);
}

.contact i:nth-child(1) { --r: 0deg; --d: 38px; }
.contact i:nth-child(2) { --r: 45deg; --d: 26px; }
.contact i:nth-child(3) { --r: 90deg; --d: 22px; }
.contact i:nth-child(4) { --r: 135deg; --d: 26px; }
.contact i:nth-child(5) { --r: 180deg; --d: 38px; }
.contact i:nth-child(6) { --r: 225deg; --d: 26px; }
.contact i:nth-child(7) { --r: 270deg; --d: 22px; }
.contact i:nth-child(8) { --r: 315deg; --d: 26px; }

.contact b {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border: 1px solid var(--accent);
  opacity: 0;
}

/* afsluiting: de twee pixels staan stil (20 okt: alleen de handen in de hero bewegen) */
.contact--lus {
  margin: 0 auto 40px;
}





/* 11 formulier: kop over de volle breedte, formulier eronder */
.aanvraag h2 {
  max-width: none;
}

.aanvraag > div + div {
  max-width: 760px;
  margin-top: 48px;
}

.formulier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.veld {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.veld--breed {
  grid-column: 1 / -1;
}

.veld > label,
.veld legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.4;
}

.optioneel {
  color: var(--text-4);
  font: 400 13px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.veld input[type="text"],
.veld input[type="email"],
.veld input[type="tel"],
.veld textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: 400 18px/1.4 var(--sans);
  transition: border-color 0.2s;
}

.veld textarea {
  min-height: 128px;
  resize: vertical;
}

.veld input:hover,
.veld textarea:hover {
  border-color: var(--text-4);
}

fieldset.veld {
  margin: 0;
  padding: 0;
  border: 0;
}

.keuzes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.keuze {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.keuze:hover {
  border-color: var(--text-4);
}

.keuze:has(input:checked) {
  border-color: var(--text);
  background: var(--surface);
}

.keuze input {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--text-3);
  border-radius: 50%;
}

.keuze input::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text);
  transform: scale(0);
  transition: transform 0.25s var(--ease);
}

.keuze input:checked {
  border-color: var(--text);
}

.keuze input:checked::before {
  transform: scale(1);
}

.toestemming {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-height: 44px;
  color: var(--text);
  cursor: pointer;
}

.toestemming input {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  cursor: pointer;
}

.toestemming input::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-top: -2px;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.25s var(--ease);
}

.toestemming input:checked {
  border-color: var(--text);
  background: var(--text);
}

.toestemming input:checked::before {
  transform: rotate(-45deg) scale(1);
}

.is-fout input[type="text"],
.is-fout input[type="email"],
.is-fout input[type="tel"],
.is-fout .keuze,
.is-fout .toestemming input {
  border-color: var(--accent);
}

.is-fout > label::before,
.is-fout legend::before,
.toestemming.is-fout::before {
  content: "";
  flex: none;
  align-self: center;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

.toestemming.is-fout::before {
  align-self: flex-start;
  margin-top: 0.62em;
}

.verstuur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.verstuur .knop[aria-busy="true"] {
  cursor: progress;
}

.knop[aria-busy="true"] .knop__pijl rect {
  animation: pijl-loop 1.2s steps(1) infinite;
  animation-delay: calc(var(--k) * 90ms);
}

.verstuur small {
  color: var(--text-4);
  font-size: 15px;
  line-height: 1.5;
}

.verstuur small a {
  color: var(--text-2);
}

.melding {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--text);
}

.melding::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
  background: var(--accent);
}

.gelukt {
  padding: 40px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.gelukt:focus {
  outline: none;
}

/* aanvraag verstuurd = contact: de twee pixels raken elkaar één keer en blijven samen */
.contact--een {
  --breed: 64px;
  margin: 8px 0 36px 8px;
}

.contact--een::before,
.contact--een::after {
  animation: contact-een-reis 1.6s both;
}

.contact--een i {
  animation: contact-een-vonk 1.6s both;
}

.contact--een b {
  animation: contact-een-ring 1.6s both;
}

@keyframes contact-een-reis {
  0%,
  12% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.55, 0, 0.25, 1);
  }
  45%,
  100% {
    transform: translateX(var(--naar));
  }
}

@keyframes contact-een-vonk {
  0%,
  44.9% {
    opacity: 0;
    transform: rotate(var(--r)) translateX(0);
  }
  45% {
    opacity: 1;
    transform: rotate(var(--r)) translateX(0);
    animation-timing-function: var(--aankomst);
  }
  85%,
  100% {
    opacity: 0;
    transform: rotate(var(--r)) translateX(var(--d));
  }
}

@keyframes contact-een-ring {
  0%,
  44.9% {
    opacity: 0;
    transform: scale(0.5);
  }
  45% {
    opacity: 1;
    transform: scale(0.5);
    animation-timing-function: var(--aankomst);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(6);
  }
}

.gelukt__kop {
  color: var(--text);
  font: 400 30px/1.1 var(--sans);
  letter-spacing: -0.02em;
}

.gelukt p + p {
  margin-top: 14px;
  color: var(--text-2);
}

.gelukt a {
  color: var(--text);
}

.honing {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- voet ---------- */

.voet {
  position: relative;
  z-index: 1;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

.voet__rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.voet__gegevens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-4);
  font: 400 14px/1.6 var(--mono);
}

.voet__gegevens li + li::before {
  content: "·";
  margin-inline: 12px;
  color: var(--line-strong);
}

.voet__gegevens a {
  position: relative;
  text-decoration: none;
}

.voet__gegevens a::after {
  content: "";
  position: absolute;
  inset: -13px -6px;
}

.voet__gegevens a:hover {
  color: var(--text);
}

.voet .arcering {
  margin-top: 56px;
}

/* ---------- privacypagina ---------- */

.privacy {
  padding-block: 96px 128px;
}

.privacy h1 {
  margin: 20px 0 0;
  font: 400 clamp(32px, 4.4vw, 56px) / 1.08 var(--sans);
  letter-spacing: -0.02em;
}

.privacy h2 {
  max-width: 820px;
  margin: 96px 0 0;
}

.privacy dl {
  max-width: 820px;
  margin: 56px 0 0;
  border-bottom: 1px solid var(--line);
}

.privacy dl > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.privacy dt {
  color: var(--text-3);
  font: 400 14px/1.6 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.privacy dd {
  margin: 0;
  color: var(--text);
}

/* ---------- achtergrond: studiolicht met de gloed van het contact ---------- */

/* zacht lichtpunt van boven, alsof de handen in een fotostudio staan; blijft staan terwijl je scrolt */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(85% 65% at 50% -8%, #1e1d1c 0%, rgb(20 20 20 / 0.7) 38%, transparent 72%),
    radial-gradient(60% 40% at 50% 108%, #0f0f0f 0%, transparent 70%);
}

/* fijne korrel: zwart oogt niet plat en de lichtverlopen breken niet in banden */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.4 0 0 0 -.62'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.09;
}

/* de menubalk ligt licht doorzichtig op het studiolicht in plaats van als harde zwarte balk */
.kop {
  background: rgb(5 5 5 / 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* een lage, warme gloed achter de handen; handen.js zet --gloed (0 tot 1) en laat hem opvlammen bij contact */
.hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(1500px, 150vw);
  height: 75%;
  pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(
    50% 55% at 50% 72%,
    rgb(241 136 82 / calc(0.11 + var(--gloed, 0) * 0.3)) 0%,
    rgb(241 136 82 / calc(0.04 + var(--gloed, 0) * 0.08)) 42%,
    transparent 74%
  );
}

/* ---------- boekvenster: dag, tijd en aanvraag in één venster ---------- */

/* dag- en tijdkeuze in het formulier */
html:not(.js) .planner {
  display: none;
}

.planner {
  gap: 18px;
}

.planner__rij {
  display: grid;
  gap: 10px;
}

.planner__label {
  color: var(--text-3);
  font: 400 12px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
}

.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    color 0.2s,
    transform 0.12s;
}

.chip span:hover {
  border-color: var(--text-4);
}

.chip:active span {
  transform: translateY(1px);
}

.chip input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: #000;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .chip span {
    min-height: 44px;
  }
}

/* nieuwe tijden komen als lijst binnen */
.chips--nieuw .chip {
  animation: chip-in 0.4s var(--aankomst) both;
  animation-delay: calc(var(--i, 0) * 18ms);
}

@keyframes chip-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.is-fout .chip span {
  border-color: var(--accent);
}

.gelukt__moment {
  color: var(--accent);
  font: 400 13px/1.5 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.gelukt p.gelukt__moment {
  color: var(--accent);
}

/* het venster */
html.boek-open {
  overflow: hidden;
}

.boek {
  width: min(780px, 100% - 2 * max(16px, env(safe-area-inset-left), env(safe-area-inset-right)));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 60% at 50% -10%, #1a1918 0%, transparent 60%),
    #070707;
  color: var(--text);
}

.boek::backdrop {
  background: rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.boek[open] {
  animation: boek-in 0.5s var(--aankomst);
}

.boek[open]::backdrop {
  animation: achter-in 0.3s ease;
}

.boek.is-dicht {
  animation: boek-uit 0.2s ease forwards;
}

.boek.is-dicht::backdrop {
  animation: achter-uit 0.2s ease forwards;
}

@keyframes boek-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
}

@keyframes boek-uit {
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
}

@keyframes achter-in {
  from {
    opacity: 0;
  }
}

@keyframes achter-uit {
  to {
    opacity: 0;
  }
}

.boek__kader {
  position: relative;
  padding: 44px 44px 40px;
}

/* snijtekens op de hoeken, zoals bij de tweede link */
.boek__hoek {
  position: absolute;
  width: 11px;
  height: 11px;
  color: var(--text-4);
}

.boek__hoek::before,
.boek__hoek::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.boek__hoek::before {
  top: 5px;
  left: 0;
  width: 11px;
  height: 1px;
}

.boek__hoek::after {
  top: 0;
  left: 5px;
  width: 1px;
  height: 11px;
}

.boek__hoek:nth-child(1) {
  top: 10px;
  left: 10px;
}

.boek__hoek:nth-child(2) {
  top: 10px;
  right: 10px;
}

.boek__hoek:nth-child(3) {
  bottom: 10px;
  left: 10px;
}

.boek__hoek:nth-child(4) {
  right: 10px;
  bottom: 10px;
}

.boek__sluit {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-2);
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s,
    transform 0.12s;
}

.boek__sluit:hover {
  border-color: var(--line-strong);
  color: var(--text);
}

.boek__sluit:active {
  transform: translateY(1px);
}

.boek__sluit svg {
  width: 14px;
  height: 14px;
}

.boek__oog {
  font-size: 13px;
}

.boek h2 {
  max-width: 18ch;
  margin-top: 18px;
  font-size: 34px;
}

.boek__sub {
  margin-top: 12px;
  color: var(--text-4);
  font: 400 14px/1.5 var(--mono);
}

.boek__plek {
  margin-top: 32px;
}

/* hoe het werkt, in het venster "aanvraag": drie stappen met oranje mono-label, witte regel en vierkantjes op de lijnen */
.werkt {
  margin-top: 28px;
}

.werkt__kop {
  color: var(--text-3);
  font: 400 12px/1 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

.werkt__stappen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.werkt__stappen li {
  position: relative;
  padding: 18px 20px 20px 0;
}

.werkt__stappen li + li {
  padding-left: 20px;
  border-left: 1px solid var(--line);
}

.werkt__stappen li + li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-strong);
  background: #070707;
}

.werkt__tekst {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.4;
}

.boek[open] .werkt__stappen li {
  animation: in-beeld 0.6s var(--aankomst) both;
  animation-delay: calc(0.12s + var(--i, 0) * 0.08s);
}

.boek[open] .werkt__stappen li + li::before {
  animation: merk-pop 0.3s var(--aankomst) both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.08s);
}

.boek .formulier {
  gap: 20px;
}

@media (max-width: 767px) {
  .boek {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .boek[open] {
    animation-name: boek-in-mobiel;
  }

  @keyframes boek-in-mobiel {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
  }

  .boek__kader {
    padding: 72px 16px calc(32px + env(safe-area-inset-bottom));
  }

  /* dagen in één rij die je opzij veegt, zodat je niet eerst door zes rijen scrolt; de tijden blijven een raster */
  .chips[data-dagen] {
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding: 4px 24px 4px 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  }

  .chips[data-dagen]::-webkit-scrollbar {
    display: none;
  }

  .chips[data-dagen] .chip {
    flex: none;
    scroll-snap-align: start;
  }

  .boek h2 {
    font-size: 28px;
  }

  .werkt__stappen {
    grid-template-columns: 1fr;
  }

  .werkt__stappen li,
  .werkt__stappen li + li {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    border-left: 0;
  }

  .werkt__tekst {
    margin-top: 0;
  }

  .werkt__stappen li + li {
    border-top: 1px solid var(--line);
  }

  .werkt__stappen li + li::before {
    display: none;
  }
}

/* ---------- conceptweergave (?concept) ---------- */

.leeg {
  outline: 1px dashed var(--accent-van);
  outline-offset: 2px;
  color: var(--accent-van) !important;
}

.concept-label {
  display: none;
}

.concept .concept-label {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  z-index: 90;
  display: block;
  padding: 8px 10px;
  border: 1px dashed var(--accent-van);
  background: var(--bg);
  color: var(--accent-van);
  font: 400 12px/1.4 var(--mono);
  letter-spacing: var(--track);
  text-transform: uppercase;
}

/* ---------- beweging buiten de hero ---------- */

/* lijsten die als lijst binnenkomen: eerst trekt de lijn zich, dan verschijnt de tekst (alleen met JavaScript) */
.rijen li {
  position: relative;
}



/* knoppen en keuzes geven mee als je ze indrukt */
.knop--primair,
.knop--rand,
.snijlink,
.keuze {
  transition:
    background-color 0.25s,
    border-color 0.25s,
    transform 0.12s;
}

.knop:active,
.snijlink:active,
.keuze:active {
  transform: translateY(1px);
}

/* fouten: het markeringsblokje springt op, de melding schuift in beeld */
.is-fout > label::before,
.is-fout legend::before,
.toestemming.is-fout::before {
  animation: merk-pop 0.3s var(--aankomst);
}

@keyframes merk-pop {
  from {
    transform: scale(0);
  }
}

.melding:not([hidden]) {
  animation: melding-in 0.4s var(--aankomst);
}

@keyframes melding-in {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}

/* na een klik op een actieknop knikt het formulier bij aankomst */
.sectie.is-aangekomen .nummer::after {
  transform-origin: 0 50%;
  animation: nummer-wijs 1.1s var(--aankomst);
}

@keyframes nummer-wijs {
  0%,
  100% {
    opacity: 0.6;
    transform: scaleX(1);
  }
  35% {
    opacity: 1;
    transform: scaleX(3.5);
  }
}

/* ---------- smalle schermen ---------- */

@media (max-width: 899px) {
  .probleem,
  .vragen,
  .over--foto {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* onder elkaar, in dezelfde volgorde: Schaal, Groei, Start */
  .pakketten {
    grid-template-columns: minmax(0, 560px);
    gap: 16px;
  }

  .pakket,
  .pakket__lijst {
    display: block;
    grid-row: auto;
  }

  .voorwaarden {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .voorwaarden .paneel__rij:nth-child(n + 2) {
    border-top: 1px solid var(--border);
  }

  .voorwaarden .paneel__rij:nth-child(even) {
    border-left: 0;
  }

  .moe {
    justify-self: start;
  }

  .vragen__kop {
    position: static;
  }

  .over--foto .over__foto {
    max-width: 300px;
  }
}

@media (max-width: 767px) {
  .rijen li {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 18px 0;
  }

  .rijen__tekst {
    font-size: 18px;
  }

  .aanbod__voet .knop {
    width: 100%;
    min-height: 48px;
  }

  .aanbod__voet .knop__tekst {
    flex: 1;
    justify-content: center;
    padding-inline: 12px;
    text-align: center;
  }

  .tijdlijn__titel {
    font-size: 22px;
  }

  .wie {
    grid-template-columns: 1fr;
  }

  .wie__kant--niet {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .wie__kop {
    padding: 18px 20px;
  }

  .wie ul {
    padding: 4px 20px 12px;
  }

  .wie__mens {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 48px;
  }

  .wie__zin {
    font-size: 22px;
  }

  .paneel__rij {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px;
  }

  .voorwaarden .paneel__rij {
    grid-template-columns: 1fr;
  }

  .pakket__kop {
    padding: 24px 20px 0;
  }

  .pakket__prijs {
    padding: 20px;
  }

  .pakket__bedrag {
    font-size: 36px;
  }

  .pakket__lijst {
    padding: 8px 20px 16px;
  }

  .vraag summary {
    font-size: 18px;
  }

  .vraag__antwoord p {
    padding-right: 0;
  }

  .afsluiting .acties .knop {
    width: 100%;
  }

  .formulier {
    grid-template-columns: 1fr;
  }

  .keuzes {
    grid-template-columns: 1fr;
  }

  .verstuur .knop {
    width: 100%;
    min-height: 48px;
  }

  .verstuur .knop__tekst {
    flex: 1;
    justify-content: center;
  }

  .gelukt {
    padding: 32px 20px;
  }

  .privacy dl > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ---------- animaties uit ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }

}